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.tsx190
1 files changed, 105 insertions, 85 deletions
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 944f4c8d4..287497df0 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -88,6 +88,8 @@ export class MainView extends React.Component {
@computed public get mainFreeform(): Opt<Doc> { return (docs => (docs && docs.length > 1) ? docs[1] : undefined)(DocListCast(this.mainContainer!.data)); }
@computed public get sidebarButtonsDoc() { return Cast(this.userDoc["tabs-buttons"], Doc) as Doc; }
+ @observable public sidebarContent: any = this.userDoc?.["tabs-panelContainer"];
+
public isPointerDown = false;
componentDidMount() {
@@ -396,8 +398,7 @@ export class MainView extends React.Component {
mainContainerXf = () => this.sidebarScreenToLocal().translate(0, -this._buttonBarHeight);
@computed get flyout() {
- const sidebarContent = this.userDoc?.["tabs-panelContainer"];
- if (!(sidebarContent instanceof Doc)) {
+ if (!(this.sidebarContent instanceof Doc)) {
return (null);
}
return <div className="mainView-flyoutContainer" >
@@ -428,9 +429,10 @@ export class MainView extends React.Component {
ContainingCollectionView={undefined}
ContainingCollectionDoc={undefined} />
</div>
+
<div className="mainView-contentArea" style={{ position: "relative", height: `calc(100% - ${this._buttonBarHeight}px)`, width: "100%", overflow: "visible" }}>
<DocumentView
- Document={sidebarContent}
+ Document={this.sidebarContent}
DataDoc={undefined}
LibraryPath={emptyPath}
addDocument={undefined}
@@ -454,14 +456,14 @@ export class MainView extends React.Component {
docFilters={returnEmptyFilter}
ContainingCollectionView={undefined}
ContainingCollectionDoc={undefined} />
- <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>
+ </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>;
@@ -469,86 +471,104 @@ export class MainView extends React.Component {
@computed get menuPanel() {
return <div className="mainView-menuPanel">
- <Tooltip title={<div className="dash-tooltip">Open Workspaces</div>}>
- <button className="mainView-menuPanel-button"
- 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"> Workspaces </div>
- </button>
- </Tooltip>
-
- <Tooltip title={<div className="dash-tooltip">Open Catalog</div>}>
- <button className="mainView-menuPanel-button"
- 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>
- </Tooltip>
-
- <Tooltip title={<div className="dash-tooltip">Open Recently Deleted</div>}>
- <button className="mainView-menuPanel-button"
- style={{
- padding: "5px",
- background: "black",
- boxShadow: "4px 4px 12px black"
- }}>
- <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="trash-restore" color="white" size="lg" />
- <div className="mainView-menuPanel-button-label"> Recently Deleted </div>
- </button>
- </Tooltip>
-
- <Tooltip title={<div className="dash-tooltip"> Import </div>}>
- <button className="mainView-menuPanel-button"
- 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>
- </Tooltip>
-
- <Tooltip title={<div className="dash-tooltip">Open Sharing Preferences</div>}>
- <button className="mainView-menuPanel-button"
- 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>
- </Tooltip>
-
- <Tooltip title={<div className="dash-tooltip">Open Tools </div>}>
- <button className="mainView-menuPanel-button"
- style={{
- padding: "5px",
- background: "black",
- boxShadow: "4px 4px 12px black"
- }}>
- <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="wrench" color="white" size="lg" />
- <div className="mainView-menuPanel-button-label"> Tools </div>
- </button>
- </Tooltip>
+ {/* <Tooltip title={<div className="dash-tooltip">Open Workspaces</div>}> */}
+ <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>
+ {/* </Tooltip> */}
+
+ {/* <Tooltip title={<div className="dash-tooltip">Open Catalog</div>}> */}
+ <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>
+ {/* </Tooltip> */}
+
+ {/* <Tooltip title={<div className="dash-tooltip">Open Recently Deleted</div>}> */}
+ <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-restore" color="white" size="lg" />
+ <div className="mainView-menuPanel-button-label"> Recently Deleted </div>
+ </button>
+ {/* </Tooltip> */}
+
+ {/* <Tooltip title={<div className="dash-tooltip"> Import </div>}> */}
+ <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>
+ {/* </Tooltip> */}
+
+ {/* <Tooltip title={<div className="dash-tooltip">Open Sharing Preferences</div>}> */}
+ <button className="mainView-menuPanel-button"
+ onPointerDown={e => this.selectPanel("sharing")}
+ 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>
+ {/* </Tooltip> */}
+
+ {/* <Tooltip title={<div className="dash-tooltip">Open Tools </div>}> */}
+ <button className="mainView-menuPanel-button"
+ onPointerDown={e => this.selectPanel("tools")}
+ style={{
+ padding: "5px",
+ background: "black",
+ boxShadow: "4px 4px 12px black"
+ }}>
+ <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="wrench" color="white" size="lg" />
+ <div className="mainView-menuPanel-button-label"> Tools </div>
+ </button>
+ {/* </Tooltip> */}
</div>;
+ }
+ @action
+ selectPanel = (str: string) => {
+ //this.sidebarContent = null;
+
+ if (str === "tools") {
+ // this.userDoc?.["tabs-button-tools"] = undefined;
+ CurrentUserUtils.toolsBtn;
+ this.sidebarContent.proto = CurrentUserUtils.toolsStack;
+ } else if (str === "catalog") {
+ //this.sidebarContent = CurrentUserUtils.libraryBtn;
+ }
}
@computed get mainContent() {
- const sidebar = this.userDoc?.["tabs-panelContainer"];
const n = (RichTextMenu.Instance?.Pinned ? 1 : 0) + (CollectionMenu.Instance?.Pinned ? 1 : 0);
const height = `calc(100% - ${n * Number(ANTIMODEMENU_HEIGHT.replace("px", ""))}px)`;
- return !this.userDoc || !(sidebar instanceof Doc) ? (null) : (
+ return !this.userDoc || !(this.sidebarContent instanceof Doc) ? (null) : (
<div className="mainView-mainContent" style={{
color: this.darkScheme ? "rgb(205,205,205)" : "black",
//change to times 2 for both pinned
@@ -559,7 +579,7 @@ export class MainView extends React.Component {
<div style={{ display: "contents", flexDirection: "row", position: "relative" }}>
<div className="mainView-flyoutContainer" onPointerLeave={this.pointerLeaveDragger} style={{ width: this.flyoutWidth }}>
<div className="mainView-libraryHandle" onPointerDown={this.onPointerDown}
- style={{ backgroundColor: this.defaultBackgroundColors(sidebar) }}>
+ style={{ backgroundColor: this.defaultBackgroundColors(this.sidebarContent) }}>
<span title="library View Dragger" style={{
width: (this.flyoutWidth !== 0 && this._flyoutTranslate) ? "100%" : "3vw",
//height: (this.flyoutWidth !== 0 && this._flyoutTranslate) ? "100%" : "100vh",
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-08 19:13:00 +0000