From d1ea2f764d0207963788eb4238ede79bcffa23f6 Mon Sep 17 00:00:00 2001
From: geireann <60007097+geireann@users.noreply.github.com>
Date: Tue, 24 Aug 2021 10:48:38 -0400
Subject: more bits and pieces (ahhhh)

---
 src/client/views/MainViewModal.scss             |  4 +-
 src/client/views/global/globalCssVariables.scss |  1 +
 src/client/views/nodes/DocumentLinksButton.scss |  1 +
 src/client/views/nodes/DocumentLinksButton.tsx  |  1 +
 src/client/views/nodes/button/FontIconBox.tsx   | 66 ++++++++++++++++++-------
 5 files changed, 53 insertions(+), 20 deletions(-)

(limited to 'src/client/views')

diff --git a/src/client/views/MainViewModal.scss b/src/client/views/MainViewModal.scss
index 5f19590b4..03cb5cc84 100644
--- a/src/client/views/MainViewModal.scss
+++ b/src/client/views/MainViewModal.scss
@@ -4,6 +4,7 @@
     z-index: 10000;
     width: 100%;
     height: 100%;
+
     .dialogue-box {
         position: absolute;
         z-index: 1000;
@@ -11,11 +12,8 @@
         justify-content: center;
         align-self: center;
         align-content: center;
-        padding: 20px;
-        // background: gainsboro;
         background: white;
         border-radius: 10px;
-        border: 0.5px solid black;
         box-shadow: #00000044 5px 5px 10px;
         transform: translate(-50%, -50%);
         top: 50%;
diff --git a/src/client/views/global/globalCssVariables.scss b/src/client/views/global/globalCssVariables.scss
index 2fd67a8dc..caa9f4fe5 100644
--- a/src/client/views/global/globalCssVariables.scss
+++ b/src/client/views/global/globalCssVariables.scss
@@ -1,6 +1,7 @@
 @import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
 // colors
 $white: #ffffff;
+$off-white: #fdfdfd;
 $light-gray: #dfdfdf;
 $medium-gray: #9f9f9f;
 $dark-gray: #323232;
diff --git a/src/client/views/nodes/DocumentLinksButton.scss b/src/client/views/nodes/DocumentLinksButton.scss
index b37b68249..228e1bdcb 100644
--- a/src/client/views/nodes/DocumentLinksButton.scss
+++ b/src/client/views/nodes/DocumentLinksButton.scss
@@ -50,6 +50,7 @@
     width: 80%;
     height: 80%;
     font-size: 100%;
+    font-family: 'Roboto';
     transition: 0.2s ease all;
 
     &:hover {
diff --git a/src/client/views/nodes/DocumentLinksButton.tsx b/src/client/views/nodes/DocumentLinksButton.tsx
index 7648e866e..bf9499d1d 100644
--- a/src/client/views/nodes/DocumentLinksButton.tsx
+++ b/src/client/views/nodes/DocumentLinksButton.tsx
@@ -266,6 +266,7 @@ export class DocumentLinksButton extends React.Component<DocumentLinksButtonProp
                     style={{
                         backgroundColor: Colors.LIGHT_BLUE,
                         color: Colors.BLACK,
+                        fontSize: "25px",
                         width: btnDim,
                         height: btnDim,
                     }}>
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) {
-- 
cgit v1.2.3-70-g09d2