From 3af8da49bffdb37534cfac2b5b11a8818a57691b Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Tue, 21 Jul 2020 02:21:33 -0500 Subject: tools in stripmenu working --- src/client/util/CurrentUserUtils.ts | 22 ++++- src/client/views/MainView.scss | 23 +++-- src/client/views/MainView.tsx | 190 ++++++++++++++++++++---------------- 3 files changed, 139 insertions(+), 96 deletions(-) (limited to 'src') 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 { 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
@@ -428,9 +429,10 @@ export class MainView extends React.Component { ContainingCollectionView={undefined} ContainingCollectionDoc={undefined} />
+
-
- - -
+
+
+ +
{this.docButtons} ; @@ -469,86 +471,104 @@ export class MainView extends React.Component { @computed get menuPanel() { return
- Open Workspaces
}> - - - - Open Catalog}> - - - - Open Recently Deleted}> - - - - Import }> - - - - Open Sharing Preferences}> - - - - Open Tools }> - - + {/* Open Workspaces}> */} + + {/* */} + + {/* Open Catalog}> */} + + {/* */} + + {/* Open Recently Deleted}> */} + + {/* */} + + {/* Import }> */} + + {/* */} + + {/* Open Sharing Preferences}> */} + + {/* */} + + {/* Open Tools }> */} + + {/* */} ; + } + @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) : (
+ style={{ backgroundColor: this.defaultBackgroundColors(this.sidebarContent) }}>