mleh end of day 6/21

4 files changed, 88 insertions, 56 deletions

diff --git a/src/client/views/search/FieldFilters.tsx b/src/client/views/search/FieldFilters.tsx
index 5ad08a7bc..f87755478 100644
--- a/src/client/views/search/FieldFilters.tsx
+++ b/src/client/views/search/FieldFilters.tsx
@@ -32,7 +32,7 @@ export class FieldFilters extends React.Component<FieldFilterProps> {
 
     render() {
         return (
-            <div>
+            <div className = "field-filters">
                 <CheckBox default = {true} numCount={3} parent={this} originalStatus={this.props.titleFieldStatus} updateStatus={this.props.updateTitleStatus} title={Keys.TITLE} />
                 <CheckBox default = {true} numCount={3} parent={this} originalStatus={this.props.authorFieldStatus} updateStatus={this.props.updateAuthorStatus} title={Keys.AUTHOR} />
                 <CheckBox default = {true} numCount={3} parent={this} originalStatus={this.props.dataFieldStatus} updateStatus={this.props.updateDataStatus} title={Keys.DATA} />
diff --git a/src/client/views/search/NaviconButton.tsx b/src/client/views/search/NaviconButton.tsx
index d89874453..8c022fab6 100644
--- a/src/client/views/search/NaviconButton.tsx
+++ b/src/client/views/search/NaviconButton.tsx
@@ -4,26 +4,17 @@ import "./NaviconButton.scss";
 import * as $ from 'jquery';
 import { observable } from 'mobx';
 
+export interface NaviconProps{
+    onClick(): void;
+}
 
-export class NaviconButton extends React.Component {
+
+export class NaviconButton extends React.Component<NaviconProps> {
 
     @observable ref: React.RefObject<HTMLAnchorElement> = React.createRef();
 
     componentDidMount = () => {
-        // 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){
@@ -31,16 +22,9 @@ export class NaviconButton extends React.Component {
                 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="#" ref = {this.ref} title="Menu">
diff --git a/src/client/views/search/SearchBox.scss b/src/client/views/search/SearchBox.scss
index c65a8b084..98eb31ba1 100644
--- a/src/client/views/search/SearchBox.scss
+++ b/src/client/views/search/SearchBox.scss
@@ -32,11 +32,15 @@
 
 }
 
-.filter-title{
+.filter-title {
     font-size: 18;
     text-transform: uppercase;
     margin-top: 10px;
     margin-bottom: 10px;
+    -webkit-transition: all 0.2s ease-in-out;
+    -moz-transition: all 0.2s ease-in-out;
+    -o-transition: all 0.2s ease-in-out;
+    transition: all 0.2s ease-in-out;
 }
 
 .searchBox-results {
@@ -54,13 +58,22 @@
     flex-direction: column;
     display: inline-block;
 
-    .filter-header{
+    .filter-header {
         display: flex;
         align-items: center;
+        margin-bottom: 10px;
+    }
+
+    .filter-header:hover .filter-title{
+        transform: scale(1.05);
+    }
+
+    .filter-panel {
+        display: none;
     }
 }
 
-#filter{
+#filter {
     padding: 25px;
     width: 600px;
 }
@@ -79,7 +92,7 @@
     margin-right: 72px;
 }
 
-.filter-collection{
+.filter-collection {
     display: inline-block;
     width: 100%;
 }
@@ -91,18 +104,18 @@
     margin-bottom: 5px;
 }
 
-.filter-div{
+.filter-div {
     margin-top: 10px;
     margin-bottom: 10px;
     display: inline-block;
     width: 100%;
 }
 
-.collection-title{
+.collection-title {
     color: $light-color;
     text-transform: uppercase;
     margin-top: 5px;
-    margin-bottom: 5px; 
+    margin-bottom: 5px;
 }
 
 .no-result {
@@ -117,3 +130,9 @@
     font-weight: bold;
 }
 
+.field-filters {
+    width: 100%;
+    display: grid;
+    grid-template-columns: 18% 20% 60%;
+    // white-space: space-between;
+}
\ No newline at end of file
diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
index a76269114..9a0a69f87 100644
--- a/src/client/views/search/SearchBox.tsx
+++ b/src/client/views/search/SearchBox.tsx
@@ -2,33 +2,23 @@ import * as React from 'react';
 import { observer } from 'mobx-react';
 import { observable, action, runInAction } from 'mobx';
 import "./SearchBox.scss";
-import { faSearch, faFilePdf, faFilm, faImage, faObjectGroup, faStickyNote, faMusic, faLink, faChartBar, faGlobeAsia, faBan, faThList, faWineGlassAlt } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { library } from '@fortawesome/fontawesome-svg-core';
 import * as rp from 'request-promise';
 import { SearchItem } from './SearchItem';
 import { DocServer } from '../../DocServer';
-import { Doc, Opt } from '../../../new_fields/Doc';
+import { Doc } from '../../../new_fields/Doc';
 import { Id } from '../../../new_fields/FieldSymbols';
 import { SetupDrag } from '../../util/DragManager';
 import { Docs, DocTypes } from '../../documents/Documents';
 import { RouteStore } from '../../../server/RouteStore';
 import { NumCast, Cast, StrCast } from '../../../new_fields/Types';
 import { SearchUtil } from '../../util/SearchUtil';
-import * as anime from 'animejs';
-import { updateFunction } from '../../../new_fields/util';
 import * as _ from "lodash";
-import { findDOMNode } from 'react-dom';
 import { ToggleBar } from './ToggleBar';
 import { IconBar } from './IconBar';
-import { type } from 'os';
-import { CheckBox } from './CheckBox';
 import { FieldFilters } from './FieldFilters';
 import { SelectionManager } from '../../util/SelectionManager';
 import { DocumentView } from '../nodes/DocumentView';
-import { CollectionView } from '../collections/CollectionView';
-import { CollectionPDFView } from '../collections/CollectionPDFView';
-import { CollectionVideoView } from '../collections/CollectionVideoView';
 import { CollectionFilters } from './CollectionFilters';
 import { NaviconButton } from './NaviconButton';
 
@@ -59,6 +49,10 @@ export class SearchBox extends React.Component {
     @observable collectionStatus = false;
     @observable collectionSelfStatus = true;
     @observable collectionParentStatus = true;
+    @observable private _wordStatusOpen: boolean = false;
+    @observable private _typeOpen: boolean = false;
+    @observable private _colOpen: boolean = false;
+    @observable private _fieldOpen: boolean = false;
 
     constructor(props: Readonly<{}>) {
         super(props);
@@ -72,6 +66,29 @@ export class SearchBox extends React.Component {
             }
         });
 
+
+        var acc = document.getElementsByClassName('filter-header');
+        // var i: number = 0;
+
+        console.log("hello")
+
+        for (var i = 0; i < acc.length; i++) {
+            // for(let entry of acc){
+            console.log("looping")
+            acc[i].addEventListener("click", function (this: HTMLElement) {
+                this.classList.toggle("active");
+
+                var panel = this.nextElementSibling as HTMLElement;
+                if (panel) {
+                    if (panel.style.display === "inline-block") {
+                        panel.style.display = "none";
+                    } else {
+                        panel.style.display = "inline-block";
+                    }
+                }
+            });
+        }
+
         //empties search query after 30 seconds of the search bar/filter box not being open
         // if (!this._resultsOpen && !this._filterOpen) {
         //     setTimeout(this.clearSearchQuery, 30000);
@@ -79,6 +96,18 @@ export class SearchBox extends React.Component {
     }
 
     @action.bound
+    toggleFieldOpen() { this._fieldOpen = !this._fieldOpen; }
+
+    @action.bound
+    toggleColOpen() { this._colOpen = !this._colOpen; }
+
+    @action.bound
+    toggleTypeOpen() { this._typeOpen = !this._typeOpen; }
+
+    @action.bound
+    toggleWordStatusOpen() { this._wordStatusOpen = !this._wordStatusOpen; }
+
+    @action.bound
     resetFilters = () => {
         ToggleBar.Instance.resetToggle();
         IconBar.Instance.selectAll();
@@ -457,37 +486,37 @@ export class SearchBox extends React.Component {
                     <div className="filter-form" onPointerDown={this.stopProp} id="filter" style={this._filterOpen ? { display: "flex" } : { display: "none" }}>
                         <div id="header">Filter Search Results</div>
                         <div>
-                            <div className="required-words filter-div">
-                                <div className = "filter-header">
+                            <div className="filter-div">
+                                <div className="filter-header">
                                     <div className='filter-title words'>Required words</div>
-                                    <a style = {{marginLeft: "auto"}}><NaviconButton/></a>
+                                    <div style={{ marginLeft: "auto" }}><NaviconButton onClick={this.toggleWordStatusOpen} /></div>
                                 </div>
-                                <ToggleBar originalStatus={this._basicWordStatus} optionOne={"Include Any Keywords"} optionTwo={"Include All Keywords"} />
+                                <div className="filter-panel"><ToggleBar originalStatus={this._basicWordStatus} optionOne={"Include Any Keywords"} optionTwo={"Include All Keywords"} /></div>
                             </div>
                             <div className="filter-div">
-                                <div className = "filter-header">
+                                <div className="filter-header">
                                     <div className="filter-title icon">Filter by type of node</div>
-                                    <a style = {{marginLeft: "auto"}}><NaviconButton/></a>
+                                    <div style={{ marginLeft: "auto" }}><NaviconButton onClick={this.toggleTypeOpen} /></div>
                                 </div>
-                                <IconBar />
+                                <div className="filter-panel"><IconBar /></div>
                             </div>
                             <div className="filter-div">
-                                <div className = "filter-header">
+                                <div className="filter-header">
                                     <div className='filter-title collection'>Search in current collections</div>
-                                    <a style = {{marginLeft: "auto"}}><NaviconButton/></a>
+                                    <div style={{ marginLeft: "auto" }}><NaviconButton onClick={this.toggleColOpen} /></div>
                                 </div>
-                                <CollectionFilters
+                                <div className="filter-panel"><CollectionFilters
                                     updateCollectionStatus={this.updateCollectionStatus} updateParentCollectionStatus={this.updateParentCollectionStatus} updateSelfCollectionStatus={this.updateSelfCollectionStatus}
-                                    collectionStatus={this.collectionStatus} collectionParentStatus={this.collectionParentStatus} collectionSelfStatus={this.collectionSelfStatus} />
+                                    collectionStatus={this.collectionStatus} collectionParentStatus={this.collectionParentStatus} collectionSelfStatus={this.collectionSelfStatus} /></div>
                             </div>
                             <div className="filter-div">
-                                <div className = "filter-header">
+                                <div className="filter-header">
                                     <div className="filter-title field">Filter by Basic Keys</div>
-                                    <a style = {{marginLeft: "auto"}}><NaviconButton/></a>
+                                    <div style={{ marginLeft: "auto" }}><NaviconButton onClick={this.toggleFieldOpen} /></div>
                                 </div>
-                                <FieldFilters
+                                <div className="filter-panel"><FieldFilters
                                     titleFieldStatus={this.titleFieldStatus} dataFieldStatus={this.dataFieldStatus} authorFieldStatus={this.authorFieldStatus}
-                                    updateAuthorStatus={this.updateAuthorStatus} updateDataStatus={this.updateDataStatus} updateTitleStatus={this.updateTitleStatus} />
+                                    updateAuthorStatus={this.updateAuthorStatus} updateDataStatus={this.updateDataStatus} updateTitleStatus={this.updateTitleStatus} /> </div>
                             </div>
                         </div>
                         <button className="filter-div reset-filter" onClick={this.resetFilters}>Reset Filters</button>