From 639dee759e23083d269ab2a66f30e669b46a9aaf Mon Sep 17 00:00:00 2001
From: madelinegr <monika_hedman@brown.edu>
Date: Thu, 13 Jun 2019 18:41:18 -0400
Subject: honestly no idea what is going on

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

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

diff --git a/src/client/views/search/CheckBox.tsx b/src/client/views/search/CheckBox.tsx
new file mode 100644
index 000000000..8b5f7d7c1
--- /dev/null
+++ b/src/client/views/search/CheckBox.tsx
@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { observer } from 'mobx-react';
+import { observable, action, runInAction } from 'mobx';
+import "./CheckBox.scss";
+
+interface CheckBoxProps {
+    originalStatus: boolean;
+    updateStatus(newStatus: boolean): void;
+    title: string;
+}
+
+@observer
+export class CheckBox extends React.Component<CheckBoxProps>{
+    @observable _status: boolean;
+
+    constructor(props: CheckBoxProps) {
+        super(props);
+
+        this._status = this.props.originalStatus;
+    }
+
+    onClick = () => {
+        this._status = !this._status;
+        this.props.updateStatus(this._status);
+    }
+
+    render() {
+        return (
+            <div className="checkbox">
+                <div className="check-box">
+                    <svg viewBox="10 10 20 20">
+                        <path className="checkmark" d="M14.1 27.2l7.1 7.2 16.7-16.8" />
+                    </svg>
+                </div>
+                <div className="checkbox-title">{this.props.title}</div>
+            </div>
+        )
+    }
+
+}
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2


From f3f76fc25a9e39d4c08618fb601b5e66ce62e235 Mon Sep 17 00:00:00 2001
From: madelinegr <monika_hedman@brown.edu>
Date: Tue, 18 Jun 2019 18:24:51 -0400
Subject: end of day 6/18

---
 src/client/views/search/CheckBox.scss | 19 ++++++++++--
 src/client/views/search/CheckBox.tsx  | 58 +++++++++++++++++++++++++++++++----
 2 files changed, 69 insertions(+), 8 deletions(-)

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

