From 055b823ac472c3831d9cca9629cd2c505310c664 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Mon, 1 Jul 2019 22:02:56 -0400 Subject: added library view pullout --- src/.DS_Store | Bin 6148 -> 6148 bytes src/client/views/Main.scss | 16 +++ src/client/views/MainView.tsx | 117 ++++++++++++++++----- .../views/collections/CollectionDockingView.tsx | 10 +- 4 files changed, 116 insertions(+), 27 deletions(-) (limited to 'src') diff --git a/src/.DS_Store b/src/.DS_Store index ff00f097e..fc746835f 100644 Binary files a/src/.DS_Store and b/src/.DS_Store differ diff --git a/src/client/views/Main.scss b/src/client/views/Main.scss index 0271edcd2..59c70c674 100644 --- a/src/client/views/Main.scss +++ b/src/client/views/Main.scss @@ -224,4 +224,20 @@ ul#add-options-list { display: inline-block; padding: 0; } +} + +.mainView-libraryFlyout { + height: 100%; + position: absolute; +} + +.mainView-libraryHandle { + opacity: 0.6; + width: 20px; + height: 40px; + top: 50%; + border-radius: 20px; + position: absolute; + z-index: 1; + background: gray; } \ No newline at end of file diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index d28e3b837..654175523 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -160,12 +160,13 @@ export class MainView extends React.Component { } } + @action createNewWorkspace = async (id?: string) => { const list = Cast(CurrentUserUtils.UserDocument.data, listSpec(Doc)); if (list) { let freeformDoc = Docs.FreeformDocument([], { x: 0, y: 400, width: this.pwidth * .7, height: this.pheight, title: `WS collection ${list.length + 1}` }); - var dockingLayout = { content: [{ type: 'row', content: [CollectionDockingView.makeDocumentConfig(CurrentUserUtils.UserDocument, CurrentUserUtils.UserDocument, 150), CollectionDockingView.makeDocumentConfig(freeformDoc, freeformDoc, 600)] }] }; + var dockingLayout = { content: [{ type: 'row', content: [CollectionDockingView.makeDocumentConfig(freeformDoc, freeformDoc, 600)] }] }; let mainDoc = Docs.DockDocument([CurrentUserUtils.UserDocument, freeformDoc], JSON.stringify(dockingLayout), { title: `Workspace ${list.length + 1}` }, id); if (!CurrentUserUtils.UserDocument.linkManagerDoc) { let linkManagerDoc = new Doc(); @@ -224,40 +225,106 @@ export class MainView extends React.Component { getPHeight = () => { return this.pheight; } - @computed - get mainContent() { + + @observable flyoutWidth: number = 250; + @computed get dockingContent() { + let flyoutWidth = this.flyoutWidth; let mainCont = this.mainContainer; - let content = !mainCont ? (null) : - ; let castRes = mainCont ? FieldValue(Cast(mainCont.presentationView, listSpec(Doc))) : undefined; return {({ measureRef }) => -
- {content} +
+ {!mainCont ? (null) : + } {castRes ? : null}
} ; } + _downsize = 0; + onPointerDown = (e: React.PointerEvent) => { + this._downsize = e.clientX; + document.removeEventListener("pointermove", this.onPointerMove); + document.removeEventListener("pointerup", this.onPointerUp); + document.addEventListener("pointermove", this.onPointerMove); + document.addEventListener("pointerup", this.onPointerUp); + e.stopPropagation(); + e.preventDefault(); + } + @action + onPointerMove = (e: PointerEvent) => { + this.flyoutWidth = e.clientX; + } + @action + onPointerUp = (e: PointerEvent) => { + if (Math.abs(e.clientX - this._downsize) < 4) { + if (this.flyoutWidth < 5) this.flyoutWidth = 250; + else this.flyoutWidth = 0; + } + document.removeEventListener("pointermove", this.onPointerMove); + document.removeEventListener("pointerup", this.onPointerUp); + } + @computed + get mainContent() { + let addDocTab = (doc: Doc, dataDoc: Doc | undefined, location: string) => { + if (doc.dockingConfig) { + this.openWorkspace(doc); + } else { + // CollectionDockingView.Instance.AddRightSplit(doc, dataDoc); + } + } + let flyout = addDocTab(doc, undefined, "onRight")} + removeDocument={undefined} + ScreenToLocalTransform={Transform.Identity} + ContentScaling={returnOne} + PanelWidth={this.getPWidth} + PanelHeight={this.getPHeight} + renderDepth={0} + selectOnLoad={false} + focus={emptyFunction} + parentActive={returnTrue} + whenActiveChanged={emptyFunction} + bringToFront={emptyFunction} + ContainingCollectionView={undefined} + zoomToScale={emptyFunction} + getScale={returnOne}> + ; + return
+
+ +
+
+ {flyout} +
+ {this.dockingContent} +
; + } + selected = (tool: InkTool) => { if (!InkingControl.Instance || InkingControl.Instance.selectedTool === InkTool.None) return { display: "none" }; if (InkingControl.Instance.selectedTool === tool) { diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index a97fd1e69..ad5472a4a 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -456,8 +456,14 @@ export class CollectionDockingView extends React.Component + + {({ measureRef }) => +
+ + } + ); } -- cgit v1.2.3-70-g09d2