Merge branch 'master' into secondpropertiesmenu-emily

14 files changed, 74 insertions, 78 deletions

diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index d93ee9a2e..e8947f190 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -30,8 +30,7 @@ import { LinkManager } from "./LinkManager";
 import { ScriptingGlobals } from "./ScriptingGlobals";
 import { ColorScheme, SettingsManager } from "./SettingsManager";
 import { UndoManager } from "./UndoManager";
-import { PresElementBox } from "../views/nodes/trails";
-import { ImportElementBox } from "../views/nodes/importBox/importElementBox";
+import { ImportElementBox } from "../views/nodes/importBox/ImportElementBox";
 
 interface Button {
     // DocumentOptions fields a button can set
@@ -344,15 +343,15 @@ export class CurrentUserUtils {
       const badgeValue = "((len) => len && len !== '0' ? len: undefined)(docList(self.target.data).filter(doc => !docList(self.target.viewed).includes(doc)).length.toString())"; 
       const getActiveDashTrails = "Doc.ActiveDashboard?.myTrails";
         return [
-            { title: "Dashboards",      toolTip: "Dashboards ⌘D",       target: this.setupDashboards(doc, "myDashboards"),         icon: "desktop",     funcs: {hidden: "IsNoviceMode()"} },
-            { title: "Search",          toolTip: "Search ⌘F",           target: this.setupSearcher(doc, "mySearcher"),             icon: "search",      },
-            { title: "Files",           toolTip: "Files ⌘⇧F",           target: this.setupFilesystem(doc, "myFilesystem"),         icon: "folder-open", },
-            { title: "Tools",           toolTip: "Tools ⌘T",            target: this.setupToolsBtnPanel(doc, "myTools"),           icon: "wrench",      funcs: {hidden: "IsNoviceMode()"} },
-            { title: "Imports",         toolTip: "Imports ⌘I",          target: this.setupImportSidebar(doc, "myImports"),         icon: "upload",      },
-            { title: "Closed",          toolTip: "Recently Closed ⌘R",  target: this.setupRecentlyClosed(doc, "myRecentlyClosed"), icon: "archive",     },
-            { title: "Shared",          toolTip: "Shared Docs ⌘⇧S",     target: Doc.MySharedDocs,                                  icon: "users",       funcs: {badgeValue:badgeValue}},
-            { title: "Trails",          toolTip: "Trails ⌘⇧",           target: Doc.UserDoc(),                                     icon: "pres-trail",  funcs: {target: getActiveDashTrails}},
-            { title: "User Doc",        toolTip: "User Doc ⌘U",         target: this.setupUserDocView(doc, "myUserDocView"),       icon: "address-card",funcs: {hidden: "IsNoviceMode()"} },
+            { title: "Dashboards",      toolTip: "Dashboards ⌘D",       target: this.setupDashboards(doc, "myDashboards"),         ignoreClick: true, icon: "desktop",     funcs: {hidden: "IsNoviceMode()"} },
+            { title: "Search",          toolTip: "Search ⌘F",           target: this.setupSearcher(doc, "mySearcher"),             ignoreClick: true, icon: "search",      },
+            { title: "Files",           toolTip: "Files ⌘⇧F",           target: this.setupFilesystem(doc, "myFilesystem"),         ignoreClick: true, icon: "folder-open", },
+            { title: "Tools",           toolTip: "Tools ⌘T",            target: this.setupToolsBtnPanel(doc, "myTools"),           ignoreClick: true, icon: "wrench",      funcs: {hidden: "IsNoviceMode()"} },
+            { title: "Imports",         toolTip: "Imports ⌘I",          target: this.setupImportSidebar(doc, "myImports"),         ignoreClick: true, icon: "upload",      },
+            { title: "Closed",          toolTip: "Recently Closed ⌘R",  target: this.setupRecentlyClosed(doc, "myRecentlyClosed"), ignoreClick: true, icon: "archive",     },
+            { title: "Shared",          toolTip: "Shared Docs ⌘⇧S",     target: Doc.MySharedDocs,                                  ignoreClick: true, icon: "users",       funcs: {badgeValue: badgeValue}},
+            { title: "Trails",          toolTip: "Trails ⌘⇧",           target: Doc.UserDoc(),                                     ignoreClick: true, icon: "pres-trail",  funcs: {target: getActiveDashTrails}},
+            { title: "User Doc",        toolTip: "User Doc ⌘U",         target: this.setupUserDocView(doc, "myUserDocView"),       ignoreClick: true, icon: "address-card",funcs: {hidden: "IsNoviceMode()"} },
         ].map(tuple => ({...tuple, scripts:{onClick: 'selectMainMenu(self)'}}));
     }
 
@@ -699,9 +698,9 @@ export class CurrentUserUtils {
                     CollectionViewType.Carousel3D, CollectionViewType.Linear, CollectionViewType.Map,
                     CollectionViewType.Grid, CollectionViewType.NoteTaking]),
               title: "Perspective",                    toolTip: "View",                 btnType: ButtonType.DropdownList,                                                                                                                                    ignoreClick: true, width: 100, scripts: { script: 'setView(value, _readOnly_)'}},
