Merge branch 'master' into advanced-trails-2-jesus

2 files changed, 119 insertions, 36 deletions

diff --git a/src/client/views/nodes/FontIconBox/FontIconBox.tsx b/src/client/views/nodes/FontIconBox/FontIconBox.tsx
index 286b80426..eded4b652 100644
--- a/src/client/views/nodes/FontIconBox/FontIconBox.tsx
+++ b/src/client/views/nodes/FontIconBox/FontIconBox.tsx
@@ -10,17 +10,18 @@ import { BoolCast, Cast, DocCast, NumCast, ScriptCast, StrCast } from '../../../
 import { Utils } from '../../../../Utils';
 import { CollectionViewType, DocumentType } from '../../../documents/DocumentTypes';
 import { SelectionManager } from '../../../util/SelectionManager';
+import { SettingsManager } from '../../../util/SettingsManager';
 import { undoable, UndoManager } from '../../../util/UndoManager';
 import { ContextMenu } from '../../ContextMenu';
 import { DocComponent } from '../../DocComponent';
 import { EditableView } from '../../EditableView';
-import { Colors } from '../../global/globalEnums';
 import { SelectedDocView } from '../../selectedDoc';
 import { StyleProp } from '../../StyleProvider';
 import { OpenWhere } from '../DocumentView';
 import { FieldView, FieldViewProps } from '../FieldView';
 import { RichTextMenu } from '../formattedText/RichTextMenu';
 import './FontIconBox.scss';
+import TrailsIcon from './TrailsIcon';
 
 export enum ButtonType {
     TextButton = 'textBtn',
@@ -67,19 +68,6 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
         }
     };
 
-    static GetShowLabels() {
-        return BoolCast(Doc.UserDoc()._showLabel);
-    }
-    static SetShowLabels(show: boolean) {
-        Doc.UserDoc()._showLabel = show;
-    }
-    static GetRecognizeGestures() {
-        return BoolCast(Doc.UserDoc()._recognizeGestures);
-    }
-    static SetRecognizeGestures(show: boolean) {
-        Doc.UserDoc()._recognizeGestures = show;
-    }
-
     // Determining UI Specs
     @computed get label() {
         return StrCast(this.rootDoc.icon_label, StrCast(this.rootDoc.title));
@@ -92,8 +80,7 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
             else return null;
         }
         icon = StrCast(this.dataDoc[this.fieldKey ?? 'icon'] ?? this.dataDoc.icon, 'user') as any;
-        const trailsIcon = () => <img src={`/assets/${'presTrails.png'}`} style={{ width: 30, height: 30, filter: `invert(${color === Colors.DARK_GRAY ? '0%' : '100%'})` }} />;
-        return !icon ? null : icon === 'pres-trail' ? trailsIcon() : <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={icon} color={color} />;
+        return !icon ? null : icon === 'pres-trail' ? TrailsIcon(color) : <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={icon} color={color} />;
     };
     @computed get dropdown() {
         return BoolCast(this.rootDoc.dropDownOpen);
@@ -140,11 +127,11 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
         const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color);
         // Script for checking the outcome of the toggle
         const checkResult = Number(Number(numScript().result ?? 0).toPrecision(NumCast(this.dataDoc.numPrecision, 3)));
