From 57552e7b8640bbb6896e8d484aea9656b264e548 Mon Sep 17 00:00:00 2001
From: Melissa Zhang <mzhang19096@gmail.com>
Date: Wed, 23 Dec 2020 13:20:51 -0800
Subject: move lock/hide buttons to StyleProvider

---
 src/client/views/MainView.tsx              |  5 ++--
 src/client/views/StyleProvider.tsx         | 37 ++++++++++++++++++++++++++++++
 src/client/views/collections/TreeView.scss |  6 ++---
 src/client/views/collections/TreeView.tsx  | 30 ++----------------------
 4 files changed, 45 insertions(+), 33 deletions(-)

(limited to 'src')

diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 5eb8429f0..daa059a49 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -58,7 +58,7 @@ import { PDFMenu } from './pdf/PDFMenu';
 import { PreviewCursor } from './PreviewCursor';
 import { PropertiesView } from './PropertiesView';
 import { SearchBox } from './search/SearchBox';
-import { DefaultStyleProvider } from './StyleProvider';
+import { DefaultStyleProvider, DashboardStyleProvider } from './StyleProvider';
 const _global = (window /* browser */ || global /* node */) as any;
 
 @observer
@@ -296,6 +296,7 @@ export class MainView extends React.Component {
     }
 
     @computed get flyout() {
+        console.log(this._sidebarContent.title);
         return !this._flyoutWidth ? <div className={`mainView-libraryFlyout-out`}>
             {this.docButtons}
         </div> :
@@ -314,7 +315,7 @@ export class MainView extends React.Component {
                         PanelHeight={this.getContentsHeight}
                         renderDepth={0}
                         focus={emptyFunction}
-                        styleProvider={DefaultStyleProvider}
+                        styleProvider={this._sidebarContent.title === "My Dashboards" ? DashboardStyleProvider : DefaultStyleProvider}
                         parentActive={returnTrue}
                         whenActiveChanged={emptyFunction}
                         bringToFront={emptyFunction}
diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx
index 312cfc73e..10cad5806 100644
--- a/src/client/views/StyleProvider.tsx
+++ b/src/client/views/StyleProvider.tsx
@@ -160,6 +160,43 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps |
                     </div>
                     : (null);
             }
+        }
+}
+
+function toggleHidden(e: React.MouseEvent, doc: Doc) {
+    UndoManager.RunInBatch(() => runInAction(() => {
+        e.stopPropagation();
+        doc.hidden = doc.hidden ? undefined : true;
+    }), "toggleHidden");
+}
+
+function toggleLock(e: React.MouseEvent, doc: Doc) {
+    UndoManager.RunInBatch(() => runInAction(() => {
+        e.stopPropagation();
+        doc.lockedPosition = doc.lockedPosition ? undefined : true;
+    }), "toggleHidden");
+}
+
+/**
+ * add lock and hide button decorations for the "Dashboards" flyout TreeView
+ */
+export function DashboardStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps | DocumentViewProps>, property: string) {
+    switch (property.split(":")[0]) {
+        case StyleProp.Decorations:
+            if (doc) {
+                const hidden = doc.hidden;
+                const locked = doc.lockedPosition;
+                return doc._viewType == CollectionViewType.Docking || (Doc.IsSystem(doc) && Doc.UserDoc().noviceMode) ? (null) :
+                <>
+                    <div className={`styleProvider-treeView-hide${hidden ? "-active" : ""}`} onClick={(e) => toggleHidden(e, doc)}>
+                        <FontAwesomeIcon icon={hidden ? "eye-slash" : "eye"} size="sm" />
+                    </div>
+                    <div className={`styleProvider-treeView-lock${locked ? "-active" : ""}`} onClick={(e) => toggleLock(e, doc)}>
+                        <FontAwesomeIcon icon={locked ? "lock" : "unlock"} size="sm" />
+                    </div>
+                </>
+            }
+        default: return DefaultStyleProvider(doc, props, property);
     }
 }
 
diff --git a/src/client/views/collections/TreeView.scss b/src/client/views/collections/TreeView.scss
index 1cd7cf82a..45dec2661 100644
--- a/src/client/views/collections/TreeView.scss
+++ b/src/client/views/collections/TreeView.scss
@@ -98,12 +98,12 @@
         width: unset;
     }
 
-    >svg, .treeView-lock, .treeView-hide, .treeView-lock-active, .treeView-hide-active {
+    >svg, .styleProvider-treeView-lock, .styleProvider-treeView-hide, .styleProvider-treeView-lock-active, .styleProvider-treeView-hide-active {
         margin-left: 0.25rem;
         margin-right: 0.25rem; 
     }
 
-    >svg, .treeView-lock, .treeView-hide {
+    >svg, .styleProvider-treeView-lock, .styleProvider-treeView-hide {
         display: none;
     }
 
@@ -131,7 +131,7 @@
         }
     }
 
-    .treeView-lock, .treeView-hide {
+    .styleProvider-treeView-lock, .styleProvider-treeView-hide {
         display: inherit;
     }
 }
diff --git a/src/client/views/collections/TreeView.tsx b/src/client/views/collections/TreeView.tsx
index bc0fd287b..8d25cc295 100644
--- a/src/client/views/collections/TreeView.tsx
+++ b/src/client/views/collections/TreeView.tsx
@@ -466,33 +466,6 @@ export class TreeView extends React.Component<TreeViewProps> {
             }
         </div>;
     }
-    
-    @action
-    toggleHidden = (e: React.MouseEvent) => {
-        e.stopPropagation();
-        this.doc.hidden = this.doc.hidden ? undefined : true;
-    }
-
-    @action
-    toggleLock = (e: React.MouseEvent) => {
-        e.stopPropagation();
-        this.doc.lockedPosition = this.doc.lockedPosition ? undefined : true;
-    }
-
-    @computed get renderRightButtons() {
-        TraceMobx();
-        const hidden = this.doc.hidden;
-        const locked = this.doc.lockedPosition;
-        return this.doc._viewType == CollectionViewType.Docking || (Doc.IsSystem(this.doc) && Doc.UserDoc().noviceMode) ? (null) :
-            <>
-                <div className={`treeView-hide${hidden ? "-active" : ""}`} onClick={this.toggleHidden}>
-                    <FontAwesomeIcon icon={hidden ? "eye-slash" : "eye"} size="sm" />
-                </div>
-                <div className={`treeView-lock${locked ? "-active" : ""}`} onClick={this.toggleLock}>
-                    <FontAwesomeIcon icon={locked ? "lock" : "unlock"} size="sm" />
-                </div>
-            </>
-    }
 
     @computed get showTitleEditorControl() { return ["*", this._uniqueId, this.props.treeView._uniqueId].includes(Doc.GetT(this.doc, "editTitle", "string", true) || ""); }
     @computed get headerElements() {
@@ -612,7 +585,8 @@ export class TreeView extends React.Component<TreeViewProps> {
                 }} >
                 {view}
             </div >
-            {this.renderRightButtons}
+            {/* hide and lock buttons */}
+            {this.props.styleProvider?.(this.doc, this.props.treeView.props, StyleProp.Decorations)} 
             {this.headerElements}
         </>;
     }
-- 
cgit v1.2.3-70-g09d2