-            { title: "Pin",     icon: "map-pin",       toolTip: "Pin View to Trail",    btnType: ButtonType.ClickButton,         expertMode: false,                                                                                                                         width: 30,  scripts: { onClick: 'pinWithView(altKey)'}},
-            { title: "Fill",    icon: "fill-drip",     toolTip: "Background Fill Color",btnType: ButtonType.ColorButton,         expertMode: false,                                                                                                          ignoreClick: true, width: 30,  scripts: { script:  'return setBackgroundColor(value, _readOnly_)'}}, // Only when a document is selected
-            { title: "Header",  icon: "heading",       toolTip: "Header Color",         btnType: ButtonType.ColorButton,         expertMode: true,                                                                                                          ignoreClick: true,             scripts: { script:  'return setHeaderColor(value, _readOnly_)'}},
+            { title: "Pin",     icon: "map-pin",       toolTip: "Pin View to Trail",    btnType: ButtonType.ClickButton,         expertMode: false,                                                                                                                         width: 30,  scripts: { onClick: 'pinWithView(altKey)'}, funcs: {hidden: "IsNoneSelected()"}},
+            { title: "Fill",    icon: "fill-drip",     toolTip: "Background Fill Color",btnType: ButtonType.ColorButton,         expertMode: false,                                                                                                          ignoreClick: true, width: 30,  scripts: { script:  'return setBackgroundColor(value, _readOnly_)'}, funcs: {hidden: "IsNoneSelected()"}}, // Only when a document is selected
+            { title: "Header",  icon: "heading",       toolTip: "Header Color",         btnType: ButtonType.ColorButton,         expertMode: true,                                                                                                          ignoreClick: true,             scripts: { script:  'return setHeaderColor(value, _readOnly_)'}, funcs: {hidden: "IsNoneSelected()"}},
             { title: "Overlay", icon: "layer-group",   toolTip: "Overlay",              btnType: ButtonType.ToggleButton,        expertMode: true, toolType:CollectionViewType.Freeform, funcs: {hidden: '!SelectionManager_selectedDocType(self.toolType, self.expertMode, true)'},       scripts: { onClick: 'return { toggleOverlay(_readOnly_); }'}}, // Only when floating document is selected in freeform
             { title: "Back",    icon: "chevron-left",  toolTip: "Prev Animation Frame", btnType: ButtonType.ClickButton,         expertMode: true,  toolType:CollectionViewType.Freeform, funcs: {hidden: '!SelectionManager_selectedDocType(self.toolType, self.expertMode)'}, width: 30,  scripts: { onClick: 'prevKeyFrame(_readOnly_)'}},
             { title: "Num",     icon:"",               toolTip: "Frame Number (click to toggle edit mode)",    btnType: ButtonType.TextButton,          expertMode: true,  toolType:CollectionViewType.Freeform, funcs: {hidden: '!SelectionManager_selectedDocType(self.toolType, self.expertMode)', buttonText: 'selectedDocs()?.lastElement()?.currentFrame?.toString()'}, width: 20, scripts: { onClick: '{ return curKeyFrame(_readOnly_);}'}},