diff --git a/src/client/views/search/CheckBox.scss b/src/client/views/search/CheckBox.scss
index 8eee9176b..f7652d830 100644
--- a/src/client/views/search/CheckBox.scss
+++ b/src/client/views/search/CheckBox.scss
@@ -1,8 +1,15 @@
-@import "../globalCssVariables";    
+@import "../globalCssVariables";
 
 .checkbox {
     display: flex;
 
+    .outer {
+        display: flex;
+        position: relative;
+        justify-content: center;
+        align-items: center;
+    }
+
     .check-box {
         z-index: 900;
         position: relative;
@@ -15,13 +22,20 @@
         border-width: 2px;
     }
 
+    .check-container {
+        width: 40px;
+        height: 40px;
+        position: absolute;
+        z-index: 1000;
+    }
+
     .box:hover {
         background-color: $intermediate-color;
     }
 
     .checkmark {
         z-index: 1000;
-        position: relative;
+        position: absolute;
         fill-opacity: 0;
         stroke-width: 4px;
         stroke: white;
@@ -31,4 +45,5 @@
 
 .checkbox-title {
     text-transform: uppercase;
+    margin-left: 10px;
 }
\ No newline at end of file
diff --git a/src/client/views/search/CheckBox.tsx b/src/client/views/search/CheckBox.tsx
index 8b5f7d7c1..ace479c70 100644
--- a/src/client/views/search/CheckBox.tsx
+++ b/src/client/views/search/CheckBox.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import { observer } from 'mobx-react';
 import { observable, action, runInAction } from 'mobx';
 import "./CheckBox.scss";
+import * as anime from 'animejs';
 
 interface CheckBoxProps {
     originalStatus: boolean;
@@ -11,27 +12,72 @@ 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;
+
 
     constructor(props: CheckBoxProps) {
         super(props);
-
         this._status = this.props.originalStatus;
+        this.checkRef = React.createRef();
+
+        this.checkTimeline = anime.timeline({
+            loop: false,
+            autoplay: false,
+            direction: "normal",
+        });this.uncheckTimeline = anime.timeline({
+            loop: false,
+            autoplay: false,
+            direction: "normal",
+        });
+    }
+
+    componentDidMount = () => {
+        this.uncheckTimeline.add({
+            targets: this.checkRef.current,
+            easing: "easeInOutQuad",
+            duration: 500,
+            opacity: 1 ,
+        });
+        this.checkTimeline.add({
+            targets: this.checkRef.current,
+            easing: "easeInOutQuad",
+            duration: 500,
+            strokeDashoffset: [anime.setDashoffset, 0],
+            opacity: 1
+        });
     }
 
+    @action.bound
     onClick = () => {
-        this._status = !this._status;
         this.props.updateStatus(this._status);
+
+        if(this._status){
+            this.uncheckTimeline.play();
+            this.uncheckTimeline.restart();
+        }
+        else{
+            this.checkTimeline.play();
+            this.checkTimeline.restart();
+
+        }
+        this._status = !this._status;
     }
 
     render() {
         return (
-            <div className="checkbox">
-                <div className="check-box">
-                    <svg viewBox="10 10 20 20">
-                        <path className="checkmark" d="M14.1 27.2l7.1 7.2 16.7-16.8" />
+            <div className="checkbox" onClick = {this.onClick}>
+            <div className = "outer">
+                <div className="check-container">
+                    <svg viewBox="0 12 40 40">
+                        <path ref = {this.checkRef} className="checkmark" d="M14.1 27.2l7.1 7.2 16.7-18" />
                     </svg>
                 </div>
+                <div className="check-box"/>
+                </div>
                 <div className="checkbox-title">{this.props.title}</div>
             </div>
         )
-- 
cgit v1.2.3-70-g09d2


From 3f393bd6579f4d37ff2ffc7791ce707cedf3763f Mon Sep 17 00:00:00 2001
From: Monika <monika_hedman@brown.edu>
Date: Wed, 19 Jun 2019 10:46:05 -0400
Subject: testin push

---
 src/client/views/search/CheckBox.tsx | 2 ++
 1 file changed, 2 insertions(+)

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

diff --git a/src/client/views/search/CheckBox.tsx b/src/client/views/search/CheckBox.tsx
index ace479c70..94fd3503d 100644
--- a/src/client/views/search/CheckBox.tsx
+++ b/src/client/views/search/CheckBox.tsx
@@ -35,6 +35,8 @@ export class CheckBox extends React.Component<CheckBoxProps>{
         });
     }
 
+    //testiing
+
     componentDidMount = () => {
         this.uncheckTimeline.add({
             targets: this.checkRef.current,
-- 
cgit v1.2.3-70-g09d2


From 3e7b7ea48e8ee6b4f2059f54e7cbc81c19ef4bef Mon Sep 17 00:00:00 2001
From: Monika <monika_hedman@brown.edu>
Date: Wed, 19 Jun 2019 12:44:35 -0400
Subject: filtering by basic key working nicely

---
 src/client/views/search/CheckBox.tsx     |   8 ++-
 src/client/views/search/FieldFilters.tsx |  29 +++++++++
 src/client/views/search/SearchBox.scss   |  12 +++-
 src/client/views/search/SearchBox.tsx    | 100 ++++++++++++++++++++++++++-----
 src/client/views/search/ToggleBar.scss   |   4 --
 5 files changed, 129 insertions(+), 24 deletions(-)
 create mode 100644 src/client/views/search/FieldFilters.tsx

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

diff --git a/src/client/views/search/CheckBox.tsx b/src/client/views/search/CheckBox.tsx
index 94fd3503d..fc1d4005e 100644
--- a/src/client/views/search/CheckBox.tsx
+++ b/src/client/views/search/CheckBox.tsx
@@ -42,7 +42,7 @@ export class CheckBox extends React.Component<CheckBoxProps>{
             targets: this.checkRef.current,
             easing: "easeInOutQuad",
             duration: 500,
-            opacity: 1 ,
+            opacity: 0 ,
         });
         this.checkTimeline.add({
             targets: this.checkRef.current,
@@ -51,11 +51,15 @@ export class CheckBox extends React.Component<CheckBoxProps>{
             strokeDashoffset: [anime.setDashoffset, 0],
             opacity: 1
         });
+
+        if(this.props.originalStatus){
+            this.checkTimeline.play();
+        }
     }
 
     @action.bound
     onClick = () => {
-        this.props.updateStatus(this._status);
+        this.props.updateStatus(!this._status);
 
         if(this._status){
             this.uncheckTimeline.play();
diff --git a/src/client/views/search/FieldFilters.tsx b/src/client/views/search/FieldFilters.tsx
new file mode 100644
index 000000000..e84137d69
--- /dev/null
+++ b/src/client/views/search/FieldFilters.tsx
@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { observer } from 'mobx-react';
+import { observable, action, runInAction } from 'mobx';
+import "./SearchBox.scss";
+import { CheckBox } from './CheckBox';
+import { Keys } from './SearchBox';
+import "./SearchBox.scss";
+
+export interface FieldFilterProps {
+    titleFieldStatus: boolean;
+    dataFieldStatus: boolean;
+    authorFieldStatus: boolean;
+    updateTitleStatus(stat: boolean): void;
+    updateAuthorStatus(stat: boolean): void;
+    updateDataStatus(stat: boolean): void;
+}
+
+export class FieldFilters extends React.Component<FieldFilterProps> {
+    render() {
+        return (
+            <div>
+                <div className="filter field-title">Filter by Basic Keys</div>
+                <CheckBox originalStatus={this.props.titleFieldStatus} updateStatus={this.props.updateTitleStatus} title={Keys.TITLE} />
+                <CheckBox originalStatus={this.props.authorFieldStatus} updateStatus={this.props.updateAuthorStatus} title={Keys.AUTHOR} />
+                <CheckBox originalStatus={this.props.dataFieldStatus} updateStatus={this.props.updateDataStatus} title={Keys.DATA} />
+            </div>
+        )
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/search/SearchBox.scss b/src/client/views/search/SearchBox.scss
index 786b76a5b..2b52112e0 100644
--- a/src/client/views/search/SearchBox.scss
+++ b/src/client/views/search/SearchBox.scss
@@ -38,11 +38,14 @@
 
 .filter-form {
     background: $dark-color;
-    height: 400px;
+    // height: 400px;
+    height: auto;
+    overflow: auto;
     position: relative;
     right: 1px;
     color: $light-color;
     flex-direction: column;
+    display: inline-block;
 }
 
 #filter{
@@ -68,8 +71,11 @@
     height: 20px;
 }
 
-.where-in-doc{
-    height: 20px;
+.field-title {
+    color: $light-color;
+    text-transform: uppercase;
+    margin-top: 5px;
+    margin-bottom: 5px;
 }
 
 .type-of-node{
diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
index 755d6a14c..a25fff32d 100644
--- a/src/client/views/search/SearchBox.tsx
+++ b/src/client/views/search/SearchBox.tsx
@@ -23,9 +23,12 @@ import { ToggleBar } from './ToggleBar';
 import { IconBar } from './IconBar';
 import { type } from 'os';
 import { CheckBox } from './CheckBox';
+import { FieldFilters } from './FieldFilters';
 
 export enum Keys {
     TITLE = "title",
+    AUTHOR = "author",
+    DATA = "data"
 }
 
 @observer
@@ -39,11 +42,13 @@ export class SearchBox extends React.Component {
     @observable private _filterOpen: boolean = false;
     @observable private _resultsOpen: boolean = false;
     @observable private _results: Doc[] = [];
-    @observable filterBoxStatus: boolean = false;
     @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;
 
     constructor(props: Readonly<{}>) {
         super(props);
@@ -58,7 +63,7 @@ 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){
+        if (!this._resultsOpen && !this._filterOpen) {
             setTimeout(this.clearSearchQuery, 30000);
         }
     }
@@ -69,6 +74,7 @@ export class SearchBox extends React.Component {
         IconBar.Instance.selectAll();
     }
 
+
     @action.bound
     onChange(e: React.ChangeEvent<HTMLInputElement>) {
         this._searchString = e.target.value;
@@ -85,27 +91,80 @@ export class SearchBox extends React.Component {
         this._results = [];
     }
 
+    basicRequireWords(query: string): string {
+        let oldWords = query.split(" ");
+        let newWords: string[] = [];
+        oldWords.forEach(word => {
+            let newWrd = "+" + word;
+            newWords.push(newWrd);
+        });
+        query = newWords.join(" ");
+
+        return query;
+    }
+
+    basicFieldFilters(query: string, type: string): string {
+        let oldWords = query.split(" ");
+        let mod = "";
+
+        if(type === Keys.AUTHOR){
+            mod = " author_t:";
+        }if(type === Keys.DATA){
+            //TODO
+        }if(type === Keys.TITLE){
+            mod = " title_t:";
+        }
+
+        let newWords:string[] = [];
+        oldWords.forEach(word => {
+            let newWrd = mod + word;
+            newWords.push(newWrd);
+        });
+
+        query = newWords.join(" ");
+
+        return query;
+    }
+
+    applyBasicFieldFilters(query: string) {
+        let finalQuery = "";
+
+        if(this.titleFieldStatus){
+            finalQuery = finalQuery + this.basicFieldFilters(query, Keys.TITLE);
+        }
+        if(this.authorFieldStatus){
+            finalQuery = finalQuery + this.basicFieldFilters(query, Keys.AUTHOR);
+        }
+        if(this.dataFieldStatus){
+            finalQuery = finalQuery + this.basicFieldFilters(query, Keys.DATA);
+        }
+        return finalQuery;
+    }
+
+    get fieldFiltersApplied(){return !(this.dataFieldStatus && this.authorFieldStatus && this.titleFieldStatus);}
+
     @action
     submitSearch = async () => {
         let query = this._searchString;
         let results: Doc[];
 
+        //if this is true, then not all of the field boxes are checked
+        //TODO: data
+        if(this.fieldFiltersApplied){
+            query = this.applyBasicFieldFilters(query);
+        }
+
         //if this._wordstatus is false, all words are required and a + is added before each
         if (!this._basicWordStatus) {
-            let oldWords = query.split(" ");
-            let newWords: string[] = [];
-            oldWords.forEach(word => {
-                let newWrd = "+" + word;
-                newWords.push(newWrd);
-            });
-            query = newWords.join(" ");
+            query = this.basicRequireWords(query);
         }
 
+        query = query.replace(/\s+/g, ' ').trim()
+
         //if there is no query there should be no result
         if (query === "") {
             results = [];
         }
-
         else {
             //gets json result into a list of documents that can be used
             results = await this.getResults(query);
@@ -271,9 +330,19 @@ export class SearchBox extends React.Component {
         this._pointerTime = e.timeStamp;
     }
 
-    //TODO: to be done with checkmark
-    updateCheckStatus(newStat: boolean) {
-        console.log("updating!")
+    @action.bound
+    updateTitleStatus(newStat: boolean) {
+        this.titleFieldStatus = newStat;
+    }
+
+    @action.bound
+    updateAuthorStatus(newStat: boolean) {
+        this.authorFieldStatus = newStat;
+    }
+    
+    @action.bound
+    updateDataStatus(newStat: boolean) {
+        this.dataFieldStatus = newStat;
     }
 
     // Useful queries:
@@ -310,13 +379,14 @@ export class SearchBox extends React.Component {
                                 <ToggleBar originalStatus={this._basicWordStatus} optionOne={"Include Any Keywords"} optionTwo={"Include All Keywords"} />
                             </div>
                             <div className="type-of-node filter-div">
-                                <IconBar/>
+                                <IconBar />
                             </div>
                             <div className="filter-collection filter-div">
                                 temp for filtering by collection
                             </div>
                             <div className="where-in-doc filter-div">
-                                <CheckBox originalStatus={true} updateStatus={this.updateCheckStatus} title={Keys.TITLE} />
+                                <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>
diff --git a/src/client/views/search/ToggleBar.scss b/src/client/views/search/ToggleBar.scss
index 68f0c9c2b..3a262709d 100644
--- a/src/client/views/search/ToggleBar.scss
+++ b/src/client/views/search/ToggleBar.scss
@@ -32,9 +32,5 @@
         height: 100%;
         border-radius: 10px;
         background-color: $light-color;
-        -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
-- 
cgit v1.2.3-70-g09d2


From 1980d7009606bef0fb52104db0856b691c12bb9e Mon Sep 17 00:00:00 2001
From: Monika <monika_hedman@brown.edu>
Date: Wed, 19 Jun 2019 13:48:31 -0400
Subject: checkboxes working and clearing

---
 src/client/views/search/CheckBox.tsx     | 63 +++++++++++++++++++++++---------
 src/client/views/search/FieldFilters.tsx | 23 ++++++++++--
 src/client/views/search/SearchBox.tsx    |  2 +-
 3 files changed, 66 insertions(+), 22 deletions(-)

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

diff --git a/src/client/views/search/CheckBox.tsx b/src/client/views/search/CheckBox.tsx
index fc1d4005e..163507ec3 100644
--- a/src/client/views/search/CheckBox.tsx
+++ b/src/client/views/search/CheckBox.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { observer } from 'mobx-react';
-import { observable, action, runInAction } from 'mobx';
+import { observable, action, runInAction, IReactionDisposer, reaction } from 'mobx';
 import "./CheckBox.scss";
 import * as anime from 'animejs';
 
@@ -8,6 +8,8 @@ interface CheckBoxProps {
     originalStatus: boolean;
     updateStatus(newStatus: boolean): void;
     title: string;
+    parent: any;
+    numCount: number;
 }
 
 @observer
@@ -17,6 +19,7 @@ export class CheckBox extends React.Component<CheckBoxProps>{
     @observable uncheckTimeline: anime.AnimeTimelineInstance;
     @observable checkTimeline: anime.AnimeTimelineInstance;
     @observable checkRef: any;
+    @observable _resetReaction?: IReactionDisposer;
 
 
     constructor(props: CheckBoxProps) {
@@ -28,21 +31,19 @@ export class CheckBox extends React.Component<CheckBoxProps>{
             loop: false,
             autoplay: false,
             direction: "normal",
-        });this.uncheckTimeline = anime.timeline({
+        }); this.uncheckTimeline = anime.timeline({
             loop: false,
             autoplay: false,
             direction: "normal",
         });
     }
 
-    //testiing
-
     componentDidMount = () => {
         this.uncheckTimeline.add({
             targets: this.checkRef.current,
             easing: "easeInOutQuad",
             duration: 500,
-            opacity: 0 ,
+            opacity: 0,
         });
         this.checkTimeline.add({
             targets: this.checkRef.current,
@@ -52,37 +53,63 @@ export class CheckBox extends React.Component<CheckBoxProps>{
             opacity: 1
         });
 
-        if(this.props.originalStatus){
+        if (this.props.originalStatus) {
             this.checkTimeline.play();
         }
+
+        this._resetReaction = reaction(
+            () => 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.resetCounter = false;
+                        }
+                    })
+                }
+            },
+        )
     }
 
     @action.bound
-    onClick = () => {
-        this.props.updateStatus(!this._status);
+    reset() {
+        if (!this._status) {
+            this._status = true;
+            this.checkTimeline.play();
+            this.checkTimeline.restart();
+        }
 
-        if(this._status){
+    }
+
+    @action.bound
+    onClick = () => {
+        if (this._status) {
             this.uncheckTimeline.play();
             this.uncheckTimeline.restart();
         }
-        else{
+        else {
             this.checkTimeline.play();
             this.checkTimeline.restart();
 
         }
         this._status = !this._status;
+        this.props.updateStatus(this._status);
+
     }
 
     render() {
         return (
-            <div className="checkbox" onClick = {this.onClick}>
-            <div className = "outer">
-                <div className="check-container">
-                    <svg viewBox="0 12 40 40">
-                        <path ref = {this.checkRef} className="checkmark" d="M14.1 27.2l7.1 7.2 16.7-18" />
-                    </svg>
-                </div>
-                <div className="check-box"/>
+            <div className="checkbox" onClick={this.onClick}>
+                <div className="outer">
+                    <div className="check-container">
+                        <svg viewBox="0 12 40 40">
+                            <path ref={this.checkRef} className="checkmark" d="M14.1 27.2l7.1 7.2 16.7-18" />
+                        </svg>
+                    </div>
+                    <div className="check-box" />
                 </div>
                 <div className="checkbox-title">{this.props.title}</div>
             </div>
diff --git a/src/client/views/search/FieldFilters.tsx b/src/client/views/search/FieldFilters.tsx
index e84137d69..81391e73b 100644
--- a/src/client/views/search/FieldFilters.tsx
+++ b/src/client/views/search/FieldFilters.tsx
@@ -16,13 +16,30 @@ export interface FieldFilterProps {
 }
 
 export class FieldFilters extends React.Component<FieldFilterProps> {
+
+    static Instance: FieldFilters;
+    @observable public resetBoolean = false;
+    @observable public resetCounter: number = 0;
+
+    constructor(props: FieldFilterProps){
+        super(props);
+        FieldFilters.Instance = this;
+    }
+
+resetFieldFilters() {
+    this.props.updateAuthorStatus(true);
+    this.props.updateDataStatus(true);
+    this.props.updateTitleStatus(true);
+    this.resetBoolean = true;
+}
+
     render() {
         return (
             <div>
                 <div className="filter field-title">Filter by Basic Keys</div>
-                <CheckBox originalStatus={this.props.titleFieldStatus} updateStatus={this.props.updateTitleStatus} title={Keys.TITLE} />
-                <CheckBox originalStatus={this.props.authorFieldStatus} updateStatus={this.props.updateAuthorStatus} title={Keys.AUTHOR} />
-                <CheckBox originalStatus={this.props.dataFieldStatus} updateStatus={this.props.updateDataStatus} title={Keys.DATA} />
+                <CheckBox numCount = {3} parent = {this} originalStatus={this.props.titleFieldStatus} updateStatus={this.props.updateTitleStatus} title={Keys.TITLE} />
+                <CheckBox numCount = {3} parent = {this}  originalStatus={this.props.authorFieldStatus} updateStatus={this.props.updateAuthorStatus} title={Keys.AUTHOR} />
+                <CheckBox numCount = {3} parent = {this} originalStatus={this.props.dataFieldStatus} updateStatus={this.props.updateDataStatus} title={Keys.DATA} />
             </div>
         )
     }
diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
index a25fff32d..4a0fe452a 100644
--- a/src/client/views/search/SearchBox.tsx
+++ b/src/client/views/search/SearchBox.tsx
@@ -72,9 +72,9 @@ export class SearchBox extends React.Component {
     resetFilters = () => {
         ToggleBar.Instance.resetToggle();
         IconBar.Instance.selectAll();
+        FieldFilters.Instance.resetFieldFilters();
     }
 
-
     @action.bound
     onChange(e: React.ChangeEvent<HTMLInputElement>) {
         this._searchString = e.target.value;
-- 
cgit v1.2.3-70-g09d2


From 475df987dd647bb1e5202329f0d0ffc088bb66e6 Mon Sep 17 00:00:00 2001
From: Monika <monika_hedman@brown.edu>
Date: Wed, 19 Jun 2019 13:57:34 -0400
Subject: lint errors

---
 src/client/views/search/CheckBox.tsx     |  6 ++---
 src/client/views/search/FieldFilters.tsx |  2 +-
 src/client/views/search/IconBar.tsx      |  2 +-
 src/client/views/search/IconButton.tsx   | 38 ++++++++++++++++----------------
 src/client/views/search/SearchBox.tsx    |  2 +-
 src/client/views/search/ToggleBar.tsx    |  2 +-
 6 files changed, 26 insertions(+), 26 deletions(-)

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

diff --git a/src/client/views/search/CheckBox.tsx b/src/client/views/search/CheckBox.tsx
index 163507ec3..26ad9d8ce 100644
--- a/src/client/views/search/CheckBox.tsx
+++ b/src/client/views/search/CheckBox.tsx
@@ -68,10 +68,10 @@ export class CheckBox extends React.Component<CheckBoxProps>{
                             this.props.parent.resetCounter = 0;
                             this.props.parent.resetCounter = false;
                         }
-                    })
+                    });
                 }
             },
-        )
+        );
     }
 
     @action.bound
@@ -113,7 +113,7 @@ export class CheckBox extends React.Component<CheckBoxProps>{
                 </div>
                 <div className="checkbox-title">{this.props.title}</div>
             </div>
-        )
+        );
     }
 
 }
\ No newline at end of file
diff --git a/src/client/views/search/FieldFilters.tsx b/src/client/views/search/FieldFilters.tsx
index 81391e73b..a7b142617 100644
--- a/src/client/views/search/FieldFilters.tsx
+++ b/src/client/views/search/FieldFilters.tsx
@@ -41,6 +41,6 @@ resetFieldFilters() {
                 <CheckBox numCount = {3} parent = {this}  originalStatus={this.props.authorFieldStatus} updateStatus={this.props.updateAuthorStatus} title={Keys.AUTHOR} />
                 <CheckBox numCount = {3} parent = {this} originalStatus={this.props.dataFieldStatus} updateStatus={this.props.updateDataStatus} title={Keys.DATA} />
             </div>
-        )
+        );
     }
 }
\ No newline at end of file
diff --git a/src/client/views/search/IconBar.tsx b/src/client/views/search/IconBar.tsx
index 4741359d0..2ae4af642 100644
--- a/src/client/views/search/IconBar.tsx
+++ b/src/client/views/search/IconBar.tsx
@@ -50,7 +50,7 @@ export class IconBar extends React.Component {
 
     @action.bound
     updateList(newList: string[]) {
-        SearchBox.Instance.updateIcon(newList)
+        SearchBox.Instance.updateIcon(newList);
     }
 
     @action.bound
diff --git a/src/client/views/search/IconButton.tsx b/src/client/views/search/IconButton.tsx
index 1894332a1..9df285b70 100644
--- a/src/client/views/search/IconButton.tsx
+++ b/src/client/views/search/IconButton.tsx
@@ -57,10 +57,10 @@ export class IconButton extends React.Component<IconButtonProps>{
                             IconBar.Instance.Reset = 0;
                             IconBar.Instance.ResetClicked = false;
                         }
-                    })
+                    });
                 }
             },
