aboutsummaryrefslogtreecommitdiff
path: root/src/client/views
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views')
-rw-r--r--src/client/views/MainView.scss23
-rw-r--r--src/client/views/MainView.tsx190
2 files changed, 122 insertions, 91 deletions
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-21 10:36:48 +0000