From 4b8a6b7a76ccadfd39ec037e282018c7d588dea8 Mon Sep 17 00:00:00 2001
From: Monika <monika_hedman@brown.edu>
Date: Fri, 21 Jun 2019 11:31:34 -0400
Subject: about to make some big changes - things are working nicely

---
 src/client/views/search/NaviconButton.tsx | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)
 create mode 100644 src/client/views/search/NaviconButton.tsx

(limited to 'src/client/views/search/NaviconButton.tsx')

diff --git a/src/client/views/search/NaviconButton.tsx b/src/client/views/search/NaviconButton.tsx
new file mode 100644
index 000000000..aa9e627c0
--- /dev/null
+++ b/src/client/views/search/NaviconButton.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { observer } from 'mobx-react';
+import "./NaviconButton.scss";
+import * as $ from 'jquery';
+
+
+export class NaviconButton extends React.Component {
+
+    componentDidMount = () => {
+        $(document).ready(function () {
+            var hamburger = $('#hamburger-icon');
+            hamburger.click(function () {
+                hamburger.toggleClass('active');
+                return false;
+            });
+        });
+    }
+
+    render() {
+        return (
+            <a id="hamburger-icon" href="#" title="Menu">
+                <span className="line line-1"></span>
+                <span className="line line-2"></span>
+                <span className="line line-3"></span>
+            </a>
+        );
+    }
+}
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2


From f05b323cff1f09c5c84042aa30ad57b2ac74b7cb Mon Sep 17 00:00:00 2001
From: Monika <monika_hedman@brown.edu>
Date: Fri, 21 Jun 2019 13:46:53 -0400
Subject: navicon working

---
 src/client/views/search/CollectionFilters.tsx |  1 -
 src/client/views/search/FieldFilters.tsx      |  1 -
 src/client/views/search/IconBar.tsx           |  1 -
 src/client/views/search/NaviconButton.scss    | 18 +----
 src/client/views/search/NaviconButton.tsx     | 39 +++++++++--
 src/client/views/search/SearchBox.scss        | 26 ++++---
 src/client/views/search/SearchBox.tsx         | 97 +++++++++++----------------
 src/client/views/search/SearchItem.scss       |  2 +-
 8 files changed, 89 insertions(+), 96 deletions(-)

(limited to 'src/client/views/search/NaviconButton.tsx')

