aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/MainView.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/MainView.tsx')
-rw-r--r--src/client/views/MainView.tsx293
1 files changed, 180 insertions, 113 deletions
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 88f072493..9e8fa545f 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -53,7 +53,7 @@ import { RadialMenu } from './nodes/RadialMenu';
import { OverlayView } from './OverlayView';
import PDFMenu from './pdf/PDFMenu';
import { PreviewCursor } from './PreviewCursor';
-import { ScriptField } from '../../fields/ScriptField';
+import { ScriptField, ComputedField } from '../../fields/ScriptField';
import { TimelineMenu } from './animationtimeline/TimelineMenu';
import { SnappingManager } from '../util/SnappingManager';
import { FormattedTextBox } from './nodes/formattedText/FormattedTextBox';
@@ -69,6 +69,8 @@ import CollectionMenu from './collections/CollectionMenu';
import { Tooltip, AccordionActions } from '@material-ui/core';
import { PropertiesView } from './collections/collectionFreeForm/PropertiesView';
import { SelectionManager } from '../util/SelectionManager';
+import { PrefetchProxy } from '../../fields/Proxy';
+import { DragManager } from '../util/DragManager';
@observer
export class MainView extends React.Component {
@@ -333,7 +335,8 @@ export class MainView extends React.Component {
}
}
@computed get mainDocView() {
- return <DocumentView Document={this.mainContainer!}
+ return <DocumentView
+ Document={this.mainContainer!}
DataDoc={undefined}
LibraryPath={emptyPath}
addDocument={undefined}
@@ -356,6 +359,7 @@ export class MainView extends React.Component {
docFilters={returnEmptyFilter}
ContainingCollectionView={undefined}
ContainingCollectionDoc={undefined}
+ renderDepth={1}
/>;
}
@computed get dockingContent() {
@@ -449,123 +453,185 @@ export class MainView extends React.Component {
ContainingCollectionView={undefined}
ContainingCollectionDoc={undefined} />
</div>
- {/* <div className="buttonContainer" >
- <button className="mainView-settings" key="settings" onClick={() => SettingsManager.Instance.open()}>
- <FontAwesomeIcon icon="cog" size="lg" />
- </button>
- <button className="mainView-settings" key="groups" onClick={() => GroupManager.Instance.open()}>
- <FontAwesomeIcon icon="columns" size="lg" />
- </button>
- </div> */}
{this.docButtons}</div>;
}
- @computed get menuPanel() {
+ menuBtnDescriptions(): {
+ title: string, icon: string, click: string, backgroundColor?: string,
+ }[] {
+ return [
+ { title: "Workspace", icon: "desktop", click: 'this.selectPanel("workspace")' },
+ { title: "Catalog", icon: "file", click: 'this.selectPanel("catalog")' },
+ { title: "Recently Deleted", icon: "trash-alt", click: 'this.selectPanel("deleted")' },
+ { title: "Import", icon: "upload", click: 'this.selectPanel("upload")' },
+ { title: "Sharing", icon: "users", click: 'GroupManager.Instance.open()' },
+ { title: "Tools", icon: "wrench", click: 'this.selectPanel("tools")' },
+ { title: "Search", icon: "search", click: 'this.selectPanel("search")' },
+ { title: "Help", icon: "question-circle", click: 'this.selectPanel("help")' },
+ { title: "Settings", icon: "cog", click: 'SettingsManager.Instance.open()' },
+ ];
+ }
+
+ setupMenuButtons() {
+ const buttons = this.menuBtnDescriptions();
+ const menuBtns = buttons.map(({ title, icon, click, backgroundColor }) => Docs.Create.FontIconDocument({
+ _width: 100, _height: 100,
+ icon,
+ title,
+ onClick: click ? ScriptField.MakeScript(click) : undefined,
+ backgroundColor,
+ }));
+
+ const btnStack = new PrefetchProxy(Docs.Create.MasonryDocument(menuBtns, {
+ _xMargin: 0, _autoHeight: true, _width: 100, _columnWidth: 60, ignoreClick: true, lockedPosition: true, _chromeStatus: "disabled",
+ }));
+ return btnStack as unknown as Doc;
+ }
+
+ @computed get setupMenuPanel() {
+ const menuBtns = this.setupMenuButtons();
+ const menuStack = new PrefetchProxy(Docs.Create.StackingDocument([menuBtns], {
+ title: "all Creators", _yMargin: 0, _autoHeight: true, _xMargin: 0,
+ _width: 100, ignoreClick: true, lockedPosition: true, _chromeStatus: "disabled",
+ })) as any as Doc;
+
return <div className="mainView-menuPanel">
- <button className="mainView-menuPanel-button"
- onPointerDown={e => this.selectPanel("workspace")}
- style={{
- padding: "5px",
- background: "black",
- boxShadow: "4px 4px 12px black"
- }}>
- <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="desktop" color="white" size="lg" />
- <div className="mainView-menuPanel-button-label"> Workspace </div>
- </button>
-
- <button className="mainView-menuPanel-button"
- onPointerDown={e => this.selectPanel("catalog")}
- style={{
- padding: "5px",
- background: "black",
- boxShadow: "4px 4px 12px black"
- }}>
- <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="file" color="white" size="lg" />
- <div className="mainView-menuPanel-button-label"> Catalog </div>
- </button>
-
- <button className="mainView-menuPanel-button"
- onPointerDown={e => this.selectPanel("deleted")}
- style={{
- padding: "5px",
- background: "black",
- boxShadow: "4px 4px 12px black",
- marginBottom: "30px"
- }}>
- <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="trash-alt" color="white" size="lg" />
- <div className="mainView-menuPanel-button-label"> Recently Closed </div>
- </button>
-
- <button className="mainView-menuPanel-button"
- onPointerDown={e => this.selectPanel("upload")}
- style={{
- padding: "5px",
- background: "black",
- boxShadow: "4px 4px 12px black",
- }}>
- <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="upload" color="white" size="lg" />
- <div className="mainView-menuPanel-button-label"> Import </div>
- </button>
-
- <button className="mainView-menuPanel-button"
- //onPointerDown={e => this.selectPanel("sharing")}
- onClick={() => GroupManager.Instance.open()}
- style={{
- padding: "5px",
- background: "black",
- boxShadow: "4px 4px 12px black"
- }}>
- <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="users" color="white" size="lg" />
- <div className="mainView-menuPanel-button-label"> Sharing </div>
- </button>
-
- <button className="mainView-menuPanel-button"
- onPointerDown={e => this.selectPanel("tools")}
- style={{
- padding: "5px",
- background: "black",
- boxShadow: "4px 4px 12px black",
- //marginBottom: "45px"
- }}>
- <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="wrench" color="white" size="lg" />
- <div className="mainView-menuPanel-button-label"> Tools </div>
- </button>
-
- <button className="mainView-menuPanel-button"
- onPointerDown={e => this.selectPanel("search")}
- style={{
- padding: "5px",
- background: "black",
- boxShadow: "4px 4px 12px black",
- //marginBottom: "45px"
- }}>
- <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="search" color="white" size="lg" />
- <div className="mainView-menuPanel-button-label"> Search </div>
- </button>
-
- <button className="mainView-menuPanel-bottomButton"
- onPointerDown={e => this.selectPanel("help")}
- style={{
- padding: "5px",
- background: "dimgrey",
- }}>
- <FontAwesomeIcon className="mainView-menuPanel-bottomButton-icon" icon="question-circle" color="white" size="lg" />
- <div className="mainView-menuPanel-bottomButton-label"> Help </div>
- </button>
-
- <button className="mainView-menuPanel-bottomButton"
- // onPointerDown={e => this.selectPanel("settings")}
- onClick={() => SettingsManager.Instance.open()}
- style={{
- padding: "5px",
- background: "dimgrey",
- }}>
- <FontAwesomeIcon className="mainView-menuPanel-bottomButton-icon" icon="cog" color="white" size="lg" />
- <div className="mainView-menuPanel-bottomButton-label"> Settings </div>
- </button>
+ <DocumentView
+ Document={menuStack}
+ 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={() => 100}
+ PanelHeight={this.getContentsHeight}
+ renderDepth={0}
+ focus={emptyFunction}
+ backgroundColor={this.defaultBackgroundColors}
+ parentActive={returnTrue}
+ whenActiveChanged={emptyFunction}
+ bringToFront={emptyFunction}
+ docFilters={returnEmptyFilter}
+ ContainingCollectionView={undefined}
+ ContainingCollectionDoc={undefined} />
</div>;
}
+ @observable menuPanel: any;
+
+ // @computed get menuPanel() {
+ // return <div className="mainView-menuPanel">
+ // <button className="mainView-menuPanel-button"
+ // onPointerDown={e => this.selectPanel("workspace")}
+ // style={{
+ // padding: "5px",
+ // background: "black",
+ // boxShadow: "4px 4px 12px black"
+ // }}>
+ // <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="desktop" color="white" size="lg" />
+ // <div className="mainView-menuPanel-button-label"> Workspace </div>
+ // </button>
+
+ // <button className="mainView-menuPanel-button"
+ // onPointerDown={e => this.selectPanel("catalog")}
+ // style={{
+ // padding: "5px",
+ // background: "black",
+ // boxShadow: "4px 4px 12px black"
+ // }}>
+ // <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="file" color="white" size="lg" />
+ // <div className="mainView-menuPanel-button-label"> Catalog </div>
+ // </button>
+
+ // <button className="mainView-menuPanel-button"
+ // onPointerDown={e => this.selectPanel("deleted")}
+ // style={{
+ // padding: "5px",
+ // background: "black",
+ // boxShadow: "4px 4px 12px black",
+ // marginBottom: "30px"
+ // }}>
+ // <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="trash-alt" color="white" size="lg" />
+ // <div className="mainView-menuPanel-button-label"> Recently Closed </div>
+ // </button>
+
+ // <button className="mainView-menuPanel-button"
+ // onPointerDown={e => this.selectPanel("upload")}
+ // style={{
+ // padding: "5px",
+ // background: "black",
+ // boxShadow: "4px 4px 12px black",
+ // }}>
+ // <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="upload" color="white" size="lg" />
+ // <div className="mainView-menuPanel-button-label"> Import </div>
+ // </button>
+
+ // <button className="mainView-menuPanel-button"
+ // //onPointerDown={e => this.selectPanel("sharing")}
+ // onClick={() => GroupManager.Instance.open()}
+ // style={{
+ // padding: "5px",
+ // background: "black",
+ // boxShadow: "4px 4px 12px black"
+ // }}>
+ // <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="users" color="white" size="lg" />
+ // <div className="mainView-menuPanel-button-label"> Sharing </div>
+ // </button>
+
+ // <button className="mainView-menuPanel-button"
+ // onPointerDown={e => this.selectPanel("tools")}
+ // style={{
+ // padding: "5px",
+ // background: "black",
+ // boxShadow: "4px 4px 12px black",
+ // //marginBottom: "45px"
+ // }}>
+ // <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="wrench" color="white" size="lg" />
+ // <div className="mainView-menuPanel-button-label"> Tools </div>
+ // </button>
+
+ // <button className="mainView-menuPanel-button"
+ // onPointerDown={e => this.selectPanel("search")}
+ // style={{
+ // padding: "5px",
+ // background: "black",
+ // boxShadow: "4px 4px 12px black",
+ // //marginBottom: "45px"
+ // }}>
+ // <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="search" color="white" size="lg" />
+ // <div className="mainView-menuPanel-button-label"> Search </div>
+ // </button>
+
+ // <button className="mainView-menuPanel-bottomButton"
+ // onPointerDown={e => this.selectPanel("help")}
+ // style={{
+ // padding: "5px",
+ // background: "323232",
+ // }}>
+ // <FontAwesomeIcon className="mainView-menuPanel-bottomButton-icon" icon="question-circle" color="white" size="lg" />
+ // <div className="mainView-menuPanel-bottomButton-label"> Help </div>
+ // </button>
+
+ // <button className="mainView-menuPanel-bottomButton"
+ // // onPointerDown={e => this.selectPanel("settings")}
+ // onClick={() => SettingsManager.Instance.open()}
+ // style={{
+ // padding: "5px",
+ // background: "323232",
+ // }}>
+ // <FontAwesomeIcon className="mainView-menuPanel-bottomButton-icon" icon="cog" color="white" size="lg" />
+ // <div className="mainView-menuPanel-bottomButton-label"> Settings </div>
+ // </button>
+ // </div>;
+ // }
+
@action
selectPanel = (str: string) => {
if (this.panelContent === str && this.flyoutWidth !== 0) {
@@ -587,6 +653,7 @@ export class MainView extends React.Component {
this.sidebarContent.proto = CurrentUserUtils.searchStack;
}
}
+ return true;
}
@action
@@ -623,7 +690,7 @@ export class MainView extends React.Component {
height,
width: (FormatShapePane.Instance?.Pinned) ? `calc(100% - 200px)` : "100%"
}} >
- {this.menuPanel}
+ {this.setupMenuPanel}
<div style={{ display: "contents", flexDirection: "row", position: "relative" }}>
<div className="mainView-flyoutContainer" onPointerLeave={this.pointerLeaveDragger} style={{ width: this.flyoutWidth }}>
{this.flyoutWidth !== 0 ? <div className="mainView-libraryHandle"
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-08 17:15:33 +0000