updates towards a menu

3 files changed, 230 insertions, 126 deletions

diff --git a/src/client/views/nodes/button/FontIconBadge.tsx b/src/client/views/nodes/button/FontIconBadge.tsx
index 3be723052..3e451eea6 100644
--- a/src/client/views/nodes/button/FontIconBadge.tsx
+++ b/src/client/views/nodes/button/FontIconBadge.tsx
@@ -1,11 +1,10 @@
-
-import { AclPrivate, Doc, DocListCast } from '../../../../fields/Doc';
-import { GetEffectiveAcl } from '../../../../fields/util';
+import { observer } from "mobx-react";
+import React from "react";
+import { AclPrivate, Doc, DocListCast } from "../../../../fields/Doc";
+import { GetEffectiveAcl } from "../../../../fields/util";
 import { emptyFunction, returnFalse, setupMoveUpEvents } from "../../../../Utils";
-import { DragManager } from '../../../util/DragManager';
-import './FontIconBox.scss';
-import { observer } from 'mobx-react';
-import React from 'react';
+import { DragManager } from "../../../util/DragManager";
+
 interface FontIconBadgeProps {
     collection: Doc | undefined;
 }
diff --git a/src/client/views/nodes/button/FontIconBox.scss b/src/client/views/nodes/button/FontIconBox.scss
index d4f1b9379..46a499466 100644
--- a/src/client/views/nodes/button/FontIconBox.scss
+++ b/src/client/views/nodes/button/FontIconBox.scss
@@ -1,103 +1,205 @@
 @import "../../global/globalCssVariables";
 
