refactor working

7 files changed, 351 insertions, 194 deletions

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 {