From 78d9ea53fcf13a42445f2b2cd9b8a76fef0fdfea Mon Sep 17 00:00:00 2001
From: yipstanley <stanley_yip@brown.edu>
Date: Sat, 28 Sep 2019 15:26:27 -0400
Subject: sidebar now flies out

---
 src/client/views/Main.scss    |  7 +++++
 src/client/views/MainView.tsx | 65 ++++++++++++++++++++++++++++++++++++-------
 2 files changed, 62 insertions(+), 10 deletions(-)

(limited to 'src')

diff --git a/src/client/views/Main.scss b/src/client/views/Main.scss
index bc0975c86..67bfe460f 100644
--- a/src/client/views/Main.scss
+++ b/src/client/views/Main.scss
@@ -238,6 +238,13 @@ ul#add-options-list {
     flex-direction: column;
 }
 
+.expandFlyoutButton {
+    position: absolute;
+    top: 30px;
+    right: 30px;
+    cursor: pointer;
+}
+
 .mainView-libraryHandle {
     width: 20px;
     height: 40px;
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 244b217ed..afc3612f6 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -1,5 +1,5 @@
 import { IconName, library } from '@fortawesome/fontawesome-svg-core';
-import { faLink, faArrowDown, faArrowUp, faBolt, faCaretUp, faCat, faCheck, faClone, faCloudUploadAlt, faCommentAlt, faCut, faExclamation, faFilePdf, faFilm, faFont, faGlobeAsia, faLongArrowAltRight, faMusic, faObjectGroup, faPause, faPenNib, faPlay, faPortrait, faRedoAlt, faThumbtack, faTree, faUndoAlt, faTv } from '@fortawesome/free-solid-svg-icons';
+import { faLink, faArrowDown, faArrowUp, faBolt, faCaretUp, faCat, faCheck, faClone, faCloudUploadAlt, faCommentAlt, faCut, faExclamation, faFilePdf, faFilm, faFont, faGlobeAsia, faLongArrowAltRight, faMusic, faObjectGroup, faPause, faPenNib, faPlay, faPortrait, faRedoAlt, faThumbtack, faTree, faUndoAlt, faTv, faChevronRight } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { action, computed, configure, observable, reaction, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
@@ -195,6 +195,7 @@ export class MainView extends React.Component {
         library.add(faArrowUp);
         library.add(faCloudUploadAlt);
         library.add(faBolt);
+        library.add(faChevronRight);
         this.initEventListeners();
         this.initAuthenticationRouters();
     }
@@ -311,12 +312,14 @@ export class MainView extends React.Component {
     }
 
     @observable flyoutWidth: number = 250;
+    @observable flyoutTranslate: boolean = true;
     @computed get dockingContent() {
         let flyoutWidth = this.flyoutWidth;
+        let countWidth = this.flyoutTranslate;
         let mainCont = this.mainContainer;
         return <Measure offset onResize={this.onResize}>
             {({ measureRef }) =>
-                <div ref={measureRef} id="mainContent-div" style={{ width: `calc(100% - ${flyoutWidth}px`, transform: `translate(${flyoutWidth}px, 0px)` }} onDrop={this.onDrop}>
+                <div ref={measureRef} id="mainContent-div" style={{ width: `calc(100% - ${countWidth ? flyoutWidth : 0}px`, transform: `translate(${countWidth ? flyoutWidth : 0}px, 0px)` }} onDrop={this.onDrop}>
                     {!mainCont ? (null) :
                         <DocumentView Document={mainCont}
                             DataDoc={undefined}
@@ -356,6 +359,23 @@ export class MainView extends React.Component {
         e.stopPropagation();
         e.preventDefault();
     }
+
+    @action
+    pointerOverDragger = () => {
+        if (this.flyoutWidth === 0) {
+            this.flyoutWidth = 250;
+            this.flyoutTranslate = false;
+        }
+    }
+
+    @action
+    pointerLeaveDragger = () => {
+        if (!this.flyoutTranslate) {
+            this.flyoutWidth = 0;
+            this.flyoutTranslate = true;
+        }
+    }
+
     @action
     onPointerMove = (e: PointerEvent) => {
         this.flyoutWidth = Math.max(e.clientX, 0);
@@ -411,18 +431,34 @@ export class MainView extends React.Component {
             getScale={returnOne}>
         </DocumentView>;
     }
+
     @computed
     get mainContent() {
         let sidebar = CurrentUserUtils.UserDocument.sidebar;
         if (!(sidebar instanceof Doc)) return (null);
         return <div className="mainContent" style={{ width: "100%", height: "100%", position: "absolute" }}>
-            <div className="mainView-libraryHandle"
-                style={{ cursor: "ew-resize", left: `${this.flyoutWidth - 10}px`, backgroundColor: `${StrCast(sidebar.backgroundColor, "lightGray")}` }}
-                onPointerDown={this.onPointerDown}>
-                <span title="library View Dragger" style={{ width: "100%", height: "100%", position: "absolute" }} />
-            </div>
-            <div className="mainView-libraryFlyout" style={{ width: `${this.flyoutWidth}px`, zIndex: 1 }}>
-                {this.flyout}
+            <div onPointerLeave={this.pointerLeaveDragger}>
+                <div className="mainView-libraryHandle"
+                    style={{ cursor: "ew-resize", left: `${(this.flyoutWidth * (this.flyoutTranslate ? 1 : 0)) - 10}px`, backgroundColor: `${StrCast(sidebar.backgroundColor, "lightGray")}` }}
+                    onPointerDown={this.onPointerDown} onPointerOver={this.pointerOverDragger}>
+                    <span title="library View Dragger" style={{
+                        width: (this.flyoutWidth !== 0 && this.flyoutTranslate) ? "100%" : "5vw",
+                        height: (this.flyoutWidth !== 0 && this.flyoutTranslate) ? "100%" : "30vh",
+                        position: "absolute",
+                        top: (this.flyoutWidth !== 0 && this.flyoutTranslate) ? "" : "-10vh"
+                    }} />
+                </div>
+                <div className="mainView-libraryFlyout" style={{
+                    width: `${this.flyoutWidth}px`,
+                    zIndex: 1,
+                    transformOrigin: this.flyoutTranslate ? "" : "left center",
+                    transition: this.flyoutTranslate ? "" : "width .5s",
+                    transform: `scale(${this.flyoutTranslate ? 1 : 0.8})`,
+                    boxShadow: this.flyoutTranslate ? "" : "rgb(156, 147, 150) 0.2vw 0.2vw 0.8vw"
+                }}>
+                    {this.flyout}
+                    {this.expandButton}
+                </div>
             </div>
             {this.dockingContent}
         </div>;
@@ -478,7 +514,7 @@ export class MainView extends React.Component {
         ];
         if (!ClientUtils.RELEASE) btns.unshift([React.createRef<HTMLDivElement>(), "cat", "Add Cat Image", addImageNode]);
 
-        return < div id="add-nodes-menu" style={{ left: this.flyoutWidth + 20, bottom: 20 }} >
+        return < div id="add-nodes-menu" style={{ left: (this.flyoutTranslate ? this.flyoutWidth : 0) + 20, bottom: 20 }} >
 
             <input type="checkbox" id="add-menu-toggle" ref={this.addMenuToggle} />
             <label htmlFor="add-menu-toggle" style={{ marginTop: 2 }} title="Close Menu"><p>+</p></label>
@@ -569,6 +605,15 @@ export class MainView extends React.Component {
         return !PresBox.CurrentPresentation || !PresBox.CurrentPresentation.presMode ? (null) : <PresModeMenu next={next} back={back} presStatus={PresBox.CurrentPresentation.presStatus} startOrResetPres={startOrResetPres} closePresMode={closePresMode} > </PresModeMenu>;
     }
 
+    @computed get expandButton() {
+        return !this.flyoutTranslate ? (<div className="expandFlyoutButton" title="Re-attach sidebar" onPointerDown={() => {
+            runInAction(() => {
+                this.flyoutWidth = 250;
+                this.flyoutTranslate = true;
+            });
+        }}><FontAwesomeIcon icon="chevron-right" color="grey" size="lg" /></div>) : (null);
+    }
+
     render() {
         return (
             <div id="main-div">
-- 
cgit v1.2.3-70-g09d2