From 2d3deb7291b7d98acf71566a67c4d648a90ef5af Mon Sep 17 00:00:00 2001
From: yipstanley <stanley_yip@brown.edu>
Date: Sat, 28 Sep 2019 16:00:44 -0400
Subject: search bar filtering updatesA

---
 src/client/views/MainView.tsx          |  3 ++-
 src/client/views/search/SearchBox.scss |  9 +++++++++
 src/client/views/search/SearchBox.tsx  | 11 ++++++++---
 3 files changed, 19 insertions(+), 4 deletions(-)

(limited to 'src')

diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index afc3612f6..ffbba3a20 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -1,5 +1,5 @@
 import { IconName, library } from '@fortawesome/fontawesome-svg-core';
-import { faLink, faArrowDown, faArrowUp, faBolt, faCaretUp, faCat, faCheck, faClone, faCloudUploadAlt, faCommentAlt, faCut, faExclamation, faFilePdf, faFilm, faFont, faGlobeAsia, faLongArrowAltRight, faMusic, faObjectGroup, faPause, faPenNib, faPlay, faPortrait, faRedoAlt, faThumbtack, faTree, faUndoAlt, faTv, faChevronRight } from '@fortawesome/free-solid-svg-icons';
+import { faLink, faArrowDown, faArrowUp, faBolt, faCaretUp, faCat, faCheck, faClone, faCloudUploadAlt, faCommentAlt, faCut, faExclamation, faFilePdf, faFilm, faFont, faGlobeAsia, faLongArrowAltRight, faMusic, faObjectGroup, faPause, faPenNib, faPlay, faPortrait, faRedoAlt, faThumbtack, faTree, faUndoAlt, faTv, faChevronRight, faEllipsisV } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { action, computed, configure, observable, reaction, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
@@ -196,6 +196,7 @@ export class MainView extends React.Component {
         library.add(faCloudUploadAlt);
         library.add(faBolt);
         library.add(faChevronRight);
+        library.add(faEllipsisV);
         this.initEventListeners();
         this.initAuthenticationRouters();
     }
diff --git a/src/client/views/search/SearchBox.scss b/src/client/views/search/SearchBox.scss
index 5ed33a596..0dd4d3dc5 100644
--- a/src/client/views/search/SearchBox.scss
+++ b/src/client/views/search/SearchBox.scss
@@ -34,6 +34,9 @@
 
         &.searchBox-filter {
             align-self: stretch;
+        }
+
+        &.searchBox-submit {
             margin-left: 2px;
             margin-right: 2px
         }
@@ -45,6 +48,12 @@
     }
 }
 
+.searchBox-quickFilter {
+    width: 500px;
+    margin-left: 25px;
+    margin-top: 10px;
+}
+
 .searchBox-results {
     margin-right: 136px;
     top: 300px;
diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
index 0d50124dd..1b8177842 100644
--- a/src/client/views/search/SearchBox.tsx
+++ b/src/client/views/search/SearchBox.tsx
@@ -18,6 +18,7 @@ import { FilterBox } from './FilterBox';
 import "./FilterBox.scss";
 import "./SearchBox.scss";
 import { SearchItem } from './SearchItem';
+import { IconBar } from './IconBar';
 
 library.add(faTimes);
 
@@ -231,7 +232,7 @@ export class SearchBox extends React.Component {
     }
 
     @action.bound
-    openSearch(e: React.PointerEvent) {
+    openSearch(e: React.SyntheticEvent) {
         e.stopPropagation();
         this._openNoResults = false;
         FilterBox.Instance.closeFilter();
@@ -337,12 +338,16 @@ export class SearchBox extends React.Component {
                         <FontAwesomeIcon icon="object-group" size="lg" />
                     </span>
                     <input value={this._searchString} onChange={this.onChange} type="text" placeholder="Search..." id="search-input" ref={this.inputRef}
-                        className="searchBox-barChild searchBox-input" onPointerDown={this.openSearch} onKeyPress={this.enter}
+                        className="searchBox-barChild searchBox-input" onPointerDown={this.openSearch} onKeyPress={this.enter} onFocus={this.openSearch}
                         style={{ width: this._searchbarOpen ? "500px" : "100px" }} />
+                    <button className="searchBox-barChild searchBox-filter" title="Advanced Filtering Options" onClick={FilterBox.Instance.openFilter} onPointerDown={FilterBox.Instance.stopProp}><FontAwesomeIcon icon="ellipsis-v" color="white" /></button>
                     <button className="searchBox-barChild searchBox-submit" onClick={this.submitSearch} onPointerDown={FilterBox.Instance.stopProp}>Submit</button>
-                    <button className="searchBox-barChild searchBox-filter" onClick={FilterBox.Instance.openFilter} onPointerDown={FilterBox.Instance.stopProp}>Filter</button>
                     <button className="searchBox-barChild searchBox-close" title={"Close Search Bar"} onPointerDown={MainView.Instance.toggleSearch}><FontAwesomeIcon icon={faTimes} size="lg" /></button>
                 </div>
+                {(this._numTotalResults > 0 || !this._searchbarOpen) ? (null) :
+                    (<div className="searchBox-quickFilter" onPointerDown={this.openSearch}>
+                        <div className="filter-panel"><IconBar /></div>
+                    </div>)}
                 <div className="searchBox-results" onScroll={this.resultsScrolled} style={{
                     display: this._resultsOpen ? "flex" : "none",
                     height: this.resFull ? "560px" : this.resultHeight, overflow: this.resFull ? "auto" : "visible"
-- 
cgit v1.2.3-70-g09d2