diff --git a/src/client/views/search/CollectionFilters.tsx b/src/client/views/search/CollectionFilters.tsx
index 5bfe37efb..b8c1579b2 100644
--- a/src/client/views/search/CollectionFilters.tsx
+++ b/src/client/views/search/CollectionFilters.tsx
@@ -74,7 +74,6 @@ export class CollectionFilters extends React.Component<CollectionFilterProps> {
     render() {
         return (
             <div>
-                <div className='collection-title'>Search in current collections</div>
                 <div className="collection-filters">
                     <div className="collection-filters main">
                         <CheckBox default={false} title={"limit to current collection"} parent={this} numCount={3} updateStatus={this.updateColStat} originalStatus={this.props.collectionStatus} />
diff --git a/src/client/views/search/FieldFilters.tsx b/src/client/views/search/FieldFilters.tsx
index c7928dcd6..5ad08a7bc 100644
--- a/src/client/views/search/FieldFilters.tsx
+++ b/src/client/views/search/FieldFilters.tsx
@@ -33,7 +33,6 @@ export class FieldFilters extends React.Component<FieldFilterProps> {
     render() {
         return (
             <div>
-                <div className="filter field-title">Filter by Basic Keys</div>
                 <CheckBox default = {true} numCount={3} parent={this} originalStatus={this.props.titleFieldStatus} updateStatus={this.props.updateTitleStatus} title={Keys.TITLE} />
                 <CheckBox default = {true} numCount={3} parent={this} originalStatus={this.props.authorFieldStatus} updateStatus={this.props.updateAuthorStatus} title={Keys.AUTHOR} />
                 <CheckBox default = {true} numCount={3} parent={this} originalStatus={this.props.dataFieldStatus} updateStatus={this.props.updateDataStatus} title={Keys.DATA} />
diff --git a/src/client/views/search/IconBar.tsx b/src/client/views/search/IconBar.tsx
index 2ae4af642..ea8c626ca 100644
--- a/src/client/views/search/IconBar.tsx
+++ b/src/client/views/search/IconBar.tsx
@@ -68,7 +68,6 @@ export class IconBar extends React.Component {
     render() {
         return (
             <div>
-                <div className="filter icon-title">Filter by type of node</div>
                 <div className="filter icon-bar">
                 <div className="filter type-outer">
                         <div className={"type-icon none not-selected"}
diff --git a/src/client/views/search/NaviconButton.scss b/src/client/views/search/NaviconButton.scss
index 529f11a57..d26d67de2 100644
--- a/src/client/views/search/NaviconButton.scss
+++ b/src/client/views/search/NaviconButton.scss
@@ -1,12 +1,6 @@
 @import "../globalCssVariables";
 
-
-@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
-
-// $background: #3d566e;
-$color: #ecf0f1;
-
-$height-icon: 20px;
+$height-icon: 15px;
 $width-line: 30px;
 $height-line: 4px;
 
@@ -15,14 +9,6 @@ $rotation: 45deg;
 $translateY: ($height-icon / 2);
 $translateX: 0;
 
-// body {
-//   background: $background;
-//   color: $color;
-//   font-family: 'Montserrat', sans-serif;
-//   -webkit-font-smoothing: antialiased;
-//   text-align:center;
-// }
-
 #hamburger-icon {
   width:$width-line;
   height:$height-icon;
@@ -32,7 +18,7 @@ $translateX: 0;
   
   .line {
     display:block;
-    background:$color;
+    background:$alt-accent;
     width:$width-line;
     height:$height-line;
     position:absolute;
diff --git a/src/client/views/search/NaviconButton.tsx b/src/client/views/search/NaviconButton.tsx
index aa9e627c0..d89874453 100644
--- a/src/client/views/search/NaviconButton.tsx
+++ b/src/client/views/search/NaviconButton.tsx
@@ -2,23 +2,48 @@ import * as React from 'react';
 import { observer } from 'mobx-react';
 import "./NaviconButton.scss";
 import * as $ from 'jquery';
+import { observable } from 'mobx';
 
 
 export class NaviconButton extends React.Component {
 
+    @observable ref: React.RefObject<HTMLAnchorElement> = React.createRef();
+
     componentDidMount = () => {
-        $(document).ready(function () {
-            var hamburger = $('#hamburger-icon');
-            hamburger.click(function () {
-                hamburger.toggleClass('active');
+        // this.ref = React.createRef();
+        // $(document).ready(function () {
+        //     var hamburger = $('#hamburger-icon');
+        //     hamburger.click(function () {
+        //         hamburger.toggleClass('active');
+        //         console.log("toggling 1")
+        //         return false;
+        //     });
+        // });
+
+        // document.addEventListener("click", this.toggle)
+
+        let that = this;
+
+        if(this.ref.current){this.ref.current.addEventListener("click", function(e) {
+            e.preventDefault();
+            if(that.ref.current){
+                that.ref.current.classList.toggle('active');
+                console.log("toggling 2")
                 return false;
-            });
-        });
+            }
+        })}
+        
     }
 
+    // toggle = (e: MouseEvent) => {
+    //     this.ref.current.toggleClass('active');
+    //     console.log("toggling 2")
+    //     return false;
+    // }
+
     render() {
         return (
-            <a id="hamburger-icon" href="#" title="Menu">
+            <a id="hamburger-icon" href="#" ref = {this.ref} title="Menu">
                 <span className="line line-1"></span>
                 <span className="line line-2"></span>
                 <span className="line line-3"></span>
diff --git a/src/client/views/search/SearchBox.scss b/src/client/views/search/SearchBox.scss
index 3b96e3922..c65a8b084 100644
--- a/src/client/views/search/SearchBox.scss
+++ b/src/client/views/search/SearchBox.scss
@@ -32,6 +32,13 @@
 
 }
 
+.filter-title{
+    font-size: 18;
+    text-transform: uppercase;
+    margin-top: 10px;
+    margin-bottom: 10px;
+}
+
 .searchBox-results {
     margin-left: 27px; //Is there a better way to do this?
 }
@@ -46,6 +53,11 @@
     color: $light-color;
     flex-direction: column;
     display: inline-block;
+
+    .filter-header{
+        display: flex;
+        align-items: center;
+    }
 }
 
 #filter{
@@ -79,20 +91,13 @@
     margin-bottom: 5px;
 }
 
-.type-of-node{
-    height: 90px;
-}
-
-.required-words{
+.filter-div{
+    margin-top: 10px;
+    margin-bottom: 10px;
     display: inline-block;
     width: 100%;
 }
 
-.filter-div{
-    margin-top: 5px;
-    margin-bottom: 5px;
-}
-
 .collection-title{
     color: $light-color;
     text-transform: uppercase;
@@ -109,7 +114,6 @@
     height: 50px;
     text-transform: uppercase;
     text-align: left;
-    // width: 80%;
     font-weight: bold;
 }
 
diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
index 71472886f..a76269114 100644
--- a/src/client/views/search/SearchBox.tsx
+++ b/src/client/views/search/SearchBox.tsx
@@ -409,58 +409,23 @@ export class SearchBox extends React.Component {
     }
 
     @action.bound
-    updateTitleStatus(newStat: boolean) {
-        this.titleFieldStatus = newStat;
-    }
-
+    updateTitleStatus(newStat: boolean) { this.titleFieldStatus = newStat; }
     @action.bound
-    updateAuthorStatus(newStat: boolean) {
-        this.authorFieldStatus = newStat;
-    }
-
+    updateAuthorStatus(newStat: boolean) { this.authorFieldStatus = newStat; }
     @action.bound
-    updateDataStatus(newStat: boolean) {
-        this.dataFieldStatus = newStat;
-    }
-
+    updateDataStatus(newStat: boolean) { this.dataFieldStatus = newStat; }
     @action.bound
-    updateCollectionStatus(newStat: boolean) {
-        this.collectionStatus = newStat;
-    }
-
+    updateCollectionStatus(newStat: boolean) { this.collectionStatus = newStat; }
     @action.bound
-    updateSelfCollectionStatus(newStat: boolean) {
-        this.collectionSelfStatus = newStat;
-    }
-
+    updateSelfCollectionStatus(newStat: boolean) { this.collectionSelfStatus = newStat; }
     @action.bound
-    updateParentCollectionStatus(newStat: boolean) {
-        this.collectionParentStatus = newStat;
-    }
-
-    getCollectionStatus() {
-        return this.collectionStatus;
-    }
-
-    getSelfCollectionStatus() {
-        return this.collectionSelfStatus;
-    }
-
-    getParentCollectionStatus() {
-        return this.collectionParentStatus;
-    }
-
-    getTitleStatus() {
-        return this.titleFieldStatus;
-    }
-
-    getAuthorStatus() {
-        return this.authorFieldStatus;
-    }
-
-    getDataStatus() {
-        return this.dataFieldStatus;
-    }
+    updateParentCollectionStatus(newStat: boolean) { this.collectionParentStatus = newStat; }
+    getCollectionStatus() { return this.collectionStatus; }
+    getSelfCollectionStatus() { return this.collectionSelfStatus; }
+    getParentCollectionStatus() { return this.collectionParentStatus; }
+    getTitleStatus() { return this.titleFieldStatus; }
+    getAuthorStatus() { return this.authorFieldStatus; }
+    getDataStatus() { return this.dataFieldStatus; }
 
     // Useful queries:
     // Delegates of a document: {!join from=id to=proto_i}id:{protoId}
@@ -490,26 +455,42 @@ export class SearchBox extends React.Component {
                 </div>
                 {this._filterOpen ? (
                     <div className="filter-form" onPointerDown={this.stopProp} id="filter" style={this._filterOpen ? { display: "flex" } : { display: "none" }}>
-                        <div className="filter-form filter-div" id="header">Filter Search Results</div>
-                        <div className="filter-form " id="option">
+                        <div id="header">Filter Search Results</div>
+                        <div>
                             <div className="required-words filter-div">
+                                <div className = "filter-header">
+                                    <div className='filter-title words'>Required words</div>
+                                    <a style = {{marginLeft: "auto"}}><NaviconButton/></a>
+                                </div>
                                 <ToggleBar originalStatus={this._basicWordStatus} optionOne={"Include Any Keywords"} optionTwo={"Include All Keywords"} />
                             </div>
-                            <div className="type-of-node filter-div">
+                            <div className="filter-div">
+                                <div className = "filter-header">
+                                    <div className="filter-title icon">Filter by type of node</div>
+                                    <a style = {{marginLeft: "auto"}}><NaviconButton/></a>
+                                </div>
                                 <IconBar />
                             </div>
-                            <div className="filter-collection filter-div">
-                                <CollectionFilters 
-                                updateCollectionStatus = {this.updateCollectionStatus} updateParentCollectionStatus = {this.updateParentCollectionStatus} updateSelfCollectionStatus = {this.updateSelfCollectionStatus}
-                                collectionStatus = {this.collectionStatus} collectionParentStatus = {this.collectionParentStatus} collectionSelfStatus = {this.collectionSelfStatus}/>
+                            <div className="filter-div">
+                                <div className = "filter-header">
+                                    <div className='filter-title collection'>Search in current collections</div>
+                                    <a style = {{marginLeft: "auto"}}><NaviconButton/></a>
+                                </div>
+                                <CollectionFilters
+                                    updateCollectionStatus={this.updateCollectionStatus} updateParentCollectionStatus={this.updateParentCollectionStatus} updateSelfCollectionStatus={this.updateSelfCollectionStatus}
+                                    collectionStatus={this.collectionStatus} collectionParentStatus={this.collectionParentStatus} collectionSelfStatus={this.collectionSelfStatus} />
                             </div>
-                            <div className="where-in-doc filter-div">
-                                <FieldFilters 
-                                titleFieldStatus={this.titleFieldStatus} dataFieldStatus={this.dataFieldStatus} authorFieldStatus={this.authorFieldStatus}
+                            <div className="filter-div">
+                                <div className = "filter-header">
+                                    <div className="filter-title field">Filter by Basic Keys</div>
+                                    <a style = {{marginLeft: "auto"}}><NaviconButton/></a>
+                                </div>
+                                <FieldFilters
+                                    titleFieldStatus={this.titleFieldStatus} dataFieldStatus={this.dataFieldStatus} authorFieldStatus={this.authorFieldStatus}
                                     updateAuthorStatus={this.updateAuthorStatus} updateDataStatus={this.updateDataStatus} updateTitleStatus={this.updateTitleStatus} />
                             </div>
                         </div>
-                        <button className="reset-filter" onClick={this.resetFilters}>Reset Filters</button>
+                        <button className="filter-div reset-filter" onClick={this.resetFilters}>Reset Filters</button>
                     </div>
                 ) : undefined}
             </div>
diff --git a/src/client/views/search/SearchItem.scss b/src/client/views/search/SearchItem.scss
index 6e88d1f44..c82d4bb06 100644
--- a/src/client/views/search/SearchItem.scss
+++ b/src/client/views/search/SearchItem.scss
@@ -106,7 +106,7 @@
     height: 100%
 }
 
-.collection {
+.contexts.collection {
     border-color: $darker-alt-accent;
     border-bottom-style: solid;
 }
-- 
cgit v1.2.3-70-g09d2


From a70ac0d98f879d2f9b8824e51dcab62b840f0b8a Mon Sep 17 00:00:00 2001
From: Monika <monika_hedman@brown.edu>
Date: Fri, 21 Jun 2019 15:00:16 -0400
Subject: mleh end of day 6/21

---
 src/client/views/search/FieldFilters.tsx  |  2 +-
 src/client/views/search/NaviconButton.tsx | 28 +++--------
 src/client/views/search/SearchBox.scss    | 33 ++++++++++---
 src/client/views/search/SearchBox.tsx     | 81 +++++++++++++++++++++----------
 4 files changed, 88 insertions(+), 56 deletions(-)

(limited to 'src/client/views/search/NaviconButton.tsx')

diff --git a/src/client/views/search/FieldFilters.tsx b/src/client/views/search/FieldFilters.tsx
index 5ad08a7bc..f87755478 100644
--- a/src/client/views/search/FieldFilters.tsx
+++ b/src/client/views/search/FieldFilters.tsx
@@ -32,7 +32,7 @@ export class FieldFilters extends React.Component<FieldFilterProps> {
 
     render() {
         return (
-            <div>
+            <div className = "field-filters">
                 <CheckBox default = {true} numCount={3} parent={this} originalStatus={this.props.titleFieldStatus} updateStatus={this.props.updateTitleStatus} title={Keys.TITLE} />
                 <CheckBox default = {true} numCount={3} parent={this} originalStatus={this.props.authorFieldStatus} updateStatus={this.props.updateAuthorStatus} title={Keys.AUTHOR} />
                 <CheckBox default = {true} numCount={3} parent={this} originalStatus={this.props.dataFieldStatus} updateStatus={this.props.updateDataStatus} title={Keys.DATA} />
diff --git a/src/client/views/search/NaviconButton.tsx b/src/client/views/search/NaviconButton.tsx
index d89874453..8c022fab6 100644
--- a/src/client/views/search/NaviconButton.tsx
+++ b/src/client/views/search/NaviconButton.tsx
@@ -4,26 +4,17 @@ import "./NaviconButton.scss";
 import * as $ from 'jquery';
 import { observable } from 'mobx';
 
+export interface NaviconProps{
+    onClick(): void;
+}
 
-export class NaviconButton extends React.Component {
+
+export class NaviconButton extends React.Component<NaviconProps> {
 
     @observable ref: React.RefObject<HTMLAnchorElement> = React.createRef();
 
     componentDidMount = () => {
-        // this.ref = React.createRef();
-        // $(document).ready(function () {
-        //     var hamburger = $('#hamburger-icon');
-        //     hamburger.click(function () {
-        //         hamburger.toggleClass('active');
-        //         console.log("toggling 1")
-        //         return false;
-        //     });
-        // });
-
-        // document.addEventListener("click", this.toggle)
-
         let that = this;
-
         if(this.ref.current){this.ref.current.addEventListener("click", function(e) {
             e.preventDefault();
             if(that.ref.current){
@@ -31,16 +22,9 @@ export class NaviconButton extends React.Component {
                 console.log("toggling 2")
                 return false;
             }
-        })}
-        
+        })};
     }
 
-    // toggle = (e: MouseEvent) => {
-    //     this.ref.current.toggleClass('active');
-    //     console.log("toggling 2")
-    //     return false;
-    // }
-
     render() {
         return (
             <a id="hamburger-icon" href="#" ref = {this.ref} title="Menu">
diff --git a/src/client/views/search/SearchBox.scss b/src/client/views/search/SearchBox.scss
index c65a8b084..98eb31ba1 100644
--- a/src/client/views/search/SearchBox.scss
+++ b/src/client/views/search/SearchBox.scss
@@ -32,11 +32,15 @@
 
 }
 
-.filter-title{
+.filter-title {
     font-size: 18;
     text-transform: uppercase;
     margin-top: 10px;
     margin-bottom: 10px;
+    -webkit-transition: all 0.2s ease-in-out;
+    -moz-transition: all 0.2s ease-in-out;
+    -o-transition: all 0.2s ease-in-out;
+    transition: all 0.2s ease-in-out;
 }
 
 .searchBox-results {
@@ -54,13 +58,22 @@
     flex-direction: column;
     display: inline-block;
 
-    .filter-header{
+    .filter-header {
         display: flex;
         align-items: center;
+        margin-bottom: 10px;
+    }
+
+    .filter-header:hover .filter-title{
+        transform: scale(1.05);
+    }
+
+    .filter-panel {
+        display: none;
     }
 }
 
-#filter{
+#filter {
     padding: 25px;
     width: 600px;
 }
@@ -79,7 +92,7 @@
     margin-right: 72px;
 }
 
-.filter-collection{
+.filter-collection {
     display: inline-block;
     width: 100%;
 }
@@ -91,18 +104,18 @@
     margin-bottom: 5px;
 }
 
-.filter-div{
+.filter-div {
     margin-top: 10px;
     margin-bottom: 10px;
     display: inline-block;
     width: 100%;
 }
 
-.collection-title{
+.collection-title {
     color: $light-color;
     text-transform: uppercase;
     margin-top: 5px;
-    margin-bottom: 5px; 
+    margin-bottom: 5px;
 }
 
 .no-result {
@@ -117,3 +130,9 @@
     font-weight: bold;
 }
 
+.field-filters {
+    width: 100%;
+    display: grid;
+    grid-template-columns: 18% 20% 60%;
+    // white-space: space-between;
+}
\ No newline at end of file
diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
index a76269114..9a0a69f87 100644
--- a/src/client/views/search/SearchBox.tsx
+++ b/src/client/views/search/SearchBox.tsx
@@ -2,33 +2,23 @@ import * as React from 'react';
 import { observer } from 'mobx-react';
 import { observable, action, runInAction } from 'mobx';
 import "./SearchBox.scss";
-import { faSearch, faFilePdf, faFilm, faImage, faObjectGroup, faStickyNote, faMusic, faLink, faChartBar, faGlobeAsia, faBan, faThList, faWineGlassAlt } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { library } from '@fortawesome/fontawesome-svg-core';
 import * as rp from 'request-promise';
 import { SearchItem } from './SearchItem';
 import { DocServer } from '../../DocServer';
-import { Doc, Opt } from '../../../new_fields/Doc';
+import { Doc } from '../../../new_fields/Doc';
 import { Id } from '../../../new_fields/FieldSymbols';
 import { SetupDrag } from '../../util/DragManager';
 import { Docs, DocTypes } from '../../documents/Documents';
 import { RouteStore } from '../../../server/RouteStore';
 import { NumCast, Cast, StrCast } from '../../../new_fields/Types';
 import { SearchUtil } from '../../util/SearchUtil';
-import * as anime from 'animejs';
-import { updateFunction } from '../../../new_fields/util';
 import * as _ from "lodash";
-import { findDOMNode } from 'react-dom';
 import { ToggleBar } from './ToggleBar';
 import { IconBar } from './IconBar';
-import { type } from 'os';
-import { CheckBox } from './CheckBox';
 import { FieldFilters } from './FieldFilters';
 import { SelectionManager } from '../../util/SelectionManager';
 import { DocumentView } from '../nodes/DocumentView';
-import { CollectionView } from '../collections/CollectionView';
-import { CollectionPDFView } from '../collections/CollectionPDFView';
-import { CollectionVideoView } from '../collections/CollectionVideoView';
 import { CollectionFilters } from './CollectionFilters';
 import { NaviconButton } from './NaviconButton';
 
@@ -59,6 +49,10 @@ export class SearchBox extends React.Component {
     @observable collectionStatus = false;
     @observable collectionSelfStatus = true;
     @observable collectionParentStatus = true;
+    @observable private _wordStatusOpen: boolean = false;
+    @observable private _typeOpen: boolean = false;
+    @observable private _colOpen: boolean = false;
+    @observable private _fieldOpen: boolean = false;
 
     constructor(props: Readonly<{}>) {
         super(props);
@@ -72,12 +66,47 @@ export class SearchBox extends React.Component {
             }
         });
 
+
+        var acc = document.getElementsByClassName('filter-header');
+        // var i: number = 0;
+
+        console.log("hello")
+
+        for (var i = 0; i < acc.length; i++) {
+            // for(let entry of acc){
+            console.log("looping")
+            acc[i].addEventListener("click", function (this: HTMLElement) {
+                this.classList.toggle("active");
+
+                var panel = this.nextElementSibling as HTMLElement;
+                if (panel) {
+                    if (panel.style.display === "inline-block") {
+                        panel.style.display = "none";
+                    } else {
+                        panel.style.display = "inline-block";
+                    }
+                }
+            });
+        }
+
         //empties search query after 30 seconds of the search bar/filter box not being open
         // if (!this._resultsOpen && !this._filterOpen) {
         //     setTimeout(this.clearSearchQuery, 30000);
         // }
     }
 
+    @action.bound
+    toggleFieldOpen() { this._fieldOpen = !this._fieldOpen; }
+
+    @action.bound
+    toggleColOpen() { this._colOpen = !this._colOpen; }
+
+    @action.bound
+    toggleTypeOpen() { this._typeOpen = !this._typeOpen; }
+
+    @action.bound
+    toggleWordStatusOpen() { this._wordStatusOpen = !this._wordStatusOpen; }
+
     @action.bound
     resetFilters = () => {
         ToggleBar.Instance.resetToggle();
@@ -457,37 +486,37 @@ export class SearchBox extends React.Component {
                     <div className="filter-form" onPointerDown={this.stopProp} id="filter" style={this._filterOpen ? { display: "flex" } : { display: "none" }}>
                         <div id="header">Filter Search Results</div>
                         <div>
-                            <div className="required-words filter-div">
-                                <div className = "filter-header">
+                            <div className="filter-div">
+                                <div className="filter-header">
                                     <div className='filter-title words'>Required words</div>
-                                    <a style = {{marginLeft: "auto"}}><NaviconButton/></a>
+                                    <div style={{ marginLeft: "auto" }}><NaviconButton onClick={this.toggleWordStatusOpen} /></div>
                                 </div>
-                                <ToggleBar originalStatus={this._basicWordStatus} optionOne={"Include Any Keywords"} optionTwo={"Include All Keywords"} />
+                                <div className="filter-panel"><ToggleBar originalStatus={this._basicWordStatus} optionOne={"Include Any Keywords"} optionTwo={"Include All Keywords"} /></div>
                             </div>
                             <div className="filter-div">
-                                <div className = "filter-header">
+                                <div className="filter-header">
                                     <div className="filter-title icon">Filter by type of node</div>
-                                    <a style = {{marginLeft: "auto"}}><NaviconButton/></a>
+                                    <div style={{ marginLeft: "auto" }}><NaviconButton onClick={this.toggleTypeOpen} /></div>
                                 </div>
-                                <IconBar />
+                                <div className="filter-panel"><IconBar /></div>
                             </div>
                             <div className="filter-div">
-                                <div className = "filter-header">
+                                <div className="filter-header">
                                     <div className='filter-title collection'>Search in current collections</div>
-                                    <a style = {{marginLeft: "auto"}}><NaviconButton/></a>
+                                    <div style={{ marginLeft: "auto" }}><NaviconButton onClick={this.toggleColOpen} /></div>
                                 </div>
-                                <CollectionFilters
+                                <div className="filter-panel"><CollectionFilters
                                     updateCollectionStatus={this.updateCollectionStatus} updateParentCollectionStatus={this.updateParentCollectionStatus} updateSelfCollectionStatus={this.updateSelfCollectionStatus}
-                                    collectionStatus={this.collectionStatus} collectionParentStatus={this.collectionParentStatus} collectionSelfStatus={this.collectionSelfStatus} />
+                                    collectionStatus={this.collectionStatus} collectionParentStatus={this.collectionParentStatus} collectionSelfStatus={this.collectionSelfStatus} /></div>
                             </div>
                             <div className="filter-div">
-                                <div className = "filter-header">
+                                <div className="filter-header">
                                     <div className="filter-title field">Filter by Basic Keys</div>
-                                    <a style = {{marginLeft: "auto"}}><NaviconButton/></a>
+                                    <div style={{ marginLeft: "auto" }}><NaviconButton onClick={this.toggleFieldOpen} /></div>
                                 </div>
-                                <FieldFilters
+                                <div className="filter-panel"><FieldFilters
                                     titleFieldStatus={this.titleFieldStatus} dataFieldStatus={this.dataFieldStatus} authorFieldStatus={this.authorFieldStatus}
-                                    updateAuthorStatus={this.updateAuthorStatus} updateDataStatus={this.updateDataStatus} updateTitleStatus={this.updateTitleStatus} />
+                                    updateAuthorStatus={this.updateAuthorStatus} updateDataStatus={this.updateDataStatus} updateTitleStatus={this.updateTitleStatus} /> </div>
                             </div>
                         </div>
                         <button className="filter-div reset-filter" onClick={this.resetFilters}>Reset Filters</button>
-- 
cgit v1.2.3-70-g09d2


From c886665b3f244389a09e05ab4805c1225de54d7e Mon Sep 17 00:00:00 2001
From: Monika <monika_hedman@brown.edu>
Date: Mon, 24 Jun 2019 11:45:20 -0400
Subject: accordion almost workin

---
 src/client/views/search/CollectionFilters.tsx |  4 +-
 src/client/views/search/NaviconButton.tsx     |  1 +
 src/client/views/search/SearchBox.scss        | 18 +++++-
 src/client/views/search/SearchBox.tsx         | 91 +++++++++++++++------------
 src/client/views/search/ToggleBar.tsx         | 13 +++-
 5 files changed, 81 insertions(+), 46 deletions(-)

(limited to 'src/client/views/search/NaviconButton.tsx')

diff --git a/src/client/views/search/CollectionFilters.tsx b/src/client/views/search/CollectionFilters.tsx
index b8c1579b2..6019154a6 100644
--- a/src/client/views/search/CollectionFilters.tsx
+++ b/src/client/views/search/CollectionFilters.tsx
@@ -55,9 +55,7 @@ export class CollectionFilters extends React.Component<CollectionFilterProps> {
     }
 
     @action.bound
-    resetCollectionFilters() {
-        this.resetBoolean = true;
-    }
+    resetCollectionFilters() { this.resetBoolean = true; }
 
     @action.bound
     updateColStat(val: boolean) {
diff --git a/src/client/views/search/NaviconButton.tsx b/src/client/views/search/NaviconButton.tsx
index 8c022fab6..adfd1308c 100644
--- a/src/client/views/search/NaviconButton.tsx
+++ b/src/client/views/search/NaviconButton.tsx
@@ -6,6 +6,7 @@ import { observable } from 'mobx';
 
 export interface NaviconProps{
     onClick(): void;
+    outsideClick(): void;
 }
 
 
diff --git a/src/client/views/search/SearchBox.scss b/src/client/views/search/SearchBox.scss
index 98eb31ba1..c98c7c28f 100644
--- a/src/client/views/search/SearchBox.scss
+++ b/src/client/views/search/SearchBox.scss
@@ -70,6 +70,22 @@
 
     .filter-panel {
         display: none;
+        width: 100%;
+    }
+
+    .close-icon {
+        height: 100%;
+        opacity: .6;
+        justify-content: right;
+        position: relative;
+        .fontawesome-icon {
+            margin-right: 0px;
+            height: 30px;
+        }
+    }
+
+    .close-icon:hover{
+        opacity: 1;
     }
 }
 
@@ -82,7 +98,7 @@
     text-transform: uppercase;
     letter-spacing: 2px;
     font-size: 25;
-    height: 40px;
+    width: 100%;
 }
 
 .searchBox-results {
diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
index 9a0a69f87..b19841312 100644
--- a/src/client/views/search/SearchBox.tsx
+++ b/src/client/views/search/SearchBox.tsx
@@ -3,6 +3,8 @@ import { observer } from 'mobx-react';
 import { observable, action, runInAction } from 'mobx';
 import "./SearchBox.scss";
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faTimes } from '@fortawesome/free-solid-svg-icons';
+import { library, icon } from '@fortawesome/fontawesome-svg-core';
 import * as rp from 'request-promise';
 import { SearchItem } from './SearchItem';
 import { DocServer } from '../../DocServer';
@@ -21,6 +23,9 @@ import { SelectionManager } from '../../util/SelectionManager';
 import { DocumentView } from '../nodes/DocumentView';
 import { CollectionFilters } from './CollectionFilters';
 import { NaviconButton } from './NaviconButton';
+import * as $ from 'jquery';
+
+library.add(faTimes);
 
 export enum Keys {
     TITLE = "title",
@@ -66,18 +71,23 @@ export class SearchBox extends React.Component {
             }
         });
 
+        //empties search query after 30 seconds of the search bar/filter box not being open
+        // if (!this._resultsOpen && !this._filterOpen) {
+        //     setTimeout(this.clearSearchQuery, 30000);
+        // }
+    }
 
-        var acc = document.getElementsByClassName('filter-header');
-        // var i: number = 0;
-
-        console.log("hello")
+    setupAccordion() {
+        $('document').ready(function(){
+            var acc = document.getElementsByClassName('filter-header');
 
         for (var i = 0; i < acc.length; i++) {
             // for(let entry of acc){
-            console.log("looping")
             acc[i].addEventListener("click", function (this: HTMLElement) {
                 this.classList.toggle("active");
 
+                console.log(this.childNodes)
+
                 var panel = this.nextElementSibling as HTMLElement;
                 if (panel) {
                     if (panel.style.display === "inline-block") {
@@ -88,25 +98,9 @@ export class SearchBox extends React.Component {
                 }
             });
         }
-
-        //empties search query after 30 seconds of the search bar/filter box not being open
-        // if (!this._resultsOpen && !this._filterOpen) {
-        //     setTimeout(this.clearSearchQuery, 30000);
-        // }
+      });
     }
 
-    @action.bound
-    toggleFieldOpen() { this._fieldOpen = !this._fieldOpen; }
-
-    @action.bound
-    toggleColOpen() { this._colOpen = !this._colOpen; }
-
-    @action.bound
-    toggleTypeOpen() { this._typeOpen = !this._typeOpen; }
-
-    @action.bound
-    toggleWordStatusOpen() { this._wordStatusOpen = !this._wordStatusOpen; }
-
     @action.bound
     resetFilters = () => {
         ToggleBar.Instance.resetToggle();
@@ -333,9 +327,7 @@ export class SearchBox extends React.Component {
     }
 
     enter = (e: React.KeyboardEvent) => {
-        if (e.key === "Enter") {
-            this.submitSearch();
-        }
+        if (e.key === "Enter") { this.submitSearch(); }
     }
 
     @action.bound
@@ -350,6 +342,8 @@ export class SearchBox extends React.Component {
         this._filterOpen = !this._filterOpen;
         this._resultsOpen = false;
         this._results = [];
+
+        this.setupAccordion();
     }
 
     collectionRef = React.createRef<HTMLSpanElement>();
@@ -402,24 +396,16 @@ export class SearchBox extends React.Component {
 
     //if true, any keywords can be used. if false, all keywords are required.
     @action.bound
-    handleWordQueryChange = () => {
-        this._basicWordStatus = !this._basicWordStatus;
-    }
+    handleWordQueryChange = () => { this._basicWordStatus = !this._basicWordStatus; }
 
     @action
-    getBasicWordStatus() {
-        return this._basicWordStatus;
-    }
+    getBasicWordStatus() { return this._basicWordStatus; }
 
     @action.bound
-    updateIcon(newArray: string[]) {
-        this._icons = newArray;
-    }
+    updateIcon(newArray: string[]) { this._icons = newArray; }
 
     @action.bound
-    getIcons(): string[] {
-        return this._icons;
-    }
+    getIcons(): string[] { return this._icons; }
 
     private _pointerTime: number = -1;
 
@@ -437,18 +423,39 @@ export class SearchBox extends React.Component {
         this._pointerTime = e.timeStamp;
     }
 
+    @action.bound
+    closeFilter() { this._filterOpen = false; }
+
+    @action.bound
+    toggleFieldOpen() { this._fieldOpen = !this._fieldOpen; }
+
+    @action.bound
+    toggleColOpen() { this._colOpen = !this._colOpen; }
+
+    @action.bound
+    toggleTypeOpen() { this._typeOpen = !this._typeOpen; }
+
+    @action.bound
+    toggleWordStatusOpen() { this._wordStatusOpen = !this._wordStatusOpen; }
+
     @action.bound
     updateTitleStatus(newStat: boolean) { this.titleFieldStatus = newStat; }
+
     @action.bound
     updateAuthorStatus(newStat: boolean) { this.authorFieldStatus = newStat; }
+
     @action.bound
     updateDataStatus(newStat: boolean) { this.dataFieldStatus = newStat; }
+
     @action.bound
     updateCollectionStatus(newStat: boolean) { this.collectionStatus = newStat; }
+
     @action.bound
     updateSelfCollectionStatus(newStat: boolean) { this.collectionSelfStatus = newStat; }
+
     @action.bound
     updateParentCollectionStatus(newStat: boolean) { this.collectionParentStatus = newStat; }
+
     getCollectionStatus() { return this.collectionStatus; }
     getSelfCollectionStatus() { return this.collectionSelfStatus; }
     getParentCollectionStatus() { return this.collectionParentStatus; }
@@ -484,14 +491,20 @@ export class SearchBox extends React.Component {
                 </div>
                 {this._filterOpen ? (
                     <div className="filter-form" onPointerDown={this.stopProp} id="filter" style={this._filterOpen ? { display: "flex" } : { display: "none" }}>
-                        <div id="header">Filter Search Results</div>
+                        <div style={{ display: "flex", width: "100%"}}>
+                            <div id="header">Filter Search Results</div>
+                            <div className = "close-icon" onClick = {this.closeFilter}><FontAwesomeIcon className="fontawesome-icon" icon={faTimes} size = "2x"/></div>
+                        </div>
                         <div>
                             <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 originalStatus={this._basicWordStatus} optionOne={"Include Any Keywords"} optionTwo={"Include All Keywords"} /></div>
+                                <div className="filter-panel" >
+                                    <ToggleBar 
+                                    originalStatus={this._basicWordStatus} optionOne={"Include Any Keywords"} optionTwo={"Include All Keywords"} />
+                                    </div>
                             </div>
                             <div className="filter-div">
                                 <div className="filter-header">
diff --git a/src/client/views/search/ToggleBar.tsx b/src/client/views/search/ToggleBar.tsx
index 6f141d42a..90fab99ee 100644
--- a/src/client/views/search/ToggleBar.tsx
+++ b/src/client/views/search/ToggleBar.tsx
@@ -39,16 +39,23 @@ export class ToggleBar extends React.Component<ToggleBarProps>{
         let barwidth = 0;
         let togwidth = 0;
         if (bar && tog) {
-            barwidth = bar.clientWidth;
-            togwidth = tog.clientWidth;
+            console.log("they exist")
+            barwidth = bar.getBoundingClientRect().width;
+            // barwidth = bar.clientWidth;
+            console.log(barwidth)
+            togwidth = tog.getBoundingClientRect().width;
+            // togwidth = tog.clientWidth;
+            console.log(togwidth)
         }
         let totalWidth = (barwidth - togwidth - 10);
+        console.log(totalWidth)
         return totalWidth;
     }
 
     componentDidMount = () => {
 
-        let totalWidth = this.totalWidth;
+        // let totalWidth = this.totalWidth;
+        let totalWidth = 265;
 
         if (this._originalStatus) {
             this.forwardTimeline.add({
-- 
cgit v1.2.3-70-g09d2


From a9ae54044fdb7f10dd01473e711e1afea00d33c1 Mon Sep 17 00:00:00 2001
From: Monika <monika_hedman@brown.edu>
Date: Mon, 24 Jun 2019 14:46:01 -0400
Subject: filter box is looking NICEEE

---
 src/client/views/search/NaviconButton.scss | 52 ++++++-----------
 src/client/views/search/NaviconButton.tsx  |  2 -
 src/client/views/search/SearchBox.scss     | 56 +++++++++++++++----
 src/client/views/search/SearchBox.tsx      | 90 ++++++++++++++++++++++--------
 src/client/views/search/ToggleBar.tsx      | 14 +++--
 5 files changed, 139 insertions(+), 75 deletions(-)

(limited to 'src/client/views/search/NaviconButton.tsx')

diff --git a/src/client/views/search/NaviconButton.scss b/src/client/views/search/NaviconButton.scss
index d26d67de2..634b4aeb5 100644
--- a/src/client/views/search/NaviconButton.scss
+++ b/src/client/views/search/NaviconButton.scss
@@ -14,7 +14,9 @@ $translateX: 0;
   height:$height-icon;
   position:relative;
   display:block;
-//   margin: ($height-icon * 2) auto $height-icon auto;
+  transition: all $transition-time;
+    -webkit-transition: all $transition-time;
+    -moz-transition: all $transition-time;
   
   .line {
     display:block;
@@ -38,44 +40,26 @@ $translateX: 0;
       top:100%;
     }
   }
-  &:hover, &:focus {
-     .line-1 {
-        transform: translateY($height-line / 2 * -1);
-        -webkit-transform: translateY($height-line / 2 * -1);
-        -moz-transform: translateY($height-line / 2 * -1);
-     }
-    .line-3 {
-        transform: translateY($height-line / 2);
-        -webkit-transform: translateY($height-line / 2);
-        -moz-transform: translateY($height-line / 2);
-    }  
-  }
-  &.active {
+}
+
+.filter-header.active {
     .line-1 {
-      transform: translateY($translateY) translateX($translateX) rotate($rotation);
-      -webkit-transform: translateY($translateY) translateX($translateX) rotate($rotation);
-      -moz-transform: translateY($translateY) translateX($translateX) rotate($rotation);
+        transform: translateY($translateY) translateX($translateX) rotate($rotation);
+        -webkit-transform: translateY($translateY) translateX($translateX) rotate($rotation);
+        -moz-transform: translateY($translateY) translateX($translateX) rotate($rotation);
     }
     .line-2 {
-      opacity:0;
+        opacity:0;
     }
     .line-3 {
-      transform: translateY($translateY * -1) translateX($translateX) rotate($rotation * -1);
-      -webkit-transform: translateY($translateY * -1) translateX($translateX) rotate($rotation * -1);
-      -moz-transform: translateY($translateY * -1) translateX($translateX) rotate($rotation * -1);
+        transform: translateY($translateY * -1) translateX($translateX) rotate($rotation * -1);
+        -webkit-transform: translateY($translateY * -1) translateX($translateX) rotate($rotation * -1);
+        -moz-transform: translateY($translateY * -1) translateX($translateX) rotate($rotation * -1);
     }
-  }
 }
 
-// h1 {
-//   text-transform:uppercase;
-// }
-// a {
-//   text-decoration:none;
-//   color:#95a5a6;
-//   margin: 0.5em 1.5em;
-//   display:inline-block;
-//   &:hover, &:focus {
-//     color:$color;
-//   }
-// }
\ No newline at end of file
+.filter-header:hover #hamburger-icon {
+    transform: scale(1.1);
+    -webkit-transform: scale(1.1);
+        -moz-transform: scale(1.1);
+}
\ No newline at end of file
diff --git a/src/client/views/search/NaviconButton.tsx b/src/client/views/search/NaviconButton.tsx
index adfd1308c..1b8ad7e91 100644
--- a/src/client/views/search/NaviconButton.tsx
+++ b/src/client/views/search/NaviconButton.tsx
@@ -6,7 +6,6 @@ import { observable } from 'mobx';
 
 export interface NaviconProps{
     onClick(): void;
-    outsideClick(): void;
 }
 
 
@@ -20,7 +19,6 @@ export class NaviconButton extends React.Component<NaviconProps> {
             e.preventDefault();
             if(that.ref.current){
                 that.ref.current.classList.toggle('active');
-                console.log("toggling 2")
                 return false;
             }
         })};
diff --git a/src/client/views/search/SearchBox.scss b/src/client/views/search/SearchBox.scss
index c98c7c28f..57002a94a 100644
--- a/src/client/views/search/SearchBox.scss
+++ b/src/client/views/search/SearchBox.scss
@@ -1,4 +1,5 @@
 @import "../globalCssVariables";
+@import "./NaviconButton.scss";
 
 .searchBox-bar {
     height: 32px;
@@ -49,7 +50,6 @@
 
 .filter-form {
     background: $dark-color;
-    // height: 400px;
     height: auto;
     overflow: auto;
     position: relative;
@@ -64,27 +64,52 @@
         margin-bottom: 10px;
     }
 
-    .filter-header:hover .filter-title{
+    .filter-header:hover .filter-title {
         transform: scale(1.05);
     }
 
     .filter-panel {
-        display: none;
+        max-height: 0px;
         width: 100%;
+        overflow: hidden;
+        opacity: 0;
+        transform-origin: top;
+        -webkit-transition: all 0.2s ease-in-out;
+        -moz-transition: all 0.2s ease-in-out;
+        -o-transition: all 0.2s ease-in-out;
+        transition: all 0.2s ease-in-out;
     }
 
     .close-icon {
-        height: 100%;
+        width: 20%;
         opacity: .6;
-        justify-content: right;
         position: relative;
-        .fontawesome-icon {
-            margin-right: 0px;
-            height: 30px;
+        display: inline-block;
+
+        .line {
+            display: block;
+            background: $alt-accent;
+            width: $width-line;
+            height: $height-line;
+            position: absolute;
+            right: 0;
+            border-radius: ($height-line / 2);
+
+            &.line-1 {
+                transform: rotate(45deg);
+                top: 45%;
+            }
+
+            &.line-2 {
+                transform: rotate(-45deg);
+                top: 45%;
+            }
         }
+
+
     }
 
-    .close-icon:hover{
+    .close-icon:hover {
         opacity: 1;
     }
 }
@@ -98,7 +123,7 @@
     text-transform: uppercase;
     letter-spacing: 2px;
     font-size: 25;
-    width: 100%;
+    width: 80%;
 }
 
 .searchBox-results {
@@ -120,11 +145,19 @@
     margin-bottom: 5px;
 }
 
+.filter-buttons {
+    border-color: rgba(178, 206, 248, .2); // $darker-alt-accent
+    border-top-style: solid;
+    padding-top: 10px;
+}
+
 .filter-div {
     margin-top: 10px;
     margin-bottom: 10px;
-    display: inline-block;
+    display: block;
     width: 100%;
+    border-color: rgba(178, 206, 248, .2); // $darker-alt-accent
+    border-top-style: solid;
 }
 
 .collection-title {
@@ -150,5 +183,4 @@
     width: 100%;
     display: grid;
     grid-template-columns: 18% 20% 60%;
-    // white-space: space-between;
 }
\ No newline at end of file
diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
index b19841312..31e9f5d06 100644
--- a/src/client/views/search/SearchBox.tsx
+++ b/src/client/views/search/SearchBox.tsx
@@ -24,6 +24,7 @@ import { DocumentView } from '../nodes/DocumentView';
 import { CollectionFilters } from './CollectionFilters';
 import { NaviconButton } from './NaviconButton';
 import * as $ from 'jquery';
+import * as anime from 'animejs';
 
 library.add(faTimes);
 
@@ -78,27 +79,63 @@ export class SearchBox extends React.Component {
     }
 
     setupAccordion() {
-        $('document').ready(function(){
+        $('document').ready(function () {
             var acc = document.getElementsByClassName('filter-header');
 
-        for (var i = 0; i < acc.length; i++) {
-            // for(let entry of acc){
-            acc[i].addEventListener("click", function (this: HTMLElement) {
-                this.classList.toggle("active");
-
-                console.log(this.childNodes)
-
-                var panel = this.nextElementSibling as HTMLElement;
-                if (panel) {
-                    if (panel.style.display === "inline-block") {
-                        panel.style.display = "none";
+            for (var i = 0; i < acc.length; i++) {
+                acc[i].addEventListener("click", function (this: HTMLElement) {
+                    this.classList.toggle("active");
+
+                    var panel = this.nextElementSibling as HTMLElement;
+                    // if (panel) {
+                    //     console.log(panel.style.transform)
+                    //     if (panel.style.display === "inline-block") {
+                    //         panel.style.opacity = "0";
+                    //         // panel.style.transform = "scaleY(0)"
+                    //         setTimeout(function(){
+                    //             panel.style.display = "none";
+                    //         }, 200);
+
+                    //     } else {
+                    //         panel.style.opacity = "1";
+                    //         // panel.style.transform = "scaleY(1)"
+                    //         panel.style.display = "inline-block";
+                    //     }
+                    // }
+                    if (panel.style.maxHeight) {
+                        panel.style.overflow = "hidden";
+                        panel.style.maxHeight = null;
+                        panel.style.opacity = "0";
                     } else {
-                        panel.style.display = "inline-block";
+                        setTimeout(() => {
+                            panel.style.overflow = "visible";
+                        }, 200);
+                        setTimeout(() => {
+                            panel.style.opacity = "1";
+                        }, 50)
+                        panel.style.maxHeight = panel.scrollHeight + "px";
+                        
                     }
+                });
+            }
+        });
+    }
+
+    @action.bound
+    minimizeAll() {
+        $('document').ready(function () {
+            var acc = document.getElementsByClassName('filter-header');
+
+            for (var i = 0; i < acc.length; i++) {
+                let classList = acc[i].classList;
+                if (classList.contains("active")) {
+                    acc[i].classList.toggle("active");
+                    var panel = acc[i].nextElementSibling as HTMLElement;
+                    panel.style.overflow = "hidden";
+                    panel.style.maxHeight = null;
                 }
-            });
-        }
-      });
+            }
+        });
     }
 
     @action.bound
@@ -423,6 +460,8 @@ export class SearchBox extends React.Component {
         this._pointerTime = e.timeStamp;
     }
 
+
+
     @action.bound
     closeFilter() { this._filterOpen = false; }
 
@@ -491,9 +530,11 @@ export class SearchBox extends React.Component {
                 </div>
                 {this._filterOpen ? (
                     <div className="filter-form" onPointerDown={this.stopProp} id="filter" style={this._filterOpen ? { display: "flex" } : { display: "none" }}>
-                        <div style={{ display: "flex", width: "100%"}}>
+                        <div style={{ display: "flex", width: "100%" }}>
                             <div id="header">Filter Search Results</div>
-                            <div className = "close-icon" onClick = {this.closeFilter}><FontAwesomeIcon className="fontawesome-icon" icon={faTimes} size = "2x"/></div>
+                            <div className="close-icon" onClick={this.closeFilter}>
+                                <span className="line line-1"></span>
+                                <span className="line line-2"></span></div>
                         </div>
                         <div>
                             <div className="filter-div">
@@ -502,9 +543,9 @@ export class SearchBox extends React.Component {
                                     <div style={{ marginLeft: "auto" }}><NaviconButton onClick={this.toggleWordStatusOpen} /></div>
                                 </div>
                                 <div className="filter-panel" >
-                                    <ToggleBar 
-                                    originalStatus={this._basicWordStatus} optionOne={"Include Any Keywords"} optionTwo={"Include All Keywords"} />
-                                    </div>
+                                    <ToggleBar handleChange={this.handleWordQueryChange} getStatus={this.getBasicWordStatus}
+                                        originalStatus={this._basicWordStatus} optionOne={"Include Any Keywords"} optionTwo={"Include All Keywords"} />
+                                </div>
                             </div>
                             <div className="filter-div">
                                 <div className="filter-header">
@@ -532,7 +573,12 @@ export class SearchBox extends React.Component {
                                     updateAuthorStatus={this.updateAuthorStatus} updateDataStatus={this.updateDataStatus} updateTitleStatus={this.updateTitleStatus} /> </div>
                             </div>
                         </div>
-                        <button className="filter-div reset-filter" onClick={this.resetFilters}>Reset Filters</button>
+                        <div className="filter-buttons" style={{ display: "flex", justifyContent: "space-around" }}>
+                            <button className="minimizwe-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>
                     </div>
                 ) : undefined}
             </div>
diff --git a/src/client/views/search/ToggleBar.tsx b/src/client/views/search/ToggleBar.tsx
index 90fab99ee..5c5e525c8 100644
--- a/src/client/views/search/ToggleBar.tsx
+++ b/src/client/views/search/ToggleBar.tsx
@@ -10,6 +10,8 @@ export interface ToggleBarProps {
     originalStatus: boolean;
     optionOne: string;
     optionTwo: string;
+    handleChange(): void;
+    getStatus(): boolean;
 }
 
 @observer
@@ -79,15 +81,17 @@ export class ToggleBar extends React.Component<ToggleBarProps>{
     onclick() {
         this.forwardTimeline.play();
         this.forwardTimeline.reverse();
-        SearchBox.Instance.handleWordQueryChange();
+        // SearchBox.Instance.handleWordQueryChange();
+        this.props.handleChange();
     }
 
     @action.bound
     public resetToggle = () => {
-        if (!SearchBox.Instance.getBasicWordStatus()) {
+        if (!this.props.getStatus()) {
             this.forwardTimeline.play();
             this.forwardTimeline.reverse();
-            SearchBox.Instance.handleWordQueryChange();
+            // SearchBox.Instance.handleWordQueryChange();
+            this.props.handleChange();
         }
     }
 
@@ -95,8 +99,8 @@ export class ToggleBar extends React.Component<ToggleBarProps>{
         return (
             <div>
                 <div className="toggle-title">
-                    <div className="toggle-option" style={{ opacity: (SearchBox.Instance.getBasicWordStatus() ? 1 : .4) }}>{this.props.optionOne}</div>
-                    <div className="toggle-option" style={{ opacity: (SearchBox.Instance.getBasicWordStatus() ? .4 : 1) }}>{this.props.optionTwo}</div>
+                    <div className="toggle-option" style={{ opacity: (this.props.getStatus() ? 1 : .4) }}>{this.props.optionOne}</div>
+                    <div className="toggle-option" style={{ opacity: (this.props.getStatus() ? .4 : 1) }}>{this.props.optionTwo}</div>
                 </div>
                 <div className="toggle-bar" id="toggle-bar" style={{ flexDirection: (this._originalStatus ? "row" : "row-reverse") }}>
                     <div className="toggle-button" id="toggle-button" ref={this._toggleButton} onClick={this.onclick} />
-- 
cgit v1.2.3-70-g09d2


From 56394d6631f494526546cb5cd03297b400a85e65 Mon Sep 17 00:00:00 2001
From: Monika <monika_hedman@brown.edu>
Date: Mon, 24 Jun 2019 16:07:38 -0400
Subject: clean ups

---
 src/client/views/search/IconBar.tsx       |  8 ++------
 src/client/views/search/IconButton.tsx    | 16 ++++------------
 src/client/views/search/NaviconButton.tsx |  1 -
 src/client/views/search/SearchBox.tsx     | 17 +----------------
 src/client/views/search/SearchItem.tsx    |  9 ++-------
 src/client/views/search/ToggleBar.tsx     | 22 ----------------------
 6 files changed, 9 insertions(+), 64 deletions(-)

(limited to 'src/client/views/search/NaviconButton.tsx')

diff --git a/src/client/views/search/IconBar.tsx b/src/client/views/search/IconBar.tsx
index ea8c626ca..8746ac6e2 100644
--- a/src/client/views/search/IconBar.tsx
+++ b/src/client/views/search/IconBar.tsx
@@ -44,14 +44,10 @@ export class IconBar extends React.Component {
     }
 
     @action.bound
-    getList = (): string[] => {
-        return SearchBox.Instance.getIcons();
-    }
+    getList = (): string[] => { return SearchBox.Instance.getIcons(); }
 
     @action.bound
-    updateList(newList: string[]) {
-        SearchBox.Instance.updateIcon(newList);
-    }
+    updateList(newList: string[]) { SearchBox.Instance.updateIcon(newList); }
 
     @action.bound
     resetSelf = () => {
diff --git a/src/client/views/search/IconButton.tsx b/src/client/views/search/IconButton.tsx
index 9df285b70..541fe5ba5 100644
--- a/src/client/views/search/IconButton.tsx
+++ b/src/client/views/search/IconButton.tsx
@@ -137,24 +137,16 @@ export class IconButton extends React.Component<IconButtonProps>{
     };
 
     @action.bound
-    public reset() {
-        this.isSelected = false;
-    }
+    public reset() { this.isSelected = false; }
 
     @action.bound
-    public select() {
-        this.isSelected = true;
-    }
+    public select() { this.isSelected = true; }
 
     @action
-    onMouseLeave = () => {
-        this.hover = false;
-    }
+    onMouseLeave = () => { this.hover = false; }
 
     @action
-    onMouseEnter = () => {
-        this.hover = true;
-    }
+    onMouseEnter = () => { this.hover = true; }
 
     getFA = () => {
         switch (this.props.type) {
diff --git a/src/client/views/search/NaviconButton.tsx b/src/client/views/search/NaviconButton.tsx
index 1b8ad7e91..3f9bb030f 100644
--- a/src/client/views/search/NaviconButton.tsx
+++ b/src/client/views/search/NaviconButton.tsx
@@ -8,7 +8,6 @@ export interface NaviconProps{
     onClick(): void;
 }
 
-
 export class NaviconButton extends React.Component<NaviconProps> {
 
     @observable ref: React.RefObject<HTMLAnchorElement> = React.createRef();
diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
index 30bd0c3d9..28bcadc6b 100644
--- a/src/client/views/search/SearchBox.tsx
+++ b/src/client/views/search/SearchBox.tsx
@@ -194,23 +194,17 @@ export class SearchBox extends React.Component {
 
     get fieldFiltersApplied() { return !(this.dataFieldStatus && this.authorFieldStatus && this.titleFieldStatus); }
 
+    //TODO: basically all of this
     //gets all of the collections of all the docviews that are selected
     //if a collection is the only thing selected, search only in that collection (not its container)
     getCurCollections(): Doc[] {
         let selectedDocs: DocumentView[] = SelectionManager.SelectedDocuments();
         let collections: Doc[] = [];
 
-        //TODO: make this some sort of error
-        if (selectedDocs.length === 0) {
-            console.log("there is nothing selected!")
-        }
-        //also searches in a collection if it is selected
-        else {
             selectedDocs.forEach(async element => {
                 let layout: string = StrCast(element.props.Document.baseLayout);
                 //checks if selected view (element) is a collection. if it is, adds to list to search through
                 if (layout.indexOf("Collection") > -1) {
-                    console.log("current doc is a collection")
                     //makes sure collections aren't added more than once
                     if (!collections.includes(element.props.Document)) {
                         collections.push(element.props.Document);
@@ -223,7 +217,6 @@ export class SearchBox extends React.Component {
                     collections.push(containingView.props.Document);
                 }
             });
-        }
 
         return collections;
     }
@@ -249,7 +242,6 @@ export class SearchBox extends React.Component {
             query = this.addCollectionFilter(query);
             query = query.replace(/\s+/g, ' ').trim();
         }
-        console.log(query)
         return query;
     }
 
@@ -276,7 +268,6 @@ export class SearchBox extends React.Component {
         let results: Doc[];
 
         query = this.getFinalQuery(query);
-        console.log(query)
 
         //if there is no query there should be no result
         if (query === "") {
@@ -287,8 +278,6 @@ export class SearchBox extends React.Component {
             results = await this.getResults(query);
         }
 
-        console.log(results);
-
         runInAction(() => {
             this._resultsOpen = true;
             this._results = results;
@@ -312,18 +301,14 @@ export class SearchBox extends React.Component {
                 docs.push(field);
             }
         }
-        console.log(docs)
         return this.filterDocsByType(docs);
     }
 
     //this.icons will now include all the icons that need to be included
     @action filterDocsByType(docs: Doc[]) {
-        console.log(this._icons)
         let finalDocs: Doc[] = [];
         docs.forEach(doc => {
-            console.log(doc.layout)
             let layoutresult = Cast(doc.type, "string", "");
-            console.log(layoutresult)
             if (this._icons.includes(layoutresult)) {
                 finalDocs.push(doc);
             }
diff --git a/src/client/views/search/SearchItem.tsx b/src/client/views/search/SearchItem.tsx
index c19057819..e80d42a5c 100644
--- a/src/client/views/search/SearchItem.tsx
+++ b/src/client/views/search/SearchItem.tsx
@@ -69,7 +69,6 @@ export class SelectorContextMenu extends React.Component<SearchItemProps> {
         };
     }
 
-    //these all need class names in order to find ancestor - please do not delete
     render() {
         return (
             < div className="parents">
@@ -119,9 +118,7 @@ export class SearchItem extends React.Component<SearchItemProps> {
     }
 
     @computed
-    get linkCount() {
-        return Cast(this.props.doc.linkedToDocs, listSpec(Doc), []).length + Cast(this.props.doc.linkedFromDocs, listSpec(Doc), []).length;
-    }
+    get linkCount() { return Cast(this.props.doc.linkedToDocs, listSpec(Doc), []).length + Cast(this.props.doc.linkedFromDocs, listSpec(Doc), []).length; }
 
     @computed
     get linkString(): string {
@@ -132,9 +129,7 @@ export class SearchItem extends React.Component<SearchItemProps> {
         return num.toString() + " links";
     }
 
-    pointerDown = (e: React.PointerEvent) => {
-        SearchBox.Instance.openSearch(e);
-    }
+    pointerDown = (e: React.PointerEvent) => { SearchBox.Instance.openSearch(e); }
 
     highlightDoc = (e: React.PointerEvent) => {
         let docViews: DocumentView[] = DocumentManager.Instance.getAllDocumentViews(this.props.doc);
diff --git a/src/client/views/search/ToggleBar.tsx b/src/client/views/search/ToggleBar.tsx
index 96536794d..b1d22d38c 100644
--- a/src/client/views/search/ToggleBar.tsx
+++ b/src/client/views/search/ToggleBar.tsx
@@ -33,30 +33,8 @@ export class ToggleBar extends React.Component<ToggleBarProps>{
         });
     }
 
-    @computed get totalWidth() { return this.getTotalWidth(); }
-
-    getTotalWidth() {
-        let bar = document.getElementById("toggle-bar");
-        let tog = document.getElementById("toggle-button");
-        let barwidth = 0;
-        let togwidth = 0;
-        if (bar && tog) {
-            console.log("they exist")
-            barwidth = bar.getBoundingClientRect().width;
-            // barwidth = bar.clientWidth;
-            console.log(barwidth)
-            togwidth = tog.getBoundingClientRect().width;
-            // togwidth = tog.clientWidth;
-            console.log(togwidth)
-        }
-        let totalWidth = (barwidth - togwidth - 10);
-        console.log(totalWidth)
-        return totalWidth;
-    }
-
     componentDidMount = () => {
 
-        // let totalWidth = this.totalWidth;
         let totalWidth = 265;
 
         if (this._originalStatus) {
-- 
cgit v1.2.3-70-g09d2


From 329565c35729f5171de9efa30f36e6b4e0714101 Mon Sep 17 00:00:00 2001
From: Monika <monika_hedman@brown.edu>
Date: Mon, 24 Jun 2019 16:10:19 -0400
Subject: lint fixes

---
 src/client/views/collections/CollectionDockingView.tsx  | 4 ++--
 src/client/views/collections/CollectionStackingView.tsx | 2 +-
 src/client/views/search/IconBar.tsx                     | 2 +-
 src/client/views/search/NaviconButton.tsx               | 2 +-
 src/client/views/search/SearchBox.tsx                   | 2 +-
 src/client/views/search/SearchItem.tsx                  | 2 +-
 6 files changed, 7 insertions(+), 7 deletions(-)

(limited to 'src/client/views/search/NaviconButton.tsx')

diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 30d68fffd..c43497cfd 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -260,9 +260,9 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
     onPointerDown = (e: React.PointerEvent): void => {
         this._isPointerDown = true;
         let onPointerUp = action(() => {
-            window.removeEventListener("pointerup", onPointerUp)
+            window.removeEventListener("pointerup", onPointerUp);
             this._isPointerDown = false;
-        })
+        });
         window.addEventListener("pointerup", onPointerUp);
         var className = (e.target as any).className;
         if (className === "messageCounter") {
diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx
index c855cb43a..597e4795c 100644
--- a/src/client/views/collections/CollectionStackingView.tsx
+++ b/src/client/views/collections/CollectionStackingView.tsx
@@ -99,7 +99,7 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) {
             let dref = React.createRef<HTMLDivElement>();
             let dxf = () => this.getDocTransform(d, dref.current!).scale(this.columnWidth / d[WidthSym]());
             let width = () => d.nativeWidth ? Math.min(d[WidthSym](), this.columnWidth) : this.columnWidth;
-            let height = () => aspect ? width() / aspect : d[HeightSym]()
+            let height = () => aspect ? width() / aspect : d[HeightSym]();
             let rowSpan = Math.ceil((height() + this.gridGap) / (this._gridSize + this.gridGap));
             return (<div className="collectionStackingView-masonryDoc"
                 key={d[Id]}
diff --git a/src/client/views/search/IconBar.tsx b/src/client/views/search/IconBar.tsx
index 8746ac6e2..f361429f7 100644
--- a/src/client/views/search/IconBar.tsx
+++ b/src/client/views/search/IconBar.tsx
@@ -44,7 +44,7 @@ export class IconBar extends React.Component {
     }
 
     @action.bound
-    getList = (): string[] => { return SearchBox.Instance.getIcons(); }
+    getList(): string[] { return SearchBox.Instance.getIcons(); }
 
     @action.bound
     updateList(newList: string[]) { SearchBox.Instance.updateIcon(newList); }
diff --git a/src/client/views/search/NaviconButton.tsx b/src/client/views/search/NaviconButton.tsx
index 3f9bb030f..e319b945a 100644
--- a/src/client/views/search/NaviconButton.tsx
+++ b/src/client/views/search/NaviconButton.tsx
@@ -20,7 +20,7 @@ export class NaviconButton extends React.Component<NaviconProps> {
                 that.ref.current.classList.toggle('active');
                 return false;
             }
-        })};
+        });}
     }
 
     render() {
diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
index 28bcadc6b..07e7496cf 100644
--- a/src/client/views/search/SearchBox.tsx
+++ b/src/client/views/search/SearchBox.tsx
@@ -92,7 +92,7 @@ export class SearchBox extends React.Component {
                         }, 200);
                         setTimeout(() => {
                             panel.style.opacity = "1";
-                        }, 50)
+                        }, 50);
                         panel.style.maxHeight = panel.scrollHeight + "px";
                         
                     }
diff --git a/src/client/views/search/SearchItem.tsx b/src/client/views/search/SearchItem.tsx
index e80d42a5c..fa9d58152 100644
--- a/src/client/views/search/SearchItem.tsx
+++ b/src/client/views/search/SearchItem.tsx
@@ -129,7 +129,7 @@ export class SearchItem extends React.Component<SearchItemProps> {
         return num.toString() + " links";
     }
 
-    pointerDown = (e: React.PointerEvent) => { SearchBox.Instance.openSearch(e); }
+    pointerDown = (e: React.PointerEvent) => { SearchBox.Instance.openSearch(e); };
 
     highlightDoc = (e: React.PointerEvent) => {
         let docViews: DocumentView[] = DocumentManager.Instance.getAllDocumentViews(this.props.doc);
-- 
cgit v1.2.3-70-g09d2


From b954eeb57c1ba7a459d85ca7f98855e1b4134267 Mon Sep 17 00:00:00 2001
From: Monika <monika_hedman@brown.edu>
Date: Tue, 25 Jun 2019 12:38:51 -0400
Subject: lots of clean up (css & variables)

---
 src/client/views/search/CheckBox.tsx             |  22 +-
 src/client/views/search/CollectionFilters.tsx    |  41 ++--
 src/client/views/search/FieldFilters.tsx         |  15 +-
 src/client/views/search/FilterBox.scss           | 108 +++++++++
 src/client/views/search/IconBar.scss             |  60 +----
 src/client/views/search/IconBar.tsx              |  50 ++--
 src/client/views/search/IconButton.scss          |  52 +++++
 src/client/views/search/IconButton.tsx           |  47 ++--
 src/client/views/search/NaviconButton.scss       |  60 ++---
 src/client/views/search/NaviconButton.tsx        |  10 +-
 src/client/views/search/SearchBox.scss           | 184 +++------------
 src/client/views/search/SearchBox.tsx            |  70 +++---
 src/client/views/search/SearchItem.scss          | 276 ++++++++++++-----------
 src/client/views/search/SearchItem.tsx           |   2 +-
 src/client/views/search/SelectorContextMenu.scss |  15 ++
 src/client/views/search/ToggleBar.tsx            |  20 +-
 16 files changed, 520 insertions(+), 512 deletions(-)
 create mode 100644 src/client/views/search/FilterBox.scss
 create mode 100644 src/client/views/search/IconButton.scss
 create mode 100644 src/client/views/search/SelectorContextMenu.scss

(limited to 'src/client/views/search/NaviconButton.tsx')

diff --git a/src/client/views/search/CheckBox.tsx b/src/client/views/search/CheckBox.tsx
index c75980e7c..a9d48219a 100644
--- a/src/client/views/search/CheckBox.tsx
+++ b/src/client/views/search/CheckBox.tsx
@@ -16,11 +16,11 @@ interface CheckBoxProps {
 @observer
 export class CheckBox extends React.Component<CheckBoxProps>{
     // true = checked, false = unchecked
-    @observable _status: boolean;
-    @observable uncheckTimeline: anime.AnimeTimelineInstance;
-    @observable checkTimeline: anime.AnimeTimelineInstance;
-    @observable checkRef: any;
-    @observable _resetReaction?: IReactionDisposer;
+    @observable private _status: boolean;
+    @observable private uncheckTimeline: anime.AnimeTimelineInstance;
+    @observable private checkTimeline: anime.AnimeTimelineInstance;
+    @observable private checkRef: any;
+    @observable private _resetReaction?: IReactionDisposer;
 
 
     constructor(props: CheckBoxProps) {
@@ -60,15 +60,15 @@ export class CheckBox extends React.Component<CheckBoxProps>{
         }
 
         this._resetReaction = reaction(
-            () => this.props.parent.resetBoolean,
+            () => this.props.parent._resetBoolean,
             () => {
-                if (this.props.parent.resetBoolean) {
+                if (this.props.parent._resetBoolean) {
                     runInAction(() => {
                         this.reset();
-                        this.props.parent.resetCounter++;
-                        if (this.props.parent.resetCounter === this.props.numCount) {
-                            this.props.parent.resetCounter = 0;
-                            this.props.parent.resetBoolean = false;
+                        this.props.parent._resetCounter++;
+                        if (this.props.parent._resetCounter === this.props.numCount) {
+                            this.props.parent._resetCounter = 0;
+                            this.props.parent._resetBoolean = false;
                         }
                     });
                 }
diff --git a/src/client/views/search/CollectionFilters.tsx b/src/client/views/search/CollectionFilters.tsx
index 3dd87157d..48d0b2ddb 100644
--- a/src/client/views/search/CollectionFilters.tsx
+++ b/src/client/views/search/CollectionFilters.tsx
@@ -17,18 +17,19 @@ export class CollectionFilters extends React.Component<CollectionFilterProps> {
 
     static Instance: CollectionFilters;
 
-    @observable public resetBoolean = false;
-    @observable public resetCounter: number = 0;
-    @observable collectionsSelected = this.props.collectionStatus;
-    @observable timeline: anime.AnimeTimelineInstance;
-    @observable ref: any;
+    @observable public _resetBoolean = false;
+    @observable public _resetCounter: number = 0;
+    
+    @observable private _collectionsSelected = this.props.collectionStatus;
+    @observable private _timeline: anime.AnimeTimelineInstance;
+    @observable private _ref: any;
 
     constructor(props: CollectionFilterProps) {
         super(props);
         CollectionFilters.Instance = this;
-        this.ref = React.createRef();
+        this._ref = React.createRef();
 
-        this.timeline = anime.timeline({
+        this._timeline = anime.timeline({
             loop: false,
             autoplay: false,
             direction: "reverse",
@@ -36,32 +37,32 @@ export class CollectionFilters extends React.Component<CollectionFilterProps> {
     }
 
     componentDidMount = () => {
-        this.timeline.add({
-            targets: this.ref.current,
+        this._timeline.add({
+            targets: this._ref.current,
             easing: "easeInOutQuad",
             duration: 500,
             opacity: 1,
         });
 
-        if (this.collectionsSelected) {
-            this.timeline.play();
-            this.timeline.reverse();
+        if (this._collectionsSelected) {
+            this._timeline.play();
+            this._timeline.reverse();
         }
     }
 
     @action.bound
-    resetCollectionFilters() { this.resetBoolean = true; }
+    resetCollectionFilters() { this._resetBoolean = true; }
 
     @action.bound
     updateColStat(val: boolean) {
         this.props.updateCollectionStatus(val);
 
-            if (this.collectionsSelected !== val) {
-                this.timeline.play();
-                this.timeline.reverse();
-            }
+        if (this._collectionsSelected !== val) {
+            this._timeline.play();
+            this._timeline.reverse();
+        }
 
-        this.collectionsSelected = val;
+        this._collectionsSelected = val;
     }
 
     render() {
@@ -70,8 +71,8 @@ export class CollectionFilters extends React.Component<CollectionFilterProps> {
                 <div className="collection-filters">
                     <div className="collection-filters main">
                         <CheckBox default={false} title={"limit to current collection"} parent={this} numCount={3} updateStatus={this.updateColStat} originalStatus={this.props.collectionStatus} />
-                    </div> 
-                    <div className="collection-filters optional" ref={this.ref}>
+                    </div>
+                    <div className="collection-filters optional" ref={this._ref}>
                         <CheckBox default={true} title={"Search in self"} parent={this} numCount={3} updateStatus={this.props.updateSelfCollectionStatus} originalStatus={this.props.collectionSelfStatus} />
                         <CheckBox default={true} title={"Search in parent"} parent={this} numCount={3} updateStatus={this.props.updateParentCollectionStatus} originalStatus={this.props.collectionParentStatus} />
                     </div>
diff --git a/src/client/views/search/FieldFilters.tsx b/src/client/views/search/FieldFilters.tsx
index eb12e654f..befe5d54d 100644
--- a/src/client/views/search/FieldFilters.tsx
+++ b/src/client/views/search/FieldFilters.tsx
@@ -16,8 +16,9 @@ export interface FieldFilterProps {
 export class FieldFilters extends React.Component<FieldFilterProps> {
 
     static Instance: FieldFilters;
-    @observable public resetBoolean = false;
-    @observable public resetCounter: number = 0;
+    
+    @observable public _resetBoolean = false;
+    @observable public _resetCounter: number = 0;
 
     constructor(props: FieldFilterProps) {
         super(props);
@@ -25,15 +26,15 @@ export class FieldFilters extends React.Component<FieldFilterProps> {
     }
 
     resetFieldFilters() {
-        this.resetBoolean = true;
+        this._resetBoolean = true;
     }
 
     render() {
         return (
-            <div className = "field-filters">
-                <CheckBox default = {true} numCount={3} parent={this} originalStatus={this.props.titleFieldStatus} updateStatus={this.props.updateTitleStatus} title={Keys.TITLE} />
-                <CheckBox default = {true} numCount={3} parent={this} originalStatus={this.props.authorFieldStatus} updateStatus={this.props.updateAuthorStatus} title={Keys.AUTHOR} />
-                <CheckBox default = {true} numCount={3} parent={this} originalStatus={this.props.dataFieldStatus} updateStatus={this.props.updateDataStatus} title={Keys.DATA} />
+            <div className="field-filters">
+                <CheckBox default={true} numCount={3} parent={this} originalStatus={this.props.titleFieldStatus} updateStatus={this.props.updateTitleStatus} title={Keys.TITLE} />
+                <CheckBox default={true} numCount={3} parent={this} originalStatus={this.props.authorFieldStatus} updateStatus={this.props.updateAuthorStatus} title={Keys.AUTHOR} />
+                <CheckBox default={true} numCount={3} parent={this} originalStatus={this.props.dataFieldStatus} updateStatus={this.props.updateDataStatus} title={Keys.DATA} />
             </div>
         );
     }
diff --git a/src/client/views/search/FilterBox.scss b/src/client/views/search/FilterBox.scss
new file mode 100644
index 000000000..1eb8963d7
--- /dev/null
+++ b/src/client/views/search/FilterBox.scss
@@ -0,0 +1,108 @@
+@import "../globalCssVariables";
+@import "./NaviconButton.scss";
+
+.filter-form {
+    padding: 25px;
+    width: 600px;
+    background: $dark-color;
+    position: relative;
+    right: 1px;
+    color: $light-color;
+    flex-direction: column;
+    display: inline-block;
+    transform-origin: top;
+    overflow: auto;
+
+    .top-filter-header {
+
+        #header {
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            font-size: 25;
+            width: 80%;
+        }
+
+        .close-icon {
+            width: 20%;
+            opacity: .6;
+            position: relative;
+            display: inline-block;
+
+            .line {
+                display: block;
+                background: $alt-accent;
+                width: $width-line;
+                height: $height-line;
+                position: absolute;
+                right: 0;
+                border-radius: ($height-line / 2);
+
+                &.line-1 {
+                    transform: rotate(45deg);
+                    top: 45%;
+                }
+
+                &.line-2 {
+                    transform: rotate(-45deg);
+                    top: 45%;
+                }
+            }
+        }
+
+        .close-icon:hover {
+            opacity: 1;
+        }
+
+    }
+
+    .filter-options {
+
+        .filter-div {
+            margin-top: 10px;
+            margin-bottom: 10px;
+            display: inline-block;
+            width: 100%;
+            border-color: rgba(178, 206, 248, .2); // $darker-alt-accent
+            border-top-style: solid;
+
+            .filter-header {
+                display: flex;
+                align-items: center;
+                margin-bottom: 10px;
+
+                .filter-title {
+                    font-size: 18;
+                    text-transform: uppercase;
+                    margin-top: 10px;
+                    margin-bottom: 10px;
+                    -webkit-transition: all 0.2s ease-in-out;
+                    -moz-transition: all 0.2s ease-in-out;
+                    -o-transition: all 0.2s ease-in-out;
+                    transition: all 0.2s ease-in-out;
+                }
+            }
+
+            .filter-header:hover .filter-title {
+                transform: scale(1.05);
+            }
+
+            .filter-panel {
+                max-height: 0px;
+                width: 100%;
+                overflow: hidden;
+                opacity: 0;
+                transform-origin: top;
+                -webkit-transition: all 0.2s ease-in-out;
+                -moz-transition: all 0.2s ease-in-out;
+                -o-transition: all 0.2s ease-in-out;
+                transition: all 0.2s ease-in-out;
+            }
+        }
+    }
+
+    .filter-buttons {
+        border-color: rgba(178, 206, 248, .2); // $darker-alt-accent
+        border-top-style: solid;
+        padding-top: 10px;
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/search/IconBar.scss b/src/client/views/search/IconBar.scss
index cb7de15a0..e384722ce 100644
--- a/src/client/views/search/IconBar.scss
+++ b/src/client/views/search/IconBar.scss
@@ -7,64 +7,6 @@
     height: 40px;
     width: 100%;
     flex-wrap: wrap;
+    margin-bottom: 10px;
 }
 
-.icon-title {
-    color: $light-color;
-    text-transform: uppercase;
-    padding: 5px;
-}
-
-.type-icon {
-    height: 45px;
-    width: 45px;
-    color: $light-color;
-    border-radius: 50%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    -webkit-transition: all 0.2s ease-in-out;
-    -moz-transition: all 0.2s ease-in-out;
-    -o-transition: all 0.2s ease-in-out;
-    transition: all 0.2s ease-in-out;
-    font-size: 2em;
-}
-
-.fontawesome-icon {
-    height: 24px;
-    width: 24px;
-}
-
-.filter-description{
-    text-transform: capitalize;
-}
-
-.type-icon:hover {
-    transform: scale(1.1);
-    background-color: $darker-alt-accent;
-    opacity: 1;
-
-    +.filter-description {
-        opacity: 1;
-    }
-}
-
-.type-outer {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    width: 45px;
-    height: 60px;
-}
-
-.filter-description {
-    font-size: 10;
-    text-align: center;
-    height: 15px;
-    margin-top: 5px;
-    opacity: 0;
-    -webkit-transition: all 0.2s ease-in-out;
-    -moz-transition: all 0.2s ease-in-out;
-    -o-transition: all 0.2s ease-in-out;
-    transition: all 0.2s ease-in-out;
-}
\ No newline at end of file
diff --git a/src/client/views/search/IconBar.tsx b/src/client/views/search/IconBar.tsx
index a446159fe..c5b4d33cf 100644
--- a/src/client/views/search/IconBar.tsx
+++ b/src/client/views/search/IconBar.tsx
@@ -1,8 +1,9 @@
 import * as React from 'react';
 import { observer } from 'mobx-react';
 import { observable, action } from 'mobx';
-import "./SearchBox.scss";
+// import "./SearchBox.scss";
 import "./IconBar.scss";
+import "./IconButton.scss";
 import { DocTypes } from '../../documents/Documents';
 import { faSearch, faFilePdf, faFilm, faImage, faObjectGroup, faStickyNote, faMusic, faLink, faChartBar, faGlobeAsia, faBan, faTimesCircle, faCheckCircle } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -28,11 +29,10 @@ export class IconBar extends React.Component {
 
     static Instance: IconBar;
 
-    allIcons: string[] = [DocTypes.AUDIO, DocTypes.COL, DocTypes.HIST, DocTypes.IMG, DocTypes.LINK, DocTypes.PDF, DocTypes.TEXT, DocTypes.VID, DocTypes.WEB];
-    @observable public ResetClicked: boolean = false;
-    @observable public SelectAllClicked: boolean = false;
-    public Reset: number = 0;
-    public Select: number = 0;
+    @observable public _resetClicked: boolean = false;
+    @observable public _selectAllClicked: boolean = false;
+    @observable public _reset: number = 0;
+    @observable public _select: number = 0;
 
     constructor(props: any) {
         super(props);
@@ -47,37 +47,37 @@ export class IconBar extends React.Component {
 
     @action.bound
     resetSelf = () => {
-        this.ResetClicked = true;
+        this._resetClicked = true;
         this.updateList([]);
     }
 
     @action.bound
     selectAll = () => {
-        this.SelectAllClicked = true;
-        this.updateList(this.allIcons);
+        this._selectAllClicked = true;
+        this.updateList(SearchBox.Instance._allIcons);
     }
 
     render() {
         return (
-            <div className="icon-bar">
-                <div className="type-outer">
-                    <div className={"type-icon all"}
-                        onClick={this.selectAll}>
-                        <FontAwesomeIcon className="fontawesome-icon" icon={faCheckCircle} />
+                <div className="icon-bar">
+                    <div className="type-outer">
+                        <div className={"type-icon all"}
+                            onClick={this.selectAll}>
+                            <FontAwesomeIcon className="fontawesome-icon" icon={faCheckCircle} />
+                        </div>
+                        <div className="filter-description">Select All</div>
                     </div>
-                    <div className="filter-description">Select All</div>
-                </div>
-                {this.allIcons.map((type: string) =>
-                    <IconButton type={type} />
-                )}
-                <div className="type-outer">
-                    <div className={"type-icon none"}
-                        onClick={this.resetSelf}>
-                        <FontAwesomeIcon className="fontawesome-icon" icon={faTimesCircle} />
+                    {SearchBox.Instance._allIcons.map((type: string) =>
+                        <IconButton type={type} />
+                    )}
+                    <div className="type-outer">
+                        <div className={"type-icon none"}
+                            onClick={this.resetSelf}>
+                            <FontAwesomeIcon className="fontawesome-icon" icon={faTimesCircle} />
+                        </div>
+                        <div className="filter-description">Clear</div>
                     </div>
-                    <div className="filter-description">Clear</div>
                 </div>
-            </div>
         );
     }
 }
diff --git a/src/client/views/search/IconButton.scss b/src/client/views/search/IconButton.scss
new file mode 100644
index 000000000..94b294ba5
--- /dev/null
+++ b/src/client/views/search/IconButton.scss
@@ -0,0 +1,52 @@
+@import "../globalCssVariables";
+
+.type-outer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 45px;
+    height: 60px;
+
+    .type-icon {
+        height: 45px;
+        width: 45px;
+        color: $light-color;
+        border-radius: 50%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        -webkit-transition: all 0.2s ease-in-out;
+        -moz-transition: all 0.2s ease-in-out;
+        -o-transition: all 0.2s ease-in-out;
+        transition: all 0.2s ease-in-out;
+        font-size: 2em;
+
+        .fontawesome-icon {
+            height: 24px;
+            width: 24px;
+        }
+    }
+
+    .filter-description {
+        text-transform: capitalize;
+        font-size: 10;
+        text-align: center;
+        height: 15px;
+        margin-top: 5px;
+        opacity: 0;
+        -webkit-transition: all 0.2s ease-in-out;
+        -moz-transition: all 0.2s ease-in-out;
+        -o-transition: all 0.2s ease-in-out;
+        transition: all 0.2s ease-in-out;
+    }
+
+    .type-icon:hover {
+        transform: scale(1.1);
+        background-color: $darker-alt-accent;
+        opacity: 1;
+    
+        +.filter-description {
+            opacity: 1;
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/search/IconButton.tsx b/src/client/views/search/IconButton.tsx
index 541fe5ba5..c40bb587f 100644
--- a/src/client/views/search/IconButton.tsx
+++ b/src/client/views/search/IconButton.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { observer } from 'mobx-react';
 import { observable, action, runInAction, IReactionDisposer, reaction } from 'mobx';
 import "./SearchBox.scss";
-import "./IconBar.scss";
+import "./IconButton.scss";
 import { faSearch, faFilePdf, faFilm, faImage, faObjectGroup, faStickyNote, faMusic, faLink, faChartBar, faGlobeAsia, faBan, faVideo, faCaretDown } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { library, icon } from '@fortawesome/fontawesome-svg-core';
@@ -33,9 +33,8 @@ interface IconButtonProps {
 @observer
 export class IconButton extends React.Component<IconButtonProps>{
 
-    @observable isSelected: boolean = SearchBox.Instance.getIcons().indexOf(this.props.type) !== -1;
-    @observable hover = false;
-
+    @observable private _isSelected: boolean = SearchBox.Instance.getIcons().indexOf(this.props.type) !== -1;
+    @observable private _hover = false;
     private _resetReaction?: IReactionDisposer;
     private _selectAllReaction?: IReactionDisposer;
 
@@ -47,30 +46,30 @@ export class IconButton extends React.Component<IconButtonProps>{
 
     componentDidMount = () => {
         this._resetReaction = reaction(
-            () => IconBar.Instance.ResetClicked,
+            () => IconBar.Instance._resetClicked,
             () => {
-                if (IconBar.Instance.ResetClicked) {
+                if (IconBar.Instance._resetClicked) {
                     runInAction(() => {
                         this.reset();
-                        IconBar.Instance.Reset++;
-                        if (IconBar.Instance.Reset === 9) {
-                            IconBar.Instance.Reset = 0;
-                            IconBar.Instance.ResetClicked = false;
+                        IconBar.Instance._reset++;
+                        if (IconBar.Instance._reset === 9) {
+                            IconBar.Instance._reset = 0;
+                            IconBar.Instance._resetClicked = false;
                         }
                     });
                 }
             },
         );
         this._selectAllReaction = reaction(
-            () => IconBar.Instance.SelectAllClicked,
+            () => IconBar.Instance._selectAllClicked,
             () => {
-                if (IconBar.Instance.SelectAllClicked) {
+                if (IconBar.Instance._selectAllClicked) {
                     runInAction(() => {
                         this.select();
-                        IconBar.Instance.Select++;
-                        if (IconBar.Instance.Select === 9) {
-                            IconBar.Instance.Select = 0;
-                            IconBar.Instance.SelectAllClicked = false;
+                        IconBar.Instance._select++;
+                        if (IconBar.Instance._select === 9) {
+                            IconBar.Instance._select = 0;
+                            IconBar.Instance._selectAllClicked = false;
                         }
                     });
                 }
@@ -110,12 +109,12 @@ export class IconButton extends React.Component<IconButtonProps>{
     onClick = () => {
         let newList: string[] = SearchBox.Instance.getIcons();
 
-        if (!this.isSelected) {
-            this.isSelected = true;
+        if (!this._isSelected) {
+            this._isSelected = true;
             newList.push(this.props.type);
         }
         else {
-            this.isSelected = false;
+            this._isSelected = false;
             _.pull(newList, this.props.type);
         }
 
@@ -137,16 +136,16 @@ export class IconButton extends React.Component<IconButtonProps>{
     };
 
     @action.bound
-    public reset() { this.isSelected = false; }
+    public reset() { this._isSelected = false; }
 
     @action.bound
-    public select() { this.isSelected = true; }
+    public select() { this._isSelected = true; }
 
     @action
-    onMouseLeave = () => { this.hover = false; }
+    onMouseLeave = () => { this._hover = false; }
 
     @action
-    onMouseEnter = () => { this.hover = true; }
+    onMouseEnter = () => { this._hover = true; }
 
     getFA = () => {
         switch (this.props.type) {
@@ -182,7 +181,7 @@ export class IconButton extends React.Component<IconButtonProps>{
                 onMouseLeave={this.onMouseLeave}
                 onClick={this.onClick}>
                 <div className="type-icon" id={this.props.type + "-icon"}
-                    style={this.hover ? this.hoverStyle : this.isSelected ? this.selected : this.notSelected}
+                    style={this._hover ? this.hoverStyle : this._isSelected ? this.selected : this.notSelected}
                 >
                     {this.getFA()}
                 </div>
diff --git a/src/client/views/search/NaviconButton.scss b/src/client/views/search/NaviconButton.scss
index 634b4aeb5..c23bab461 100644
--- a/src/client/views/search/NaviconButton.scss
+++ b/src/client/views/search/NaviconButton.scss
@@ -10,36 +10,38 @@ $translateY: ($height-icon / 2);
 $translateX: 0;
 
 #hamburger-icon {
-  width:$width-line;
-  height:$height-icon;
-  position:relative;
-  display:block;
-  transition: all $transition-time;
-    -webkit-transition: all $transition-time;
-    -moz-transition: all $transition-time;
-  
-  .line {
-    display:block;
-    background:$alt-accent;
-    width:$width-line;
-    height:$height-line;
-    position:absolute;
-    left:0;
-    border-radius:($height-line / 2);
+    width: $width-line;
+    height: $height-icon;
+    position: relative;
+    display: block;
     transition: all $transition-time;
     -webkit-transition: all $transition-time;
     -moz-transition: all $transition-time;
-    
-    &.line-1 {
-      top:0;
-    }
-    &.line-2 {
-      top:50%;
-    }
-    &.line-3 {
-      top:100%;
+
+    .line {
+        display: block;
+        background: $alt-accent;
+        width: $width-line;
+        height: $height-line;
+        position: absolute;
+        left: 0;
+        border-radius: ($height-line / 2);
+        transition: all $transition-time;
+        -webkit-transition: all $transition-time;
+        -moz-transition: all $transition-time;
+
+        &.line-1 {
+            top: 0;
+        }
+
+        &.line-2 {
+            top: 50%;
+        }
+
+        &.line-3 {
+            top: 100%;
+        }
     }
-  }
 }
 
 .filter-header.active {
@@ -48,9 +50,11 @@ $translateX: 0;
         -webkit-transform: translateY($translateY) translateX($translateX) rotate($rotation);
         -moz-transform: translateY($translateY) translateX($translateX) rotate($rotation);
     }
+
     .line-2 {
-        opacity:0;
+        opacity: 0;
     }
+
     .line-3 {
         transform: translateY($translateY * -1) translateX($translateX) rotate($rotation * -1);
         -webkit-transform: translateY($translateY * -1) translateX($translateX) rotate($rotation * -1);
@@ -61,5 +65,5 @@ $translateX: 0;
 .filter-header:hover #hamburger-icon {
     transform: scale(1.1);
     -webkit-transform: scale(1.1);
-        -moz-transform: scale(1.1);
+    -moz-transform: scale(1.1);
 }
\ No newline at end of file
diff --git a/src/client/views/search/NaviconButton.tsx b/src/client/views/search/NaviconButton.tsx
index e319b945a..3fa36b163 100644
--- a/src/client/views/search/NaviconButton.tsx
+++ b/src/client/views/search/NaviconButton.tsx
@@ -10,14 +10,14 @@ export interface NaviconProps{
 
 export class NaviconButton extends React.Component<NaviconProps> {
 
-    @observable ref: React.RefObject<HTMLAnchorElement> = React.createRef();
+    @observable private _ref: React.RefObject<HTMLAnchorElement> = React.createRef();
 
     componentDidMount = () => {
         let that = this;
-        if(this.ref.current){this.ref.current.addEventListener("click", function(e) {
+        if(this._ref.current){this._ref.current.addEventListener("click", function(e) {
             e.preventDefault();
-            if(that.ref.current){
-                that.ref.current.classList.toggle('active');
+            if(that._ref.current){
+                that._ref.current.classList.toggle('active');
                 return false;
             }
         });}
@@ -25,7 +25,7 @@ export class NaviconButton extends React.Component<NaviconProps> {
 
     render() {
         return (
-            <a id="hamburger-icon" href="#" ref = {this.ref} title="Menu">
+            <a id="hamburger-icon" href="#" ref = {this._ref} title="Menu">
                 <span className="line line-1"></span>
                 <span className="line line-2"></span>
                 <span className="line line-3"></span>
diff --git a/src/client/views/search/SearchBox.scss b/src/client/views/search/SearchBox.scss
index d94edba79..e570484e4 100644
--- a/src/client/views/search/SearchBox.scss
+++ b/src/client/views/search/SearchBox.scss
@@ -8,170 +8,54 @@
     align-items: center;
     padding-left: 2px;
     padding-right: 2px;
-
-    .searchBox-input {
-        width: 130px;
-        -webkit-transition: width 0.4s;
-        transition: width 0.4s;
-        align-self: stretch;
-    }
-
-    .searchBox-input:focus {
-        width: 500px;
-        outline: 3px solid lightblue;
-    }
+    // padding: 2px;
 
     .searchBox-barChild {
-        flex: 0 1 auto;
-        margin-left: 2px;
-        margin-right: 2px;
-    }
-
-    .searchBox-filter {
-        align-self: stretch;
-    }
-
-}
-
-.filter-title {
-    font-size: 18;
-    text-transform: uppercase;
-    margin-top: 10px;
-    margin-bottom: 10px;
-    -webkit-transition: all 0.2s ease-in-out;
-    -moz-transition: all 0.2s ease-in-out;
-    -o-transition: all 0.2s ease-in-out;
-    transition: all 0.2s ease-in-out;
-}
-
-.searchBox-results {
-    margin-left: 27px; //Is there a better way to do this?
-}
-
-.filter-form {
-    padding: 25px;
-    width: 600px;
-    background: $dark-color;
-    position: relative;
-    right: 1px;
-    color: $light-color;
-    flex-direction: column;
-    display: inline-block;
-    transform-origin: top;
-    overflow: auto;
-
-    .filter-header {
-        display: flex;
-        align-items: center;
-        margin-bottom: 10px;
-    }
-
-    .filter-header:hover .filter-title {
-        transform: scale(1.05);
-    }
-
-    .filter-panel {
-        max-height: 0px;
-        width: 100%;
-        overflow: hidden;
-        opacity: 0;
-        transform-origin: top;
-        -webkit-transition: all 0.2s ease-in-out;
-        -moz-transition: all 0.2s ease-in-out;
-        -o-transition: all 0.2s ease-in-out;
-        transition: all 0.2s ease-in-out;
-    }
 
-    .close-icon {
-        width: 20%;
-        opacity: .6;
-        position: relative;
-        display: inline-block;
-
-        .line {
-            display: block;
-            background: $alt-accent;
-            width: $width-line;
-            height: $height-line;
-            position: absolute;
-            right: 0;
-            border-radius: ($height-line / 2);
-
-            &.line-1 {
-                transform: rotate(45deg);
-                top: 45%;
-            }
-
-            &.line-2 {
-                transform: rotate(-45deg);
-                top: 45%;
-            }
+        &.searchBox-collection {
+            flex: 0 1 auto;
+            margin-left: 2px;
+            margin-right: 2px
         }
 
+        &.searchBox-input {
+            width: 130px;
+            -webkit-transition: width 0.4s;
+            transition: width 0.4s;
+            align-self: stretch;
+            margin-left: 2px;
+            margin-right: 2px
+        }
 
-    }
+        .searchBox-input:focus {
+            width: 500px;
+            outline: 3px solid lightblue;
+        }
 
-    .close-icon:hover {
-        opacity: 1;
+        &.searchBox-filter {
+            align-self: stretch;
+            margin-left: 2px;
+            margin-right: 2px
+        }
     }
 }
 
-#header {
-    text-transform: uppercase;
-    letter-spacing: 2px;
-    font-size: 25;
-    width: 80%;
-}
-
 .searchBox-results {
+    margin-left: 27px;
     top: 300px;
     display: flex;
     flex-direction: column;
     margin-right: 72px;
-}
-
-.filter-collection {
-    display: inline-block;
-    width: 100%;
-}
-
-.field-title {
-    color: $light-color;
-    text-transform: uppercase;
-    margin-top: 5px;
-    margin-bottom: 5px;
-}
 
-.filter-buttons {
-    border-color: rgba(178, 206, 248, .2); // $darker-alt-accent
-    border-top-style: solid;
-    padding-top: 10px;
-}
-
-.filter-div {
-    margin-top: 10px;
-    margin-bottom: 10px;
-    display: block;
-    width: 100%;
-    border-color: rgba(178, 206, 248, .2); // $darker-alt-accent
-    border-top-style: solid;
-}
-
-.collection-title {
-    color: $light-color;
-    text-transform: uppercase;
-    margin-top: 5px;
-    margin-bottom: 5px;
-}
-
-.no-result {
-    width: 500px;
-    background: $light-color-secondary;
-    border-color: $intermediate-color;
-    border-bottom-style: solid;
-    padding: 10px;
-    height: 50px;
-    text-transform: uppercase;
-    text-align: left;
-    font-weight: bold;
+    .no-result {
+        width: 500px;
+        background: $light-color-secondary;
+        border-color: $intermediate-color;
+        border-bottom-style: solid;
+        padding: 10px;
+        height: 50px;
+        text-transform: uppercase;
+        text-align: left;
+        font-weight: bold;
+    }
 }
\ No newline at end of file
diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
index 07e7496cf..1fc777a8c 100644
--- a/src/client/views/search/SearchBox.tsx
+++ b/src/client/views/search/SearchBox.tsx
@@ -25,6 +25,7 @@ import { CollectionFilters } from './CollectionFilters';
 import { NaviconButton } from './NaviconButton';
 import * as $ from 'jquery';
 import * as anime from 'animejs';
+import "./FilterBox.scss";
 
 library.add(faTimes);
 
@@ -38,23 +39,22 @@ export enum Keys {
 export class SearchBox extends React.Component {
 
     static Instance: SearchBox;
+    public _allIcons: string[] = [DocTypes.AUDIO, DocTypes.COL, DocTypes.HIST, DocTypes.IMG, DocTypes.LINK, DocTypes.PDF, DocTypes.TEXT, DocTypes.VID, DocTypes.WEB];
 
-    @observable _searchString: string = "";
+    @observable private _searchString: string = "";
     //if true, any keywords can be used. if false, all keywords are required.
-    @observable _basicWordStatus: boolean = true;
+    @observable private _basicWordStatus: boolean = true;
     @observable private _filterOpen: boolean = false;
     @observable private _resultsOpen: boolean = false;
     @observable private _results: Doc[] = [];
     @observable private _openNoResults: boolean = false;
-    allIcons: string[] = [DocTypes.AUDIO, DocTypes.COL, DocTypes.HIST, DocTypes.IMG, DocTypes.LINK, DocTypes.PDF, DocTypes.TEXT, DocTypes.VID, DocTypes.WEB];
-    @observable _icons: string[] = this.allIcons;
-    @observable _selectedTypes: any[] = [];
-    @observable titleFieldStatus: boolean = true;
-    @observable authorFieldStatus: boolean = true;
-    @observable dataFieldStatus: boolean = true;
-    @observable collectionStatus = false;
-    @observable collectionSelfStatus = true;
-    @observable collectionParentStatus = true;
+    @observable private _icons: string[] = this._allIcons;
+    @observable private _titleFieldStatus: boolean = true;
+    @observable private _authorFieldStatus: boolean = true;
+    @observable private _dataFieldStatus: boolean = true;
+    @observable private _collectionStatus = false;
+    @observable private _collectionSelfStatus = true;
+    @observable private _collectionParentStatus = true;
     @observable private _wordStatusOpen: boolean = false;
     @observable private _typeOpen: boolean = false;
     @observable private _colOpen: boolean = false;
@@ -180,19 +180,19 @@ export class SearchBox extends React.Component {
     applyBasicFieldFilters(query: string) {
         let finalQuery = "";
 
-        if (this.titleFieldStatus) {
+        if (this._titleFieldStatus) {
             finalQuery = finalQuery + this.basicFieldFilters(query, Keys.TITLE);
         }
-        if (this.authorFieldStatus) {
+        if (this._authorFieldStatus) {
             finalQuery = finalQuery + this.basicFieldFilters(query, Keys.AUTHOR);
         }
-        if (this.dataFieldStatus) {
+        if (this._dataFieldStatus) {
             finalQuery = finalQuery + this.basicFieldFilters(query, Keys.DATA);
         }
         return finalQuery;
     }
 
-    get fieldFiltersApplied() { return !(this.dataFieldStatus && this.authorFieldStatus && this.titleFieldStatus); }
+    get fieldFiltersApplied() { return !(this._dataFieldStatus && this._authorFieldStatus && this._titleFieldStatus); }
 
     //TODO: basically all of this
     //gets all of the collections of all the docviews that are selected
@@ -238,7 +238,7 @@ export class SearchBox extends React.Component {
         }
 
         //if should be searched in a specific collection
-        if (this.collectionStatus) {
+        if (this._collectionStatus) {
             query = this.addCollectionFilter(query);
             query = query.replace(/\s+/g, ' ').trim();
         }
@@ -448,29 +448,29 @@ export class SearchBox extends React.Component {
     toggleWordStatusOpen() { this._wordStatusOpen = !this._wordStatusOpen; }
 
     @action.bound
-    updateTitleStatus(newStat: boolean) { this.titleFieldStatus = newStat; }
+    updateTitleStatus(newStat: boolean) { this._titleFieldStatus = newStat; }
 
     @action.bound
-    updateAuthorStatus(newStat: boolean) { this.authorFieldStatus = newStat; }
+    updateAuthorStatus(newStat: boolean) { this._authorFieldStatus = newStat; }
 
     @action.bound
-    updateDataStatus(newStat: boolean) { this.dataFieldStatus = newStat; }
+    updateDataStatus(newStat: boolean) { this._dataFieldStatus = newStat; }
 
     @action.bound
-    updateCollectionStatus(newStat: boolean) { this.collectionStatus = newStat; }
+    updateCollectionStatus(newStat: boolean) { this._collectionStatus = newStat; }
 
     @action.bound
-    updateSelfCollectionStatus(newStat: boolean) { this.collectionSelfStatus = newStat; }
+    updateSelfCollectionStatus(newStat: boolean) { this._collectionSelfStatus = newStat; }
 
     @action.bound
-    updateParentCollectionStatus(newStat: boolean) { this.collectionParentStatus = newStat; }
+    updateParentCollectionStatus(newStat: boolean) { this._collectionParentStatus = newStat; }
 
-    getCollectionStatus() { return this.collectionStatus; }
-    getSelfCollectionStatus() { return this.collectionSelfStatus; }
-    getParentCollectionStatus() { return this.collectionParentStatus; }
-    getTitleStatus() { return this.titleFieldStatus; }
-    getAuthorStatus() { return this.authorFieldStatus; }
-    getDataStatus() { return this.dataFieldStatus; }
+    getCollectionStatus() { return this._collectionStatus; }
+    getSelfCollectionStatus() { return this._collectionSelfStatus; }
+    getParentCollectionStatus() { return this._collectionParentStatus; }
+    getTitleStatus() { return this._titleFieldStatus; }
+    getAuthorStatus() { return this._authorFieldStatus; }
+    getDataStatus() { return this._dataFieldStatus; }
 
     // Useful queries:
     // Delegates of a document: {!join from=id to=proto_i}id:{protoId}
@@ -480,8 +480,8 @@ export class SearchBox extends React.Component {
             <div>
                 <div className="searchBox-container">
                     <div className="searchBox-bar">
-                        <span onPointerDown={SetupDrag(this.collectionRef, this.startDragCollection)} ref={this.collectionRef}>
-                            <FontAwesomeIcon icon="object-group" className="searchBox-barChild" size="lg" />
+                        <span className="searchBox-barChild searchBox-collection" onPointerDown={SetupDrag(this.collectionRef, this.startDragCollection)} ref={this.collectionRef}>
+                            <FontAwesomeIcon icon="object-group" size="lg" />
                         </span>
                         <input value={this._searchString} onChange={this.onChange} type="text" placeholder="Search..."
                             className="searchBox-barChild searchBox-input" onPointerDown={this.openSearch} onKeyPress={this.enter}
@@ -500,13 +500,13 @@ export class SearchBox extends React.Component {
                 </div>
                 {this._filterOpen ? (
                     <div className="filter-form" onPointerDown={this.stopProp} id="filter-form" style={this._filterOpen ? { display: "flex" } : { display: "none" }}>
-                        <div style={{ display: "flex", width: "100%" }}>
+                        <div className = "top-filter-header" style={{ display: "flex", width: "100%" }}>
                             <div id="header">Filter Search Results</div>
                             <div className="close-icon" onClick={this.closeFilter}>
                                 <span className="line line-1"></span>
                                 <span className="line line-2"></span></div>
                         </div>
-                        <div>
+                        <div className = "filter-options">
                             <div className="filter-div">
                                 <div className="filter-header">
                                     <div className='filter-title words'>Required words</div>
@@ -531,7 +531,7 @@ export class SearchBox extends React.Component {
                                 </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>
+                                    collectionStatus={this._collectionStatus} collectionParentStatus={this._collectionParentStatus} collectionSelfStatus={this._collectionSelfStatus} /></div>
                             </div>
                             <div className="filter-div">
                                 <div className="filter-header">
@@ -539,12 +539,12 @@ export class SearchBox extends React.Component {
                                     <div style={{ marginLeft: "auto" }}><NaviconButton onClick={this.toggleFieldOpen} /></div>
                                 </div>
                                 <div className="filter-panel"><FieldFilters
-                                    titleFieldStatus={this.titleFieldStatus} dataFieldStatus={this.dataFieldStatus} authorFieldStatus={this.authorFieldStatus}
+                                    titleFieldStatus={this._titleFieldStatus} dataFieldStatus={this._dataFieldStatus} authorFieldStatus={this._authorFieldStatus}
                                     updateAuthorStatus={this.updateAuthorStatus} updateDataStatus={this.updateDataStatus} updateTitleStatus={this.updateTitleStatus} /> </div>
                             </div>
                         </div>
                         <div className="filter-buttons" style={{ display: "flex", justifyContent: "space-around" }}>
-                            <button className="minimizwe-filter" onClick={this.minimizeAll}>Minimize All</button>
+                            <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>
diff --git a/src/client/views/search/SearchItem.scss b/src/client/views/search/SearchItem.scss
index c82d4bb06..9859d6293 100644
--- a/src/client/views/search/SearchItem.scss
+++ b/src/client/views/search/SearchItem.scss
@@ -1,149 +1,151 @@
 @import "../globalCssVariables";
 
-.search-item {
-    width: 500px;
-    background: $light-color-secondary;
-    border-color: $intermediate-color;
-    border-bottom-style: solid;
-    padding: 10px;
-    height: 70px;
-}
-
-.search-info {
+.search-overview {
     display: flex;
+    flex-direction: row-reverse;
     justify-content: flex-end;
-    width: 40%;
-}
+    height: 70px;
 
-.main-search-info {
-    display: flex;
-    flex-direction: row;
-    width: 100%;
-}
-
-.search-item:hover {
-    transition: all 0.2s;
-    background: $lighter-alt-accent;
-}
-
-.search-title {
-    text-transform: uppercase;
-    text-align: left;
-    width: 80%;
-    font-weight: bold;
-}
-
-.link-container.item {
-    height: 26px;
-    width: 26px;
-    border-radius: 13px;
-    background: $dark-color;
-    color: $light-color-secondary;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin-right: 10px;
-    -webkit-transition: all 0.2s ease-in-out;
-    -moz-transition: all 0.2s ease-in-out;
-    -o-transition: all 0.2s ease-in-out;
-    transition: all 0.2s ease-in-out;
-    transform-origin: top right;
-    overflow: hidden;
-
-    .link-count {
-        opacity: 1;
-        position: absolute;
-        z-index: 1000;
-        -webkit-transition: opacity 0.2s ease-in-out;
-        -moz-transition: opacity 0.2s ease-in-out;
-        -o-transition: opacity 0.2s ease-in-out;
-        transition: opacity 0.2s ease-in-out;
+    .search-item {
+        width: 500px;
+        background: $light-color-secondary;
+        border-color: $intermediate-color;
+        border-bottom-style: solid;
+        padding: 10px;
+        height: 70px;
+
+        .main-search-info {
+            display: flex;
+            flex-direction: row;
+            width: 100%;
+
+            .search-title {
+                text-transform: uppercase;
+                text-align: left;
+                width: 80%;
+                font-weight: bold;
+            }
+
+            .search-info {
+                display: flex;
+                justify-content: flex-end;
+                width: 40%;
+
+                .link-container.item {
+                    height: 26px;
+                    width: 26px;
+                    border-radius: 13px;
+                    background: $dark-color;
+                    color: $light-color-secondary;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    right: 120px;
+                    -webkit-transition: all 0.2s ease-in-out;
+                    -moz-transition: all 0.2s ease-in-out;
+                    -o-transition: all 0.2s ease-in-out;
+                    transition: all 0.2s ease-in-out;
+                    transform-origin: top right;
+                    overflow: hidden;
+                    position: absolute;
+
+                    .link-count {
+                        opacity: 1;
+                        position: absolute;
+                        z-index: 1000;
+                        -webkit-transition: opacity 0.2s ease-in-out;
+                        -moz-transition: opacity 0.2s ease-in-out;
+                        -o-transition: opacity 0.2s ease-in-out;
+                        transition: opacity 0.2s ease-in-out;
+                    }
+
+                    .link-extended {
+                        opacity: 0;
+                        position: absolute;
+                        z-index: 500;
+                        overflow: hidden;
+                        -webkit-transition: opacity 0.2s ease-in-out;
+                        -moz-transition: opacity 0.2s ease-in-out;
+                        -o-transition: opacity 0.2s ease-in-out;
+                        transition: opacity 0.2s ease-in-out;
+                    }
+                }
+
+                .link-container.item:hover {
+                    width: 70px;
+                }
+
+                .link-container.item:hover .link-count {
+                    opacity: 0;
+                }
+
+                .link-container.item:hover .link-extended {
+                    opacity: 1;
+                }
+
+                .icon {
+                    // display: inline-block;
+                    // // align-items: right;
+                    // display: flex;
+                    position: absolute;
+
+                    .search-type {
+                        width: 25PX;
+                        height: 25PX;
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+                        position: relative;
+                        margin-right: 5px;
+                    }
+
+                    .search-type:hover+.search-label {
+                        opacity: 1;
+                    }
+
+                    .search-label {
+                        font-size: 10;
+                        padding: 5px;
+                        position: absolute;
+                        right: 0px;
+                        text-transform: capitalize;
+                        opacity: 0;
+                        -webkit-transition: opacity 0.2s ease-in-out;
+                        -moz-transition: opacity 0.2s ease-in-out;
+                        -o-transition: opacity 0.2s ease-in-out;
+                        transition: opacity 0.2s ease-in-out;
+                    }
+                }
+            }
+        }
     }
 
-    .link-extended {
-        opacity: 0;
-        position: absolute;
-        z-index: 500;
-        overflow: hidden;
-        -webkit-transition: opacity 0.2s ease-in-out;
-        -moz-transition: opacity 0.2s ease-in-out;
-        -o-transition: opacity 0.2s ease-in-out;
-        transition: opacity 0.2s ease-in-out;
+    .search-item:hover~.searchBox-instances,
+    .searchBox-instances:hover,
+    .searchBox-instances:active {
+        opacity: 1;
+        background: $lighter-alt-accent;
+        -webkit-transform: scale(1);
+        -ms-transform: scale(1);
+        transform: scale(1);
     }
-}
-
-.link-container.item:hover{
-    width: 70px;
-}
 
-.link-container.item:hover .link-count{
-    opacity: 0;
-}
-
-.link-container.item:hover .link-extended{
-    opacity: 1;
-}
+    .search-item:hover {
+        transition: all 0.2s;
+        background: $lighter-alt-accent;
+    }
 
-.search-type {
-    width: 25PX;
-    height: 25PX;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-
-.searchBox-instances {
-    float: left;
-    opacity: 1;
-    width: 150px;
-    transition: all 0.2s ease;
-    color: black;
-    transform-origin: top right;
-    -webkit-transform: scale(0);
-    -ms-transform: scale(0);
-    transform: scale(0);
-    height: 100%
-}
-
-.contexts.collection {
-    border-color: $darker-alt-accent;
-    border-bottom-style: solid;
-}
+    .searchBox-instances {
+        float: left;
+        opacity: 1;
+        width: 150px;
+        transition: all 0.2s ease;
+        color: black;
+        transform-origin: top right;
+        -webkit-transform: scale(0);
+        -ms-transform: scale(0);
+        transform: scale(0);
+        height: 100%
+    }
 
-.search-overview {
-    display: flex;
-    flex-direction: row-reverse;
-    justify-content: flex-end;
-    height: 70px;
-}
-
-.parents {
-    background: $lighter-alt-accent;
-    padding: 10px;
-}
-
-.search-item:hover~.searchBox-instances,
-.searchBox-instances:hover,
-.searchBox-instances:active {
-    opacity: 1;
-    background: $lighter-alt-accent;
-    -webkit-transform: scale(1);
-    -ms-transform: scale(1);
-    transform: scale(1);
-}
-
-.search-label{
-    text-align: right;
-    float: right;
-    text-transform: capitalize;
-    opacity: 0;
-    -webkit-transition: opacity 0.2s ease-in-out;
-    -moz-transition: opacity 0.2s ease-in-out;
-    -o-transition: opacity 0.2s ease-in-out;
-    transition: opacity 0.2s ease-in-out;
-}
-
-.search-type:hover +.search-label{
-    opacity: 1;
 }
\ No newline at end of file
diff --git a/src/client/views/search/SearchItem.tsx b/src/client/views/search/SearchItem.tsx
index fa9d58152..71ad9a5ee 100644
--- a/src/client/views/search/SearchItem.tsx
+++ b/src/client/views/search/SearchItem.tsx
@@ -17,6 +17,7 @@ import { CollectionViewType } from "../collections/CollectionBaseView";
 import { DocTypes } from "../../documents/Documents";
 import { SearchBox } from "./SearchBox";
 import { DocumentView } from "../nodes/DocumentView";
+import "./SelectorContextMenu.scss";
 
 export interface SearchItemProps {
     doc: Doc;
@@ -39,7 +40,6 @@ export class SelectorContextMenu extends React.Component<SearchItemProps> {
 
     constructor(props: SearchItemProps) {
         super(props);
-
         this.fetchDocuments();
     }
 
diff --git a/src/client/views/search/SelectorContextMenu.scss b/src/client/views/search/SelectorContextMenu.scss
new file mode 100644
index 000000000..49f77b9bf
--- /dev/null
+++ b/src/client/views/search/SelectorContextMenu.scss
@@ -0,0 +1,15 @@
+@import "../globalCssVariables";
+
+.parents {
+    background: $lighter-alt-accent;
+    padding: 10px;
+
+    .contexts {
+        text-transform: uppercase;
+    }
+
+    .collection {
+        border-color: $darker-alt-accent;
+        border-bottom-style: solid;
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/search/ToggleBar.tsx b/src/client/views/search/ToggleBar.tsx
index b1d22d38c..dbe16cbdb 100644
--- a/src/client/views/search/ToggleBar.tsx
+++ b/src/client/views/search/ToggleBar.tsx
@@ -18,15 +18,15 @@ export interface ToggleBarProps {
 export class ToggleBar extends React.Component<ToggleBarProps>{
     static Instance: ToggleBar;
 
-    @observable forwardTimeline: anime.AnimeTimelineInstance;
-    @observable _toggleButton: React.RefObject<HTMLDivElement>;
-    @observable _originalStatus: boolean = this.props.originalStatus;
+    @observable private _forwardTimeline: anime.AnimeTimelineInstance;
+    @observable private _toggleButton: React.RefObject<HTMLDivElement>;
+    @observable private _originalStatus: boolean = this.props.originalStatus;
 
     constructor(props: ToggleBarProps) {
         super(props);
         ToggleBar.Instance = this;
         this._toggleButton = React.createRef();
-        this.forwardTimeline = anime.timeline({
+        this._forwardTimeline = anime.timeline({
             loop: false,
             autoplay: false,
             direction: "reverse",
@@ -38,7 +38,7 @@ export class ToggleBar extends React.Component<ToggleBarProps>{
         let totalWidth = 265;
 
         if (this._originalStatus) {
-            this.forwardTimeline.add({
+            this._forwardTimeline.add({
                 targets: this._toggleButton.current,
                 translateX: totalWidth,
                 easing: "easeInOutQuad",
@@ -46,7 +46,7 @@ export class ToggleBar extends React.Component<ToggleBarProps>{
             });
         }
         else {
-            this.forwardTimeline.add({
+            this._forwardTimeline.add({
                 targets: this._toggleButton.current,
                 translateX: -totalWidth,
                 easing: "easeInOutQuad",
@@ -57,16 +57,16 @@ export class ToggleBar extends React.Component<ToggleBarProps>{
 
     @action.bound
     onclick() {
-        this.forwardTimeline.play();
-        this.forwardTimeline.reverse();
+        this._forwardTimeline.play();
+        this._forwardTimeline.reverse();
         this.props.handleChange();
     }
 
     @action.bound
     public resetToggle = () => {
         if (!this.props.getStatus()) {
-            this.forwardTimeline.play();
-            this.forwardTimeline.reverse();
+            this._forwardTimeline.play();
+            this._forwardTimeline.reverse();
             this.props.handleChange();
         }
     }
-- 
cgit v1.2.3-70-g09d2

