From e7ebcd064a89c3f7c246bca680cea9634f87625b Mon Sep 17 00:00:00 2001
From: Melissa Zhang <mzhang19096@gmail.com>
Date: Mon, 21 Dec 2020 09:21:31 -0800
Subject: hardcoded lock/hide buttons

---
 src/client/views/collections/TreeView.tsx | 29 +++++++++++++++++++++++++++++
 1 file changed, 29 insertions(+)

(limited to 'src/client/views/collections/TreeView.tsx')

diff --git a/src/client/views/collections/TreeView.tsx b/src/client/views/collections/TreeView.tsx
index 93d3be1fc..bc0fd287b 100644
--- a/src/client/views/collections/TreeView.tsx
+++ b/src/client/views/collections/TreeView.tsx
@@ -466,6 +466,34 @@ 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() {
         return (Doc.IsSystem(this.doc) && Doc.UserDoc().noviceMode) || this.props.treeViewHideHeaderFields() ? (null) :
@@ -584,6 +612,7 @@ export class TreeView extends React.Component<TreeViewProps> {
                 }} >
                 {view}
             </div >
+            {this.renderRightButtons}
             {this.headerElements}
         </>;
     }
-- 
cgit v1.2.3-70-g09d2


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/client/views/collections/TreeView.tsx')

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


From 7aba0a9b1b1a3e7d72e24118ecbb05b98165d3b9 Mon Sep 17 00:00:00 2001
From: Melissa Zhang <mzhang19096@gmail.com>
Date: Wed, 23 Dec 2020 14:39:29 -0800
Subject: UI styling changes

---
 src/client/views/MainView.scss             |  1 -
 src/client/views/MainView.tsx              |  5 ++---
 src/client/views/collections/TreeView.scss | 27 +++++++++++++++------------
 src/client/views/collections/TreeView.tsx  |  7 ++++---
 src/client/views/search/SearchBox.scss     | 29 ++++++++---------------------
 src/client/views/search/SearchBox.tsx      |  2 +-
 6 files changed, 30 insertions(+), 41 deletions(-)

(limited to 'src/client/views/collections/TreeView.tsx')

diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss
index 33bd7e77e..d6a455a22 100644
--- a/src/client/views/MainView.scss
+++ b/src/client/views/MainView.scss
@@ -369,7 +369,6 @@
     height: 55px;
     top: 50%;
     left: -10px;
-    border: 1px solid black;
     border-radius: 8px;
     position: relative;
     z-index: 41; // lm_maximised has a z-index of 40 and this needs to be above that
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index daa059a49..48cc6f36d 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -296,7 +296,6 @@ 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> :
@@ -387,8 +386,8 @@ export class MainView extends React.Component {
             {this.menuPanel}
             <div className={`mainView-innerContent${this.darkScheme ? "-dark" : ""}`}>
                 {this.flyout}
-                < div className="mainView-libraryHandle" style={{ display: !this._flyoutWidth ? "none" : undefined, }} onPointerDown={this.onFlyoutPointerDown} >
-                    <FontAwesomeIcon icon="chevron-left" color={this.darkScheme ? "white" : "black"} size="sm" />
+                <div className="mainView-libraryHandle" style={{ display: !this._flyoutWidth ? "none" : undefined, }} onPointerDown={this.onFlyoutPointerDown} >
+                    <FontAwesomeIcon icon="chevron-left" color={this.darkScheme ? "white" : "black"} style={{opacity: "50%"}} size="sm" />
                 </div>
 
                 {this.dockingContent}
diff --git a/src/client/views/collections/TreeView.scss b/src/client/views/collections/TreeView.scss
index 45dec2661..3c1e16f6c 100644
--- a/src/client/views/collections/TreeView.scss
+++ b/src/client/views/collections/TreeView.scss
@@ -98,15 +98,20 @@
         width: unset;
     }
 
