From 4c572c61dabf9032853019a9287ddf5f1dd5863b Mon Sep 17 00:00:00 2001
From: anika <anika.ahluwalia@gmail.com>
Date: Mon, 28 Dec 2020 20:14:48 -0600
Subject: finishing overall structure of the UI

---
 src/client/views/nodes/FilterBox.scss | 29 ++++++++++++++------
 src/client/views/nodes/FilterBox.tsx  | 50 +++++++++++++++++++++--------------
 2 files changed, 51 insertions(+), 28 deletions(-)

(limited to 'src')

diff --git a/src/client/views/nodes/FilterBox.scss b/src/client/views/nodes/FilterBox.scss
index 9843c4b1c..62f972218 100644
--- a/src/client/views/nodes/FilterBox.scss
+++ b/src/client/views/nodes/FilterBox.scss
@@ -22,10 +22,16 @@
     }
 }
 
+.filterBox-bottom {
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+}
+
 
 .filterBox-saveBookmark {
     width: 105px;
-    background-color: rgb(216, 214, 214);
+    background-color: #f5f5f5;
     border-radius: 6px;
     padding: 5px;
     margin: 5px;
@@ -79,9 +85,17 @@
     width: 100%;
 }
 
+// .filterBox-top {
+//     padding-bottom: 20px;
+//     border-bottom: 2px solid black;
+//     position: fixed;
+//     top: 0;
+//     width: 100%;
+// }
+
 .filterBox-select-scope {
-    margin-bottom: 5px;
-    // border-bottom: 1px solid black;
+    padding-bottom: 20px;
+    border-bottom: 2px solid black;
 }
 
 .filterBox-select-text {
@@ -98,7 +112,7 @@
 .filterBox-selection {
     border-radius: 6px;
     border: none;
-    background-color: rgb(216, 214, 214);
+    background-color: #f5f5f5;
     padding: 2px;
 
     &:hover {
@@ -108,7 +122,7 @@
 
 .filterBox-addFilter {
     width: 100px;
-    background-color: rgb(216, 214, 214);
+    background-color: #f5f5f5;
     border-radius: 6px;
     padding: 5px;
     margin: 5px;
@@ -129,13 +143,12 @@
     top: 0;
     border-left: solid 1px;
     z-index: 1;
-    background-color: darkGray;
+    background-color: #D3D3D3;
 
     .filterBox-addfacet {
         display: inline-block;
         width: 200px;
         height: 30px;
-        background: darkGray;
         text-align: left;
 
         .filterBox-addFacetButton {
@@ -154,6 +167,6 @@
     .filterBox-tree {
         display: inline-block;
         width: 100%;
-        height: calc(100% - 30px);
+        //height: calc(100% - 30px);
     }
 }
\ No newline at end of file
diff --git a/src/client/views/nodes/FilterBox.tsx b/src/client/views/nodes/FilterBox.tsx
index 7c03b0835..95ffc6f8c 100644
--- a/src/client/views/nodes/FilterBox.tsx
+++ b/src/client/views/nodes/FilterBox.tsx
@@ -21,6 +21,7 @@ import './FilterBox.scss';
 import { Scripting } from "../../util/Scripting";
 import { values } from "lodash";
 import { tokenToString } from "typescript";
+import { SelectionManager } from "../../util/SelectionManager";
 const higflyout = require("@hig/flyout");
 export const { anchorPoints } = higflyout;
 export const Flyout = higflyout.default;
@@ -158,7 +159,7 @@ export class FilterBox extends ViewBoxBaseComponent<FieldViewProps, FilterBoxDoc
             newFacet && Doc.AddDocToList(this.dataDoc, this.props.fieldKey, newFacet);
         }
     }
-    filterBackground = () => "rgba(105, 105, 105, 0.432)";
+    filterBackground = () => "#d3d3d3";
     @computed get scriptField() {
         const scriptText = "setDocFilter(this?.target, heading, this.title, checked)";
         const script = ScriptField.MakeScript(scriptText, { this: Doc.name, heading: "string", checked: "string", containingTreeView: Doc.name });
@@ -188,7 +189,7 @@ export class FilterBox extends ViewBoxBaseComponent<FieldViewProps, FilterBoxDoc
     changeSelected = (e: any) => {
         if (this._filterSelected) {
             this._filterSelected = false;
-            // helper method to deselect all documents
+            SelectionManager.DeselectAll();
         } else {
             this._filterSelected = true;
             // helper method to select specified docs
@@ -206,18 +207,24 @@ export class FilterBox extends ViewBoxBaseComponent<FieldViewProps, FilterBoxDoc
             </label>)}
         </div>;
 
+        const newFlyout = <div className="filterBox-flyout" style={{ width: `100%`, height: this.props.PanelHeight() - 30 }} onWheel={e => e.stopPropagation()}>
+            {this._allFacets.map(facet => <label className="filterBox-flyout-facet" key={`${facet}`} onClick={e => this.facetClick(facet)}>
+                <input type="checkbox" onChange={e => { }} checked={DocListCast(this.props.Document[this.props.fieldKey]).some(d => d.title === facet)} />
+                <span className="checkmark" />
+                {facet}
+            </label>)}
+        </div>
+
         return this.props.dontRegisterView ? (null) : <div className="filterBox-treeView" style={{ width: "100%" }}>
+
+            {/* <div className="filterBox-top"> */}
             <div className="filter-bookmark">
                 <FontAwesomeIcon className="filter-bookmark-icon" icon={"bookmark"} size={"lg"} />
             </div>
 
-            {/* <div className="filterBox-addFacet" style={{ width: "100%" }} onPointerDown={e => e.stopPropagation()}>
-                <div className="filterBox-addFacetButton"> */}
             <div className="filterBox-title">
                 <span className="filterBox-span">Choose Filters</span>
             </div>
-            {/* </div>
-            </div> */}
 
             <div className="filterBox-select-bool">
                 <select className="filterBox-selection" onChange={e => this.changeBool(e)}>
@@ -235,6 +242,7 @@ export class FilterBox extends ViewBoxBaseComponent<FieldViewProps, FilterBoxDoc
                     <option value="Current Collection" key="Current Collection">Current Collection</option>
                 </select>
             </div>
+            {/* </div> */}
 
             <div className="filterBox-tree" key="tree">
                 <CollectionTreeView
@@ -277,21 +285,23 @@ export class FilterBox extends ViewBoxBaseComponent<FieldViewProps, FilterBoxDoc
                 </div>
             </Flyout>
 
-            <div className="filterBox-select-matched">
-                <input className="filterBox-select-box" type="checkbox"
-                    onChange={e => this.changeSelected(e)} />
-                <div className="filterBox-select-text">select</div>
-                <select className="filterBox-selection" onChange={e => this.changeMatch(e)}>
-                    <option value="matched" key="matched">matched</option>
-                    <option value="unmatched" key="unmatched">unmatched</option>
-                </select>
-                <div className="filterBox-select-text">documents</div>
-            </div>
+            <div className="filterBox-bottom">
+                <div className="filterBox-select-matched">
+                    <input className="filterBox-select-box" type="checkbox"
+                        onChange={e => this.changeSelected(e)} />
+                    <div className="filterBox-select-text">select</div>
+                    <select className="filterBox-selection" onChange={e => this.changeMatch(e)}>
+                        <option value="matched" key="matched">matched</option>
+                        <option value="unmatched" key="unmatched">unmatched</option>
+                    </select>
+                    <div className="filterBox-select-text">documents</div>
+                </div>
 
-            <div className="filterBox-saveWrapper">
-                <div className="filterBox-saveBookmark">
-                    <FontAwesomeIcon className="filterBox-saveBookmark-icon" icon={"bookmark"} size={"sm"} />
-                    <div>SAVE</div>
+                <div className="filterBox-saveWrapper">
+                    <div className="filterBox-saveBookmark">
+                        <FontAwesomeIcon className="filterBox-saveBookmark-icon" icon={"bookmark"} size={"sm"} />
+                        <div>SAVE</div>
+                    </div>
                 </div>
             </div>
         </div>;
-- 
cgit v1.2.3-70-g09d2