minor UI updates

3 files changed, 25 insertions, 20 deletions

diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 421013f90..8bcc1f98a 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -911,7 +911,7 @@ export class CurrentUserUtils {
             doc["dockedBtn-redo"] = CurrentUserUtils.ficon({ onClick: ScriptField.MakeScript("redo()"), dontUndo: true, _stayInCollection: true, btnType: ButtonType.ToolButton, _dropAction: "alias", _hideContextMenu: true, _removeDropProperties: new List<string>(["dropAction", "_hideContextMenu", "stayInCollection"]), toolTip: "Click to redo", title: "redo", icon: "redo-alt", system: true });
         }
         if (doc.dockedBtns === undefined) {
-            doc.dockedBtns = CurrentUserUtils.linearButtonList({ title: "docked buttons", _height: 30, linearViewExpandable: true, ignoreClick: true }, [doc["dockedBtn-undo"] as Doc, doc["dockedBtn-redo"] as Doc]);
+            doc.dockedBtns = CurrentUserUtils.linearButtonList({ title: "docked buttons", _height: 40, flexGap: 5, linearViewExpandable: true, ignoreClick: true }, [doc["dockedBtn-undo"] as Doc, doc["dockedBtn-redo"] as Doc]);
         }
         (doc["dockedBtn-undo"] as Doc).dontUndo = true;
         (doc["dockedBtn-redo"] as Doc).dontUndo = true;
@@ -969,10 +969,10 @@ export class CurrentUserUtils {
                 script: 'changeView',
             },
             {
-                title: "Background", toolTip: "Background", btnType: ButtonType.ColorButton, width: 60, ignoreClick: true, icon: "fill-drip",
+                title: "Background", toolTip: "Background", btnType: ButtonType.ColorButton, ignoreClick: true, icon: "fill-drip",
                 script: "changeBackgroundColor"
             },
-            { title: "Overlay", toolTip: "Overlay", btnType: ButtonType.ToggleButton, icon: "layer-group", click: 'toggleOverlay()' },
+            { title: "Overlay", toolTip: "Overlay", btnType: ButtonType.ToggleButton, icon: "layer-group", click: 'toggleOverlay()', script:'toggleOverlay'},
             { title: "Text", type: "TextMenu" },
             { title: "Ink & GFX", type: "InkMenu" },
             // { title: "Ink Tools", type: "LinearMenu", icon: "pen-nib" },
diff --git a/src/client/views/nodes/button/FontIconBox.scss b/src/client/views/nodes/button/FontIconBox.scss
index f0ca43a09..db42bdf5d 100644
--- a/src/client/views/nodes/button/FontIconBox.scss
+++ b/src/client/views/nodes/button/FontIconBox.scss
@@ -79,13 +79,19 @@
     &.colorBtn {
         color: black;
         cursor: pointer;
-        flex-direction: row;
+        flex-direction: column;
         background: transparent;
 
+        .colorButton-color {
+            margin-top: 3px;
+            width: 90%;
+            height: 6px;
+        }
+
         .menuButton-dropdownBox {
             position: absolute;
-            width: 150px;
-            height: 250px;
+            width: fit-content;
+            height: fit-content;
             top: 100%;
             z-index: 21;
             background-color: #e3e3e3;
diff --git a/src/client/views/nodes/button/FontIconBox.tsx b/src/client/views/nodes/button/FontIconBox.tsx
index b4b6ba76c..4f52e90b7 100644
--- a/src/client/views/nodes/button/FontIconBox.tsx
+++ b/src/client/views/nodes/button/FontIconBox.tsx
@@ -230,25 +230,27 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon
             const hex: string = value.hex;
             const s = ScriptField.MakeScript(script + '("' + hex + '")');
             if (s) {
-                // console.log(s.script);
                 s.script.run().result;
             }
-        }
+        };
         return (
             <div className={`menuButton ${this.type} ${active}`}
-                style={{ display: selectedDoc ? undefined : "none", color: color, backgroundColor: selectedDoc ? selectedDoc._backgroundColor : backgroundColor, borderBottomLeftRadius: this.dropdown ? 0 : undefined }}
+                style={{ display: selectedDoc ? undefined : "none", color: color, borderBottomLeftRadius: this.dropdown ? 0 : undefined }}
                 onClick={() => this.rootDoc.dropDownOpen = !this.rootDoc.dropDownOpen}
                 onPointerDown={e => e.stopPropagation()}>
                 <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={this.icon} color={color} />
+                <div className="colorButton-color"
+                    style={{ backgroundColor: selectedDoc ? selectedDoc._backgroundColor : backgroundColor }}
+                ></div>
                 {label}
-                {dropdownCaret}
+                {/* {dropdownCaret} */}
                 {this.rootDoc.dropDownOpen ?
                     <div>
                         <div className="menuButton-dropdownBox"
                             onPointerDown={e => e.stopPropagation()}
                             onClick={e => e.stopPropagation()}
                             style={{ left: 0 }}>
-                            {colorBox((color) => click(color))}
+                            {colorBox(click)}
                         </div>
                         <div className="dropbox-background" onClick={(e) => { e.stopPropagation(); this.rootDoc.dropDownOpen = false; }} />
                     </div>
@@ -262,23 +264,20 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon
         const selectedDoc = numSelected > 0 ? SelectionManager.Views()[0].Document : undefined;
 
         const script: string = StrCast(this.rootDoc.script) + "(true)";
-        let toggleTrue: boolean | undefined = false;
-        if (script == 'toggleOverlay') {
-            toggleTrue = selectedDoc && BoolCast(selectedDoc.z);
-            console.log('toggleOverlay');
-        }
         const boolResult = ScriptField.MakeScript(script)?.script.run().result;
-        // console.log(this.rootDoc.title, script, boolResult);
+        if (script.includes("toggleOverlay")) {
+            console.log("boolResult: " + boolResult);
+        }
+
         const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color);
         const backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor);
-        // const canClick: boolean = this.rootDoc.canClick ? eval(StrCast(this.rootDoc.canClick)) : false;
         const label = !this.label || !Doc.UserDoc()._showLabel ? (null) :
             <div className="fontIconBox-label" style={{ color: color, backgroundColor: backgroundColor, position: "absolute" }}>
                 {this.label}
             </div>;
         return (
-            <div className={`menuButton ${this.type}`} style={{ opacity: 1, backgroundColor: toggleTrue ? Colors.MEDIUM_BLUE : "transparent" }}>
-                <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={this.icon} color={toggleTrue ? Colors.LIGHT_GRAY : Colors.LIGHT_GRAY} />
+            <div className={`menuButton ${this.type}`} style={{ opacity: 1, backgroundColor: boolResult ? Colors.MEDIUM_BLUE : "transparent" }}>
+                <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={this.icon} color={boolResult ? Colors.LIGHT_GRAY : Colors.LIGHT_GRAY} />
                 {label}
             </div>
         )