aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/util/CurrentUserUtils.ts22
-rw-r--r--src/client/views/MainView.scss23
-rw-r--r--src/client/views/MainView.tsx190
3 files changed, 139 insertions, 96 deletions
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 4b8c342f1..8c551d6ea 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -37,6 +37,12 @@ export class CurrentUserUtils {
@observable public static GuestWorkspace: Doc | undefined;
@observable public static GuestMobile: Doc | undefined;
+ @observable public static toolsBtn: any | undefined;
+ @observable public static libraryBtn: any | undefined;
+ @observable public static searchBtn: any | undefined;
+
+ @observable public static toolsStack: any | undefined;
+
// sets up the default User Templates - slideView, queryView, descriptionView
static setupUserTemplateButtons(doc: Doc) {
if (doc["template-button-query"] === undefined) {
@@ -593,6 +599,8 @@ export class CurrentUserUtils {
const creatorBtns = await CurrentUserUtils.setupCreatorButtons(doc);
const templateBtns = CurrentUserUtils.setupUserTemplateButtons(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,
@@ -611,6 +619,9 @@ export class CurrentUserUtils {
const toolsStack = new PrefetchProxy(Docs.Create.StackingDocument([doc.myCreators as Doc, doc.myColorPicker as Doc], {
_width: 500, lockedPosition: true, _chromeStatus: "disabled", title: "tools stack", forceActive: true
})) as any as Doc;
+
+ CurrentUserUtils.toolsStack = toolsStack;
+
doc["tabs-button-tools"] = new PrefetchProxy(Docs.Create.ButtonDocument({
_width: 35, _height: 25, title: "Tools", _fontSize: "10pt",
letterSpacing: "0px", textTransform: "unset", borderRounding: "5px 5px 0px 0px", boxShadow: "3px 3px 0px rgb(34, 34, 34)",
@@ -624,6 +635,7 @@ export class CurrentUserUtils {
}));
}
(doc["tabs-button-tools"] as Doc).sourcePanel; // prefetch sourcePanel
+
return doc["tabs-button-tools"] as Doc;
}
@@ -720,17 +732,17 @@ export class CurrentUserUtils {
// setup the list of sidebar mode buttons which determine what is displayed in the sidebar
static async setupSidebarButtons(doc: Doc) {
const sidebarContainer = CurrentUserUtils.setupSidebarContainer(doc);
- const toolsBtn = await CurrentUserUtils.setupToolsBtnPanel(doc, sidebarContainer);
- const libraryBtn = CurrentUserUtils.setupLibraryPanel(doc, sidebarContainer);
- const searchBtn = CurrentUserUtils.setupSearchBtnPanel(doc, sidebarContainer);
+ CurrentUserUtils.toolsBtn = await CurrentUserUtils.setupToolsBtnPanel(doc, sidebarContainer);
+ CurrentUserUtils.libraryBtn = CurrentUserUtils.setupLibraryPanel(doc, sidebarContainer);
+ CurrentUserUtils.searchBtn = CurrentUserUtils.setupSearchBtnPanel(doc, sidebarContainer);
// Finally, setup the list of buttons to display in the sidebar
if (doc["tabs-buttons"] === undefined) {
- doc["tabs-buttons"] = new PrefetchProxy(Docs.Create.StackingDocument([libraryBtn, searchBtn, toolsBtn], {
+ doc["tabs-buttons"] = new PrefetchProxy(Docs.Create.StackingDocument([CurrentUserUtils.libraryBtn, CurrentUserUtils.searchBtn, CurrentUserUtils.toolsBtn], {
_width: 500, _height: 80, boxShadow: "0 0", _pivotField: "title", _columnsHideIfEmpty: true, ignoreClick: true, _chromeStatus: "view-mode",
title: "sidebar btn row stack", backgroundColor: "dimGray",
}));
- (toolsBtn.onClick as ScriptField).script.run({ this: toolsBtn });
+ (CurrentUserUtils.toolsBtn.onClick as ScriptField).script.run({ this: CurrentUserUtils.toolsBtn });
}
}
diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss
index 556d26f6e..957aa6cfe 100644
--- a/src/client/views/MainView.scss
+++ b/src/client/views/MainView.scss
@@ -116,9 +116,10 @@
.mainView-menuPanel {
- max-width: 80px;
+ max-width: 95px;
background-color: rgb(105, 105, 105);
padding: 20px;
+ padding-right: 50px;
.mainView-menuPanel-button {
width: 50px;
@@ -130,20 +131,30 @@
background: black;
border-radius: 100%;
transform-origin: top left;
- margin-bottom: 15px;
+ margin-bottom: 23px;
margin-top: 5px;
+ margin-right: 25px;
+
.mainView-menuPanel-button-label {
- background: gray;
- color: white;
+ background: rgb(168, 168, 168);
+ color: black;
margin-left: -10px;
border-radius: 8px;
- width: 60px;
+ width: 65px;
position: absolute;
text-align: center;
- font-size: 8px;
+ font-size: 9.5px;
margin-top: 4px;
letter-spacing: normal;
+ padding: 3px;
+ //margin-bottom: 23px;
+ }
+
+ .mainView-menuPanel-button-icon {
+ width: 35px;
+ height: 35px;
+ padding: 5px;
}
svg {
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:09:29 +0000