some cleanup of currentUserUtils. css fixes for fonticon boxes with labels

4 files changed, 146 insertions, 232 deletions

diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index b9d2d63ba..b9789ab7f 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -6,7 +6,6 @@ import { InkTool } from "../../fields/InkField";
 import { List } from "../../fields/List";
 import { PrefetchProxy } from "../../fields/Proxy";
 import { RichTextField } from "../../fields/RichTextField";
-import { listSpec } from "../../fields/Schema";
 import { ComputedField, ScriptField } from "../../fields/ScriptField";
 import { BoolCast, Cast, DateCast, NumCast, PromiseValue, StrCast } from "../../fields/Types";
 import { nullAudio } from "../../fields/URLField";
@@ -23,7 +22,6 @@ import { Colors } from "../views/global/globalEnums";
 import { MainView } from "../views/MainView";
 import { ButtonType, NumButtonType } from "../views/nodes/button/FontIconBox";
 import { CollectionFreeFormDocumentView } from "../views/nodes/CollectionFreeFormDocumentView";
-import { FormattedTextBox } from "../views/nodes/formattedText/FormattedTextBox";
 import { OverlayView } from "../views/OverlayView";
 import { DocumentManager } from "./DocumentManager";
 import { DragManager } from "./DragManager";
@@ -53,6 +51,7 @@ interface Button {
     list?: string[];
     ignoreClick?: boolean;
     buttonText?: string;
+    hidden?: string;
 }
 
 export let resolvedPorts: { server: number, socket: number };
@@ -62,7 +61,6 @@ export class CurrentUserUtils {
     //TODO tfs: these should be temporary...
     private static mainDocId: string | undefined;
 
-    public static searchBtn: Doc;
     public static get id() { return this.curr_id; }
     public static get MainDocId() { return this.mainDocId; }
     public static set MainDocId(id: string | undefined) { this.mainDocId = id; }
@@ -196,7 +194,6 @@ export class CurrentUserUtils {
             ].filter(d => d).map(d => d!);
 
             doc["template-icons"] = Docs.Create.TreeDocument(newIconsList, { title: "icon templates", _height: 75, system: true });
-            newIconsList.forEach(d => (doc["template-icons"] as Doc)[StrCast(d.title)] = new PrefetchProxy(d));
         }
     }
 
@@ -329,15 +326,11 @@ export class CurrentUserUtils {
     }
 
     // setup the "creator" buttons for the sidebar-- eg. the default set of draggable document creation tools
