From c40f8fdc33bac66e943bdc066520f942648f02e4 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Tue, 22 Oct 2019 17:19:05 -0400
Subject: fixed pinning flyout by clicking on gray region

---
 src/client/views/MainView.tsx                      | 41 ++++++++++------------
 .../authentication/models/current_user_utils.ts    |  1 +
 2 files changed, 19 insertions(+), 23 deletions(-)

(limited to 'src')

diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 8bad70093..c14739aa2 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -36,6 +36,7 @@ import { DocumentView } from './nodes/DocumentView';
 import { OverlayView } from './OverlayView';
 import PDFMenu from './pdf/PDFMenu';
 import { PreviewCursor } from './PreviewCursor';
+import { Scripting } from '../util/Scripting';
 
 @observer
 export class MainView extends React.Component {
@@ -43,6 +44,7 @@ export class MainView extends React.Component {
     private _buttonBarHeight = 75;
     private _flyoutSizeOnDown = 0;
     private _urlState: HistoryUtil.DocUrl;
+    private _docBtnRef = React.createRef<HTMLDivElement>();
 
     @observable private _panelWidth: number = 0;
     @observable private _panelHeight: number = 0;
@@ -347,15 +349,15 @@ export class MainView extends React.Component {
         }
     }
     mainContainerXf = () => new Transform(0, -this._buttonBarHeight, 1);
-    @computed
-    get flyout() {
+
+    @computed get flyout() {
         let sidebarContent = this.userDoc && this.userDoc.sidebarContainer;
         if (!(sidebarContent instanceof Doc)) {
             return (null);
         }
         let sidebarButtonsDoc = Cast(CurrentUserUtils.UserDocument.sidebarButtons, Doc) as Doc;
         sidebarButtonsDoc.columnWidth = this.flyoutWidth / 3 - 30;
-        return <div className="mainView-flyoutContainer">
+        return <div className="mainView-flyoutContainer" >
             <div className="mainView-tabButtons" style={{ height: `${this._buttonBarHeight}px` }}>
                 <DocumentView
                     Document={sidebarButtonsDoc}
@@ -413,8 +415,7 @@ export class MainView extends React.Component {
             </div></div>;
     }
 
-    @computed
-    get mainContent() {
+    @computed get mainContent() {
         const sidebar = this.userDoc && this.userDoc.sidebarContainer;
         return !this.userDoc || !(sidebar instanceof Doc) ? (null) : (
             <div className="mainView-mainContent" >
@@ -445,31 +446,24 @@ export class MainView extends React.Component {
             </div>);
     }
 
+    public static expandFlyout = action(() => {
+        MainView.Instance._flyoutTranslate = true;
+        MainView.Instance.flyoutWidth = 250;
+    })
+
     @computed get expandButton() {
-        return !this._flyoutTranslate ? (<div className="mainView-expandFlyoutButton" title="Re-attach sidebar" onPointerDown={action(() => {
-            this.flyoutWidth = 250;
-            this._flyoutTranslate = true;
-        })}><FontAwesomeIcon icon="chevron-right" color="grey" size="lg" /></div>) : (null);
+        return !this._flyoutTranslate ? (<div className="mainView-expandFlyoutButton" title="Re-attach sidebar" onPointerDown={MainView.expandFlyout}><FontAwesomeIcon icon="chevron-right" color="grey" size="lg" /></div>) : (null);
     }
 
-    addButtonDoc = (doc: Doc) => {
-        Doc.AddDocToList(CurrentUserUtils.UserDocument.expandingButtons as Doc, "data", doc);
-        return true;
-    }
-    remButtonDoc = (doc: Doc) => {
-        Doc.RemoveDocFromList(CurrentUserUtils.UserDocument.expandingButtons as Doc, "data", doc);
-        return true;
-    }
-    @action
-    moveButtonDoc = (doc: Doc, targetCollection: Doc, addDocument: (document: Doc) => boolean): boolean => {
-        return this.remButtonDoc(doc) && addDocument(doc);
-    }
+    addButtonDoc = (doc: Doc) => Doc.AddDocToList(CurrentUserUtils.UserDocument.expandingButtons as Doc, "data", doc);
+    remButtonDoc = (doc: Doc) => Doc.RemoveDocFromList(CurrentUserUtils.UserDocument.expandingButtons as Doc, "data", doc);
+    moveButtonDoc = (doc: Doc, targetCollection: Doc, addDocument: (document: Doc) => boolean) => this.remButtonDoc(doc) && addDocument(doc);
+
     buttonBarXf = () => {
         if (!this._docBtnRef.current) return Transform.Identity();
         let { scale, translateX, translateY } = Utils.GetScreenTransform(this._docBtnRef.current);
         return new Transform(-translateX, -translateY, 1 / scale);
     }
-    _docBtnRef = React.createRef<HTMLDivElement>();
     @computed get docButtons() {
         if (CurrentUserUtils.UserDocument.expandingButtons instanceof Doc) {
             return <div className="mainView-docButtons" ref={this._docBtnRef}
@@ -520,4 +514,5 @@ export class MainView extends React.Component {
             <OverlayView />
         </div >);
     }
-}
\ No newline at end of file
+}
+Scripting.addGlobal(function freezeSidebar() { MainView.expandFlyout(); });
\ No newline at end of file
diff --git a/src/server/authentication/models/current_user_utils.ts b/src/server/authentication/models/current_user_utils.ts
index 7897a464c..477b36ea4 100644
--- a/src/server/authentication/models/current_user_utils.ts
+++ b/src/server/authentication/models/current_user_utils.ts
@@ -131,6 +131,7 @@ export class CurrentUserUtils {
     static setupSidebarButtons(doc: Doc) {
         doc.sidebarContainer = new Doc();
         (doc.sidebarContainer as Doc).chromeStatus = "disabled";
+        (doc.sidebarContainer as Doc).onClick = ScriptField.MakeScript("freezeSidebar()");
 
         doc.CreateBtn = this.setupCreatePanel(doc.sidebarContainer as Doc, doc);
         doc.LibraryBtn = this.setupLibraryPanel(doc.sidebarContainer as Doc, doc);
-- 
cgit v1.2.3-70-g09d2