more bits and pieces (ahhhh)

1 files changed, 49 insertions, 17 deletions

diff --git a/src/client/views/nodes/button/FontIconBox.tsx b/src/client/views/nodes/button/FontIconBox.tsx
index 7ff3e388f..f78bb6842 100644
--- a/src/client/views/nodes/button/FontIconBox.tsx
+++ b/src/client/views/nodes/button/FontIconBox.tsx
@@ -106,21 +106,15 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon
         };
 
         // Script for checking the outcome of the toggle
-        const checkScript: string = StrCast(this.rootDoc.script) + "(true)";
+        const checkScript: string = StrCast(this.rootDoc.script) + "(0, true)";
         const checkResult: number = ScriptField.MakeScript(checkScript)?.script.run().result;
 
-        const dropdown =
-            <div
-                className="menuButton-dropdownBox"
-                style={{ left: 0 }}
-            >
-                {/* DROPDOWN BOX CONTENTS */}
-            </div>;
 
         if (numType === NumButtonType.Slider) {
-            return (
+            const dropdown =
                 <div
-                    className={`menuButton ${this.type} ${numType}`}
+                    className="menuButton-dropdownBox"
+                    style={{ left: 0 }}
                 >
                     <input type="range" step="1" min="0" max="100" value={checkResult}
                         className={"toolbar-slider"} id="duration-slider"
@@ -128,29 +122,63 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon
                         onPointerUp={() => { if (this._batch) this._batch.end(); }}
                         onChange={(e: React.ChangeEvent<HTMLInputElement>) => { e.stopPropagation(); setValue(Number(e.target.value)); }}
                     />
+                </div>;
+            return (
+                <div
+                    className={`menuButton ${this.type} ${numType}`}
+                    onClick={action(() => this.rootDoc.dropDownOpen = !this.rootDoc.dropDownOpen)}
+                >
+                    {checkResult}
+                    {dropdown}
                 </div>
             );
         } else if (numType === NumButtonType.DropdownOptions) {
+            const items: number[] = [];
+            for (let i = 0; i < 100; i++) {
+                if (i % 2 === 0) {
+                    items.push(i);
+                }
+            }
+            items.map((value) => {
+                return <div className="list-item" key={`${value}`}
+                    style={{
+                        backgroundColor: value === checkResult ? Colors.LIGHT_BLUE : undefined
+                    }}
+                    onClick={() => setValue(value)}>
+                    {value}
+                </div>;
+            });
             return (
                 <div
                     className={`menuButton ${this.type} ${numType}`}
-                    onDoubleClick={action(() => this.rootDoc.dropDownOpen = !this.rootDoc.dropDownOpen)}
                 >
-                    <div className="numBtn-subtract">
+                    <div className="numBtn-subtract" onClick={action((e) => setValue(checkResult - 1))}>
                         <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={"plus"} />
                     </div>
-                    <div>
+                    <div
+                        onPointerDown={(e) => e.stopPropagation()}
+                        onDoubleClick={action(() => this.rootDoc.dropDownOpen = !this.rootDoc.dropDownOpen)}
+                    >
                         <input
+                            style={{ width: 100 }}
                             className="input"
                             type="number"
                             value={checkResult}
                             onChange={action((e) => setValue(Number(e.target.value)))}
                         />
                     </div>
-                    <div className="numBtn-plus">
+                    <div className="numBtn-plus" onClick={action((e) => setValue(checkResult + 1))}>
                         <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={"plus"} />
                     </div>
-                    {this.rootDoc.dropDownOpen ? dropdown : null}
+                    {this.rootDoc.dropDownOpen ?
+                        <div>
+                            <div className="menuButton-dropdownList"
+                                style={{ left: 0 }}>
+                                {items}
+                            </div>
+                            <div className="dropbox-background" onClick={(e) => { e.stopPropagation(); this.rootDoc.dropDownOpen = false; }} />
+                        </div> : null}
+
                 </div>
             );
         } else {
@@ -576,9 +604,13 @@ Scripting.addGlobal(function changeFontHighlight(color?: string, checkResult?: b
 
 
 // toggle: Set overlay status of selected document
-Scripting.addGlobal(function changeFontSize(size: string) {
+Scripting.addGlobal(function changeFontSize(size: string, checkResult?: boolean) {
+    if (checkResult) {
+        const size: number = parseInt(StrCast(Doc.UserDoc()._fontSize), 10);
+        return size;
+    }
     console.log(size);
-    Doc.UserDoc()._fontSize = size;
+    Doc.UserDoc()._fontSize = size + "px";
 });
 
 Scripting.addGlobal(function toggleBold(checkResult?: boolean) {