From 3655e529eef051e3d68f6e9c242d320be9b32906 Mon Sep 17 00:00:00 2001
From: madelinegr <monika_hedman@brown.edu>
Date: Mon, 10 Jun 2019 15:45:12 -0400
Subject: end of day 6/10 eek

---
 src/client/views/search/ToggleBar.scss | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 src/client/views/search/ToggleBar.scss

(limited to 'src/client/views/search/ToggleBar.scss')

diff --git a/src/client/views/search/ToggleBar.scss b/src/client/views/search/ToggleBar.scss
new file mode 100644
index 000000000..e69de29bb
-- 
cgit v1.2.3-70-g09d2


From 51f3c6f33b91739886ecbd5d8e08f16c4ef94fa7 Mon Sep 17 00:00:00 2001
From: madelinegr <monika_hedman@brown.edu>
Date: Tue, 11 Jun 2019 10:44:39 -0400
Subject: refactor working

---
 src/client/views/search/IconBar.scss    |  32 ++++
 src/client/views/search/IconBar.tsx     | 147 ++++++++++++++++++
 src/client/views/search/SearchBox.scss  |  65 +-------
 src/client/views/search/SearchBox.tsx   | 258 ++++++++++++++++----------------
 src/client/views/search/SearchItem.scss |   6 +-
 src/client/views/search/ToggleBar.scss  |  36 +++++
 src/client/views/search/ToggleBar.tsx   |   1 +
 7 files changed, 351 insertions(+), 194 deletions(-)

(limited to 'src/client/views/search/ToggleBar.scss')

