From 4198c0fbcf8cb705bd09d9ba4a2d1c18590ff1bf Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Mon, 20 Jul 2020 18:25:26 -0500 Subject: framework for toolbar --- src/client/views/MainView.scss | 39 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 39 insertions(+) (limited to 'src/client/views/MainView.scss') diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss index e1ddbc533..556d26f6e 100644 --- a/src/client/views/MainView.scss +++ b/src/client/views/MainView.scss @@ -114,6 +114,45 @@ } } +.mainView-menuPanel { + + max-width: 80px; + background-color: rgb(105, 105, 105); + padding: 20px; + + .mainView-menuPanel-button { + width: 50px; + height: 50px; + padding: 10px; + pointer-events: all; + touch-action: none; + border-radius: inherit; + background: black; + border-radius: 100%; + transform-origin: top left; + margin-bottom: 15px; + margin-top: 5px; + + .mainView-menuPanel-button-label { + background: gray; + color: white; + margin-left: -10px; + border-radius: 8px; + width: 60px; + position: absolute; + text-align: center; + font-size: 8px; + margin-top: 4px; + letter-spacing: normal; + } + + svg { + width: 95% !important; + height: 95%; + } + } +} + .mainView-mainDiv { width: 100%; height: 100%; -- cgit v1.2.3-70-g09d2 From 3af8da49bffdb37534cfac2b5b11a8818a57691b Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Tue, 21 Jul 2020 02:21:33 -0500 Subject: tools in stripmenu working --- src/client/util/CurrentUserUtils.ts | 22 ++++- src/client/views/MainView.scss | 23 +++-- src/client/views/MainView.tsx | 190 ++++++++++++++++++++---------------- 3 files changed, 139 insertions(+), 96 deletions(-) (limited to 'src/client/views/MainView.scss') diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 4b8c342f1..8c551d6ea 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -37,6 +37,12 @@ export class CurrentUserUtils { @observable public static GuestWorkspace: Doc | undefined; @observable public static GuestMobile: Doc | undefined; + @observable public static toolsBtn: any | undefined; + @observable public static libraryBtn: any | undefined; + @observable public static searchBtn: any | undefined; + + @observable public static toolsStack: any | undefined; + // sets up the default User Templates - slideView, queryView, descriptionView static setupUserTemplateButtons(doc: Doc) { if (doc["template-button-query"] === undefined) { @@ -593,6 +599,8 @@ export class CurrentUserUtils { const creatorBtns = await CurrentUserUtils.setupCreatorButtons(doc); const templateBtns = CurrentUserUtils.setupUserTemplateButtons(doc); + doc["tabs-button-tools"] = undefined; + if (doc.myCreators === undefined) { doc.myCreators = new PrefetchProxy(Docs.Create.StackingDocument([creatorBtns, templateBtns], { title: "all Creators", _yMargin: 0, _autoHeight: true, _xMargin: 0, @@ -611,6 +619,9 @@ export class CurrentUserUtils { const toolsStack = new PrefetchProxy(Docs.Create.StackingDocument([doc.myCreators as Doc, doc.myColorPicker as Doc], { _width: 500, lockedPosition: true, _chromeStatus: "disabled", title: "tools stack", forceActive: true })) as any as Doc; + + CurrentUserUtils.toolsStack = toolsStack; + doc["tabs-button-tools"] = new PrefetchProxy(Docs.Create.ButtonDocument({ _width: 35, _height: 25, title: "Tools", _fontSize: "10pt", letterSpacing: "0px", textTransform: "unset", borderRounding: "5px 5px 0px 0px", boxShadow: "3px 3px 0px rgb(34, 34, 34)", @@ -624,6 +635,7 @@ export class CurrentUserUtils { })); } (doc["tabs-button-tools"] as Doc).sourcePanel; // prefetch sourcePanel + return doc["tabs-button-tools"] as Doc; } @@ -720,17 +732,17 @@ export class CurrentUserUtils { // setup the list of sidebar mode buttons which determine what is displayed in the sidebar static async setupSidebarButtons(doc: Doc) { const sidebarContainer = CurrentUserUtils.setupSidebarContainer(doc); - const toolsBtn = await CurrentUserUtils.setupToolsBtnPanel(doc, sidebarContainer); - const libraryBtn = CurrentUserUtils.setupLibraryPanel(doc, sidebarContainer); - const searchBtn = CurrentUserUtils.setupSearchBtnPanel(doc, sidebarContainer); + CurrentUserUtils.toolsBtn = await CurrentUserUtils.setupToolsBtnPanel(doc, sidebarContainer); + CurrentUserUtils.libraryBtn = CurrentUserUtils.setupLibraryPanel(doc, sidebarContainer); + CurrentUserUtils.searchBtn = CurrentUserUtils.setupSearchBtnPanel(doc, sidebarContainer); // Finally, setup the list of buttons to display in the sidebar if (doc["tabs-buttons"] === undefined) { - doc["tabs-buttons"] = new PrefetchProxy(Docs.Create.StackingDocument([libraryBtn, searchBtn, toolsBtn], { + doc["tabs-buttons"] = new PrefetchProxy(Docs.Create.StackingDocument([CurrentUserUtils.libraryBtn, CurrentUserUtils.searchBtn, CurrentUserUtils.toolsBtn], { _width: 500, _height: 80, boxShadow: "0 0", _pivotField: "title", _columnsHideIfEmpty: true, ignoreClick: true, _chromeStatus: "view-mode", title: "sidebar btn row stack", backgroundColor: "dimGray", })); - (toolsBtn.onClick as ScriptField).script.run({ this: toolsBtn }); + (CurrentUserUtils.toolsBtn.onClick as ScriptField).script.run({ this: CurrentUserUtils.toolsBtn }); } } diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss index 556d26f6e..957aa6cfe 100644 --- a/src/client/views/MainView.scss +++ b/src/client/views/MainView.scss @@ -116,9 +116,10 @@ .mainView-menuPanel { - max-width: 80px; + max-width: 95px; background-color: rgb(105, 105, 105); padding: 20px; + padding-right: 50px; .mainView-menuPanel-button { width: 50px; @@ -130,20 +131,30 @@ background: black; border-radius: 100%; transform-origin: top left; - margin-bottom: 15px; + margin-bottom: 23px; margin-top: 5px; + margin-right: 25px; + .mainView-menuPanel-button-label { - background: gray; - color: white; + background: rgb(168, 168, 168); + color: black; margin-left: -10px; border-radius: 8px; - width: 60px; + width: 65px; position: absolute; text-align: center; - font-size: 8px; + font-size: 9.5px; margin-top: 4px; letter-spacing: normal; + padding: 3px; + //margin-bottom: 23px; + } + + .mainView-menuPanel-button-icon { + width: 35px; + height: 35px; + padding: 5px; } svg { diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 944f4c8d4..287497df0 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -88,6 +88,8 @@ export class MainView extends React.Component { @computed public get mainFreeform(): Opt { return (docs => (docs && docs.length > 1) ? docs[1] : undefined)(DocListCast(this.mainContainer!.data)); } @computed public get sidebarButtonsDoc() { return Cast(this.userDoc["tabs-buttons"], Doc) as Doc; } + @observable public sidebarContent: any = this.userDoc?.["tabs-panelContainer"]; + public isPointerDown = false; componentDidMount() { @@ -396,8 +398,7 @@ export class MainView extends React.Component { mainContainerXf = () => this.sidebarScreenToLocal().translate(0, -this._buttonBarHeight); @computed get flyout() { - const sidebarContent = this.userDoc?.["tabs-panelContainer"]; - if (!(sidebarContent instanceof Doc)) { + if (!(this.sidebarContent instanceof Doc)) { return (null); } return
@@ -428,9 +429,10 @@ export class MainView extends React.Component { ContainingCollectionView={undefined} ContainingCollectionDoc={undefined} />
+
-
- - -
+
+
+ +
{this.docButtons} ; @@ -469,86 +471,104 @@ export class MainView extends React.Component { @computed get menuPanel() { return
- Open Workspaces
}> - - - - Open Catalog}> - - - - Open Recently Deleted}> - - - - Import }> - - - - Open Sharing Preferences}> - - - - Open Tools }> - - + {/* Open Workspaces}> */} + + {/* */} + + {/* Open Catalog}> */} + + {/* */} + + {/* Open Recently Deleted}> */} + + {/* */} + + {/* Import }> */} + + {/* */} + + {/* Open Sharing Preferences}> */} + + {/* */} + + {/* Open Tools }> */} + + {/* */} ; + } + @action + selectPanel = (str: string) => { + //this.sidebarContent = null; + + if (str === "tools") { + // this.userDoc?.["tabs-button-tools"] = undefined; + CurrentUserUtils.toolsBtn; + this.sidebarContent.proto = CurrentUserUtils.toolsStack; + } else if (str === "catalog") { + //this.sidebarContent = CurrentUserUtils.libraryBtn; + } } @computed get mainContent() { - const sidebar = this.userDoc?.["tabs-panelContainer"]; const n = (RichTextMenu.Instance?.Pinned ? 1 : 0) + (CollectionMenu.Instance?.Pinned ? 1 : 0); const height = `calc(100% - ${n * Number(ANTIMODEMENU_HEIGHT.replace("px", ""))}px)`; - return !this.userDoc || !(sidebar instanceof Doc) ? (null) : ( + return !this.userDoc || !(this.sidebarContent instanceof Doc) ? (null) : (
+ style={{ backgroundColor: this.defaultBackgroundColors(this.sidebarContent) }}> 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/views/MainView.scss') 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/views/MainView.scss') 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 { + +
); } } diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.scss b/src/client/views/collections/collectionFreeForm/PropertiesView.scss new file mode 100644 index 000000000..d4cc53bfa --- /dev/null +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.scss @@ -0,0 +1,32 @@ +.propertiesView { + + background-color: rgb(168, 168, 168); + height: 100%; + z-index: 1; + + .propertiesView-title { + background-color: rgb(134, 134, 134); + border-top: 1px solid black; + border-bottom: 1px solid black; + } + + .propertiesView-name { + border-top: 1px solid black; + border-bottom: 1px solid black; + } + + .propertiesView-settings { + border-top: 1px solid black; + border-bottom: 1px solid black; + } + + .propertiesView-fields { + border-top: 1px solid black; + border-bottom: 1px solid black; + } + + .propertiesView-layout { + border-top: 1px solid black; + border-bottom: 1px solid black; + } +} \ No newline at end of file diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx new file mode 100644 index 000000000..4306453ea --- /dev/null +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx @@ -0,0 +1,38 @@ +import React = require("react"); +import { observer } from "mobx-react"; +import "./PropertiesView.scss"; +import { observable, action } from "mobx"; +import { Doc } from "../../../../fields/Doc"; +import { DocumentView } from "../../nodes/DocumentView"; + + +// interface PropertiesViewProps { +// document: Doc; +// dataDoc: Doc; +// docView: DocumentView; +// width: number; +// } + +@observer +export class PropertiesView extends React.Component<{}> { + + render() { + return
+
+ Properties +
+
+ Properties +
+
+ Settings +
+
+ Fields +
+
+ Layout +
+
; + } +} \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 5b025537f60ef9222c0203db378c0298cd3dc86f Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Wed, 22 Jul 2020 12:57:05 -0500 Subject: adding fields to properties column --- src/client/util/CurrentUserUtils.ts | 8 +-- src/client/views/EditableView.tsx | 2 +- src/client/views/MainView.scss | 5 +- src/client/views/collections/CollectionView.tsx | 2 +- .../collectionFreeForm/PropertiesView.scss | 43 +++++++++++++--- .../collectionFreeForm/PropertiesView.tsx | 60 +++++++++++++++++----- 6 files changed, 93 insertions(+), 27 deletions(-) (limited to 'src/client/views/MainView.scss') diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 088e20a3e..1dd25ae30 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -660,7 +660,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, + treeViewTruncateTitleWidth: 150, hideFilterView: true, treeViewPreventOpen: false, lockedPosition: true, boxShadow: "0 0", dontRegisterChildViews: true, targetDropAction: "same" })) as any as Doc; @@ -679,7 +679,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, + treeViewTruncateTitleWidth: 150, hideFilterView: true, treeViewPreventOpen: false, lockedPosition: true, boxShadow: "0 0", dontRegisterChildViews: true, targetDropAction: "same" })) as any as Doc; @@ -703,7 +703,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, + treeViewTruncateTitleWidth: 150, hideFilterView: true, treeViewPreventOpen: false, lockedPosition: true, boxShadow: "0 0", dontRegisterChildViews: true, targetDropAction: "same" })) as any as Doc; @@ -718,7 +718,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, hideFilterView: true, + treeViewTruncateTitleWidth: 150, hideFilterView: true, treeViewPreventOpen: false, 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/EditableView.tsx b/src/client/views/EditableView.tsx index 25a87ab56..259a803a2 100644 --- a/src/client/views/EditableView.tsx +++ b/src/client/views/EditableView.tsx @@ -192,7 +192,7 @@ export class EditableView extends React.Component { return (this.props.contents instanceof ObjectField ? (null) :
- +
; } diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.scss b/src/client/views/collections/collectionFreeForm/PropertiesView.scss index d4cc53bfa..bb5b80abd 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.scss +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.scss @@ -1,32 +1,59 @@ .propertiesView { - background-color: rgb(168, 168, 168); + background-color: rgb(205, 205, 205); height: 100%; z-index: 1; + font-family: "Noto Sans"; + cursor: auto; + + //overflow-y: scroll; .propertiesView-title { - background-color: rgb(134, 134, 134); - border-top: 1px solid black; - border-bottom: 1px solid black; + background-color: rgb(159, 159, 159); + text-align: center; + font-size: 18px; + font-weight: bold; + padding-top: 12px; + padding-bottom: 12px; } .propertiesView-name { - border-top: 1px solid black; border-bottom: 1px solid black; + padding: 8.5px; + font-size: 12.5px; } .propertiesView-settings { - border-top: 1px solid black; border-bottom: 1px solid black; + padding: 8.5px; + font-size: 12.5px; + font-weight: bold; } .propertiesView-fields { - border-top: 1px solid black; border-bottom: 1px solid black; + padding: 8.5px; + + .propertiesView-fields-title { + font-size: 12.5px; + font-weight: bold; + padding-bottom: 7px; + } + + .propertiesView-fields-content { + font-size: 10px; + margin-left: 5px; + + &:hover { + cursor: pointer; + } + } } .propertiesView-layout { - border-top: 1px solid black; border-bottom: 1px solid black; + padding: 8.5px; + font-size: 12.5px; + font-weight: bold; } } \ No newline at end of file diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx index 4306453ea..bc78fccdf 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx @@ -1,20 +1,54 @@ import React = require("react"); import { observer } from "mobx-react"; import "./PropertiesView.scss"; -import { observable, action } from "mobx"; -import { Doc } from "../../../../fields/Doc"; +import { observable, action, computed } from "mobx"; +import { Doc, Field, DocListCast } from "../../../../fields/Doc"; import { DocumentView } from "../../nodes/DocumentView"; +import { ComputedField } from "../../../../fields/ScriptField"; +import { EditableView } from "../../EditableView"; +import { KeyValueBox } from "../../nodes/KeyValueBox"; +import { Cast } from "../../../../fields/Types"; +import { listSpec } from "../../../../fields/Schema"; -// interface PropertiesViewProps { -// document: Doc; -// dataDoc: Doc; -// docView: DocumentView; -// width: number; -// } +interface PropertiesViewProps { + document: Doc; + //dataDoc: Doc; + //docView: DocumentView; +} @observer -export class PropertiesView extends React.Component<{}> { +export class PropertiesView extends React.Component { + + @computed get expandedField() { + const ids: { [key: string]: string } = {}; + const doc = this.props.document; + 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)} + />; + + rows.push(
+ {key + ":"} +   + {contentElement} +
); + } + return rows; + } + + @computed get layoutPreview() { + return "layout"; + } render() { return
@@ -22,16 +56,18 @@ export class PropertiesView extends React.Component<{}> { Properties
- Properties + Collection
Settings
- Fields +
Fields
+
{this.expandedField}
- Layout +
Layout
+
{this.layoutPreview}
; } -- cgit v1.2.3-70-g09d2 From 831fbc76ec1c6e9829da547cdef791ac087677d9 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Thu, 23 Jul 2020 11:08:54 -0500 Subject: moved right panel into mainview --- src/client/util/SelectionManager.ts | 24 +++ src/client/views/MainView.scss | 38 ++++ src/client/views/MainView.tsx | 65 ++++++- src/client/views/PropertiesButtons.tsx | 39 +++-- src/client/views/collections/CollectionView.scss | 34 ---- src/client/views/collections/CollectionView.tsx | 49 +----- .../collectionFreeForm/PropertiesView.tsx | 193 +++++++++++++-------- 7 files changed, 262 insertions(+), 180 deletions(-) (limited to 'src/client/views/MainView.scss') diff --git a/src/client/util/SelectionManager.ts b/src/client/util/SelectionManager.ts index 9a968aeda..6fb758eac 100644 --- a/src/client/util/SelectionManager.ts +++ b/src/client/util/SelectionManager.ts @@ -12,9 +12,14 @@ 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) { @@ -33,6 +38,15 @@ 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); @@ -41,10 +55,16 @@ 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(); @@ -56,6 +76,10 @@ 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.scss b/src/client/views/MainView.scss index 55280b231..f64129600 100644 --- a/src/client/views/MainView.scss +++ b/src/client/views/MainView.scss @@ -102,6 +102,44 @@ user-select: none; } +.mainView-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; + + .mainView-propertiesDragger-icon { + width: 10px; + height: 10px; + float: left; + margin-left: 3px; + padding-top: 19px; + } + + &:hover { + cursor: pointer; + } +} + +.mainiView-propertiesView { + display: flex; + flex-direction: column; + width: 200px; + height: 100%; + position: absolute; + right: 0; + top: 0; + border-left: solid 1px; + z-index: 10; +} + .mainView-flyoutContainer { display: flex; flex-direction: column; diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 766626a82..88f072493 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -21,10 +21,10 @@ 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 } from '../../fields/Types'; +import { BoolCast, Cast, FieldValue, StrCast, NumCast } from '../../fields/Types'; import { TraceMobx } from '../../fields/util'; import { CurrentUserUtils } from '../util/CurrentUserUtils'; -import { emptyFunction, emptyPath, returnFalse, returnOne, returnZero, returnTrue, Utils, returnEmptyFilter } from '../../Utils'; +import { emptyFunction, emptyPath, returnFalse, returnOne, returnZero, returnTrue, Utils, returnEmptyFilter, setupMoveUpEvents } from '../../Utils'; import GoogleAuthenticationManager from '../apis/GoogleAuthenticationManager'; import { DocServer } from '../DocServer'; import { Docs, DocumentOptions } from '../documents/Documents'; @@ -66,7 +66,9 @@ import { LinkDescriptionPopup } from './nodes/LinkDescriptionPopup'; import FormatShapePane from "./collections/collectionFreeForm/FormatShapePane"; import HypothesisAuthenticationManager from '../apis/HypothesisAuthenticationManager'; import CollectionMenu from './collections/CollectionMenu'; -import { Tooltip } from '@material-ui/core'; +import { Tooltip, AccordionActions } from '@material-ui/core'; +import { PropertiesView } from './collections/collectionFreeForm/PropertiesView'; +import { SelectionManager } from '../util/SelectionManager'; @observer export class MainView extends React.Component { @@ -90,9 +92,24 @@ export class MainView extends React.Component { @observable public sidebarContent: any = this.userDoc?.["tabs-panelContainer"]; @observable public panelContent: string = "none"; + @observable public showProperties: boolean = false; + @computed get selectedDocumentView() { return SelectionManager.LastSelection(); } + @observable selectedDoc: Doc | undefined = this.selectedDocumentView?.props.Document; + @observable selectedDataDoc: Doc | undefined = this.selectedDocumentView?.props.DataDoc ? this.selectedDocumentView.props.DataDoc : this.selectedDoc; public isPointerDown = false; + @observable _propertiesWidth: number = 0; + propertiesWidth = () => Math.max(0, Math.min(this._panelWidth - 50, this._propertiesWidth)); + + @computed get propertiesIcon() { + if (this.propertiesWidth() < 10) { + return "chevron-left"; + } else { + return "chevron-right"; + } + } + componentDidMount() { DocServer.setPlaygroundFields(["dataTransition", "_viewTransition", "_panX", "_panY", "_viewScale", "_viewType", "_chromeStatus"]); // can play with these fields on someone else's @@ -216,7 +233,7 @@ export class MainView extends React.Component { const freeformOptions: DocumentOptions = { x: 0, y: 400, - _width: this._panelWidth * .7, + _width: this._panelWidth * .7 - this._propertiesWidth, _height: this._panelHeight, title: "Collection " + workspaceCount, }; @@ -282,10 +299,13 @@ export class MainView extends React.Component { @action onResize = (r: any) => { - this._panelWidth = r.offset.width; + this._panelWidth = r.offset.width - this._propertiesWidth; this._panelHeight = r.offset.height; } - getPWidth = () => this._panelWidth; + + @action + getPWidth = () => this._panelWidth - this._propertiesWidth; + getPHeight = () => this._panelHeight; getContentsHeight = () => this._panelHeight - this._buttonBarHeight; @@ -329,7 +349,6 @@ export class MainView extends React.Component { NativeWidth={returnZero} PanelWidth={this.getPWidth} PanelHeight={this.getPHeight} - renderDepth={0} focus={emptyFunction} parentActive={returnTrue} whenActiveChanged={emptyFunction} @@ -570,6 +589,30 @@ export class MainView extends React.Component { } } + @action + 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); + } + + @computed get propertiesView() { + TraceMobx(); + return this._propertiesWidth === 0 ? (null) : +
+ +
; + } + @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)`; @@ -606,6 +649,14 @@ 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 f19dfd26aa3232f2fe52ef5e631be208706fca11 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Thu, 23 Jul 2020 13:09:37 -0500 Subject: menu buttons to documents --- src/client/views/MainView.scss | 12 +- src/client/views/MainView.tsx | 293 +++++++++++++-------- .../views/collections/CollectionTreeView.tsx | 1 + 3 files changed, 187 insertions(+), 119 deletions(-) (limited to 'src/client/views/MainView.scss') diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss index f64129600..bd074adea 100644 --- a/src/client/views/MainView.scss +++ b/src/client/views/MainView.scss @@ -155,7 +155,7 @@ .mainView-menuPanel { max-width: 95px; - background-color: rgb(105, 105, 105); + background-color: #323232; padding: 20px; padding-right: 50px; @@ -211,8 +211,8 @@ pointer-events: all; touch-action: none; border-radius: inherit; - background: dimgray; - background-color: dimgray; + background: #323232; + background-color: #323232; border-radius: 100%; transform-origin: top left; margin-bottom: 20px; @@ -221,8 +221,8 @@ margin-right: 25px; .mainView-menuPanel-bottomButton-label { - background: dimgray; - color: black; + background: #323232; + color: white; margin-left: -10px; border-radius: 8px; width: 65px; @@ -238,7 +238,7 @@ .mainView-menuPanel-bottomButton-icon { width: 50px; height: 50px; - color: black; + color: white; } svg { diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 88f072493..9e8fa545f 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -53,7 +53,7 @@ import { RadialMenu } from './nodes/RadialMenu'; import { OverlayView } from './OverlayView'; import PDFMenu from './pdf/PDFMenu'; import { PreviewCursor } from './PreviewCursor'; -import { ScriptField } from '../../fields/ScriptField'; +import { ScriptField, ComputedField } from '../../fields/ScriptField'; import { TimelineMenu } from './animationtimeline/TimelineMenu'; import { SnappingManager } from '../util/SnappingManager'; import { FormattedTextBox } from './nodes/formattedText/FormattedTextBox'; @@ -69,6 +69,8 @@ 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'; @observer export class MainView extends React.Component { @@ -333,7 +335,8 @@ export class MainView extends React.Component { } } @computed get mainDocView() { - return ; } @computed get dockingContent() { @@ -449,123 +453,185 @@ export class MainView extends React.Component { ContainingCollectionView={undefined} ContainingCollectionDoc={undefined} />
- {/*
- - -
*/} {this.docButtons}
; } - @computed get menuPanel() { + 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; + return
- - - - - - - - - - - - - - - - - + 100} + PanelHeight={this.getContentsHeight} + renderDepth={0} + focus={emptyFunction} + backgroundColor={this.defaultBackgroundColors} + parentActive={returnTrue} + whenActiveChanged={emptyFunction} + bringToFront={emptyFunction} + docFilters={returnEmptyFilter} + ContainingCollectionView={undefined} + ContainingCollectionDoc={undefined} />
; } + @observable menuPanel: any; + + // @computed get menuPanel() { + // return
+ // + + // + + // + + // + + // + + // + + // + + // + + // + //
; + // } + @action selectPanel = (str: string) => { if (this.panelContent === str && this.flyoutWidth !== 0) { @@ -587,6 +653,7 @@ export class MainView extends React.Component { this.sidebarContent.proto = CurrentUserUtils.searchStack; } } + return true; } @action @@ -623,7 +690,7 @@ export class MainView extends React.Component { height, width: (FormatShapePane.Instance?.Pinned) ? `calc(100% - 200px)` : "100%" }} > - {this.menuPanel} + {this.setupMenuPanel}
{this.flyoutWidth !== 0 ?
ScriptField; onChildClick?: () => ScriptField; ignoreFields?: string[]; + alwaysOpen?: boolean; } @observer -- cgit v1.2.3-70-g09d2 From 171f8a5ce7ba35bb8a4045411f925a469c460774 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Thu, 23 Jul 2020 18:33:52 -0500 Subject: fixed right handle issues --- src/client/util/CurrentUserUtils.ts | 21 +- src/client/views/MainView.scss | 5 +- src/client/views/MainView.tsx | 304 +++++++++++---------- .../collectionFreeForm/PropertiesView.scss | 1 - src/client/views/nodes/DocumentView.tsx | 12 +- 5 files changed, 180 insertions(+), 163 deletions(-) (limited to 'src/client/views/MainView.scss') diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index c89f9b8fe..d41aa4b58 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -498,14 +498,14 @@ export class CurrentUserUtils { 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: "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: "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: "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: "Settings", icon: "cog", click: 'SettingsManager.Instance.open()' }, ]; } @@ -514,7 +514,7 @@ export class CurrentUserUtils { if (doc.menuStackBtns === undefined) { const buttons = CurrentUserUtils.menuBtnDescriptions(); const menuBtns = buttons.map(({ title, icon, click, backgroundColor }) => Docs.Create.FontIconDocument({ - _width: 100, _height: 100, + _width: 40, _height: 40, icon, title, onClick: click ? ScriptField.MakeScript(click) : undefined, @@ -522,18 +522,19 @@ export class CurrentUserUtils { })); doc.menuStackBtns = new PrefetchProxy(Docs.Create.MasonryDocument(menuBtns, { - _xMargin: 0, _autoHeight: true, _width: 100, _columnWidth: 60, ignoreClick: true, lockedPosition: true, _chromeStatus: "disabled", + _xMargin: 0, _autoHeight: true, _width: 80, _columnWidth: 50, 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], { - title: "all Creators", _yMargin: 0, _autoHeight: true, _xMargin: 0, - _width: 100, ignoreClick: true, lockedPosition: true, _chromeStatus: "disabled", + _yMargin: 0, _autoHeight: true, _xMargin: 0, + _width: 80, 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 bd074adea..10e7f471b 100644 --- a/src/client/views/MainView.scss +++ b/src/client/views/MainView.scss @@ -137,7 +137,8 @@ right: 0; top: 0; border-left: solid 1px; - z-index: 10; + z-index: 10000; + cursor: auto; } .mainView-flyoutContainer { @@ -160,7 +161,7 @@ padding-right: 50px; overflow-y: scroll; - overflow-x: hidden; + overflow-x: clip; .mainView-menuPanel-button { width: 45px; diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index bc20059e8..beee9289e 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -84,7 +84,7 @@ export class MainView extends React.Component { @observable private _panelWidth: number = 0; @observable private _panelHeight: number = 0; @observable private _flyoutTranslate: boolean = false; - @observable public flyoutWidth: number = 250; + @observable public flyoutWidth: number = 275; private get darkScheme() { return BoolCast(Cast(this.userDoc?.activeWorkspace, Doc, null)?.darkScheme); } @computed private get userDoc() { return Doc.UserDoc(); } @@ -96,6 +96,11 @@ export class MainView extends React.Component { @observable public panelContent: string = "none"; @observable public showProperties: boolean = false; public isPointerDown = false; + @computed get selectedDocumentView() { + if (SelectionManager.SelectedDocuments().length) { + return SelectionManager.SelectedDocuments()[0]; + } else { return undefined; } + } @observable _propertiesWidth: number = 0; propertiesWidth = () => Math.max(0, Math.min(this._panelWidth - 50, this._propertiesWidth)); @@ -447,148 +452,152 @@ export class MainView extends React.Component { bringToFront={emptyFunction} docFilters={returnEmptyFilter} ContainingCollectionView={undefined} - ContainingCollectionDoc={undefined} /> + ContainingCollectionDoc={undefined} + relative={true} + />
{this.docButtons}
; } - @computed get menuPanel() { - - return
- 100} - PanelHeight={this.getContentsHeight} - renderDepth={0} - focus={emptyFunction} - backgroundColor={this.defaultBackgroundColors} - parentActive={returnTrue} - whenActiveChanged={emptyFunction} - bringToFront={emptyFunction} - docFilters={returnEmptyFilter} - ContainingCollectionView={undefined} - ContainingCollectionDoc={undefined} /> -
; - } - // @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 ee3d12fbf6306da958ae6546260921f5fee5553b Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Fri, 24 Jul 2020 16:32:45 -0500 Subject: changing menu layout --- src/client/views/MainView.scss | 121 ++++++++++--------- src/client/views/MainView.tsx | 132 +++++++++------------ .../collectionFreeForm/PropertiesView.scss | 8 +- 3 files changed, 123 insertions(+), 138 deletions(-) (limited to 'src/client/views/MainView.scss') diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss index 10e7f471b..51548bf58 100644 --- a/src/client/views/MainView.scss +++ b/src/client/views/MainView.scss @@ -156,45 +156,39 @@ .mainView-menuPanel { max-width: 95px; - background-color: #323232; - padding: 20px; - padding-right: 50px; - + background-color: black; + padding: 15px; + /* padding-right: 50px; */ overflow-y: scroll; - overflow-x: clip; + overflow-x: hidden; .mainView-menuPanel-button { - width: 45px; - height: 45px; - padding: 10px; - pointer-events: all; + width: 60px; + padding: 7.5px; touch-action: none; - border-radius: inherit; background: black; - border-radius: 100%; transform-origin: top left; - margin-bottom: 23px; + margin-bottom: 5px; margin-top: 5px; - margin-right: 25px; + border-radius: 8px; .mainView-menuPanel-button-label { - background: rgb(168, 168, 168); - color: black; - margin-left: -13px; + color: white; + margin-left: -6px; border-radius: 8px; - width: 65px; + width: 55px; position: relative; text-align: center; font-size: 9.5px; - margin-top: 4px; + margin-top: 1px; letter-spacing: normal; padding: 3px; - //margin-bottom: 23px; + background-color: inherit; } .mainView-menuPanel-button-icon { - width: 35px; + width: auto; height: 35px; padding: 5px; } @@ -203,50 +197,55 @@ width: 95% !important; height: 95%; } - } - - .mainView-menuPanel-bottomButton { - width: 50px; - height: 50px; - padding: 10px; - pointer-events: all; - touch-action: none; - border-radius: inherit; - background: #323232; - background-color: #323232; - border-radius: 100%; - transform-origin: top left; - margin-bottom: 20px; - margin-top: 5px; - - margin-right: 25px; - - .mainView-menuPanel-bottomButton-label { - background: #323232; - 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%; + &:hover { + background: rgb(61, 61, 61); + cursor: pointer; } } + + // .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 { diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 4a80f57b3..c08717947 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -71,6 +71,7 @@ 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 { @@ -84,7 +85,7 @@ export class MainView extends React.Component { @observable private _panelWidth: number = 0; @observable private _panelHeight: number = 0; @observable private _flyoutTranslate: boolean = false; - @observable public flyoutWidth: number = 275; + @observable public flyoutWidth: number = 0; private get darkScheme() { return BoolCast(Cast(this.userDoc?.activeWorkspace, Doc, null)?.darkScheme); } @computed private get userDoc() { return Doc.UserDoc(); } @@ -377,8 +378,11 @@ export class MainView extends React.Component { } _canClick = false; + + @action onPointerDown = (e: React.PointerEvent) => { if (this._flyoutTranslate) { + this.panelContent = "none"; this._canClick = true; this._flyoutSizeOnDown = e.clientX; document.removeEventListener("pointermove", this.onPointerMove); @@ -494,76 +498,59 @@ export class MainView extends React.Component { @computed get menuPanel() { return
- +
this.selectPanel("workspace")}> + +
Workspace
+
- +
this.selectPanel("catalog")}> + +
Catalog
+
- +
this.selectPanel("deleted")}> + +
Recently Closed
+
- +
- +
- + +
Tools
+
- + */} - +
this.selectPanel("help")} > + +
Help
+
- + onClick={() => SettingsManager.Instance.open()}> + +
Settings
+
; } diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.scss b/src/client/views/collections/collectionFreeForm/PropertiesView.scss index e6bc3f15a..b40a08086 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.scss +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.scss @@ -5,7 +5,7 @@ font-family: "Noto Sans"; cursor: auto; - //overflow-y: scroll; + overflow-y: scroll; .propertiesView-title { background-color: rgb(159, 159, 159); @@ -76,6 +76,7 @@ &:hover { background-color: rgb(158, 158, 158); + cursor: pointer; } } @@ -87,6 +88,7 @@ &:hover { color: rgb(131, 131, 131); + cursor: pointer; } } @@ -124,6 +126,10 @@ border: none; background-color: inherit; width: 75px; + + &:hover { + cursor: pointer; + } } } -- cgit v1.2.3-70-g09d2 From eab29b953a24659f16901fa10522f3787212ccc0 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Sun, 26 Jul 2020 11:25:48 -0500 Subject: merge fix again --- src/client/views/MainView.scss | 2 +- src/client/views/PropertiesButtons.tsx | 70 ++++++++++++++++++++++++++++++++++ 2 files changed, 71 insertions(+), 1 deletion(-) (limited to 'src/client/views/MainView.scss') diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss index 51548bf58..792cb5b1f 100644 --- a/src/client/views/MainView.scss +++ b/src/client/views/MainView.scss @@ -137,7 +137,7 @@ right: 0; top: 0; border-left: solid 1px; - z-index: 10000; + z-index: 100000; cursor: auto; } diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx index 32a98b072..d2f6b1155 100644 --- a/src/client/views/PropertiesButtons.tsx +++ b/src/client/views/PropertiesButtons.tsx @@ -354,6 +354,73 @@ export class PropertiesButtons extends React.Component<{}, {}> { ; } + @computed + get onClickButton() { + if (this.selectedDoc) { + return
Choose onClick behavior
}> +
+ +
e.stopPropagation()} > + {} +
+ +
; + } else { + return null; + } + } + + @computed + get onClickFlyout() { + return
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
; + + // onClicks.push({ description: "Enter Portal", event: this.makeIntoPortal, icon: "window-restore" }); + // onClicks.push({ description: "Toggle Detail", event: () => this.Document.onClick = ScriptField.MakeScript(`toggleDetail(self, "${this.Document.layoutKey}")`), icon: "window-restore" }); + // onClicks.push({ description: this.Document.ignoreClick ? "Select" : "Do Nothing", event: () => this.Document.ignoreClick = !this.Document.ignoreClick, icon: this.Document.ignoreClick ? "unlock" : "lock" }); + // onClicks.push({ description: this.Document.isLinkButton ? "Remove Follow Behavior" : "Follow Link in Place", event: this.toggleFollowInPlace, icon: "concierge-bell" }); + // onClicks.push({ description: this.Document.isLinkButton ? "Remove Follow Behavior" : "Follow Link on Right", event: this.toggleFollowOnRight, icon: "concierge-bell" }); + // onClicks.push({ description: this.Document.isLinkButton || this.onClickHandler ? "Remove Click Behavior" : "Follow Link", event: this.toggleLinkButtonBehavior, icon: "concierge-bell" }); + // onClicks.push({ description: "Edit onClick Script", event: () => UndoManager.RunInBatch(() => DocUtils.makeCustomViewClicked(this.props.Document, undefined, "onClick"), "edit onClick"), icon: "edit" }); + } + render() { if (!this.selectedDoc) return (null); @@ -388,6 +455,9 @@ export class PropertiesButtons extends React.Component<{}, {}> {
{this.sharingButton}
+
+ {this.onClickButton} +
{this.considerGoogleDocsPush}
-- cgit v1.2.3-70-g09d2 From a607928d563520fc0a07c559334ea7039d269d3a Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Sun, 26 Jul 2020 16:19:23 -0500 Subject: overflow, open in tab bug fixes --- src/client/views/DocumentDecorations.tsx | 2 +- src/client/views/MainView.scss | 1 + src/client/views/MainView.tsx | 9 +++++---- src/client/views/PropertiesButtons.scss | 1 + src/client/views/PropertiesButtons.tsx | 23 ++++++++++++++++++++++ .../collectionFreeForm/PropertiesView.scss | 5 +++-- src/client/views/nodes/DocumentView.tsx | 2 ++ 7 files changed, 36 insertions(+), 7 deletions(-) (limited to 'src/client/views/MainView.scss') diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index 87222e942..c889557ba 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -619,7 +619,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
{"_"}
} -
Open Document In Tab
} placement="top">
+
Open Document In Tab
} placement="top">
{SelectionManager.SelectedDocuments().length === 1 ? : "..."}
//
; // } @@ -519,10 +520,10 @@ export class MainView extends React.Component {
this.selectPanel("deleted")}> -
Recently Closed
+ style={{ color: this.panelContent === "deleted" ? "black" : "white" }}> Recently Used
{ // onClicks.push({ description: "Edit onClick Script", event: () => UndoManager.RunInBatch(() => DocUtils.makeCustomViewClicked(this.props.Document, undefined, "onClick"), "edit onClick"), icon: "edit" }); } + @computed + get googlePhotosButton() { + const targetDoc = this.selectedDoc; + return !targetDoc ? (null) :
{"Export to Google Photos"}
}> +
{ + if (this.selectedDocumentView) { + GooglePhotos.Export.CollectionToAlbum({ collection: this.selectedDocumentView.Document }).then(console.log) + } + }}> + {} +
+ ; + } + render() { if (!this.selectedDoc) return (null); @@ -428,6 +447,7 @@ export class PropertiesButtons extends React.Component<{}, {}> { const isText = this.selectedDoc[Doc.LayoutFieldKey(this.selectedDoc)] instanceof RichTextField; const considerPull = isText && this.considerGoogleDocsPull; const considerPush = isText && this.considerGoogleDocsPush; + const isImage = this.selectedDoc[Doc.LayoutFieldKey(this.selectedDoc)] instanceof ImageField; return
{this.templateButton} @@ -464,6 +484,9 @@ export class PropertiesButtons extends React.Component<{}, {}> {
{this.considerGoogleDocsPull}
+
+ {this.googlePhotosButton} +
; } diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.scss b/src/client/views/collections/collectionFreeForm/PropertiesView.scss index 7b8f116b7..99db0022e 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.scss +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.scss @@ -5,7 +5,8 @@ font-family: "Noto Sans"; cursor: auto; - overflow-y: scroll; + overflow-x: visible; + overflow-y: visible; .propertiesView-title { background-color: rgb(159, 159, 159); @@ -23,7 +24,7 @@ .propertiesView-title-icon { width: 20px; height: 20px; - padding-left: 32px; + padding-left: 38px; margin-top: -5px; &:hover { diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 0cfb12f95..6aceec90e 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -101,6 +101,7 @@ export interface DocumentViewProps { radialMenu?: String[]; display?: string; relative?: boolean; + scriptContext?: any; } @observer @@ -323,6 +324,7 @@ export class DocumentView extends DocComponent(Docu const func = () => this.onClickHandler.script.run({ this: this.layoutDoc, self: this.rootDoc, + scriptContext: this.props.scriptContext, thisContainer: this.props.ContainingCollectionDoc, shiftKey: e.shiftKey }, console.log); if (this.props.Document !== Doc.UserDoc()["dockedBtn-undo"] && this.props.Document !== Doc.UserDoc()["dockedBtn-redo"]) { -- cgit v1.2.3-70-g09d2 From f58fb7428f6eeca6b41beb59df244c7c50c876fa Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Mon, 27 Jul 2020 13:37:01 -0500 Subject: bug fixes and adding to menu UI --- src/client/views/MainView.scss | 165 +++++++++++---------- src/client/views/MainView.tsx | 137 ++++++++--------- src/client/views/PropertiesButtons.scss | 5 +- src/client/views/PropertiesButtons.tsx | 4 +- .../views/nodes/formattedText/FormattedTextBox.tsx | 2 +- 5 files changed, 162 insertions(+), 151 deletions(-) (limited to 'src/client/views/MainView.scss') diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss index f1042ff50..7318d451b 100644 --- a/src/client/views/MainView.scss +++ b/src/client/views/MainView.scss @@ -139,7 +139,6 @@ border-left: solid 1px; z-index: 100000; cursor: auto; - overflow-x: visible; } .mainView-flyoutContainer { @@ -156,99 +155,105 @@ .mainView-menuPanel { - max-width: 95px; + max-width: 60px; background-color: black; - padding: 15px; - /* padding-right: 50px; */ - overflow-y: scroll; - overflow-x: hidden; + //overflow-y: scroll; + //overflow-x: hidden; + .mainView-menuPanel-button { - width: 60px; - padding: 7.5px; + 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-bottom: 5px; */ margin-top: 5px; margin-right: 25px; border-radius: 8px; + + &:hover { + background: rgb(61, 61, 61); + cursor: pointer; + } + } + } + + .mainView-menuPanel-button-label { + color: white; + margin-left: px; + 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; + } - .mainView-menuPanel-button-label { - color: white; - margin-left: -6px; - border-radius: 8px; - width: 55px; - position: relative; - text-align: center; - font-size: 9.5px; - margin-top: 1px; - letter-spacing: normal; - padding: 3px; - background-color: inherit; - } - - .mainView-menuPanel-button-icon { - width: auto; - height: 35px; - padding: 5px; - } - - svg { - width: 95% !important; - height: 95%; - } - - &:hover { - background: rgb(61, 61, 61); - cursor: pointer; - } + .mainView-menuPanel-button-icon { + width: auto; + height: 35px; + padding: 5px; } - // .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%; - // } - // } + svg { + width: 95% !important; + height: 95%; + } } +// .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; diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 153df7d9d..e06bfd0b0 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -423,7 +423,8 @@ export class MainView extends React.Component { doc.dockingConfig ? this.openWorkspace(doc) : CollectionDockingView.AddRightSplit(doc, libraryPath); } - sidebarScreenToLocal = () => new Transform(0, (RichTextMenu.Instance.Pinned ? -35 : 0) + (CollectionMenu.Instance.Pinned ? -35 : 0), 1); + sidebarScreenToLocal = () => new Transform(0, (CollectionMenu.Instance.Pinned ? -35 : 0), 1); + //sidebarScreenToLocal = () => new Transform(0, (RichTextMenu.Instance.Pinned ? -35 : 0) + (CollectionMenu.Instance.Pinned ? -35 : 0), 1); mainContainerXf = () => this.sidebarScreenToLocal().translate(0, -this._buttonBarHeight); @computed get flyout() { @@ -499,82 +500,85 @@ export class MainView extends React.Component { @computed get menuPanel() { return
-
this.selectPanel("workspace")}> - -
Workspace
+
+
this.selectPanel("workspace")}> + +
Workspace
+
-
this.selectPanel("catalog")}> - -
Catalog
+
+
this.selectPanel("catalog")}> + +
Catalog
+
-
this.selectPanel("deleted")}> - -
Recently Used
+
+
this.selectPanel("deleted")}> + +
Recently Used
+
-
this.selectPanel("upload")}> - -
Import
+
+
this.selectPanel("upload")}> + +
Import
+
-
this.selectPanel("sharing")} - onClick={() => GroupManager.Instance.open()}> - -
Sharing
+
+
this.selectPanel("sharing")} + onClick={() => GroupManager.Instance.open()}> + +
Sharing
+
-
this.selectPanel("tools")} - style={{ - backgroundColor: this.panelContent === "tools" ? "lightgrey" : "", - marginBottom: "70px" - }}> - -
Tools
+
+
this.selectPanel("tools")} + style={{ + backgroundColor: this.panelContent === "tools" ? "lightgrey" : "", + }}> + +
Tools
+
- {/* */} - -
this.selectPanel("help")} > - -
Help
+
+
this.selectPanel("help")} > + +
Help
+
-
this.selectPanel("settings")} - onClick={() => SettingsManager.Instance.open()}> - -
Settings
+
+
this.selectPanel("settings")} + onClick={() => SettingsManager.Instance.open()}> + +
Settings
+
; } @@ -628,7 +632,8 @@ export class MainView extends React.Component { } @computed get mainContent() { - const n = (RichTextMenu.Instance?.Pinned ? 0 : 0) + (CollectionMenu.Instance?.Pinned ? 1 : 0); + //const n = (RichTextMenu.Instance?.Pinned ? 1 : 0) + (CollectionMenu.Instance?.Pinned ? 1 : 0); + 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; @@ -684,7 +689,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); @@ -799,7 +804,7 @@ export class MainView extends React.Component { {/* {this.search} */} - {/* */} +
{LinkDescriptionPopup.descriptionPopup ? : null} {DocumentLinksButton.EditLink ? : (null)} {LinkDocPreview.LinkInfo ? { @computed get selectedDoc() { return this.selectedDocumentView?.rootDoc; } @computed get dataDoc() { return this.selectedDocumentView?.dataDoc; } - @observable public onClick = this.selectedDoc?.onClickBehavior ? this.selectedDoc?.onClickBehavior : "nothing"; + @computed get onClick() { return this.selectedDoc?.onClickBehavior ? this.selectedDoc?.onClickBehavior : "nothing"; } public startPullOutcome = action((success: boolean) => { if (!this._pullAnimating) { @@ -379,7 +379,7 @@ export class PropertiesButtons extends React.Component<{}, {}> { @action handleOptionChange = (e: any) => { const value = e.target.value; - this.onClick = e.target.value; + this.selectedDoc?.onClickBehavior = e.target.value; if (value === "nothing") { this.selectedDocumentView?.noOnClick; } else if (value === "enterPortal") { diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx index 6b6fc5da2..974dabd5c 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx @@ -1268,7 +1268,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp this.doLinkOnDeselect(); // move the richtextmenu offscreen - if (!RichTextMenu.Instance.Pinned) RichTextMenu.Instance.delayHide(); + //if (!RichTextMenu.Instance.Pinned) RichTextMenu.Instance.delayHide(); } _lastTimedMark: Mark | undefined = undefined; -- 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/views/MainView.scss') 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 4224ebd13aec9e01f1fe73c935c40adb089dbc69 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Wed, 29 Jul 2020 23:11:35 -0500 Subject: sally UI changes --- src/client/views/ContextMenuItem.tsx | 4 +- src/client/views/DocumentDecorations.tsx | 4 +- src/client/views/MainView.scss | 9 + src/client/views/MainView.tsx | 251 +++++++++++---------- src/client/views/PropertiesButtons.tsx | 25 +- .../views/collections/CollectionSchemaView.tsx | 2 +- src/client/views/collections/CollectionView.tsx | 2 +- src/client/views/collections/SchemaTable.tsx | 6 +- .../collectionFreeForm/CollectionFreeFormView.tsx | 8 +- src/client/views/linking/LinkMenuItem.tsx | 1 + src/client/views/nodes/DocumentView.tsx | 17 +- 11 files changed, 189 insertions(+), 140 deletions(-) (limited to 'src/client/views/MainView.scss') diff --git a/src/client/views/ContextMenuItem.tsx b/src/client/views/ContextMenuItem.tsx index 81432968d..7e233ec04 100644 --- a/src/client/views/ContextMenuItem.tsx +++ b/src/client/views/ContextMenuItem.tsx @@ -80,7 +80,7 @@ export class ContextMenuItem extends React.Component +
{this.props.icon ? ( @@ -95,7 +95,7 @@ export class ContextMenuItem extends React.Component window.innerHeight * 2 / 3 ? "flex-end" : "center"; const marginTop = !this.overItem ? "" : this._overPosY < window.innerHeight / 3 ? "20px" : this._overPosY > window.innerHeight * 2 / 3 ? "-20px" : ""; const submenu = !this.overItem ? (null) : -
+
{this._items.map(prop => )}
; if (!("noexpand" in this.props)) { diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index ff91e401f..85dd40173 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -577,9 +577,9 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
} : <> - {minimal ? (null) :
Show context menu
} placement="top">
+ {/* {minimal ? (null) :
Show context menu
} placement="top">
-
} +
} */}
{`${this.selectionTitle}`}
diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss index 8bf38ebe9..fe01c27a3 100644 --- a/src/client/views/MainView.scss +++ b/src/client/views/MainView.scss @@ -314,6 +314,15 @@ display: flex; flex-direction: column; z-index: 2; + + .mainView-libraryFlyout-close { + right: 6; + top: 5; + position: absolute; + margin-right: 6px; + z-index: 10; + margin-bottom: 10; + } } .mainView-expandFlyoutButton { diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 5f7f7ca03..326082927 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -63,6 +63,8 @@ import { SelectionManager } from '../util/SelectionManager'; import { PrefetchProxy } from '../../fields/Proxy'; import { DragManager } from '../util/DragManager'; import { discovery_v1, dialogflow_v2beta1 } from 'googleapis'; +import { undo } from 'prosemirror-history'; +import { undoBatch } from '../util/UndoManager'; @observer export class MainView extends React.Component { @@ -426,12 +428,18 @@ export class MainView extends React.Component { //sidebarScreenToLocal = () => new Transform(0, (RichTextMenu.Instance.Pinned ? -35 : 0) + (CollectionMenu.Instance.Pinned ? -35 : 0), 1); mainContainerXf = () => this.sidebarScreenToLocal().translate(0, -this._buttonBarHeight); + @computed get closePosition() { return 55 + this.flyoutWidth } @computed get flyout() { if (!(this.sidebarContent instanceof Doc)) { return (null); } return
+ {this.flyoutWidth > 0 ?
+ +
: null} + ; } - @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
- //
- //
+ // 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} + // /> //
; // } - @action + @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 selectPanel = (str: string) => { if (this.panelContent === str && this.flyoutWidth !== 0) { - this.panelContent = "none"; - this.flyoutWidth = 0; + this.closeFlyout(); } else { this.panelContent = str; MainView.expandFlyout(); @@ -606,7 +613,13 @@ export class MainView extends React.Component { return true; } - @action + @action @undoBatch + closeFlyout = () => { + this.panelContent = "none"; + this.flyoutWidth = 0; + } + + @action @undoBatch selectMenu = (str: string) => { if (CurrentUserUtils.panelContent === str && this.flyoutWidth !== 0) { CurrentUserUtils.panelContent = "none"; @@ -630,7 +643,7 @@ export class MainView extends React.Component { return true; } - @action + @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); diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx index 3113d8cb4..cc15a8195 100644 --- a/src/client/views/PropertiesButtons.tsx +++ b/src/client/views/PropertiesButtons.tsx @@ -6,7 +6,7 @@ import { observer } from "mobx-react"; import { Doc, DocListCast } from "../../fields/Doc"; import { RichTextField } from '../../fields/RichTextField'; import { Cast, NumCast, BoolCast } from "../../fields/Types"; -import { emptyFunction, setupMoveUpEvents } from "../../Utils"; +import { emptyFunction, setupMoveUpEvents, Utils } from "../../Utils"; import GoogleAuthenticationManager from '../apis/GoogleAuthenticationManager'; import { Pulls, Pushes } from '../apis/google_docs/GoogleApiClientUtils'; import { Docs, DocUtils } from '../documents/Documents'; @@ -27,6 +27,8 @@ import SharingManager from '../util/SharingManager'; import { GooglePhotos } from '../apis/google_docs/GooglePhotosClientUtils'; import { ImageField } from '../../fields/URLField'; import { undoBatch, UndoManager } from '../util/UndoManager'; +import { DocumentType } from '../documents/DocumentTypes'; +import { CollectionFreeFormView } from './collections/collectionFreeForm/CollectionFreeFormView'; const higflyout = require("@hig/flyout"); export const { anchorPoints } = higflyout; export const Flyout = higflyout.default; @@ -471,6 +473,22 @@ export class PropertiesButtons extends React.Component<{}, {}> { ; } + // @computed + // get importButton() { + // const targetDoc = this.selectedDoc; + // return !targetDoc ? (null) :
{"Import a Document"}
}> + //
{ + // if (this.selectedDocumentView) { + // CollectionFreeFormView.importDocument(100, 100); + // } + // }}> + // {} + //
+ // ; + // } render() { if (!this.selectedDoc) return (null); @@ -479,6 +497,8 @@ export class PropertiesButtons extends React.Component<{}, {}> { const considerPull = isText && this.considerGoogleDocsPull; const considerPush = isText && this.considerGoogleDocsPush; const isImage = this.selectedDoc[Doc.LayoutFieldKey(this.selectedDoc)] instanceof ImageField; + const isCollection = this.selectedDoc.type === DocumentType.COL ? true : false; + return
{this.templateButton} @@ -518,6 +538,9 @@ export class PropertiesButtons extends React.Component<{}, {}> {
{this.googlePhotosButton}
+ {/*
+ {this.importButton} +
*/}
; } diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 5553bbbb7..f67e049fd 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -253,7 +253,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
this.typesDropdownChange(!this._openTypes)}> - +
{this._openTypes ? allColumnTypes : justColType}
diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index ae53f5ba0..5834e5542 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -308,7 +308,7 @@ export class CollectionView extends Touchable this.props.Document.forceActive = !this.props.Document.forceActive, icon: "project-diagram" }); + !Doc.UserDoc().noviceMode ? optionItems.splice(0, 0, { description: `${this.props.Document.forceActive ? "Select" : "Force"} Contents Active`, event: () => this.props.Document.forceActive = !this.props.Document.forceActive, icon: "project-diagram" }) : null; if (this.props.Document.childLayout instanceof Doc) { optionItems.push({ description: "View Child Layout", event: () => this.props.addDocTab(this.props.Document.childLayout as Doc, "onRight"), icon: "project-diagram" }); } diff --git a/src/client/views/collections/SchemaTable.tsx b/src/client/views/collections/SchemaTable.tsx index cde795098..75e693f96 100644 --- a/src/client/views/collections/SchemaTable.tsx +++ b/src/client/views/collections/SchemaTable.tsx @@ -208,7 +208,7 @@ export class SchemaTable extends React.Component { }}> {col.heading}
; - const sortIcon = col.desc === undefined ? "circle" : col.desc === true ? "caret-down" : "caret-up"; + const sortIcon = col.desc === undefined ? "caret-right" : col.desc === true ? "caret-down" : "caret-up"; const header =
{ {keysDropdown}
this.changeSorting(col)} - style={{ paddingRight: "6px", display: "inline" }}> + style={{ paddingRight: "6px", marginLeft: "4px", display: "inline" }}>
this.props.openHeader(col, e.clientX, e.clientY)} style={{ float: "right", paddingRight: "6px" }}> - +
; diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 57336131a..e0981d797 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -1239,13 +1239,15 @@ export class CollectionFreeFormView extends CollectionSubView { this.props.Document._panX = this.props.Document._panY = 0; this.props.Document[this.scaleFieldKey] = 1; }, icon: "compress-arrows-alt" }); appearanceItems.push({ description: `${this.fitToContent ? "Make Zoomable" : "Scale to Window"}`, event: () => this.Document._fitToBox = !this.fitToContent, icon: !this.fitToContent ? "expand-arrows-alt" : "compress-arrows-alt" }); - appearanceItems.push({ description: "Arrange contents in grid", event: this.layoutDocsInGrid, icon: "table" }); + !Doc.UserDoc().noviceMode ? appearanceItems.push({ description: "Arrange contents in grid", event: this.layoutDocsInGrid, icon: "table" }) : null; !appearance && ContextMenu.Instance.addItem({ description: "Appearance...", subitems: appearanceItems, icon: "eye" }); const viewctrls = ContextMenu.Instance.findByDescription("UI Controls..."); const viewCtrlItems = viewctrls && "subitems" in viewctrls ? viewctrls.subitems : []; - viewCtrlItems.push({ description: (Doc.UserDoc().showSnapLines ? "Hide" : "Show") + " Snap Lines", event: () => Doc.UserDoc().showSnapLines = !Doc.UserDoc().showSnapLines, icon: "compress-arrows-alt" }); - viewCtrlItems.push({ description: (this.Document.useClusters ? "Hide" : "Show") + " Clusters", event: () => this.updateClusters(!this.Document.useClusters), icon: "braille" }); + + + !Doc.UserDoc().noviceMode ? viewCtrlItems.push({ description: (Doc.UserDoc().showSnapLines ? "Hide" : "Show") + " Snap Lines", event: () => Doc.UserDoc().showSnapLines = !Doc.UserDoc().showSnapLines, icon: "compress-arrows-alt" }) : null; + !Doc.UserDoc().noviceMode ? viewCtrlItems.push({ description: (this.Document.useClusters ? "Hide" : "Show") + " Clusters", event: () => this.updateClusters(!this.Document.useClusters), icon: "braille" }) : null; !viewctrls && ContextMenu.Instance.addItem({ description: "UI Controls...", subitems: viewCtrlItems, icon: "eye" }); const options = ContextMenu.Instance.findByDescription("Options..."); diff --git a/src/client/views/linking/LinkMenuItem.tsx b/src/client/views/linking/LinkMenuItem.tsx index 8084d96ae..0aabf5319 100644 --- a/src/client/views/linking/LinkMenuItem.tsx +++ b/src/client/views/linking/LinkMenuItem.tsx @@ -196,6 +196,7 @@ export class LinkMenuItem extends React.Component { case DocumentType.DOCHOLDER: destinationIcon = "expand"; break; case DocumentType.VID: destinationIcon = "video"; break; case DocumentType.INK: destinationIcon = "pen-nib"; break; + case DocumentType.PDF: destinationIcon = "file"; break; default: destinationIcon = "question"; break; } diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 856eb7246..f5ae9349a 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -712,21 +712,21 @@ export class DocumentView extends DocComponent(Docu const options = cm.findByDescription("Options..."); const optionItems: ContextMenuProps[] = options && "subitems" in options ? options.subitems : []; - optionItems.push({ description: this.Document.lockedPosition ? "Unlock Position" : "Lock Position", event: this.toggleLockPosition, icon: BoolCast(this.Document.lockedPosition) ? "unlock" : "lock" }); + //optionItems.push({ description: this.Document.lockedPosition ? "Unlock Position" : "Lock Position", event: this.toggleLockPosition, icon: BoolCast(this.Document.lockedPosition) ? "unlock" : "lock" }); !options && cm.addItem({ description: "Options...", subitems: optionItems, icon: "compass" }); const existingOnClick = cm.findByDescription("OnClick..."); const onClicks: ContextMenuProps[] = existingOnClick && "subitems" in existingOnClick ? existingOnClick.subitems : []; onClicks.push({ description: "Enter Portal", event: this.makeIntoPortal, icon: "window-restore" }); - onClicks.push({ description: "Toggle Detail", event: () => this.Document.onClick = ScriptField.MakeScript(`toggleDetail(self, "${this.Document.layoutKey}")`), icon: "window-restore" }); + onClicks.push({ description: "Toggle Detail", event: () => this.Document.onClick = ScriptField.MakeScript(`toggleDetail(self, "${this.Document.layoutKey}")`), icon: "concierge-bell" }); onClicks.push({ description: this.Document.ignoreClick ? "Select" : "Do Nothing", event: () => this.Document.ignoreClick = !this.Document.ignoreClick, icon: this.Document.ignoreClick ? "unlock" : "lock" }); - onClicks.push({ description: this.Document.isLinkButton ? "Remove Follow Behavior" : "Follow Link in Place", event: () => this.toggleFollowLink("inPlace", true, false), icon: "concierge-bell" }); - !this.Document.isLinkButton && onClicks.push({ description: "Follow Link on Right", event: () => this.toggleFollowLink("onRight", false, false), icon: "concierge-bell" }); - onClicks.push({ description: this.Document.isLinkButton || this.onClickHandler ? "Remove Click Behavior" : "Follow Link", event: () => this.toggleFollowLink(undefined, false, false), icon: "concierge-bell" }); - onClicks.push({ description: (this.Document.isPushpin ? "Remove" : "Make") + " Pushpin", event: () => this.toggleFollowLink(undefined, false, true), icon: "snowflake" }); - onClicks.push({ description: "Edit onClick Script", event: () => UndoManager.RunInBatch(() => DocUtils.makeCustomViewClicked(this.props.Document, undefined, "onClick"), "edit onClick"), icon: "edit" }); - !existingOnClick && cm.addItem({ description: "OnClick...", noexpand: true, addDivider: true, subitems: onClicks, icon: "hand-point-right" }); + onClicks.push({ description: this.Document.isLinkButton ? "Remove Follow Behavior" : "Follow Link in Place", event: () => this.toggleFollowLink("inPlace", true, false), icon: "link" }); + !this.Document.isLinkButton && onClicks.push({ description: "Follow Link on Right", event: () => this.toggleFollowLink("onRight", false, false), icon: "link" }); + onClicks.push({ description: this.Document.isLinkButton || this.onClickHandler ? "Remove Click Behavior" : "Follow Link", event: () => this.toggleFollowLink(undefined, false, false), icon: "link" }); + onClicks.push({ description: (this.Document.isPushpin ? "Remove" : "Make") + " Pushpin", event: () => this.toggleFollowLink(undefined, false, true), icon: "map-pin" }); + onClicks.push({ description: "Edit onClick Script", event: () => UndoManager.RunInBatch(() => DocUtils.makeCustomViewClicked(this.props.Document, undefined, "onClick"), "edit onClick"), icon: "terminal" }); + !existingOnClick && cm.addItem({ description: "OnClick...", noexpand: true, addDivider: true, subitems: onClicks, icon: "mouse-pointer" }); const funcs: ContextMenuProps[] = []; if (this.layoutDoc.onDragStart) { @@ -739,6 +739,7 @@ export class DocumentView extends DocComponent(Docu const more = cm.findByDescription("More..."); const moreItems = more && "subitems" in more ? more.subitems : []; moreItems.push({ description: "Share", event: () => SharingManager.Instance.open(this), icon: "users" }); + moreItems.push({ description: this.Document.lockedPosition ? "Unlock Position" : "Lock Position", event: this.toggleLockPosition, icon: BoolCast(this.Document.lockedPosition) ? "unlock" : "lock" }); moreItems.push({ description: "Create an Alias", event: () => this.onCopy(), icon: "copy" }); moreItems.push({ description: "Download document", icon: "download", event: async () => Doc.Zip(this.props.Document) }); if (!Doc.UserDoc().noviceMode) { -- 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/views/MainView.scss') 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 8d1f4cdf924a4002f132886230eb85a40dfcae3f Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Mon, 3 Aug 2020 00:33:37 -0500 Subject: several UI changes to tooltips, menu, properties, buttons, and ink --- src/client/util/CurrentUserUtils.ts | 1 + src/client/util/SettingsManager.scss | 15 +- src/client/util/SettingsManager.tsx | 2 +- src/client/views/DocumentDecorations.tsx | 6 +- src/client/views/InkingStroke.tsx | 2 +- src/client/views/MainView.scss | 6 +- src/client/views/MainView.tsx | 20 +- src/client/views/PropertiesButtons.scss | 7 +- src/client/views/PropertiesButtons.tsx | 83 +++++--- src/client/views/collections/CollectionMenu.tsx | 227 ++++++++++++--------- src/client/views/globalCssVariables.scss | 4 +- .../views/nodes/formattedText/RichTextMenu.tsx | 39 ++-- 12 files changed, 243 insertions(+), 169 deletions(-) (limited to 'src/client/views/MainView.scss') diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index a094ac5a6..c27290e74 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -49,6 +49,7 @@ export class CurrentUserUtils { @observable public static searchStack: any | undefined; @observable public static selectedPanel: string = "none"; + @observable public static propertiesWidth: number = 0; // sets up the default User Templates - slideView, queryView, descriptionView static setupUserTemplateButtons(doc: Doc) { diff --git a/src/client/util/SettingsManager.scss b/src/client/util/SettingsManager.scss index c1627e69f..6923fe879 100644 --- a/src/client/util/SettingsManager.scss +++ b/src/client/util/SettingsManager.scss @@ -7,7 +7,7 @@ height: 300px; button { - background: $lighter-alt-accent; + background: #315a96; outline: none; border-radius: 5px; border: 0px; @@ -29,8 +29,12 @@ button { width: 100%; align-self: center; - background: $darker-alt-accent; + background: #252b33; margin-top: 4px; + + &:hover { + background: $main-accent; + } } .delete-button { @@ -102,11 +106,12 @@ } h1 { - color: $dark-color; + color: #121721; text-transform: uppercase; letter-spacing: 2px; - font-size: 120%; + font-size: 19; margin-top: 0; + font-weight: bold; } .container { @@ -151,7 +156,7 @@ .settings-interface button { width: 100%; font-size: 30px; - background: #b2cef8; + background: #315a96; } .settings-interface .settings-heading { diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx index 207c78964..6276fae96 100644 --- a/src/client/util/SettingsManager.tsx +++ b/src/client/util/SettingsManager.tsx @@ -136,7 +136,7 @@ export default class SettingsManager extends React.Component<{}> { {this.errorText ?
{this.errorText}
: undefined} {this.successText ?
{this.successText}
: undefined} - forgot password? + forgot password?
: undefined} diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index b8670a1af..f16cb273b 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -619,9 +619,9 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
} : <> - {/* {minimal ? (null) :
Show context menu
} placement="top">
- -
} */} + {minimal ? (null) :
Show context menu
} placement="top">
+ +
}
{`${this.selectionTitle}`}
diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx index 5892e8346..8e3f72cee 100644 --- a/src/client/views/InkingStroke.tsx +++ b/src/client/views/InkingStroke.tsx @@ -178,7 +178,7 @@ export class InkingStroke extends ViewBoxBaseComponent diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss index 054a409df..a57d22afd 100644 --- a/src/client/views/MainView.scss +++ b/src/client/views/MainView.scss @@ -105,7 +105,7 @@ .mainView-propertiesDragger { background-color: rgb(140, 139, 139); height: 55px; - width: 15.5px; + width: 17px; position: absolute; top: 55%; border: 1px black solid; @@ -119,7 +119,7 @@ width: 10px; height: 10px; float: left; - margin-left: 3px; + margin-left: 5.5px; padding-top: 19px; } @@ -297,7 +297,7 @@ position: absolute; z-index: 2; touch-action: none; - cursor: ew-resize; + cursor: grab; .mainView-libraryHandle-icon { width: 10px; diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index c83aeee25..fdf4c1626 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -91,8 +91,7 @@ export class MainView extends React.Component { } else { return undefined; } } - @observable _propertiesWidth: number = 0; - propertiesWidth = () => Math.max(0, Math.min(this._panelWidth - 50, this._propertiesWidth)); + propertiesWidth = () => Math.max(0, Math.min(this._panelWidth - 50, CurrentUserUtils.propertiesWidth)); @computed get propertiesIcon() { if (this.propertiesWidth() < 10) { @@ -141,6 +140,9 @@ export class MainView extends React.Component { MainView.Instance = this; this._urlState = HistoryUtil.parseUrl(window.location) || {} as any; // causes errors to be generated when modifying an observable outside of an action + + CurrentUserUtils.propertiesWidth = 0; + configure({ enforceActions: "observed" }); if (window.location.pathname !== "/home") { const pathname = window.location.pathname.substr(1).split("/"); @@ -172,7 +174,7 @@ export class MainView extends React.Component { fa.faFillDrip, fa.faLink, fa.faUnlink, fa.faBold, fa.faItalic, fa.faChevronLeft, fa.faUnderline, fa.faStrikethrough, fa.faSuperscript, fa.faSubscript, fa.faIndent, fa.faEyeDropper, fa.faPaintRoller, fa.faBars, fa.faBrush, fa.faShapes, fa.faEllipsisH, fa.faHandPaper, fa.faMap, fa.faUser, faHireAHelper, fa.faDesktop, fa.faTrashRestore, fa.faUsers, fa.faWrench, fa.faCog, fa.faMap, fa.faBellSlash, fa.faExpandAlt, fa.faArchive, fa.faBezierCurve, fa.faCircle, - fa.faLongArrowAltRight, fa.faPenFancy, fa.faAngleDoubleRight, faBuffer, fa.faExpand, fa.faUndo, fa.faSlidersH); + fa.faLongArrowAltRight, fa.faPenFancy, fa.faAngleDoubleRight, faBuffer, fa.faExpand, fa.faUndo, fa.faSlidersH, fa.faAngleDoubleLeft); this.initEventListeners(); this.initAuthenticationRouters(); } @@ -376,9 +378,9 @@ export class MainView extends React.Component { @action onPropertiesPointerDown = (e: React.PointerEvent) => { setupMoveUpEvents(this, e, action((e: PointerEvent, down: number[], delta: number[]) => { - this._propertiesWidth = this._panelWidth - e.clientX; + CurrentUserUtils.propertiesWidth = this._panelWidth - e.clientX; return false; - }), returnFalse, action(() => this._propertiesWidth = this.propertiesWidth() < 15 ? Math.min(this._panelWidth - 50, 250) : 0), false); + }), returnFalse, action(() => CurrentUserUtils.propertiesWidth = this.propertiesWidth() < 15 ? Math.min(this._panelWidth - 50, 250) : 0), false); } @action @@ -419,7 +421,7 @@ export class MainView extends React.Component {
{this.flyoutWidth > 0 ?
- +
: null} { - this._propertiesWidth = 0; + CurrentUserUtils.propertiesWidth = 0; } @computed get propertiesView() { @@ -553,7 +555,7 @@ export class MainView extends React.Component {
{this.flyoutWidth !== 0 ?
+ style={{ backgroundColor: 'lightgrey' }}> + style={{ right: rightFlyout, top: "50%" }}>
diff --git a/src/client/views/PropertiesButtons.scss b/src/client/views/PropertiesButtons.scss index b3a317a6b..1cba252de 100644 --- a/src/client/views/PropertiesButtons.scss +++ b/src/client/views/PropertiesButtons.scss @@ -45,13 +45,13 @@ $linkGap : 3px; } .propertiesButtons { - margin-top: $linkGap; + margin-top: 3px; grid-column: 1/4; - width: max-content; + width: 100%; height: auto; display: flex; flex-direction: row; - overflow-x: visible; + flex-wrap: wrap; } .onClickFlyout-editScript { @@ -69,6 +69,7 @@ $linkGap : 3px; width: 25px; border-radius: 5px; margin-right: 18px; + margin-bottom: 8px; } .propertiesButtons-linker { diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx index d3f056a34..68969b413 100644 --- a/src/client/views/PropertiesButtons.tsx +++ b/src/client/views/PropertiesButtons.tsx @@ -29,6 +29,7 @@ import { ImageField } from '../../fields/URLField'; import { undoBatch, UndoManager } from '../util/UndoManager'; import { DocumentType } from '../documents/DocumentTypes'; import { CollectionFreeFormView } from './collections/collectionFreeForm/CollectionFreeFormView'; +import { InkField } from '../../fields/InkField'; const higflyout = require("@hig/flyout"); export const { anchorPoints } = higflyout; export const Flyout = higflyout.default; @@ -524,6 +525,32 @@ export class PropertiesButtons extends React.Component<{}, {}> { ; } + @undoBatch + @action + private makeMask = () => { + if (this.selectedDoc) { + this.selectedDoc._backgroundColor = "rgba(0,0,0,0.7)"; + this.selectedDoc.mixBlendMode = "hard-light"; + this.selectedDoc.color = "#9b9b9bff"; + this.selectedDoc.stayInCollection = true; + this.selectedDoc.isInkMask = true; + } + } + + @computed + get maskButton() { + const targetDoc = this.selectedDoc; + return !targetDoc ? (null) :
Make Mask
}> +
+ {} +
+ ; + } + + // @computed // get importButton() { // const targetDoc = this.selectedDoc; @@ -549,6 +576,7 @@ export class PropertiesButtons extends React.Component<{}, {}> { const considerPull = isText && this.considerGoogleDocsPull; const considerPush = isText && this.considerGoogleDocsPush; const isImage = this.selectedDoc[Doc.LayoutFieldKey(this.selectedDoc)] instanceof ImageField; + const isInk = this.selectedDoc[Doc.LayoutFieldKey(this.selectedDoc)] instanceof InkField; const isCollection = this.selectedDoc.type === DocumentType.COL ? true : false; const isFreeForm = this.selectedDoc._viewType === "freeform" ? true : false; @@ -571,39 +599,40 @@ export class PropertiesButtons extends React.Component<{}, {}> {
{this.downloadButton}
-
-
-
- {this.deleteButton} -
-
- {this.onClickButton} -
-
- {this.sharingButton} -
-
- {this.considerGoogleDocsPush} -
-
- {this.considerGoogleDocsPull} -
-
- {this.googlePhotosButton} -
- {/*
+
+ {this.deleteButton} +
+
+ {this.onClickButton} +
+
+ {this.sharingButton} +
+
+ {this.considerGoogleDocsPush} +
+
+ {this.considerGoogleDocsPull} +
+
+ {this.googlePhotosButton} +
+ {/*
{this.importButton}
*/} -
- {this.clustersButton} -
+
+ {this.clustersButton} +
-
- {this.fitContentButton} -
+
+ {this.fitContentButton} +
+
+ {this.maskButton}
+
; } } diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx index 59e6ac7ff..0a3f77888 100644 --- a/src/client/views/collections/CollectionMenu.tsx +++ b/src/client/views/collections/CollectionMenu.tsx @@ -30,6 +30,8 @@ import { RichTextField } from "../../../fields/RichTextField"; import { ScriptField } from "../../../fields/ScriptField"; import { IconProp } from '@fortawesome/fontawesome-svg-core'; import { DocUtils } from "../../documents/Documents"; +import { Tooltip } from "@material-ui/core"; +import { CurrentUserUtils } from "../../util/CurrentUserUtils"; @observer export default class CollectionMenu extends AntimodeMenu { @@ -65,16 +67,38 @@ export default class CollectionMenu extends AntimodeMenu { } } + @action + toggleProperties = () => { + if (CurrentUserUtils.propertiesWidth > 0) { + CurrentUserUtils.propertiesWidth = 0; + } else { + CurrentUserUtils.propertiesWidth = 250; + } + } + render() { - const button = ; + const button = Pin Menu
} placement="bottom"> + + ; + + const propIcon = CurrentUserUtils.propertiesWidth > 0 ? "angle-double-right" : "angle-double-left"; + const propTitle = CurrentUserUtils.propertiesWidth > 0 ? "Close Properties Panel" : "Open Properties Panel"; + + const prop = {propTitle}
} placement="bottom"> + + ; return this.getElement(!this.SelectedCollection ? [button] : [, + prop, button]); } } @@ -271,43 +295,47 @@ export class CollectionViewBaseChrome extends React.Component -
- - -
+ drop document to apply or drag to create button
} placement="bottom"> +
+ + +
+
; } @computed get viewModes() { return
-
- - -
+ drop document to apply or drag to create button
} placement="bottom"> +
+ + +
+
; } @@ -332,18 +360,23 @@ export class CollectionViewBaseChrome extends React.Component - -
} - - {this.props.docView.props.ContainingCollectionDoc?._viewType !== CollectionViewType.Freeform ? (null) : } + {Doc.UserDoc().noviceMode ? (null) : + filter documents to show
} placement="bottom"> +
+ +
+ } + + {this.props.docView.props.ContainingCollectionDoc?._viewType !== CollectionViewType.Freeform ? (null) : + Toggle Overlay Layer
} placement="bottom"> + + }
{this.subChrome}
@@ -491,22 +524,26 @@ export class CollectionFreeFormViewChrome extends React.Component {this._draw.map((icon, i) => - )} + {this._title[i]}
} placement="bottom"> + + )}
; } toggleButton = (key: string, value: boolean, setter: () => {}, icon: FontAwesomeIconProps["icon"], ele: JSX.Element | null) => { - return ; + return {key}
} placement="bottom"> + + ; } @computed get widthPicker() { @@ -515,11 +552,13 @@ export class CollectionFreeFormViewChrome extends React.Component {widthPicker} {this._width.map((wid, i) => - )} + change width
} placement="bottom"> + + )}
; } @@ -554,43 +593,42 @@ export class CollectionFreeFormViewChrome extends React.Component; } - @computed get formatPane() { - // return ; - return null; - } - render() { return !this.props.docView.layoutDoc ? (null) :
- {this.props.docView.props.renderDepth !== 0 || this.isText ? (null) : -
+ {this.props.docView.props.renderDepth !== 0 || this.isText ? (null) : Toggle Mini Map
} placement="bottom"> +
+ } - {!!!this.isText ?
- -
: null} - {!!!this.isText ?
this.document.editing = !this.document.editing)} > - {NumCast(this.document.currentFrame)} -
: null} - {!!!this.isText ?
- -
: null} + {!!!this.isText ? Back Frame
} placement="bottom"> +
+ +
+ : null} + {!!!this.isText ? Toggle View All
} placement="bottom"> +
this.document.editing = !this.document.editing)} > + {NumCast(this.document.currentFrame)} +
+ : null} + {!!!this.isText ? Forward Frame} placement="bottom"> +
+ +
+ : null} {!this.props.isOverlay || this.document.type !== DocumentType.WEB || this.isText ? (null) : - + Use Hypothesis} placement="bottom"> + + } {(!this.props.isOverlay || this.props.docView.layoutDoc.isAnnotating) && !this.isText ? <> @@ -598,7 +636,6 @@ export class CollectionFreeFormViewChrome extends React.Component : (null) } diff --git a/src/client/views/globalCssVariables.scss b/src/client/views/globalCssVariables.scss index 3e54d001b..4c79a7c2f 100644 --- a/src/client/views/globalCssVariables.scss +++ b/src/client/views/globalCssVariables.scss @@ -9,10 +9,10 @@ $main-accent: #aaaaa3; //$alt-accent: #59dff7; $alt-accent: #c2c2c5; $lighter-alt-accent: rgb(207, 220, 240); -$darker-alt-accent: rgb(178, 206, 248); +$darker-alt-accent: #b2cef8; $intermediate-color: #9c9396; $dark-color: #121721; -$link-color: lightBlue; +$link-color: #add8e6; $antimodemenu-height: 35px; // fonts $sans-serif: "Noto Sans", diff --git a/src/client/views/nodes/formattedText/RichTextMenu.tsx b/src/client/views/nodes/formattedText/RichTextMenu.tsx index 85cc5c1a1..d7eb73bb4 100644 --- a/src/client/views/nodes/formattedText/RichTextMenu.tsx +++ b/src/client/views/nodes/formattedText/RichTextMenu.tsx @@ -617,8 +617,11 @@ export default class RichTextMenu extends AntimodeMenu { label = "No marks are currently stored"; } + //onPointerDown={onBrushClick} + const button = style brush} placement="bottom"> - ; @@ -631,7 +634,7 @@ export default class RichTextMenu extends AntimodeMenu { ; return ( - + ); } @@ -690,8 +693,9 @@ export default class RichTextMenu extends AntimodeMenu { self.TextView.EditorView!.focus(); } + // onPointerDown={onColorClick} const button = set font color} placement="bottom"> - @@ -712,7 +716,7 @@ export default class RichTextMenu extends AntimodeMenu { ; return ( - + ); } @@ -744,8 +748,9 @@ export default class RichTextMenu extends AntimodeMenu { UndoManager.RunInBatch(() => self.view && self.insertHighlight(self.activeHighlightColor, self.view.state, self.view.dispatch), "rt highlighter"); } + //onPointerDown={onHighlightClick} const button = set highlight color} placement="bottom"> - @@ -766,7 +771,7 @@ export default class RichTextMenu extends AntimodeMenu { ; return ( - + ); } @@ -789,7 +794,7 @@ export default class RichTextMenu extends AntimodeMenu { const link = this.currentLink ? this.currentLink : ""; const button = set hyperlink} placement="bottom"> -
+
; const dropdownContent = @@ -801,7 +806,8 @@ export default class RichTextMenu extends AntimodeMenu { ; - return ; + return ; } async getTextLinkTargetTitle() { @@ -1001,6 +1007,7 @@ interface ButtonDropdownProps { button: JSX.Element; dropdownContent: JSX.Element; openDropdownOnButton?: boolean; + link?: boolean; } @observer @@ -1043,18 +1050,10 @@ export class ButtonDropdown extends React.Component { render() { return (
this.ref = node}> - {this.props.openDropdownOnButton ? - : - <> - {this.props.button} - - } - + {this.showDropdown ? this.props.dropdownContent : (null)}
); -- cgit v1.2.3-70-g09d2