added num range button

3 files changed, 63 insertions, 86 deletions

diff --git a/src/client/util/Scripting.ts b/src/client/util/Scripting.ts
index f981f84cd..eac87d31e 100644
--- a/src/client/util/Scripting.ts
+++ b/src/client/util/Scripting.ts
@@ -12,7 +12,7 @@ export { ts };
 import * as typescriptlib from '!!raw-loader!./type_decls.d';
 import { Doc, Field } from '../../fields/Doc';
 
-export interface ScriptSucccess {
+export interface ScriptSuccess {
     success: true;
     result: any;
 }
@@ -23,7 +23,7 @@ export interface ScriptError {
     result: any;
 }
 
-export type ScriptResult = ScriptSucccess | ScriptError;
+export type ScriptResult = ScriptSuccess | ScriptError;
 
 export type ScriptParam = { [name: string]: string };
 
diff --git a/src/client/views/nodes/button/FontIconBox.scss b/src/client/views/nodes/button/FontIconBox.scss
index db42bdf5d..fef99ce83 100644
--- a/src/client/views/nodes/button/FontIconBox.scss
+++ b/src/client/views/nodes/button/FontIconBox.scss
@@ -8,10 +8,6 @@
     font-size: 80%;
     border-radius: $standard-border-radius;
 
-    &:hover {
-        background-color: rgba(0, 0, 0, 0.3) !important;
-    }
-
     .menuButton-wrap {
         grid-column: 1;
         justify-content: center;
@@ -43,6 +39,10 @@
     &.clickBtn {
         cursor: pointer;
         width: 40px;
+
+        &:hover {
+            background-color: rgba(0, 0, 0, 0.3) !important;
+        }
     }
 
     &.tglBtn {
@@ -52,6 +52,10 @@
             width: 50% !important;
             height: 50%;
         }
+
+        &:hover {
+            background-color: rgba(0, 0, 0, 0.3) !important;
+        }
     }
 
     &.toolBtn {
@@ -76,6 +80,8 @@
         }
     }
 
+
+
     &.colorBtn {
         color: black;
         cursor: pointer;
@@ -98,6 +104,10 @@
             box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.3);
             border-radius: 3px;
         }
+
+        &:hover {
+            background-color: rgba(0, 0, 0, 0.3) !important;
+        }
     }
 
     &.drpdownList {
@@ -116,6 +126,10 @@
         align-content: center;
         align-items: center;
 
+        &:hover {
+            background-color: rgba(0, 0, 0, 0.3) !important;
+        }
+
         .menuButton-dropdownList {
             position: absolute;
             width: 150px;
@@ -167,10 +181,8 @@
         justify-content: center;
         align-items: center;
         font-size: 15px;
-        /* background-color: #b9b9b9; */
         grid-column: 2;
         border-radius: 0px 7px 7px 0px;
-        /* position: absolute; */
         width: 13px;
         height: 100%;
         right: 0;
@@ -196,52 +208,4 @@
         position: fixed;
     }
 
-}
-
-
-// .fontIconBadge-container {
-//     position: absolute;
-//     z-index: 1000;
-//     top: 12px;
-
-//     .fontIconBadge {
-//         position: absolute;
-//         top: -10px;
-//         right: -10px;
-//         color: $white;
-//         background: $pink;
-//         font-weight: 300;
-//         border-radius: 100%;
-//         width: 25px;
-//         height: 25px;
-//         text-align: center;
-//         padding-top: 4px;
-//         font-size: 12px;
-//     }
-// }
-
-// .menuButton-circle,
-// .menuButton-round {
-//     border-radius: 100%;
-//     background-color: $dark-gray;
-//     padding: 0;
-
-//     .fontIconBox-label {
-//         z-index: 100;
-//         min-width: fit-content;
-//         bottom: 0;
-//         left: 0;
-//         width: 100%;
-//         /* justify-self: center; */
-//         border-radius: 0px;
-//         position: absolute;
-//     }
-
-
-
-//     &:hover {
-//         background-color: $light-gray;
-//     }
-
-
-// }
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/button/FontIconBox.tsx b/src/client/views/nodes/button/FontIconBox.tsx
index 4f52e90b7..bc4b56a2d 100644
--- a/src/client/views/nodes/button/FontIconBox.tsx
+++ b/src/client/views/nodes/button/FontIconBox.tsx
@@ -1,3 +1,4 @@
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Tooltip } from '@material-ui/core';
 import { action, computed, observable } from 'mobx';
@@ -7,12 +8,16 @@ import { ColorState, SketchPicker } from 'react-color';
 import { Doc, StrListCast } from '../../../../fields/Doc';
 import { createSchema, makeInterface } from '../../../../fields/Schema';
 import { ScriptField } from '../../../../fields/ScriptField';
-import { BoolCast, Cast, StrCast, ScriptCast } from '../../../../fields/Types';
+import { BoolCast, Cast, StrCast } from '../../../../fields/Types';
+import { DocumentType } from '../../../documents/DocumentTypes';
+import { Scripting } from "../../../util/Scripting";
 import { SelectionManager } from '../../../util/SelectionManager';
 import { ColorScheme } from '../../../util/SettingsManager';
-import { undoBatch, UndoManager } from '../../../util/UndoManager';
+import { UndoManager } from '../../../util/UndoManager';
+import { CollectionViewType } from '../../collections/CollectionView';
 import { ContextMenu } from '../../ContextMenu';
 import { DocComponent } from '../../DocComponent';