diff --git a/src/client/views/search/IconBar.scss b/src/client/views/search/IconBar.scss
index e69de29bb..376640a5e 100644
--- a/src/client/views/search/IconBar.scss
+++ b/src/client/views/search/IconBar.scss
@@ -0,0 +1,32 @@
+@import "../globalCssVariables";
+
+
+.icon-bar{
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    height: 40px;
+    width: 100%;
+    flex-wrap: wrap;
+    font-size: 2em;
+}
+
+.type-icon{
+    height: 50px;
+    width: 50px;
+    color: $light-color;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: "#121721";
+}
+
+.fontawesome-icon{
+    height: 28px;
+    width: 28px;
+}
+
+.type-icon:hover{
+    background-color: $alt-accent;
+}
\ No newline at end of file
diff --git a/src/client/views/search/IconBar.tsx b/src/client/views/search/IconBar.tsx
index e69de29bb..e903504a4 100644
--- a/src/client/views/search/IconBar.tsx
+++ b/src/client/views/search/IconBar.tsx
@@ -0,0 +1,147 @@
+import * as React from 'react';
+import { observer } from 'mobx-react';
+import { observable, action, runInAction } from 'mobx';
+import "./SearchBox.scss";
+import "./IconBar.scss";
+import * as anime from 'animejs';
+import { DocTypes } from '../../documents/Documents';
+import { faSearch, faFilePdf, faFilm, faImage, faObjectGroup, faStickyNote, faMusic, faLink, faChartBar, faGlobeAsia, faBan } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { library } from '@fortawesome/fontawesome-svg-core';
+import * as _ from "lodash";
+
+
+library.add(faSearch);
+library.add(faObjectGroup);
+library.add(faImage);
+library.add(faStickyNote);
+library.add(faFilePdf);
+library.add(faFilm);
+library.add(faMusic);
+library.add(faLink);
+library.add(faChartBar);
+library.add(faGlobeAsia);
+library.add(faBan);
+
+export interface IconBarProps {
+    updateIcon(newIcons: string[]): void;
+    getIcons(): string[];
+}
+
+@observer
+export class IconBar extends React.Component<IconBarProps> {
+
+    @observable newIcons: string[] = [];
+    @observable selectedStyle = {
+        backgroundColor: "#121721"
+    }
+    @observable unselectedStyle = {
+        backgroundColor: "#c2c2c5"
+    }
+
+    //changes colors of buttons on click - not sure if this is the best method (it probably isn't)
+    //but i spent a ton of time on it and this is the only thing i could get to work
+    componentDidMount = () => {
+
+        let buttons = document.querySelectorAll<HTMLDivElement>(".type-icon").forEach(node =>
+            node.addEventListener('click', function () {
+                if (this.style.backgroundColor === "rgb(194, 194, 197)") {
+                    this.style.backgroundColor = "#121721";
+                }
+                else {
+                    this.style.backgroundColor = "#c2c2c5"
+                }
+            })
+        );
+
+    }
+
+    onClick = (value: string) => {
+        let oldIcons = this.props.getIcons()
+        if (value === DocTypes.NONE) {
+            this.newIcons = [value];
+            // if its none, change the color of all the other circles
+            document.querySelectorAll<HTMLDivElement>(".type-icon").forEach(node => {
+                if (node.id === "none") {
+                    node.style.backgroundColor = "#c2c2c5";
+                }
+                else {
+                    node.style.backgroundColor = "#121721";
+                }
+            }
+            );
+        }
+        else {
+            //turns "none" button off
+            let noneDoc = document.getElementById(DocTypes.NONE)
+            if (noneDoc) {
+                noneDoc.style.backgroundColor = "#121721";
+            }
+            if (oldIcons.includes(value)) {
+                this.newIcons = _.remove(oldIcons, value);
+                if (this.newIcons.length === 0) {
+                    this.newIcons = [DocTypes.NONE];
+                }
+            }
+            else {
+                this.newIcons = oldIcons;
+                if (this.newIcons.length === 1 && this.newIcons[0] === DocTypes.NONE) {
+                    this.newIcons = [value]
+                }
+                else { this.newIcons.push(value); }
+            }
+        }
+        this.props.updateIcon(this.newIcons)
+
+    }
+
+    render() {
+
+        return (
+            <div>
+                <div className="icon-bar">
+                    <div className="type-icon" id="none"
+                        onClick={() => { this.onClick(DocTypes.NONE) }}>
+                        <FontAwesomeIcon className="fontawesome-icon" style={{ order: -2 }} icon={faBan} />
+                    </div>
+                    <div className="type-icon"
+                        onClick={() => { this.onClick(DocTypes.PDF) }}>
+                        <FontAwesomeIcon className="fontawesome-icon" style={{ order: 0 }} icon={faFilePdf} />
+                    </div>
+                    <div className="type-icon"
+                        onClick={() => { this.onClick(DocTypes.HIST) }}>
+                        <FontAwesomeIcon className="fontawesome-icon" style={{ order: 1 }} icon={faChartBar} />
+                    </div>
+                    <div className="type-icon"
+                        onClick={() => { this.onClick(DocTypes.COL) }}>
+                        <FontAwesomeIcon className="fontawesome-icon" style={{ order: 2 }} icon={faObjectGroup} />
+                    </div>
+                    <div className="type-icon"
+                        onClick={() => { this.onClick(DocTypes.IMG) }}>
+                        <FontAwesomeIcon className="fontawesome-icon" style={{ order: 3 }} icon={faImage} />
+                    </div>
+                    <div className="type-icon"
+                        onClick={() => { this.onClick(DocTypes.VID) }}>
+                        <FontAwesomeIcon className="fontawesome-icon" style={{ order: 4 }} icon={faFilm} />
+                    </div>
+                    <div className="type-icon"
+                        onClick={() => { this.onClick(DocTypes.WEB) }}>
+                        <FontAwesomeIcon className="fontawesome-icon" style={{ order: 5 }} icon={faGlobeAsia} />
+                    </div>
+                    <div className="type-icon"
+                        onClick={() => { this.onClick(DocTypes.LINK) }}>
+                        <FontAwesomeIcon className="fontawesome-icon" style={{ order: 6 }} icon={faLink} />
+                    </div>
+                    <div className="type-icon"
+                        onClick={() => { this.onClick(DocTypes.AUDIO) }}>
+                        <FontAwesomeIcon className="fontawesome-icon" style={{ order: 7 }} icon={faMusic} />
+                    </div>
+                    <div className="type-icon"
+                        onClick={() => { this.onClick(DocTypes.TEXT) }}>
+                        <FontAwesomeIcon className="fontawesome-icon" style={{ order: 8 }} icon={faStickyNote} />
+                    </div>
+                </div>
+            </div>
+        )
+    }
+}
diff --git a/src/client/views/search/SearchBox.scss b/src/client/views/search/SearchBox.scss
index 91d17d001..589dd58c9 100644
--- a/src/client/views/search/SearchBox.scss
+++ b/src/client/views/search/SearchBox.scss
@@ -1,4 +1,4 @@
-@import "globalCssVariables";
+@import "../globalCssVariables";
 
 .searchBox-bar {
     height: 32px;
@@ -70,66 +70,11 @@
 
 .type-of-node{
     height: 50px;
-
-    .icon-bar{
-        display: flex;
-        justify-content: space-evenly;
-        align-items: center;
-        height: 40px;
-        width: 100%;
-        flex-wrap: wrap;
-        font-size: 2em;
-    }
-
-    .type-icon{
-        height: 50px;
-        width: 50px;
-        color: $light-color;
-        border-radius: 50%;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        background-color: "#121721";
-    }
-
-    .fontawesome-icon{
-        height: 28px;
-        width: 28px;
-    }
-
-    .type-icon:hover{
-        background-color: $alt-accent;
-    }
-    
 }
 
-.toggle-title{
-    display: flex;
-    align-items: center;
-    color: $light-color;
-    text-transform: uppercase;
-    flex-direction: row;
-    justify-content: space-around;
-    padding: 5px;
-
-    .toggle-option{
-        width: 100px;
-        text-align: center;
-    }
+.required-words{
+    height: 110px;
+    margin-top: 5px;
+    margin-bottom: 5px;
 }
 
-.toggle-bar{
-    height: 50px;
-    background-color: $alt-accent;
-    border-radius: 10px;
-    padding: 5px;
-    display: flex;
-    align-items: center;
-
-    .toggle-button{
-        width: 275px;
-        height: 100%;
-        border-radius: 10px;
-        background-color: $light-color;
-    }
-}
\ No newline at end of file
diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
index 0dd32d4fa..c6e8553fb 100644
--- a/src/client/views/search/SearchBox.tsx
+++ b/src/client/views/search/SearchBox.tsx
@@ -21,6 +21,7 @@ import * as _ from "lodash";
 // import "./globalCssVariables.scss";
 import { findDOMNode } from 'react-dom';
 import { ToggleBar } from './ToggleBar';
+import { IconBar } from './IconBar';
 
 // import * as anime from '../../../node_modules/@types';
 // const anime = require('lib/anime.js');
@@ -28,134 +29,134 @@ import { ToggleBar } from './ToggleBar';
 // import anime = require ('lib/anime.min.js');
 // import Anime from 'react-anime';
 
-library.add(faSearch);
-library.add(faObjectGroup);
-library.add(faImage);
-library.add(faStickyNote);
-library.add(faFilePdf);
-library.add(faFilm);
-library.add(faMusic);
-library.add(faLink);
-library.add(faChartBar);
-library.add(faGlobeAsia);
-library.add(faBan);
-
-export interface IconBarProps {
-    updateIcon(newIcons: string[]): void;
-    getIcons(): string[];
-}
-
-@observer
-export class IconBar extends React.Component<IconBarProps> {
-
-    @observable newIcons: string[] = [];
-
-    //changes colors of buttons on click - not sure if this is the best method (it probably isn't)
-    //but i spent a ton of time on it and this is the only thing i could get to work
-    componentDidMount = () => {
-
-        let buttons = document.querySelectorAll<HTMLDivElement>(".type-icon").forEach(node =>
-            node.addEventListener('click', function () {
-                if (this.style.backgroundColor === "rgb(194, 194, 197)") {
-                    this.style.backgroundColor = "#121721";
-                }
-                else {
-                    this.style.backgroundColor = "#c2c2c5"
-                }
-            })
-        );
-
-    }
-
-    onClick = (value: string) => {
-        let oldIcons = this.props.getIcons()
-        if (value === DocTypes.NONE) {
-            this.newIcons = [value];
-            //if its none, change the color of all the other circles
-            document.querySelectorAll<HTMLDivElement>(".type-icon").forEach(node => {
-                if (node.id === "none") {
-                    node.style.backgroundColor = "#c2c2c5";
-                }
-                else {
-                    node.style.backgroundColor = "#121721";
-                }
-            }
-            );
-        }
-        else {
-            //turns "none" button off
-            let noneDoc = document.getElementById(DocTypes.NONE)
-            if (noneDoc) {
-                noneDoc.style.backgroundColor = "#121721";
-            }
-            if (oldIcons.includes(value)) {
-                this.newIcons = _.remove(oldIcons, value);
-                if (this.newIcons.length === 0) {
-                    this.newIcons = [DocTypes.NONE];
-                }
-            }
-            else {
-                this.newIcons = oldIcons;
-                if (this.newIcons.length === 1 && this.newIcons[0] === DocTypes.NONE) {
-                    this.newIcons = [value]
-                }
-                else { this.newIcons.push(value); }
-            }
-        }
-        this.props.updateIcon(this.newIcons)
-
-    }
-
-    render() {
-
-        return (
-            <div>
-                <div className="icon-bar">
-                    <div className="type-icon" id="none"
-                        onClick={() => { this.onClick(DocTypes.NONE) }}>
-                        <FontAwesomeIcon className="fontawesome-icon" style={{ order: -2 }} icon={faBan} />
-                    </div>
-                    <div className="type-icon"
-                        onClick={() => { this.onClick(DocTypes.PDF) }}>
-                        <FontAwesomeIcon className="fontawesome-icon" style={{ order: 0 }} icon={faFilePdf} />
-                    </div>
-                    <div className="type-icon"
-                        onClick={() => { this.onClick(DocTypes.HIST) }}>
-                        <FontAwesomeIcon className="fontawesome-icon" style={{ order: 1 }} icon={faChartBar} />
-                    </div>
-                    <div className="type-icon"
-                        onClick={() => { this.onClick(DocTypes.COL) }}>
-                        <FontAwesomeIcon className="fontawesome-icon" style={{ order: 2 }} icon={faObjectGroup} />
-                    </div>
-                    <div className="type-icon"
-                        onClick={() => { this.onClick(DocTypes.IMG) }}>
-                        <FontAwesomeIcon className="fontawesome-icon" style={{ order: 3 }} icon={faImage} />
-                    </div>
-                    <div className="type-icon"
-                        onClick={() => { this.onClick(DocTypes.VID) }}>
-                        <FontAwesomeIcon className="fontawesome-icon" style={{ order: 4 }} icon={faFilm} />
-                    </div>
-                    <div className="type-icon"
-                        onClick={() => { this.onClick(DocTypes.WEB) }}>
-                        <FontAwesomeIcon className="fontawesome-icon" style={{ order: 5 }} icon={faGlobeAsia} />
-                    </div>
-                    <div className="type-icon"
-                        onClick={() => { this.onClick(DocTypes.LINK) }}>
-                        <FontAwesomeIcon className="fontawesome-icon" style={{ order: 6 }} icon={faLink} />
-                    </div>
-                    <div className="type-icon"
-                        onClick={() => { this.onClick(DocTypes.AUDIO) }}>
-                        <FontAwesomeIcon className="fontawesome-icon" style={{ order: 7 }} icon={faMusic} />
-                    </div>
-                    <div className="type-icon"
-                        onClick={() => { this.onClick(DocTypes.TEXT) }}>
-                        <FontAwesomeIcon className="fontawesome-icon" style={{ order: 8 }} icon={faStickyNote} />
-                    </div>
-                </div>
-            </div>
-        )
-    }
-}
+// library.add(faSearch);
+// library.add(faObjectGroup);
+// library.add(faImage);
+// library.add(faStickyNote);
+// library.add(faFilePdf);
+// library.add(faFilm);
+// library.add(faMusic);
+// library.add(faLink);
+// library.add(faChartBar);
+// library.add(faGlobeAsia);
+// library.add(faBan);
+
+// export interface IconBarProps {
+//     updateIcon(newIcons: string[]): void;
+//     getIcons(): string[];
+// }
+
+// @observer
+// export class IconBar extends React.Component<IconBarProps> {
+
+//     @observable newIcons: string[] = [];
+
+//     //changes colors of buttons on click - not sure if this is the best method (it probably isn't)
+//     //but i spent a ton of time on it and this is the only thing i could get to work
+//     componentDidMount = () => {
+
+//         let buttons = document.querySelectorAll<HTMLDivElement>(".type-icon").forEach(node =>
+//             node.addEventListener('click', function () {
+//                 if (this.style.backgroundColor === "rgb(194, 194, 197)") {
+//                     this.style.backgroundColor = "#121721";
+//                 }
+//                 else {
+//                     this.style.backgroundColor = "#c2c2c5"
+//                 }
+//             })
+//         );
+
+//     }
+
+//     onClick = (value: string) => {
+//         let oldIcons = this.props.getIcons()
+//         if (value === DocTypes.NONE) {
+//             this.newIcons = [value];
+//             //if its none, change the color of all the other circles
+//             document.querySelectorAll<HTMLDivElement>(".type-icon").forEach(node => {
+//                 if (node.id === "none") {
+//                     node.style.backgroundColor = "#c2c2c5";
+//                 }
+//                 else {
+//                     node.style.backgroundColor = "#121721";
+//                 }
+//             }
+//             );
+//         }
+//         else {
+//             //turns "none" button off
+//             let noneDoc = document.getElementById(DocTypes.NONE)
+//             if (noneDoc) {
+//                 noneDoc.style.backgroundColor = "#121721";
+//             }
+//             if (oldIcons.includes(value)) {
+//                 this.newIcons = _.remove(oldIcons, value);
+//                 if (this.newIcons.length === 0) {
+//                     this.newIcons = [DocTypes.NONE];
+//                 }
+//             }
+//             else {
+//                 this.newIcons = oldIcons;
+//                 if (this.newIcons.length === 1 && this.newIcons[0] === DocTypes.NONE) {
+//                     this.newIcons = [value]
+//                 }
+//                 else { this.newIcons.push(value); }
+//             }
+//         }
+//         this.props.updateIcon(this.newIcons)
+
+//     }
+
+//     render() {
+
+//         return (
+//             <div>
+//                 <div className="icon-bar">
+//                     <div className="type-icon" id="none"
+//                         onClick={() => { this.onClick(DocTypes.NONE) }}>
+//                         <FontAwesomeIcon className="fontawesome-icon" style={{ order: -2 }} icon={faBan} />
+//                     </div>
+//                     <div className="type-icon"
+//                         onClick={() => { this.onClick(DocTypes.PDF) }}>
+//                         <FontAwesomeIcon className="fontawesome-icon" style={{ order: 0 }} icon={faFilePdf} />
+//                     </div>
+//                     <div className="type-icon"
+//                         onClick={() => { this.onClick(DocTypes.HIST) }}>
+//                         <FontAwesomeIcon className="fontawesome-icon" style={{ order: 1 }} icon={faChartBar} />
+//                     </div>
+//                     <div className="type-icon"
+//                         onClick={() => { this.onClick(DocTypes.COL) }}>
+//                         <FontAwesomeIcon className="fontawesome-icon" style={{ order: 2 }} icon={faObjectGroup} />
+//                     </div>
+//                     <div className="type-icon"
+//                         onClick={() => { this.onClick(DocTypes.IMG) }}>
+//                         <FontAwesomeIcon className="fontawesome-icon" style={{ order: 3 }} icon={faImage} />
+//                     </div>
+//                     <div className="type-icon"
+//                         onClick={() => { this.onClick(DocTypes.VID) }}>
+//                         <FontAwesomeIcon className="fontawesome-icon" style={{ order: 4 }} icon={faFilm} />
+//                     </div>
+//                     <div className="type-icon"
+//                         onClick={() => { this.onClick(DocTypes.WEB) }}>
+//                         <FontAwesomeIcon className="fontawesome-icon" style={{ order: 5 }} icon={faGlobeAsia} />
+//                     </div>
+//                     <div className="type-icon"
+//                         onClick={() => { this.onClick(DocTypes.LINK) }}>
+//                         <FontAwesomeIcon className="fontawesome-icon" style={{ order: 6 }} icon={faLink} />
+//                     </div>
+//                     <div className="type-icon"
+//                         onClick={() => { this.onClick(DocTypes.AUDIO) }}>
+//                         <FontAwesomeIcon className="fontawesome-icon" style={{ order: 7 }} icon={faMusic} />
+//                     </div>
+//                     <div className="type-icon"
+//                         onClick={() => { this.onClick(DocTypes.TEXT) }}>
+//                         <FontAwesomeIcon className="fontawesome-icon" style={{ order: 8 }} icon={faStickyNote} />
+//                     </div>
+//                 </div>
+//             </div>
+//         )
+//     }
+// }
 
 
 
@@ -364,7 +365,6 @@ export class SearchBox extends React.Component {
                                 <ToggleBar optionOne={"Include Any Keywords"} optionTwo={"Include All Keywords"} changeStatus={this.handleWordQueryChange} />
                             </div>
                             <div className="type-of-node">
-                                temp for filtering by a type of node
                                <IconBar updateIcon={this.updateIcon} getIcons={this.getIcons} />
                             </div>
                             <div className="filter-collection">
diff --git a/src/client/views/search/SearchItem.scss b/src/client/views/search/SearchItem.scss
index 4c90643f9..2d4c06a5c 100644
--- a/src/client/views/search/SearchItem.scss
+++ b/src/client/views/search/SearchItem.scss
@@ -1,4 +1,4 @@
-@import "././globalCssVariables";
+@import "../globalCssVariables";
 
 .search-item {
     width: 500px;
@@ -56,7 +56,6 @@
 
 .searchBox-instances {
     float: left;
-    // opacity: 0;
     opacity: 1;
     width: 150px;
     transition: all 0.2s ease;
@@ -65,9 +64,6 @@
     -webkit-transform: scale(0);
     -ms-transform: scale(0);
     transform: scale(0);
-    // -webkit-transform: scale(1);
-    // -ms-transform: scale(1);
-    // transform: scale(1);
     height: 100%
 }
 
diff --git a/src/client/views/search/ToggleBar.scss b/src/client/views/search/ToggleBar.scss
index e69de29bb..601b9a1dc 100644
--- a/src/client/views/search/ToggleBar.scss
+++ b/src/client/views/search/ToggleBar.scss
@@ -0,0 +1,36 @@
+@import "../globalCssVariables";
+
+.toggle{
+    
+}
+
+.toggle-title{
+    display: flex;
+    align-items: center;
+    color: $light-color;
+    text-transform: uppercase;
+    flex-direction: row;
+    justify-content: space-around;
+    padding: 5px;
+
+    .toggle-option{
+        width: 100px;
+        text-align: center;
+    }
+}
+
+.toggle-bar{
+    height: 50px;
+    background-color: $alt-accent;
+    border-radius: 10px;
+    padding: 5px;
+    display: flex;
+    align-items: center;
+
+    .toggle-button{
+        width: 275px;
+        height: 100%;
+        border-radius: 10px;
+        background-color: $light-color;
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/search/ToggleBar.tsx b/src/client/views/search/ToggleBar.tsx
index 74aa5dd9a..2fc9c0040 100644
--- a/src/client/views/search/ToggleBar.tsx
+++ b/src/client/views/search/ToggleBar.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import { observer } from 'mobx-react';
 import { observable, action, runInAction } from 'mobx';
 import "./SearchBox.scss";
+import "./ToggleBar.scss";
 import * as anime from 'animejs';
 
 export interface ToggleBarProps {
-- 
cgit v1.2.3-70-g09d2


From 0c066dac5eb3e7c47b708a6a5a1d95dc75f320fe Mon Sep 17 00:00:00 2001
From: madelinegr <monika_hedman@brown.edu>
Date: Tue, 11 Jun 2019 14:10:18 -0400
Subject: making words required almost works (logic is there)

---
 src/client/views/search/IconBar.scss   |  50 ++++++++--
 src/client/views/search/IconBar.tsx    | 165 +++++++++++++++++++--------------
 src/client/views/search/SearchBox.scss |  14 ++-
 src/client/views/search/SearchBox.tsx  |  20 +++-
 src/client/views/search/ToggleBar.scss |   4 -
 src/client/views/search/ToggleBar.tsx  |   8 +-
 6 files changed, 167 insertions(+), 94 deletions(-)

(limited to 'src/client/views/search/ToggleBar.scss')

diff --git a/src/client/views/search/IconBar.scss b/src/client/views/search/IconBar.scss
index eb7b45754..98b4e50a6 100644
--- a/src/client/views/search/IconBar.scss
+++ b/src/client/views/search/IconBar.scss
@@ -1,17 +1,23 @@
 @import "../globalCssVariables";
 
 
-.icon-bar{
+.icon-bar {
     display: flex;
     justify-content: space-evenly;
     align-items: center;
     height: 40px;
     width: 100%;
     flex-wrap: wrap;
-    font-size: 2em;
+    // font-size: 2em;
+}
+
+.icon-title {
+    color: $light-color;
+    text-transform: uppercase;
+    padding: 5px;
 }
 
-.type-icon{
+.type-icon {
     height: 50px;
     width: 50px;
     color: $light-color;
@@ -19,22 +25,50 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    // background-color: "#121721";
+    -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;
 }
 
-.type-icon.selected{
+.type-icon.selected {
     background-color: $alt-accent;
 }
 
-.type-icon.not-selected{
+.type-icon.not-selected {
     background-color: transparent;
 }
 
-.fontawesome-icon{
+.fontawesome-icon {
     height: 28px;
     width: 28px;
 }
 
-.type-icon:hover{
+.type-icon:hover {
+    transform: scale(1.1);
     background-color: $alt-accent;
+
+    +.filter-description {
+        opacity: 1;
+    }
+}
+
+.type-outer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 50px;
+}
+
+.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 bf98e1ef3..9a36e7cdf 100644
--- a/src/client/views/search/IconBar.tsx
+++ b/src/client/views/search/IconBar.tsx
@@ -145,80 +145,101 @@ export class IconBar extends React.Component<IconBarProps> {
     render() {
 
         return (
-            <div>
-                <div className="icon-bar">
-                    <div
-                        className={"type-icon none"}
-                        ref={this.noneRef}
-                        data-selected={"true"}
-                        onClick={() => { this.onClick(DocTypes.NONE) }}>
-                        <FontAwesomeIcon className="fontawesome-icon" style={{ order: -2 }} icon={faBan} />
-                    </div>
-                    <div
-                        className={"type-icon " + (this.isRefSelected(this.pdfRef) ? "selected" : "not-selected")}
-                        ref={this.pdfRef}
-                        data-selected={"false"}
-                        onClick={() => { this.onClick(DocTypes.PDF) }}>
-                        <FontAwesomeIcon className="fontawesome-icon" style={{ order: 0 }} icon={faFilePdf} />
-                    </div>
-                    <div
-                        className={"type-icon " + (this.isRefSelected(this.histRef) ? "selected" : "not-selected")}
-                        ref={this.histRef}
-                        data-selected={"false"}
-                        onClick={() => { this.onClick(DocTypes.HIST) }}>
-                        <FontAwesomeIcon className="fontawesome-icon" style={{ order: 1 }} icon={faChartBar} />
-                    </div>
-                    <div
-                        className={"type-icon " + (this.isRefSelected(this.colRef) ? "selected" : "not-selected")}
-                        ref={this.colRef}
-                        data-selected={"false"}
-                        onClick={() => { this.onClick(DocTypes.COL) }}>
-                        <FontAwesomeIcon className="fontawesome-icon" style={{ order: 2 }} icon={faObjectGroup} />
-                    </div>
-                    <div
-                        className={"type-icon " + (this.isRefSelected(this.imgRef) ? "selected" : "not-selected")}
-                        ref={this.imgRef}
-                        data-selected={"false"}
-                        onClick={() => { this.onClick(DocTypes.IMG) }}>
-                        <FontAwesomeIcon className="fontawesome-icon" style={{ order: 3 }} icon={faImage} />
-                    </div>
-                    <div
-                        className={"type-icon " + (this.isRefSelected(this.vidRef) ? "selected" : "not-selected")}
-                        ref={this.vidRef}
-                        data-selected={"false"}
-                        onClick={() => { this.onClick(DocTypes.VID) }}>
-                        <FontAwesomeIcon className="fontawesome-icon" style={{ order: 4 }} icon={faFilm} />
-                    </div>
-                    <div
-                        className={"type-icon " + (this.isRefSelected(this.webRef) ?"selected" : "not-selected")}
-                        ref={this.webRef}
-                        data-selected={"false"}
-                        onClick={() => { this.onClick(DocTypes.WEB) }}>
-                        <FontAwesomeIcon className="fontawesome-icon" style={{ order: 5 }} icon={faGlobeAsia} />
-                    </div>
-                    <div
-                        className={"type-icon " + (this.isRefSelected(this.linkRef) ?"selected" : "not-selected")}
-                        ref={this.linkRef}
-                        data-selected={"false"}
-                        onClick={() => { this.onClick(DocTypes.LINK) }}>
-                        <FontAwesomeIcon className="fontawesome-icon" style={{ order: 6 }} icon={faLink} />
-                    </div>
-                    <div
-                        className={"type-icon " + (this.isRefSelected(this.audioRef) ? "selected" : "not-selected")}
-                        ref={this.audioRef}
-                        data-selected={"false"}
-                        onClick={() => { this.onClick(DocTypes.AUDIO) }}>
-                        <FontAwesomeIcon className="fontawesome-icon" style={{ order: 7 }} icon={faMusic} />
-                    </div>
-                    <div
-                        className={"type-icon " + (this.isRefSelected(this.textRef) ?"selected" : "not-selected")}
-                        ref={this.textRef}
-                        data-selected={"false"}
-                        onClick={() => { this.onClick(DocTypes.TEXT) }}>
-                        <FontAwesomeIcon className="fontawesome-icon" style={{ order: 8 }} icon={faStickyNote} />
+                <div>
+                    <div className="icon-title">Filter by type of node</div>
+                    <div className="icon-bar">
+                        <div className="type-outer">
+                            <div className={"type-icon none"}
+                                ref={this.noneRef}
+                                data-selected={"true"}
+                                onClick={() => { this.onClick(DocTypes.NONE) }}>
+                                <FontAwesomeIcon className="fontawesome-icon" style={{ order: -2 }} icon={faBan} />
+                            </div>
+                            <div className="filter-description">Clear</div>
+                        </div>
+                        <div className="type-outer">
+                            <div className={"type-icon " + (this.isRefSelected(this.pdfRef) ? "selected" : "not-selected")}
+                                ref={this.pdfRef}
+                                data-selected={"false"}
+                                onClick={() => { this.onClick(DocTypes.PDF) }}>
+                                <FontAwesomeIcon className="fontawesome-icon" style={{ order: 0 }} icon={faFilePdf} />
+                            </div>
+                            <div className="filter-description">PDF</div>
+                        </div>
+                        <div className="type-outer">
+                            <div className={"type-icon " + (this.isRefSelected(this.histRef) ? "selected" : "not-selected")}
+                                ref={this.histRef}
+                                data-selected={"false"}
+                                onClick={() => { this.onClick(DocTypes.HIST) }}>
+                                <FontAwesomeIcon className="fontawesome-icon" style={{ order: 1 }} icon={faChartBar} />
+                            </div>
+                            <div className="filter-description">Histogram</div>
+                        </div>
+                        <div className="type-outer">
+                            <div className={"type-icon " + (this.isRefSelected(this.colRef) ? "selected" : "not-selected")}
+                                ref={this.colRef}
+                                data-selected={"false"}
+                                onClick={() => { this.onClick(DocTypes.COL) }}>
+                                <FontAwesomeIcon className="fontawesome-icon" style={{ order: 2 }} icon={faObjectGroup} />
+                            </div>
+                            <div className="filter-description">Collection</div>
+                        </div>
+                        <div className="type-outer">
+                            <div className={"type-icon " + (this.isRefSelected(this.imgRef) ? "selected" : "not-selected")}
+                                ref={this.imgRef}
+                                data-selected={"false"}
+                                onClick={() => { this.onClick(DocTypes.IMG) }}>
+                                <FontAwesomeIcon className="fontawesome-icon" style={{ order: 3 }} icon={faImage} />
+                            </div>
+                            <div className="filter-description">Image</div>
+                        </div>
+                        <div className="type-outer">
+                            <div className={"type-icon " + (this.isRefSelected(this.vidRef) ? "selected" : "not-selected")}
+                                ref={this.vidRef}
+                                data-selected={"false"}
+                                onClick={() => { this.onClick(DocTypes.VID) }}>
+                                <FontAwesomeIcon className="fontawesome-icon" style={{ order: 4 }} icon={faFilm} />
+                            </div>
+                            <div className="filter-description">Video</div>
+                        </div>
+                        <div className="type-outer">
+                            <div className={"type-icon " + (this.isRefSelected(this.webRef) ? "selected" : "not-selected")}
+                                ref={this.webRef}
+                                data-selected={"false"}
+                                onClick={() => { this.onClick(DocTypes.WEB) }}>
+                                <FontAwesomeIcon className="fontawesome-icon" style={{ order: 5 }} icon={faGlobeAsia} />
+                            </div>
+                            <div className="filter-description">Web</div>
+                        </div>
+                        <div className="type-outer">
+                            <div className={"type-icon " + (this.isRefSelected(this.linkRef) ? "selected" : "not-selected")}
+                                ref={this.linkRef}
+                                data-selected={"false"}
+                                onClick={() => { this.onClick(DocTypes.LINK) }}>
+                                <FontAwesomeIcon className="fontawesome-icon" style={{ order: 6 }} icon={faLink} />
+                            </div>
+                            <div className="filter-description">Link</div>
+                        </div>
+                        <div className="type-outer">
+                            <div className={"type-icon " + (this.isRefSelected(this.audioRef) ? "selected" : "not-selected")}
+                                ref={this.audioRef}
+                                data-selected={"false"}
+                                onClick={() => { this.onClick(DocTypes.AUDIO) }}>
+                                <FontAwesomeIcon className="fontawesome-icon" style={{ order: 7 }} icon={faMusic} />
+                            </div>
+                            <div className="filter-description">Audio</div>
+                        </div>
+                        <div className="type-outer">
+                            <div className={"type-icon " + (this.isRefSelected(this.textRef) ? "selected" : "not-selected")}
+                                ref={this.textRef}
+                                data-selected={"false"}
+                                onClick={() => { this.onClick(DocTypes.TEXT) }}>
+                                <FontAwesomeIcon className="fontawesome-icon" style={{ order: 8 }} icon={faStickyNote} />
+                            </div>
+                            <div className="filter-description">Text</div>
+                        </div>
                     </div>
                 </div>
-            </div>
         )
     }
 }
diff --git a/src/client/views/search/SearchBox.scss b/src/client/views/search/SearchBox.scss
index 4ce40614f..48c8f4af1 100644
--- a/src/client/views/search/SearchBox.scss
+++ b/src/client/views/search/SearchBox.scss
@@ -57,10 +57,6 @@
     height: 40px;
 }
 
-// #option {
-//     height: 20px;
-// }
-
 .searchBox-results {
     top: 300px;
     display: flex;
@@ -68,8 +64,16 @@
     margin-right: 72px;
 }
 
+.filter-collection{
+    height: 20px;
+}
+
+.where-in-doc{
+    height: 20px;
+}
+
 .type-of-node{
-    height: 60px;
+    height: 90px;
 }
 
 .required-words{
diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
index 329643464..67122b320 100644
--- a/src/client/views/search/SearchBox.tsx
+++ b/src/client/views/search/SearchBox.tsx
@@ -27,6 +27,7 @@ import { IconBar } from './IconBar';
 @observer
 export class SearchBox extends React.Component {
     @observable _searchString: string = "";
+    //if true, any keywords can be used. if false, all keywords are required.
     @observable _wordStatus: boolean = true;
     @observable _icons: string[] = [];
     @observable private _open: boolean = false;
@@ -42,6 +43,20 @@ export class SearchBox extends React.Component {
     @action
     submitSearch = async () => {
         let query = this._searchString;
+
+        if(!this._wordStatus){
+            let oldWords = query.split(" ");
+            let newWords: string[] = [];
+            console.log(oldWords)
+            oldWords.forEach(word => {
+                let newWrd = "+" + word;
+                newWords.push(newWrd);
+            })
+            console.log(newWords)
+
+            query = newWords.join(" ")
+        }
+
         //gets json result into a list of documents that can be used
         const results = await this.getResults(query);
 
@@ -185,8 +200,9 @@ export class SearchBox extends React.Component {
         return toReturn;
     }
 
-    handleWordQueryChange = (value: boolean) => {
-        this._wordStatus = value;
+    //if true, any keywords can be used. if false, all keywords are required.
+    handleWordQueryChange = () => {
+        this._wordStatus = !this._wordStatus;
     }
 
     @action.bound
diff --git a/src/client/views/search/ToggleBar.scss b/src/client/views/search/ToggleBar.scss
index 601b9a1dc..cccbf30fc 100644
--- a/src/client/views/search/ToggleBar.scss
+++ b/src/client/views/search/ToggleBar.scss
@@ -1,9 +1,5 @@
 @import "../globalCssVariables";
 
-.toggle{
-    
-}
-
 .toggle-title{
     display: flex;
     align-items: center;
diff --git a/src/client/views/search/ToggleBar.tsx b/src/client/views/search/ToggleBar.tsx
index 2fc9c0040..5ede368d6 100644
--- a/src/client/views/search/ToggleBar.tsx
+++ b/src/client/views/search/ToggleBar.tsx
@@ -8,7 +8,8 @@ import * as anime from 'animejs';
 export interface ToggleBarProps {
     //false = right, true = left
     // status: boolean;
-    changeStatus(value: boolean): void;
+    changeStatus(): void;
+    // changeStatus(value: boolean): void;
     optionOne: string;
     optionTwo: string;
 }
@@ -53,8 +54,9 @@ export class ToggleBar extends React.Component<ToggleBarProps>{
 
     @action.bound
     onclick() {
-        this._status = !this._status;
-        this.props.changeStatus(this._status);
+        // this._status = !this._status;
+        // this.props.changeStatus(this._status);
+        this.props.changeStatus();
         this.timeline.play();
         this.timeline.reverse();
     }
-- 
cgit v1.2.3-70-g09d2


From fc1290b614eeda0f99bb857b1a264dc0fc344674 Mon Sep 17 00:00:00 2001
From: madelinegr <monika_hedman@brown.edu>
Date: Tue, 11 Jun 2019 15:28:51 -0400
Subject: big icon changes coming

---
 src/client/views/search/SearchBox.tsx  | 1 +
 src/client/views/search/ToggleBar.scss | 4 ++++
 src/client/views/search/ToggleBar.tsx  | 6 ++++--
 3 files changed, 9 insertions(+), 2 deletions(-)

(limited to 'src/client/views/search/ToggleBar.scss')

diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
index 836062af6..e9146a6d1 100644
--- a/src/client/views/search/SearchBox.tsx
+++ b/src/client/views/search/SearchBox.tsx
@@ -255,6 +255,7 @@ export class SearchBox extends React.Component {
                                 temp for filtering where in doc the keywords are found
                             </div>
                         </div>
+                        <button className = "reset-filter">Reset Filters</button>
                     </div>
                 ) : undefined}
             </div>
diff --git a/src/client/views/search/ToggleBar.scss b/src/client/views/search/ToggleBar.scss
index cccbf30fc..caae354ee 100644
--- a/src/client/views/search/ToggleBar.scss
+++ b/src/client/views/search/ToggleBar.scss
@@ -12,6 +12,10 @@
     .toggle-option{
         width: 100px;
         text-align: 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;
     }
 }
 
diff --git a/src/client/views/search/ToggleBar.tsx b/src/client/views/search/ToggleBar.tsx
index f3a1a3171..7dbb3b767 100644
--- a/src/client/views/search/ToggleBar.tsx
+++ b/src/client/views/search/ToggleBar.tsx
@@ -19,6 +19,7 @@ export class ToggleBar extends React.Component<ToggleBarProps>{
     @observable forwardTimeline: anime.AnimeTimelineInstance;
     @observable _toggleButton: React.RefObject<HTMLDivElement>;
     @observable _originalStatus: boolean = this.props.originalStatus;
+    @observable _curStatus: boolean = this.props.originalStatus;
 
     constructor(props: ToggleBarProps) {
         super(props);
@@ -69,6 +70,7 @@ export class ToggleBar extends React.Component<ToggleBarProps>{
 
     @action.bound
     onclick() {
+        this._curStatus = !this._curStatus;
         this.forwardTimeline.play();
         this.forwardTimeline.reverse();
         this.props.changeStatus();
@@ -78,8 +80,8 @@ export class ToggleBar extends React.Component<ToggleBarProps>{
         return (
             <div>
                 <div className="toggle-title">
-                    <div className="toggle-option">{this.props.optionOne}</div>
-                    <div className="toggle-option">{this.props.optionTwo}</div>
+                    <div className="toggle-option" style = {{ opacity: (this._curStatus ? 1:.4)}}>{this.props.optionOne}</div>
+                    <div className="toggle-option" style = {{ opacity: (this._curStatus ? .4:1)}}>{this.props.optionTwo}</div>
                 </div>
                 <div className="toggle-bar" id="toggle-bar" style={{ flexDirection: (this._originalStatus ? "row" : "row-reverse") }}>
                     <div className="toggle-button" id="toggle-button" ref={this._toggleButton} onClick={this.onclick} />
-- 
cgit v1.2.3-70-g09d2


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

---
 src/client/views/nodes/LinkMenu.tsx     |  3 +-
 src/client/views/search/SearchItem.scss | 54 ++++++++++++++++++++++++++++-----
 src/client/views/search/SearchItem.tsx  | 31 ++++++++++++++-----
 src/client/views/search/ToggleBar.scss  |  6 ++--
 4 files changed, 75 insertions(+), 19 deletions(-)

(limited to 'src/client/views/search/ToggleBar.scss')

diff --git a/src/client/views/nodes/LinkMenu.tsx b/src/client/views/nodes/LinkMenu.tsx
index 3f09d6214..c34ccdccb 100644
--- a/src/client/views/nodes/LinkMenu.tsx
+++ b/src/client/views/nodes/LinkMenu.tsx
@@ -8,6 +8,7 @@ import React = require("react");
 import { Doc, DocListCast } from "../../../new_fields/Doc";
 import { Cast, FieldValue, StrCast } from "../../../new_fields/Types";
 import { Id } from "../../../new_fields/FieldSymbols";
+import { DocTypes } from "../../documents/Documents";
 
 interface Props {
     docView: DocumentView;
@@ -23,7 +24,7 @@ export class LinkMenu extends React.Component<Props> {
         return links.map(link => {
             let doc = FieldValue(Cast(link[key], Doc));
             if (doc) {
-                return <LinkBox key={doc[Id]} linkDoc={link} linkName={StrCast(link.title)} pairedDoc={doc} showEditor={action(() => this._editingLink = link)} type={type} />;
+                return <LinkBox key={doc[Id]} linkDoc={link} linkName={StrCast(link.title)} pairedDoc={doc} showEditor={action(() => this._editingLink = link)} type={DocTypes.LINK} />;
             }
         });
     }
diff --git a/src/client/views/search/SearchItem.scss b/src/client/views/search/SearchItem.scss
index 2d4c06a5c..5afb69164 100644
--- a/src/client/views/search/SearchItem.scss
+++ b/src/client/views/search/SearchItem.scss
@@ -12,7 +12,7 @@
 .search-info {
     display: flex;
     justify-content: flex-end;
-    width: 100%;
+    width: 40%;
 }
 
 .main-search-info {
@@ -29,20 +29,59 @@
 .search-title {
     text-transform: uppercase;
     text-align: left;
-    width: 8vw;
+    width: 80%;
     font-weight: bold;
 }
 
-.link-count {
-    height: 25px;
-    width: 25px;
-    border-radius: 50%;
+.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;
+    }
+
+    .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;
 }
 
 .search-type {
@@ -85,7 +124,8 @@
 }
 
 .search-item:hover~.searchBox-instances,
-.searchBox-instances:hover,  .searchBox-instances:active{
+.searchBox-instances:hover,
+.searchBox-instances:active {
     opacity: 1;
     background: $lighter-alt-accent;
     -webkit-transform: scale(1);
diff --git a/src/client/views/search/SearchItem.tsx b/src/client/views/search/SearchItem.tsx
index 9b4170f4c..d470090f8 100644
--- a/src/client/views/search/SearchItem.tsx
+++ b/src/client/views/search/SearchItem.tsx
@@ -3,7 +3,7 @@ import { library } from '@fortawesome/fontawesome-svg-core';
 import { faCaretUp, faFilePdf, faFilm, faImage, faObjectGroup, faStickyNote, faMusic, faLink, faChartBar, faGlobeAsia } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Cast, NumCast } from "../../../new_fields/Types";
-import { observable, runInAction } from "mobx";
+import { observable, runInAction, computed } from "mobx";
 import { listSpec } from "../../../new_fields/Schema";
 import { Doc } from "../../../new_fields/Doc";
 import { DocumentManager } from "../../util/DocumentManager";
@@ -71,9 +71,9 @@ export class SelectorContextMenu extends React.Component<SearchItemProps> {
     render() {
         return (
             < div className="parents">
-                <p className = "contexts">Contexts:</p>
-                {this._docs.map(doc => <div className="collection"><a className= "title" onClick={this.getOnClick(doc)}>{doc.col.title}</a></div>)}
-                {this._otherDocs.map(doc => <div className="collection"><a className= "title" onClick={this.getOnClick(doc)}>{doc.col.title}</a></div>)}
+                <p className="contexts">Contexts:</p>
+                {this._docs.map(doc => <div className="collection"><a className="title" onClick={this.getOnClick(doc)}>{doc.col.title}</a></div>)}
+                {this._otherDocs.map(doc => <div className="collection"><a className="title" onClick={this.getOnClick(doc)}>{doc.col.title}</a></div>)}
             </div>
         );
     }
@@ -87,10 +87,12 @@ export class SearchItem extends React.Component<SearchItemProps> {
 
     onClick = () => {
         // DocumentManager.Instance.jumpToDocument(this.props.doc);
+        console.log(Cast(this.props.doc.type, "string", ""))
         CollectionDockingView.Instance.AddRightSplit(this.props.doc);
     }
 
-    public DocumentIcon() {
+    @computed
+    public get DocumentIcon() {
         let layoutresult = Cast(this.props.doc.type, "string", "");
 
         let button = layoutresult.indexOf(DocTypes.PDF) !== -1 ? faFilePdf :
@@ -117,10 +119,20 @@ export class SearchItem extends React.Component<SearchItemProps> {
         }
     }
 
-    linkCount = () => {
+    @computed
+    get linkCount() {
         return Cast(this.props.doc.linkedToDocs, listSpec(Doc), []).length + Cast(this.props.doc.linkedFromDocs, listSpec(Doc), []).length;
     }
 
+    @computed
+    get linkString(): string {
+        let num = this.linkCount;
+        if (num === 1) {
+            return num.toString() + " link";
+        }
+        return num.toString() + " links";
+    }
+
     render() {
         return (
             <div className="search-overview">
@@ -128,8 +140,11 @@ export class SearchItem extends React.Component<SearchItemProps> {
                     <div className="main-search-info">
                         <div className="search-title" id="result" >{this.props.doc.title}</div>
                         <div className="search-info">
-                            <div className="link-count">{this.linkCount()}</div>
-                            <div className="search-type" >{this.DocumentIcon()}</div>
+                            <div className="link-container item">
+                                <div className="link-count">{this.linkCount}</div>
+                                <div className = "link-extended">{this.linkString}</div>
+                            </div>
+                            <div className="search-type" >{this.DocumentIcon}</div>
                         </div>
                     </div>
                     <div className="found">Where Found: (i.e. title, body, etc)</div>
diff --git a/src/client/views/search/ToggleBar.scss b/src/client/views/search/ToggleBar.scss
index caae354ee..353db792d 100644
--- a/src/client/views/search/ToggleBar.scss
+++ b/src/client/views/search/ToggleBar.scss
@@ -13,9 +13,9 @@
         width: 100px;
         text-align: 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;
+        -moz-transition: all 0.2s ease-in-out;
+        -o-transition: all 0.2s ease-in-out;
+        transition: all 0.2s ease-in-out;
     }
 }
 
-- 
cgit v1.2.3-70-g09d2


From 8b4bb0e1cc0ebec92403f163937f821403f970c5 Mon Sep 17 00:00:00 2001
From: madelinegr <monika_hedman@brown.edu>
Date: Tue, 18 Jun 2019 17:21:19 -0400
Subject: moving onto checkbox

---
 src/client/views/search/IconBar.1.tsx  | 453 ---------------------------------
 src/client/views/search/IconBar.scss   |   1 +
 src/client/views/search/ToggleBar.scss |  12 +-
 3 files changed, 9 insertions(+), 457 deletions(-)
 delete mode 100644 src/client/views/search/IconBar.1.tsx

(limited to 'src/client/views/search/ToggleBar.scss')

diff --git a/src/client/views/search/IconBar.1.tsx b/src/client/views/search/IconBar.1.tsx
deleted file mode 100644
index 1ffb48358..000000000
--- a/src/client/views/search/IconBar.1.tsx
+++ /dev/null
@@ -1,453 +0,0 @@
-import * as React from 'react';
-import { observer } from 'mobx-react';
-import { observable, action, runInAction } from 'mobx';
-import "./SearchBox.scss";
-import "./IconBar.scss";
-import * as anime from 'animejs';
-import { DocTypes } from '../../documents/Documents';
-import { faSearch, faFilePdf, faFilm, faImage, faObjectGroup, faStickyNote, faMusic, faLink, faChartBar, faGlobeAsia, faBan } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { library, icon } from '@fortawesome/fontawesome-svg-core';
-import * as _ from "lodash";
-import $ from 'jquery';
-
-library.add(faSearch);
-library.add(faObjectGroup);
-library.add(faImage);
-library.add(faStickyNote);
-library.add(faFilePdf);
-library.add(faFilm);
-library.add(faMusic);
-library.add(faLink);
-library.add(faChartBar);
-library.add(faGlobeAsia);
-library.add(faBan);
-
-export interface IconBarProps {
-    updateIcon(icons: string[]): void;
-    // getSelectedTypes(): string[];
-    // getRemovedTypes(): string[];
-    getIcons(): string[]
-    allIcons: string[];
-    updateSelected(list: any[]): void;
-}
-
-
-
-@observer
-export class IconBar extends React.Component<IconBarProps> {
-
-    static Instance: IconBar;
-
-    @observable noneRef = React.createRef<HTMLDivElement>();
-    @observable colRef = React.createRef<HTMLDivElement>();
-    @observable imgRef = React.createRef<HTMLDivElement>();
-    @observable textRef = React.createRef<HTMLDivElement>();
-    @observable pdfRef = React.createRef<HTMLDivElement>();
-    @observable vidRef = React.createRef<HTMLDivElement>();
-    @observable audioRef = React.createRef<HTMLDivElement>();
-    @observable linkRef = React.createRef<HTMLDivElement>();
-    @observable histRef = React.createRef<HTMLDivElement>();
-    @observable webRef = React.createRef<HTMLDivElement>();
-    @observable allRefs: React.RefObject<HTMLDivElement>[] = [this.colRef, this.imgRef, this.textRef, this.pdfRef, this.vidRef, this.audioRef, this.linkRef, this.histRef, this.webRef];
-    @observable originalSelected: string[];
-    // @observable originalSelectedNodes: string[] = this.props.getSelectedTypes();
-    // @observable originalRemovedNodes: string[] = this.props.getSelectedTypes();
-
-    @observable removeType: boolean = false;
-    @observable added: any[];
-    @observable removed: any[];
-    @observable selected: any[];
-
-    constructor(props: IconBarProps) {
-        super(props);
-        IconBar.Instance = this;
-        this.added = [];
-        this.removed = [];
-        this.selected = [];
-        this.originalSelected = this.props.getIcons();
-        // console.log("ICONS")
-        // console.log(this.props.getIcons())
-        console.log(this.originalSelected)
-    }
-
-    @action
-    downKeyHandler = (e: KeyboardEvent) => {
-        if (e.key !== "Control") return;
-        this.removeType = true;
-        e.preventDefault();
-        e.stopPropagation();
-        document.body.style.cursor = "not-allowed";
-    }
-
-    @action
-    upKeyHandler = (e: KeyboardEvent) => {
-        e.preventDefault();
-        e.stopPropagation();
-        this.removeType = false;
-        document.body.style.cursor = "default";
-
-    }
-
-    componentWillMount() {
-        document.removeEventListener("keydown", this.downKeyHandler);
-        document.addEventListener("keydown", this.downKeyHandler);
-        document.removeEventListener("keyup", this.upKeyHandler);
-        document.addEventListener("keyup", this.upKeyHandler);
-    }
-
-    componentWillUnMount() {
-        document.removeEventListener("keyup", this.upKeyHandler);
-        document.removeEventListener("keydown", this.downKeyHandler);
-    }
-
-
-    componentDidMount = () => {
-        //i KNOW this is bad i just can't get this to re render eeeeeeeek
-        this.forceUpdate();
-    }
-
-    @action.bound
-    resetIconFilters = () => {
-        this.unselectAllRefs();
-        // lmao sorry
-        this.forceUpdate();
-    }
-
-    //gets ref associated with given string
-    @action.bound
-    getRef = (value: string) => {
-        let toReturn;
-        switch (value) {
-            case (DocTypes.NONE):
-                toReturn = this.noneRef.current;
-                break;
-            case (DocTypes.AUDIO):
-                toReturn = this.audioRef.current;
-                break;
-            case (DocTypes.COL):
-                toReturn = this.colRef.current;
-                break;
-            case (DocTypes.HIST):
-                toReturn = this.histRef.current;
-                break;
-            case (DocTypes.IMG):
-                toReturn = this.imgRef.current;
-                break;
-            case (DocTypes.LINK):
-                toReturn = this.linkRef.current;
-                break;
-            case (DocTypes.PDF):
-                toReturn = this.pdfRef.current;
-                break;
-            case (DocTypes.TEXT):
-                toReturn = this.textRef.current;
-                break;
-            case (DocTypes.VID):
-                toReturn = this.vidRef.current;
-                break;
-            case (DocTypes.WEB):
-                toReturn = this.webRef.current;
-                break;
-            default:
-                toReturn = null;
-                break;
-        }
-
-        return toReturn;
-    }
-
-    @action.bound
-    unselectAllRefs() {
-        this.resetDataRemoved();
-        this.resetDataSelected();
-        this.removed = [];
-        this.added = [];
-    }
-
-    @action.bound
-    resetDataSelected() {
-        this.allRefs.forEach(element => {
-            if (element.current) {
-                element.current.setAttribute("data-selected", "false");
-            }
-        });
-    }
-
-    @action.bound
-    resetDataRemoved() {
-        this.allRefs.forEach(element => {
-            if (element.current) {
-                element.current.setAttribute("data-removed", "false");
-            }
-        });
-    }
-
-    @action.bound
-    alternateSelectedRef(ref: HTMLDivElement | React.RefObject<HTMLDivElement>) {
-        let newRef: HTMLDivElement | null;
-        if (!(ref instanceof HTMLDivElement)) { newRef = ref.current; }
-        else { newRef = ref; }
-        if (newRef) {
-            if (newRef.getAttribute("data-selected") === "true") {
-                newRef.setAttribute("data-selected", "false");
-            }
-            else {
-                newRef.setAttribute("data-selected", "true");
-            }
-        }
-    }
-
-    @action.bound
-    setToRemove(ref: HTMLDivElement | React.RefObject<HTMLDivElement>) {
-        let newRef: HTMLDivElement | null;
-        if (!(ref instanceof HTMLDivElement)) { newRef = ref.current; }
-        else { newRef = ref; }
-        if (newRef) newRef.setAttribute("data-removed", "true");
-    }
-
-    @action.bound
-    setToAdd(ref: HTMLDivElement | React.RefObject<HTMLDivElement>) {
-        let newRef: HTMLDivElement | null;
-        if (!(ref instanceof HTMLDivElement)) { newRef = ref.current; }
-        else { newRef = ref; }
-        if (newRef) newRef.setAttribute("data-removed", "false");
-    }
-
-    //TODO: this needs help
-    @action.bound
-    onClick = (value: string) => {
-        let icons: string[] = this.props.getIcons();
-        let ref: any = this.getRef(value);
-        // if(ref) this.alternateSelectedRef(ref);
-
-        if (value === DocTypes.NONE) {
-            icons = this.props.allIcons;
-            // if its none, change the color of all the other circles
-            this.resetIconFilters();
-        }
-
-        //if type should be removed
-        if (this.removeType) {
-            if (this.added.length !== 0) {
-                icons = this.props.allIcons;
-                this.resetIconFilters();
-                this.added = [];
-                icons = _.without(icons, value);
-                this.removed.push(ref);
-                this.setToRemove(ref)
-                ref.setAttribute("data-selected", "true")
-            }
-            else {
-                //if it's included in the list, remove it
-                if (icons.includes(value)) {
-                    icons = _.without(icons, value);
-                    this.removed.push(ref);
-                    this.setToRemove(ref);
-                    ref.setAttribute("data-selected", "true")
-                }
-                //if it's not included, add it back
-                else {
-                    icons.push(value);
-                    //take it out of removed list
-                    this.removed = _.without(this.removed, this.getRef(value));
-                    ref.setAttribute("data-selected", "false")
-                }
-            }
-            this.selected = this.removed;
-        }
-        //if type should be added
-        else {
-            if (this.removed.length !== 0) {
-                icons = this.props.allIcons;
-                this.resetIconFilters();
-                this.removed = [];
-                icons = [value];
-                this.added.push(ref);
-                this.setToAdd(ref)
-                ref.setAttribute("data-selected", "true")
-            }
-            else {
-                //if its included in the list, remove it
-                if (icons.includes(value)) {
-                    icons = _.without(icons, value);
-                    this.added = _.without(this.added, this.getRef(value))
-                    ref.setAttribute("data-selected", "false")
-                }
-                //if its not included in the list, add it
-                else {
-                    icons.push(value);
-                    this.added.push(ref)
-                    this.setToAdd(ref)
-                    ref.setAttribute("data-selected", "true")
-                }
-            }
-            this.selected = this.added;
-        }
-
-        this.props.updateIcon(icons);
-        this.props.updateSelected(this.selected);
-        //ok i know that this is bad but i dont know how else to get it to rerender and change the classname,
-        //any help here is greatly appreciated thanks frens
-        this.forceUpdate();
-    }
-
-    //checks if option is selected based on the attribute data-selected
-    //this is for visual purposes
-    @action.bound
-    isRefSelected = (ref: HTMLDivElement | React.RefObject<HTMLDivElement>) => {
-        let newRef: HTMLDivElement | null;
-        if (!(ref instanceof HTMLDivElement)) { newRef = ref.current; }
-        else { newRef = ref; }
-        if (newRef) {
-            if (newRef.getAttribute("data-selected") === "true") {
-                return true;
-            }
-            return false;
-        }
-    }
-
-    //checks attribues of ref to return whether or not a type should be specifically included in the search
-    @action.bound
-    getInitialSelectedStatus = (type: string) => {
-        console.log(this.originalSelected)
-        if (this.originalSelected.includes(type)) {
-            return "true";
-        }
-        return "false";
-    }
-
-    //checks attributes of ref to return whether or not it should be excluded from search results
-    //this is for visual purposes
-    @action.bound
-    isRemoved = (ref: HTMLDivElement | React.RefObject<HTMLDivElement>) => {
-        let newRef: HTMLDivElement | null;
-        if (!(ref instanceof HTMLDivElement)) { newRef = ref.current; }
-        else { newRef = ref; }
-        if (newRef) {
-            if (newRef.getAttribute("data-removed") === "true") {
-                return true;
-            }
-            return false;
-        }
-    }
-
-    //gets status upon mounting if a doc type should be removed from the results
-    @action.bound
-    getInitialRemovedStatus = (type: string) => {
-        if (!this.originalSelected.includes(type)) {
-            return "true";
-        }
-        return "false";
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="filter icon-title">Filter by type of node</div>
-                <div className="filter icon-bar">
-                    <div className="filter type-outer">
-                        <div className={"type-icon none not-selected"}
-                            ref={this.noneRef}
-                            data-selected={"false"}
-                            data-removed={"false"}
-                            onClick={() => { this.onClick(DocTypes.NONE); }}>
-                            <FontAwesomeIcon className="fontawesome-icon" style={{ order: -2 }} icon={faBan} />
-                        </div>
-                        <div className="filter-description">Clear</div>
-                    </div>
-                    <div className="type-outer">
-                        <div className={"type-icon filter " + (this.isRefSelected(this.pdfRef) ? "selected " + (this.isRemoved(this.pdfRef) ? "removed" : "add") : "not-selected")}
-                            ref={this.pdfRef}
-                            data-selected={this.getInitialSelectedStatus(DocTypes.PDF)}
-                            data-removed={this.getInitialRemovedStatus(DocTypes.PDF)}
-                            onClick={() => { this.onClick(DocTypes.PDF); }}>
-                            <FontAwesomeIcon className="fontawesome-icon filter" style={{ order: 0 }} icon={faFilePdf} />
-                        </div>
-                        <div className="filter-description">{DocTypes.PDF}</div>
-                    </div>
-                    <div className="type-outer">
-                        <div className={"type-icon filter " + (this.isRefSelected(this.histRef) ? "selected " + (this.isRemoved(this.histRef) ? "removed" : "add") : "not-selected")}
-                            ref={this.histRef}
-                            data-selected={this.getInitialSelectedStatus(DocTypes.HIST)}
-                            data-removed={this.getInitialRemovedStatus(DocTypes.HIST)}
-                            onClick={() => { this.onClick(DocTypes.HIST); }}>
-                            <FontAwesomeIcon className="fontawesome-icon filter" style={{ order: 1 }} icon={faChartBar} />
-                        </div>
-                        <div className="filter-description">{DocTypes.HIST}</div>
-                    </div>
-                    <div className="type-outer">
-                        <div className={"type-icon filter " + (this.isRefSelected(this.colRef) ? "selected " + (this.isRemoved(this.colRef) ? "removed" : "add") : "not-selected")}
-                            ref={this.colRef}
-                            data-selected={this.getInitialSelectedStatus(DocTypes.COL)}
-                            data-removed={this.getInitialRemovedStatus(DocTypes.COL)}
-                            onClick={() => { this.onClick(DocTypes.COL); }}>
-                            <FontAwesomeIcon className="fontawesome-icon filter" style={{ order: 2 }} icon={faObjectGroup} />
-                        </div>
-                        <div className="filter-description">{DocTypes.COL}</div>
-                    </div>
-                    <div className="type-outer">
-                        <div className={"type-icon filter " + (this.isRefSelected(this.imgRef) ? "selected " + (this.isRemoved(this.imgRef) ? "removed" : "add") : "not-selected")}
-                            ref={this.imgRef}
-                            data-selected={this.getInitialSelectedStatus(DocTypes.IMG)}
-                            data-removed={this.getInitialRemovedStatus(DocTypes.IMG)}
-                            onClick={() => { this.onClick(DocTypes.IMG); }}>
-                            <FontAwesomeIcon className="fontawesome-icon filter" style={{ order: 3 }} icon={faImage} />
-                        </div>
-                        <div className="filter-description">{DocTypes.IMG}</div>
-                    </div>
-                    <div className="type-outer">
-                        <div className={"type-icon filter " + (this.isRefSelected(this.vidRef) ? "selected " + (this.isRemoved(this.vidRef) ? "removed" : "add") : "not-selected")}
-                            ref={this.vidRef}
-                            data-selected={this.getInitialSelectedStatus(DocTypes.VID)}
-                            data-removed={this.getInitialRemovedStatus(DocTypes.VID)}
-                            onClick={() => { this.onClick(DocTypes.VID); }}>
-                            <FontAwesomeIcon className="fontawesome-icon filter" style={{ order: 4 }} icon={faFilm} />
-                        </div>
-                        <div className="filter-description">{DocTypes.VID}</div>
-                    </div>
-                    <div className="type-outer">
-                        <div className={"type-icon filter " + (this.isRefSelected(this.webRef) ? "selected " + (this.isRemoved(this.webRef) ? "removed" : "add") : "not-selected")}
-                            ref={this.webRef}
-                            data-selected={this.getInitialSelectedStatus(DocTypes.WEB)}
-                            data-removed={this.getInitialRemovedStatus(DocTypes.WEB)}
-                            onClick={() => { this.onClick(DocTypes.WEB); }}>
-                            <FontAwesomeIcon className="fontawesome-icon filter" style={{ order: 5 }} icon={faGlobeAsia} />
-                        </div>
-                        <div className="filter-description">{DocTypes.WEB}</div>
-                    </div>
-                    <div className="type-outer">
-                        <div className={"type-icon filter " + (this.isRefSelected(this.linkRef) ? "selected " + (this.isRemoved(this.linkRef) ? "removed" : "add") : "not-selected")}
-                            ref={this.linkRef}
-                            data-selected={this.getInitialSelectedStatus(DocTypes.LINK)}
-                            data-removed={this.getInitialRemovedStatus(DocTypes.LINK)}
-                            onClick={() => { this.onClick(DocTypes.LINK); }}>
-                            <FontAwesomeIcon className="fontawesome-icon filter" style={{ order: 6 }} icon={faLink} />
-                        </div>
-                        <div className="filter-description">{DocTypes.LINK}</div>
-                    </div>
-                    <div className="type-outer">
-                        <div className={"type-icon filter " + (this.isRefSelected(this.audioRef) ? "selected " + (this.isRemoved(this.audioRef) ? "removed" : "add") : "not-selected")}
-                            ref={this.audioRef}
-                            data-selected={this.getInitialSelectedStatus(DocTypes.AUDIO)}
-                            data-removed={this.getInitialRemovedStatus(DocTypes.AUDIO)}
-                            onClick={() => { this.onClick(DocTypes.AUDIO); }}>
-                            <FontAwesomeIcon className="fontawesome-icon filter" style={{ order: 7 }} icon={faMusic} />
-                        </div>
-                        <div className="filter-description">{DocTypes.AUDIO}</div>
-                    </div>
-                    <div className="type-outer">
-                        <div className={"type-icon filter " + (this.isRefSelected(this.textRef) ? "selected " + (this.isRemoved(this.textRef) ? "removed" : "add") : "not-selected")}
-                            ref={this.textRef}
-                            data-selected={this.getInitialSelectedStatus(DocTypes.TEXT)}
-                            data-removed={this.getInitialRemovedStatus(DocTypes.TEXT)}
-                            onClick={() => { this.onClick(DocTypes.TEXT); }}>
-                            <FontAwesomeIcon className="fontawesome-icon filter" style={{ order: 8 }} icon={faStickyNote} />
-                        </div>
-                        <div className="filter-description">{DocTypes.TEXT}</div>
-                    </div>
-                </div>
-            </div>
-        );
-    }
-}
diff --git a/src/client/views/search/IconBar.scss b/src/client/views/search/IconBar.scss
index cb7de15a0..db4e49fe9 100644
--- a/src/client/views/search/IconBar.scss
+++ b/src/client/views/search/IconBar.scss
@@ -1,5 +1,6 @@
 @import "../globalCssVariables";
 
+
 .icon-bar {
     display: flex;
     justify-content: space-evenly;
diff --git a/src/client/views/search/ToggleBar.scss b/src/client/views/search/ToggleBar.scss
index 353db792d..68f0c9c2b 100644
--- a/src/client/views/search/ToggleBar.scss
+++ b/src/client/views/search/ToggleBar.scss
@@ -1,6 +1,6 @@
 @import "../globalCssVariables";
 
-.toggle-title{
+.toggle-title {
     display: flex;
     align-items: center;
     color: $light-color;
@@ -9,7 +9,7 @@
     justify-content: space-around;
     padding: 5px;
 
-    .toggle-option{
+    .toggle-option {
         width: 100px;
         text-align: center;
         -webkit-transition: all 0.2s ease-in-out;
@@ -19,7 +19,7 @@
     }
 }
 
-.toggle-bar{
+.toggle-bar {
     height: 50px;
     background-color: $alt-accent;
     border-radius: 10px;
@@ -27,10 +27,14 @@
     display: flex;
     align-items: center;
 
-    .toggle-button{
+    .toggle-button {
         width: 275px;
         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 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/ToggleBar.scss')

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 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/ToggleBar.scss')

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