-        const label = !FontIconBox.GetShowLabels() ? null : <div className="fontIconBox-label">{this.label}</div>;
 
         return (
             <NumberDropdown
                 color={color}
+                background={SettingsManager.userBackgroundColor}
                 numberDropdownType={type}
                 showPlusMinus={false}
                 tooltip={this.label}
@@ -168,14 +155,14 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
         return (
             <div
                 className={`menuButton ${this.type} ${active}`}
-                style={{ color: color, backgroundColor: backgroundColor, borderBottomLeftRadius: this.dropdown ? 0 : undefined }}
+                style={{ color, backgroundColor, borderBottomLeftRadius: this.dropdown ? 0 : undefined }}
                 onClick={action(() => {
                     this.rootDoc.dropDownOpen = !this.rootDoc.dropDownOpen;
                     this.noTooltip = this.rootDoc.dropDownOpen;
                     Doc.UnBrushAllDocs();
                 })}>
                 {this.Icon(color)}
-                {!this.label || !FontIconBox.GetShowLabels() ? null : (
+                {!this.label || !Doc.GetShowIconLabels() ? null : (
                     <div className="fontIconBox-label" style={{ color: color, backgroundColor: backgroundColor }}>
                         {' '}
                         {this.label}{' '}
@@ -193,10 +180,7 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
      * Dropdown list
      */
     @computed get dropdownListButton() {
-        const active: string = StrCast(this.rootDoc.dropDownOpen);
         const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color);
-        const backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor);
-
         const script = ScriptCast(this.rootDoc.script);
 
         let noviceList: string[] = [];
@@ -220,11 +204,21 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
                             text = Utils.cleanDocumentType(StrCast(selected.type) as DocumentType);
                             icon = Doc.toIcon(selected);
                         }
-                        return <Popup icon={<FontAwesomeIcon size={'1x'} icon={icon} />} text={text} type={Type.TERT} color={color} popup={<SelectedDocView selectedDocs={selectedDocs} />} fillWidth />;
+                        return (
+                            <Popup
+                                icon={<FontAwesomeIcon size={'1x'} icon={icon} />}
+                                text={text}
+                                type={Type.TERT}
+                                color={SettingsManager.userColor}
+                                background={SettingsManager.userVariantColor}
+                                popup={<SelectedDocView selectedDocs={selectedDocs} />}
+                                fillWidth
+                            />
+                        );
                     }
                 } else {
                     dropdown = false;
-                    return <Button text={`None Selected`} type={Type.TERT} color={color} fillWidth inactive />;
+                    return <Button text="None Selected" type={Type.TERT} color={SettingsManager.userColor} background={SettingsManager.userVariantColor} fillWidth inactive />;
                 }
                 noviceList = [CollectionViewType.Freeform, CollectionViewType.Schema, CollectionViewType.Stacking, CollectionViewType.NoteTaking];
             } else {
@@ -249,16 +243,19 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
             }));
 
         return (
-            <Dropdown
-                selectedVal={text}
-                setSelectedVal={undoable(val => script.script.run({ this: this.layoutDoc, self: this.rootDoc, val }), `dropdown select ${this.label}`)}
-                color={color}
-                type={isViewDropdown ? Type.TERT : Type.PRIM}
-                dropdownType={DropdownType.SELECT}
-                items={list}
-                tooltip={this.label}
-                fillWidth
-            />
+            <div style={{ color: SettingsManager.userColor, background: SettingsManager.userBackgroundColor }}>
+                <Dropdown
+                    selectedVal={text}
+                    setSelectedVal={undoable(val => script.script.run({ this: this.layoutDoc, self: this.rootDoc, val }), `dropdown select ${this.label}`)}
+                    color={SettingsManager.userColor}
+                    background={isViewDropdown ? SettingsManager.userVariantColor : SettingsManager.userBackgroundColor}
+                    type={Type.TERT}
+                    dropdownType={DropdownType.SELECT}
+                    items={list}
+                    tooltip={this.label}
+                    fillWidth
+                />
+            </div>
         );
     }
 
@@ -290,6 +287,7 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
                 selectedColor={curColor}
                 type={Type.PRIM}
                 color={color}
+                background={SettingsManager.userBackgroundColor}
                 icon={this.Icon(color)!}
                 tooltip={tooltip}
                 label={this.label}
@@ -310,6 +308,7 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
                 tooltip={`Toggle ${tooltip}`}
                 type={Type.PRIM}
                 color={color}
+                background={SettingsManager.userBackgroundColor}
                 label={this.label}
                 items={DocListCast(this.rootDoc.data).map(item => ({
                     icon: <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={StrCast(item.icon) as any} color={color} />,
@@ -344,6 +343,7 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
                 toggleStatus={toggleStatus}
                 text={buttonText}
                 color={color}
+                background={SettingsManager.userBackgroundColor}
                 icon={this.Icon(color)!}
                 label={this.label}
                 onPointerDown={() => script.script.run({ this: this.layoutDoc, self: this.rootDoc, value: !toggleStatus, _readOnly_: false })}
@@ -400,8 +400,10 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
             case ButtonType.ToggleButton:       return this.toggleButton;
             case ButtonType.ClickButton:
             case ButtonType.ToolButton: return <IconButton {...btnProps} size={Size.LARGE} color={color} />;
-            case ButtonType.TextButton: return <Button     {...btnProps} text={StrCast(this.rootDoc.buttonText)}/>;
-            case ButtonType.MenuButton: return <IconButton {...btnProps} color={color}  size={Size.LARGE} tooltipPlacement='right' onPointerDown={scriptFunc} />; 
+            case ButtonType.TextButton: return <Button     {...btnProps} color={color} 
+            background={SettingsManager.userBackgroundColor} text={StrCast(this.rootDoc.buttonText)}/>;
+            case ButtonType.MenuButton: return <IconButton {...btnProps} color={color} 
+            background={SettingsManager.userBackgroundColor}  size={Size.LARGE} tooltipPlacement='right' onPointerDown={scriptFunc} />; 
         }
         return this.defaultButton;
     }
diff --git a/src/client/views/nodes/FontIconBox/TrailsIcon.tsx b/src/client/views/nodes/FontIconBox/TrailsIcon.tsx
new file mode 100644
index 000000000..09fd6e3ae
--- /dev/null
+++ b/src/client/views/nodes/FontIconBox/TrailsIcon.tsx
@@ -0,0 +1,81 @@
+import * as React from 'react';
+
+const TrailsIcon = (fill: string) => (
+    <svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 1080.000000 1080.000000" preserveAspectRatio="xMidYMid meet">
+        <g transform="translate(0.000000,1080.000000) scale(0.100000,-0.100000)" fill={fill} stroke="none">
+            <path
+                d="M665 9253 c-74 -10 -157 -38 -240 -81 -74 -37 -107 -63 -186 -141
+-104 -104 -156 -191 -201 -334 l-23 -72 0 -3215 c0 -3072 1 -3218 18 -3280 10
+-36 39 -108 64 -160 40 -82 59 -107 142 -190 81 -81 111 -103 191 -143 52 -26
+122 -55 155 -65 57 -16 322 -17 4775 -20 3250 -2 4736 1 4784 8 256 39 486
+220 588 462 63 148 59 -96 56 3413 -3 3049 -4 3203 -21 3260 -78 260 -285 467
+-542 542 -57 17 -308 18 -4795 19 -2604 1 -4748 -1 -4765 -3z m9187 -787 c65
+-19 114 -60 143 -120 l25 -51 0 -2898 c0 -2582 -2 -2901 -15 -2934 -24 -57
+-62 -101 -108 -126 l-42 -22 -4435 -3 c-3954 -2 -4440 0 -4481 13 -26 9 -63
+33 -87 56 -79 79 -72 -205 -72 3012 0 2156 3 2889 12 2918 20 70 91 136 168
+160 14 4 2010 8 4436 8 3710 1 4418 -1 4456 -13z"
+            />
+            <path
+                d="M7692 7839 c-46 -14 -109 -80 -122 -128 -7 -27 -9 -472 -8 -1443 l3
+-1403 24 -38 c13 -21 42 -50 64 -65 l41 -27 816 0 816 0 41 27 c22 15 51 44
+64 65 l24 38 0 1425 0 1425 -24 38 c-13 21 -42 50 -64 65 l-41 27 -800 2
+c-488 1 -814 -2 -834 -8z"
+            />
+            <path
+                d="M1982 7699 c-46 -14 -109 -80 -122 -128 -7 -27 -10 -308 -8 -893 l3
+-853 24 -38 c13 -21 42 -50 64 -65 l41 -27 1386 0 1386 0 41 27 c22 15 51 44
+64 65 l24 38 0 876 0 875 -27 41 c-15 22 -44 51 -65 64 l-38 24 -1370 2 c-847
+1 -1383 -2 -1403 -8z"
+            />
+            <path
+                d="M6413 7093 c-13 -2 -23 -9 -23 -15 0 -24 21 -307 26 -343 l5 -40 182
+-1 c200 -1 307 -15 484 -65 57 -16 107 -29 112 -29 5 0 36 75 69 168 33 92 63
+175 67 184 6 14 -10 22 -92 48 -126 39 -308 76 -447 89 -106 11 -337 13 -383
+4z"
+            />
+            <path
+                d="M5840 7033 c-63 -8 -238 -29 -388 -47 -150 -18 -274 -35 -276 -37 -2
+-2 8 -89 23 -194 22 -163 29 -190 44 -193 10 -2 91 6 180 17 89 12 258 32 376
+46 118 14 216 27 218 28 7 8 -43 391 -52 392 -5 1 -62 -4 -125 -12z"
+            />
+            <path
+                d="M4762 4789 c-46 -14 -109 -80 -122 -128 -7 -27 -10 -323 -8 -943 l3
+-903 24 -38 c13 -21 42 -50 64 -65 l41 -27 926 0 926 0 41 27 c22 15 51 44 64
+65 l24 38 0 926 0 925 -27 41 c-15 22 -44 51 -65 64 l-38 24 -910 2 c-557 1
+-923 -2 -943 -8z"
+            />
+            <path
+                d="M8487 4297 c-26 -215 -161 -474 -307 -585 -27 -20 -49 -40 -49 -44
+-1 -3 49 -79 110 -167 l110 -161 44 31 c176 126 333 350 418 594 30 86 77 282
+77 320 0 8 -57 19 -167 34 -93 13 -182 25 -199 28 -31 5 -31 5 -37 -50z"
+            />
+            <path
+                d="M3965 4233 c-106 -9 -348 -36 -415 -47 -55 -8 -75 -15 -74 -26 1 -20
+56 -374 59 -377 1 -2 46 4 101 12 159 24 409 45 526 45 l108 0 0 200 0 200
+-132 -2 c-73 -1 -151 -3 -173 -5z"
+            />
+            <path
+                d="M3020 4079 c-85 -23 -292 -94 -368 -125 -97 -40 -298 -140 -305 -151
+-5 -7 172 -315 192 -336 4 -4 41 10 82 32 103 55 272 123 414 165 66 20 125
+38 132 41 11 4 -4 70 -78 348 -10 39 -14 41 -69 26z"
+            />
+            <path
+                d="M6955 3538 c-21 -91 -74 -362 -72 -364 7 -7 260 -44 367 -54 146 -13
+359 -13 475 0 49 6 90 12 91 13 2 1 -12 90 -29 197 -26 155 -36 194 -47 192
+-8 -2 -85 -6 -170 -9 -160 -6 -357 7 -505 33 -103 18 -104 18 -110 -8z"
+            />
+            <path
+                d="M1993 3513 c-52 -67 -71 -106 -98 -198 -35 -122 -44 -284 -21 -415 9
+-51 18 -96 21 -98 4 -5 360 79 375 88 7 4 7 24 0 60 -21 109 -7 244 31 307
+l20 31 -146 131 c-80 72 -147 131 -149 131 -2 0 -17 -17 -33 -37z"
+            />
+            <path
+                d="M2210 2519 c-91 -50 -166 -92 -168 -94 -2 -1 11 -26 28 -54 l32 -51
+244 0 c134 0 244 2 244 5 0 3 -23 33 -51 67 -28 35 -72 98 -97 140 -26 43 -51
+77 -57 77 -5 0 -84 -41 -175 -90z"
+            />
+        </g>
+    </svg>
+);
+
+export default TrailsIcon;