From b78da60d91e37889c30b4428a88c838a9dafe5ca Mon Sep 17 00:00:00 2001
From: monikahedman <monika_hedman@brown.edu>
Date: Wed, 17 Jul 2019 15:02:33 -0400
Subject: search auto focuses

---
 src/client/views/search/SearchBox.tsx | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

(limited to 'src/client/views/search')

diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
index 8399605fb..b2a44f448 100644
--- a/src/client/views/search/SearchBox.tsx
+++ b/src/client/views/search/SearchBox.tsx
@@ -15,6 +15,9 @@ import { Id } from '../../../new_fields/FieldSymbols';
 import { SearchUtil } from '../../util/SearchUtil';
 import { RouteStore } from '../../../server/RouteStore';
 import { FilterBox } from './FilterBox';
+import { ReadStream } from 'fs';
+import * as $ from 'jquery';
+
 
 
 @observer
@@ -29,6 +32,7 @@ export class SearchBox extends React.Component {
     @observable private _visibleElements: JSX.Element[] = [];
 
     private resultsRef = React.createRef<HTMLDivElement>();
+    public inputRef = React.createRef<HTMLInputElement>();
 
     private _isSearch: ("search" | "placeholder" | undefined)[] = [];
     private _numTotalResults = -1;
@@ -46,6 +50,15 @@ export class SearchBox extends React.Component {
         this.resultsScrolled = this.resultsScrolled.bind(this);
     }
 
+    componentDidMount = () => {
+        if (this.inputRef.current) {
+            this.inputRef.current.focus();
+            runInAction(() => {
+                this._searchbarOpen = true;
+            });
+        }
+    }
+
     @action
     getViews = async (doc: Doc) => {
         const results = await SearchUtil.GetViewsOfDocument(doc);
@@ -321,7 +334,7 @@ export class SearchBox extends React.Component {
                     <span className="searchBox-barChild searchBox-collection" onPointerDown={SetupDrag(this.collectionRef, this.startDragCollection)} ref={this.collectionRef} title="Drag Results as Collection">
                         <FontAwesomeIcon icon="object-group" size="lg" />
                     </span>
-                    <input value={this._searchString} onChange={this.onChange} type="text" placeholder="Search..."
+                    <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}
                         style={{ width: this._searchbarOpen ? "500px" : "100px" }} />
                     <button className="searchBox-barChild searchBox-submit" onClick={this.submitSearch} onPointerDown={FilterBox.Instance.stopProp}>Submit</button>
-- 
cgit v1.2.3-70-g09d2


From c1fa702ae9e748617121f28cbe65d21cdfdc1f7d Mon Sep 17 00:00:00 2001
From: monikahedman <monika_hedman@brown.edu>
Date: Fri, 19 Jul 2019 10:43:52 -0400
Subject: search x

---
 src/client/views/search/SearchBox.scss | 5 +++++
 src/client/views/search/SearchBox.tsx  | 7 ++++++-
 2 files changed, 11 insertions(+), 1 deletion(-)

(limited to 'src/client/views/search')

diff --git a/src/client/views/search/SearchBox.scss b/src/client/views/search/SearchBox.scss
index 109b88ac9..481ee5789 100644
--- a/src/client/views/search/SearchBox.scss
+++ b/src/client/views/search/SearchBox.scss
@@ -37,6 +37,11 @@
             margin-left: 2px;
             margin-right: 2px
         }
+
+        &.searchBox-close {
+            color: $light-color;
+            max-height: 32px;
+        }
     }
 }
 
diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
index b2a44f448..c45c3aaee 100644
--- a/src/client/views/search/SearchBox.tsx
+++ b/src/client/views/search/SearchBox.tsx
@@ -4,6 +4,8 @@ import { observable, action, runInAction, flow, computed } from 'mobx';
 import "./SearchBox.scss";
 import "./FilterBox.scss";
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faTimes } from '@fortawesome/free-solid-svg-icons';
+import { library } from '@fortawesome/fontawesome-svg-core';
 import { SetupDrag } from '../../util/DragManager';
 import { Docs } from '../../documents/Documents';
 import { NumCast, Cast } from '../../../new_fields/Types';
@@ -17,8 +19,9 @@ import { RouteStore } from '../../../server/RouteStore';
 import { FilterBox } from './FilterBox';
 import { ReadStream } from 'fs';
 import * as $ from 'jquery';
+import { MainView } from '../MainView';
 
-
+library.add(faTimes);
 
 @observer
 export class SearchBox extends React.Component {
@@ -242,6 +245,7 @@ export class SearchBox extends React.Component {
 
     @action.bound
     closeSearch = () => {
+        console.log("closing search")
         FilterBox.Instance.closeFilter();
         this.closeResults();
         this._searchbarOpen = false;
@@ -339,6 +343,7 @@ export class SearchBox extends React.Component {
                         style={{ width: this._searchbarOpen ? "500px" : "100px" }} />
                     <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>
                 <div className="searchBox-results" onScroll={this.resultsScrolled} style={{
                     display: this._resultsOpen ? "flex" : "none",
-- 
cgit v1.2.3-70-g09d2


From 3efe5ce195245a5ac58eaea93ccab2cb8e0035ba Mon Sep 17 00:00:00 2001
From: monikahedman <monika_hedman@brown.edu>
Date: Fri, 19 Jul 2019 10:47:56 -0400
Subject: lets try this again

---
 src/client/views/search/SearchBox.tsx | 1 -
 1 file changed, 1 deletion(-)

(limited to 'src/client/views/search')

diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
index c45c3aaee..2e1017d27 100644
--- a/src/client/views/search/SearchBox.tsx
+++ b/src/client/views/search/SearchBox.tsx
@@ -354,5 +354,4 @@ export class SearchBox extends React.Component {
             </div>
         );
     }
-
 }
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2