From b4ca0114a0328e937e57b805e402d44606d2c812 Mon Sep 17 00:00:00 2001
From: geireann <60007097+geireann@users.noreply.github.com>
Date: Sat, 21 Aug 2021 11:49:01 -0400
Subject: minor UI updates

---
 src/client/views/nodes/button/FontIconBox.scss | 12 +++++++++---
 src/client/views/nodes/button/FontIconBox.tsx  | 27 +++++++++++++-------------
 2 files changed, 22 insertions(+), 17 deletions(-)

(limited to 'src/client/views/nodes/button')

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>
         )
-- 
cgit v1.2.3-70-g09d2