Merge pull request #235 from browngraphicslab/search_UI

filter ui

9 files changed, 92 insertions, 75 deletions

diff --git a/src/client/views/Main.scss b/src/client/views/Main.scss
index a16123476..eed2ae4fa 100644
--- a/src/client/views/Main.scss
+++ b/src/client/views/Main.scss
@@ -24,7 +24,7 @@ div {
 
 .jsx-parser {
     width: 100%;
-    height:100%;
+    height: 100%;
     pointer-events: none;
     border-radius: inherit;
 }
@@ -119,6 +119,7 @@ button:hover {
         margin-bottom: 10px;
     }
 }
+
 .toolbar-color-picker {
     background-color: $light-color;
     border-radius: 5px;
@@ -128,6 +129,7 @@ button:hover {
     left: -3px;
     box-shadow: $intermediate-color 0.2vw 0.2vw 0.8vw;
 }
+
 .toolbar-color-button {
     border-radius: 11px;
     width: 22px;
@@ -146,7 +148,7 @@ button:hover {
     bottom: 22px;
     left: 250px;
 
-    > label {
+    >label {
         background: $dark-color;
         color: $light-color;
         display: inline-block;
@@ -168,15 +170,15 @@ button:hover {
         transform: scale(1.15);
     }
 
-    > input {
+    >input {
         display: none;
     }
 
-    > input:not(:checked)~#add-options-content {
+    >input:not(:checked)~#add-options-content {
         display: none;
     }
 
-    > input:checked~label {
+    >input:checked~label {
         transform: rotate(45deg);
         transition: transform 0.5s;
         cursor: pointer;
@@ -221,7 +223,7 @@ ul#add-options-list {
     list-style: none;
     padding: 5 0 0 0;
 
-    > li {
+    >li {
         display: inline-block;
         padding: 0;
     }
@@ -231,7 +233,7 @@ ul#add-options-list {
     height: 100%;
     position: absolute;
     display: flex;
-    flex-direction:column;
+    flex-direction: column;
 }
 
 .mainView-libraryHandle {
@@ -243,21 +245,25 @@ ul#add-options-list {
     position: absolute;
     z-index: 1;
 }
+
 .svg-inline--fa {
     vertical-align: unset;
 }
+
 .mainView-workspace {
-    height:200px;
-    position:relative;
-    display:flex;
+    height: 200px;
+    position: relative;
+    display: flex;
 }
+
 .mainView-library {
-    height:75%;
-    position:relative;
-    display:flex;
+    height: 75%;
+    position: relative;
+    display: flex;
 }
+
 .mainView-recentlyClosed {
-    height:25%;
-    position:relative;
-    display:flex;
+    height: 25%;
+    position: relative;
+    display: flex;
 }
\ No newline at end of file
diff --git a/src/client/views/search/CheckBox.scss b/src/client/views/search/CheckBox.scss
index af59d5fbf..cc858bec6 100644
--- a/src/client/views/search/CheckBox.scss
+++ b/src/client/views/search/CheckBox.scss
@@ -13,9 +13,9 @@
         margin-top: 0px;
 
         .check-container:hover~.check-box {
-            background-color: $intermediate-color;
+            background-color: $darker-alt-accent;
         }
-    
+
         .check-container {
             width: 40px;
             height: 40px;
@@ -27,7 +27,8 @@
                 position: absolute;
                 fill-opacity: 0;
                 stroke-width: 4px;
-                stroke: white;
+                // stroke: white;
+                stroke: gray;
             }
         }
 
@@ -55,5 +56,4 @@
         margin-left: 15px;
     }
 
-}
-
+}
\ No newline at end of file
diff --git a/src/client/views/search/FieldFilters.scss b/src/client/views/search/FieldFilters.scss
index ba0926140..e1d0d8df5 100644
--- a/src/client/views/search/FieldFilters.scss
+++ b/src/client/views/search/FieldFilters.scss
@@ -1,5 +1,12 @@
 .field-filters {
     width: 100%;
     display: grid;
-    grid-template-columns: 18% 20% 60%;
+    // grid-template-columns: 18% 20% 60%;
+    grid-template-columns: 20% 25% 60%;
+}
+
+.field-filters-required {
+    width: 100%;
+    display: grid;
+    grid-template-columns: 50% 50%;
 }
\ No newline at end of file
diff --git a/src/client/views/search/FilterBox.scss b/src/client/views/search/FilterBox.scss
index 1eb8963d7..b2b452419 100644
--- a/src/client/views/search/FilterBox.scss
+++ b/src/client/views/search/FilterBox.scss
@@ -3,22 +3,25 @@
 
 .filter-form {
     padding: 25px;
-    width: 600px;
-    background: $dark-color;
+    width: 440px;
+    background: whitesmoke;
     position: relative;
     right: 1px;
-    color: $light-color;
+    color: grey;
     flex-direction: column;
     display: inline-block;
     transform-origin: top;
     overflow: auto;
+    border-radius: 15px;
+    box-shadow: $intermediate-color 0.2vw 0.2vw 0.4vw;
+    border: solid #BBBBBBBB 1px;
 
     .top-filter-header {
 
         #header {
             text-transform: uppercase;
             letter-spacing: 2px;
-            font-size: 25;
+            font-size: 13;
             width: 80%;
         }
 
@@ -26,13 +29,13 @@
             width: 20%;
             opacity: .6;
             position: relative;
-            display: inline-block;
+            display: block;
 
             .line {
                 display: block;
                 background: $alt-accent;
-                width: $width-line;
-                height: $height-line;
+                width: 20;
+                height: 3;
                 position: absolute;
                 right: 0;
                 border-radius: ($height-line / 2);
@@ -69,9 +72,10 @@
                 display: flex;
                 align-items: center;
                 margin-bottom: 10px;
+                letter-spacing: 2px;
 
                 .filter-title {
-                    font-size: 18;
+                    font-size: 13;
                     text-transform: uppercase;
                     margin-top: 10px;
                     margin-bottom: 10px;
@@ -96,6 +100,7 @@
                 -moz-transition: all 0.2s ease-in-out;
                 -o-transition: all 0.2s ease-in-out;
                 transition: all 0.2s ease-in-out;
+                text-align: center;
             }
         }
     }
@@ -105,4 +110,16 @@
         border-top-style: solid;
         padding-top: 10px;
     }
+
+    .save-filter,
+    .reset-filter,
+    .all-filter {
+        background-color: gray;
+    }
+
+    .save-filter:hover,
+    .reset-filter:hover,
+    .all-filter:hover {
+        background-color: $darker-alt-accent;
+    }
 }
\ No newline at end of file
diff --git a/src/client/views/search/FilterBox.tsx b/src/client/views/search/FilterBox.tsx
index 706d1eb7f..ba193df5a 100644
--- a/src/client/views/search/FilterBox.tsx
+++ b/src/client/views/search/FilterBox.tsx
@@ -9,13 +9,11 @@ import { Id } from '../../../new_fields/FieldSymbols';
 import { DocumentType } from '../../documents/Documents';
 import { Cast, StrCast } from '../../../new_fields/Types';
 import * as _ from "lodash";
-import { ToggleBar } from './ToggleBar';
 import { IconBar } from './IconBar';
 import { FieldFilters } from './FieldFilters';
 import { SelectionManager } from '../../util/SelectionManager';
 import { DocumentView } from '../nodes/DocumentView';
 import { CollectionFilters } from './CollectionFilters';
-import { NaviconButton } from './NaviconButton';
 import * as $ from 'jquery';
 import "./FilterBox.scss";
 import { SearchBox } from './SearchBox';
@@ -38,6 +36,8 @@ export class FilterBox extends React.Component {
     @observable private _basicWordStatus: boolean = true;
     @observable private _filterOpen: boolean = false;
     @observable private _icons: string[] = this._allIcons;
+    @observable private _anyKeywordStatus: boolean = true;
+    @observable private _allKeywordStatus: boolean = true;
     @observable private _titleFieldStatus: boolean = true;
     @observable private _authorFieldStatus: boolean = true;
     @observable public _deletedDocsStatus: boolean = false;
@@ -114,10 +114,9 @@ export class FilterBox extends React.Component {
 
     @action.bound
     resetFilters = () => {
-        ToggleBar.Instance.resetToggle();
+        this._basicWordStatus = true;
         IconBar.Instance.selectAll();
         FieldFilters.Instance.resetFieldFilters();
-        CollectionFilters.Instance.resetCollectionFilters();
     }
 
     basicRequireWords(query: string): string {
@@ -268,10 +267,9 @@ export class FilterBox extends React.Component {
 
     //if true, any keywords can be used. if false, all keywords are required.
     @action.bound
-    handleWordQueryChange = () => { this._basicWordStatus = !this._basicWordStatus; }
-
-    @action.bound
-    getBasicWordStatus() { return this._basicWordStatus; }
+    handleWordQueryChange = () => {
+        this._basicWordStatus = !this._basicWordStatus;
+    }
 
     @action.bound
     updateIcon(newArray: string[]) { this._icons = newArray; }
@@ -290,16 +288,10 @@ export class FilterBox extends React.Component {
     }
 
     @action.bound
-    toggleFieldOpen() { this._fieldOpen = !this._fieldOpen; }
+    updateAnyKeywordStatus(newStat: boolean) { this._anyKeywordStatus = newStat; }
 
     @action.bound
-    toggleColOpen() { this._colOpen = !this._colOpen; }
-
-    @action.bound
-    toggleTypeOpen() { this._typeOpen = !this._typeOpen; }
-
-    @action.bound
-    toggleWordStatusOpen() { this._wordStatusOpen = !this._wordStatusOpen; }
+    updateAllKeywordStatus(newStat: boolean) { this._allKeywordStatus = newStat; }
 
     @action.bound
     updateTitleStatus(newStat: boolean) { this._titleFieldStatus = newStat; }
@@ -319,6 +311,8 @@ export class FilterBox extends React.Component {
     @action.bound
     updateParentCollectionStatus(newStat: boolean) { this._collectionParentStatus = newStat; }
 
+    getAnyKeywordStatus() { return this._anyKeywordStatus; }
+    getAllKeywordStatus() { return this._allKeywordStatus; }
     getCollectionStatus() { return this._collectionStatus; }
     getSelfCollectionStatus() { return this._collectionSelfStatus; }
     getParentCollectionStatus() { return this._collectionParentStatus; }
@@ -339,6 +333,7 @@ export class FilterBox extends React.Component {
                     <div className="filter-form" onPointerDown={this.stopProp} id="filter-form" style={this._filterOpen ? { display: "flex" } : { display: "none" }}>
                         <div className="top-filter-header" style={{ display: "flex", width: "100%" }}>
                             <div id="header">Filter Search Results</div>
+                            <div style={{ marginLeft: "auto" }}></div>
                             <div className="close-icon" onClick={this.closeFilter}>
                                 <span className="line line-1"></span>
                                 <span className="line line-2"></span></div>
@@ -347,33 +342,20 @@ export class FilterBox extends React.Component {
                             <div className="filter-div">
                                 <div className="filter-header">
                                     <div className='filter-title words'>Required words</div>
-                                    <div style={{ marginLeft: "auto" }}><NaviconButton onClick={this.toggleWordStatusOpen} /></div>
                                 </div>
                                 <div className="filter-panel" >
-                                    <ToggleBar handleChange={this.handleWordQueryChange} getStatus={this.getBasicWordStatus}
-                                        originalStatus={this._basicWordStatus} optionOne={"Include Any Keywords"} optionTwo={"Include All Keywords"} />
+                                    <button className="all-filter" onClick={this.handleWordQueryChange}>Include All Keywords</button>
                                 </div>
                             </div>
                             <div className="filter-div">
                                 <div className="filter-header">
                                     <div className="filter-title icon">Filter by type of node</div>
-                                    <div style={{ marginLeft: "auto" }}><NaviconButton onClick={this.toggleTypeOpen} /></div>
                                 </div>
                                 <div className="filter-panel"><IconBar /></div>
                             </div>
                             <div className="filter-div">
                                 <div className="filter-header">
-                                    <div className='filter-title collection'>Search in current collections</div>
-                                    <div style={{ marginLeft: "auto" }}><NaviconButton onClick={this.toggleColOpen} /></div>
-                                </div>
-                                <div className="filter-panel"><CollectionFilters
-                                    updateCollectionStatus={this.updateCollectionStatus} updateParentCollectionStatus={this.updateParentCollectionStatus} updateSelfCollectionStatus={this.updateSelfCollectionStatus}
-                                    collectionStatus={this._collectionStatus} collectionParentStatus={this._collectionParentStatus} collectionSelfStatus={this._collectionSelfStatus} /></div>
-                            </div>
-                            <div className="filter-div">
-                                <div className="filter-header">
                                     <div className="filter-title field">Filter by Basic Keys</div>
-                                    <div style={{ marginLeft: "auto" }}><NaviconButton onClick={this.toggleFieldOpen} /></div>
                                 </div>
                                 <div className="filter-panel"><FieldFilters
                                     titleFieldStatus={this._titleFieldStatus} dataFieldStatus={this._deletedDocsStatus} authorFieldStatus={this._authorFieldStatus}
@@ -381,8 +363,6 @@ export class FilterBox extends React.Component {
                             </div>
                         </div>
                         <div className="filter-buttons" style={{ display: "flex", justifyContent: "space-around" }}>
-                            <button className="minimize-filter" onClick={this.minimizeAll}>Minimize All</button>
-                            <button className="advanced-filter" >Advanced Filters</button>
                             <button className="save-filter" >Save Filters</button>
                             <button className="reset-filter" onClick={this.resetFilters}>Reset Filters</button>
                         </div>
diff --git a/src/client/views/search/IconBar.scss b/src/client/views/search/IconBar.scss
index e384722ce..2555ad271 100644
--- a/src/client/views/search/IconBar.scss
+++ b/src/client/views/search/IconBar.scss
@@ -4,9 +4,8 @@
     display: flex;
     justify-content: space-evenly;
     align-items: center;
-    height: 40px;
+    height: 35px;
     width: 100%;
     flex-wrap: wrap;
     margin-bottom: 10px;
-}
-
+}
\ No newline at end of file
diff --git a/src/client/views/search/IconButton.scss b/src/client/views/search/IconButton.scss
index 94b294ba5..d1853177e 100644
--- a/src/client/views/search/IconButton.scss
+++ b/src/client/views/search/IconButton.scss
@@ -4,13 +4,15 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    width: 45px;
+    width: 30px;
     height: 60px;
 
     .type-icon {
-        height: 45px;
-        width: 45px;
+        height: 30px;
+        width: 30px;
         color: $light-color;
+        // background-color: rgb(194, 194, 197);
+        background-color: gray;
         border-radius: 50%;
         display: flex;
         justify-content: center;
@@ -22,8 +24,8 @@
         font-size: 2em;
 
         .fontawesome-icon {
-            height: 24px;
-            width: 24px;
+            height: 15px;
+            width: 15px
         }
     }
 
@@ -44,7 +46,7 @@
         transform: scale(1.1);
         background-color: $darker-alt-accent;
         opacity: 1;
-    
+
         +.filter-description {
             opacity: 1;
         }
diff --git a/src/client/views/search/IconButton.tsx b/src/client/views/search/IconButton.tsx
index bfe2c7d0b..5d23f6eeb 100644
--- a/src/client/views/search/IconButton.tsx
+++ b/src/client/views/search/IconButton.tsx
@@ -13,6 +13,7 @@ import { IconBar } from './IconBar';
 import { props } from 'bluebird';
 import { FilterBox } from './FilterBox';
 import { Search } from '../../../server/Search';
+import { gravity } from 'sharp';
 
 library.add(faSearch);
 library.add(faObjectGroup);
@@ -123,11 +124,11 @@ export class IconButton extends React.Component<IconButtonProps>{
 
     selected = {
         opacity: 1,
-        backgroundColor: "#c2c2c5" //$alt-accent
+        backgroundColor: "rgb(128, 128, 128)"
     };
 
     notSelected = {
-        opacity: 0.6,
+        opacity: 0.2,
     };
 
     hoverStyle = {
diff --git a/src/client/views/search/ToggleBar.scss b/src/client/views/search/ToggleBar.scss
index 633a194fe..79f866acb 100644
--- a/src/client/views/search/ToggleBar.scss
+++ b/src/client/views/search/ToggleBar.scss
@@ -16,11 +16,15 @@
         -moz-transition: all 0.2s ease-in-out;
         -o-transition: all 0.2s ease-in-out;
         transition: all 0.2s ease-in-out;
+        color: gray;
+        font-size: 13;
     }
 }
 
 .toggle-bar {
-    height: 50px;
+    // height: 50px;
+    height: 30px;
+    width: 100px;
     background-color: $alt-accent;
     border-radius: 10px;
     padding: 5px;
@@ -28,7 +32,8 @@
     align-items: center;
 
     .toggle-button {
-        width: 275px;
+        // width: 275px;
+        width: 40px;
         height: 100%;
         border-radius: 10px;
         background-color: $light-color;