-    >svg, .styleProvider-treeView-lock, .styleProvider-treeView-hide, .styleProvider-treeView-lock-active, .styleProvider-treeView-hide-active {
+    .right-buttons-container {
+        display: flex;
+        align-items: center;
         margin-left: 0.25rem;
-        margin-right: 0.25rem; 
-    }
 
-    >svg, .styleProvider-treeView-lock, .styleProvider-treeView-hide {
-        display: none;
+        >svg, .styleProvider-treeView-lock, .styleProvider-treeView-hide, .styleProvider-treeView-lock-active, .styleProvider-treeView-hide-active {
+            margin-left: 0.25rem;
+            margin-right: 0.25rem; 
+        }
+    
+        >svg, .styleProvider-treeView-lock, .styleProvider-treeView-hide {
+            display: none;
+        }
     }
-
 }
 
 .treeView-header:hover {
@@ -114,10 +119,6 @@
         display: inherit;
     }
 
-    >svg {
-        display: inherit;
-    }
-
     .treeView-openRight {
         display: inline-block;
         height: 17px;
@@ -131,8 +132,10 @@
         }
     }
 
-    .styleProvider-treeView-lock, .styleProvider-treeView-hide {
-        display: inherit;
+    .right-buttons-container {
+        >svg, .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 8d25cc295..bce0ba9e2 100644
--- a/src/client/views/collections/TreeView.tsx
+++ b/src/client/views/collections/TreeView.tsx
@@ -585,9 +585,10 @@ export class TreeView extends React.Component<TreeViewProps> {
                 }} >
                 {view}
             </div >
-            {/* hide and lock buttons */}
-            {this.props.styleProvider?.(this.doc, this.props.treeView.props, StyleProp.Decorations)} 
-            {this.headerElements}
+            <div className={"right-buttons-container"}>
+                {this.props.styleProvider?.(this.doc, this.props.treeView.props, StyleProp.Decorations)} {/* hide and lock buttons */}
+                {this.headerElements}
+            </div>
         </>;
     }
 
