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') 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