-        )
+        );
         this._selectAllReaction = reaction(
             () => IconBar.Instance.SelectAllClicked,
             () => {
@@ -72,10 +72,10 @@ export class IconButton extends React.Component<IconButtonProps>{
                             IconBar.Instance.Select = 0;
                             IconBar.Instance.SelectAllClicked = false;
                         }
-                    })
+                    });
                 }
             },
-        )
+        );
     }
 
     @action.bound
@@ -112,11 +112,11 @@ export class IconButton extends React.Component<IconButtonProps>{
 
         if (!this.isSelected) {
             this.isSelected = true;
-            newList.push(this.props.type)
+            newList.push(this.props.type);
         }
         else {
             this.isSelected = false;
-            _.pull(newList, this.props.type)
+            _.pull(newList, this.props.type);
         }
 
         SearchBox.Instance.updateIcon(newList);
@@ -125,16 +125,16 @@ export class IconButton extends React.Component<IconButtonProps>{
     selected = {
         opacity: 1,
         backgroundColor: "#c2c2c5" //$alt-accent
-    }
+    };
 
     notSelected = {
         opacity: 0.6,
-    }
+    };
 
     hoverStyle = {
         opacity: 1,
         backgroundColor: "rgb(178, 206, 248)" //$darker-alt-accent
-    }
+    };
 
     @action.bound
     public reset() {
@@ -161,25 +161,25 @@ export class IconButton extends React.Component<IconButtonProps>{
             case (DocTypes.NONE):
                 return (<FontAwesomeIcon className="fontawesome-icon" icon={faBan} />);
             case (DocTypes.AUDIO):
-                return (<FontAwesomeIcon className="fontawesome-icon" icon={faMusic} />)
+                return (<FontAwesomeIcon className="fontawesome-icon" icon={faMusic} />);
             case (DocTypes.COL):
-                return (<FontAwesomeIcon className="fontawesome-icon" icon={faObjectGroup} />)
+                return (<FontAwesomeIcon className="fontawesome-icon" icon={faObjectGroup} />);
             case (DocTypes.HIST):
-                return (<FontAwesomeIcon className="fontawesome-icon" icon={faChartBar} />)
+                return (<FontAwesomeIcon className="fontawesome-icon" icon={faChartBar} />);
             case (DocTypes.IMG):
-                return (<FontAwesomeIcon className="fontawesome-icon" icon={faImage} />)
+                return (<FontAwesomeIcon className="fontawesome-icon" icon={faImage} />);
             case (DocTypes.LINK):
-                return (<FontAwesomeIcon className="fontawesome-icon" icon={faLink} />)
+                return (<FontAwesomeIcon className="fontawesome-icon" icon={faLink} />);
             case (DocTypes.PDF):
-                return (<FontAwesomeIcon className="fontawesome-icon" icon={faFilePdf} />)
+                return (<FontAwesomeIcon className="fontawesome-icon" icon={faFilePdf} />);
             case (DocTypes.TEXT):
-                return (<FontAwesomeIcon className="fontawesome-icon" icon={faStickyNote} />)
+                return (<FontAwesomeIcon className="fontawesome-icon" icon={faStickyNote} />);
             case (DocTypes.VID):
-                return (<FontAwesomeIcon className="fontawesome-icon" icon={faVideo} />)
+                return (<FontAwesomeIcon className="fontawesome-icon" icon={faVideo} />);
             case (DocTypes.WEB):
-                return (<FontAwesomeIcon className="fontawesome-icon" icon={faGlobeAsia} />)
+                return (<FontAwesomeIcon className="fontawesome-icon" icon={faGlobeAsia} />);
             default:
-                return (<FontAwesomeIcon className="fontawesome-icon" icon={faCaretDown} />)
+                return (<FontAwesomeIcon className="fontawesome-icon" icon={faCaretDown} />);
         }
     }
 
diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
index 4a0fe452a..86c239f30 100644
--- a/src/client/views/search/SearchBox.tsx
+++ b/src/client/views/search/SearchBox.tsx
@@ -159,7 +159,7 @@ export class SearchBox extends React.Component {
             query = this.basicRequireWords(query);
         }
 
-        query = query.replace(/\s+/g, ' ').trim()
+        query = query.replace(/\s+/g, ' ').trim();
 
         //if there is no query there should be no result
         if (query === "") {
diff --git a/src/client/views/search/ToggleBar.tsx b/src/client/views/search/ToggleBar.tsx
index 0fee81e20..6f141d42a 100644
--- a/src/client/views/search/ToggleBar.tsx
+++ b/src/client/views/search/ToggleBar.tsx
@@ -78,7 +78,7 @@ export class ToggleBar extends React.Component<ToggleBarProps>{
     @action.bound
     public resetToggle = () => {
         if (!SearchBox.Instance.getBasicWordStatus()) {
-            this.forwardTimeline.play()
+            this.forwardTimeline.play();
             this.forwardTimeline.reverse();
             SearchBox.Instance.handleWordQueryChange();
         }
-- 
cgit v1.2.3-70-g09d2


From 82e7b6008b4cbab1890235b4b959634ec916d1a1 Mon Sep 17 00:00:00 2001
From: Monika <monika_hedman@brown.edu>
Date: Thu, 20 Jun 2019 18:31:58 -0400
Subject: checkboxes working

---
 src/client/views/search/CheckBox.scss          | 10 +++--
 src/client/views/search/CheckBox.tsx           | 15 ++++++-
 src/client/views/search/CollectionFilters.scss | 19 +++++++++
 src/client/views/search/CollectionFilters.tsx  | 52 +++++++++++++++++++++++
 src/client/views/search/FieldFilters.tsx       | 19 ++++-----
 src/client/views/search/SearchBox.scss         |  1 +
 src/client/views/search/SearchBox.tsx          | 59 ++++++++++++++++++++++----
 7 files changed, 150 insertions(+), 25 deletions(-)
 create mode 100644 src/client/views/search/CollectionFilters.scss
 create mode 100644 src/client/views/search/CollectionFilters.tsx

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

diff --git a/src/client/views/search/CheckBox.scss b/src/client/views/search/CheckBox.scss
index 582d24e72..9b0af68d5 100644
--- a/src/client/views/search/CheckBox.scss
+++ b/src/client/views/search/CheckBox.scss
@@ -1,13 +1,16 @@
 @import "../globalCssVariables";
 
-.checkbox {
+.checkboxfilter {
     display: flex;
+    margin-top: 0px;
+    padding: 3px;
 
     .outer {
         display: flex;
         position: relative;
         justify-content: center;
-        align-items: center;
+        align-items: center; 
+        margin-top: 0px;
     }
 
     .check-box {
@@ -28,7 +31,6 @@
 
     .check-container:hover ~ .check-box {
         background-color: $intermediate-color;
-
     }
 
     .check-container {
@@ -49,6 +51,8 @@
 }
 
 .checkbox-title {
+    display: flex;
+    align-items: center;
     text-transform: capitalize;
     margin-left: 15px;
 }
\ No newline at end of file
diff --git a/src/client/views/search/CheckBox.tsx b/src/client/views/search/CheckBox.tsx
index 26ad9d8ce..24c404892 100644
--- a/src/client/views/search/CheckBox.tsx
+++ b/src/client/views/search/CheckBox.tsx
@@ -10,6 +10,7 @@ interface CheckBoxProps {
     title: string;
     parent: any;
     numCount: number;
+    default: boolean;
 }
 
 @observer
@@ -36,6 +37,9 @@ export class CheckBox extends React.Component<CheckBoxProps>{
             autoplay: false,
             direction: "normal",
         });
+
+        // console.log(this.props.getStatus())
+        // console.log(this.props.getStatus)
     }
 
     componentDidMount = () => {
@@ -55,6 +59,7 @@ export class CheckBox extends React.Component<CheckBoxProps>{
 
         if (this.props.originalStatus) {
             this.checkTimeline.play();
+            this.checkTimeline.restart();
         }
 
         this._resetReaction = reaction(
@@ -76,12 +81,18 @@ export class CheckBox extends React.Component<CheckBoxProps>{
 
     @action.bound
     reset() {
-        if (!this._status) {
+        if(this.props.default){
             this._status = true;
             this.checkTimeline.play();
             this.checkTimeline.restart();
         }
+        else{
+            this._status = false;
+            this.uncheckTimeline.play();
+            this.uncheckTimeline.restart();
+        }
 
+        this.props.updateStatus(this.props.default);
     }
 
     @action.bound
@@ -102,7 +113,7 @@ export class CheckBox extends React.Component<CheckBoxProps>{
 
     render() {
         return (
-            <div className="checkbox" onClick={this.onClick}>
+            <div className="checkboxfilter" onClick={this.onClick}>
                 <div className="outer">
                     <div className="check-container">
                         <svg viewBox="0 12 40 40">
diff --git a/src/client/views/search/CollectionFilters.scss b/src/client/views/search/CollectionFilters.scss
new file mode 100644
index 000000000..5e1f4effc
--- /dev/null
+++ b/src/client/views/search/CollectionFilters.scss
@@ -0,0 +1,19 @@
+@import "../globalCssVariables";
+
+.collection-filters{
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+}
+
+.collection-filters.main{
+    width: 47%;
+    float: left;
+}
+
+.collection-filters.optional{
+    width: 60%;
+    display: grid;
+    grid-template-columns: 50% 50%;
+    float: right;
+}
\ No newline at end of file
diff --git a/src/client/views/search/CollectionFilters.tsx b/src/client/views/search/CollectionFilters.tsx
new file mode 100644
index 000000000..8d1aa1294
--- /dev/null
+++ b/src/client/views/search/CollectionFilters.tsx
@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { observer } from 'mobx-react';
+import { observable, action, runInAction } from 'mobx';
+import "./SearchBox.scss";
+import { CheckBox } from './CheckBox';
+import { Keys } from './SearchBox';
+import "./SearchBox.scss";
+import "./CollectionFilters.scss";
+import { FieldFilters } from './FieldFilters';
+
+interface CollectionFilterProps {
+    collectionStatus: boolean;
+    updateCollectionStatus(val: boolean): void;
+    collectionSelfStatus: boolean;
+    updateSelfCollectionStatus(val: boolean): void;
+    collectionParentStatus: boolean;
+    updateParentCollectionStatus(val: boolean): void;
+}
+
+export class CollectionFilters extends React.Component<CollectionFilterProps> {
+
+    static Instance: CollectionFilters;
+
+    @observable public resetBoolean = false;
+    @observable public resetCounter: number = 0;
+
+    constructor(props:CollectionFilterProps){
+        super(props);
+        CollectionFilters.Instance = this;
+    }
+
+    resetCollectionFilters() {
+        this.resetBoolean = true;
+    }
+
+    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.props.updateCollectionStatus} originalStatus={this.props.collectionStatus} />
+                    </div>
+                    <div className="collection-filters optional">
+                        <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>
+                </div>
+            </div>
+        );
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/search/FieldFilters.tsx b/src/client/views/search/FieldFilters.tsx
index a7b142617..c7928dcd6 100644
--- a/src/client/views/search/FieldFilters.tsx
+++ b/src/client/views/search/FieldFilters.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { observer } from 'mobx-react';
-import { observable, action, runInAction } from 'mobx';
+import { observable, action, runInAction, } from 'mobx';
 import "./SearchBox.scss";
 import { CheckBox } from './CheckBox';
 import { Keys } from './SearchBox';
@@ -21,25 +21,22 @@ export class FieldFilters extends React.Component<FieldFilterProps> {
     @observable public resetBoolean = false;
     @observable public resetCounter: number = 0;
 
-    constructor(props: FieldFilterProps){
+    constructor(props: FieldFilterProps) {
         super(props);
         FieldFilters.Instance = this;
     }
 
-resetFieldFilters() {
-    this.props.updateAuthorStatus(true);
-    this.props.updateDataStatus(true);
-    this.props.updateTitleStatus(true);
-    this.resetBoolean = true;
-}
+    resetFieldFilters() {
+        this.resetBoolean = true;
+    }
 
     render() {
         return (
             <div>
                 <div className="filter field-title">Filter by Basic Keys</div>
-                <CheckBox numCount = {3} parent = {this} originalStatus={this.props.titleFieldStatus} updateStatus={this.props.updateTitleStatus} title={Keys.TITLE} />
-                <CheckBox numCount = {3} parent = {this}  originalStatus={this.props.authorFieldStatus} updateStatus={this.props.updateAuthorStatus} title={Keys.AUTHOR} />
-                <CheckBox numCount = {3} parent = {this} originalStatus={this.props.dataFieldStatus} updateStatus={this.props.updateDataStatus} title={Keys.DATA} />
+                <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/SearchBox.scss b/src/client/views/search/SearchBox.scss
index 26a23c218..486ec9a93 100644
--- a/src/client/views/search/SearchBox.scss
+++ b/src/client/views/search/SearchBox.scss
@@ -69,6 +69,7 @@
 
 .filter-collection{
     display: inline-block;
+    width: 100%;
 }
 
 .field-title {
diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
index 4ebd9c5e4..2ff960aeb 100644
--- a/src/client/views/search/SearchBox.tsx
+++ b/src/client/views/search/SearchBox.tsx
@@ -29,6 +29,7 @@ import { DocumentView } from '../nodes/DocumentView';
 import { CollectionView } from '../collections/CollectionView';
 import { CollectionPDFView } from '../collections/CollectionPDFView';
 import { CollectionVideoView } from '../collections/CollectionVideoView';
+import { CollectionFilters } from './CollectionFilters';
 
 export enum Keys {
     TITLE = "title",
@@ -55,6 +56,8 @@ export class SearchBox extends React.Component {
     @observable authorFieldStatus: boolean = true;
     @observable dataFieldStatus: boolean = true;
     @observable collectionStatus = false;
+    @observable collectionSelfStatus = true;
+    @observable collectionParentStatus = true;
 
     constructor(props: Readonly<{}>) {
         super(props);
@@ -79,6 +82,14 @@ export class SearchBox extends React.Component {
         ToggleBar.Instance.resetToggle();
         IconBar.Instance.selectAll();
         FieldFilters.Instance.resetFieldFilters();
+        // console.log("field filters at end")
+        // console.log("title", this.titleFieldStatus, "author:", this.authorFieldStatus, "data:", this.dataFieldStatus)
+        // console.log("should be true, true, true\n")
+        
+        CollectionFilters.Instance.resetCollectionFilters();
+        // console.log("collection filters at end")
+        // console.log("normal;", this.collectionStatus, "self:", this.collectionSelfStatus, "parent:", this.collectionParentStatus)
+        // console.log("should be fase, true, true")
     }
 
     @action.bound
@@ -207,10 +218,6 @@ export class SearchBox extends React.Component {
             query = this.addCollectionFilter(query);
             query = query.replace(/\s+/g, ' ').trim();
         }
-
-        //gets rid of any extra spaces that may have been added
-        // query = query.replace(/\s+/g, ' ').trim();
-
         return query;
     }
 
@@ -238,8 +245,6 @@ export class SearchBox extends React.Component {
 
         query = this.getFinalQuery(query);
 
-        console.log(query);
-
         //if there is no query there should be no result
         if (query === "") {
             results = [];
@@ -429,6 +434,40 @@ export class SearchBox extends React.Component {
         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;
+    }
+
+    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}
     // Documents in a collection: {!join from=data_l to=id}id:{collectionProtoId} //id of collections prototype
@@ -466,11 +505,13 @@ export class SearchBox extends React.Component {
                                 <IconBar />
                             </div>
                             <div className="filter-collection filter-div">
-                                <div className='collection-title'>Search in current collections</div>
-                                <CheckBox title={"limit to current collection"} parent={this} numCount={1} updateStatus={this.updateCollectionStatus} originalStatus={this.collectionStatus} />
+                                <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}
+                                <FieldFilters 
+                                titleFieldStatus={this.titleFieldStatus} dataFieldStatus={this.dataFieldStatus} authorFieldStatus={this.authorFieldStatus}
                                     updateAuthorStatus={this.updateAuthorStatus} updateDataStatus={this.updateDataStatus} updateTitleStatus={this.updateTitleStatus} />
                             </div>
                         </div>
-- 
cgit v1.2.3-70-g09d2


From 9f8b48837a202af92600fc2fe2d0de06baf0032b Mon Sep 17 00:00:00 2001
From: Monika <monika_hedman@brown.edu>
Date: Thu, 20 Jun 2019 19:24:17 -0400
Subject: end of day 6/20, filter form not reopening correctly

---
 src/client/views/search/CheckBox.tsx           |  5 +--
 src/client/views/search/CollectionFilters.scss |  1 +
 src/client/views/search/CollectionFilters.tsx  | 43 +++++++++++++++++++++++---
 src/client/views/search/SearchBox.scss         |  3 +-
 src/client/views/search/ToggleBar.scss         |  2 +-
 5 files changed, 43 insertions(+), 11 deletions(-)

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

diff --git a/src/client/views/search/CheckBox.tsx b/src/client/views/search/CheckBox.tsx
index 24c404892..9f0b75887 100644
--- a/src/client/views/search/CheckBox.tsx
+++ b/src/client/views/search/CheckBox.tsx
@@ -37,9 +37,6 @@ export class CheckBox extends React.Component<CheckBoxProps>{
             autoplay: false,
             direction: "normal",
         });
-
-        // console.log(this.props.getStatus())
-        // console.log(this.props.getStatus)
     }
 
     componentDidMount = () => {
@@ -71,7 +68,7 @@ export class CheckBox extends React.Component<CheckBoxProps>{
                         this.props.parent.resetCounter++;
                         if (this.props.parent.resetCounter === this.props.numCount) {
                             this.props.parent.resetCounter = 0;
-                            this.props.parent.resetCounter = false;
+                            this.props.parent.resetBoolean = false;
                         }
                     });
                 }
diff --git a/src/client/views/search/CollectionFilters.scss b/src/client/views/search/CollectionFilters.scss
index 5e1f4effc..8d5ab96e7 100644
--- a/src/client/views/search/CollectionFilters.scss
+++ b/src/client/views/search/CollectionFilters.scss
@@ -16,4 +16,5 @@
     display: grid;
     grid-template-columns: 50% 50%;
     float: right;
+    opacity: 0;
 }
\ No newline at end of file
diff --git a/src/client/views/search/CollectionFilters.tsx b/src/client/views/search/CollectionFilters.tsx
index 8d1aa1294..a5e479567 100644
--- a/src/client/views/search/CollectionFilters.tsx
+++ b/src/client/views/search/CollectionFilters.tsx
@@ -7,6 +7,7 @@ import { Keys } from './SearchBox';
 import "./SearchBox.scss";
 import "./CollectionFilters.scss";
 import { FieldFilters } from './FieldFilters';
+import * as anime from 'animejs';
 
 interface CollectionFilterProps {
     collectionStatus: boolean;
@@ -23,27 +24,59 @@ export class CollectionFilters extends React.Component<CollectionFilterProps> {
 
     @observable public resetBoolean = false;
     @observable public resetCounter: number = 0;
+    @observable collectionsSelected = this.props.collectionStatus;
+    @observable timeline: anime.AnimeTimelineInstance;
+    @observable ref: any;
 
-    constructor(props:CollectionFilterProps){
+    constructor(props: CollectionFilterProps) {
         super(props);
         CollectionFilters.Instance = this;
+        this.ref = React.createRef();
+
+        this.timeline = anime.timeline({
+            loop: false,
+            autoplay: false,
+            direction: "reverse",
+        });
+    }
+
+    componentDidMount = () => {
+        this.timeline.add({
+            targets: this.ref.current,
+            easing: "easeInOutQuad",
+            duration: 500,
+            opacity: 1,
+        });
     }
 
+    @action.bound
     resetCollectionFilters() {
         this.resetBoolean = true;
     }
 
+    @action.bound
+    updateColStat(val: boolean) {
+        this.props.updateCollectionStatus(val);
+
+        if (this.collectionsSelected !== val) {
+            this.timeline.play();
+            this.timeline.reverse();
+        }
+
+        this.collectionsSelected = val;
+    }
+
     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.props.updateCollectionStatus} originalStatus={this.props.collectionStatus} />
+                        <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">
-                        <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 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>
                 </div>
             </div>
diff --git a/src/client/views/search/SearchBox.scss b/src/client/views/search/SearchBox.scss
index 486ec9a93..3b96e3922 100644
--- a/src/client/views/search/SearchBox.scss
+++ b/src/client/views/search/SearchBox.scss
@@ -84,7 +84,8 @@
 }
 
 .required-words{
-    height: 110px;
+    display: inline-block;
+    width: 100%;
 }
 
 .filter-div{
diff --git a/src/client/views/search/ToggleBar.scss b/src/client/views/search/ToggleBar.scss
index 3a262709d..633a194fe 100644
--- a/src/client/views/search/ToggleBar.scss
+++ b/src/client/views/search/ToggleBar.scss
@@ -10,7 +10,7 @@
     padding: 5px;
 
     .toggle-option {
-        width: 100px;
+        width: 50%;
         text-align: center;
         -webkit-transition: all 0.2s ease-in-out;
         -moz-transition: all 0.2s ease-in-out;
-- 
cgit v1.2.3-70-g09d2


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/CheckBox.tsx          | 20 +++---
 src/client/views/search/CollectionFilters.tsx |  5 ++
 src/client/views/search/NaviconButton.scss    | 95 +++++++++++++++++++++++++++
 src/client/views/search/NaviconButton.tsx     | 28 ++++++++
 src/client/views/search/SearchBox.tsx         | 10 +--
 5 files changed, 142 insertions(+), 16 deletions(-)
 create mode 100644 src/client/views/search/NaviconButton.scss
 create mode 100644 src/client/views/search/NaviconButton.tsx

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

diff --git a/src/client/views/search/CheckBox.tsx b/src/client/views/search/CheckBox.tsx
index 9f0b75887..c75980e7c 100644
--- a/src/client/views/search/CheckBox.tsx
+++ b/src/client/views/search/CheckBox.tsx
@@ -78,15 +78,19 @@ export class CheckBox extends React.Component<CheckBoxProps>{
 
     @action.bound
     reset() {
-        if(this.props.default){
-            this._status = true;
-            this.checkTimeline.play();
-            this.checkTimeline.restart();
+        if (this.props.default) {
+            if (!this._status) {
+                this._status = true;
+                this.checkTimeline.play();
+                this.checkTimeline.restart();
+            }
         }
-        else{
-            this._status = false;
-            this.uncheckTimeline.play();
-            this.uncheckTimeline.restart();
+        else {
+            if (this._status) {
+                this._status = false;
+                this.uncheckTimeline.play();
+                this.uncheckTimeline.restart();
+            }
         }
 
         this.props.updateStatus(this.props.default);
diff --git a/src/client/views/search/CollectionFilters.tsx b/src/client/views/search/CollectionFilters.tsx
index a5e479567..5bfe37efb 100644
--- a/src/client/views/search/CollectionFilters.tsx
+++ b/src/client/views/search/CollectionFilters.tsx
@@ -47,6 +47,11 @@ export class CollectionFilters extends React.Component<CollectionFilterProps> {
             duration: 500,
             opacity: 1,
         });
+
+        if(this.collectionsSelected){
+            this.timeline.play();
+            this.timeline.reverse();
+        }
     }
 
     @action.bound
diff --git a/src/client/views/search/NaviconButton.scss b/src/client/views/search/NaviconButton.scss
new file mode 100644
index 000000000..529f11a57
--- /dev/null
+++ b/src/client/views/search/NaviconButton.scss
@@ -0,0 +1,95 @@
+@import "../globalCssVariables";
+
+
+@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
+
+// $background: #3d566e;
+$color: #ecf0f1;
+
+$height-icon: 20px;
+$width-line: 30px;
+$height-line: 4px;
+
+$transition-time: 0.4s;
+$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;
+  position:relative;
+  display:block;
+//   margin: ($height-icon * 2) auto $height-icon auto;
+  
+  .line {
+    display:block;
+    background:$color;
+    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%;
+    }
+  }
+  &: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 {
+    .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);
+    }
+    .line-2 {
+      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);
+    }
+  }
+}
+
+// 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
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
diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
index 2ff960aeb..71472886f 100644
--- a/src/client/views/search/SearchBox.tsx
+++ b/src/client/views/search/SearchBox.tsx
@@ -30,6 +30,7 @@ import { CollectionView } from '../collections/CollectionView';
 import { CollectionPDFView } from '../collections/CollectionPDFView';
 import { CollectionVideoView } from '../collections/CollectionVideoView';
 import { CollectionFilters } from './CollectionFilters';
+import { NaviconButton } from './NaviconButton';
 
 export enum Keys {
     TITLE = "title",
@@ -82,14 +83,7 @@ export class SearchBox extends React.Component {
         ToggleBar.Instance.resetToggle();
         IconBar.Instance.selectAll();
         FieldFilters.Instance.resetFieldFilters();
-        // console.log("field filters at end")
-        // console.log("title", this.titleFieldStatus, "author:", this.authorFieldStatus, "data:", this.dataFieldStatus)
-        // console.log("should be true, true, true\n")
-        
         CollectionFilters.Instance.resetCollectionFilters();
-        // console.log("collection filters at end")
-        // console.log("normal;", this.collectionStatus, "self:", this.collectionSelfStatus, "parent:", this.collectionParentStatus)
-        // console.log("should be fase, true, true")
     }
 
     @action.bound
@@ -324,7 +318,7 @@ export class SearchBox extends React.Component {
 
     @action
     openFilter = () => {
-        this._filterOpen = true;
+        this._filterOpen = !this._filterOpen;
         this._resultsOpen = false;
         this._results = [];
     }
-- 
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/CheckBox.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