@@ -967,10 +966,8 @@ export class CurrentUserUtils {
         input.multiple = true;
         input.accept = ".zip, application/pdf, video/*, image/*, audio/*";
         input.onchange = async _e => {
-            const upload = Utils.prepend("/uploadDoc");
-            const formData = new FormData();
             const file = input.files?.[0];
-            if (file?.type === 'application/zip') {
+            if (file?.type === 'application/zip' || file?.type === 'application/x-zip-compressed') {
                 const doc = await Doc.importDocument(file);
                 // NOT USING SOLR, so need to replace this with something else // if (doc instanceof Doc) {
                 //     setTimeout(() => SearchUtil.Search(`{!join from=id to=proto_i}id:link*`, true, {}).then(docs =>
diff --git a/src/client/util/DocumentManager.ts b/src/client/util/DocumentManager.ts
index b921b3116..8e4e0d8f3 100644
--- a/src/client/util/DocumentManager.ts
+++ b/src/client/util/DocumentManager.ts
@@ -1,10 +1,11 @@
 import { action, computed, observable, ObservableSet } from 'mobx';
-import { Doc, Opt } from '../../fields/Doc';
-import { Animation } from '../../fields/DocSymbols';
+import { Doc, DocListCast, Opt } from '../../fields/Doc';
+import { AclAdmin, AclEdit, Animation } from '../../fields/DocSymbols';
 import { Id } from '../../fields/FieldSymbols';
 import { listSpec } from '../../fields/Schema';
 import { Cast, DocCast, StrCast } from '../../fields/Types';
 import { AudioField } from '../../fields/URLField';
+import { GetEffectiveAcl } from '../../fields/util';
 import { CollectionViewType } from '../documents/DocumentTypes';
 import { CollectionDockingView } from '../views/collections/CollectionDockingView';
 import { TabDocView } from '../views/collections/TabDocView';
@@ -344,6 +345,9 @@ export function DocFocusOrOpen(doc: Doc, options: DocFocusOptions = { willZoomCe
             });
         }
     };
+    if (Doc.IsDataProto(doc) && DocListCast(doc.proto_embeddings).some(embed => embed.hidden && [AclAdmin, AclEdit].includes(GetEffectiveAcl(embed)))) {
+        doc = DocListCast(doc.proto_embeddings).find(embed => embed.hidden && [AclAdmin, AclEdit].includes(GetEffectiveAcl(embed)))!;
+    }
     if (doc.hidden) {
         doc.hidden = false;
         options.toggleTarget = false;
diff --git a/src/client/util/ServerStats.tsx b/src/client/util/ServerStats.tsx
index b6aa4d95a..6a6ec158e 100644
--- a/src/client/util/ServerStats.tsx
+++ b/src/client/util/ServerStats.tsx
@@ -4,6 +4,8 @@ import * as React from 'react';
 import { MainViewModal } from '../views/MainViewModal';
 import './SharingManager.scss';
 import { PingManager } from './PingManager';
+import { StrCast } from '../../fields/Types';
+import { Doc } from '../../fields/Doc';
 
 @observer
 export class ServerStats extends React.Component<{}> {
@@ -44,7 +46,7 @@ export class ServerStats extends React.Component<{}> {
                 display: "flex",
                 height: 300,
                 width: 400,
-                background: "black",
+                background: StrCast(Doc.UserDoc().userBackgroundColor),
                 opacity: 0.6}}>
                     <div style={{width: 300,height: 100,margin: "auto",display: "flex",flexDirection: "column"}}>
                         {PingManager.Instance.IsBeating ? 'The server connection is active' :
diff --git a/src/client/views/PropertiesDocContextSelector.tsx b/src/client/views/PropertiesDocContextSelector.tsx
index 6a54f0002..395aa2b61 100644
--- a/src/client/views/PropertiesDocContextSelector.tsx
+++ b/src/client/views/PropertiesDocContextSelector.tsx
@@ -3,11 +3,10 @@ import { observer } from 'mobx-react';
 import * as React from 'react';
 import { Doc, DocListCast } from '../../fields/Doc';
 import { Id } from '../../fields/FieldSymbols';
-import { Cast, NumCast, StrCast } from '../../fields/Types';
-import { CollectionViewType } from '../documents/DocumentTypes';
+import { Cast, StrCast } from '../../fields/Types';
 import { DocFocusOrOpen } from '../util/DocumentManager';
 import { CollectionDockingView } from './collections/CollectionDockingView';
-import { DocumentView, OpenWhere, OpenWhereMod } from './nodes/DocumentView';
+import { DocumentView, OpenWhere } from './nodes/DocumentView';
 import './PropertiesDocContextSelector.scss';
 
 type PropertiesDocContextSelectorProps = {
@@ -19,7 +18,6 @@ type PropertiesDocContextSelectorProps = {
 
 @observer
 export class PropertiesDocContextSelector extends React.Component<PropertiesDocContextSelectorProps> {
-
     @computed get _docs() {
         if (!this.props.DocView) return [];
         const target = this.props.DocView.props.Document;
@@ -40,7 +38,7 @@ export class PropertiesDocContextSelector extends React.Component<PropertiesDocC
                 }, new Set<Doc>())
                 .keys()
         );
-        console.log("embeddings " + embeddings.length);
+        console.log('embeddings ' + embeddings.length);
 
         return doclayouts
             .filter(doc => !Doc.AreProtosEqual(doc, CollectionDockingView.Instance?.props.Document))
@@ -56,7 +54,7 @@ export class PropertiesDocContextSelector extends React.Component<PropertiesDocC
     };
 
     render() {
-        if (this._docs.length < 1) return undefined
+        if (this._docs.length < 1) return undefined;
         return (
             <div>
                 {this.props.hideTitle ? null : <p key="contexts">Contexts:</p>}
diff --git a/src/client/views/StyleProvider.scss b/src/client/views/StyleProvider.scss
index 80c878386..c06bb287e 100644
--- a/src/client/views/StyleProvider.scss
+++ b/src/client/views/StyleProvider.scss
@@ -31,8 +31,8 @@
 
 .styleProvider-treeView-icon,
 .styleProvider-treeView-icon-active {
-    margin-left: 0.25rem;
-    margin-right: 0.25rem;
+    margin-left: 0;
+    margin-right: 0;
 }
 
 .styleProvider-treeView-icon {
diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx
index a030c7052..c7616a9ba 100644
--- a/src/client/views/StyleProvider.tsx
+++ b/src/client/views/StyleProvider.tsx
@@ -1,7 +1,7 @@
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Tooltip } from '@material-ui/core';
-import { Shadows } from 'browndash-components';
+import { IconButton, Shadows, Size } from 'browndash-components';
 import { action, runInAction } from 'mobx';
 import { extname } from 'path';
 import { Doc, Opt, StrListCast } from '../../fields/Doc';
@@ -323,18 +323,19 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<DocumentViewProps
 }
 
 export function DashboardToggleButton(doc: Doc, field: string, onIcon: IconProp, offIcon: IconProp, clickFunc?: () => void) {
+    const color = StrCast(Doc.UserDoc().userColor);
     return (
-        <div
-            title={field}
-            className={`styleProvider-treeView-icon${doc[field] ? '-active' : ''}`}
+        <IconButton
+            size={Size.XSMALL}
+            color={color}
+            icon={<FontAwesomeIcon icon={(doc[field] ? (onIcon as any) : offIcon) as IconProp} />}
             onClick={undoBatch(
                 action((e: React.MouseEvent) => {
                     e.stopPropagation();
                     clickFunc ? clickFunc() : (doc[field] = doc[field] ? undefined : true);
                 })
-            )}>
-            <FontAwesomeIcon icon={(doc[field] ? (onIcon as any) : offIcon) as IconProp} size="sm" />
-        </div>
+            )}
+        />
     );
 }
 /**
@@ -342,7 +343,7 @@ export function DashboardToggleButton(doc: Doc, field: string, onIcon: IconProp,
  */
 export function DashboardStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps | DocumentViewProps>, property: string) {
     if (doc && property.split(':')[0] === StyleProp.Decorations) {
-        return doc._type_collection === CollectionViewType.Docking
+        return doc._type_collection === CollectionViewType.Docking || Doc.IsSystem(doc)
             ? null
             : DashboardToggleButton(doc, 'hidden', 'eye-slash', 'eye', () => DocFocusOrOpen(doc, { toggleTarget: true, willZoomCentered: true, zoomScale: 0 }, DocCast(doc?.embedContainer ?? doc?.annotationOn)));
     }
diff --git a/src/client/views/collections/TreeView.scss b/src/client/views/collections/TreeView.scss
index 85f99b9c2..cfa658944 100644
--- a/src/client/views/collections/TreeView.scss
+++ b/src/client/views/collections/TreeView.scss
@@ -13,7 +13,7 @@
 .treeView-container-active {
     .bullet-outline {
         position: relative;
-        width: $TREE_BULLET_WIDTH;
+        width: fit-content;
         color: $medium-gray;
         transform: scale(0.5);
         display: inline-flex;
@@ -21,7 +21,6 @@
     }
 
     .treeView-bulletIcons {
-        // width: $TREE_BULLET_WIDTH;
         width: 100%;
         height: 100%;
         position: relative;
@@ -43,7 +42,7 @@
         justify-content: center;
         align-items: center;
         position: relative;
-        width: $TREE_BULLET_WIDTH;
+        width: fit-content;
         min-height: 20px;
         color: $medium-gray;
         border: #80808030 1px solid;
diff --git a/src/client/views/collections/TreeView.tsx b/src/client/views/collections/TreeView.tsx
index fa9f895fd..9158508fc 100644
--- a/src/client/views/collections/TreeView.tsx
+++ b/src/client/views/collections/TreeView.tsx
@@ -712,23 +712,23 @@ export class TreeView extends React.Component<TreeViewProps> {
                     !(this.doc.text as RichTextField)?.Text ? null : (
                         <IconButton
                             color={color} 
-                            icon={<FontAwesomeIcon icon={[this.childDocs?.length && !this.treeViewOpen ? 'fas' : 'far', 'circle']} />}
+                            icon={<FontAwesomeIcon 
+                            icon={[this.childDocs?.length && !this.treeViewOpen ? 'fas' : 'far', 'circle']} />}
                             size={Size.XSMALL}
                         />
                     )
                 ) : (
                     <div className="treeView-bulletIcons" style={{ color: Doc.IsSystem(DocCast(this.doc.proto)) ? 'red' : undefined }}>
-                        <IconButton
+                        {this.onCheckedClick ? <IconButton
                             color={color} 
                             icon={<FontAwesomeIcon size="sm" icon={checked === 'check' ? 'check' : checked === 'x' ? 'times' : checked === 'unchecked' ? 'square' : !this.treeViewOpen ? 'caret-right' : 'caret-down'} />}
                             size={Size.XSMALL}
-                        />
-                        {this.onCheckedClick ? null : 
-                        <IconButton
-                            color={color} 
-                            icon={<FontAwesomeIcon icon={iconType as IconProp} />}
-                            size={Size.XSMALL}
-                        />
+                        /> : 
+                            <IconButton
+                                color={color} 
+                                icon={<FontAwesomeIcon icon={iconType as IconProp} />}
+                                size={Size.XSMALL}
+                            />
                         }
                     </div>
                 )}
@@ -757,15 +757,15 @@ export class TreeView extends React.Component<TreeViewProps> {
     @observable headerEleWidth = 0;
     @computed get titleButtons() {
         const customHeaderButtons = this.props.styleProvider?.(this.doc, this.props.treeView.props, StyleProp.Decorations);
+        const color = this.props.styleProvider?.(this.doc, this.props.treeView.props, StyleProp.Color);
         return this.props.treeViewHideHeaderFields() || this.doc.treeViewHideHeaderFields ? null : (
             <>
                 {customHeaderButtons} {/* e.g.,. hide button is set by dashboardStyleProvider */}
                 {this.doc._layout_hideContextMenu ? null : (
-                    <FontAwesomeIcon
-                        title="context menu"
-                        key="bars"
-                        icon="bars"
-                        size="sm"
+                    <IconButton
+                        color={color} 
+                        icon={<FontAwesomeIcon icon="bars" />}
+                        size={Size.XSMALL}
                         onClick={e => {
                             this.showContextMenu(e);
                             e.stopPropagation();
diff --git a/src/client/views/global/globalScripts.ts b/src/client/views/global/globalScripts.ts
index d22b6b4d9..b906065a0 100644
--- a/src/client/views/global/globalScripts.ts
+++ b/src/client/views/global/globalScripts.ts
@@ -20,6 +20,8 @@ import { WebBox } from "../nodes/WebBox";
 import { RichTextMenu } from "../nodes/formattedText/RichTextMenu";
 import { DocumentType } from "../../documents/DocumentTypes";
 
+ScriptingGlobals.add(function IsNoneSelected() { return SelectionManager.Views().length <= 0; }, "are no document selected");
+
 // toggle: Set overlay status of selected document
 ScriptingGlobals.add(function setView(view: string) {
     const selected = SelectionManager.Docs().lastElement();
diff --git a/src/client/views/newlightbox/NewLightboxView.tsx b/src/client/views/newlightbox/NewLightboxView.tsx
index c5e98da86..3acbd1a32 100644
--- a/src/client/views/newlightbox/NewLightboxView.tsx
+++ b/src/client/views/newlightbox/NewLightboxView.tsx
@@ -305,8 +305,8 @@ export class NewLightboxView extends React.Component<LightboxViewProps> {
                                 renderDepth={0}
                                 rootSelected={returnTrue}
                                 docViewPath={returnEmptyDoclist}
-                                docFilters={this.docFilters}
-                                docRangeFilters={returnEmptyFilter}
+                                childFilters={this.docFilters}
+                                childFiltersByRanges={returnEmptyFilter}
                                 searchFilterDocs={returnEmptyDoclist}
                                 addDocument={undefined}
                                 removeDocument={undefined}
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 6b47564a4..91390e488 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -800,17 +800,16 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
             !more && moreItems.length && cm.addItem({ description: 'More...', subitems: moreItems, icon: 'compass' });
         }
         const constantItems: ContextMenuProps[] = [];
-        constantItems.push({ description: 'Show Metadata', event: () => this.props.addDocTab(this.props.Document, (OpenWhere.addRight.toString() + 'KeyValue') as OpenWhere), icon: 'layer-group' });
         if (!Doc.IsSystem(this.rootDoc)) {
             constantItems.push({ description: 'Export as Zip file', icon: 'download', event: async () => Doc.Zip(this.props.Document) });
-            constantItems.push({ description: 'Import Zipped file', icon: 'upload', event: ({ x, y }) => this.importDocument() });
             (this.rootDoc._type_collection !== CollectionViewType.Docking || !Doc.noviceMode) && constantItems.push({ description: 'Share', event: () => SharingManager.Instance.open(this.props.DocumentView()), icon: 'users' });
             if (this.props.removeDocument && Doc.ActiveDashboard !== this.props.Document) {
                 // need option to gray out menu items ... preferably with a '?' that explains why they're grayed out (eg., no permissions)
                 constantItems.push({ description: 'Close', event: this.deleteClicked, icon: 'times' });
             }
         }
-        cm.addItem({ description: 'General...', noexpand: !Doc.IsSystem(this.rootDoc), subitems: constantItems, icon: 'question' });
+        constantItems.push({ description: 'Show Metadata', event: () => this.props.addDocTab(this.props.Document, (OpenWhere.addRight.toString() + 'KeyValue') as OpenWhere), icon: 'layer-group' });
+        cm.addItem({ description: 'General...', noexpand: false, subitems: constantItems, icon: 'question' });
 
         const help = cm.findByDescription('Help...');
         const helpItems: ContextMenuProps[] = help && 'subitems' in help ? help.subitems : [];
diff --git a/src/client/views/nodes/FontIconBox/FontIconBox.tsx b/src/client/views/nodes/FontIconBox/FontIconBox.tsx
index 39be4022e..3ec53beac 100644
--- a/src/client/views/nodes/FontIconBox/FontIconBox.tsx
+++ b/src/client/views/nodes/FontIconBox/FontIconBox.tsx
@@ -376,6 +376,8 @@ 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 tooltip: string = StrCast(this.rootDoc.toolTip);
+        const onClickScript = ScriptCast(this.rootDoc.onClick);
+        const script = ScriptCast(this.rootDoc.script);
         // TODO:glr Add label of button type
         let button: JSX.Element = this.defaultButton;
         // prettier-ignore
@@ -398,22 +400,19 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
                 button = this.dropdownButton; 
                 break;
             case ButtonType.ToggleButton: button = this.toggleButton; break;
-            case ButtonType.TextButton: 
-                const script = ScriptCast(this.rootDoc.script);
-                const checkResult = script?.script.run({ _readOnly_: true }).result;
-                // Script for checking the outcome of the toggle
+            case ButtonType.ClickButton:
+            case ButtonType.ToolButton: 
                 button = (
-                    <Button tooltip={tooltip} color={checkResult ?? backgroundColor} icon={this.Icon(color)!} text={StrCast(this.rootDoc.buttonText)} label={this.label}/>
+                    <IconButton tooltip={tooltip} onPointerDown={() => onClickScript?.script.run({ _readOnly_: false })} color={color} icon={this.Icon(color)!} label={this.label}/>
                 );
                 break;
-            case ButtonType.ClickButton:
-            case ButtonType.ToolButton: 
+            case ButtonType.TextButton: 
                 button = (
-                    <IconButton tooltip={tooltip} onPointerDown={() => script?.script.run({ _readOnly_: false })} color={color} icon={this.Icon(color)!} label={this.label}/>
+                    <Button tooltip={tooltip} icon={this.Icon(color)!} text={StrCast(this.rootDoc.buttonText)} label={this.label}/>
                 );
                 break;
             case ButtonType.MenuButton: button = (
-                    <IconButton tooltip={tooltip} tooltipPlacement='right' size={Size.LARGE} color={color} icon={this.Icon(color)!} label={this.label}/>
+                    <IconButton tooltip={tooltip} onPointerDown={() => onClickScript?.script.run({ self: this.rootDoc, _readOnly_: false })} tooltipPlacement='right' size={Size.LARGE} color={color} icon={this.Icon(color)!} label={this.label}/>
                 );
                 break;
         }
diff --git a/src/client/views/nodes/LinkBox.scss b/src/client/views/nodes/LinkBox.scss
index b5b8e660f..767f0291b 100644
--- a/src/client/views/nodes/LinkBox.scss
+++ b/src/client/views/nodes/LinkBox.scss
@@ -1,3 +1,7 @@
-.linkBox-container-interactive  {
+.linkBox-container-interactive {
     pointer-events: all;
-}
\ No newline at end of file
+    width: 100%;
+}
+.linkBox-container {
+    width: 100%;
+}
diff --git a/src/client/views/topbar/TopBar.tsx b/src/client/views/topbar/TopBar.tsx
index 130e47a41..79f41fe9d 100644
--- a/src/client/views/topbar/TopBar.tsx
+++ b/src/client/views/topbar/TopBar.tsx
@@ -106,15 +106,6 @@ export class TopBar extends React.Component {
                     onClick={(e: React.MouseEvent) => {
                         const dashView = Doc.ActiveDashboard && DocumentManager.Instance.getDocumentView(Doc.ActiveDashboard);
                         ContextMenu.Instance.addItem({ description: 'Open Dashboard View', event: this.navigateToHome, icon: 'edit' });
-                        ContextMenu.Instance.addItem({
-                            description: 'Snapshot Dashboard',
-                            event: async () => {
-                                const batch = UndoManager.StartBatch('snapshot');
-                                await DashboardView.snapshotDashboard();
-                                batch.end();
-                            },
-                            icon: 'edit',
-                        });
                         dashView?.showContextMenu(e.clientX + 20, e.clientY + 30);
                     }}
                 />