aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/client/documents/DocumentTypes.ts1
-rw-r--r--src/client/documents/Documents.ts8
-rw-r--r--src/client/util/CurrentUserUtils.ts30
-rw-r--r--src/client/views/MainView.scss26
-rw-r--r--src/client/views/MainView.tsx253
-rw-r--r--src/client/views/PropertiesButtons.tsx4
-rw-r--r--src/client/views/nodes/DocumentContentsView.tsx3
-rw-r--r--src/client/views/nodes/MenuIconBox.scss49
-rw-r--r--src/client/views/nodes/MenuIconBox.tsx41
9 files changed, 272 insertions, 143 deletions
diff --git a/src/client/documents/DocumentTypes.ts b/src/client/documents/DocumentTypes.ts
index 7578b7df0..e98539498 100644
--- a/src/client/documents/DocumentTypes.ts
+++ b/src/client/documents/DocumentTypes.ts
@@ -13,6 +13,7 @@ export enum DocumentType {
INK = "ink", // ink stroke
SCREENSHOT = "screenshot", // view of a desktop application
FONTICON = "fonticonbox", // font icon
+ MENUICON = "menuiconbox",
QUERY = "query", // search query
LABEL = "label", // simple text label
BUTTON = "button", // onClick button
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 2cd781a53..1a5d4f3cb 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -31,6 +31,7 @@ import { ColorBox } from "../views/nodes/ColorBox";
import { ComparisonBox } from "../views/nodes/ComparisonBox";
import { DocHolderBox } from "../views/nodes/DocHolderBox";
import { FontIconBox } from "../views/nodes/FontIconBox";
+import { MenuIconBox } from "../views/nodes/MenuIconBox";
import { FormattedTextBox } from "../views/nodes/formattedText/FormattedTextBox";
import { ImageBox } from "../views/nodes/ImageBox";
import { KeyValueBox } from "../views/nodes/KeyValueBox";
@@ -301,6 +302,9 @@ export namespace Docs {
layout: { view: FontIconBox, dataField: defaultDataKey },
options: { _width: 40, _height: 40, borderRounding: "100%" },
}],
+ [DocumentType.MENUICON, {
+ layout: { view: MenuIconBox, dataField: defaultDataKey },
+ }],
[DocumentType.RECOMMENDATION, {
layout: { view: RecommendationsBox, dataField: defaultDataKey },
options: { _width: 200, _height: 200 },
@@ -791,6 +795,10 @@ export namespace Docs {
return InstanceFromProto(Prototypes.get(DocumentType.FONTICON), undefined, { hideLinkButton: true, ...(options || {}) });
}
+ export function MenuIconDocument(options?: DocumentOptions) {
+ return InstanceFromProto(Prototypes.get(DocumentType.MENUICON), undefined, { hideLinkButton: true, ...(options || {}) });
+ }
+
export function PresElementBoxDocument(options?: DocumentOptions) {
return InstanceFromProto(Prototypes.get(DocumentType.PRESELEMENT), undefined, { ...(options || {}) });
}
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index e5582aa0a..442be98d2 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -48,6 +48,8 @@ export class CurrentUserUtils {
@observable public static closedStack: any | undefined;
@observable public static searchStack: any | undefined;
+ @observable public static panelContent: string = "none";
+
// sets up the default User Templates - slideView, queryView, descriptionView
static setupUserTemplateButtons(doc: Doc) {
if (doc["template-button-query"] === undefined) {
@@ -503,17 +505,16 @@ export class CurrentUserUtils {
}
static menuBtnDescriptions(): {
- title: string, icon: string, click: string, backgroundColor?: string,
+ title: string, icon: string, click: string,
}[] {
return [
- { title: "Workspace", icon: "desktop", click: 'MainView.selectPanel("workspace")' },
- { title: "Catalog", icon: "file", click: 'MainView.selectPanel("catalog")' },
- { title: "Recently Deleted", icon: "trash-alt", click: 'MainView.selectPanel("deleted")' },
- { title: "Import", icon: "upload", click: 'this.selectPanel("upload")' },
+ { title: "Workspace", icon: "desktop", click: 'scriptContext.selectMenu("workspace")' },
+ { title: "Catalog", icon: "file", click: 'scriptContext.selectMenu("catalog")' },
+ { title: "Archive", icon: "archive", click: 'scriptContext.selectMenu("deleted")' },
+ { title: "Import", icon: "upload", click: 'scriptContext.selectMenu("upload")' },
{ title: "Sharing", icon: "users", click: 'GroupManager.Instance.open()' },
- { title: "Tools", icon: "wrench", click: 'MainView.selectPanel("tools")' },
- { title: "Search", icon: "search", click: 'MainView.selectPanel("search")' },
- { title: "Help", icon: "question-circle", click: 'MainView.selectPanel("help")' },
+ { title: "Tools", icon: "wrench", click: 'scriptContext.selectMenu("tools")' },
+ { title: "Help", icon: "question-circle", click: 'scriptContext.selectMenu("help")' },
{ title: "Settings", icon: "cog", click: 'SettingsManager.Instance.open()' },
];
}
@@ -521,16 +522,17 @@ export class CurrentUserUtils {
static setupMenuButtons(doc: Doc) {
if (doc.menuStackBtns === undefined) {
const buttons = CurrentUserUtils.menuBtnDescriptions();
- const menuBtns = buttons.map(({ title, icon, click, backgroundColor }) => Docs.Create.FontIconDocument({
- _width: 40, _height: 40,
+ const menuBtns = buttons.map(({ title, icon, click }) => Docs.Create.MenuIconDocument({
icon,
title,
- onClick: click ? ScriptField.MakeScript(click) : undefined,
- backgroundColor,
+ stayInCollection: true,
+ _width: 60,
+ _height: 70,
+ onClick: ScriptField.MakeScript(click),
}));
doc.menuStackBtns = new PrefetchProxy(Docs.Create.MasonryDocument(menuBtns, {
- _xMargin: 0, _autoHeight: true, _width: 80, _columnWidth: 50, lockedPosition: true, _chromeStatus: "disabled",
+ _xMargin: 0, _autoHeight: false, _width: 60, _columnWidth: 60, lockedPosition: true, _chromeStatus: "disabled",
}));
}
return doc.menuStackBtns as Doc;
@@ -542,7 +544,7 @@ export class CurrentUserUtils {
const menuBtns = CurrentUserUtils.setupMenuButtons(doc);
doc.menuStack = new PrefetchProxy(Docs.Create.StackingDocument([menuBtns], {
_yMargin: 0, _autoHeight: true, _xMargin: 0,
- _width: 80, lockedPosition: true, _chromeStatus: "disabled",
+ _width: 60, lockedPosition: true, _chromeStatus: "disabled",
})) as any as Doc;
}
return doc.menuStack;
diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss
index 7318d451b..8bf38ebe9 100644
--- a/src/client/views/MainView.scss
+++ b/src/client/views/MainView.scss
@@ -155,8 +155,9 @@
.mainView-menuPanel {
- max-width: 60px;
+ width: 60px;
background-color: black;
+ height: 100%;
//overflow-y: scroll;
//overflow-x: hidden;
@@ -165,22 +166,23 @@
padding: 7px;
padding-left: 7px;
width: 100%;
+
.mainView-menuPanel-button-wrap {
- width: 45px;
- /* padding: 5px; */
- touch-action: none;
- background: black;
- transform-origin: top left;
- /* margin-bottom: 5px; */
- margin-top: 5px;
- margin-right: 25px;
- border-radius: 8px;
-
+ width: 45px;
+ /* padding: 5px; */
+ touch-action: none;
+ background: black;
+ transform-origin: top left;
+ /* margin-bottom: 5px; */
+ margin-top: 5px;
+ margin-right: 25px;
+ border-radius: 8px;
+
&:hover {
background: rgb(61, 61, 61);
cursor: pointer;
}
- }
+ }
}
.mainView-menuPanel-button-label {
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 891d08214..5f7f7ca03 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -381,6 +381,7 @@ export class MainView extends React.Component {
onPointerDown = (e: React.PointerEvent) => {
if (this._flyoutTranslate) {
this.panelContent = "none";
+ CurrentUserUtils.panelContent = "none";
this._canClick = true;
this._flyoutSizeOnDown = e.clientX;
document.removeEventListener("pointermove", this.onPointerMove);
@@ -462,125 +463,125 @@ export class MainView extends React.Component {
{this.docButtons}</div>;
}
- // @computed get menuPanel() {
-
- // return <div className="mainView-menuPanel">
- // <DocumentView
- // Document={Doc.UserDoc().menuStack as Doc}
- // DataDoc={undefined}
- // LibraryPath={emptyPath}
- // addDocument={undefined}
- // addDocTab={this.addDocTabFunc}
- // pinToPres={emptyFunction}
- // NativeHeight={returnZero}
- // NativeWidth={returnZero}
- // rootSelected={returnTrue}
- // removeDocument={returnFalse}
- // onClick={undefined}
- // ScreenToLocalTransform={this.mainContainerXf}
- // ContentScaling={returnOne}
- // PanelWidth={() => 80}
- // PanelHeight={this.getContentsHeight}
- // renderDepth={0}
- // focus={emptyFunction}
- // backgroundColor={this.defaultBackgroundColors}
- // parentActive={returnTrue}
- // whenActiveChanged={emptyFunction}
- // bringToFront={emptyFunction}
- // docFilters={returnEmptyFilter}
- // ContainingCollectionView={undefined}
- // ContainingCollectionDoc={undefined}
- // relative={true}
- // scriptContext={this}
- // />
- // </div>;
- // }
-
@computed get menuPanel() {
- return <div className="mainView-menuPanel">
- <div className="mainView-menuPanel-button" style={{ backgroundColor: this.panelContent === "workspace" ? "lightgrey" : "" }}>
- <div className="mainView-menuPanel-button-wrap"
- style={{ backgroundColor: this.panelContent === "workspace" ? "lightgrey" : "" }}
- onPointerDown={e => this.selectPanel("workspace")}>
- <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="desktop"
- color={this.panelContent === "workspace" ? "black" : "white"} size="lg" />
- <div className="mainView-menuPanel-button-label"
- style={{ color: this.panelContent === "workspace" ? "black" : "white" }}> Workspace </div>
- </div>
- </div>
-
- <div className="mainView-menuPanel-button" style={{ backgroundColor: this.panelContent === "catalog" ? "lightgrey" : "" }}>
- <div className="mainView-menuPanel-button-wrap"
- style={{ backgroundColor: this.panelContent === "catalog" ? "lightgrey" : "" }}
- onPointerDown={e => this.selectPanel("catalog")}>
- <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="file"
- color={this.panelContent === "catalog" ? "black" : "white"} size="lg" />
- <div className="mainView-menuPanel-button-label"
- style={{ color: this.panelContent === "catalog" ? "black" : "white" }}> Catalog </div>
- </div>
- </div>
-
- <div className="mainView-menuPanel-button" style={{ backgroundColor: this.panelContent === "deleted" ? "lightgrey" : "" }}>
- <div className="mainView-menuPanel-button-wrap"
- style={{ backgroundColor: this.panelContent === "deleted" ? "lightgrey" : "" }}
- onPointerDown={e => this.selectPanel("deleted")}>
- <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="archive"
- color={this.panelContent === "deleted" ? "black" : "white"} size="lg" />
- <div className="mainView-menuPanel-button-label"
- style={{ color: this.panelContent === "deleted" ? "black" : "white" }}> Recently Used </div>
- </div>
- </div>
-
- <div className="mainView-menuPanel-button">
- <div className="mainView-menuPanel-button-wrap"
- onPointerDown={e => this.selectPanel("upload")}>
- <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="upload" color="white" size="lg" />
- <div className="mainView-menuPanel-button-label"> Import </div>
- </div>
- </div>
-
- <div className="mainView-menuPanel-button">
- <div className="mainView-menuPanel-button-wrap"
- //onPointerDown={e => this.selectPanel("sharing")}
- onClick={() => GroupManager.Instance.open()}>
- <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="users" color="white" size="lg" />
- <div className="mainView-menuPanel-button-label"> Sharing </div>
- </div>
- </div>
- <div className="mainView-menuPanel-button" style={{ marginBottom: "110px", backgroundColor: this.panelContent === "tools" ? "lightgrey" : "", }}>
- <div className="mainView-menuPanel-button-wrap"
- onPointerDown={e => this.selectPanel("tools")}
- style={{
- backgroundColor: this.panelContent === "tools" ? "lightgrey" : "",
- }}>
- <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="wrench"
- color={this.panelContent === "tools" ? "black" : "white"} size="lg" />
- <div className="mainView-menuPanel-button-label"
- style={{ color: this.panelContent === "tools" ? "black" : "white" }}> Tools </div>
- </div>
- </div>
-
- <div className="mainView-menuPanel-button">
- <div className="mainView-menuPanel-button-wrap"
- // style={{backgroundColor: this.panelContent= "help" ? "lightgrey" : "black"}}
- onPointerDown={e => this.selectPanel("help")} >
- <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="question-circle" color="white" size="lg" />
- <div className="mainView-menuPanel-button-label"> Help </div>
- </div>
- </div>
-
- <div className="mainView-menuPanel-button">
- <div className="mainView-menuPanel-button-wrap"
- // onPointerDown={e => this.selectPanel("settings")}
- onClick={() => SettingsManager.Instance.open()}>
- <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="cog" color="white" size="lg" />
- <div className="mainView-menuPanel-button-label"> Settings </div>
- </div>
- </div>
+ return <div className="mainView-menuPanel">
+ <DocumentView
+ Document={Doc.UserDoc().menuStack as Doc}
+ DataDoc={undefined}
+ LibraryPath={emptyPath}
+ addDocument={undefined}
+ addDocTab={this.addDocTabFunc}
+ pinToPres={emptyFunction}
+ NativeHeight={returnZero}
+ NativeWidth={returnZero}
+ rootSelected={returnTrue}
+ removeDocument={returnFalse}
+ onClick={undefined}
+ ScreenToLocalTransform={this.mainContainerXf}
+ ContentScaling={returnOne}
+ PanelWidth={() => 80}
+ PanelHeight={this.getContentsHeight}
+ renderDepth={0}
+ focus={emptyFunction}
+ backgroundColor={this.defaultBackgroundColors}
+ parentActive={returnTrue}
+ whenActiveChanged={emptyFunction}
+ bringToFront={emptyFunction}
+ docFilters={returnEmptyFilter}
+ ContainingCollectionView={undefined}
+ ContainingCollectionDoc={undefined}
+ relative={true}
+ scriptContext={this}
+ />
</div>;
}
+ // @computed get menuPanel() {
+ // return <div className="mainView-menuPanel">
+ // <div className="mainView-menuPanel-button" style={{ backgroundColor: this.panelContent === "workspace" ? "lightgrey" : "" }}>
+ // <div className="mainView-menuPanel-button-wrap"
+ // style={{ backgroundColor: this.panelContent === "workspace" ? "lightgrey" : "" }}
+ // onPointerDown={e => this.selectPanel("workspace")}>
+ // <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="desktop"
+ // color={this.panelContent === "workspace" ? "black" : "white"} size="lg" />
+ // <div className="mainView-menuPanel-button-label"
+ // style={{ color: this.panelContent === "workspace" ? "black" : "white" }}> Workspace </div>
+ // </div>
+ // </div>
+
+ // <div className="mainView-menuPanel-button" style={{ backgroundColor: this.panelContent === "catalog" ? "lightgrey" : "" }}>
+ // <div className="mainView-menuPanel-button-wrap"
+ // style={{ backgroundColor: this.panelContent === "catalog" ? "lightgrey" : "" }}
+ // onPointerDown={e => this.selectPanel("catalog")}>
+ // <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="file"
+ // color={this.panelContent === "catalog" ? "black" : "white"} size="lg" />
+ // <div className="mainView-menuPanel-button-label"
+ // style={{ color: this.panelContent === "catalog" ? "black" : "white" }}> Catalog </div>
+ // </div>
+ // </div>
+
+ // <div className="mainView-menuPanel-button" style={{ backgroundColor: this.panelContent === "deleted" ? "lightgrey" : "" }}>
+ // <div className="mainView-menuPanel-button-wrap"
+ // style={{ backgroundColor: this.panelContent === "deleted" ? "lightgrey" : "" }}
+ // onPointerDown={e => this.selectPanel("deleted")}>
+ // <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="archive"
+ // color={this.panelContent === "deleted" ? "black" : "white"} size="lg" />
+ // <div className="mainView-menuPanel-button-label"
+ // style={{ color: this.panelContent === "deleted" ? "black" : "white" }}> Recently Used </div>
+ // </div>
+ // </div>
+
+ // <div className="mainView-menuPanel-button">
+ // <div className="mainView-menuPanel-button-wrap"
+ // onPointerDown={e => this.selectPanel("upload")}>
+ // <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="upload" color="white" size="lg" />
+ // <div className="mainView-menuPanel-button-label"> Import </div>
+ // </div>
+ // </div>
+
+ // <div className="mainView-menuPanel-button">
+ // <div className="mainView-menuPanel-button-wrap"
+ // //onPointerDown={e => this.selectPanel("sharing")}
+ // onClick={() => GroupManager.Instance.open()}>
+ // <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="users" color="white" size="lg" />
+ // <div className="mainView-menuPanel-button-label"> Sharing </div>
+ // </div>
+ // </div>
+
+ // <div className="mainView-menuPanel-button" style={{ marginBottom: "110px", backgroundColor: this.panelContent === "tools" ? "lightgrey" : "", }}>
+ // <div className="mainView-menuPanel-button-wrap"
+ // onPointerDown={e => this.selectPanel("tools")}
+ // style={{
+ // backgroundColor: this.panelContent === "tools" ? "lightgrey" : "",
+ // }}>
+ // <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="wrench"
+ // color={this.panelContent === "tools" ? "black" : "white"} size="lg" />
+ // <div className="mainView-menuPanel-button-label"
+ // style={{ color: this.panelContent === "tools" ? "black" : "white" }}> Tools </div>
+ // </div>
+ // </div>
+
+ // <div className="mainView-menuPanel-button">
+ // <div className="mainView-menuPanel-button-wrap"
+ // // style={{backgroundColor: this.panelContent= "help" ? "lightgrey" : "black"}}
+ // onPointerDown={e => this.selectPanel("help")} >
+ // <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="question-circle" color="white" size="lg" />
+ // <div className="mainView-menuPanel-button-label"> Help </div>
+ // </div>
+ // </div>
+
+ // <div className="mainView-menuPanel-button">
+ // <div className="mainView-menuPanel-button-wrap"
+ // // onPointerDown={e => this.selectPanel("settings")}
+ // onClick={() => SettingsManager.Instance.open()}>
+ // <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="cog" color="white" size="lg" />
+ // <div className="mainView-menuPanel-button-label"> Settings </div>
+ // </div>
+ // </div>
+ // </div>;
+ // }
+
@action
selectPanel = (str: string) => {
if (this.panelContent === str && this.flyoutWidth !== 0) {
@@ -606,6 +607,30 @@ export class MainView extends React.Component {
}
@action
+ selectMenu = (str: string) => {
+ if (CurrentUserUtils.panelContent === str && this.flyoutWidth !== 0) {
+ CurrentUserUtils.panelContent = "none";
+ this.flyoutWidth = 0;
+ } else {
+ CurrentUserUtils.panelContent = str;
+ MainView.expandFlyout();
+ if (str === "tools") {
+ CurrentUserUtils.toolsBtn;
+ this.sidebarContent.proto = CurrentUserUtils.toolsStack;
+ } else if (str === "workspace") {
+ this.sidebarContent.proto = CurrentUserUtils.workspaceStack;
+ } else if (str === "catalog") {
+ this.sidebarContent.proto = CurrentUserUtils.catalogStack;
+ } else if (str === "deleted") {
+ this.sidebarContent.proto = CurrentUserUtils.closedStack;
+ } else if (str === "search") {
+ this.sidebarContent.proto = CurrentUserUtils.searchStack;
+ }
+ }
+ return true;
+ }
+
+ @action
onDown = (e: React.PointerEvent) => {
setupMoveUpEvents(this, e, action((e: PointerEvent, down: number[], delta: number[]) => {
this._propertiesWidth = this._panelWidth - Math.max(Transform.Identity().transformPoint(e.clientX, 0)[0], 0);
diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx
index eecf670e6..3113d8cb4 100644
--- a/src/client/views/PropertiesButtons.tsx
+++ b/src/client/views/PropertiesButtons.tsx
@@ -392,10 +392,10 @@ export class PropertiesButtons extends React.Component<{}, {}> {
this.selectedDocumentView?.toggleDetail();
} else if (value === "linkInPlace") {
this.selectedDocumentView?.noOnClick();
- this.selectedDocumentView?.toggleFollowInPlace();
+ this.selectedDocumentView?.toggleFollowLink("inPlace", true, false);
} else if (value === "linkOnRight") {
this.selectedDocumentView?.noOnClick();
- this.selectedDocumentView?.toggleFollowOnRight();
+ this.selectedDocumentView?.toggleFollowLink("onRight", false, false);
}
}
diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx
index 47dc0a773..d72133cb9 100644
--- a/src/client/views/nodes/DocumentContentsView.tsx
+++ b/src/client/views/nodes/DocumentContentsView.tsx
@@ -18,6 +18,7 @@ import { DocHolderBox } from "./DocHolderBox";
import { DocumentViewProps } from "./DocumentView";
import "./DocumentView.scss";
import { FontIconBox } from "./FontIconBox";
+import { MenuIconBox } from "./MenuIconBox";
import { FieldView, FieldViewProps } from "./FieldView";
import { FormattedTextBox } from "./formattedText/FormattedTextBox";
import { ImageBox } from "./ImageBox";
@@ -190,7 +191,7 @@ export class DocumentContentsView extends React.Component<DocumentViewProps & {
blacklistedAttrs={[]}
renderInWrapper={false}
components={{
- FormattedTextBox, ImageBox, DirectoryImportBox, FontIconBox, LabelBox, SliderBox, FieldView,
+ FormattedTextBox, ImageBox, DirectoryImportBox, FontIconBox, MenuIconBox, LabelBox, SliderBox, FieldView,
CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, CollectionView, WebBox, KeyValueBox,
PDFBox, VideoBox, AudioBox, PresBox, YoutubeBox, PresElementBox, QueryBox,
ColorBox, DashWebRTCVideo, LinkAnchorBox, InkingStroke, DocHolderBox, LinkBox, ScriptingBox,
diff --git a/src/client/views/nodes/MenuIconBox.scss b/src/client/views/nodes/MenuIconBox.scss
new file mode 100644
index 000000000..1b72f5a8f
--- /dev/null
+++ b/src/client/views/nodes/MenuIconBox.scss
@@ -0,0 +1,49 @@
+.menuButton {
+ //padding: 7px;
+ padding-left: 7px;
+ width: 100%;
+ width: 60px;
+ height: 70px;
+
+ .menuButton-wrap {
+ width: 45px;
+ /* padding: 5px; */
+ touch-action: none;
+ background: black;
+ transform-origin: top left;
+ /* margin-bottom: 5px; */
+ margin-top: 5px;
+ margin-right: 25px;
+ border-radius: 8px;
+
+ &:hover {
+ background: rgb(61, 61, 61);
+ cursor: pointer;
+ }
+ }
+
+ .menuButton-label {
+ color: white;
+ margin-right: 4px;
+ border-radius: 8px;
+ width: 42px;
+ position: relative;
+ text-align: center;
+ font-size: 8px;
+ margin-top: 1px;
+ letter-spacing: normal;
+ padding: 3px;
+ background-color: inherit;
+ }
+
+ .menuButton-icon {
+ width: auto;
+ height: 35px;
+ padding: 5px;
+ }
+
+ svg {
+ width: 95% !important;
+ height: 95%;
+ }
+} \ No newline at end of file
diff --git a/src/client/views/nodes/MenuIconBox.tsx b/src/client/views/nodes/MenuIconBox.tsx
new file mode 100644
index 000000000..e1656fcba
--- /dev/null
+++ b/src/client/views/nodes/MenuIconBox.tsx
@@ -0,0 +1,41 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { observer } from 'mobx-react';
+import * as React from 'react';
+import { createSchema, makeInterface } from '../../../fields/Schema';
+import { DocComponent } from '../DocComponent';
+import './MenuIconBox.scss';
+import { FieldView, FieldViewProps } from './FieldView';
+import { StrCast, Cast, NumCast } from '../../../fields/Types';
+import { Utils } from "../../../Utils";
+import { runInAction, observable, reaction, IReactionDisposer } from 'mobx';
+import { Doc } from '../../../fields/Doc';
+import { ScriptField } from '../../../fields/ScriptField';
+import { CurrentUserUtils } from '../../util/CurrentUserUtils';
+const MenuIconSchema = createSchema({
+ icon: "string"
+});
+
+type MenuIconDocument = makeInterface<[typeof MenuIconSchema]>;
+const MenuIconDocument = makeInterface(MenuIconSchema);
+@observer
+export class MenuIconBox extends DocComponent<FieldViewProps, MenuIconDocument>(MenuIconDocument) {
+ public static LayoutString(fieldKey: string) { return FieldView.LayoutString(MenuIconBox, fieldKey); }
+ _ref: React.RefObject<HTMLButtonElement> = React.createRef();
+
+ render() {
+
+ const menuBTN = <div className="menuButton" style={{ backgroundColor: CurrentUserUtils.panelContent === this.dataDoc.title ? "lightgrey" : "" }}>
+ <div className="menuButton-wrap"
+ style={{ backgroundColor: CurrentUserUtils.panelContent === this.dataDoc.title ? "lightgrey" : "" }}
+ //onPointerDown={this.dataDoc.click}
+ >
+ <FontAwesomeIcon className="menuButton-icon" icon={StrCast(this.dataDoc.icon, "user") as any}
+ color={CurrentUserUtils.panelContent === this.dataDoc.title ? "black" : "white"} size="lg" />
+ <div className="menuButton-label"
+ style={{ color: CurrentUserUtils.panelContent === this.dataDoc.title ? "black" : "white" }}> {this.dataDoc.title} </div>
+ </div>
+ </div>;
+
+ return menuBTN;
+ }
+} \ No newline at end of file
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-08 16:37:28 +0000