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

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

(limited to 'src')

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