-.fontIconBox-label {
-    color: $white;
-    margin-right: 4px;
-    margin-top: 1px;
-    position: relative;
-    text-align: center;
-    font-size: 7px;
-    letter-spacing: normal;
-    background-color: inherit;
-    border-radius: 8px;
-    margin-top: -8px;
-    padding: 0;
-    width: 100%;
-}
+.menuButton {
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 80%;
+    border-radius: 7px;
 
-.fontIconBadge-container {
-    position:absolute;
-    z-index: 1000;
-    top: 12px;
+    .menuButton-wrap {
+        grid-column: 1;
+        justify-content: center;
+        align-items: center;
+        text-align: center;
+    }
 
-    .fontIconBadge {
-        position: absolute;
-        top: -10px;
-        right: -10px;
+    .fontIconBox-label {
         color: $white;
-        background: $pink;
-        font-weight: 300;
-        border-radius: 100%;
-        width: 25px;
-        height: 25px;
+        position: relative;
         text-align: center;
-        padding-top: 4px;
-        font-size: 12px;
+        font-size: 7px;
+        letter-spacing: normal;
+        background-color: inherit;
+        margin-top: 5px;
+        border-radius: 8px;
+        padding: 0;
+        width: 100%;
+        font-family: 'ROBOTO';
+        text-transform: uppercase;
+        font-weight: bold;
     }
-}
 
-.menuButton-circle,
-.menuButton-round {
-    border-radius: 100%;
-    background-color: $dark-gray;
-    padding: 0;
-
-    .fontIconBox-label {
-        //margin-left: -10px; // button padding is 10px;
-        bottom: 0;
-        position: absolute;
+    .fontIconBox-icon {
+        width: 80%;
+        height: 80%;
     }
 
-    &:hover {
-        background-color: $light-gray;
+    &.clickBtn {
+        cursor: pointer;
     }
-}
 
-.menuButton-square {
-    padding-top: 3px;
-    padding-bottom: 3px;
-    background-color: $dark-gray;
+    &.tglBtn {
+        cursor: pointer;
+    }
 
-    .fontIconBox-label {
+    &.menuBtn {
+        cursor: pointer;
         border-radius: 0px;
-        margin-top: 0px;
-        border-radius: "inherit";
+        flex-direction: column;
+
+        svg {
+            width: 45% !important;
+            height: 45%;
+        }
     }
-}
 
-.menuButton,
-.menuButton-circle,
-.menuButton-round,
-.menuButton-square {
-    margin-left: -5%;
-    width: 110%;
-    height: 100%;
-    pointer-events: all;
-    touch-action: none;
+    &.colorBtn {
+        color: black;
+        cursor: pointer;
+        flex-direction: row;
+        background: transparent;
 
-    .menuButton-wrap {
-        touch-action: none;
-        border-radius: 8px;
-        width: 100%;
+        .menuButton-dropdownBox {
+            position: absolute;
+            width: 150px;
+            height: 250px;
+            top: 100%;
+            z-index: 21;
+            background-color: #e3e3e3;
+            box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.3);
+            border-radius: 3px;
+        }
     }
 
-    .menuButton-icon-square {
-        width: auto;
-        height: 29px;
-        padding: 4px;
+    &.drpdownList {
+        width: 100px;
+        display: grid;
+        grid-auto-columns: 80px 20px;
+        justify-items: flex-start;
+        padding-left: 10px;
+        font-family: 'Roboto';
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        font-size: 13;
+        font-weight: 600;
+        overflow: hidden;
+        cursor: pointer;
+        background: transparent;
+
+        .menuButton-dropdownList {
+            position: absolute;
+            width: 150px;
+            height: fit-content;
+            top: 100%;
+            z-index: 21;
+            background-color: #e3e3e3;
+            box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.3);
+            border-radius: 3px;
+
+            .list-item {
+                color: black;
+                width: 100%;
+                height: 25px;
+                display: flex;
+                justify-content: left;
+                align-items: center;
+                padding-left: 5px;
+            }
+
+            .list-item:hover {
+                background-color:lightgrey;
+            }
+        }
     }
 
-    svg {
-        width: 95% !important;
-        height: 95%;
+    &.drpDownBtn {
+        cursor: pointer;
+        background: transparent;
+
+        &.true {
+            background: rgba(0, 0, 0, 0.3);
+        }
+
+        .menuButton-dropdownBox {
+            position: absolute;
+            width: 150px;
+            height: 250px;
+            top: 100%;
+            background-color: #e3e3e3;
+            box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.3);
+            border-radius: 3px;
+        }
     }
+
 }
-.menuButton-round {
-    width: 100%;
-    svg {
-        width: 50% !important;
-        height: 50%;
-        position: relative;
-        bottom: 2px;
-    }
-}
\ No newline at end of file
+
+
+// .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;
+//     }
+
+//     .menuButton-dropdown {
+//         display: flex;
+//         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;
+//     }
+
+//     &:hover {
+//         background-color: $light-gray;
+//     }
+
+//     .dropbox-background {
+//         width: 100vw;
+//         height: 100vh;
+//         top: 0;
+//         z-index: 20;
+//         left: 0;
+//         background:transparent;
+//         position: fixed;
+//     }
+// }
+
diff --git a/src/client/views/nodes/button/FontIconBox.tsx b/src/client/views/nodes/button/FontIconBox.tsx
index f98d01dfc..2c6369e9f 100644
--- a/src/client/views/nodes/button/FontIconBox.tsx
+++ b/src/client/views/nodes/button/FontIconBox.tsx
@@ -2,20 +2,19 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Tooltip } from '@material-ui/core';
 import { action, computed, observable } from 'mobx';
 import { observer } from 'mobx-react';
-import React from 'react';
+import * as React from 'react';
 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 } from '../../../../fields/Types';
+import { BoolCast, Cast, StrCast, ScriptCast } from '../../../../fields/Types';
 import { SelectionManager } from '../../../util/SelectionManager';
 import { ColorScheme } from '../../../util/SettingsManager';
 import { undoBatch, UndoManager } from '../../../util/UndoManager';
 import { ContextMenu } from '../../ContextMenu';
 import { DocComponent } from '../../DocComponent';
 import { StyleProp } from '../../StyleProvider';
-import { FieldView, FieldViewProps } from '../FieldView';
-import { FontIconBadge } from './FontIconBadge';
+import { FieldView, FieldViewProps } from '.././FieldView';
 import './FontIconBox.scss';
 const FontIconSchema = createSchema({
     icon: "string",
@@ -31,10 +30,14 @@ export enum ButtonType {
     ColorButton = "colorBtn"
 }
 
+export interface ButtonProps extends FieldViewProps {
+    type?: ButtonType;
+}
+
 type FontIconDocument = makeInterface<[typeof FontIconSchema]>;
 const FontIconDocument = makeInterface(FontIconSchema);
 @observer
-export class FontIconBox extends DocComponent<FieldViewProps, FontIconDocument>(FontIconDocument) {
+export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(FontIconDocument) {
     public static LayoutString(fieldKey: string) { return FieldView.LayoutString(FontIconBox, fieldKey); }
     showTemplate = (): void => {
         const dragFactory = Cast(this.layoutDoc.dragFactory, Doc, null);
@@ -56,8 +59,6 @@ export class FontIconBox extends DocComponent<FieldViewProps, FontIconDocument>(
 
     // Determining UI Specs
     @observable private label = StrCast(this.rootDoc.label, StrCast(this.rootDoc.title));
-    @observable private color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color);
-    @observable private backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor);
     @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);
@@ -82,16 +83,18 @@ export class FontIconBox extends DocComponent<FieldViewProps, FontIconDocument>(
      */
     @computed get dropdownButton() {
         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);
         return (
             <div className={`menuButton ${this.type} ${active}`}
-                style={{ color: "black", borderBottomLeftRadius: this.dropdown ? 0 : undefined }}
+                style={{ color: color, backgroundColor: backgroundColor, borderBottomLeftRadius: this.dropdown ? 0 : undefined }}
                 onClick={action(() => this.rootDoc.dropDownOpen = !this.rootDoc.dropDownOpen)}>
-                <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={this.icon} color={this.color} />
-                {!this.label || !Doc.UserDoc()._showLabel ? (null) : <div className="fontIconBox-label" style={{ color: this.color, backgroundColor: this.backgroundColor }}> {this.label} </div>}
+                <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={this.icon} color={color} />
+                {!this.label || !Doc.UserDoc()._showLabel ? (null) : <div className="fontIconBox-label" style={{ color: color, backgroundColor: backgroundColor }}> {this.label} </div>}
                 <div
                     className="menuButton-dropdown"
                     style={{ borderBottomRightRadius: this.dropdown ? 0 : undefined }}>
-                    <FontAwesomeIcon icon={'caret-down'} color={"black"} size="sm" />
+                    <FontAwesomeIcon icon={'caret-down'} color={color} size="sm" />
                 </div>
                 {this.rootDoc.dropDownOpen ?
                     <div className="menuButton-dropdownBox"
@@ -121,14 +124,16 @@ export class FontIconBox extends DocComponent<FieldViewProps, FontIconDocument>(
      * Default
      */
     @computed get defaultButton() {
+        const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color);
+        const backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor);
         const active: string = StrCast(this.rootDoc.dropDownOpen);
         return (
             <div className={`menuButton ${this.type}`} onContextMenu={this.specificContextMenu}
                 style={{ backgroundColor: "transparent", borderBottomLeftRadius: this.dropdown ? 0 : undefined }}>
                 <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: this.color, backgroundColor: this.backgroundColor }}> {this.label} </div>}
-                    <FontIconBadge collection={Cast(this.rootDoc.watchedDocuments, Doc, null)} />
+                    {!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>
         )
@@ -136,6 +141,8 @@ export class FontIconBox extends DocComponent<FieldViewProps, FontIconDocument>(
 
 
     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 canUndo: boolean = UndoManager.CanUndo();
         const canRedo: boolean = UndoManager.CanRedo();
@@ -144,7 +151,7 @@ export class FontIconBox extends DocComponent<FieldViewProps, FontIconDocument>(
         const userDoc = Doc.UserDoc();
 
         // Toggle and canClick properties as determined from the variable passed into the button doc
-        // const toggle = this.rootDoc.toggle ? ScriptCast(this.rootDoc.toggle) : undefined;
+        const toggle = this.rootDoc.toggle ? ScriptCast(this.rootDoc.toggle) : undefined;
         const canClick: boolean = this.rootDoc.canClick ? eval(StrCast(this.rootDoc.canClick)) : false;
         // if (toggle) {
         //     console.log(StrCast(this.rootDoc.title), toggle);
@@ -154,11 +161,11 @@ export class FontIconBox extends DocComponent<FieldViewProps, FontIconDocument>(
 
         const active: string = StrCast(this.rootDoc.dropDownOpen);
         const label = !this.label || !Doc.UserDoc()._showLabel ? (null) :
-            <div className="fontIconBox-label" style={{ color: this.color, backgroundColor: this.backgroundColor }}>
+            <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: this.color, backgroundColor: this.backgroundColor }}>
+            <div className="fontIconBox-label" style={{ color: color, backgroundColor: backgroundColor }}>
                 {this.label}
             </div>;
         const dropdownCaret = <div
@@ -166,7 +173,7 @@ export class FontIconBox extends DocComponent<FieldViewProps, FontIconDocument>(
             style={{ borderBottomRightRadius: this.dropdown ? 0 : undefined }}>
             <FontAwesomeIcon icon={'caret-down'} color={"black"} size="sm" />
         </div>;
-        const colorBox = (func: (color: ColorState) => void) => <SketchPicker onChange={func} color={StrCast(this.backgroundColor)}
+        const colorBox = (func: (color: ColorState) => void) => <SketchPicker onChange={func} color={StrCast(backgroundColor)}
             presetColors={['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505',
                 '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B',
                 '#FFFFFF', '#f1efeb', 'transparent']} />;
@@ -207,9 +214,9 @@ export class FontIconBox extends DocComponent<FieldViewProps, FontIconDocument>(
             case ButtonType.DropdownList:
                 button = (
                     <div className={`menuButton ${this.type} ${active}`}
-                        style={{ backgroundColor: this.rootDoc.dropDownOpen ? "#aeddf880" : undefined, color: this.rootDoc.dropDownOpen ? "#1c5c96" : "black", borderBottomLeftRadius: this.dropdown ? 0 : undefined }}
+                        style={{ backgroundColor: this.rootDoc.dropDownOpen ? "#aeddf880" : backgroundColor, color: this.rootDoc.dropDownOpen ? "#1c5c96" : color, borderBottomLeftRadius: this.dropdown ? 0 : undefined }}
                         onClick={() => this.rootDoc.dropDownOpen = !this.rootDoc.dropDownOpen}>
-                        {/* {toggle} */}
+                        {toggle}
                         {label}
                         {dropdownCaret}
                         {this.rootDoc.dropDownOpen ?
@@ -227,10 +234,10 @@ export class FontIconBox extends DocComponent<FieldViewProps, FontIconDocument>(
             case ButtonType.ColorButton:
                 button = (
                     <div className={`menuButton ${this.type} ${active}`}
-                        style={{ opacity: selectedDoc ? 1 : 0.5, color: dark ? "white" : "black", borderBottomLeftRadius: this.dropdown ? 0 : undefined }}
+                        style={{ opacity: selectedDoc ? 1 : 0.5, color: color, backgroundColor: backgroundColor, borderBottomLeftRadius: this.dropdown ? 0 : undefined }}
                         onClick={() => this.rootDoc.dropDownOpen = !this.rootDoc.dropDownOpen}
                         onPointerDown={e => e.stopPropagation()}>
-                        <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={this.icon} color={dark ? "white" : "black"} />
+                        <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={this.icon} color={color} />
                         {label}
                         {dropdownCaret}
                         {this.rootDoc.dropDownOpen ?
@@ -247,40 +254,36 @@ export class FontIconBox extends DocComponent<FieldViewProps, FontIconDocument>(
                     </div>
                 );
                 break;
-            // case ButtonType.ToggleButton:
-            //     button = (
-            //         <div className={`menuButton ${this.type}`} style={{ opacity: canClick ? 1 : 0.4, backgroundColor: toggle ? this.backgroundColor : undefined }}>
-            //             <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={this.icon} color={toggle ? this.color : this.backgroundColor} />
-            //             {label}
-            //         </div>
-            //     );
-            //     break;
+            case ButtonType.ToggleButton:
+                button = (
+                    <div className={`menuButton ${this.type}`} style={{ opacity: canClick ? 1 : 0.4, backgroundColor: toggle ? backgroundColor : undefined }}>
+                        <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={this.icon} color={toggle ? color : backgroundColor} />
+                        {label}
+                    </div>
+                );
+                break;
             case ButtonType.ClickButton:
                 button = (
-                    <div className={`menuButton ${this.type}`} style={{ color: this.color, backgroundColor: this.backgroundColor, opacity: canClick ? 1 : 0.4 }}>
-                        <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={this.icon} color={this.color} />
+                    <div className={`menuButton ${this.type}`} style={{ color: color, backgroundColor: backgroundColor, opacity: canClick ? 1 : 0.4 }}>
+                        <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={this.icon} color={color} />
                         {label}
                     </div>
                 );
                 break;
             case ButtonType.DoubleButton:
                 button = (
-                    <div className={`menuButton ${this.type}`} style={{ color: this.color, backgroundColor: this.backgroundColor }}>
-                        <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={this.icon} color={this.color} />
+                    <div className={`menuButton ${this.type}`} style={{ color: color, backgroundColor: backgroundColor }}>
+                        <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={this.icon} color={color} />
                         {label}
                     </div>
                 );
                 break;
             case ButtonType.MenuButton:
                 button = (
-                    <div className={`menuButton ${this.type}`} style={{ color: dark ? "white" : "black", backgroundColor: dark ? "black" : "lightgrey" }}>
-                        <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={this.icon} color={dark ? "white" : "black"} />
+                    <div className={`menuButton ${this.type}`} style={{ color: color, backgroundColor: backgroundColor }}>
+                        <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={this.icon} color={color} />
                         {menuLabel}
                     </div >
-                    // <div className={`menuButton ${type}`} style={{ color, backgroundColor }}>
-                    //     <FontAwesomeIcon className={`fontIconBox-icon-${type}`} icon={icon} color={color} />
-                    //     {label}
-                    // </div>
                 );
                 break;
             default: