- preview plugin updates

- theming updates

Author: tdonuk

src/BaseTheme.css

@@ -16,10 +16,14 @@ body {
     background-color: var(--action-bg);
 }
 
-.selected {
+.editorToolWrapper.selected {
     background-color: var(--action-bg);
 }
 
+#toolWindowHeader {
+    background-color: var(--secondary-bg);
+}
+
 /* TOP BAR */
 .cet-menubar-menu-button {
     cursor: pointer !important;

src/index.css

@@ -21,8 +21,6 @@ body, html {
 
     height: 100% !important;
 
-    border: 1px solid;
-
     display: flex;
     flex-direction: column;
 
@@ -50,34 +48,45 @@ body, html {
     justify-content: space-between;
     width: fit-content;
     max-width: 50%;
-
-    border: 1px solid;
 }
 
 #editorTools {
     border: 1px solid;
 
     min-width: 50px;
     max-width: 100%;
-
-    display: flex;
-    flex-direction: column;
-    align-items: center;
 }
 
 #toolWindow {
-    padding: 5px;
-
     height: 100%;
     max-width: 100%;
 
-    width: fit-content;
-
-    display: flex;
-    justify-content: center;
+    width: 40vw;
 
     resize: horizontal;
     overflow: auto;
+
+    border-left: 1px solid;
+}
+
+#toolWindowHeader {
+    display: flex;
+    justify-content: space-between;
+    border-bottom: 1px solid;
+}
+
+#toolWindowTitle {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+    margin-right: 5px;
+}
+
+#toolWindowButtons {
+    padding: 5px;
+    display: flex;
+    align-items: center;
 }
 
 #toolWindowContent {
@@ -86,10 +95,11 @@ body, html {
 }
 
 .editorToolWrapper {
-    width: min-content;
+    width: 100%;
     height: min-content;
     display: flex;
     justify-content: space-between;
+    align-items: center;
 
     padding: 5px;
     writing-mode: vertical-lr;
@@ -104,15 +114,6 @@ body, html {
     margin: 5px;
 }
 
-.cm-theme-none {
-    width: 100%;
-    height: 100%;
-}
-
-.cm-editor {
-    height: 100%;
-}
-
 #footer {
     font-size: 0.8rem;
 

src/react/components/EditorContainer.tsx

@@ -13,6 +13,8 @@ import {useEditorContext} from "./editor/EditorContext";
 import {allPlugins} from "../../utils/PluginLoader";
 import {ToolbarMenuItem} from "./editor/plugins";
 import DOMPurify from "dompurify";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {faTimesRectangle} from "@fortawesome/free-regular-svg-icons/faTimesRectangle";
 
 const debounceDelay = 200; // Delay in milliseconds
 let changeDebounceTimer: NodeJS.Timeout; // Timer for change event
@@ -172,6 +174,14 @@ export default function EditorContainer() {
             <div id={"editorToolsWrapper"}>
                 { activeTool &&
                     <div id={"toolWindow"}>
+                        <div id={"toolWindowHeader"}>
+                            <div id={"toolWindowButtons"}>
+                                <FontAwesomeIcon className={"iconButton"} icon={faTimesRectangle} onClick={() => setActiveTool(undefined)} />
+                            </div>
+                            <div id={"toolWindowTitle"}>
+                                <span>{activeTool.label}</span>
+                            </div>
+                        </div>
                         <div id={"toolWindowContent"}>
                         </div>
                     </div>

src/react/components/editor/plugins/PreviewPlugin.ts

@@ -44,23 +44,39 @@ export default class PreviewPlugin implements EditorPlugin {
                             * {
                                 font-size: 14px;
                             }
+                            
+                            .warning {
+                                padding: 5px;
+                            }
+                            
                             .warning, .warning > *{
                                 background-color: rgb(195,169,90) !important;
                                 color: black !important;
                             }
+                            
                             #previewRefresh {
                                 transition: 0.2s all ease;
-                                margin: 5px;
+                                margin: 5px 0;
                                 padding: 5px;
                                 border: 1px solid black;
                                 cursor: pointer;
                                 display: flex;
                                 align-items: center;
+                                background-color: darkgray;
+                                border-radius: 5px;
+                                color: black;
                             }
+                            
                             #previewRefresh:hover {
                                 background-color: #cf681f !important;
                             }
                             
+                            #previewButtons {
+                                display: flex;
+                                align-items: center;
+                                border-bottom: 1px solid;
+                            }
+                            
                             #previewContent {
                                 width: 100%;
                                 height: 100%;
@@ -70,9 +86,10 @@ export default class PreviewPlugin implements EditorPlugin {
                                 color: black;
                                 padding: 5px;
                                 box-sizing: border-box;
+                                overflow: auto;
                             }
                         </style>
-                        <div id="previewButtons" style="display: flex; align-items: center; border-bottom: 1px solid; background-color: #323232;">
+                        <div id="previewButtons">
                             <div id="previewRefresh">
                                 <img src="${refreshIcon}" alt="" width="20" style="margin: 0 5px"/>
                                 <span>Refresh</span>