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 +++++++++++++++++----- 1 file changed, 17 insertions(+), 5 deletions(-) (limited to 'src/client/util') 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 }); } } -- cgit v1.2.3-70-g09d2 From 214ad7b39962b2873f106fca043907c839052c3d Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Tue, 21 Jul 2020 12:39:01 -0500 Subject: added functionality for all sidebar buttons except sharing and import --- src/client/util/CurrentUserUtils.ts | 31 +++++++++++++++++++++++++++++++ src/client/views/MainView.tsx | 32 +++++++++++++++++++++++--------- 2 files changed, 54 insertions(+), 9 deletions(-) (limited to 'src/client/util') diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 8c551d6ea..90e0c159e 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -42,6 +42,9 @@ export class CurrentUserUtils { @observable public static searchBtn: any | undefined; @observable public static toolsStack: any | undefined; + @observable public static workspaceStack: any | undefined; + @observable public static catalogStack: any | undefined; + @observable public static closedStack: any | undefined; // sets up the default User Templates - slideView, queryView, descriptionView static setupUserTemplateButtons(doc: Doc) { @@ -641,6 +644,7 @@ export class CurrentUserUtils { static setupWorkspaces(doc: Doc) { // setup workspaces library item + doc.myWorkspaces === undefined; if (doc.myWorkspaces === undefined) { doc.myWorkspaces = new PrefetchProxy(Docs.Create.TreeDocument([], { title: "WORKSPACES", _height: 100, forceActive: true, boxShadow: "0 0", lockedPosition: true, @@ -650,19 +654,38 @@ export class CurrentUserUtils { (doc.myWorkspaces as Doc).contextMenuScripts = new List([newWorkspace!]); (doc.myWorkspaces as Doc).contextMenuLabels = new List(["Create New Workspace"]); + const workspaces = doc.myWorkspaces as Doc; + + CurrentUserUtils.workspaceStack = new PrefetchProxy(Docs.Create.TreeDocument([workspaces], { + title: " ", _xMargin: 5, _yMargin: 5, _gridGap: 5, forceActive: true, childDropAction: "alias", + treeViewTruncateTitleWidth: 150, + lockedPosition: true, boxShadow: "0 0", dontRegisterChildViews: true, targetDropAction: "same" + })) as any as Doc; + return doc.myWorkspaces as Doc; } static setupCatalog(doc: Doc) { + doc.myCatalog === undefined; if (doc.myCatalog === undefined) { doc.myCatalog = new PrefetchProxy(Docs.Create.SchemaDocument([], [], { title: "CATALOG", _height: 1000, _fitWidth: true, forceActive: true, boxShadow: "0 0", treeViewPreventOpen: false, childDropAction: "alias", targetDropAction: "same", stayInCollection: true, })); } + + const catalog = doc.myCatalog as Doc; + + CurrentUserUtils.catalogStack = new PrefetchProxy(Docs.Create.TreeDocument([catalog], { + title: " ", _xMargin: 5, _yMargin: 5, _gridGap: 5, forceActive: true, childDropAction: "alias", + treeViewTruncateTitleWidth: 150, + lockedPosition: true, boxShadow: "0 0", dontRegisterChildViews: true, targetDropAction: "same" + })) as any as Doc; + return doc.myCatalog as Doc; } static setupRecentlyClosed(doc: Doc) { // setup Recently Closed library item + doc.myRecentlyClosed === undefined; if (doc.myRecentlyClosed === undefined) { doc.myRecentlyClosed = new PrefetchProxy(Docs.Create.TreeDocument([], { title: "RECENTLY CLOSED", _height: 75, forceActive: true, boxShadow: "0 0", treeViewPreventOpen: true, stayInCollection: true, @@ -674,6 +697,14 @@ export class CurrentUserUtils { (doc.myRecentlyClosed as Doc).contextMenuScripts = new List([clearAll!]); (doc.myRecentlyClosed as Doc).contextMenuLabels = new List(["Clear All"]); + const recentlyClosed = doc.myRecentlyClosed as Doc; + + CurrentUserUtils.closedStack = new PrefetchProxy(Docs.Create.TreeDocument([recentlyClosed], { + title: " ", _xMargin: 5, _yMargin: 5, _gridGap: 5, forceActive: true, childDropAction: "alias", + treeViewTruncateTitleWidth: 150, + lockedPosition: true, boxShadow: "0 0", dontRegisterChildViews: true, targetDropAction: "same" + })) as any as Doc; + return doc.myRecentlyClosed as Doc; } // setup the Library button which will display the library panel. This panel includes a collection of workspaces, documents, and recently closed views diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 287497df0..c9da29cba 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -89,6 +89,7 @@ export class MainView extends React.Component { @computed public get sidebarButtonsDoc() { return Cast(this.userDoc["tabs-buttons"], Doc) as Doc; } @observable public sidebarContent: any = this.userDoc?.["tabs-panelContainer"]; + @observable public panelContent: string = "none"; public isPointerDown = false; @@ -506,7 +507,7 @@ export class MainView extends React.Component { boxShadow: "4px 4px 12px black", marginBottom: "30px" }}> - +
Recently Deleted
{/* */} @@ -554,14 +555,27 @@ export class MainView extends React.Component { @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; + + if (this.panelContent === str) { + this.sidebarContent = null; + this.panelContent = "none"; + MainView.Instance._flyoutTranslate = false; + } else { + MainView.expandFlyout(); + if (str === "tools") { + CurrentUserUtils.toolsBtn; + this.sidebarContent.proto = CurrentUserUtils.toolsStack; + } else if (str === "workspace") { + this.sidebarContent.proto = CurrentUserUtils.workspaceStack; + } else if (str === "catalog") { + this.sidebarContent.proto = CurrentUserUtils.catalogStack; + } else if (str === "deleted") { + this.sidebarContent.proto = CurrentUserUtils.closedStack; + } else if (str === "upload") { + this.sidebarContent.proto = "uploads"; + } else if (str === "sharing") { + this.sidebarContent.proto = "sharing"; + } } } -- cgit v1.2.3-70-g09d2 From 25ec1ef48c36ad91dccc408fa6075f0915c36118 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Tue, 21 Jul 2020 17:18:07 -0500 Subject: finished left side UI changes --- src/client/util/CurrentUserUtils.ts | 11 +- src/client/views/MainView.scss | 53 ++++++++ src/client/views/MainView.tsx | 158 +++++++++++------------- src/client/views/collections/CollectionView.tsx | 3 +- 4 files changed, 135 insertions(+), 90 deletions(-) (limited to 'src/client/util') diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 90e0c159e..c98bc0b01 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -620,7 +620,7 @@ export class CurrentUserUtils { if (doc["tabs-button-tools"] === undefined) { 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 + _width: 500, lockedPosition: true, _chromeStatus: "disabled", hideFilterView: true, title: "tools stack", forceActive: true })) as any as Doc; CurrentUserUtils.toolsStack = toolsStack; @@ -633,6 +633,7 @@ export class CurrentUserUtils { dragFactory: toolsStack, removeDropProperties: new List(["lockedPosition"]), stayInCollection: true, + hideFilterView: true, targetContainer: new PrefetchProxy(sidebarContainer) as any as Doc, onClick: ScriptField.MakeScript("this.targetContainer.proto = this.sourcePanel"), })); @@ -658,7 +659,7 @@ export class CurrentUserUtils { CurrentUserUtils.workspaceStack = new PrefetchProxy(Docs.Create.TreeDocument([workspaces], { title: " ", _xMargin: 5, _yMargin: 5, _gridGap: 5, forceActive: true, childDropAction: "alias", - treeViewTruncateTitleWidth: 150, + treeViewTruncateTitleWidth: 150, hideFilterView: true, lockedPosition: true, boxShadow: "0 0", dontRegisterChildViews: true, targetDropAction: "same" })) as any as Doc; @@ -677,7 +678,7 @@ export class CurrentUserUtils { CurrentUserUtils.catalogStack = new PrefetchProxy(Docs.Create.TreeDocument([catalog], { title: " ", _xMargin: 5, _yMargin: 5, _gridGap: 5, forceActive: true, childDropAction: "alias", - treeViewTruncateTitleWidth: 150, + treeViewTruncateTitleWidth: 150, hideFilterView: true, lockedPosition: true, boxShadow: "0 0", dontRegisterChildViews: true, targetDropAction: "same" })) as any as Doc; @@ -701,7 +702,7 @@ export class CurrentUserUtils { CurrentUserUtils.closedStack = new PrefetchProxy(Docs.Create.TreeDocument([recentlyClosed], { title: " ", _xMargin: 5, _yMargin: 5, _gridGap: 5, forceActive: true, childDropAction: "alias", - treeViewTruncateTitleWidth: 150, + treeViewTruncateTitleWidth: 150, hideFilterView: true, lockedPosition: true, boxShadow: "0 0", dontRegisterChildViews: true, targetDropAction: "same" })) as any as Doc; @@ -716,7 +717,7 @@ export class CurrentUserUtils { if (doc["tabs-button-library"] === undefined) { const libraryStack = new PrefetchProxy(Docs.Create.TreeDocument([workspaces, documents, recentlyClosed, doc], { title: "Library", _xMargin: 5, _yMargin: 5, _gridGap: 5, forceActive: true, childDropAction: "alias", - treeViewTruncateTitleWidth: 150, + treeViewTruncateTitleWidth: 150, hideFilterView: true, lockedPosition: true, boxShadow: "0 0", dontRegisterChildViews: true, targetDropAction: "same" })) as any as Doc; doc["tabs-button-library"] = new PrefetchProxy(Docs.Create.ButtonDocument({ diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss index 957aa6cfe..dfd5a993e 100644 --- a/src/client/views/MainView.scss +++ b/src/client/views/MainView.scss @@ -162,6 +162,59 @@ height: 95%; } } + + .mainView-menuPanel-bottomButton { + width: 50px; + height: 50px; + padding: 10px; + pointer-events: all; + touch-action: none; + border-radius: inherit; + background: dimgray; + background-color: dimgray; + border-radius: 100%; + transform-origin: top left; + margin-bottom: 23px; + margin-top: 5px; + + margin-right: 25px; + + .mainView-menuPanel-bottomButton-label { + background: dimgray; + color: black; + margin-left: -10px; + border-radius: 8px; + width: 65px; + position: absolute; + text-align: center; + font-size: 9.5px; + margin-top: 2px; + letter-spacing: normal; + padding: 3px; + //margin-bottom: 23px; + } + + .mainView-menuPanel-bottomButton-icon { + width: 50px; + height: 50px; + color: black; + } + + svg { + width: 95% !important; + height: 95%; + } + } +} + +.mainView-searchPanel { + width: 100%; + height: 33px; + background-color: black; + color: white; + text-align: center; + vertical-align: middle; + padding-top: 6px; } .mainView-mainDiv { diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index c9da29cba..95301b900 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -8,7 +8,7 @@ import { faLongArrowAltRight, faMicrophone, faMousePointer, faMusic, faObjectGroup, faPause, faPen, faPenNib, faPhone, faPlay, faPortrait, faRedoAlt, faStamp, faStickyNote, faTimesCircle, faThumbtack, faTree, faTv, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faArrowsAlt, faQuoteLeft, faSortAmountDown, faAlignLeft, faAlignCenter, faAlignRight, faHeading, faRulerCombined, faFillDrip, faLink, faUnlink, faBold, faItalic, faChevronLeft, faUnderline, faStrikethrough, faSuperscript, faSubscript, faIndent, faEyeDropper, - faPaintRoller, faBars, faBrush, faShapes, faEllipsisH, faHandPaper, faDesktop, faTrashRestore, faUsers, faWrench + faPaintRoller, faBars, faBrush, faShapes, faEllipsisH, faHandPaper, faDesktop, faTrashRestore, faUsers, faWrench, faCog } from '@fortawesome/free-solid-svg-icons'; import { ANTIMODEMENU_HEIGHT } from './globalCssVariables.scss'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; @@ -79,7 +79,7 @@ export class MainView extends React.Component { @observable private _panelWidth: number = 0; @observable private _panelHeight: number = 0; - @observable private _flyoutTranslate: boolean = true; + @observable private _flyoutTranslate: boolean = false; @observable public flyoutWidth: number = 250; private get darkScheme() { return BoolCast(Cast(this.userDoc?.activeWorkspace, Doc, null)?.darkScheme); } @@ -154,7 +154,7 @@ export class MainView extends React.Component { faLongArrowAltRight, faMicrophone, faMousePointer, faMusic, faObjectGroup, faPause, faPen, faPenNib, faPhone, faPlay, faPortrait, faRedoAlt, faStamp, faStickyNote, faTrashAlt, faAngleRight, faBell, faThumbtack, faTree, faTv, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faArrowsAlt, faQuoteLeft, faSortAmountDown, faAlignLeft, faAlignCenter, faAlignRight, faHeading, faRulerCombined, faFillDrip, faLink, faUnlink, faBold, faItalic, faChevronLeft, faUnderline, faStrikethrough, faSuperscript, faSubscript, faIndent, faEyeDropper, - faPaintRoller, faBars, faBrush, faShapes, faEllipsisH, faHandPaper, faDesktop, faTrashRestore, faUsers, faWrench); + faPaintRoller, faBars, faBrush, faShapes, faEllipsisH, faHandPaper, faDesktop, faTrashRestore, faUsers, faWrench, faCog); this.initEventListeners(); this.initAuthenticationRouters(); } @@ -402,77 +402,46 @@ export class MainView extends React.Component { if (!(this.sidebarContent instanceof Doc)) { return (null); } - return
-
- -
- -
- -
-
+ return
+ +
; + {/*
-
- {this.docButtons} -
; +
*/} + {/* {this.docButtons} */ } } @computed get menuPanel() { return
- {/* Open Workspaces
}> */} - {/* */} - {/* Open Catalog}> */} - {/* */} - {/* Open Recently Deleted}> */} - {/* */} - {/* Import }> */} - {/* */} - {/* Open Sharing Preferences}> */} - {/* */} - {/* Open Tools }> */} - {/* */} + + + + ; } @@ -592,7 +572,8 @@ export class MainView extends React.Component { {this.menuPanel}
-
-
+
: null}
{this.flyout} - {this.expandButton} + {MainView.Instance._flyoutTranslate ? this.expandButton : null}
- {this.dockingContent} + {/* {this.dockingContent} */} ); } @@ -623,7 +604,7 @@ export class MainView extends React.Component { }); @computed get expandButton() { - return !this._flyoutTranslate ? (
) : (null); + return !this._flyoutTranslate ? (
) : (null); } addButtonDoc = (doc: Doc | Doc[]) => (doc instanceof Doc ? [doc] : doc).reduce((flg: boolean, doc) => flg && Doc.AddDocToList(Doc.UserDoc().dockedBtns as Doc, "data", doc), true); @@ -717,8 +698,16 @@ export class MainView extends React.Component { ; } + @computed get search() { + return
+
{Doc.CurrentUserEmail}
+
SEARCH GOES HERE
+
; + } + render() { return (
+ {this.inkResources} @@ -727,6 +716,7 @@ export class MainView extends React.Component { + {/* {this.search} */} diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index c1da23470..21b0045d5 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -80,6 +80,7 @@ export interface CollectionViewCustomProps { childLayoutTemplate?: () => Opt; // specify a layout Doc template to use for children of the collection childLayoutString?: string; // specify a layout string to use for children of the collection childOpacity?: () => number; + hideFilter?: true; } export interface CollectionRenderProps { @@ -559,7 +560,7 @@ export class CollectionView extends Touchable } -- cgit v1.2.3-70-g09d2 From 21af12f4c140485023450ad348703d69ffd2a724 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Tue, 21 Jul 2020 22:10:34 -0500 Subject: cleaned up tab on right --- src/client/util/CurrentUserUtils.ts | 3 +++ src/client/views/MainView.scss | 26 +++++++++++++++++--------- src/client/views/MainView.tsx | 36 ++++++++++++++++++++++++------------ 3 files changed, 44 insertions(+), 21 deletions(-) (limited to 'src/client/util') diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 005648b1e..088e20a3e 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -45,6 +45,7 @@ export class CurrentUserUtils { @observable public static workspaceStack: any | undefined; @observable public static catalogStack: any | undefined; @observable public static closedStack: any | undefined; + @observable public static searchStack: any | undefined; // sets up the default User Templates - slideView, queryView, descriptionView static setupUserTemplateButtons(doc: Doc) { @@ -737,6 +738,7 @@ export class CurrentUserUtils { // setup the Search button which will display the search panel. static setupSearchBtnPanel(doc: Doc, sidebarContainer: Doc) { + doc["tabs-button-search"] = undefined; if (doc["tabs-button-search"] === undefined) { doc["tabs-button-search"] = new PrefetchProxy(Docs.Create.ButtonDocument({ _width: 50, _height: 25, title: "Search", _fontSize: "10pt", @@ -747,6 +749,7 @@ export class CurrentUserUtils { lockedPosition: true, onClick: ScriptField.MakeScript("this.targetContainer.proto = this.sourcePanel") })); + CurrentUserUtils.searchStack = new PrefetchProxy(Docs.Create.QueryDocument({ title: "search stack", })) as any as Doc; } return doc["tabs-button-search"] as Doc; } diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss index dfd5a993e..9454b0c78 100644 --- a/src/client/views/MainView.scss +++ b/src/client/views/MainView.scss @@ -122,8 +122,8 @@ padding-right: 50px; .mainView-menuPanel-button { - width: 50px; - height: 50px; + width: 45px; + height: 45px; padding: 10px; pointer-events: all; touch-action: none; @@ -139,7 +139,7 @@ .mainView-menuPanel-button-label { background: rgb(168, 168, 168); color: black; - margin-left: -10px; + margin-left: -13px; border-radius: 8px; width: 65px; position: absolute; @@ -269,22 +269,30 @@ .mainView-expandFlyoutButton { position: absolute; - top: 100px; - right: 30px; + top: 120px; + right: 55px; cursor: pointer; } .mainView-libraryHandle { - width: 20px; + width: 28px; left: calc(100% - 10px); - height: 40px; + height: 55px; top: 50%; border: 1px solid black; - border-radius: 5px; + border-radius: 8px; position: absolute; z-index: 2; touch-action: none; - cursor: ew-resize; + cursor: grab; + + .mainView-libraryHandle-icon { + width: 10px; + height: 10px; + float: right; + margin-right: 1px; + } + } .mainView-workspace { diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 845a61d32..766626a82 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -489,7 +489,8 @@ export class MainView extends React.Component { + +
{this.dockingContent} + {this.showProperties ? (null) : +
+
+
+
+ } + {this.propertiesWidth() < 10 ? (null) : this.propertiesView} ); } diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx index 842d0320f..1b06a41fa 100644 --- a/src/client/views/PropertiesButtons.tsx +++ b/src/client/views/PropertiesButtons.tsx @@ -22,6 +22,7 @@ import { TemplateMenu } from "./TemplateMenu"; import { Template, Templates } from "./Templates"; import React = require("react"); import { Tooltip } from '@material-ui/core'; +import { SelectionManager } from '../util/SelectionManager'; const higflyout = require("@hig/flyout"); export const { anchorPoints } = higflyout; export const Flyout = higflyout.default; @@ -49,7 +50,7 @@ enum UtilityButtonState { } @observer -export class PropertiesButtons extends React.Component<{ doc: Doc }, {}> { +export class PropertiesButtons extends React.Component<{}, {}> { private _dragRef = React.createRef(); private _pullAnimating = false; private _pushAnimating = false; @@ -67,6 +68,9 @@ export class PropertiesButtons extends React.Component<{ doc: Doc }, {}> { public static hasPushedHack = false; public static hasPulledHack = false; + @observable selectedDocumentView: DocumentView | undefined = SelectionManager.LastSelection(); + @observable selectedDoc: Doc | undefined = this.selectedDocumentView?.props.Document; + public startPullOutcome = action((success: boolean) => { if (!this._pullAnimating) { this._pullAnimating = true; @@ -108,7 +112,7 @@ export class PropertiesButtons extends React.Component<{ doc: Doc }, {}> { @computed get considerGoogleDocsPush() { - const targetDoc = this.props.doc; + const targetDoc = this.selectedDoc; const published = targetDoc && Doc.GetProto(targetDoc)[GoogleRef] !== undefined; const animation = this.isAnimatingPulse ? "shadow-pulse 1s linear infinite" : "none"; return !targetDoc ? (null) :
{`${published ? "Push" : "Publish"} to Google Docs`}
}> @@ -127,7 +131,7 @@ export class PropertiesButtons extends React.Component<{ doc: Doc }, {}> { @computed get considerGoogleDocsPull() { - const targetDoc = this.props.doc; + const targetDoc = this.selectedDoc; const dataDoc = targetDoc && Doc.GetProto(targetDoc); const animation = this.isAnimatingFetch ? "spin 0.5s linear infinite" : "none"; @@ -188,7 +192,7 @@ export class PropertiesButtons extends React.Component<{ doc: Doc }, {}> { } @computed get pinButton() { - const targetDoc = this.props.doc; + const targetDoc = this.selectedDoc; const isPinned = targetDoc && Doc.isDocPinned(targetDoc); return !targetDoc ? (null) :
{Doc.isDocPinned(targetDoc) ? "Unpin from presentation" : "Pin to presentation"}
}>
{ @computed get metadataButton() { //const view0 = this.view0; - return
Show metadata panel
}> -
- /* tfs: @bcz This might need to be the data document? */}> -
e.stopPropagation()} > - {} -
- -
; + if (this.selectedDoc) { + return
Show metadata panel
}> +
+ /* tfs: @bcz This might need to be the data document? */}> +
e.stopPropagation()} > + {} +
+ +
; + } else { + return null; + } + } // @computed @@ -267,9 +276,9 @@ export class PropertiesButtons extends React.Component<{ doc: Doc }, {}> { // } render() { - if (!this.props.doc) return (null); + if (!this.selectedDoc) return (null); - const isText = this.props.doc[Doc.LayoutFieldKey(this.props.doc)] instanceof RichTextField; + const isText = this.selectedDoc[Doc.LayoutFieldKey(this.selectedDoc)] instanceof RichTextField; const considerPull = isText && this.considerGoogleDocsPull; const considerPush = isText && this.considerGoogleDocsPush; return
diff --git a/src/client/views/collections/CollectionView.scss b/src/client/views/collections/CollectionView.scss index 585f6865e..a5aef86de 100644 --- a/src/client/views/collections/CollectionView.scss +++ b/src/client/views/collections/CollectionView.scss @@ -25,40 +25,6 @@ z-index: 2; } - .collectionView-propertiesDragger { - background-color: rgb(140, 139, 139); - height: 55px; - width: 15.5px; - position: absolute; - top: 55%; - border: 1px black solid; - border-radius: 0; - border-top-left-radius: 10px; - border-bottom-left-radius: 10px; - border-right: unset; - z-index: 2; - - .collectionView-propertiesDragger-icon { - width: 10px; - height: 10px; - float: left; - margin-left: 3px; - padding-top: 19px; - } - } - - .collectionView-propertiesView { - display: flex; - flex-direction: column; - width: 200px; - height: 100%; - position: absolute; - right: 0; - top: 0; - border-left: solid 1px; - z-index: 10; - } - .collectionTimeView-treeView { display: flex; flex-direction: column; diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index 853321d3c..19a82a113 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -49,7 +49,6 @@ import { CollectionTreeView } from "./CollectionTreeView"; import './CollectionView.scss'; import CollectionMenu from './CollectionMenu'; import { SharingPermissions } from '../../util/SharingManager'; -import { PropertiesView } from './collectionFreeForm/PropertiesView'; import { DocumentView } from '../nodes/DocumentView'; const higflyout = require("@hig/flyout"); export const { anchorPoints } = higflyout; @@ -369,22 +368,9 @@ export class CollectionView extends Touchable this.props.PanelWidth() - this.propertiesWidth(); + bodyPanelWidth = () => this.props.PanelWidth(); facetWidth = () => Math.max(0, Math.min(this.props.PanelWidth() - 25, this._facetWidth)); - propertiesWidth = () => Math.max(0, Math.min(this.props.PanelWidth() - 25, this._propertiesWidth)); - - @computed get propertiesIcon() { - if (this.propertiesWidth() < 10) { - return "chevron-left"; - } else { - return "chevron-right"; - } - } - @computed get dataDoc() { return (this.props.DataDoc && this.props.Document.isTemplateForField ? Doc.GetProto(this.props.DataDoc) : this.props.Document.resolvedDataDoc ? this.props.Document : Doc.GetProto(this.props.Document)); // if the layout document has a resolvedDataDoc, then we don't want to get its parent which would be the unexpanded template @@ -505,13 +491,6 @@ export class CollectionView extends Touchable this._facetWidth = this.facetWidth() < 15 ? Math.min(this.props.PanelWidth() - 25, 200) : 0), false); } - onDown = (e: React.PointerEvent) => { - setupMoveUpEvents(this, e, action((e: PointerEvent, down: number[], delta: number[]) => { - this._propertiesWidth = this.props.PanelWidth() - Math.max(this.props.ScreenToLocalTransform().transformPoint(e.clientX, 0)[0], 0); - return false; - }), returnFalse, action(() => this._propertiesWidth = this.propertiesWidth() < 15 ? Math.min(this.props.PanelWidth() - 25, 200) : 0), false); - } - filterBackground = () => "rgba(105, 105, 105, 0.432)"; get ignoreFields() { return ["_docFilters", "_docRangeFilters"]; } // this makes the tree view collection ignore these filters (otherwise, the filters would filter themselves) @computed get scriptField() { @@ -582,23 +561,6 @@ export class CollectionView extends Touchable; } - @computed get propertiesView() { - TraceMobx(); - return !this._propertiesWidth || this.props.dontRegisterView ? (null) : -
- -
; - } - childLayoutTemplate = () => this.props.childLayoutTemplate?.() || Cast(this.props.Document.childLayoutTemplate, Doc, null); childLayoutString = this.props.childLayoutString || StrCast(this.props.Document.childLayoutString); @@ -634,15 +596,6 @@ export class CollectionView extends Touchable } {this.facetWidth() < 10 ? (null) : this.filterView} */} - - {this.props.hideFilter || this.props.Document.hideFilterView || !this.props.isSelected() && !this.props.Document.forceActive ? (null) : -
-
-
-
- } - {this.propertiesWidth() < 10 ? (null) : this.propertiesView}
); } } diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx index 5242aa8fd..5aa0066d2 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx @@ -14,121 +14,162 @@ import { returnFalse, returnOne, emptyFunction, emptyPath, returnTrue, returnZer import { Id } from "../../../../fields/FieldSymbols"; import { Transform } from "../../../util/Transform"; import { PropertiesButtons } from "../../PropertiesButtons"; +import { SelectionManager } from "../../../util/SelectionManager"; interface PropertiesViewProps { - dataDoc: Doc; - Document: Doc; width: number; height: number; renderDepth: number; ScreenToLocalTransform: () => Transform; - docView: DocumentView; } @observer export class PropertiesView extends React.Component { @computed get MAX_EMBED_HEIGHT() { return 200; } + @observable numSelected: number = SelectionManager.SelectedDocuments().length; + @computed get selectedDocumentView() { return SelectionManager.LastSelection(); } + @observable selectedDoc: Doc | undefined = this.selectedDocumentView?.props.Document; + @observable dataDoc: Doc | undefined = this.selectedDocumentView?.props.DataDoc ? this.selectedDocumentView.props.DataDoc : this.selectedDoc; - rtfWidth = () => Math.min(this.props.Document?.[WidthSym](), this.props.width - 20); - rtfHeight = () => this.rtfWidth() <= this.props.Document?.[WidthSym]() ? Math.min(this.props.Document?.[HeightSym](), this.MAX_EMBED_HEIGHT) : this.MAX_EMBED_HEIGHT; + @action + rtfWidth = () => { + if (this.selectedDoc) { + return Math.min(this.selectedDoc?.[WidthSym](), this.props.width - 20); + } else { + return 0; + } + } + @action + rtfHeight = () => { + if (this.selectedDoc) { + return this.rtfWidth() <= this.selectedDoc?.[WidthSym]() ? Math.min(this.selectedDoc?.[HeightSym](), this.MAX_EMBED_HEIGHT) : this.MAX_EMBED_HEIGHT; + } else { + return 0; + } + } + @action docWidth = () => { - const layoutDoc = this.props.Document; - const aspect = NumCast(layoutDoc._nativeHeight, layoutDoc._fitWidth ? 0 : layoutDoc[HeightSym]()) / NumCast(layoutDoc._nativeWidth, layoutDoc._fitWidth ? 1 : layoutDoc[WidthSym]()); - if (aspect) return Math.min(layoutDoc[WidthSym](), Math.min(this.MAX_EMBED_HEIGHT / aspect, this.props.width - 20)); - return NumCast(layoutDoc._nativeWidth) ? Math.min(layoutDoc[WidthSym](), this.props.width - 20) : this.props.width - 20; + if (this.selectedDoc) { + const layoutDoc = this.selectedDoc; + const aspect = NumCast(layoutDoc._nativeHeight, layoutDoc._fitWidth ? 0 : layoutDoc[HeightSym]()) / NumCast(layoutDoc._nativeWidth, layoutDoc._fitWidth ? 1 : layoutDoc[WidthSym]()); + if (aspect) return Math.min(layoutDoc[WidthSym](), Math.min(this.MAX_EMBED_HEIGHT / aspect, this.props.width - 20)); + return NumCast(layoutDoc._nativeWidth) ? Math.min(layoutDoc[WidthSym](), this.props.width - 20) : this.props.width - 20; + } else { + return 0; + } } + + @action docHeight = () => { - const layoutDoc = this.props.Document; - return Math.max(70, Math.min(this.MAX_EMBED_HEIGHT, (() => { - const aspect = NumCast(layoutDoc._nativeHeight, layoutDoc._fitWidth ? 0 : layoutDoc[HeightSym]()) / NumCast(layoutDoc._nativeWidth, layoutDoc._fitWidth ? 1 : layoutDoc[WidthSym]()); - if (aspect) return this.docWidth() * aspect; - return layoutDoc._fitWidth ? (!this.props.dataDoc._nativeHeight ? NumCast(this.props.height) : - Math.min(this.docWidth() * NumCast(layoutDoc.scrollHeight, NumCast(layoutDoc._nativeHeight)) / NumCast(layoutDoc._nativeWidth, - NumCast(this.props.height)))) : - NumCast(layoutDoc._height) ? NumCast(layoutDoc._height) : 50; - })())); + if (this.selectedDoc && this.dataDoc) { + const layoutDoc = this.selectedDoc; + return Math.max(70, Math.min(this.MAX_EMBED_HEIGHT, (() => { + const aspect = NumCast(layoutDoc._nativeHeight, layoutDoc._fitWidth ? 0 : layoutDoc[HeightSym]()) / NumCast(layoutDoc._nativeWidth, layoutDoc._fitWidth ? 1 : layoutDoc[WidthSym]()); + if (aspect) return this.docWidth() * aspect; + return layoutDoc._fitWidth ? (!this.dataDoc._nativeHeight ? NumCast(this.props.height) : + Math.min(this.docWidth() * NumCast(layoutDoc.scrollHeight, NumCast(layoutDoc._nativeHeight)) / NumCast(layoutDoc._nativeWidth, + NumCast(this.props.height)))) : + NumCast(layoutDoc._height) ? NumCast(layoutDoc._height) : 50; + })())); + } else { + return 0; + } } @computed get expandedField() { - const ids: { [key: string]: string } = {}; - const doc = this.props.dataDoc; - doc && Object.keys(doc).forEach(key => !(key in ids) && doc[key] !== ComputedField.undefined && (ids[key] = key)); + if (this.dataDoc) { + const ids: { [key: string]: string } = {}; + const doc = this.dataDoc; + doc && Object.keys(doc).forEach(key => !(key in ids) && doc[key] !== ComputedField.undefined && (ids[key] = key)); - const rows: JSX.Element[] = []; - for (const key of Object.keys(ids).slice().sort()) { - const contents = doc[key]; - let contentElement: (JSX.Element | null)[] | JSX.Element = []; - contentElement = Field.toKeyValueString(doc, key)} - SetValue={(value: string) => KeyValueBox.SetField(doc, key, value, true)} - />; + const rows: JSX.Element[] = []; + for (const key of Object.keys(ids).slice().sort()) { + const contents = doc[key]; + let contentElement: (JSX.Element | null)[] | JSX.Element = []; + contentElement = Field.toKeyValueString(doc, key)} + SetValue={(value: string) => KeyValueBox.SetField(doc, key, value, true)} + />; - rows.push(
- {key + ":"} -   - {contentElement} -
); + rows.push(
+ {key + ":"} +   + {contentElement} +
); + } + return rows; } - return rows; } @computed get layoutPreview() { - const layoutDoc = Doc.Layout(this.props.Document); - const panelHeight = StrCast(Doc.LayoutField(layoutDoc)).includes("FormattedTextBox") ? this.rtfHeight : this.docHeight; - const panelWidth = StrCast(Doc.LayoutField(layoutDoc)).includes("FormattedTextBox") ? this.rtfWidth : this.docWidth; - return
- "lightgrey"} - fitToBox={false} - FreezeDimensions={true} - NativeWidth={layoutDoc.type === - StrCast(Doc.LayoutField(layoutDoc)).includes("FormattedTextBox") ? this.rtfWidth : returnZero} - NativeHeight={layoutDoc.type === - StrCast(Doc.LayoutField(layoutDoc)).includes("FormattedTextBox") ? this.rtfHeight : returnZero} - PanelWidth={panelWidth} - PanelHeight={panelHeight} - focus={returnFalse} - ScreenToLocalTransform={this.props.ScreenToLocalTransform} - docFilters={returnEmptyFilter} - ContainingCollectionDoc={undefined} - ContainingCollectionView={undefined} - addDocument={returnFalse} - moveDocument={undefined} - removeDocument={returnFalse} - parentActive={() => false} - whenActiveChanged={emptyFunction} - addDocTab={returnFalse} - pinToPres={emptyFunction} - bringToFront={returnFalse} - ContentScaling={returnOne} - /> -
; + if (this.selectedDoc) { + const layoutDoc = Doc.Layout(this.selectedDoc); + const panelHeight = StrCast(Doc.LayoutField(layoutDoc)).includes("FormattedTextBox") ? this.rtfHeight : this.docHeight; + const panelWidth = StrCast(Doc.LayoutField(layoutDoc)).includes("FormattedTextBox") ? this.rtfWidth : this.docWidth; + return
+ "lightgrey"} + fitToBox={false} + FreezeDimensions={true} + NativeWidth={layoutDoc.type === + StrCast(Doc.LayoutField(layoutDoc)).includes("FormattedTextBox") ? this.rtfWidth : returnZero} + NativeHeight={layoutDoc.type === + StrCast(Doc.LayoutField(layoutDoc)).includes("FormattedTextBox") ? this.rtfHeight : returnZero} + PanelWidth={panelWidth} + PanelHeight={panelHeight} + focus={returnFalse} + ScreenToLocalTransform={this.props.ScreenToLocalTransform} + docFilters={returnEmptyFilter} + ContainingCollectionDoc={undefined} + ContainingCollectionView={undefined} + addDocument={returnFalse} + moveDocument={undefined} + removeDocument={returnFalse} + parentActive={() => false} + whenActiveChanged={emptyFunction} + addDocTab={returnFalse} + pinToPres={emptyFunction} + bringToFront={returnFalse} + ContentScaling={returnOne} + /> +
; + } else { + return null; + } } render() { + + if (!this.selectedDocumentView || !this.selectedDoc || !this.dataDoc) { + return
+
+ No Document Selected +
; + } + return
Properties
- Collection + {this.dataDoc.title}
Settings
- +
-- cgit v1.2.3-70-g09d2 From 05c46464ba69e889145d8a32320cd7f130665ee1 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Thu, 23 Jul 2020 13:25:42 -0500 Subject: selection changes --- src/client/util/CurrentUserUtils.ts | 47 ++++++++++++++++++++++ src/client/util/SelectionManager.ts | 23 +---------- src/client/views/MainView.tsx | 45 ++------------------- .../collectionFreeForm/PropertiesView.tsx | 12 ++++-- 4 files changed, 59 insertions(+), 68 deletions(-) (limited to 'src/client/util') diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 1dd25ae30..54d81a9fa 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -493,6 +493,52 @@ export class CurrentUserUtils { return doc.myItemCreators as Doc; } + static 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()' }, + ]; + } + + static setupMenuButtons(doc: Doc) { + if (doc.menuStackBtns === undefined) { + const buttons = CurrentUserUtils.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, + })); + + doc.menuStackBtns = new PrefetchProxy(Docs.Create.MasonryDocument(menuBtns, { + _xMargin: 0, _autoHeight: true, _width: 100, _columnWidth: 60, ignoreClick: true, lockedPosition: true, _chromeStatus: "disabled", + })); + } + return doc.menuStackBtns as Doc; + } + + static setupMenuPanel(doc: Doc) { + if (doc.menuStack === undefined) { + const menuBtns = CurrentUserUtils.setupMenuButtons(doc); + doc.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 doc.menuStack; + } + + // Sets up mobile menu if it is undefined creates a new one, otherwise returns existing menu static setupActiveMobileMenu(doc: Doc) { if (doc.activeMobileMenu === undefined) { @@ -894,6 +940,7 @@ export class CurrentUserUtils { this.setupDocTemplates(doc); // sets up the template menu of templates this.setupRightSidebar(doc); // sets up the right sidebar collection for mobile upload documents and sharing this.setupActiveMobileMenu(doc); // sets up the current mobile menu for Dash Mobile + this.setupMenuPanel(doc); this.setupOverlays(doc); // documents in overlay layer this.setupDockedButtons(doc); // the bottom bar of font icons this.setupDefaultPresentation(doc); // presentation that's initially triggered diff --git a/src/client/util/SelectionManager.ts b/src/client/util/SelectionManager.ts index 6fb758eac..ec875fe4b 100644 --- a/src/client/util/SelectionManager.ts +++ b/src/client/util/SelectionManager.ts @@ -13,13 +13,9 @@ export namespace SelectionManager { @observable IsDragging: boolean = false; SelectedDocuments: ObservableMap = new ObservableMap(); - @observable public lastSelection: DocumentView | undefined; - @action SelectDoc(docView: DocumentView, ctrlPressed: boolean): void { - this.lastSelection = docView; - // if doc is not in SelectedDocuments, add it if (!manager.SelectedDocuments.get(docView)) { if (!ctrlPressed) { @@ -39,14 +35,6 @@ export namespace SelectionManager { @action DeselectDoc(docView: DocumentView): void { - if (this.lastSelection === docView) { - const list = Array.from(manager.SelectedDocuments.keys()); - if (list.length > 0) { - this.lastSelection = list[list.length - 1]; - } else { - this.lastSelection = undefined; - } - } if (manager.SelectedDocuments.get(docView)) { manager.SelectedDocuments.delete(docView); docView.props.whenActiveChanged(false); @@ -55,16 +43,11 @@ export namespace SelectionManager { } @action DeselectAll(): void { - this.lastSelection = undefined; + Array.from(manager.SelectedDocuments.keys()).map(dv => dv.props.whenActiveChanged(false)); manager.SelectedDocuments.clear(); Doc.UserDoc().activeSelection = new List([]); } - - @action - getLast(): DocumentView | undefined { - return this.lastSelection; - } } const manager = new Manager(); @@ -76,10 +59,6 @@ export namespace SelectionManager { manager.SelectDoc(docView, ctrlPressed); } - export function LastSelection(): DocumentView | undefined { - return manager.getLast(); - } - // computed functions, such as used in IsSelected generate errors if they're called outside of a // reaction context. Specifying the context with 'outsideReaction' allows an efficiency feature // to avoid unnecessary mobx invalidations when running inside a reaction. diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 9e8fa545f..8113ad698 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -456,48 +456,11 @@ export class MainView extends React.Component { {this.docButtons}
; } - 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; + @computed get menuPanel() { return
; } - @observable menuPanel: any; - // @computed get menuPanel() { // return
// - - // - - // - - // - - // - - // - - // - - // - - // + // 80} + // PanelHeight={this.getContentsHeight} + // renderDepth={0} + // focus={emptyFunction} + // backgroundColor={this.defaultBackgroundColors} + // parentActive={returnTrue} + // whenActiveChanged={emptyFunction} + // bringToFront={emptyFunction} + // docFilters={returnEmptyFilter} + // ContainingCollectionView={undefined} + // ContainingCollectionDoc={undefined} + // relative={true} + // /> //
; // } + @computed get menuPanel() { + return
+ + + + + + + + + + + + + + + + + +
; + } + @action selectPanel = (str: string) => { if (this.panelContent === str && this.flyoutWidth !== 0) { @@ -623,23 +632,24 @@ export class MainView extends React.Component { @computed get propertiesView() { TraceMobx(); - return this._propertiesWidth === 0 ? (null) : -
- -
; + return
+ +
; } @computed get mainContent() { const n = (RichTextMenu.Instance?.Pinned ? 1 : 0) + (CollectionMenu.Instance?.Pinned ? 1 : 0); const height = `calc(100% - ${n * Number(ANTIMODEMENU_HEIGHT.replace("px", ""))}px)`; + + const rightFlyout = this.selectedDocumentView ? this._propertiesWidth - 1 : this.propertiesWidth() > 10 ? 151.5 : 0; return !this.userDoc || !(this.sidebarContent instanceof Doc) ? (null) : (
+ style={{ right: rightFlyout, top: "45%" }}>
diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.scss b/src/client/views/collections/collectionFreeForm/PropertiesView.scss index 98eae1ac7..f64ef2211 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.scss +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.scss @@ -2,7 +2,6 @@ background-color: rgb(205, 205, 205); height: 100%; - z-index: 1; font-family: "Noto Sans"; cursor: auto; diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 998c6798e..02fe60255 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -100,6 +100,7 @@ export interface DocumentViewProps { layoutKey?: string; radialMenu?: String[]; display?: string; + relative?: boolean; } @observer @@ -1021,8 +1022,9 @@ export class DocumentView extends DocComponent(Docu } childScaling = () => (this.layoutDoc._fitWidth ? this.props.PanelWidth() / this.nativeWidth : this.props.ContentScaling()); @computed get contents() { + const pos = this.props.relative ? "relative " : "absolute"; TraceMobx(); - return (
+ return (
(Docu } @computed get innards() { TraceMobx(); + const pos = this.props.relative ? "relative" : undefined; if (this.props.treeViewDoc && !this.props.LayoutTemplateString?.includes("LinkAnchorBox")) { // this happens when the document is a tree view label (but not an anchor dot) - return
+ return
{StrCast(this.props.Document.title)} {this.allAnchors}
; @@ -1235,7 +1241,7 @@ export class DocumentView extends DocComponent(Docu background: finalColor, opacity: finalOpacity, fontFamily: StrCast(this.Document._fontFamily, "inherit"), - fontSize: Cast(this.Document._fontSize, "string", null) + fontSize: Cast(this.Document._fontSize, "string", null), }}> {this.onClickHandler && this.props.ContainingCollectionView?.props.Document._viewType === CollectionViewType.Time ? <> {this.innards} -- cgit v1.2.3-70-g09d2 From c85adfb7011d5d7a785086e8ea7d389272d80a81 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Thu, 23 Jul 2020 19:00:37 -0500 Subject: tree view fix --- src/client/util/CurrentUserUtils.ts | 12 ++++++------ src/client/views/collections/CollectionTreeView.tsx | 6 ++++-- 2 files changed, 10 insertions(+), 8 deletions(-) (limited to 'src/client/util') diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index d41aa4b58..cc9f6aad7 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -696,7 +696,7 @@ export class CurrentUserUtils { doc.myWorkspaces === undefined; if (doc.myWorkspaces === undefined) { doc.myWorkspaces = new PrefetchProxy(Docs.Create.TreeDocument([], { - title: "WORKSPACES", _height: 100, forceActive: true, boxShadow: "0 0", lockedPosition: true, + title: "WORKSPACES", _height: 100, forceActive: true, boxShadow: "0 0", lockedPosition: true, treeViewOpen: true, })); } const newWorkspace = ScriptField.MakeScript(`createNewWorkspace()`); @@ -707,7 +707,7 @@ export class CurrentUserUtils { CurrentUserUtils.workspaceStack = new PrefetchProxy(Docs.Create.TreeDocument([workspaces], { title: " ", _xMargin: 5, _yMargin: 5, _gridGap: 5, forceActive: true, childDropAction: "alias", - treeViewTruncateTitleWidth: 150, hideFilterView: true, treeViewPreventOpen: false, + treeViewTruncateTitleWidth: 150, hideFilterView: true, treeViewPreventOpen: false, treeViewOpen: true, lockedPosition: true, boxShadow: "0 0", dontRegisterChildViews: true, targetDropAction: "same" })) as any as Doc; @@ -718,7 +718,7 @@ export class CurrentUserUtils { if (doc.myCatalog === undefined) { doc.myCatalog = new PrefetchProxy(Docs.Create.SchemaDocument([], [], { title: "CATALOG", _height: 1000, _fitWidth: true, forceActive: true, boxShadow: "0 0", treeViewPreventOpen: false, - childDropAction: "alias", targetDropAction: "same", stayInCollection: true, + childDropAction: "alias", targetDropAction: "same", stayInCollection: true, treeViewOpen: true, })); } @@ -726,7 +726,7 @@ export class CurrentUserUtils { CurrentUserUtils.catalogStack = new PrefetchProxy(Docs.Create.TreeDocument([catalog], { title: " ", _xMargin: 5, _yMargin: 5, _gridGap: 5, forceActive: true, childDropAction: "alias", - treeViewTruncateTitleWidth: 150, hideFilterView: true, treeViewPreventOpen: false, + treeViewTruncateTitleWidth: 150, hideFilterView: true, treeViewPreventOpen: false, treeViewOpen: true, lockedPosition: true, boxShadow: "0 0", dontRegisterChildViews: true, targetDropAction: "same" })) as any as Doc; @@ -737,7 +737,7 @@ export class CurrentUserUtils { doc.myRecentlyClosed === undefined; if (doc.myRecentlyClosed === undefined) { doc.myRecentlyClosed = new PrefetchProxy(Docs.Create.TreeDocument([], { - title: "RECENTLY CLOSED", _height: 75, forceActive: true, boxShadow: "0 0", treeViewPreventOpen: true, stayInCollection: true, + title: "RECENTLY CLOSED", _height: 75, forceActive: true, boxShadow: "0 0", treeViewPreventOpen: false, treeViewOpen: true, stayInCollection: true, })); } // this is equivalent to using PrefetchProxies to make sure the recentlyClosed doc is ready @@ -750,7 +750,7 @@ export class CurrentUserUtils { CurrentUserUtils.closedStack = new PrefetchProxy(Docs.Create.TreeDocument([recentlyClosed], { title: " ", _xMargin: 5, _yMargin: 5, _gridGap: 5, forceActive: true, childDropAction: "alias", - treeViewTruncateTitleWidth: 150, hideFilterView: true, treeViewPreventOpen: false, + treeViewTruncateTitleWidth: 150, hideFilterView: true, treeViewPreventOpen: false, treeViewOpen: true, lockedPosition: true, boxShadow: "0 0", dontRegisterChildViews: true, targetDropAction: "same" })) as any as Doc; diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx index c36592c1b..44414fa2b 100644 --- a/src/client/views/collections/CollectionTreeView.tsx +++ b/src/client/views/collections/CollectionTreeView.tsx @@ -64,7 +64,6 @@ export interface TreeViewProps { onCheckedClick?: () => ScriptField; onChildClick?: () => ScriptField; ignoreFields?: string[]; - alwaysOpen?: boolean; } @observer @@ -91,7 +90,10 @@ class TreeView extends React.Component { get displayName() { return "TreeView(" + this.doc.title + ")"; } // this makes mobx trace() statements more descriptive get defaultExpandedView() { return this.childDocs ? this.fieldKey : StrCast(this.doc.defaultExpandedView, this.noviceMode ? "layout" : "fields"); } @observable _overrideTreeViewOpen = false; // override of the treeViewOpen field allowing the display state to be independent of the document's state - set treeViewOpen(c: boolean) { if (this.props.treeViewPreventOpen) this._overrideTreeViewOpen = c; else this.doc.treeViewOpen = this._overrideTreeViewOpen = c; } + set treeViewOpen(c: boolean) { + if (this.props.treeViewPreventOpen) this._overrideTreeViewOpen = c; + else this.doc.treeViewOpen = this._overrideTreeViewOpen = c; + } @computed get treeViewOpen() { return (!this.props.treeViewPreventOpen && !this.doc.treeViewPreventOpen && BoolCast(this.doc.treeViewOpen)) || this._overrideTreeViewOpen; } @computed get treeViewExpandedView() { return StrCast(this.doc.treeViewExpandedView, this.defaultExpandedView); } @computed get MAX_EMBED_HEIGHT() { return NumCast(this.props.containingCollection.maxEmbedHeight, 200); } -- cgit v1.2.3-70-g09d2 From b10f96c6a8b3187707b6d7356e7b0fea9b8b6e72 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Wed, 29 Jul 2020 15:31:40 -0500 Subject: tried making documents into buttons --- src/client/documents/DocumentTypes.ts | 1 + src/client/documents/Documents.ts | 8 + src/client/util/CurrentUserUtils.ts | 30 +-- src/client/views/MainView.scss | 26 +-- src/client/views/MainView.tsx | 253 +++++++++++++----------- src/client/views/PropertiesButtons.tsx | 4 +- src/client/views/nodes/DocumentContentsView.tsx | 3 +- src/client/views/nodes/MenuIconBox.scss | 49 +++++ src/client/views/nodes/MenuIconBox.tsx | 41 ++++ 9 files changed, 272 insertions(+), 143 deletions(-) create mode 100644 src/client/views/nodes/MenuIconBox.scss create mode 100644 src/client/views/nodes/MenuIconBox.tsx (limited to 'src/client/util') diff --git a/src/client/documents/DocumentTypes.ts b/src/client/documents/DocumentTypes.ts index 7578b7df0..e98539498 100644 --- a/src/client/documents/DocumentTypes.ts +++ b/src/client/documents/DocumentTypes.ts @@ -13,6 +13,7 @@ export enum DocumentType { INK = "ink", // ink stroke SCREENSHOT = "screenshot", // view of a desktop application FONTICON = "fonticonbox", // font icon + MENUICON = "menuiconbox", QUERY = "query", // search query LABEL = "label", // simple text label BUTTON = "button", // onClick button diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 2cd781a53..1a5d4f3cb 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -31,6 +31,7 @@ import { ColorBox } from "../views/nodes/ColorBox"; import { ComparisonBox } from "../views/nodes/ComparisonBox"; import { DocHolderBox } from "../views/nodes/DocHolderBox"; import { FontIconBox } from "../views/nodes/FontIconBox"; +import { MenuIconBox } from "../views/nodes/MenuIconBox"; import { FormattedTextBox } from "../views/nodes/formattedText/FormattedTextBox"; import { ImageBox } from "../views/nodes/ImageBox"; import { KeyValueBox } from "../views/nodes/KeyValueBox"; @@ -301,6 +302,9 @@ export namespace Docs { layout: { view: FontIconBox, dataField: defaultDataKey }, options: { _width: 40, _height: 40, borderRounding: "100%" }, }], + [DocumentType.MENUICON, { + layout: { view: MenuIconBox, dataField: defaultDataKey }, + }], [DocumentType.RECOMMENDATION, { layout: { view: RecommendationsBox, dataField: defaultDataKey }, options: { _width: 200, _height: 200 }, @@ -791,6 +795,10 @@ export namespace Docs { return InstanceFromProto(Prototypes.get(DocumentType.FONTICON), undefined, { hideLinkButton: true, ...(options || {}) }); } + export function MenuIconDocument(options?: DocumentOptions) { + return InstanceFromProto(Prototypes.get(DocumentType.MENUICON), undefined, { hideLinkButton: true, ...(options || {}) }); + } + export function PresElementBoxDocument(options?: DocumentOptions) { return InstanceFromProto(Prototypes.get(DocumentType.PRESELEMENT), undefined, { ...(options || {}) }); } diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index e5582aa0a..442be98d2 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -48,6 +48,8 @@ export class CurrentUserUtils { @observable public static closedStack: any | undefined; @observable public static searchStack: any | undefined; + @observable public static panelContent: string = "none"; + // sets up the default User Templates - slideView, queryView, descriptionView static setupUserTemplateButtons(doc: Doc) { if (doc["template-button-query"] === undefined) { @@ -503,17 +505,16 @@ export class CurrentUserUtils { } static menuBtnDescriptions(): { - title: string, icon: string, click: string, backgroundColor?: string, + title: string, icon: string, click: string, }[] { return [ - { title: "Workspace", icon: "desktop", click: 'MainView.selectPanel("workspace")' }, - { title: "Catalog", icon: "file", click: 'MainView.selectPanel("catalog")' }, - { title: "Recently Deleted", icon: "trash-alt", click: 'MainView.selectPanel("deleted")' }, - { title: "Import", icon: "upload", click: 'this.selectPanel("upload")' }, + { title: "Workspace", icon: "desktop", click: 'scriptContext.selectMenu("workspace")' }, + { title: "Catalog", icon: "file", click: 'scriptContext.selectMenu("catalog")' }, + { title: "Archive", icon: "archive", click: 'scriptContext.selectMenu("deleted")' }, + { title: "Import", icon: "upload", click: 'scriptContext.selectMenu("upload")' }, { title: "Sharing", icon: "users", click: 'GroupManager.Instance.open()' }, - { title: "Tools", icon: "wrench", click: 'MainView.selectPanel("tools")' }, - { title: "Search", icon: "search", click: 'MainView.selectPanel("search")' }, - { title: "Help", icon: "question-circle", click: 'MainView.selectPanel("help")' }, + { title: "Tools", icon: "wrench", click: 'scriptContext.selectMenu("tools")' }, + { title: "Help", icon: "question-circle", click: 'scriptContext.selectMenu("help")' }, { title: "Settings", icon: "cog", click: 'SettingsManager.Instance.open()' }, ]; } @@ -521,16 +522,17 @@ export class CurrentUserUtils { static setupMenuButtons(doc: Doc) { if (doc.menuStackBtns === undefined) { const buttons = CurrentUserUtils.menuBtnDescriptions(); - const menuBtns = buttons.map(({ title, icon, click, backgroundColor }) => Docs.Create.FontIconDocument({ - _width: 40, _height: 40, + const menuBtns = buttons.map(({ title, icon, click }) => Docs.Create.MenuIconDocument({ icon, title, - onClick: click ? ScriptField.MakeScript(click) : undefined, - backgroundColor, + stayInCollection: true, + _width: 60, + _height: 70, + onClick: ScriptField.MakeScript(click), })); doc.menuStackBtns = new PrefetchProxy(Docs.Create.MasonryDocument(menuBtns, { - _xMargin: 0, _autoHeight: true, _width: 80, _columnWidth: 50, lockedPosition: true, _chromeStatus: "disabled", + _xMargin: 0, _autoHeight: false, _width: 60, _columnWidth: 60, lockedPosition: true, _chromeStatus: "disabled", })); } return doc.menuStackBtns as Doc; @@ -542,7 +544,7 @@ export class CurrentUserUtils { const menuBtns = CurrentUserUtils.setupMenuButtons(doc); doc.menuStack = new PrefetchProxy(Docs.Create.StackingDocument([menuBtns], { _yMargin: 0, _autoHeight: true, _xMargin: 0, - _width: 80, lockedPosition: true, _chromeStatus: "disabled", + _width: 60, lockedPosition: true, _chromeStatus: "disabled", })) as any as Doc; } return doc.menuStack; diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss index 7318d451b..8bf38ebe9 100644 --- a/src/client/views/MainView.scss +++ b/src/client/views/MainView.scss @@ -155,8 +155,9 @@ .mainView-menuPanel { - max-width: 60px; + width: 60px; background-color: black; + height: 100%; //overflow-y: scroll; //overflow-x: hidden; @@ -165,22 +166,23 @@ padding: 7px; padding-left: 7px; width: 100%; + .mainView-menuPanel-button-wrap { - width: 45px; - /* padding: 5px; */ - touch-action: none; - background: black; - transform-origin: top left; - /* margin-bottom: 5px; */ - margin-top: 5px; - margin-right: 25px; - border-radius: 8px; - + width: 45px; + /* padding: 5px; */ + touch-action: none; + background: black; + transform-origin: top left; + /* margin-bottom: 5px; */ + margin-top: 5px; + margin-right: 25px; + border-radius: 8px; + &:hover { background: rgb(61, 61, 61); cursor: pointer; } - } + } } .mainView-menuPanel-button-label { diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 891d08214..5f7f7ca03 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -381,6 +381,7 @@ export class MainView extends React.Component { onPointerDown = (e: React.PointerEvent) => { if (this._flyoutTranslate) { this.panelContent = "none"; + CurrentUserUtils.panelContent = "none"; this._canClick = true; this._flyoutSizeOnDown = e.clientX; document.removeEventListener("pointermove", this.onPointerMove); @@ -462,125 +463,125 @@ export class MainView extends React.Component { {this.docButtons}
; } - // @computed get menuPanel() { - - // return
- // 80} - // PanelHeight={this.getContentsHeight} - // renderDepth={0} - // focus={emptyFunction} - // backgroundColor={this.defaultBackgroundColors} - // parentActive={returnTrue} - // whenActiveChanged={emptyFunction} - // bringToFront={emptyFunction} - // docFilters={returnEmptyFilter} - // ContainingCollectionView={undefined} - // ContainingCollectionDoc={undefined} - // relative={true} - // scriptContext={this} - // /> - //
; - // } - @computed get menuPanel() { - return
-
-
this.selectPanel("workspace")}> - -
Workspace
-
-
- -
-
this.selectPanel("catalog")}> - -
Catalog
-
-
- -
-
this.selectPanel("deleted")}> - -
Recently Used
-
-
- -
-
this.selectPanel("upload")}> - -
Import
-
-
- -
-
this.selectPanel("sharing")} - onClick={() => GroupManager.Instance.open()}> - -
Sharing
-
-
-
-
this.selectPanel("tools")} - style={{ - backgroundColor: this.panelContent === "tools" ? "lightgrey" : "", - }}> - -
Tools
-
-
- -
-
this.selectPanel("help")} > - -
Help
-
-
- -
-
this.selectPanel("settings")} - onClick={() => SettingsManager.Instance.open()}> - -
Settings
-
-
+ return
+ 80} + PanelHeight={this.getContentsHeight} + renderDepth={0} + focus={emptyFunction} + backgroundColor={this.defaultBackgroundColors} + parentActive={returnTrue} + whenActiveChanged={emptyFunction} + bringToFront={emptyFunction} + docFilters={returnEmptyFilter} + ContainingCollectionView={undefined} + ContainingCollectionDoc={undefined} + relative={true} + scriptContext={this} + />
; } + // @computed get menuPanel() { + // return
+ //
+ //
this.selectPanel("workspace")}> + // + //
Workspace
+ //
+ //
+ + //
+ //
this.selectPanel("catalog")}> + // + //
Catalog
+ //
+ //
+ + //
+ //
this.selectPanel("deleted")}> + // + //
Recently Used
+ //
+ //
+ + //
+ //
this.selectPanel("upload")}> + // + //
Import
+ //
+ //
+ + //
+ //
this.selectPanel("sharing")} + // onClick={() => GroupManager.Instance.open()}> + // + //
Sharing
+ //
+ //
+ + //
+ //
this.selectPanel("tools")} + // style={{ + // backgroundColor: this.panelContent === "tools" ? "lightgrey" : "", + // }}> + // + //
Tools
+ //
+ //
+ + //
+ //
this.selectPanel("help")} > + // + //
Help
+ //
+ //
+ + //
+ //
this.selectPanel("settings")} + // onClick={() => SettingsManager.Instance.open()}> + // + //
Settings
+ //
+ //
+ //
; + // } + @action selectPanel = (str: string) => { if (this.panelContent === str && this.flyoutWidth !== 0) { @@ -605,6 +606,30 @@ export class MainView extends React.Component { return true; } + @action + selectMenu = (str: string) => { + if (CurrentUserUtils.panelContent === str && this.flyoutWidth !== 0) { + CurrentUserUtils.panelContent = "none"; + this.flyoutWidth = 0; + } else { + CurrentUserUtils.panelContent = str; + MainView.expandFlyout(); + if (str === "tools") { + CurrentUserUtils.toolsBtn; + this.sidebarContent.proto = CurrentUserUtils.toolsStack; + } else if (str === "workspace") { + this.sidebarContent.proto = CurrentUserUtils.workspaceStack; + } else if (str === "catalog") { + this.sidebarContent.proto = CurrentUserUtils.catalogStack; + } else if (str === "deleted") { + this.sidebarContent.proto = CurrentUserUtils.closedStack; + } else if (str === "search") { + this.sidebarContent.proto = CurrentUserUtils.searchStack; + } + } + return true; + } + @action onDown = (e: React.PointerEvent) => { setupMoveUpEvents(this, e, action((e: PointerEvent, down: number[], delta: number[]) => { diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx index eecf670e6..3113d8cb4 100644 --- a/src/client/views/PropertiesButtons.tsx +++ b/src/client/views/PropertiesButtons.tsx @@ -392,10 +392,10 @@ export class PropertiesButtons extends React.Component<{}, {}> { this.selectedDocumentView?.toggleDetail(); } else if (value === "linkInPlace") { this.selectedDocumentView?.noOnClick(); - this.selectedDocumentView?.toggleFollowInPlace(); + this.selectedDocumentView?.toggleFollowLink("inPlace", true, false); } else if (value === "linkOnRight") { this.selectedDocumentView?.noOnClick(); - this.selectedDocumentView?.toggleFollowOnRight(); + this.selectedDocumentView?.toggleFollowLink("onRight", false, false); } } diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx index 47dc0a773..d72133cb9 100644 --- a/src/client/views/nodes/DocumentContentsView.tsx +++ b/src/client/views/nodes/DocumentContentsView.tsx @@ -18,6 +18,7 @@ import { DocHolderBox } from "./DocHolderBox"; import { DocumentViewProps } from "./DocumentView"; import "./DocumentView.scss"; import { FontIconBox } from "./FontIconBox"; +import { MenuIconBox } from "./MenuIconBox"; import { FieldView, FieldViewProps } from "./FieldView"; import { FormattedTextBox } from "./formattedText/FormattedTextBox"; import { ImageBox } from "./ImageBox"; @@ -190,7 +191,7 @@ export class DocumentContentsView extends React.Component; +const MenuIconDocument = makeInterface(MenuIconSchema); +@observer +export class MenuIconBox extends DocComponent(MenuIconDocument) { + public static LayoutString(fieldKey: string) { return FieldView.LayoutString(MenuIconBox, fieldKey); } + _ref: React.RefObject = React.createRef(); + + render() { + + const menuBTN =
+
+ +
{this.dataDoc.title}
+
+
; + + return menuBTN; + } +} \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 31685e36d1f7e6a95fd5d65c55562f51bfe723e1 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Thu, 30 Jul 2020 01:31:32 -0400 Subject: fixed leftsidebar menu buttons --- src/client/util/CurrentUserUtils.ts | 49 ++++------ src/client/views/MainView.tsx | 103 +++++++-------------- .../views/collections/CollectionStackingView.tsx | 1 + .../CollectionStackingViewFieldColumn.tsx | 2 +- .../views/nodes/ContentFittingDocumentView.tsx | 3 + src/client/views/nodes/DocumentView.tsx | 1 + src/client/views/nodes/FieldView.tsx | 1 + src/client/views/nodes/MenuIconBox.tsx | 22 ++--- 8 files changed, 69 insertions(+), 113 deletions(-) (limited to 'src/client/util') diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 442be98d2..34e732500 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -48,8 +48,6 @@ export class CurrentUserUtils { @observable public static closedStack: any | undefined; @observable public static searchStack: any | undefined; - @observable public static panelContent: string = "none"; - // sets up the default User Templates - slideView, queryView, descriptionView static setupUserTemplateButtons(doc: Doc) { if (doc["template-button-query"] === undefined) { @@ -508,46 +506,39 @@ export class CurrentUserUtils { title: string, icon: string, click: string, }[] { return [ - { title: "Workspace", icon: "desktop", click: 'scriptContext.selectMenu("workspace")' }, - { title: "Catalog", icon: "file", click: 'scriptContext.selectMenu("catalog")' }, + { title: "Workspace", icon: "desktop", click: 'scriptContext.selectMenu("Workspace")' }, + { title: "Catalog", icon: "file", click: 'scriptContext.selectMenu("Catalog")' }, { title: "Archive", icon: "archive", click: 'scriptContext.selectMenu("deleted")' }, - { title: "Import", icon: "upload", click: 'scriptContext.selectMenu("upload")' }, + { title: "Import", icon: "upload", click: 'scriptContext.selectMenu("Import")' }, { title: "Sharing", icon: "users", click: 'GroupManager.Instance.open()' }, - { title: "Tools", icon: "wrench", click: 'scriptContext.selectMenu("tools")' }, - { title: "Help", icon: "question-circle", click: 'scriptContext.selectMenu("help")' }, + { title: "Tools", icon: "wrench", click: 'scriptContext.selectMenu("Tools")' }, + { title: "Help", icon: "question-circle", click: 'scriptContext.selectMenu("Help")' }, { title: "Settings", icon: "cog", click: 'SettingsManager.Instance.open()' }, ]; } - static setupMenuButtons(doc: Doc) { - if (doc.menuStackBtns === undefined) { + static setupMenuPanel(doc: Doc) { + if (doc.menuStack === undefined) { const buttons = CurrentUserUtils.menuBtnDescriptions(); const menuBtns = buttons.map(({ title, icon, click }) => Docs.Create.MenuIconDocument({ icon, title, + _backgroundColor: "black", stayInCollection: true, _width: 60, - _height: 70, - onClick: ScriptField.MakeScript(click), + _height: 60, + onClick: ScriptField.MakeScript(click, { scriptContext: "any" }), })); - doc.menuStackBtns = new PrefetchProxy(Docs.Create.MasonryDocument(menuBtns, { - _xMargin: 0, _autoHeight: false, _width: 60, _columnWidth: 60, lockedPosition: true, _chromeStatus: "disabled", + doc.menuStack = new PrefetchProxy(Docs.Create.StackingDocument(menuBtns, { + title: "menuItemPanel", + _backgroundColor: "black", + _gridGap: 0, + _yMargin: 0, + _yPadding: 0, _xMargin: 0, _autoHeight: false, _width: 60, _columnWidth: 60, lockedPosition: true, _chromeStatus: "disabled", })); } - return doc.menuStackBtns as Doc; - } - - static setupMenuPanel(doc: Doc) { - doc.menuStack = undefined; - if (doc.menuStack === undefined) { - const menuBtns = CurrentUserUtils.setupMenuButtons(doc); - doc.menuStack = new PrefetchProxy(Docs.Create.StackingDocument([menuBtns], { - _yMargin: 0, _autoHeight: true, _xMargin: 0, - _width: 60, lockedPosition: true, _chromeStatus: "disabled", - })) as any as Doc; - } - return doc.menuStack; + return doc.menuStack as Doc; } @@ -696,9 +687,9 @@ export class CurrentUserUtils { onClick: ScriptField.MakeScript("this.targetContainer.proto = this.sourcePanel"), })); } - (doc["tabs-button-tools"] as Doc).sourcePanel; // prefetch sourcePanel + (doc["tabs-button-tools"] as any as Doc).sourcePanel; // prefetch sourcePanel - return doc["tabs-button-tools"] as Doc; + return doc["tabs-button-tools"] as any as Doc; } static setupWorkspaces(doc: Doc) { @@ -808,7 +799,7 @@ export class CurrentUserUtils { })); CurrentUserUtils.searchStack = new PrefetchProxy(Docs.Create.QueryDocument({ title: "search stack", })) as any as Doc; } - return doc["tabs-button-search"] as Doc; + return doc["tabs-button-search"] as any as Doc; } static setupSidebarContainer(doc: Doc) { diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 5f7f7ca03..27d1da389 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -1,7 +1,6 @@ import { library } from '@fortawesome/fontawesome-svg-core'; import { faHireAHelper } from '@fortawesome/free-brands-svg-icons'; import * as fa from '@fortawesome/free-solid-svg-icons'; -import { ANTIMODEMENU_HEIGHT } from './globalCssVariables.scss'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { action, computed, configure, observable, reaction, runInAction } from 'mobx'; import { observer } from 'mobx-react'; @@ -12,57 +11,54 @@ import { Doc, DocListCast, Field, Opt } from '../../fields/Doc'; import { Id } from '../../fields/FieldSymbols'; import { List } from '../../fields/List'; import { listSpec } from '../../fields/Schema'; -import { BoolCast, Cast, FieldValue, StrCast, NumCast } from '../../fields/Types'; +import { ScriptField } from '../../fields/ScriptField'; +import { BoolCast, Cast, FieldValue, StrCast } from '../../fields/Types'; import { TraceMobx } from '../../fields/util'; -import { CurrentUserUtils } from '../util/CurrentUserUtils'; -import { emptyFunction, emptyPath, returnFalse, returnOne, returnZero, returnTrue, Utils, returnEmptyFilter, setupMoveUpEvents } from '../../Utils'; +import { emptyFunction, emptyPath, returnEmptyFilter, returnFalse, returnOne, returnTrue, returnZero, setupMoveUpEvents, Utils } from '../../Utils'; import GoogleAuthenticationManager from '../apis/GoogleAuthenticationManager'; +import HypothesisAuthenticationManager from '../apis/HypothesisAuthenticationManager'; import { DocServer } from '../DocServer'; import { Docs, DocumentOptions } from '../documents/Documents'; import { DocumentType } from '../documents/DocumentTypes'; +import { CurrentUserUtils } from '../util/CurrentUserUtils'; +import { DocumentManager } from '../util/DocumentManager'; +import GroupManager from '../util/GroupManager'; import { HistoryUtil } from '../util/History'; -import RichTextMenu from './nodes/formattedText/RichTextMenu'; import { Scripting } from '../util/Scripting'; +import { SelectionManager } from '../util/SelectionManager'; import SettingsManager from '../util/SettingsManager'; -import GroupManager from '../util/GroupManager'; import SharingManager from '../util/SharingManager'; +import { SnappingManager } from '../util/SnappingManager'; import { Transform } from '../util/Transform'; +import { TimelineMenu } from './animationtimeline/TimelineMenu'; import { CollectionDockingView } from './collections/CollectionDockingView'; +import FormatShapePane from "./collections/collectionFreeForm/FormatShapePane"; import MarqueeOptionsMenu from './collections/collectionFreeForm/MarqueeOptionsMenu'; +import { PropertiesView } from './collections/collectionFreeForm/PropertiesView'; import { CollectionLinearView } from './collections/CollectionLinearView'; +import CollectionMenu from './collections/CollectionMenu'; import { CollectionView, CollectionViewType } from './collections/CollectionView'; import { ContextMenu } from './ContextMenu'; import { DictationOverlay } from './DictationOverlay'; import { DocumentDecorations } from './DocumentDecorations'; import GestureOverlay from './GestureOverlay'; +import { ANTIMODEMENU_HEIGHT } from './globalCssVariables.scss'; import KeyManager from './GlobalKeyHandler'; +import { LinkMenu } from './linking/LinkMenu'; import "./MainView.scss"; import { MainViewNotifs } from './MainViewNotifs'; import { AudioBox } from './nodes/AudioBox'; +import { DocumentLinksButton } from './nodes/DocumentLinksButton'; import { DocumentView } from './nodes/DocumentView'; +import { FormattedTextBox } from './nodes/formattedText/FormattedTextBox'; +import RichTextMenu from './nodes/formattedText/RichTextMenu'; +import { LinkDescriptionPopup } from './nodes/LinkDescriptionPopup'; +import { LinkDocPreview } from './nodes/LinkDocPreview'; import { RadialMenu } from './nodes/RadialMenu'; +import { TaskCompletionBox } from './nodes/TaskCompletedBox'; import { OverlayView } from './OverlayView'; import PDFMenu from './pdf/PDFMenu'; import { PreviewCursor } from './PreviewCursor'; -import { ScriptField, ComputedField } from '../../fields/ScriptField'; -import { TimelineMenu } from './animationtimeline/TimelineMenu'; -import { SnappingManager } from '../util/SnappingManager'; -import { FormattedTextBox } from './nodes/formattedText/FormattedTextBox'; -import { DocumentManager } from '../util/DocumentManager'; -import { DocumentLinksButton } from './nodes/DocumentLinksButton'; -import { LinkMenu } from './linking/LinkMenu'; -import { LinkDocPreview } from './nodes/LinkDocPreview'; -import { TaskCompletionBox } from './nodes/TaskCompletedBox'; -import { LinkDescriptionPopup } from './nodes/LinkDescriptionPopup'; -import FormatShapePane from "./collections/collectionFreeForm/FormatShapePane"; -import HypothesisAuthenticationManager from '../apis/HypothesisAuthenticationManager'; -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'; -import { discovery_v1, dialogflow_v2beta1 } from 'googleapis'; @observer export class MainView extends React.Component { @@ -311,9 +307,11 @@ export class MainView extends React.Component { getPHeight = () => this._panelHeight; getContentsHeight = () => this._panelHeight - this._buttonBarHeight; - defaultBackgroundColors = (doc: Doc) => { + defaultBackgroundColors = (doc: Opt) => { + if (this.panelContent === doc?.title) return "lightgrey"; if (this.darkScheme) { switch (doc?.type) { + case DocumentType.MENUICON: return "white"; case DocumentType.RTF || DocumentType.LABEL || DocumentType.BUTTON: return "#2d2d2d"; case DocumentType.LINK: case DocumentType.COL: { @@ -323,6 +321,7 @@ export class MainView extends React.Component { } } else { switch (doc?.type) { + case DocumentType.MENUICON: return "black"; case DocumentType.RTF: return "#f1efeb"; case DocumentType.BUTTON: case DocumentType.LABEL: return "lightgray"; @@ -381,7 +380,6 @@ export class MainView extends React.Component { onPointerDown = (e: React.PointerEvent) => { if (this._flyoutTranslate) { this.panelContent = "none"; - CurrentUserUtils.panelContent = "none"; this._canClick = true; this._flyoutSizeOnDown = e.clientX; document.removeEventListener("pointermove", this.onPointerMove); @@ -427,9 +425,7 @@ export class MainView extends React.Component { mainContainerXf = () => this.sidebarScreenToLocal().translate(0, -this._buttonBarHeight); @computed get flyout() { - if (!(this.sidebarContent instanceof Doc)) { - return (null); - } + if (!this.sidebarContent) return null; return
{ + selectMenu = (str: string) => { if (this.panelContent === str && this.flyoutWidth !== 0) { this.panelContent = "none"; this.flyoutWidth = 0; } else { this.panelContent = str; - MainView.expandFlyout(); - if (str === "tools") { - CurrentUserUtils.toolsBtn; - this.sidebarContent.proto = CurrentUserUtils.toolsStack; - } else if (str === "workspace") { - this.sidebarContent.proto = CurrentUserUtils.workspaceStack; - } else if (str === "catalog") { - this.sidebarContent.proto = CurrentUserUtils.catalogStack; - } else if (str === "deleted") { - this.sidebarContent.proto = CurrentUserUtils.closedStack; - } else if (str === "search") { - this.sidebarContent.proto = CurrentUserUtils.searchStack; + switch (this.panelContent) { + case "Tools": this.sidebarContent.proto = CurrentUserUtils.toolsStack; break; + case "Workspace": this.sidebarContent.proto = CurrentUserUtils.workspaceStack; break; + case "Catalog": this.sidebarContent.proto = CurrentUserUtils.catalogStack; break; + case "deleted": this.sidebarContent.proto = CurrentUserUtils.closedStack; break; + case "Search": this.sidebarContent.proto = CurrentUserUtils.searchStack; break; } - } - return true; - } - - @action - selectMenu = (str: string) => { - if (CurrentUserUtils.panelContent === str && this.flyoutWidth !== 0) { - CurrentUserUtils.panelContent = "none"; - this.flyoutWidth = 0; - } else { - CurrentUserUtils.panelContent = str; MainView.expandFlyout(); - if (str === "tools") { - CurrentUserUtils.toolsBtn; - this.sidebarContent.proto = CurrentUserUtils.toolsStack; - } else if (str === "workspace") { - this.sidebarContent.proto = CurrentUserUtils.workspaceStack; - } else if (str === "catalog") { - this.sidebarContent.proto = CurrentUserUtils.catalogStack; - } else if (str === "deleted") { - this.sidebarContent.proto = CurrentUserUtils.closedStack; - } else if (str === "search") { - this.sidebarContent.proto = CurrentUserUtils.searchStack; - } } return true; } @@ -660,7 +627,7 @@ export class MainView extends React.Component { const height = `calc(100% - ${n * Number(ANTIMODEMENU_HEIGHT.replace("px", ""))}px)`; const rightFlyout = this.selectedDocumentView ? this._propertiesWidth - 1 : this.propertiesWidth() > 10 ? 151.5 : 0; - return !this.userDoc || !(this.sidebarContent instanceof Doc) ? (null) : ( + return !this.userDoc ? (null) : (
{this.flyoutWidth !== 0 ?
+ style={{ backgroundColor: this.defaultBackgroundColors(undefined) }}> ; } diff --git a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx index 76af70cd1..59a87b450 100644 --- a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx +++ b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx @@ -355,7 +355,7 @@ export class CollectionStackingViewFieldColumn extends React.Component +
0.001 ? "auto" : this.props.PanelWidth(), height: Math.abs(this.centeringOffset) > 0.0001 ? "auto" : this.props.PanelHeight(), diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 856eb7246..a221dcfdb 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -843,6 +843,7 @@ export class DocumentView extends DocComponent(Docu ChromeHeight={this.chromeHeight} isSelected={this.isSelected} select={this.select} + scriptContext={this.props.scriptContext} onClick={this.onClickFunc} layoutKey={this.finalLayoutKey} /> {this.layoutDoc.hideAllLinks ? (null) : this.allAnchors} diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx index 48e1f6ce3..23ae48108 100644 --- a/src/client/views/nodes/FieldView.tsx +++ b/src/client/views/nodes/FieldView.tsx @@ -60,6 +60,7 @@ export interface FieldViewProps { color?: string; xMargin?: number; yMargin?: number; + scriptContext?: any; } @observer diff --git a/src/client/views/nodes/MenuIconBox.tsx b/src/client/views/nodes/MenuIconBox.tsx index e1656fcba..0aa7b327e 100644 --- a/src/client/views/nodes/MenuIconBox.tsx +++ b/src/client/views/nodes/MenuIconBox.tsx @@ -2,15 +2,10 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { observer } from 'mobx-react'; import * as React from 'react'; import { createSchema, makeInterface } from '../../../fields/Schema'; +import { StrCast } from '../../../fields/Types'; import { DocComponent } from '../DocComponent'; -import './MenuIconBox.scss'; import { FieldView, FieldViewProps } from './FieldView'; -import { StrCast, Cast, NumCast } from '../../../fields/Types'; -import { Utils } from "../../../Utils"; -import { runInAction, observable, reaction, IReactionDisposer } from 'mobx'; -import { Doc } from '../../../fields/Doc'; -import { ScriptField } from '../../../fields/ScriptField'; -import { CurrentUserUtils } from '../../util/CurrentUserUtils'; +import './MenuIconBox.scss'; const MenuIconSchema = createSchema({ icon: "string" }); @@ -24,15 +19,12 @@ export class MenuIconBox extends DocComponent( render() { - const menuBTN =
+ const color = this.props.backgroundColor?.(this.props.Document) === "lightgrey" ? "black" : "white"; + const menuBTN =
- -
{this.dataDoc.title}
+ style={{ backgroundColor: this.props.backgroundColor?.(this.props.Document) }} > + +
{this.dataDoc.title}
; -- cgit v1.2.3-70-g09d2 From 611f848ff4f7b958dc913d33dd1b760ca9474c44 Mon Sep 17 00:00:00 2001 From: usodhi <61431818+usodhi@users.noreply.github.com> Date: Thu, 30 Jul 2020 18:33:19 +0530 Subject: permissions from the properties panel should work now --- src/client/util/GroupManager.tsx | 2 +- src/client/util/SharingManager.tsx | 29 +++++++---- .../collectionFreeForm/PropertiesView.scss | 2 + .../collectionFreeForm/PropertiesView.tsx | 56 ++++++++++++++-------- src/fields/util.ts | 12 ++++- 5 files changed, 67 insertions(+), 34 deletions(-) (limited to 'src/client/util') diff --git a/src/client/util/GroupManager.tsx b/src/client/util/GroupManager.tsx index 72fba5c1b..dee0f105f 100644 --- a/src/client/util/GroupManager.tsx +++ b/src/client/util/GroupManager.tsx @@ -101,7 +101,7 @@ export default class GroupManager extends React.Component<{}> { */ @action open = () => { - SelectionManager.DeselectAll(); + // SelectionManager.DeselectAll(); this.isOpen = true; this.populateUsers(); this.populateGroups(); diff --git a/src/client/util/SharingManager.tsx b/src/client/util/SharingManager.tsx index 0d8b33fbe..9222f10c5 100644 --- a/src/client/util/SharingManager.tsx +++ b/src/client/util/SharingManager.tsx @@ -62,14 +62,12 @@ export default class SharingManager extends React.Component<{}> { @observable private groupSort: "ascending" | "descending" | "none" = "none"; private shareDocumentButtonRef: React.RefObject = React.createRef(); - - // private get linkVisible() { // return this.sharingDoc ? this.sharingDoc[PublicKey] !== SharingPermissions.None : false; // } public open = (target: DocumentView) => { - SelectionManager.DeselectAll(); + // SelectionManager.DeselectAll(); this.populateUsers().then(action(() => { this.targetDocView = target; this.targetDoc = target.props.Document; @@ -82,7 +80,7 @@ export default class SharingManager extends React.Component<{}> { public close = action(() => { this.isOpen = false; - this.users = []; + // this.users = []; this.selectedUsers = null; setTimeout(action(() => { @@ -97,7 +95,12 @@ export default class SharingManager extends React.Component<{}> { SharingManager.Instance = this; } + componentDidMount() { + this.populateUsers(); + } + populateUsers = async () => { + runInAction(() => this.users = []); const userList = await RequestPromise.get(Utils.prepend("/getUsers")); const raw = JSON.parse(userList) as User[]; const evaluating = raw.map(async user => { @@ -117,17 +120,17 @@ export default class SharingManager extends React.Component<{}> { return Promise.all(evaluating); } - setInternalGroupSharing = (group: Doc, permission: string) => { + setInternalGroupSharing = (group: Doc, permission: string, targetDoc?: Doc) => { const members: string[] = JSON.parse(StrCast(group.members)); const users: ValidatedUser[] = this.users.filter(({ user: { email } }) => members.includes(email)); - const target = this.targetDoc!; + const target = targetDoc || this.targetDoc!; const ACL = `ACL-${StrCast(group.groupName)}`; // fix this - not needed (here and setinternalsharing and removegroup) // target[ACL] = permission; // Doc.GetProto(target)[ACL] = permission; - distributeAcls(ACL, permission as SharingPermissions, this.targetDoc!); + distributeAcls(ACL, permission as SharingPermissions, target); group.docsShared ? DocListCastAsync(group.docsShared).then(resolved => Doc.IndexOf(target, resolved!) === -1 && (group.docsShared as List).push(target)) : group.docsShared = new List([target]); @@ -182,14 +185,20 @@ export default class SharingManager extends React.Component<{}> { } } + shareFromPropertiesSidebar = (shareWith: string, permission: SharingPermissions, target: Doc) => { + const user = this.users.find(({ user: { email } }) => email === (shareWith === "Me" ? Doc.CurrentUserEmail : shareWith)); + if (user) this.setInternalSharing(user, permission, target); + else this.setInternalGroupSharing(GroupManager.Instance.getGroup(shareWith)!, permission, target); + } + // @action - setInternalSharing = (recipient: ValidatedUser, permission: string) => { + setInternalSharing = (recipient: ValidatedUser, permission: string, targetDoc?: Doc) => { const { user, notificationDoc } = recipient; - const target = this.targetDoc!; + const target = targetDoc || this.targetDoc!; const key = user.email.replace('.', '_'); const ACL = `ACL-${key}`; - distributeAcls(ACL, permission as SharingPermissions, this.targetDoc!); + distributeAcls(ACL, permission as SharingPermissions, target); if (permission !== SharingPermissions.None) { DocListCastAsync(notificationDoc[storage]).then(resolved => { diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.scss b/src/client/views/collections/collectionFreeForm/PropertiesView.scss index cb4b7375b..4ccc0950b 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.scss +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.scss @@ -159,6 +159,8 @@ border-radius: 6px; width: 170px; background-color: #ececec; + max-height: 130px; + overflow-y: scroll; .propertiesView-sharingTable-item { diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx index d5317efcb..b33b37f4b 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx @@ -2,7 +2,7 @@ import React = require("react"); import { observer } from "mobx-react"; import "./PropertiesView.scss"; import { observable, action, computed, runInAction } from "mobx"; -import { Doc, Field, DocListCast, WidthSym, HeightSym } from "../../../../fields/Doc"; +import { Doc, Field, DocListCast, WidthSym, HeightSym, AclSym, AclPrivate, AclReadonly, AclAddonly, AclEdit, AclAdmin } from "../../../../fields/Doc"; import { DocumentView } from "../../nodes/DocumentView"; import { ComputedField } from "../../../../fields/ScriptField"; import { EditableView } from "../../EditableView"; @@ -18,6 +18,7 @@ import { SelectionManager } from "../../../util/SelectionManager"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { Tooltip, Checkbox } from "@material-ui/core"; import SharingManager from "../../../util/SharingManager"; +import { SharingPermissions, GetEffectiveAcl } from "../../../../fields/util"; interface PropertiesViewProps { @@ -249,20 +250,15 @@ export class PropertiesView extends React.Component { } } - @computed get permissionsSelect() { - return SharingManager.Instance.shareFromPropertiesSidebar(user, e.currentTarget.value as SharingPermissions, this.selectedDoc!)}> + {Object.values(SharingPermissions).map(permission => { + return ( + ); + })} ; } @@ -286,23 +282,41 @@ export class PropertiesView extends React.Component { ; } - sharingItem(name: string, notify: boolean, editable: boolean, permission?: string) { + sharingItem(name: string, notify: boolean, effectiveAcl: symbol, permission?: string) { return
{name}
{notify ? this.notifyIcon : null}
- {editable ? this.permissionsSelect : permission} + {effectiveAcl === AclAdmin && permission !== "Owner" ? this.getPermissionsSelect(name) : permission} {permission === "Owner" ? this.expansionIcon : null}
; } @computed get sharingTable() { + const AclMap = new Map([ + [AclPrivate, SharingPermissions.None], + [AclReadonly, SharingPermissions.View], + [AclAddonly, SharingPermissions.Add], + [AclEdit, SharingPermissions.Edit], + [AclAdmin, SharingPermissions.Admin] + ]); + + const effectiveAcl = GetEffectiveAcl(this.selectedDoc!); + const tableEntries = []; + + if (this.selectedDoc![AclSym]) { + for (const [key, value] of Object.entries(this.selectedDoc![AclSym])) { + const name = key.substring(4).replace("_", "."); + if (name !== Doc.CurrentUserEmail && name !== this.selectedDoc!.author) tableEntries.push(this.sharingItem(name, false, effectiveAcl, AclMap.get(value)!)); + } + } + + tableEntries.unshift(this.sharingItem("Me", false, effectiveAcl, Doc.CurrentUserEmail === this.selectedDoc!.author ? "Owner" : StrCast(this.selectedDoc![`ACL-${Doc.CurrentUserEmail.replace(".", "_")}`]))); + if (Doc.CurrentUserEmail !== this.selectedDoc!.author) tableEntries.unshift(this.sharingItem(StrCast(this.selectedDoc!.author), false, effectiveAcl, "Owner")); + return
- {this.sharingItem("Me", false, false, "Owner")} - {this.sharingItem("Public", false, true)} - {this.sharingItem("Group 1", true, true)} - {this.sharingItem("Group 2", true, true)} + {tableEntries}
; } diff --git a/src/fields/util.ts b/src/fields/util.ts index a62795e64..267da70b4 100644 --- a/src/fields/util.ts +++ b/src/fields/util.ts @@ -1,5 +1,5 @@ import { UndoManager } from "../client/util/UndoManager"; -import { Doc, FieldResult, UpdatingFromServer, LayoutSym, AclPrivate, AclEdit, AclReadonly, AclAddonly, AclSym, CachedUpdates, DataSym, DocListCast, AclAdmin, FieldsSym, HeightSym, WidthSym } from "./Doc"; +import { Doc, FieldResult, UpdatingFromServer, LayoutSym, AclPrivate, AclEdit, AclReadonly, AclAddonly, AclSym, CachedUpdates, DataSym, DocListCast, AclAdmin, FieldsSym, HeightSym, WidthSym, fetchProto } from "./Doc"; import { SerializationHelper } from "../client/util/SerializationHelper"; import { ProxyField, PrefetchProxy } from "./Proxy"; import { RefField } from "./RefField"; @@ -183,12 +183,18 @@ export function distributeAcls(key: string, acl: SharingPermissions, target: Doc ["Admin", 4] ]); + let changed = false; + const dataDoc = target[DataSym]; - if (!inheritingFromCollection || !target[key] || HierarchyMapping.get(StrCast(target[key]))! > HierarchyMapping.get(acl)!) target[key] = acl; + if (!inheritingFromCollection || !target[key] || HierarchyMapping.get(StrCast(target[key]))! > HierarchyMapping.get(acl)!) { + target[key] = acl; + changed = true; + } if (dataDoc && (!inheritingFromCollection || !dataDoc[key] || HierarchyMapping.get(StrCast(dataDoc[key]))! > HierarchyMapping.get(acl)!)) { dataDoc[key] = acl; + changed = true; DocListCast(dataDoc[Doc.LayoutFieldKey(dataDoc)]).map(d => { if (d.author === Doc.CurrentUserEmail && (!inheritingFromCollection || !d[key] || HierarchyMapping.get(StrCast(d[key]))! > HierarchyMapping.get(acl)!)) { @@ -214,6 +220,8 @@ export function distributeAcls(key: string, acl: SharingPermissions, target: Doc } }); } + + changed && fetchProto(target); } const layoutProps = ["panX", "panY", "width", "height", "nativeWidth", "nativeHeight", "fitWidth", "fitToBox", -- cgit v1.2.3-70-g09d2 From a61c116e9028c2778b5c48cd596f9cb00d80d0f6 Mon Sep 17 00:00:00 2001 From: usodhi <61431818+usodhi@users.noreply.github.com> Date: Thu, 30 Jul 2020 23:29:37 +0530 Subject: ui and other minor changes --- src/client/util/GroupMemberView.scss | 2 +- .../collections/collectionFreeForm/PropertiesView.scss | 15 ++++++++++++--- .../collections/collectionFreeForm/PropertiesView.tsx | 14 +++++++------- 3 files changed, 20 insertions(+), 11 deletions(-) (limited to 'src/client/util') diff --git a/src/client/util/GroupMemberView.scss b/src/client/util/GroupMemberView.scss index c609c5c7b..e8a4bc0c1 100644 --- a/src/client/util/GroupMemberView.scss +++ b/src/client/util/GroupMemberView.scss @@ -43,7 +43,7 @@ text-overflow: ellipsis; &:hover { - text-overflow: visible; + text-overflow: unset; overflow-x: auto; } } diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.scss b/src/client/views/collections/collectionFreeForm/PropertiesView.scss index 4ccc0950b..4917b7822 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.scss +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.scss @@ -126,7 +126,7 @@ padding-left: 2px; padding-right: 2px; margin-top: 2px; - margin-right: 3px; + margin-left: 3px; .notify-button-icon { width: 6px; @@ -166,18 +166,25 @@ display: flex; padding: 3px; - + align-items: center; border-bottom: 0.5px solid grey; + &:hover .propertiesView-sharingTable-item-name { + overflow-x: unset; + white-space: unset; + overflow-wrap: break-word; + } + .propertiesView-sharingTable-item-name { font-weight: bold; width: 80px; overflow-x: hidden; display: inline-block; + text-overflow: ellipsis; + white-space: nowrap; } .propertiesView-sharingTable-item-permission { - display: flex; .permissions-select { @@ -185,6 +192,8 @@ border: none; background-color: inherit; width: 75px; + text-align: justify; // for Edge + text-align-last: end; &:hover { cursor: pointer; diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx index b33b37f4b..bd720ac82 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx @@ -263,7 +263,7 @@ export class PropertiesView extends React.Component { } @computed get notifyIcon() { - return
{"Notify group of permissions change"}
}> + return
Notify with message
}>
@@ -282,10 +282,10 @@ export class PropertiesView extends React.Component { ; } - sharingItem(name: string, notify: boolean, effectiveAcl: symbol, permission?: string) { + sharingItem(name: string, effectiveAcl: symbol, permission?: string) { return
-
{name}
- {notify ? this.notifyIcon : null} +
{name}
+ {name !== "Me" ? this.notifyIcon : null}
{effectiveAcl === AclAdmin && permission !== "Owner" ? this.getPermissionsSelect(name) : permission} {permission === "Owner" ? this.expansionIcon : null} @@ -308,12 +308,12 @@ export class PropertiesView extends React.Component { if (this.selectedDoc![AclSym]) { for (const [key, value] of Object.entries(this.selectedDoc![AclSym])) { const name = key.substring(4).replace("_", "."); - if (name !== Doc.CurrentUserEmail && name !== this.selectedDoc!.author) tableEntries.push(this.sharingItem(name, false, effectiveAcl, AclMap.get(value)!)); + if (name !== Doc.CurrentUserEmail && name !== this.selectedDoc!.author) tableEntries.push(this.sharingItem(name, effectiveAcl, AclMap.get(value)!)); } } - tableEntries.unshift(this.sharingItem("Me", false, effectiveAcl, Doc.CurrentUserEmail === this.selectedDoc!.author ? "Owner" : StrCast(this.selectedDoc![`ACL-${Doc.CurrentUserEmail.replace(".", "_")}`]))); - if (Doc.CurrentUserEmail !== this.selectedDoc!.author) tableEntries.unshift(this.sharingItem(StrCast(this.selectedDoc!.author), false, effectiveAcl, "Owner")); + tableEntries.unshift(this.sharingItem("Me", effectiveAcl, Doc.CurrentUserEmail === this.selectedDoc!.author ? "Owner" : StrCast(this.selectedDoc![`ACL-${Doc.CurrentUserEmail.replace(".", "_")}`]))); + if (Doc.CurrentUserEmail !== this.selectedDoc!.author) tableEntries.unshift(this.sharingItem(StrCast(this.selectedDoc!.author), effectiveAcl, "Owner")); return
{tableEntries} -- cgit v1.2.3-70-g09d2 From 1ea51992bd418c319a253ed41c50497a6b13de25 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Thu, 30 Jul 2020 15:31:34 -0500 Subject: fixing layouts UI --- src/client/util/CurrentUserUtils.ts | 6 +- src/client/views/MainView.scss | 49 +----- src/client/views/MainView.tsx | 173 ++++++++------------- .../collectionFreeForm/PropertiesView.scss | 27 ++-- .../collectionFreeForm/PropertiesView.tsx | 14 +- 5 files changed, 89 insertions(+), 180 deletions(-) (limited to 'src/client/util') diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 725be882e..3d8bd6bd5 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -508,12 +508,12 @@ export class CurrentUserUtils { return [ { title: "Workspace", icon: "desktop", click: 'scriptContext.selectMenu("Workspace")' }, { title: "Catalog", icon: "file", click: 'scriptContext.selectMenu("Catalog")' }, - { title: "Archive", icon: "archive", click: 'scriptContext.selectMenu("deleted")' }, + { title: "Archive", icon: "archive", click: 'scriptContext.selectMenu("Archive")' }, { title: "Import", icon: "upload", click: 'scriptContext.selectMenu("Import")' }, - { title: "Sharing", icon: "users", click: 'scriptContext.groupManager.open()' }, + { title: "Sharing", icon: "users", click: 'scriptContext.selectMenu("Sharing")' }, { title: "Tools", icon: "wrench", click: 'scriptContext.selectMenu("Tools")' }, { title: "Help", icon: "question-circle", click: 'scriptContext.selectMenu("Help")' }, - { title: "Settings", icon: "cog", click: 'SettingsManager.Instance.open()' }, + { title: "Settings", icon: "cog", click: 'scriptContext.selectMenu("Settings")' }, ]; } diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss index fe01c27a3..054a409df 100644 --- a/src/client/views/MainView.scss +++ b/src/client/views/MainView.scss @@ -124,14 +124,13 @@ } &:hover { - cursor: pointer; + cursor: grab; } } .mainiView-propertiesView { display: flex; flex-direction: column; - width: 200px; height: 100%; position: absolute; right: 0; @@ -212,50 +211,6 @@ } } -// .mainView-menuPanel-bottomButton { -// width: 45px; -// height: 45px; -// padding: 10px; -// pointer-events: all; -// touch-action: none; -// //border-radius: inherit; -// background: black; -// background-color: black; -// //border-radius: 100%; -// transform-origin: top left; -// margin-bottom: 20px; -// margin-top: 5px; - -// margin-right: 25px; - -// .mainView-menuPanel-bottomButton-label { -// background: black; -// color: white; -// margin-left: -10px; -// border-radius: 8px; -// width: 65px; -// position: absolute; -// text-align: center; -// font-size: 9.5px; -// margin-top: 2px; -// letter-spacing: normal; -// padding: 3px; -// //margin-bottom: 23px; -// } - -// .mainView-menuPanel-bottomButton-icon { -// width: 50px; -// height: 50px; -// color: white; -// } - -// svg { -// width: 95% !important; -// height: 95%; -// } -// } - - .mainView-searchPanel { width: 100%; height: 33px; @@ -342,7 +297,7 @@ position: absolute; z-index: 2; touch-action: none; - cursor: grab; + cursor: ew-resize; .mainView-libraryHandle-icon { width: 10px; diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index ec0bff8a7..825a75afa 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -101,6 +101,7 @@ export class MainView extends React.Component { return "chevron-right"; } } + @observable propertiesDownX: number | undefined; componentDidMount() { DocServer.setPlaygroundFields(["dataTransition", "_viewTransition", "_panX", "_panY", "_viewScale", "_viewType", "_chromeStatus"]); // can play with these fields on someone else's @@ -233,7 +234,7 @@ export class MainView extends React.Component { const freeformOptions: DocumentOptions = { x: 0, y: 400, - _width: this._panelWidth * .7 - this._propertiesWidth, + _width: this._panelWidth * .7 - this.propertiesWidth(), _height: this._panelHeight, title: "Collection " + workspaceCount, }; @@ -299,12 +300,12 @@ export class MainView extends React.Component { @action onResize = (r: any) => { - this._panelWidth = r.offset.width - this._propertiesWidth; + this._panelWidth = r.offset.width - this.propertiesWidth(); this._panelHeight = r.offset.height; } @action - getPWidth = () => this._panelWidth - this._propertiesWidth; + getPWidth = () => this._panelWidth - this.propertiesWidth(); getPHeight = () => this._panelHeight; getContentsHeight = () => this._panelHeight - this._buttonBarHeight; @@ -401,20 +402,67 @@ export class MainView extends React.Component { } } + @action + onDown = (e: React.PointerEvent) => { + this.propertiesDownX = e.screenX; + document.removeEventListener("pointermove", this.onPointerMove); + document.removeEventListener("pointerup", this.onPointerUp); + document.addEventListener("pointermove", this.onPointerMove); + document.addEventListener("pointerup", this.onPointerUp); + e.stopPropagation(); + e.preventDefault(); + // setupMoveUpEvents(this, e, action((e: PointerEvent, down: number[], delta: number[]) => { + // this._propertiesWidth = this._panelWidth - Math.max(Transform.Identity().transformPoint(e.clientX, 0)[0], 0); + // return false; + // }), returnFalse, action(() => this._propertiesWidth = this.propertiesWidth() < 15 ? Math.min(this._panelWidth - 50, 200) : 0), false); + } + @action onPointerMove = (e: PointerEvent) => { - this.flyoutWidth = Math.max(e.clientX, 0); - Math.abs(this.flyoutWidth - this._flyoutSizeOnDown) > 6 && (this._canClick = false); - this.sidebarButtonsDoc._columnWidth = this.flyoutWidth / 3 - 30; + if (this.propertiesDownX) { + this._propertiesWidth = this._propertiesWidth + (this.propertiesDownX - e.screenX) * .5; + if (this._propertiesWidth < 150) { + this._propertiesWidth = 0; + this.propertiesDownX = undefined; + } else if (this._propertiesWidth > 400) { + this._propertiesWidth = 400; + this.propertiesDownX = undefined; + } + document.removeEventListener("pointermove", this.onPointerMove); + document.removeEventListener("pointerup", this.onPointerUp); + } else { + this.flyoutWidth = Math.max(e.clientX, 0); + Math.abs(this.flyoutWidth - this._flyoutSizeOnDown) > 6 && (this._canClick = false); + this.sidebarButtonsDoc._columnWidth = this.flyoutWidth / 3 - 30; + } } @action onPointerUp = (e: PointerEvent) => { - if (Math.abs(e.clientX - this._flyoutSizeOnDown) < 4 && this._canClick) { - this.flyoutWidth = this.flyoutWidth < 15 ? 250 : 0; - this.flyoutWidth && (this.sidebarButtonsDoc._columnWidth = this.flyoutWidth / 3 - 30); + if (this.propertiesDownX) { + if (Math.abs(this.propertiesDownX - e.screenX) < 3) { + if (this._propertiesWidth < 10) { + this._propertiesWidth = 200; + } else { + this._propertiesWidth = 0; + } + } else { + this._propertiesWidth = this._propertiesWidth + (this.propertiesDownX - e.screenX) * .5; + if (this._propertiesWidth < 150) { + this._propertiesWidth = 0; + } else if (this._propertiesWidth > 400) { + this._propertiesWidth = 400; + } + } + this.propertiesDownX = undefined; + } else { + if (Math.abs(e.clientX - this._flyoutSizeOnDown) < 4 && this._canClick) { + this.flyoutWidth = this.flyoutWidth < 15 ? 250 : 0; + this.flyoutWidth && (this.sidebarButtonsDoc._columnWidth = this.flyoutWidth / 3 - 30); + } } document.removeEventListener("pointermove", this.onPointerMove); document.removeEventListener("pointerup", this.onPointerUp); + } flyoutWidthFunc = () => this.flyoutWidth; addDocTabFunc = (doc: Doc, where: string, libraryPath?: Doc[]): boolean => { @@ -501,91 +549,6 @@ export class MainView extends React.Component {
; } - // @computed get menuPanel() { - // return
- //
- //
this.selectPanel("workspace")}> - // - //
Workspace
- //
- //
- - //
- //
this.selectPanel("catalog")}> - // - //
Catalog
- //
- //
- - //
- //
this.selectPanel("deleted")}> - // - //
Recently Used
- //
- //
- - //
- //
this.selectPanel("upload")}> - // - //
Import
- //
- //
- - //
- //
this.selectPanel("sharing")} - // onClick={() => GroupManager.Instance.open()}> - // - //
Sharing
- //
- //
- - //
- //
this.selectPanel("tools")} - // style={{ - // backgroundColor: this.panelContent === "tools" ? "lightgrey" : "", - // }}> - // - //
Tools
- //
- //
- - //
- //
this.selectPanel("help")} > - // - //
Help
- //
- //
- - //
- //
this.selectPanel("settings")} - // onClick={() => SettingsManager.Instance.open()}> - // - //
Settings
- //
- //
- //
; - // } - @action @undoBatch closeFlyout = () => { @@ -606,8 +569,9 @@ export class MainView extends React.Component { case "Tools": this.sidebarContent.proto = CurrentUserUtils.toolsStack; break; case "Workspace": this.sidebarContent.proto = CurrentUserUtils.workspaceStack; break; case "Catalog": this.sidebarContent.proto = CurrentUserUtils.catalogStack; break; - case "deleted": this.sidebarContent.proto = CurrentUserUtils.closedStack; break; - case "Search": this.sidebarContent.proto = CurrentUserUtils.searchStack; break; + case "Archive": this.sidebarContent.proto = CurrentUserUtils.closedStack; break; + case "Settings": this.sidebarContent.proto = SettingsManager.Instance.open(); break; + case "Sharing": this.sidebarContent.proto = GroupManager.Instance.open(); break; } MainView.expandFlyout(); } @@ -615,25 +579,21 @@ export class MainView extends React.Component { } @action @undoBatch - onDown = (e: React.PointerEvent) => { - setupMoveUpEvents(this, e, action((e: PointerEvent, down: number[], delta: number[]) => { - this._propertiesWidth = this._panelWidth - Math.max(Transform.Identity().transformPoint(e.clientX, 0)[0], 0); - return false; - }), returnFalse, action(() => this._propertiesWidth = this.propertiesWidth() < 15 ? Math.min(this._panelWidth - 50, 200) : 0), false); + closeProperties = () => { + this._propertiesWidth = 0; } @computed get propertiesView() { TraceMobx(); return
; } @@ -643,7 +603,7 @@ export class MainView extends React.Component { const n = (CollectionMenu.Instance?.Pinned ? 1 : 0); const height = `calc(100% - ${n * Number(ANTIMODEMENU_HEIGHT.replace("px", ""))}px)`; - const rightFlyout = this.selectedDocumentView ? this._propertiesWidth - 1 : this.propertiesWidth() > 10 ? 151.5 : 0; + const rightFlyout = this.propertiesWidth() - 1; return !this.userDoc ? (null) : (
} - {this.propertiesWidth() < 10 ? (null) : this.propertiesView} + {this.propertiesWidth() < 10 ? (null) : +
{this.propertiesView}
}
); } diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.scss b/src/client/views/collections/collectionFreeForm/PropertiesView.scss index 83e0fc0d5..76c934551 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.scss +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.scss @@ -57,7 +57,6 @@ font-size: 12.5px; padding: 4px; display: flex; - width: 200px; color: white; padding-left: 8px; background-color: rgb(51, 51, 51); @@ -92,7 +91,6 @@ font-size: 12.5px; padding: 4px; display: flex; - width: 200px; color: white; padding-left: 8px; background-color: rgb(51, 51, 51); @@ -126,7 +124,6 @@ font-size: 12.5px; padding: 4px; display: flex; - width: 200px; color: white; padding-left: 8px; background-color: rgb(51, 51, 51); @@ -160,7 +157,6 @@ font-size: 12.5px; padding: 4px; display: flex; - width: 200px; color: white; padding-left: 8px; background-color: rgb(51, 51, 51); @@ -275,7 +271,6 @@ font-size: 12.5px; padding: 4px; display: flex; - width: 200px; color: white; padding-left: 8px; background-color: rgb(51, 51, 51); @@ -299,18 +294,17 @@ cursor: pointer; } } + } - .propertiesView-fields-title-checkbox { - float: right; - height: 20px; - margin-top: -13px; - margin-left: 115px; - - .propertiesView-fields-title-checkbox-text { - font-size: 7px; - margin-top: -10px; - margin-left: 6px; - } + .propertiesView-fields-checkbox { + float: right; + height: 20px; + margin-top: -9px; + + .propertiesView-fields-checkbox-text { + font-size: 7px; + margin-top: -10px; + margin-left: 6px; } } @@ -352,7 +346,6 @@ font-size: 12.5px; padding: 4px; display: flex; - width: 200px; color: white; padding-left: 8px; background-color: rgb(51, 51, 51); diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx index c4291f2a4..976e52fda 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx @@ -361,16 +361,16 @@ export class PropertiesView extends React.Component { render() { if (!this.selectedDoc) { - return
-
+ return
+
No Document Selected
; } const novice = Doc.UserDoc().noviceMode; - return
-
+ return
+
Properties
@@ -381,7 +381,7 @@ export class PropertiesView extends React.Component {
- Document Actions + Actions
runInAction(() => { this.openActions = !this.openActions; })}> @@ -447,9 +447,9 @@ export class PropertiesView extends React.Component {
- {!novice && this.openFields ?
+ {!novice && this.openFields ?
{this.fieldsCheckbox} -
Layout
+
Layout
: null} {this.openFields ?
-- cgit v1.2.3-70-g09d2 From 9ea6e9775a4a8f1512911e28140bb047e9e3d20c Mon Sep 17 00:00:00 2001 From: bobzel Date: Sat, 1 Aug 2020 09:55:47 -0400 Subject: changed fonticonbox margins --- src/client/util/CurrentUserUtils.ts | 2 +- src/client/views/nodes/FontIconBox.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) (limited to 'src/client/util') diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 3d8bd6bd5..b37c91c56 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -836,7 +836,7 @@ export class CurrentUserUtils { })) as any as Doc static ficon = (opts: DocumentOptions) => new PrefetchProxy(Docs.Create.FontIconDocument({ - ...opts, dropAction: "alias", removeDropProperties: new List(["dropAction"]), _nativeWidth: 100, _nativeHeight: 100, _width: 100, _height: 100 + ...opts, dropAction: "alias", removeDropProperties: new List(["dropAction"]), _nativeWidth: 40, _nativeHeight: 40, _width: 40, _height: 40 })) as any as Doc /// sets up the default list of buttons to be shown in the expanding button menu at the bottom of the Dash window diff --git a/src/client/views/nodes/FontIconBox.scss b/src/client/views/nodes/FontIconBox.scss index 5b85d8b0b..69c835318 100644 --- a/src/client/views/nodes/FontIconBox.scss +++ b/src/client/views/nodes/FontIconBox.scss @@ -16,7 +16,7 @@ position: absolute; text-align: center; font-size: 8px; - margin-top:4px; + //margin-top:4px; letter-spacing: normal; left: 0; overflow: hidden; -- cgit v1.2.3-70-g09d2 From 3257bfdb28fbd4573adc7d507827d6a6957fc7d2 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Sun, 2 Aug 2020 12:15:58 -0500 Subject: merging menuiconbox into fonticonbox --- src/client/documents/Documents.ts | 9 +--- src/client/util/CurrentUserUtils.ts | 5 ++- src/client/util/SharingManager.tsx | 6 +++ src/client/views/MainView.tsx | 18 ++++++-- src/client/views/nodes/DocumentContentsView.tsx | 3 +- src/client/views/nodes/FontIconBox.scss | 56 ++++++++++++++++++++++- src/client/views/nodes/FontIconBox.tsx | 59 ++++++++++++++++++------- src/client/views/nodes/MenuIconBox.scss | 49 -------------------- src/client/views/nodes/MenuIconBox.tsx | 33 -------------- 9 files changed, 123 insertions(+), 115 deletions(-) delete mode 100644 src/client/views/nodes/MenuIconBox.scss delete mode 100644 src/client/views/nodes/MenuIconBox.tsx (limited to 'src/client/util') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index de0557185..300af4e50 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -31,7 +31,6 @@ import { ColorBox } from "../views/nodes/ColorBox"; import { ComparisonBox } from "../views/nodes/ComparisonBox"; import { DocHolderBox } from "../views/nodes/DocHolderBox"; import { FontIconBox } from "../views/nodes/FontIconBox"; -import { MenuIconBox } from "../views/nodes/MenuIconBox"; import { FormattedTextBox } from "../views/nodes/formattedText/FormattedTextBox"; import { ImageBox } from "../views/nodes/ImageBox"; import { KeyValueBox } from "../views/nodes/KeyValueBox"; @@ -152,6 +151,7 @@ export interface DocumentOptions { annotationOn?: Doc; removeDropProperties?: List; // list of properties that should be removed from a document when it is dropped. e.g., a creator button may be forceActive to allow it be dragged, but the forceActive property can be removed from the dropped document dbDoc?: Doc; + menuIcon?: boolean; // if the font icon box is in the menu linkRelationship?: string; // type of relatinoship a link represents ischecked?: ScriptField; // returns whether a font icon box is checked activeInkPen?: Doc; // which pen document is currently active (used as the radio button state for the 'unhecked' pen tool scripts) @@ -301,9 +301,6 @@ export namespace Docs { layout: { view: FontIconBox, dataField: defaultDataKey }, options: { _width: 40, _height: 40, borderRounding: "100%" }, }], - [DocumentType.MENUICON, { - layout: { view: MenuIconBox, dataField: defaultDataKey }, - }], // [DocumentType.RECOMMENDATION, { // layout: { view: RecommendationsBox, dataField: defaultDataKey }, // options: { _width: 200, _height: 200 }, @@ -794,10 +791,6 @@ export namespace Docs { return InstanceFromProto(Prototypes.get(DocumentType.FONTICON), undefined, { hideLinkButton: true, ...(options || {}) }); } - export function MenuIconDocument(options?: DocumentOptions) { - return InstanceFromProto(Prototypes.get(DocumentType.MENUICON), undefined, { hideLinkButton: true, ...(options || {}) }); - } - export function PresElementBoxDocument(options?: DocumentOptions) { return InstanceFromProto(Prototypes.get(DocumentType.PRESELEMENT), undefined, { ...(options || {}) }); } diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index b37c91c56..7b6868f73 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -48,6 +48,8 @@ export class CurrentUserUtils { @observable public static closedStack: any | undefined; @observable public static searchStack: any | undefined; + @observable public static selectedPanel: string = "none"; + // sets up the default User Templates - slideView, queryView, descriptionView static setupUserTemplateButtons(doc: Doc) { if (doc["template-button-query"] === undefined) { @@ -520,8 +522,9 @@ export class CurrentUserUtils { static setupMenuPanel(doc: Doc) { if (doc.menuStack === undefined) { const buttons = CurrentUserUtils.menuBtnDescriptions(); - const menuBtns = buttons.map(({ title, icon, click }) => Docs.Create.MenuIconDocument({ + const menuBtns = buttons.map(({ title, icon, click }) => Docs.Create.FontIconDocument({ icon, + menuIcon: true, title, _backgroundColor: "black", stayInCollection: true, diff --git a/src/client/util/SharingManager.tsx b/src/client/util/SharingManager.tsx index 000b3e46c..eda12a5e9 100644 --- a/src/client/util/SharingManager.tsx +++ b/src/client/util/SharingManager.tsx @@ -179,6 +179,12 @@ export default class SharingManager extends React.Component<{}> { } } + shareFromPropertiesSidebar = (shareWith: string, permission: SharingPermissions, target: Doc) => { + const user = this.users.find(({ user: { email } }) => email === (shareWith === "Me" ? Doc.CurrentUserEmail : shareWith)); + if (user) this.setInternalSharing(user, permission, target); + else this.setInternalGroupSharing(GroupManager.Instance.getGroup(shareWith)!, permission, target); + } + /** * Removes the documents shared with a user through a group when the user is removed from the group. * @param group diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index d095a9836..c83aeee25 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -234,7 +234,7 @@ export class MainView extends React.Component { const freeformOptions: DocumentOptions = { x: 0, y: 400, - _width: this._panelWidth * .7 - this.propertiesWidth(), + _width: this._panelWidth * .7 - this.propertiesWidth() * 0.7, _height: this._panelHeight, title: "Collection " + workspaceCount, }; @@ -367,7 +367,7 @@ export class MainView extends React.Component { @computed get dockingContent() { TraceMobx(); const mainContainer = this.mainContainer; - const width = this.flyoutWidth; + const width = this.flyoutWidth + this.propertiesWidth(); return
{!mainContainer ? (null) : this.mainDocView}
; @@ -388,10 +388,16 @@ export class MainView extends React.Component { setupMoveUpEvents(this, e, action((e: PointerEvent) => { this.flyoutWidth = Math.max(e.clientX, 0); this.sidebarButtonsDoc._columnWidth = this.flyoutWidth / 3 - 30; + if (this.flyoutWidth === 0) { + CurrentUserUtils.selectedPanel = "none"; + } return false; }), emptyFunction, action(() => { this.flyoutWidth = this.flyoutWidth < 15 ? 250 : 0; this.flyoutWidth && (this.sidebarButtonsDoc._columnWidth = this.flyoutWidth / 3 - 30); + if (this.flyoutWidth === 0) { + CurrentUserUtils.selectedPanel = "none"; + } })); } } @@ -464,7 +470,7 @@ export class MainView extends React.Component { onClick={undefined} ScreenToLocalTransform={this.mainContainerXf} ContentScaling={returnOne} - PanelWidth={() => 70} + PanelWidth={() => 60} PanelHeight={this.getContentsHeight} renderDepth={0} focus={emptyFunction} @@ -484,6 +490,7 @@ export class MainView extends React.Component { @action @undoBatch closeFlyout = () => { + CurrentUserUtils.selectedPanel = "none"; this.panelContent = "none"; this.flyoutWidth = 0; } @@ -493,10 +500,12 @@ export class MainView extends React.Component { @action @undoBatch selectMenu = (str: string) => { if (this.panelContent === str && this.flyoutWidth !== 0) { + CurrentUserUtils.selectedPanel = "none"; this.panelContent = "none"; this.flyoutWidth = 0; } else { this.panelContent = str; + CurrentUserUtils.selectedPanel = str; switch (this.panelContent) { case "Tools": this.sidebarContent.proto = CurrentUserUtils.toolsStack; break; case "Workspace": this.sidebarContent.proto = CurrentUserUtils.workspaceStack; break; @@ -505,7 +514,8 @@ export class MainView extends React.Component { case "Settings": this.sidebarContent.proto = SettingsManager.Instance.open(); break; case "Sharing": this.sidebarContent.proto = GroupManager.Instance.open(); break; } - if (str === "Settings" || str === "Sharing" || str === "Help") { + if (str === "Settings" || str === "Sharing" || str === "Help" || str === "Import") { + CurrentUserUtils.selectedPanel = "none"; this.panelContent = "none"; this.flyoutWidth = 0; } else { diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx index e3f258b8d..e8173d103 100644 --- a/src/client/views/nodes/DocumentContentsView.tsx +++ b/src/client/views/nodes/DocumentContentsView.tsx @@ -18,7 +18,6 @@ import { DocHolderBox } from "./DocHolderBox"; import { DocumentViewProps } from "./DocumentView"; import "./DocumentView.scss"; import { FontIconBox } from "./FontIconBox"; -import { MenuIconBox } from "./MenuIconBox"; import { FieldView, FieldViewProps } from "./FieldView"; import { FormattedTextBox } from "./formattedText/FormattedTextBox"; import { ImageBox } from "./ImageBox"; @@ -190,7 +189,7 @@ export class DocumentContentsView extends React.Component; @@ -59,20 +61,45 @@ export class FontIconBox extends DocComponent( } render() { - const referenceDoc = (this.layoutDoc.dragFactory instanceof Doc ? this.layoutDoc.dragFactory : this.layoutDoc); - const refLayout = Doc.Layout(referenceDoc); - const button = ; - return !this.layoutDoc.toolTip ? button : - {StrCast(this.layoutDoc.toolTip)}
}> - {button} - ; + + //style={{ backgroundColor: this.props.backgroundColor?.(this.props.Document) }}> + + if (this.layoutDoc.menuIcon) { + + let backgroundColor = "black"; + if (this.dataDoc.title === "Sharing" || this.dataDoc.title === "Help" || this.dataDoc.title === "Settings" || this.dataDoc.title === "Import") { + backgroundColor = "black"; + } else { + backgroundColor = CurrentUserUtils.selectedPanel === this.dataDoc.title ? "lightgrey" : "black"; + } + + const color = backgroundColor === "lightgrey" ? "black" : "white"; + const menuBTN =
+ +
+ +
{this.dataDoc.title}
+
+
; + + return menuBTN; + } else { + const referenceDoc = (this.layoutDoc.dragFactory instanceof Doc ? this.layoutDoc.dragFactory : this.layoutDoc); + const refLayout = Doc.Layout(referenceDoc); + const button = ; + return !this.layoutDoc.toolTip ? button : + {StrCast(this.layoutDoc.toolTip)}
}> + {button} + ; + } + } } \ No newline at end of file diff --git a/src/client/views/nodes/MenuIconBox.scss b/src/client/views/nodes/MenuIconBox.scss deleted file mode 100644 index 1b72f5a8f..000000000 --- a/src/client/views/nodes/MenuIconBox.scss +++ /dev/null @@ -1,49 +0,0 @@ -.menuButton { - //padding: 7px; - padding-left: 7px; - width: 100%; - width: 60px; - height: 70px; - - .menuButton-wrap { - width: 45px; - /* padding: 5px; */ - touch-action: none; - background: black; - transform-origin: top left; - /* margin-bottom: 5px; */ - margin-top: 5px; - margin-right: 25px; - border-radius: 8px; - - &:hover { - background: rgb(61, 61, 61); - cursor: pointer; - } - } - - .menuButton-label { - color: white; - margin-right: 4px; - border-radius: 8px; - width: 42px; - position: relative; - text-align: center; - font-size: 8px; - margin-top: 1px; - letter-spacing: normal; - padding: 3px; - background-color: inherit; - } - - .menuButton-icon { - width: auto; - height: 35px; - padding: 5px; - } - - svg { - width: 95% !important; - height: 95%; - } -} \ No newline at end of file diff --git a/src/client/views/nodes/MenuIconBox.tsx b/src/client/views/nodes/MenuIconBox.tsx deleted file mode 100644 index 0aa7b327e..000000000 --- a/src/client/views/nodes/MenuIconBox.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { observer } from 'mobx-react'; -import * as React from 'react'; -import { createSchema, makeInterface } from '../../../fields/Schema'; -import { StrCast } from '../../../fields/Types'; -import { DocComponent } from '../DocComponent'; -import { FieldView, FieldViewProps } from './FieldView'; -import './MenuIconBox.scss'; -const MenuIconSchema = createSchema({ - icon: "string" -}); - -type MenuIconDocument = makeInterface<[typeof MenuIconSchema]>; -const MenuIconDocument = makeInterface(MenuIconSchema); -@observer -export class MenuIconBox extends DocComponent(MenuIconDocument) { - public static LayoutString(fieldKey: string) { return FieldView.LayoutString(MenuIconBox, fieldKey); } - _ref: React.RefObject = React.createRef(); - - render() { - - const color = this.props.backgroundColor?.(this.props.Document) === "lightgrey" ? "black" : "white"; - const menuBTN =
-
- -
{this.dataDoc.title}
-
-
; - - return menuBTN; - } -} \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 5bbfed1556e47546eb6768681a86859b011a4c18 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Sun, 2 Aug 2020 13:55:38 -0500 Subject: sharing fix --- src/client/util/SharingManager.tsx | 4 ++-- .../views/collections/collectionFreeForm/PropertiesView.scss | 6 +++--- .../views/collections/collectionFreeForm/PropertiesView.tsx | 9 ++++++--- 3 files changed, 11 insertions(+), 8 deletions(-) (limited to 'src/client/util') diff --git a/src/client/util/SharingManager.tsx b/src/client/util/SharingManager.tsx index eda12a5e9..7a0fe4140 100644 --- a/src/client/util/SharingManager.tsx +++ b/src/client/util/SharingManager.tsx @@ -142,7 +142,7 @@ export default class SharingManager extends React.Component<{}> { * @param group * @param permission */ - setInternalGroupSharing = (group: Doc, permission: string) => { + setInternalGroupSharing = (group: Doc, permission: string, targetDoc?: Doc) => { const members: string[] = JSON.parse(StrCast(group.members)); const users: ValidatedUser[] = this.users.filter(({ user: { email } }) => members.includes(email)); @@ -224,7 +224,7 @@ export default class SharingManager extends React.Component<{}> { } } - setInternalSharing = (recipient: ValidatedUser, permission: string) => { + setInternalSharing = (recipient: ValidatedUser, permission: string, targetDoc?: Doc) => { const { user, notificationDoc } = recipient; const target = targetDoc || this.targetDoc!; const key = user.email.replace('.', '_'); diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.scss b/src/client/views/collections/collectionFreeForm/PropertiesView.scss index 74f32275a..a96716659 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.scss +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.scss @@ -241,7 +241,7 @@ .propertiesView-sharingTable-item-name { font-weight: bold; - width: 80px; + width: 95px; overflow-x: hidden; display: inline-block; text-overflow: ellipsis; @@ -259,8 +259,8 @@ border: none; background-color: inherit; width: 75px; - text-align: justify; // for Edge - text-align-last: end; + //text-align: justify; // for Edge + //text-align-last: end; &:hover { cursor: pointer; diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx index 3eb3ef8ab..73f0f1bdd 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx @@ -156,7 +156,10 @@ export class PropertiesView extends React.Component { doc && Object.keys(doc).forEach(key => !(key in ids) && doc[key] !== ComputedField.undefined && (ids[key] = key)); const rows: JSX.Element[] = []; for (const key of Object.keys(ids).slice().sort()) { - if (key[0] === key[0].toUpperCase() || key[0] === "#" || key === "author" || key === "creationDate" || key.indexOf("lastModified") !== -1) { + if ((key[0] === key[0].toUpperCase() && key.substring(0, 3) !== "ACL") + || key[0] === "#" || key === "author" || + key === "creationDate" || key.indexOf("lastModified") !== -1) { + const contents = doc[key]; if (key[0] === "#") { rows.push(
@@ -297,8 +300,8 @@ export class PropertiesView extends React.Component { sharingItem(name: string, effectiveAcl: symbol, permission?: string) { return
-
{name}
- {name !== "Me" ? this.notifyIcon : null} +
{name}
+ {/* {name !== "Me" ? this.notifyIcon : null} */}
{effectiveAcl === AclAdmin && permission !== "Owner" ? this.getPermissionsSelect(name) : permission} {permission === "Owner" ? this.expansionIcon : null} -- cgit v1.2.3-70-g09d2