-    static async setupCreatorButtons(doc: Doc) {
+    static setupCreatorButtons(doc: Doc) {
         let alreadyCreatedButtons: string[] = [];
         const dragCreatorSet = Cast(doc.myItemCreators, Doc, null);
         if (dragCreatorSet) {
-            const dragCreators = Cast(dragCreatorSet.data, listSpec(Doc));
-            if (dragCreators) {
-                const dragDocs = await Promise.all(Array.from(dragCreators));
-                alreadyCreatedButtons = dragDocs.map(d => StrCast(d.title));
-            }
+            alreadyCreatedButtons = DocListCast(dragCreatorSet.data).map(d => StrCast(d.title));
         }
         const buttons = CurrentUserUtils.creatorBtnDescriptors(doc).filter(d => !alreadyCreatedButtons?.includes(d.title));
         const creatorBtns = buttons.map(({ title, toolTip, icon, ignoreClick, drag, click, backgroundColor, dragFactory, noviceMode, clickFactory }) => Docs.Create.FontIconDocument({
@@ -373,7 +366,7 @@ export class CurrentUserUtils {
         return doc.myItemCreators as Doc;
     }
 
-    static async menuBtnDescriptions(doc: Doc) {
+    static menuBtnDescriptions(doc: Doc) {
         return [
             { title: "Dashboards", target: Cast(doc.myDashboards, Doc, null), icon: "desktop", click: 'selectMainMenu(self)' },
             { title: "Search", target: Cast(doc.mySearchPanel, Doc, null), icon: "search", click: 'selectMainMenu(self)' },
@@ -390,7 +383,7 @@ export class CurrentUserUtils {
     static async setupMenuPanel(doc: Doc, sharingDocumentId: string, linkDatabaseId: string) {
         if (doc.menuStack === undefined) {
             await this.setupSharingSidebar(doc, sharingDocumentId, linkDatabaseId);  // sets up the right sidebar collection for mobile upload documents and sharing
-            const menuBtns = (await CurrentUserUtils.menuBtnDescriptions(doc)).map(({ title, target, icon, click, watchedDocuments, hidden }) =>
+            const menuBtns = CurrentUserUtils.menuBtnDescriptions(doc).map(({ title, target, icon, click, watchedDocuments, hidden }) =>
                 Docs.Create.FontIconDocument({
                     icon,
                     btnType: ButtonType.MenuButton,
@@ -411,17 +404,7 @@ export class CurrentUserUtils {
                 })
             );
 
-            menuBtns.forEach(menuBtn => {
-                if (menuBtn.title === "Search") {
-                    this.searchBtn = menuBtn;
-                }
-            });
-
-            menuBtns.forEach(menuBtn => {
-                if (menuBtn.title === "Search") {
-                    doc.searchBtn = menuBtn;
-                }
-            });
+            doc.searchBtn = menuBtns.find(btn => btn.title === "Search");
 
             doc.menuStack = new PrefetchProxy(Docs.Create.StackingDocument(menuBtns, {
                 title: "menuItemPanel",
@@ -436,19 +419,6 @@ export class CurrentUserUtils {
                 _yPadding: 0, _xMargin: 0, _autoHeight: false, _width: 60, _columnWidth: 60, _lockedPosition: true, system: true
             }));
         }
-        // this resets all sidebar buttons to being deactivated
-        PromiseValue(Cast(doc.menuStack, Doc)).then(stack => {
-            stack && PromiseValue(stack.data).then(btns => {
-                DocListCastAsync(btns).then(bts => bts?.forEach(btn => {
-                    btn.dontUndo = true;
-                    btn.system = true;
-                    if (btn.title === "Catalog" || btn.title === "My Files") { // migration from Catalog to My Files
-                        btn.target = Doc.UserDoc().myFilesystem;
-                        btn.title = "My Files";
-                    }
-                }));
-            });
-        });
         return doc.menuStack as Doc;
     }
 
@@ -578,35 +548,26 @@ export class CurrentUserUtils {
 
     // setup the Creator button which will display the creator panel.  This panel will include the drag creators and the color picker.
     // when clicked, this panel will be displayed in the target container (ie, sidebarContainer)
-    static async setupToolsBtnPanel(doc: Doc) {
+    static setupToolsBtnPanel(doc: Doc) {
         // setup a masonry view of all he creators
-        const creatorBtns = await CurrentUserUtils.setupCreatorButtons(doc);
+        const creatorBtns = CurrentUserUtils.setupCreatorButtons(doc);
         const templateBtns = CurrentUserUtils.setupExperimentalTemplateButtons(doc);
 
-        doc["tabs-button-tools"] = undefined;
-
-        if (doc.myCreators === undefined) {
-            doc.myCreators = new PrefetchProxy(Docs.Create.StackingDocument([creatorBtns, templateBtns], {
-                title: "all Creators", _yMargin: 0, _autoHeight: true, _xMargin: 0, _fitWidth: true,
-                _width: 500, _height: 300, ignoreClick: true, _lockedPosition: true, system: true, _chromeHidden: true,
-            }));
-        }
-        // setup a color picker
-        if (doc.myColorPicker === undefined) {
-            const color = Docs.Create.ColorDocument({
-                title: "color picker", _width: 220, _dropAction: "alias", _hideContextMenu: true, _stayInCollection: true, _forceActive: true, _removeDropProperties: new List<string>(["dropAction", "_stayInCollection", "_hideContextMenu", "forceActive"]), system: true
-            });
-            doc.myColorPicker = new PrefetchProxy(color);
-        }
+        doc.myCreators = doc.myCreators ?? new PrefetchProxy(Docs.Create.StackingDocument([creatorBtns, templateBtns], {
+            title: "all Creators", _yMargin: 0, _autoHeight: true, _xMargin: 0, _fitWidth: true,
+            _width: 500, _height: 300, ignoreClick: true, _lockedPosition: true, system: true, _chromeHidden: true,
+        }));
+        if (!DocListCast(doc.myCreators).includes(creatorBtns as Doc) || !DocListCast(doc.myCreators).includes(templateBtns as Doc)) Doc.GetProto(doc.myCreators as Doc).data = new List<Doc>([creatorBtns, templateBtns]);
 
-        if (doc.myTools === undefined) {
-            const toolsStack = new PrefetchProxy(Docs.Create.StackingDocument([doc.myCreators as Doc], {
-                title: "My Tools", _showTitle: "title", _width: 500, _yMargin: 20, ignoreClick: true, _lockedPosition: true, _forceActive: true,
-                system: true, _stayInCollection: true, _hideContextMenu: true, _chromeHidden: true, boxShadow: "0 0",
-            })) as any as Doc;
+        doc.myColorPicker = doc.myColorPicker ?? new PrefetchProxy(Docs.Create.ColorDocument({
+            title: "color picker", _width: 220, _dropAction: "alias", _hideContextMenu: true, _stayInCollection: true, _forceActive: true, _removeDropProperties: new List<string>(["dropAction", "_stayInCollection", "_hideContextMenu", "forceActive"]), system: true
+        }));
 
-            doc.myTools = toolsStack;
-        }
+        doc.myTools = doc.myTools ?? new PrefetchProxy(Docs.Create.StackingDocument([doc.myCreators as Doc], {
+            title: "My Tools", _showTitle: "title", _width: 500, _yMargin: 20, ignoreClick: true, _lockedPosition: true, _forceActive: true,
+            system: true, _stayInCollection: true, _hideContextMenu: true, _chromeHidden: true, boxShadow: "0 0",
+        })) as any as Doc;
+        if (!DocListCast(doc.myTools).includes(doc.myCreators as Doc)) Doc.GetProto(doc.myTools as Doc).data = new List<Doc>([doc.myCreators as Doc]);
     }
 
     static async setupDashboards(doc: Doc) {
@@ -639,8 +600,7 @@ export class CurrentUserUtils {
         return doc.myDashboards as any as Doc;
     }
 
-    static async setupPresentations(doc: Doc) {
-        await doc.myTrails;
+    static setupPresentations(doc: Doc) {
         if (doc.myTrails === undefined) {
             const newTrail = ScriptField.MakeScript(`createNewPresentation()`);
             const newTrailButton: Doc = Docs.Create.FontIconDocument({ onClick: newTrail, _forceActive: true, toolTip: "Create new trail", _stayInCollection: true, _hideContextMenu: true, title: "New trail", btnType: ButtonType.ClickButton, _width: 30, _height: 30, buttonText: "New trail", icon: "plus", system: true });
@@ -743,7 +703,7 @@ export class CurrentUserUtils {
     // setup the list of sidebar mode buttons which determine what is displayed in the sidebar
     static async setupSidebarButtons(doc: Doc) {
         CurrentUserUtils.setupSidebarContainer(doc);
-        await CurrentUserUtils.setupToolsBtnPanel(doc);
+        CurrentUserUtils.setupToolsBtnPanel(doc);
         CurrentUserUtils.setupImportSidebar(doc);
         CurrentUserUtils.setupDashboards(doc);
         CurrentUserUtils.setupPresentations(doc);
@@ -764,17 +724,26 @@ export class CurrentUserUtils {
 
     /// sets up the default list of buttons to be shown in the expanding button menu at the bottom of the Dash window
     static setupDockedButtons(doc: Doc) {
-        if (doc["dockedBtn-undo"] === undefined) {
-            doc["dockedBtn-undo"] = CurrentUserUtils.createToolButton({ onClick: ScriptField.MakeScript("undo()"), _width: 30, _height: 30, dontUndo: true, _stayInCollection: true, btnType: ButtonType.ToolButton, _dropAction: "alias", _hideContextMenu: true, _removeDropProperties: new List<string>(["dropAction", "_hideContextMenu", "stayInCollection"]), toolTip: "Click to undo", title: "undo", icon: "undo-alt", system: true });
-        }
-        if (doc["dockedBtn-redo"] === undefined) {
-            doc["dockedBtn-redo"] = CurrentUserUtils.createToolButton({ onClick: ScriptField.MakeScript("redo()"), _width: 30, _height: 30, dontUndo: true, _stayInCollection: true, btnType: ButtonType.ToolButton, _dropAction: "alias", _hideContextMenu: true, _removeDropProperties: new List<string>(["dropAction", "_hideContextMenu", "stayInCollection"]), toolTip: "Click to redo", title: "redo", icon: "redo-alt", system: true });
-        }
         if (doc.dockedBtns === undefined) {
-            doc.dockedBtns = CurrentUserUtils.linearButtonList({ title: "docked buttons", _height: 40, flexGap: 0, linearViewFloating: true, linearViewIsExpanded: true, linearViewExpandable: true, ignoreClick: true }, [doc["dockedBtn-undo"] as Doc, doc["dockedBtn-redo"] as Doc]);
+            if (doc["dockedBtn-undo"] === undefined) {
+                doc["dockedBtn-undo"] = CurrentUserUtils.createToolButton({
+                    title: "undo", icon: "undo-alt", _width: 30, _height: 30, dontUndo: true, _stayInCollection: true, _hideContextMenu: true, system: true,
+                    onClick: ScriptField.MakeScript("undo()"), btnType: ButtonType.ToolButton, _dropAction: "alias",
+                    _removeDropProperties: new List<string>(["dropAction", "_hideContextMenu", "stayInCollection"]), toolTip: "Click to undo"
+                });
+            }
+            if (doc["dockedBtn-redo"] === undefined) {
+                doc["dockedBtn-redo"] = CurrentUserUtils.createToolButton({
+                    title: "redo", icon: "redo-alt", _width: 30, _height: 30, dontUndo: true, _stayInCollection: true, _hideContextMenu: true, system: true,
+                    onClick: ScriptField.MakeScript("redo()"), btnType: ButtonType.ToolButton, _dropAction: "alias",
+                    _removeDropProperties: new List<string>(["dropAction", "_hideContextMenu", "stayInCollection"]), toolTip: "Click to redo",
+                });
+            }
+            doc.dockedBtns = CurrentUserUtils.linearButtonList({
+                title: "docked buttons", _height: 40, flexGap: 0, linearViewFloating: true,
+                linearViewIsExpanded: true, linearViewExpandable: true, ignoreClick: true
+            }, [doc["dockedBtn-undo"] as Doc, doc["dockedBtn-redo"] as Doc]);
         }
-        (doc["dockedBtn-undo"] as Doc).dontUndo = true;
-        (doc["dockedBtn-redo"] as Doc).dontUndo = true;
     }
 
     static textTools(doc: Doc) {
@@ -821,16 +790,7 @@ export class CurrentUserUtils {
 
     static schemaTools(doc: Doc) {
         const tools: Button[] =
-            [
-                {
-                    title: "Show preview",
-                    toolTip: "Show preview of selected document",
-                    btnType: ButtonType.ToggleButton,
-                    buttonText: "Show Preview",
-                    icon: "eye",
-                    click: 'toggleSchemaPreview(_readOnly_)',
-                },
-            ];
+            [{ title: "Show preview", toolTip: "Show preview of selected document", btnType: ButtonType.ToggleButton, buttonText: "Show Preview", icon: "eye", click: 'toggleSchemaPreview(_readOnly_)', }];
         return tools;
     }
 
@@ -846,7 +806,7 @@ export class CurrentUserUtils {
         return tools;
     }
 
-    static async contextMenuTools(doc: Doc) {
+    static contextMenuTools(doc: Doc) {
         return [
             {
                 title: "Perspective", toolTip: "View", width: 100, btnType: ButtonType.DropdownList, ignoreClick: true,
@@ -857,128 +817,52 @@ export class CurrentUserUtils {
                 CollectionViewType.Grid],
                 script: 'setView(value, _readOnly_)',
             }, // Always show
-            {
-                title: "Back", toolTip: "Prev AnimationFrame", width: 20, btnType: ButtonType.ClickButton, click: 'prevKeyFrame()', icon: "chevron-left",
-                hidden: 'IsNoviceMode()'
-            },
-            {
-                title: "Fwd", toolTip: "Next Animation Frame", width: 20, btnType: ButtonType.ClickButton, click: 'nextKeyFrame()', icon: "chevron-right",
-                hidden: 'IsNoviceMode()'
-            },
-            {
-                title: "Fill", toolTip: "Background Fill Color", width: 20, btnType: ButtonType.ColorButton, ignoreClick: true, icon: "fill-drip",
-                script: "setBackgroundColor(value, _readOnly_)", hidden: 'selectedDocumentType()'
-            }, // Only when a document is selected
-            {
-                title: "Header", toolTip: "Header Color", btnType: ButtonType.ColorButton, ignoreClick: true, icon: "heading",
-                script: "setHeaderColor(value, _readOnly_)", hidden: 'selectedDocumentType()',
-            }, // Only when a document is selected
-            { title: "Overlay", toolTip: "Overlay", btnType: ButtonType.ToggleButton, icon: "layer-group", backgroundColor: 'toggleOverlay(true)', click: 'toggleOverlay()', hidden: 'selectedDocumentType(undefined, "freeform", true)' }, // Only when floating document is selected in freeform
+            { title: "Back", toolTip: "Prev Animation Frame", width: 20, btnType: ButtonType.ClickButton, click: 'prevKeyFrame(_readOnly_)', icon: "chevron-left", hidden: 'IsNoviceMode()' },
+            { title: "Fwd", toolTip: "Next Animation Frame", width: 20, btnType: ButtonType.ClickButton, click: 'nextKeyFrame(_readOnly_)', icon: "chevron-right", hidden: 'IsNoviceMode()' },
+            { title: "Fill", toolTip: "Background Fill Color", width: 20, btnType: ButtonType.ColorButton, ignoreClick: true, icon: "fill-drip", script: "setBackgroundColor(value, _readOnly_)", hidden: 'selectedDocumentType()' }, // Only when a document is selected
+            { title: "Header", toolTip: "Header Color", btnType: ButtonType.ColorButton, ignoreClick: true, icon: "heading", script: "setHeaderColor(value, _readOnly_)", hidden: 'selectedDocumentType()', },
+            { title: "Overlay", toolTip: "Overlay", btnType: ButtonType.ToggleButton, icon: "layer-group", click: 'toggleOverlay(_readOnly_)', hidden: 'selectedDocumentType(undefined, "freeform", true)' }, // Only when floating document is selected in freeform
             // { title: "Alias", btnType: ButtonType.ClickButton, icon: "copy", hidden: 'selectedDocumentType()' }, // Only when a document is selected 
-            { title: "Text", type: "textTools", subMenu: true, expanded: 'selectedDocumentType("rtf")' }, // Always available
-            { title: "Ink", type: "inkTools", subMenu: true, expanded: 'selectedDocumentType("ink")' }, // Always available
-            { title: "Web", type: "webTools", subMenu: true, hidden: 'selectedDocumentType("web")' }, // Only when Web is selected
-            { title: "Schema", type: "schemaTools", subMenu: true, hidden: 'selectedDocumentType(undefined, "schema")' } // Only when Schema is selected
+            { title: "Text", type: "textTools", subMenu: CurrentUserUtils.textTools(doc), expanded: 'selectedDocumentType("rtf")' }, // Always available
+            { title: "Ink", type: "inkTools", subMenu: CurrentUserUtils.inkTools(doc), expanded: 'selectedDocumentType("ink")' }, // Always available
+            { title: "Web", type: "webTools", subMenu: CurrentUserUtils.webTools(doc), hidden: 'selectedDocumentType("web")' }, // Only when Web is selected
+            { title: "Schema", type: "schemaTools", subMenu: CurrentUserUtils.schemaTools(doc), hidden: 'selectedDocumentType(undefined, "schema")' } // Only when Schema is selected
         ];
     }
 
     // Sets up the default context menu buttons
-    static async setupContextMenuButtons(doc: Doc) {
+    static setupContextMenuButtons(doc: Doc) {
+        const btnFunc = (params: Button) => Docs.Create.FontIconDocument({
+            title: params.title, icon: params.icon, toolTip: params.toolTip, color: Colors.WHITE, system: true, dontUndo: true, ignoreClick: params.ignoreClick,
+            _nativeWidth: params.width ? params.width : 30,
+            _nativeHeight: 30,
+            _width: params.width ? params.width : 30,
+            _height: 30,
+            btnType: params.btnType,
+            numBtnType: params.numBtnType, numBtnMin: params.numBtnMin, numBtnMax: params.numBtnMax,
+            btnList: new List<string>(params.list),
+            _stayInCollection: true,
+            _hideContextMenu: true,
+            _lockedPosition: true,
+            _dropAction: "alias",
+            _removeDropProperties: new List<string>(["dropAction", "_stayInCollection"]),
+            script: params.script ? ScriptField.MakeScript(params.script, { value: "any" }) : undefined,
+            backgroundColor: params.click ? ComputedField.MakeFunction(params.click) as any : "transparent",
+            onClick: params.click ? ScriptField.MakeScript(params.click, { scriptContext: "any" }, { _readOnly_: false }) : undefined,
+            hidden: params.hidden ? ComputedField.MakeFunction(params.hidden) as any : undefined,
+        });
         if (doc.contextMenuBtns === undefined) {
-            const docList: Doc[] = [];
-
-            (await CurrentUserUtils.contextMenuTools(doc)).map(({ title, width, list, toolTip, backgroundColor, ignoreClick, icon, type, btnType, click, script, subMenu, hidden, expanded }) => {
-                const menuDocList: Doc[] = [];
-                if (subMenu) {
-                    // default is textTools
-                    let tools: Button[];
-                    switch (type) {
-                        case "inkTools":
-                            tools = CurrentUserUtils.inkTools(doc);
-                            break;
-                        case "schemaTools":
-                            tools = CurrentUserUtils.schemaTools(doc);
-                            break;
-                        case "webTools":
-                            tools = CurrentUserUtils.webTools(doc);
-                            break;
-                        case "textTools":
-                            tools = CurrentUserUtils.textTools(doc);
-                            break;
-                        default:
-                            tools = CurrentUserUtils.textTools(doc);
-                            break;
-                    }
-                    tools.map(({ title, toolTip, icon, btnType, numBtnType, numBtnMax, numBtnMin, click, script, width, list, ignoreClick, switchToggle }) => {
-                        const backgroundColor = click ? ComputedField.MakeFunction(click) as any : "transparent";
-                        menuDocList.push(Docs.Create.FontIconDocument({
-                            _nativeWidth: width ? width : 25,
-                            _nativeHeight: 25,
-                            _width: width ? width : 25,
-                            _height: 25,
-                            icon,
-                            toolTip,
-                            numBtnType,
-                            numBtnMin,
-                            numBtnMax,
-                            script: script ? ScriptField.MakeScript(script, { value: "any" }) : undefined,
-                            btnType: btnType,
-                            btnList: new List<string>(list),
-                            ignoreClick: ignoreClick,
-                            _stayInCollection: true,
-                            _hideContextMenu: true,
-                            _lockedPosition: true,
-                            system: true,
-                            dontUndo: true,
-                            title,
-                            switchToggle,
-                            color: Colors.WHITE,
-                            backgroundColor,
-                            _dropAction: "alias",
-                            _removeDropProperties: new List<string>(["dropAction", "_stayInCollection"]),
-                            onClick: click ? ScriptField.MakeScript(click) : undefined
-                        }));
-                    });
-                    docList.push(CurrentUserUtils.linearButtonList({
-                        linearViewSubMenu: true,
-                        flexGap: 0,
-                        ignoreClick: true,
-                        linearViewExpandable: true,
-                        icon: title,
-                        _height: 30,
-                        // backgroundColor: hidden ? ComputedField.MakeFunction(hidden, {  }, { _readOnly_: true }) as any : "transparent",
-                        linearViewIsExpanded: expanded ? !(ComputedField.MakeFunction(expanded) as any) : undefined,
-                        hidden: hidden ? ComputedField.MakeFunction(hidden) as any : undefined,
-                    }, menuDocList));
-                } else {
-                    docList.push(Docs.Create.FontIconDocument({
-                        _nativeWidth: width ? width : 25,
-                        _nativeHeight: 25,
-                        _width: width ? width : 25,
-                        _height: 25,
-                        icon,
-                        toolTip,
-                        script: script ? ScriptField.MakeScript(script, { value: "any" }) : undefined,
-                        btnType,
-                        btnList: new List<string>(list),
-                        ignoreClick,
-                        _stayInCollection: true,
-                        _hideContextMenu: true,
-                        _lockedPosition: true,
-                        system: true,
-                        dontUndo: true,
-                        title,
-                        color: Colors.WHITE,
-                        backgroundColor: backgroundColor ? ComputedField.MakeFunction(backgroundColor) as any : "transparent",
-                        _dropAction: "alias",
-                        hidden: hidden ? ComputedField.MakeFunction(hidden) as any : undefined,
-                        _removeDropProperties: new List<string>(["dropAction", "_stayInCollection"]),
-                        onClick: click ? ScriptField.MakeScript(click, { scriptContext: "any" }, { _readOnly_: false }) : undefined
-                    }));
-                }
-            });
-
-            doc.contextMenuBtns = CurrentUserUtils.linearButtonList({ title: "menu buttons", flexGap: 0, linearViewIsExpanded: true, ignoreClick: true, linearViewExpandable: false, _height: 35 }, docList);
+            doc.contextMenuBtns = CurrentUserUtils.linearButtonList(
+                { title: "menu buttons", flexGap: 0, linearViewIsExpanded: true, ignoreClick: true, linearViewExpandable: false, _height: 35 },
+                CurrentUserUtils.contextMenuTools(doc).map(params =>
+                    !params.subMenu ?
+                        btnFunc(params) :
+                        CurrentUserUtils.linearButtonList({
+                            linearViewSubMenu: true, flexGap: 0, ignoreClick: true,
+                            linearViewExpandable: true, icon: params.title, _height: 30,
+                            linearViewIsExpanded: params.expanded ? !(ComputedField.MakeFunction(params.expanded) as any) : undefined,
+                            hidden: params.hidden ? ComputedField.MakeFunction(params.hidden) as any : undefined,
+                        }, params.subMenu.map(subParams => btnFunc(subParams)))));
         }
     }
 
@@ -1463,7 +1347,8 @@ ScriptingGlobals.add(function makeTopLevelFolder() {
 ScriptingGlobals.add(function toggleComicMode() {
     Doc.UserDoc().renderStyle = Doc.UserDoc().renderStyle === "comic" ? undefined : "comic";
 });
-ScriptingGlobals.add(function nextKeyFrame() {
+ScriptingGlobals.add(function nextKeyFrame(readOnly: boolean) {
+    if (readOnly) return;
     const sel = SelectionManager.Views()[0];
     const col = (sel.ComponentView as CollectionFreeFormView);
     const currentFrame = Cast(sel.props.Document._currentFrame, "number", null);
@@ -1476,7 +1361,8 @@ ScriptingGlobals.add(function nextKeyFrame() {
     sel.rootDoc.lastFrame = Math.max(NumCast(sel.rootDoc._currentFrame), NumCast(sel.rootDoc.lastFrame));
 }
 );
-ScriptingGlobals.add(function prevKeyFrame() {
+ScriptingGlobals.add(function prevKeyFrame(readOnly: boolean) {
+    if (readOnly) return;
     const sel = SelectionManager.Views()[0];
     const col = (sel.ComponentView as CollectionFreeFormView);
     const currentFrame = Cast(sel.props.Document._currentFrame, "number", null);
diff --git a/src/client/views/collections/collectionLinear/CollectionLinearView.tsx b/src/client/views/collections/collectionLinear/CollectionLinearView.tsx
index bec582dcd..c0a33a5e0 100644
--- a/src/client/views/collections/collectionLinear/CollectionLinearView.tsx
+++ b/src/client/views/collections/collectionLinear/CollectionLinearView.tsx
@@ -151,7 +151,7 @@ export class CollectionLinearView extends CollectionSubView() {
                 removeDocument={this.props.removeDocument}
                 ScreenToLocalTransform={docXf}
                 PanelWidth={nested ? doc[WidthSym] : this.dimension}
-                PanelHeight={nested ? doc[HeightSym] : this.dimension}
+                PanelHeight={nested || doc._height ? doc[HeightSym] : this.dimension}
                 renderDepth={this.props.renderDepth + 1}
                 focus={emptyFunction}
                 styleProvider={this.props.styleProvider}
diff --git a/src/client/views/nodes/button/FontIconBox.scss b/src/client/views/nodes/button/FontIconBox.scss
index df9046f12..6cd56f84e 100644
--- a/src/client/views/nodes/button/FontIconBox.scss
+++ b/src/client/views/nodes/button/FontIconBox.scss
@@ -18,12 +18,12 @@
 
     .fontIconBox-label {
         color: $white;
-        position: relative;
+        bottom: 0;
+        position: absolute;
         text-align: center;
         font-size: 7px;
         letter-spacing: normal;
         background-color: inherit;
-        margin-top: 5px;
         border-radius: 8px;
         padding: 0;
         width: 100%;
@@ -40,8 +40,10 @@
         height: 80%;
     }
 
-    &.clickBtn {
+    &.clickBtn,
+    &.clickBtnLabel {
         cursor: pointer;
+        flex-direction: column;
 
         &:hover {
             background-color: rgba(0, 0, 0, 0.3) !important;
@@ -53,6 +55,12 @@
         }
     }
 
+    &.clickBtnLabel {
+        svg {
+            margin-top: -4px;
+        }
+    }
+
     &.textBtn {
         display: grid;
         /* grid-row: auto; */
@@ -68,8 +76,10 @@
         }
     }
 
-    &.tglBtn {
+    &.tglBtn,
+    &.tglBtnLabel {
         cursor: pointer;
+        flex-direction: column;
 
         &.switch {
             //TOGGLE
@@ -146,10 +156,19 @@
         }
     }
 
-    &.toolBtn {
+    &.tglBtnLabel {
+        svg {
+            margin-top: -4px;
+        }
+    }
+
+    &.toolBtn,
+    &.toolBtnLabel {
         cursor: pointer;
         width: 100%;
         border-radius: 100%;
+        flex-direction: column;
+        margin-top: -4px;
 
         svg {
             width: 60% !important;
@@ -157,6 +176,12 @@
         }
     }
 
+    &.toolBtnLabel {
+        svg {
+            margin-top: -4px;
+        }
+    }
+
     &.menuBtn {
         cursor: pointer !important;
         border-radius: 0px;
@@ -174,7 +199,8 @@
 
 
 
-    &.colorBtn {
+    &.colorBtn,
+    &.colorBtnLabel {
         color: black;
         cursor: pointer;
         flex-direction: column;
@@ -204,6 +230,12 @@
         }
     }
 
+    &.colorBtnLabel {
+        svg {
+            margin-top: -4px;
+        }
+    }
+
     &.drpdownList {
         width: 100%;
         display: grid;
diff --git a/src/client/views/nodes/button/FontIconBox.tsx b/src/client/views/nodes/button/FontIconBox.tsx
index 20b2be216..e6d8fe88d 100644
--- a/src/client/views/nodes/button/FontIconBox.tsx
+++ b/src/client/views/nodes/button/FontIconBox.tsx
@@ -108,23 +108,19 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
         const checkResult: number = numScript?.script.run({ value: 0, _readOnly_: true }).result || 0;
 
         const label = !Doc.UserDoc()._showLabel ? (null) :
-            <div className="fontIconBox-label" style={{ bottom: this.props.PanelHeight() < 37 ? -4 : 0, position: "absolute" }}>
+            <div className="fontIconBox-label">
                 {this.label}
             </div>;
 
         if (numBtnType === NumButtonType.Slider) {
-            const dropdown =
-                <div
-                    className="menuButton-dropdownBox"
-                    onPointerDown={e => e.stopPropagation()}
-                >
-                    <input type="range" step="1" min={NumCast(this.rootDoc.numBtnMin, 0)} max={NumCast(this.rootDoc.numBtnMax, 100)} value={checkResult}
-                        className={"menu-slider"} id="slider"
-                        onPointerDown={() => this._batch = UndoManager.StartBatch("presDuration")}
-                        onPointerUp={() => this._batch?.end()}
-                        onChange={e => { e.stopPropagation(); setValue(Number(e.target.value)); }}
-                    />
-                </div>;
+            const dropdown = <div className="menuButton-dropdownBox" onPointerDown={e => e.stopPropagation()} >
+                <input type="range" step="1" min={NumCast(this.rootDoc.numBtnMin, 0)} max={NumCast(this.rootDoc.numBtnMax, 100)} value={checkResult}
+                    className={"menu-slider"} id="slider"
+                    onPointerDown={() => this._batch = UndoManager.StartBatch("presDuration")}
+                    onPointerUp={() => this._batch?.end()}
+                    onChange={e => { e.stopPropagation(); setValue(Number(e.target.value)); }}
+                />
+            </div>;
             return (
                 <div
                     className={`menuButton ${this.type} ${numBtnType}`}
@@ -212,7 +208,7 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
                 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={color} />
-                {!this.label || !Doc.UserDoc()._showLabel ? (null) : <div className="fontIconBox-label" style={{ bottom: this.props.PanelHeight() < 20 ? -4 : 0, color: color, backgroundColor: backgroundColor }}> {this.label} </div>}
+                {!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 }}>
@@ -283,7 +279,7 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
         });
 
         const label = !this.label || !Doc.UserDoc()._showLabel ? (null) :
-            <div className="fontIconBox-label" style={{ bottom: this.props.PanelHeight() < 37 ? -4 : 0, color: color, backgroundColor: backgroundColor, position: "absolute" }}>
+            <div className="fontIconBox-label" style={{ bottom: 0, position: "absolute", color: color, backgroundColor: backgroundColor }}>
                 {this.label}
             </div>;
 
@@ -337,7 +333,7 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
         const curColor = this.colorScript?.script.run({ value: undefined, _readOnly_: true }).result ?? "transparent";
 
         const label = !this.label || !Doc.UserDoc()._showLabel ? (null) :
-            <div className="fontIconBox-label" style={{ bottom: this.props.PanelHeight() < 37 ? -4 : 0, color, backgroundColor, position: "absolute" }}>
+            <div className="fontIconBox-label" style={{ color, backgroundColor }}>
                 {this.label}
             </div>;
 
@@ -348,7 +344,7 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
         </div>;
         setTimeout(() => this.colorPicker(curColor)); // cause an update to the color picker rendered in MainView
         return (
-            <div className={`menuButton ${this.type} ${this.colorPickerClosed}`}
+            <div className={`menuButton ${this.type + (Doc.UserDoc()._showLabel ? "Label" : "")} ${this.colorPickerClosed}`}
                 style={{ color: color, borderBottomLeftRadius: this.dropdown ? 0 : undefined }}
                 onClick={action(() => this.colorPickerClosed = !this.colorPickerClosed)}
                 onPointerDown={e => e.stopPropagation()}>
@@ -381,7 +377,7 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
 
         // Button label
         const label = !this.label || !Doc.UserDoc()._showLabel ? (null) :
-            <div className="fontIconBox-label" style={{ bottom: this.props.PanelHeight() < 37 ? -4 : 0, color, backgroundColor, position: "absolute" }}>
+            <div className="fontIconBox-label" style={{ color, backgroundColor }}>
                 {this.label}
             </div>;
 
@@ -399,7 +395,7 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
             );
         } else {
             return (
-                <div className={`menuButton ${this.type}`}
+                <div className={`menuButton ${this.type + (Doc.UserDoc()._showLabel ? "Label" : "")}`}
                     style={{ opacity: 1, backgroundColor, color }}>
                     <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={this.icon} color={color} />
                     {label}
@@ -423,7 +419,7 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
                 <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={{ bottom: this.props.PanelHeight() < 37 ? -4 : 0, color: color, backgroundColor: backgroundColor }}> {this.label} </div>}
+                        <div className="fontIconBox-label" style={{ color: color, backgroundColor: backgroundColor }}> {this.label} </div>}
                 </div>
             </div>
         );
@@ -450,12 +446,12 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
         const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color);
         const backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor);
         const label = !this.label || !Doc.UserDoc()._showLabel ? (null) :
-            <div className="fontIconBox-label" style={{ bottom: this.props.PanelHeight() < 20 ? -4 : 0, color, backgroundColor, position: "absolute" }}>
+            <div className="fontIconBox-label" style={{ color, backgroundColor }}>
                 {this.label}
             </div>;
 
         const menuLabel = !this.label || !Doc.UserDoc()._showMenuLabel ? (null) :
-            <div className="fontIconBox-label" style={{ bottom: this.props.PanelHeight() < 20 ? -4 : 0, color, backgroundColor: "transparent" }}>
+            <div className="fontIconBox-label" style={{ color, backgroundColor: "transparent" }}>
                 {this.label}
             </div>;
 
@@ -496,7 +492,7 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
                 break;
             case ButtonType.ToolButton:
                 button = (
-                    <div className={`menuButton ${this.type}`} style={{ opacity: 1, backgroundColor, color }}>
+                    <div className={`menuButton ${this.type + (Doc.UserDoc()._showLabel ? "Label" : "")}`} style={{ opacity: 1, backgroundColor, color }}>
                         <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={this.icon} color={color} />
                         {label}
                     </div>
@@ -508,7 +504,7 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
                 break;
             case ButtonType.ClickButton:
                 button = (
-                    <div className={`menuButton ${this.type}`} style={{ color, backgroundColor, opacity: 1 }}>
+                    <div className={`menuButton ${this.type + (Doc.UserDoc()._showLabel ? "Label" : "")}`} style={{ color, backgroundColor, opacity: 1 }}>
                         <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={this.icon} color={color} />
                         {label}
                     </div>