there will be issues as a result of this

14 files changed, 202 insertions, 28 deletions

diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 9047951ee..60016fc3d 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -227,8 +227,8 @@ export class MainView extends React.Component {
 
     @action
     createNewPresentation = async () => {
-        if (!await this.userDoc.myPresentations) {
-            this.userDoc.myPresentations = new PrefetchProxy(Docs.Create.TreeDocument([], {
+        if (!await this.userDoc.myTrails) {
+            this.userDoc.myTrails = new PrefetchProxy(Docs.Create.TreeDocument([], {
                 title: "PRESENTATION TRAILS", childDontRegisterViews: true, _height: 100, _forceActive: true, boxShadow: "0 0", _lockedPosition: true, treeViewOpen: true, system: true
             }));
         }
@@ -236,7 +236,7 @@ export class MainView extends React.Component {
             { title: "Untitled Presentation", _viewType: CollectionViewType.Stacking, _width: 400, _height: 500, targetDropAction: "alias", _chromeHidden: true, boxShadow: "0 0" });
         CollectionDockingView.AddSplit(pres, "right");
         this.userDoc.activePresentation = pres;
-        Doc.AddDocToList(this.userDoc.myPresentations as Doc, "data", pres);
+        Doc.AddDocToList(this.userDoc.myTrails as Doc, "data", pres);
     }
 
     getPWidth = () => this._panelWidth - this.propertiesWidth();
diff --git a/src/client/views/PropertiesView.scss b/src/client/views/PropertiesView.scss
index 321b83f52..554f137cb 100644
--- a/src/client/views/PropertiesView.scss
+++ b/src/client/views/PropertiesView.scss
@@ -825,9 +825,8 @@
 }
 
 .editable-title {
-    padding: 6px;
-    padding-bottom: 2px;
-    border: solid 1px $dark-gray;
+    border: solid 1px #323232;
+    height: fit-content;
 
     &:hover {
         border: 0.75px solid $medium-blue;
diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx
index 17b137c31..09e12443b 100644
--- a/src/client/views/PropertiesView.tsx
+++ b/src/client/views/PropertiesView.tsx
@@ -2,17 +2,19 @@ import React = require("react");
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Checkbox, Tooltip } from "@material-ui/core";
 import { intersection } from "lodash";
-import { action, autorun, computed, Lambda, observable, reaction, runInAction } from "mobx";
+import { action, autorun, computed, Lambda, observable } from "mobx";
 import { observer } from "mobx-react";
 import { ColorState, SketchPicker } from "react-color";
-import { AclAugment, AclAdmin, AclEdit, AclPrivate, AclReadonly, AclSym, AclUnset, DataSym, Doc, Field, HeightSym, Opt, WidthSym, AclSelfEdit } from "../../fields/Doc";
+import { AclAdmin, AclAugment, AclEdit, AclPrivate, AclReadonly, AclSelfEdit, AclSym, AclUnset, DataSym, Doc, Field, HeightSym, Opt, WidthSym } from "../../fields/Doc";
 import { Id } from "../../fields/FieldSymbols";
 import { InkField } from "../../fields/InkField";
+import { List } from "../../fields/List";
 import { ComputedField } from "../../fields/ScriptField";
-import { Cast, NumCast, StrCast } from "../../fields/Types";
+import { BoolCast, Cast, NumCast, StrCast } from "../../fields/Types";
 import { denormalizeEmail, GetEffectiveAcl, SharingPermissions } from "../../fields/util";
 import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue } from "../../Utils";
 import { DocumentType } from "../documents/DocumentTypes";
+import { CurrentUserUtils } from "../util/CurrentUserUtils";
 import { DocumentManager } from "../util/DocumentManager";
 import { SelectionManager } from "../util/SelectionManager";
 import { SharingManager } from "../util/SharingManager";
@@ -29,8 +31,6 @@ import { PropertiesButtons } from "./PropertiesButtons";
 import { PropertiesDocContextSelector } from "./PropertiesDocContextSelector";
 import "./PropertiesView.scss";
 import { DefaultStyleProvider } from "./StyleProvider";
-import { CurrentUserUtils } from "../util/CurrentUserUtils";
-import { List } from "../../fields/List";
 const higflyout = require("@hig/flyout");
 export const { anchorPoints } = higflyout;
 export const Flyout = higflyout.default;
@@ -1086,6 +1086,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
     // }
 
     render() {
+        const isNovice = BoolCast(Doc.UserDoc().noviceMode);
         if (!this.selectedDoc && !this.isPres) {
             return <div className="propertiesView" style={{ width: this.props.width }}>
                 <div className="propertiesView-title" style={{ width: this.props.width }}>
@@ -1110,15 +1111,15 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
 
                     {this.sharingSubMenu}
 
-                    {this.filtersSubMenu}
+                    {isNovice ? null : this.filtersSubMenu}
 
                     {this.inkSubMenu}
 
-                    {this.fieldsSubMenu}
+                    {isNovice ? null : this.fieldsSubMenu}
 
-                    {this.contextsSubMenu}
+                    {isNovice ? null : this.contextsSubMenu}
 
-                    {this.layoutSubMenu}
+                    {isNovice ? null : this.layoutSubMenu}
                 </div>;
             }
             if (this.isPres) {
diff --git a/src/client/views/collections/collectionLinearView/CollectionLinearView.tsx b/src/client/views/collections/collectionLinearView/CollectionLinearView.tsx
index 6b1fd9e1b..f3ffb4e0b 100644
--- a/src/client/views/collections/collectionLinearView/CollectionLinearView.tsx
+++ b/src/client/views/collections/collectionLinearView/CollectionLinearView.tsx
@@ -126,7 +126,7 @@ export class CollectionLinearView extends CollectionSubView(LinearDocument) {
             }}
             onPointerDown={e => e.stopPropagation()} >
             <div className="collectionLinearView-menuOpener">
-                {BoolCast(this.layoutDoc.linearViewIsExpanded) ? icon ? icon : <FontAwesomeIcon icon={"plus"}/> : icon ? icon :  <FontAwesomeIcon icon={"minus"}/>}
+                {BoolCast(this.layoutDoc.linearViewIsExpanded) ? icon ? icon : <FontAwesomeIcon icon={"minus"}/> : icon ? icon :  <FontAwesomeIcon icon={"plus"}/>}
             </div>
         </label>;
 
diff --git a/src/client/views/nodes/button/ButtonInterface.ts b/src/client/views/nodes/button/ButtonInterface.ts
new file mode 100644
index 000000000..0aa2ac8e1
--- /dev/null
+++ b/src/client/views/nodes/button/ButtonInterface.ts
@@ -0,0 +1,12 @@
+import { Doc } from "../../../../fields/Doc";
+import { IconProp } from "@fortawesome/fontawesome-svg-core";
+import { ButtonType } from "./FontIconBox";
+
+export interface IButtonProps {
+    type: string | ButtonType;
+    rootDoc: Doc;
+    label: any;
+    icon: IconProp;
+    color: string;
+    backgroundColor: string;
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/button/FontIconBox.scss b/src/client/views/nodes/button/FontIconBox.scss
index b080f1dab..48fb2c8dc 100644
--- a/src/client/views/nodes/button/FontIconBox.scss
+++ b/src/client/views/nodes/button/FontIconBox.scss
@@ -49,6 +49,10 @@
         }
     }
 
+    &.textBtn {
+        width: 100%;
+    }
+
     &.tglBtn {
         cursor: pointer;
 
diff --git a/src/client/views/nodes/button/FontIconBox.tsx b/src/client/views/nodes/button/FontIconBox.tsx
index a6887cbba..96db929eb 100644
--- a/src/client/views/nodes/button/FontIconBox.tsx
+++ b/src/client/views/nodes/button/FontIconBox.tsx
@@ -27,11 +27,15 @@ import { StyleProp } from '../../StyleProvider';
 import { FieldView, FieldViewProps } from '.././FieldView';
 import './FontIconBox.scss';
 import { RichTextMenu } from '../formattedText/RichTextMenu';
+import { TextButton } from './textButton';
+import { ToggleButton } from './toggleButton';
+import { IButtonProps } from './ButtonInterface';
 const FontIconSchema = createSchema({
     icon: "string",
 });
 
 export enum ButtonType {
+    TextButton = "textBtn",
     MenuButton = "menuBtn",
     DropdownList = "drpdownList",
     DropdownButton = "drpdownBtn",
@@ -331,13 +335,13 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon
 
         let stroke: boolean = false;
         let strokeIcon: any;
-        if (script === "setStrokeColor") {
-            stroke = true;
-            const checkWidth = ScriptField.MakeScript("setStrokeWidth(0, true)")?.script.run().result;
-            const width = 20 + (checkWidth / 100) * 70;
-            const height = 20 + (checkWidth / 100) * 70;
-            strokeIcon = (<div style={{ borderRadius: "100%", width: width + '%', height: height + '%', backgroundColor: boolResult ? boolResult : "#FFFFFF" }} />);
-        }
+        // if (script === "setStrokeColor") {
+        //     stroke = true;
+        //     const checkWidth = ScriptField.MakeScript("setStrokeWidth(0, true)")?.script.run().result;
+        //     const width = 20 + (checkWidth / 100) * 70;
+        //     const height = 20 + (checkWidth / 100) * 70;
+        //     strokeIcon = (<div style={{ borderRadius: "100%", width: width + '%', height: height + '%', backgroundColor: boolResult ? boolResult : "#FFFFFF" }} />);
+        // }
 
         const colorOptions: string[] = ['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505',
             '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B',
@@ -473,25 +477,47 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon
     render() {
         const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color);
         const backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor);
-        // Variables called through eval (from button)
-        const numSelected = SelectionManager.Views().length;
-
         const dark: boolean = Doc.UserDoc().colorScheme === ColorScheme.Dark;
 
-        const active: string = StrCast(this.rootDoc.dropDownOpen);
         const label = !this.label || !Doc.UserDoc()._showLabel ? (null) :
             <div className="fontIconBox-label" style={{ color: color, backgroundColor: backgroundColor, position: "absolute" }}>
                 {this.label}
             </div>;
+
         const menuLabel = !this.label || !Doc.UserDoc()._showMenuLabel ? (null) :
             <div className="fontIconBox-label" style={{ color: color, backgroundColor: backgroundColor }}>
                 {this.label}
             </div>;
 
+        const buttonProps:IButtonProps = {
+            type: this.type,
+            rootDoc: this.rootDoc,
+            label: label,
+            backgroundColor: backgroundColor,
+            icon: this.icon,
+            color: color
+        }
+
+        const buttonText = StrCast(this.rootDoc.buttonText);
+
         // TODO:glr Add label of button type
         let button = this.defaultButton;
 
         switch (this.type) {
+            case ButtonType.TextButton:
+                button = (
+                    <div className={`menuButton ${this.type}`} style={{ color: color, backgroundColor: backgroundColor, opacity: 1 }}>
+                        <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={this.icon} color={color} />
+                        {buttonText ? 
+                            <div className="button-text">
+                                    {buttonText}
+                            </div>
+                            : null}
+                        {label}
+                    </div>
+                );
+                // button = <TextButton {...buttonProps}></TextButton>
+                break;
             case ButtonType.EditableText:
                 console.log("Editable text");
                 button = this.editableText;
@@ -518,6 +544,7 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon
                 break;
             case ButtonType.ToggleButton:
                 button = this.toggleButton;
+                // button = <ToggleButton {...buttonProps}></ToggleButton>
                 break;
             case ButtonType.ClickButton:
                 button = (
diff --git a/src/client/views/nodes/button/colorDropdown/ColorDropdown.tsx b/src/client/views/nodes/button/colorDropdown/ColorDropdown.tsx
new file mode 100644
index 000000000..1809f4e2e
--- /dev/null
+++ b/src/client/views/nodes/button/colorDropdown/ColorDropdown.tsx
@@ -0,0 +1,77 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import React, { Component } from 'react';
+import { BoolCast, StrCast } from '../../../../../fields/Types';
+import { IButtonProps } from '../ButtonInterface';
+import { ColorState, SketchPicker } from 'react-color';
+import { ScriptField } from '../../../../../fields/ScriptField';
+import { Doc } from '../../../../../fields/Doc';
+
+export class ColorDropdown extends Component<IButtonProps> {
+    render() {
+        const active: string = StrCast(this.props.rootDoc.dropDownOpen);
+
+        const script: string = StrCast(this.props.rootDoc.script);
+        const scriptCheck: string = script + "(undefined, true)";
+        const boolResult = ScriptField.MakeScript(scriptCheck)?.script.run().result;
+
+        let stroke: boolean = false;
+        let strokeIcon: any;
+        // if (script === "setStrokeColor") {
+        //     stroke = true;
+        //     const checkWidth = ScriptField.MakeScript("setStrokeWidth(0, true)")?.script.run().result;
+        //     const width = 20 + (checkWidth / 100) * 70;
+        //     const height = 20 + (checkWidth / 100) * 70;
+        //     strokeIcon = (<div style={{ borderRadius: "100%", width: width + '%', height: height + '%', backgroundColor: boolResult ? boolResult : "#FFFFFF" }} />);
+        // }
+
+        const colorOptions: string[] = ['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505',
+            '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B',
+            '#FFFFFF', '#f1efeb'];
+
+        const colorBox = (func: (color: ColorState) => void) => <SketchPicker
+            disableAlpha={!stroke}
+            onChange={func} color={boolResult ? boolResult : "#FFFFFF"}
+            presetColors={colorOptions} />;
+        const label = !this.props.label || !Doc.UserDoc()._showLabel ? (null) :
+            <div className="fontIconBox-label" style={{ color: this.props.color, backgroundColor: this.props.backgroundColor, position: "absolute" }}>
+                {this.props.label}
+            </div>;
+
+        const dropdownCaret = <div
+            className="menuButton-dropDown"
+            style={{ borderBottomRightRadius: active ? 0 : undefined }}>
+            <FontAwesomeIcon icon={'caret-down'} color={this.props.color} size="sm" />
+        </div>;
+
+        const click = (value: ColorState) => {
+            const hex: string = value.hex;
+            const s = ScriptField.MakeScript(script + '("' + hex + '", false)');
+            if (s) {
+                s.script.run().result;
+            }
+        };
+        return (
+            <div className={`menuButton ${this.props.type} ${active}`}
+                style={{ color: this.props.color, borderBottomLeftRadius: active ? 0 : undefined }}
+                onClick={() => this.props.rootDoc.dropDownOpen = !this.props.rootDoc.dropDownOpen}
+                onPointerDown={e => e.stopPropagation()}>
+                {stroke ? strokeIcon : <><FontAwesomeIcon className={`fontIconBox-icon-${this.props.type}`} icon={this.props.icon} color={this.props.color} />
+                    <div className="colorButton-color"
+                        style={{ backgroundColor: boolResult ? boolResult : "#FFFFFF" }}
+                    ></div></>}
+                {label}
+                {/* {dropdownCaret} */}
+                {this.props.rootDoc.dropDownOpen ?
+                    <div>
+                        <div className="menuButton-dropdownBox"
+                            onPointerDown={e => e.stopPropagation()}
+                            onClick={e => e.stopPropagation()}>
+                            {colorBox(click)}
+                        </div>
+                        <div className="dropbox-background" onClick={(e) => { e.stopPropagation(); this.props.rootDoc.dropDownOpen = false; }} />
+                    </div>
+                    : null}
+            </div>
+        );
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/button/colorDropdown/index.ts b/src/client/views/nodes/button/colorDropdown/index.ts
new file mode 100644
index 000000000..1147d6457
--- /dev/null
+++ b/src/client/views/nodes/button/colorDropdown/index.ts
@@ -0,0 +1 @@
+export * from './ColorDropdown';
\ No newline at end of file
diff --git a/src/client/views/nodes/button/textButton/TextButton.tsx b/src/client/views/nodes/button/textButton/TextButton.tsx
new file mode 100644
index 000000000..414b50dcb
--- /dev/null
+++ b/src/client/views/nodes/button/textButton/TextButton.tsx
@@ -0,0 +1,17 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import React, { Component } from 'react';
+import { BoolCast } from '../../../../../fields/Types';
+import { IButtonProps } from '../ButtonInterface';
+
+export class TextButton extends Component<IButtonProps> {
+    render() {
+        const type = this.props.type;
+        // Determine the type of toggle button
+        const buttonText: boolean = BoolCast(this.props.rootDoc.switchToggle);
+
+        return (<div className={`menuButton ${this.props.type}`} style={{ opacity: 1, backgroundColor: this.props.backgroundColor, color: this.props.color }}>
+            <FontAwesomeIcon className={`fontIconBox-icon-${this.props.type}`} icon={this.props.icon} color={this.props.color} />
+            {this.props.label}
+        </div>)
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/button/textButton/index.ts b/src/client/views/nodes/button/textButton/index.ts
new file mode 100644
index 000000000..01fcde54f
--- /dev/null
+++ b/src/client/views/nodes/button/textButton/index.ts
@@ -0,0 +1 @@
+export * from './TextButton'
\ No newline at end of file
diff --git a/src/client/views/nodes/button/toggleButton/ToggleButton.tsx b/src/client/views/nodes/button/toggleButton/ToggleButton.tsx
new file mode 100644
index 000000000..dca6487d8
--- /dev/null
+++ b/src/client/views/nodes/button/toggleButton/ToggleButton.tsx
@@ -0,0 +1,34 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import React, { Component } from 'react';
+import { BoolCast } from '../../../../../fields/Types';
+import { Colors } from '../../../global/globalEnums';
+import { IButtonProps } from '../ButtonInterface';
+
+export class ToggleButton extends Component<IButtonProps> {
+    render() {
+        const type = this.props.type;
+        // Determine the type of toggle button
+        const switchToggle: boolean = BoolCast(this.props.rootDoc.switchToggle);
+
+        if (switchToggle) {
+            return (
+                <div className={`menuButton ${type} ${'switch'}`}>
+                    <label className="switch">
+                        <input type="checkbox"
+                            checked={this.props.backgroundColor === Colors.MEDIUM_BLUE}
+                        />
+                        <span className="slider round"></span>
+                    </label>
+                </div>
+            );
+        } else {
+            return (
+                <div className={`menuButton ${type}`}
+                    style={{ opacity: 1, backgroundColor: this.props.backgroundColor, color: this.props.color }}>
+                    <FontAwesomeIcon className={`fontIconBox-icon-${type}`} icon={this.props.icon} color={this.props.color} />
+                    {this.props.label}
+                </div>
+            );
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/button/toggleButton/index.ts b/src/client/views/nodes/button/toggleButton/index.ts
new file mode 100644
index 000000000..48b28fb4c
--- /dev/null
+++ b/src/client/views/nodes/button/toggleButton/index.ts
@@ -0,0 +1 @@
+export * from './ToggleButton'
\ No newline at end of file
diff --git a/src/client/views/nodes/trails/PresBox.tsx b/src/client/views/nodes/trails/PresBox.tsx
index cfc3e75cc..b805aa6ae 100644
--- a/src/client/views/nodes/trails/PresBox.tsx
+++ b/src/client/views/nodes/trails/PresBox.tsx
@@ -166,7 +166,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         this.layoutDoc._gridGap = 0;
         this.layoutDoc._yMargin = 0;
         this.turnOffEdit(true);
-        DocListCastAsync((Doc.UserDoc().myPresentations as Doc).data).then(pres =>
+        DocListCastAsync((Doc.UserDoc().myTrails as Doc).data).then(pres =>
             !pres?.includes(this.rootDoc) && Doc.AddDocToList(Doc.UserDoc().myPresentations as Doc, "data", this.rootDoc));
         this._disposers.selection = reaction(() => SelectionManager.Views(),
             views => views.some(view => view.props.Document === this.rootDoc) && this.updateCurrentPresentation());