From aad42660123c227cbe2152fbbbc159f6a38fca17 Mon Sep 17 00:00:00 2001
From: Stanley Yip <stanley_yip@brown.edu>
Date: Tue, 15 Oct 2019 16:29:08 -0400
Subject: library flyout changes

---
 src/client/views/MainView.scss | 24 +++++++++++++++---------
 src/client/views/MainView.tsx  | 24 +++++++++++++-----------
 2 files changed, 28 insertions(+), 20 deletions(-)

(limited to 'src')

diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss
index e61494e71..851818099 100644
--- a/src/client/views/MainView.scss
+++ b/src/client/views/MainView.scss
@@ -4,8 +4,9 @@
 
 .mainView-tabButtons {
     position: relative;
-    width:100%;
+    width: 100%;
 }
+
 // add nodes menu. Note that the + button is actually an input label, not an actual button.
 .mainView-docButtons {
     position: absolute;
@@ -22,22 +23,26 @@
     overflow: auto;
     z-index: 1;
 }
+
 .mainView-mainContent {
-    width:100%;
-    height:100%;
-    position:absolute;
+    width: 100%;
+    height: 100%;
+    position: absolute;
 }
-.mainView-flyoutContainer{
-    display:flex;
+
+.mainView-flyoutContainer {
+    display: flex;
     flex-direction: column;
     position: absolute;
-    width:100%;
-    height:100%;
+    width: 100%;
+    height: 100%;
     border: black 1px solid;
+
     .documentView-node-topmost {
         background: lightgrey;
     }
 }
+
 .mainView-mainDiv {
     width: 100%;
     height: 100%;
@@ -63,7 +68,7 @@
 
 .mainView-expandFlyoutButton {
     position: absolute;
-    top: 30px;
+    top: 100px;
     right: 30px;
     cursor: pointer;
 }
@@ -76,6 +81,7 @@
     border-radius: 5px;
     position: absolute;
     z-index: 1;
+    touch-action: none;
 }
 
 .mainView-workspace {
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index b329717c4..dd4e07165 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -287,13 +287,15 @@ export class MainView extends React.Component {
     }
 
     onPointerDown = (e: React.PointerEvent) => {
-        this._flyoutSizeOnDown = 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();
+        if (this._flyoutTranslate) {
+            this._flyoutSizeOnDown = 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
@@ -412,10 +414,10 @@ export class MainView extends React.Component {
                         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"
+                            width: (this.flyoutWidth !== 0 && this._flyoutTranslate) ? "100%" : "3vw",
+                            height: (this.flyoutWidth !== 0 && this._flyoutTranslate) ? "100%" : "100vh",
+                            position: (this.flyoutWidth !== 0 && this._flyoutTranslate) ? "absolute" : "fixed",
+                            top: (this.flyoutWidth !== 0 && this._flyoutTranslate) ? "" : "0"
                         }} />
                     </div>
                     <div className="mainView-libraryFlyout" style={{
-- 
cgit v1.2.3-70-g09d2