more bits and pieces (ahhhh)

8 files changed, 71 insertions, 32 deletions

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 9ba31da3b..63acd004f 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -1151,8 +1151,7 @@ export namespace DocUtils {
                 description: ":" + StrCast(note.title),
                 event: undoBatch((args: { x: number, y: number }) => {
                     const textDoc = Docs.Create.TextDocument("", {
-                        _fontFamily: StrCast(Doc.UserDoc()._fontFamily),
-                        _fontSize: StrCast(Doc.UserDoc()._fontSize),
+                        _fontFamily: StrCast(Doc.UserDoc()._fontFamily), _fontSize: StrCast(Doc.UserDoc()._fontSize),
                         _width: 200, x, y, _autoHeight: note._autoHeight !== false,
                         title: StrCast(note.title) + "#" + (note.aliasCount = NumCast(note.aliasCount) + 1)
                     });
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 8abac9975..73a66332f 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -99,7 +99,7 @@ export class CurrentUserUtils {
             const slideTemplate = Docs.Create.MultirowDocument(
                 [
                     Docs.Create.MulticolumnDocument([], { title: "data", _height: 200, system: true }),
-                    Docs.Create.TextDocument("", { title: "text", _height: 100, system: true })
+                    Docs.Create.TextDocument("", { title: "text", _height: 100, system: true, _fontFamily: StrCast(Doc.UserDoc()._fontFamily), _fontSize: StrCast(Doc.UserDoc()._fontSize) })
                 ],
                 { _width: 400, _height: 300, title: "slideView", _xMargin: 3, _yMargin: 3, system: true }
             );
@@ -271,24 +271,28 @@ export class CurrentUserUtils {
     // setup the different note type skins
     static setupNoteTemplates(doc: Doc) {
         if (doc["template-note-Note"] === undefined) {
-            const noteView = Docs.Create.TextDocument("", { title: "text", isTemplateDoc: true, backgroundColor: "yellow", system: true });
+            const noteView = Docs.Create.TextDocument("", { title: "text", isTemplateDoc: true, backgroundColor: "yellow", system: true, 
+            _fontFamily: StrCast(Doc.UserDoc()._fontFamily), _fontSize: StrCast(Doc.UserDoc()._fontSize), });
             noteView.isTemplateDoc = makeTemplate(noteView, true, "Note");
             doc["template-note-Note"] = new PrefetchProxy(noteView);
         }
         if (doc["template-note-Idea"] === undefined) {
-            const noteView = Docs.Create.TextDocument("", { title: "text", backgroundColor: "pink", system: true });
+            const noteView = Docs.Create.TextDocument("", { title: "text", backgroundColor: "pink", system: true,
+            _fontFamily: StrCast(Doc.UserDoc()._fontFamily), _fontSize: StrCast(Doc.UserDoc()._fontSize), });
             noteView.isTemplateDoc = makeTemplate(noteView, true, "Idea");
             doc["template-note-Idea"] = new PrefetchProxy(noteView);
         }
         if (doc["template-note-Topic"] === undefined) {
-            const noteView = Docs.Create.TextDocument("", { title: "text", backgroundColor: "lightblue", system: true });
+            const noteView = Docs.Create.TextDocument("", { title: "text", backgroundColor: "lightblue", system: true,
+            _fontFamily: StrCast(Doc.UserDoc()._fontFamily), _fontSize: StrCast(Doc.UserDoc()._fontSize), });
             noteView.isTemplateDoc = makeTemplate(noteView, true, "Topic");
             doc["template-note-Topic"] = new PrefetchProxy(noteView);
         }
         if (doc["template-note-Todo"] === undefined) {
             const noteView = Docs.Create.TextDocument("", {
                 title: "text", backgroundColor: "orange", _autoHeight: false, _height: 100, _showCaption: "caption",
-                layout: FormattedTextBox.LayoutString("Todo"), caption: RichTextField.DashField("taskStatus"), system: true
+                layout: FormattedTextBox.LayoutString("Todo"), caption: RichTextField.DashField("taskStatus"), system: true,
+                _fontFamily: StrCast(Doc.UserDoc()._fontFamily), _fontSize: StrCast(Doc.UserDoc()._fontSize),
             });
             noteView.isTemplateDoc = makeTemplate(noteView, true, "Todo");
             doc["template-note-Todo"] = new PrefetchProxy(noteView);
@@ -472,7 +476,9 @@ export class CurrentUserUtils {
             ((doc.emptyAudio as Doc).proto as Doc)["dragFactory-count"] = 0;
         }
         if (doc.emptyNote === undefined) {
-            doc.emptyNote = Docs.Create.TextDocument("", { _width: 200, title: "text note", _autoHeight: true, system: true, cloneFieldFilter: new List<string>(["system"]) });
+            doc.emptyNote = Docs.Create.TextDocument("", { _width: 200, title: "text note", _autoHeight: true, system: true, 
+            _fontFamily: StrCast(Doc.UserDoc()._fontFamily), _fontSize: StrCast(Doc.UserDoc()._fontSize),
+            cloneFieldFilter: new List<string>(["system"]) });
             ((doc.emptyNote as Doc).proto as Doc)["dragFactory-count"] = 0;
         }
         if (doc.emptyImage === undefined) {
@@ -940,7 +946,7 @@ export class CurrentUserUtils {
                     "Comic Sans MS", "Tahoma", "Impact", "Crimson Text"],
                 script: 'changeFont'
             },
-            { title: "Font size", toolTip: "Font size", btnType: ButtonType.NumberButton, numType: NumButtonType.DropdownOptions, script: 'changeFontSize'},
+            { title: "Font size", toolTip: "Font size", btnType: ButtonType.NumberButton, numType: NumButtonType.DropdownOptions, ignoreClick: true, script: 'changeFontSize'},
             { title: "Bold", toolTip: "Bold (Ctrl+B)", btnType: ButtonType.ToggleButton, icon: "bold", click: 'toggleBold()', script: 'toggleBold' },
             { title: "Italic", toolTip: "Italic (Ctrl+I)", btnType: ButtonType.ToggleButton, icon: "italic", click: 'toggleItalic()', script: 'toggleItalic' },
             { title: "Underline", toolTip: "Underline (Ctrl+U)", btnType: ButtonType.ToggleButton, icon: "underline", click: 'toggleUnderline()', script: 'toggleUnderline' },
@@ -964,7 +970,7 @@ export class CurrentUserUtils {
             { title: "Circle", toolTip: "Circle (Ctrl+Shift+C)", btnType: ButtonType.ToggleButton, icon: "circle", click: 'setActiveInkTool("circle")' },
             { title: "Square", toolTip: "Square (Ctrl+Shift+S)", btnType: ButtonType.ToggleButton, icon: "square", click: 'setActiveInkTool("square")' },
             { title: "Line", toolTip: "Line (Ctrl+Shift+L)", btnType: ButtonType.ToggleButton, icon: "fill-drip", click: 'setActiveInkTool("line")' },
-            { title: "Stroke width", toolTip: "Stroke width", btnType: ButtonType.NumberButton, numType: NumButtonType.Slider, script: 'setLineWidth'},
+            { title: "Stroke width", toolTip: "Stroke width", width:75, btnType: ButtonType.NumberButton, numType: NumButtonType.Slider, ignoreClick: true, script: 'setLineWidth'},
         ];
         return tools;
     }
diff --git a/src/client/util/SettingsManager.scss b/src/client/util/SettingsManager.scss
index c9db94419..b7199f433 100644
--- a/src/client/util/SettingsManager.scss
+++ b/src/client/util/SettingsManager.scss
@@ -360,17 +360,18 @@
     flex-direction: row;
     position: relative;
     min-height: 250px;
+    height: 100%;
     width: 100%;
 
     .settings-content {
-        background-color: #fdfdfd;
+        background-color: $off-white;
     }
 }
 
 .settings-panel {
     position: relative;
     min-width: 150px;
-    background-color: #e4e4e4;
+    background-color: $light-blue;
 
     .settings-user {
         position: absolute;
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) {