+import { Colors } from '../../global/globalEnums';
 import { StyleProp } from '../../StyleProvider';
 import { FieldView, FieldViewProps } from '.././FieldView';
 import './FontIconBox.scss';
@@ -28,7 +33,14 @@ export enum ButtonType {
     DoubleButton = "dblBtn",
     ToggleButton = "tglBtn",
     ColorButton = "colorBtn",
-    ToolButton = "toolBtn"
+    ToolButton = "toolBtn",
+    NumberButton = "numBtn"
+}
+
+export enum NumButtonType {
+    Slider = "slider",
+    DropdownOptions = "dropdown",
+    Inline = "inline"
 }
 
 export interface ButtonProps extends FieldViewProps {
@@ -60,7 +72,6 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon
     @observable private label = StrCast(this.rootDoc.label, StrCast(this.rootDoc.title));
     @observable private icon = StrCast(this.dataDoc.icon, "user") as any;
     @observable private dropdown: boolean = BoolCast(this.rootDoc.dropDownOpen);
-    @observable private dropdownDirection: string = StrCast(this.rootDoc.dropDownDirection);
     @observable private buttonList: string[] = StrListCast(this.rootDoc.btnList);
     @observable private type = StrCast(this.rootDoc.btnType);
 
@@ -74,9 +85,24 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon
      * - Dropdown button 
      * - Color button
      * - Dropdown list
+     * - Number button
     **/
 
     /**
+     * Number button
+     */
+    @computed get numberButton() {
+        const numType: string = StrCast(this.rootDoc.numButtonType);
+
+        return (
+            <div className={`menuButton ${this.type}`}
+            >
+
+            </div>
+        );
+    }
+
+    /**
      * Dropdown button
      */
     @computed get dropdownButton() {
@@ -120,9 +146,9 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon
         let icon: IconProp = "caret-down";
 
 
-        if (script == 'changeView') {
+        if (script === 'changeView') {
             const selected = SelectionManager.Views().length ? SelectionManager.Views()[0] : undefined;
-            if (selected && StrCast(selected.Document.type) == DocumentType.COL) {
+            if (selected && StrCast(selected.Document.type) === DocumentType.COL) {
                 text = StrCast(selected.Document._viewType);
             } else if (selected) {
                 dropdown = false;
@@ -130,9 +156,9 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon
                 icon = Doc.toIcon(selected.Document);
             }
             noviceList = [CollectionViewType.Freeform, CollectionViewType.Schema, CollectionViewType.Stacking];
-        } else if (script == 'changeFont') {
+        } else if (script === 'changeFont') {
             const selected = SelectionManager.Views().length ? SelectionManager.Views()[0] : undefined;
-            if (selected && StrCast(selected.Document.type) == DocumentType.RTF) {
+            if (selected && StrCast(selected.Document.type) === DocumentType.RTF) {
                 text = StrCast(selected.Document._fontFamily);
             } else {
                 text = StrCast(Doc.UserDoc()._fontFamily);
@@ -152,7 +178,7 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon
                 if (s) {
                     s.script.run().result;
                 }
-            }
+            };
             return <div className="list-item" key={`${value}`}
                 style={{
                     fontFamily: script === 'changeFont' ? value : undefined,
@@ -194,15 +220,6 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon
         );
     }
 
-
-    @computed get rangeButton() {
-        return (
-            <div>
-
-            </div>
-        )
-    }
-
     /**
      * Colour button
      */
@@ -264,7 +281,8 @@ 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)";
-        const boolResult = ScriptField.MakeScript(script)?.script.run().result;
+        console.log(script);
+        const boolResult = ScriptField.MakeScript(script)?.script.run().success;
         if (script.includes("toggleOverlay")) {
             console.log("boolResult: " + boolResult);
         }
@@ -280,7 +298,7 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon
                 <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={this.icon} color={boolResult ? Colors.LIGHT_GRAY : Colors.LIGHT_GRAY} />
                 {label}
             </div>
-        )
+        );
     }
 
 
@@ -298,10 +316,9 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon
                 <div className="menuButton-wrap">
                     <FontAwesomeIcon className={`menuButton-icon-${this.type}`} icon={this.icon} color={"black"} size={"sm"} />
                     {!this.label || !Doc.UserDoc()._showLabel ? (null) : <div className="fontIconBox-label" style={{ color: color, backgroundColor: backgroundColor }}> {this.label} </div>}
-                    {/* <FontIconBadge collection={Cast(this.rootDoc.watchedDocuments, Doc, null)} /> */}
                 </div>
             </div>
-        )
+        );
     }
 
 
@@ -332,6 +349,9 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon
         let button = this.defaultButton;
 
         switch (this.type) {
+            case ButtonType.NumberButton:
+                button = this.numberButton;
+                break;
             case ButtonType.DropdownButton:
                 button = this.dropdownButton;
                 break;
@@ -387,13 +407,6 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon
     }
 }
 
-// SCRIPTING BUTTONS
-
-import { Scripting } from "../../../util/Scripting";
-import { CollectionViewType } from '../../collections/CollectionView';
-import { DocumentType } from '../../../documents/DocumentTypes';
-import { Colors } from '../../global/globalEnums';
-import { IconProp } from '@fortawesome/fontawesome-svg-core';
 
 // toggle: Set overlay status of selected document
 Scripting.addGlobal(function changeView(view: string) {