diff --git a/src/client/views/search/SearchBox.scss b/src/client/views/search/SearchBox.scss
index 13d4a6d5a..76f9b66eb 100644
--- a/src/client/views/search/SearchBox.scss
+++ b/src/client/views/search/SearchBox.scss
@@ -30,42 +30,29 @@
             .searchBox-lozenge-user,
             .searchBox-lozenge-dashboard,
             .searchBox-lozenge {
-                background-color: #313131;
-                border-radius: 5px;
                 height: 18px;
                 padding: 4px;
-                box-shadow: lightgrey 0.15em 0.15em 0.1em;
-                margin: 2px;
-                margin-bottom: 4px;
-                border-top: dimgrey 1px solid;
-                border-left: dimgrey 1px solid;
+                margin-right: 5px;
                 display: flex;
+                align-items: center;
+                border: grey 1px solid;
                 .searchBox-logoff,
                 .searchBox-dashboards {
                     border-radius: 3px;
                     background: olivedrab;
                     color: white;
-                    position: relative;
                     display: none;
-                    margin-left: 3px;
-                    padding-left: 2px;
-                    padding-right: 2px;
-                    padding-bottom: 11px;
-                    cursor: default;
+                    margin-left: 5px;
+                    padding: 1px 2px 1px 2px;
+                    cursor: pointer;
                 }
                 .searchBox-logoff {
                     background: red;
                 }
 
                 .searchBox-dashSelect{
-                    background-color: black;
-                    color: white;
-                    font-size: 9;
-                    margin-right: 6;
-                    border-radius: 5px;
-                    position: relative;
-                    height: 15px;
-                    transform: translate(0,-3px);
+                    border: none;
+                    background-color: transparent;
 
                     &:hover {
                         cursor: pointer;
diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
index d3fee85a7..d10afdcf9 100644
--- a/src/client/views/search/SearchBox.tsx
+++ b/src/client/views/search/SearchBox.tsx
@@ -466,7 +466,7 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
     }
 
     @computed get scopeButtons() {
-        return <div style={{ height: 25, paddingLeft: "4px", paddingRight: "4px", border: "1px solid gray", borderRadius: "0.3em", borderBottom: !this.open ? "1px solid" : "none", }}>
+        return <div style={{ height: 25, paddingLeft: "4px", paddingRight: "4px"}}>
             <form className="beta" style={{ justifyContent: "space-evenly", display: "flex" }}>
                 <div style={{ display: "contents" }}>
                     <div className="radio" style={{ margin: 0 }}>
-- 
cgit v1.2.3-70-g09d2


From a2807a42ab6af0d683726d8263b14fc8121fc6f0 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Wed, 23 Dec 2020 19:21:10 -0500
Subject: changed DashbaoardStyleProvider to not show icons for tab's by adding
 an 'afterHeader' property extension to treeView styleprovider calls.

---
 src/client/views/MainView.tsx             | 40 ++++++++++++++++++++++++++-----
 src/client/views/StyleProvider.tsx        | 37 ----------------------------
 src/client/views/collections/TreeView.tsx |  2 +-
 3 files changed, 35 insertions(+), 44 deletions(-)

(limited to 'src/client/views/collections/TreeView.tsx')

diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 48cc6f36d..f301d6c51 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -3,7 +3,7 @@ import { faBuffer, faHireAHelper } from '@fortawesome/free-brands-svg-icons';
 import * as far from '@fortawesome/free-regular-svg-icons';
 import * as fa from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { action, computed, configure, observable, reaction } from 'mobx';
+import { action, computed, configure, observable, reaction, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import "normalize.css";
 import * as React from 'react';
@@ -28,7 +28,7 @@ import { SettingsManager } from '../util/SettingsManager';
 import { SharingManager } from '../util/SharingManager';
 import { SnappingManager } from '../util/SnappingManager';
 import { Transform } from '../util/Transform';
-import { UndoManager } from '../util/UndoManager';
+import { UndoManager, undoBatch } from '../util/UndoManager';
 import { TimelineMenu } from './animationtimeline/TimelineMenu';
 import { CollectionDockingView } from './collections/CollectionDockingView';
 import { MarqueeOptionsMenu } from './collections/collectionFreeForm/MarqueeOptionsMenu';
@@ -46,7 +46,7 @@ import { LinkMenu } from './linking/LinkMenu';
 import "./MainView.scss";
 import { AudioBox } from './nodes/AudioBox';
 import { DocumentLinksButton } from './nodes/DocumentLinksButton';
-import { DocumentView } from './nodes/DocumentView';
+import { DocumentView, DocumentViewProps } from './nodes/DocumentView';
 import { FormattedTextBox } from './nodes/formattedText/FormattedTextBox';
 import { LinkDescriptionPopup } from './nodes/LinkDescriptionPopup';
 import { LinkDocPreview } from './nodes/LinkDocPreview';
@@ -58,7 +58,8 @@ import { PDFMenu } from './pdf/PDFMenu';
 import { PreviewCursor } from './PreviewCursor';
 import { PropertiesView } from './PropertiesView';
 import { SearchBox } from './search/SearchBox';
-import { DefaultStyleProvider, DashboardStyleProvider } from './StyleProvider';
+import { DefaultStyleProvider, StyleProp } from './StyleProvider';
+import { FieldViewProps } from './nodes/FieldView';
 const _global = (window /* browser */ || global /* node */) as any;
 
 @observer
@@ -295,6 +296,33 @@ export class MainView extends React.Component {
             doc.dockingConfig ? CurrentUserUtils.openDashboard(Doc.UserDoc(), doc) : CollectionDockingView.AddSplit(doc, "right");
     }
 
+
+    /**
+     * add lock and hide button decorations for the "Dashboards" flyout TreeView
+     */
+    DashboardStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps | DocumentViewProps>, property: string) {
+        const toggleField = undoBatch(action((e: React.MouseEvent, doc: Doc, field: string) => {
+            e.stopPropagation();
+            doc[field] = doc[field] ? undefined : true;
+        }));
+        switch (property.split(":")[0]) {
+            case StyleProp.Decorations:
+                return !doc || property.includes(":afterHeader") || // bcz: Todo: afterHeader should be generalized into a renderPath that is a list of the documents rendered so far which would mimic much of CSS property selectors
+                    DocListCast((Doc.UserDoc().myDashboards as Doc).data).some(dash => dash === doc ||
+                        DocListCast(dash.data).some(tabset => tabset === doc)) ? (null) :
+                    <>
+                        <div className={`styleProvider-treeView-hide${doc.hidden ? "-active" : ""}`} onClick={e => toggleField(e, doc, "hidden")}>
+                            <FontAwesomeIcon icon={doc.hidden ? "eye-slash" : "eye"} size="sm" />
+                        </div>
+                        <div className={`styleProvider-treeView-lock${doc.lockedPosition ? "-active" : ""}`} onClick={e => toggleField(e, doc, "lockedPosition")}>
+                            <FontAwesomeIcon icon={doc.lockedPosition ? "lock" : "unlock"} size="sm" />
+                        </div>
+                    </>;
+        }
+        return DefaultStyleProvider(doc, props, property);
+    }
+
+
     @computed get flyout() {
         return !this._flyoutWidth ? <div className={`mainView-libraryFlyout-out`}>
             {this.docButtons}
@@ -314,7 +342,7 @@ export class MainView extends React.Component {
                         PanelHeight={this.getContentsHeight}
                         renderDepth={0}
                         focus={emptyFunction}
-                        styleProvider={this._sidebarContent.title === "My Dashboards" ? DashboardStyleProvider : DefaultStyleProvider}
+                        styleProvider={this._sidebarContent.proto === Doc.UserDoc().myDashboards ? this.DashboardStyleProvider : DefaultStyleProvider}
                         parentActive={returnTrue}
                         whenActiveChanged={emptyFunction}
                         bringToFront={emptyFunction}
@@ -387,7 +415,7 @@ export class MainView extends React.Component {
             <div className={`mainView-innerContent${this.darkScheme ? "-dark" : ""}`}>
                 {this.flyout}
                 <div className="mainView-libraryHandle" style={{ display: !this._flyoutWidth ? "none" : undefined, }} onPointerDown={this.onFlyoutPointerDown} >
-                    <FontAwesomeIcon icon="chevron-left" color={this.darkScheme ? "white" : "black"} style={{opacity: "50%"}} size="sm" />
+                    <FontAwesomeIcon icon="chevron-left" color={this.darkScheme ? "white" : "black"} style={{ opacity: "50%" }} size="sm" />
                 </div>
 
                 {this.dockingContent}
diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx
index 10cad5806..312cfc73e 100644
--- a/src/client/views/StyleProvider.tsx
+++ b/src/client/views/StyleProvider.tsx
@@ -160,43 +160,6 @@ 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.tsx b/src/client/views/collections/TreeView.tsx
index bce0ba9e2..e05e5925d 100644
--- a/src/client/views/collections/TreeView.tsx
+++ b/src/client/views/collections/TreeView.tsx
@@ -586,7 +586,7 @@ export class TreeView extends React.Component<TreeViewProps> {
                 {view}
             </div >
             <div className={"right-buttons-container"}>
-                {this.props.styleProvider?.(this.doc, this.props.treeView.props, StyleProp.Decorations)} {/* hide and lock buttons */}
+                {this.props.styleProvider?.(this.doc, this.props.treeView.props, StyleProp.Decorations + (Doc.IsSystem(this.props.containingCollection) ? ":afterHeader" : ""))} {/* hide and lock buttons */}
                 {this.headerElements}
             </div>
         </>;
-- 
cgit v1.2.3-70-g09d2


From e59f88e1af2ca691bd48188e5bef9e6a4d4e2dab Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Thu, 31 Dec 2020 13:53:29 -0500
Subject: fixes for sliderBox to work in FilterBox.  suppressed brush
 highlighting in filterBox.

---
 src/client/documents/Documents.ts         |  4 ++--
 src/client/views/StyleProvider.tsx        |  4 +++-
 src/client/views/collections/TreeView.tsx | 13 +++++++++----
 src/client/views/nodes/DocumentView.tsx   |  3 ++-
 src/client/views/nodes/FilterBox.tsx      |  9 +++++----
 src/client/views/nodes/SliderBox.scss     |  4 +++-
 src/client/views/nodes/SliderBox.tsx      | 10 ++++++----
 7 files changed, 30 insertions(+), 17 deletions(-)

(limited to 'src/client/views/collections/TreeView.tsx')

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 8fd906dc7..c457fb722 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -113,6 +113,7 @@ export interface DocumentOptions {
     page?: number;
     description?: string; // added for links
     _viewScale?: number;
+    _overflow?: string;
     forceActive?: boolean;
     layout?: string | Doc; // default layout string for a document
     contentPointerEvents?: string;  // pointer events allowed for content of a document view.  eg. set to "none" in menuSidebar for sharedDocs so that you can select a document, but not interact with its contents
@@ -1250,14 +1251,13 @@ export namespace DocUtils {
             });
         });
         if (x !== undefined && y !== undefined) {
-            const newCollection = Docs.Create.PileDocument(docList, { title: "pileup", x: x - 55, y: y - 55, _width: 110, _height: 100 });
+            const newCollection = Docs.Create.PileDocument(docList, { title: "pileup", x: x - 55, y: y - 55, _width: 110, _height: 100, _overflow: "visible" });
             newCollection.x = NumCast(newCollection.x) + NumCast(newCollection._width) / 2 - 55;
             newCollection.y = NumCast(newCollection.y) + NumCast(newCollection._height) / 2 - 55;
             newCollection._width = newCollection._height = 110;
             //newCollection.borderRounding = "40px";
             newCollection._jitterRotation = 10;
             newCollection._backgroundColor = "gray";
-            newCollection._overflow = "visible";
             return newCollection;
         }
     }
diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx
index 056854ad3..e1600f748 100644
--- a/src/client/views/StyleProvider.tsx
+++ b/src/client/views/StyleProvider.tsx
@@ -2,7 +2,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import 'golden-layout/src/css/goldenlayout-base.css';
 import 'golden-layout/src/css/goldenlayout-dark-theme.css';
 import { runInAction } from 'mobx';
-import { Doc, Opt, StrListCast } from "../../fields/Doc";
+import { Doc, Opt, StrListCast, LayoutSym } from "../../fields/Doc";
 import { List } from '../../fields/List';
 import { listSpec } from '../../fields/Schema';
 import { BoolCast, Cast, NumCast, StrCast } from "../../fields/Types";
@@ -107,9 +107,11 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps |
                 case DocumentType.RTF: docColor = docColor || (darkScheme() ? "#2d2d2d" : "#f1efeb"); break;
                 case DocumentType.FILTER: docColor = docColor || (darkScheme() ? "#2d2d2d" : "rgba(105, 105, 105, 0.432)"); break;
                 case DocumentType.INK: docColor = undefined; break;
+                case DocumentType.SLIDER: break;
                 case DocumentType.BUTTON: docColor = docColor || (darkScheme() ? "#2d2d2d" : "lightgray"); break;
                 case DocumentType.LINK: return "transparent";
                 case DocumentType.COL:
+                    if (StrCast(Doc.LayoutField(doc)).includes("SliderBox")) break;
                     docColor = docColor ? docColor :
                         doc?._isGroup ? "#00000004" : // very faint highlight to show bounds of group
                             (Doc.IsSystem(doc) ? (darkScheme() ? "rgb(62,62,62)" : "lightgrey") : // system docs (seen in treeView) get a grayish background
diff --git a/src/client/views/collections/TreeView.tsx b/src/client/views/collections/TreeView.tsx
index e05e5925d..a61a9e43c 100644
--- a/src/client/views/collections/TreeView.tsx
+++ b/src/client/views/collections/TreeView.tsx
@@ -31,6 +31,7 @@ import { CollectionTreeView } from './CollectionTreeView';
 import { CollectionView, CollectionViewType } from './CollectionView';
 import "./TreeView.scss";
 import React = require("react");
+import { SliderBox } from '../nodes/SliderBox';
 
 export interface TreeViewProps {
     document: Doc;
@@ -568,6 +569,7 @@ export class TreeView extends React.Component<TreeViewProps> {
                 parentActive={returnTrue}
                 whenActiveChanged={this.props.whenActiveChanged}
                 bringToFront={emptyFunction}
+                cantBrush={this.props.treeView.props.cantBrush}
                 dontRegisterView={BoolCast(this.props.treeView.props.Document.dontRegisterChildViews)}
                 docFilters={returnEmptyFilter}
                 docRangeFilters={returnEmptyFilter}
@@ -616,15 +618,17 @@ export class TreeView extends React.Component<TreeViewProps> {
     }
 
     renderEmbeddedDocument = (asText: boolean) => {
-        const panelWidth = asText || StrCast(Doc.LayoutField(this.layoutDoc)).includes("FormattedTextBox") ? this.rtfWidth : this.expandPanelWidth;
-        const panelHeight = asText ? this.rtfOutlineHeight : StrCast(Doc.LayoutField(this.layoutDoc)).includes("FormattedTextBox") ? this.rtfHeight : this.expandPanelHeight;
+        const layout = StrCast(Doc.LayoutField(this.layoutDoc));
+        const isExpandable = layout.includes(FormattedTextBox.name) || layout.includes(SliderBox.name);
+        const panelWidth = asText || isExpandable ? this.rtfWidth : this.expandPanelWidth;
+        const panelHeight = asText ? this.rtfOutlineHeight : isExpandable ? this.rtfHeight : this.expandPanelHeight;
         return <DocumentView key={this.doc[Id]} ref={action((r: DocumentView | null) => this._dref = r)}
             Document={this.doc}
             DataDoc={undefined}
             PanelWidth={panelWidth}
             PanelHeight={panelHeight}
-            NativeWidth={!asText && this.layoutDoc.type === DocumentType.RTF ? this.rtfWidth : undefined}
-            NativeHeight={!asText && this.layoutDoc.type === DocumentType.RTF ? this.rtfHeight : undefined}
+            NativeWidth={!asText && (this.layoutDoc.type === DocumentType.RTF || this.layoutDoc.type === DocumentType.SLIDER) ? this.rtfWidth : undefined}
+            NativeHeight={!asText && (this.layoutDoc.type === DocumentType.RTF || this.layoutDoc.type === DocumentType.SLIDER) ? this.rtfHeight : undefined}
             fitContentsToDoc={true}
             hideTitle={asText}
             LayoutTemplateString={asText ? FormattedTextBox.LayoutString("text") : undefined}
@@ -646,6 +650,7 @@ export class TreeView extends React.Component<TreeViewProps> {
             whenActiveChanged={this.props.whenActiveChanged}
             addDocTab={this.props.addDocTab}
             pinToPres={this.props.pinToPres}
+            cantBrush={this.props.treeView.props.cantBrush}
             bringToFront={returnFalse}
         />;
     }
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index e99b0a155..d72e555a0 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -74,6 +74,7 @@ export interface DocumentViewSharedProps {
     dropAction?: dropActionType;
     dontRegisterView?: boolean;
     ignoreAutoHeight?: boolean;
+    cantBrush?: boolean; // whether the document doesn't show brush highlighting
     pointerEvents?: string;
     scriptContext?: any; // can be assigned anything and will be passed as 'scriptContext' to any OnClick script that executes on this document
 }
@@ -820,7 +821,7 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
             ["transparent", "#65350c", "#65350c", "yellow", "magenta", "cyan", "orange"] :
             ["transparent", "maroon", "maroon", "yellow", "magenta", "cyan", "orange"])[highlightIndex];
         const highlightStyle = ["solid", "dashed", "solid", "solid", "solid", "solid", "solid"][highlightIndex];
-        let highlighting = highlightIndex && ![DocumentType.FONTICON, DocumentType.INK].includes(this.layoutDoc.type as any) && this.layoutDoc._viewType !== CollectionViewType.Linear;
+        let highlighting = !this.props.cantBrush && highlightIndex && ![DocumentType.FONTICON, DocumentType.INK].includes(this.layoutDoc.type as any) && this.layoutDoc._viewType !== CollectionViewType.Linear;
         highlighting = highlighting && this.props.focus !== emptyFunction && this.layoutDoc.title !== "[pres element template]";  // bcz: hack to turn off highlighting onsidebar panel documents.  need to flag a document as not highlightable in a more direct way
 
         const boxShadow = highlighting && this.borderRounding && highlightStyle !== "dashed" ? `0 0 0 ${highlightIndex}px ${highlightColor}` :
diff --git a/src/client/views/nodes/FilterBox.tsx b/src/client/views/nodes/FilterBox.tsx
index be2a7648e..36df21b2d 100644
--- a/src/client/views/nodes/FilterBox.tsx
+++ b/src/client/views/nodes/FilterBox.tsx
@@ -102,7 +102,7 @@ export class FilterBox extends ViewBoxBaseComponent<FieldViewProps, FilterBoxDoc
             if (docRangeFilters) {
                 let index: number;
                 while ((index = docRangeFilters.findIndex(item => item.split(":")[0] === facetHeader)) !== -1) {
-                    docRangeFilters.splice(index, 1);
+                    docRangeFilters.splice(index, 3);
                 }
             }
         } else {
@@ -122,13 +122,13 @@ export class FilterBox extends ViewBoxBaseComponent<FieldViewProps, FilterBoxDoc
             });
             let newFacet: Opt<Doc>;
             if (facetHeader === "text" || facetValues.rtFields / allCollectionDocs.length > 0.1) {
-                newFacet = Docs.Create.TextDocument("", { _width: 100, _height: 25, _stayInCollection: true, _hideContextMenu: true, treeViewExpandedView: "layout", title: facetHeader, treeViewOpen: true, forceActive: true, ignoreClick: true });
+                newFacet = Docs.Create.TextDocument("", { _width: 100, _height: 25, system: true, _stayInCollection: true, _hideContextMenu: true, treeViewExpandedView: "layout", title: facetHeader, treeViewOpen: true, forceActive: true, ignoreClick: true });
                 Doc.GetProto(newFacet).type = DocumentType.COL; // forces item to show an open/close button instead ofa checkbox
                 newFacet._textBoxPadding = 4;
                 const scriptText = `setDocFilter(this?.target, "${facetHeader}", text, "match")`;
                 newFacet.onTextChanged = ScriptField.MakeScript(scriptText, { this: Doc.name, text: "string" });
             } else if (facetHeader !== "tags" && nonNumbers / facetValues.strings.length < .1) {
-                newFacet = Docs.Create.SliderDocument({ title: facetHeader, _stayInCollection: true, _hideContextMenu: true, treeViewExpandedView: "layout", treeViewOpen: true });
+                newFacet = Docs.Create.SliderDocument({ title: facetHeader, _overflow: "visible", _height: 40, _stayInCollection: true, _hideContextMenu: true, treeViewExpandedView: "layout", treeViewOpen: true });
                 const newFacetField = Doc.LayoutFieldKey(newFacet);
                 const ranged = Doc.readDocRangeFilter(targetDoc, facetHeader);
                 Doc.GetProto(newFacet).type = DocumentType.COL; // forces item to show an open/close button instead ofa checkbox
@@ -146,7 +146,7 @@ export class FilterBox extends ViewBoxBaseComponent<FieldViewProps, FilterBoxDoc
                 newFacet.title = facetHeader;
                 newFacet.treeViewOpen = true;
                 newFacet.type = DocumentType.COL;
-                const capturedVariables = { layoutDoc: targetDoc, _stayInCollection: true, _hideContextMenu: true, dataDoc: (targetDoc.data as any)[0][DataSym] };
+                const capturedVariables = { layoutDoc: targetDoc, system: true, _stayInCollection: true, _hideContextMenu: true, dataDoc: (targetDoc.data as any)[0][DataSym] };
                 newFacet.data = ComputedField.MakeFunction(`readFacetData(layoutDoc, "${facetHeader}")`, {}, capturedVariables);
             }
             newFacet && Doc.AddDocToList(this.dataDoc, this.props.fieldKey, newFacet);
@@ -184,6 +184,7 @@ export class FilterBox extends ViewBoxBaseComponent<FieldViewProps, FilterBoxDoc
                     DataDoc={Doc.GetProto(facetCollection)}
                     fieldKey={`${this.props.fieldKey}`}
                     CollectionView={undefined}
+                    cantBrush={true}
                     docFilters={returnEmptyFilter}
                     docRangeFilters={returnEmptyFilter}
                     searchFilterDocs={returnEmptyDoclist}
diff --git a/src/client/views/nodes/SliderBox.scss b/src/client/views/nodes/SliderBox.scss
index 78015bd70..a896ffa87 100644
--- a/src/client/views/nodes/SliderBox.scss
+++ b/src/client/views/nodes/SliderBox.scss
@@ -1,7 +1,9 @@
 .sliderBox-outerDiv {
-    width: 100%;
+    width: calc(100% - 14px);   // 14px accounts for handles that are at the max value of the slider that would extend outside the box
     height: 100%;
     border-radius: inherit;
     display: flex;
     flex-direction: column;
+    top: 7px;
+    position: relative;
 }
\ No newline at end of file
diff --git a/src/client/views/nodes/SliderBox.tsx b/src/client/views/nodes/SliderBox.tsx
index 2aa71b2bd..c30dcde54 100644
--- a/src/client/views/nodes/SliderBox.tsx
+++ b/src/client/views/nodes/SliderBox.tsx
@@ -50,10 +50,12 @@ export class SliderBox extends ViewBoxBaseComponent<FieldViewProps, SliderDocume
         return domain[1] <= domain[0] ? (null) : (
             <div className="sliderBox-outerDiv" onContextMenu={this.specificContextMenu} onPointerDown={e => e.stopPropagation()}
                 style={{ boxShadow: this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.BoxShadow) }}>
-                <div className="sliderBox-mainButton" onContextMenu={this.specificContextMenu} style={{
-                    background: StrCast(this.layoutDoc.backgroundColor), color: StrCast(this.layoutDoc.color, "black"),
-                    fontSize: StrCast(this.layoutDoc._fontSize), letterSpacing: StrCast(this.layoutDoc.letterSpacing)
-                }} >
+                <div className="sliderBox-mainButton"
+                    onContextMenu={this.specificContextMenu} style={{
+                        background: StrCast(this.layoutDoc.backgroundColor),
+                        color: StrCast(this.layoutDoc.color, "black"),
+                        fontSize: StrCast(this.layoutDoc._fontSize), letterSpacing: StrCast(this.layoutDoc.letterSpacing)
+                    }} >
                     <Slider
                         mode={2}
                         step={1}
-- 
cgit v1.2.3-70-g09d2

