end of day 6/7

3 files changed, 47 insertions, 17 deletions

diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 5a6de6793..b3a0fde8d 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -60,6 +60,15 @@ export class MainView extends React.Component {
         }
     }
 
+    componentWillMount() {
+        document.removeEventListener("keydown", this.globalKeyHandler);
+        document.addEventListener("keydown", this.globalKeyHandler);
+    }
+
+    componentWillUnMount() {
+        document.removeEventListener("keydown", this.globalKeyHandler);
+    }
+
     constructor(props: Readonly<{}>) {
         super(props);
         MainView.Instance = this;
@@ -317,8 +326,6 @@ export class MainView extends React.Component {
     globalKeyHandler = (e: KeyboardEvent) => {
         if (e.key === "Control" || !e.ctrlKey) return;
 
-        console.log("keyevent");
-
         e.preventDefault();
         e.stopPropagation();
 
@@ -339,6 +346,8 @@ export class MainView extends React.Component {
             case "escape":
                 _.mapValues(this.globalDisplayFlags, () => false)
                 break;
+            case "f":
+                this.isSearchVisible = !this.isSearchVisible;
         }
     }
 
diff --git a/src/client/views/SearchBox.scss b/src/client/views/SearchBox.scss
index 02b8f6a96..8ec440fca 100644
--- a/src/client/views/SearchBox.scss
+++ b/src/client/views/SearchBox.scss
@@ -42,10 +42,14 @@
     position: relative;
     right: 1px;
     color: $light-color;
-    padding: 10px;
     flex-direction: column;
 }
 
+#filter{
+    padding: 25px;
+    width: 600px;
+}
+
 #header {
     text-transform: uppercase;
     letter-spacing: 2px;
@@ -73,8 +77,23 @@
         align-items: center;
         height: 40px;
         width: 100%;
+        flex-wrap: wrap;
+        font-size: 2em;
+    }
+
+    .type-icon{
+        margin-right: 5px;
+        margin-left: 5px;
+        height: 40px;
+        width: 40px;
+        color: $light-color;
+        border-radius: 50%;
+    }
 
+    .type-icon:hover{
+        background-color: $alt-accent;
     }
+    
 }
 
 .toggle-title{
@@ -83,7 +102,7 @@
     color: $light-color;
     text-transform: uppercase;
     flex-direction: row;
-    justify-content: space-between;
+    justify-content: space-around;
     padding: 5px;
 
     .toggle-option{
@@ -93,7 +112,6 @@
 }
 
 .toggle-bar{
-    width: 100%;
     height: 50px;
     background-color: $alt-accent;
     border-radius: 10px;
@@ -102,7 +120,7 @@
     align-items: center;
 
     .toggle-button{
-        width: 80px;
+        width: 275px;
         height: 100%;
         border-radius: 10px;
         background-color: $light-color;
diff --git a/src/client/views/SearchBox.tsx b/src/client/views/SearchBox.tsx
index 3fca90522..d959826a1 100644
--- a/src/client/views/SearchBox.tsx
+++ b/src/client/views/SearchBox.tsx
@@ -68,6 +68,7 @@ export class ToggleBar extends React.Component<ToggleBarProps>{
         if (bar && tog) {
             barwidth = bar.clientWidth;
             togwidth = tog.clientWidth;
+            console.log(togwidth)
         }
         let totalWidth = (barwidth - togwidth - 10);
 
@@ -83,6 +84,8 @@ export class ToggleBar extends React.Component<ToggleBarProps>{
     @action.bound
     onclick() {
         this._status = !this._status;
+        console.log("sttaus should be:", this._status)
+        this.props.changeStatus(this._status);
         this.timeline.play();
         this.timeline.reverse();
     }
@@ -107,7 +110,6 @@ export class ToggleBar extends React.Component<ToggleBarProps>{
 export class SearchBox extends React.Component {
     @observable
     searchString: string = "";
-
     @observable _wordStatus: boolean = true;
 
     @observable private _open: boolean = false;
@@ -270,6 +272,7 @@ export class SearchBox extends React.Component {
 
     handleWordQueryChange = (value: boolean) => {
         this._wordStatus = value;
+        console.log("changed toL:", this._wordStatus)
     }
 
     // Useful queries:
@@ -306,16 +309,16 @@ export class SearchBox extends React.Component {
                                 temp for filtering by a type of node
                                 <div className="icon-bar">
                                     {/* hoping to ultimately animate a reorder when an icon is chosen */}
-                                    <FontAwesomeIcon style={{ order: -2 }} icon={faBan} size="2x" />
-                                    <FontAwesomeIcon style={{ order: 0 }} icon={faFilePdf} size="2x" />
-                                    <FontAwesomeIcon style={{ order: 1 }} icon={faChartBar} size="2x" />
-                                    <FontAwesomeIcon style={{ order: 2 }} icon={faObjectGroup} size="2x" />
-                                    <FontAwesomeIcon style={{ order: 3 }} icon={faImage} size="2x" />
-                                    <FontAwesomeIcon style={{ order: 4 }} icon={faFilm} size="2x" />
-                                    <FontAwesomeIcon style={{ order: 5 }} icon={faGlobeAsia} size="2x" />
-                                    <FontAwesomeIcon style={{ order: 6 }} icon={faLink} size="2x" />
-                                    <FontAwesomeIcon style={{ order: 7 }} icon={faMusic} size="2x" />
-                                    <FontAwesomeIcon style={{ order: 8 }} icon={faStickyNote} size="2x" />
+                                    <FontAwesomeIcon className = "type-icon" style={{ order: -2 }} icon={faBan}  />
+                                    <FontAwesomeIcon className = "type-icon" style={{ order: 0 }} icon={faFilePdf} />
+                                    <FontAwesomeIcon className = "type-icon" style={{ order: 1 }} icon={faChartBar} />
+                                    <FontAwesomeIcon className = "type-icon" style={{ order: 2 }} icon={faObjectGroup}  />
+                                    <FontAwesomeIcon className = "type-icon" style={{ order: 3 }} icon={faImage}  />
+                                    <FontAwesomeIcon className = "type-icon" style={{ order: 4 }} icon={faFilm}  />
+                                    <FontAwesomeIcon className = "type-icon" style={{ order: 5 }} icon={faGlobeAsia}  />
+                                    <FontAwesomeIcon className = "type-icon" style={{ order: 6 }} icon={faLink}  />
+                                    <FontAwesomeIcon className = "type-icon" style={{ order: 7 }} icon={faMusic} />
+                                    <FontAwesomeIcon className = "type-icon" style={{ order: 8 }} icon={faStickyNote} />
                                 </div>
                             </div>
                             <div className="filter-collection">