From a73a72586c72cd620c16dd7bc0baad88c8e49a34 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Fri, 11 Oct 2019 01:38:48 -0400
Subject: switching search around to left-hand side.

---
 src/client/views/search/FilterBox.tsx   |  4 ++--
 src/client/views/search/IconBar.tsx     | 14 ------------
 src/client/views/search/SearchBox.scss  | 17 ++++++++++----
 src/client/views/search/SearchBox.tsx   |  2 --
 src/client/views/search/SearchItem.scss | 39 ++++++++++++++-------------------
 src/client/views/search/SearchItem.tsx  | 19 +++++-----------
 6 files changed, 36 insertions(+), 59 deletions(-)

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

diff --git a/src/client/views/search/FilterBox.tsx b/src/client/views/search/FilterBox.tsx
index da733d64b..b841190d4 100644
--- a/src/client/views/search/FilterBox.tsx
+++ b/src/client/views/search/FilterBox.tsx
@@ -33,7 +33,7 @@ export enum Keys {
 export class FilterBox extends React.Component {
 
     static Instance: FilterBox;
-    public _allIcons: string[] = [DocumentType.AUDIO, DocumentType.COL, DocumentType.HIST, DocumentType.IMG, DocumentType.LINK, DocumentType.PDF, DocumentType.TEXT, DocumentType.VID, DocumentType.WEB];
+    public _allIcons: string[] = [DocumentType.AUDIO, DocumentType.COL, DocumentType.IMG, DocumentType.LINK, DocumentType.PDF, DocumentType.TEXT, DocumentType.VID, DocumentType.WEB];
 
     //if true, any keywords can be used. if false, all keywords are required.
     //this also serves as an indicator if the word status filter is applied
@@ -393,7 +393,7 @@ export class FilterBox extends React.Component {
             <div>
                 <div style={{ display: "flex", flexDirection: "row-reverse" }}>
                     <SearchBox />
-                    {this.getActiveFilters()}
+                    {/* {this.getActiveFilters()} */}
                 </div>
                 {this._filterOpen ? (
                     <div className="filter-form" onPointerDown={this.stopProp} id="filter-form" style={this._filterOpen ? { display: "flex" } : { display: "none" }}>
diff --git a/src/client/views/search/IconBar.tsx b/src/client/views/search/IconBar.tsx
index c9924222f..bdeb57d5c 100644
--- a/src/client/views/search/IconBar.tsx
+++ b/src/client/views/search/IconBar.tsx
@@ -59,23 +59,9 @@ export class IconBar extends React.Component {
     render() {
         return (
             <div className="icon-bar">
-                <div className="type-outer">
-                    <div className={"type-icon all"}
-                        onClick={this.selectAll}>
-                        <FontAwesomeIcon className="fontawesome-icon" icon={faCheckCircle} />
-                    </div>
-                    <div className="filter-description">Select All</div>
-                </div>
                 {FilterBox.Instance._allIcons.map((type: string) =>
                     <IconButton type={type} />
                 )}
-                <div className="type-outer">
-                    <div className={"type-icon none"}
-                        onClick={this.resetSelf}>
-                        <FontAwesomeIcon className="fontawesome-icon" icon={faTimesCircle} />
-                    </div>
-                    <div className="filter-description">Clear</div>
-                </div>
             </div>
         );
     }
diff --git a/src/client/views/search/SearchBox.scss b/src/client/views/search/SearchBox.scss
index 0dd4d3dc5..bc11604a5 100644
--- a/src/client/views/search/SearchBox.scss
+++ b/src/client/views/search/SearchBox.scss
@@ -1,6 +1,15 @@
 @import "../globalCssVariables";
 @import "./NaviconButton.scss";
 
+.searchBox-container {
+    display: flex;
+    flex-direction: column;
+    width:100%;
+    height:100%;
+    position: absolute;
+    font-size: 10px;
+    line-height: 1;
+}
 .searchBox-bar {
     height: 32px;
     display: flex;
@@ -49,17 +58,17 @@
 }
 
 .searchBox-quickFilter {
-    width: 500px;
-    margin-left: 25px;
+    width: 100%;
+    height: 40px;
     margin-top: 10px;
 }
 
 .searchBox-results {
-    margin-right: 136px;
+    display:flex;
+    flex-direction: column;
     top: 300px;
     display: flex;
     flex-direction: column;
-    margin-right: 72px;
     // height: 560px;
     height: 100%;
     // overflow: hidden;
diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
index be75a29e0..62c8c255e 100644
--- a/src/client/views/search/SearchBox.tsx
+++ b/src/client/views/search/SearchBox.tsx
@@ -346,8 +346,6 @@ export class SearchBox extends React.Component {
                         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-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}>
diff --git a/src/client/views/search/SearchItem.scss b/src/client/views/search/SearchItem.scss
index 62715c5eb..9f12994c3 100644
--- a/src/client/views/search/SearchItem.scss
+++ b/src/client/views/search/SearchItem.scss
@@ -2,19 +2,27 @@
 
 .search-overview {
     display: flex;
-    flex-direction: row-reverse;
+    flex-direction: reverse;
     justify-content: flex-end;
     z-index: 0;
 }
+.link-count {
+     background: black;
+    border-radius: 20px;
+    color: white;
+    width: 15px;
+    text-align: center;
+    margin-top: 5px;
+}
 
 .searchBox-placeholder,
 .search-overview .search-item {
-    width: 500px;
+    width: 100%;
     background: $light-color-secondary;
     border-color: $intermediate-color;
     border-bottom-style: solid;
     padding: 10px;
-    min-height: 70px;
+    min-height: 50px;
     max-height: 150px;
     height: auto;
     z-index: 0;
@@ -61,16 +69,6 @@
                 overflow: hidden;
                 position: relative;
 
-                .link-count {
-                    opacity: 1;
-                    position: absolute;
-                    z-index: 1000;
-                    text-align: center;
-                    -webkit-transition: opacity 0.2s ease-in-out;
-                    -moz-transition: opacity 0.2s ease-in-out;
-                    -o-transition: opacity 0.2s ease-in-out;
-                    transition: opacity 0.2s ease-in-out;
-                }
 
                 .link-extended {
                     // display: none;
@@ -112,7 +110,7 @@
 
             .icon-icons,
             .icon-live {
-                height: 50px;
+                height: auto;
                 margin: auto;
                 overflow: hidden;
 
@@ -174,9 +172,7 @@
 .searchBox-instances:active {
     opacity: 1;
     background: $lighter-alt-accent;
-    -webkit-transform: scale(1);
-    -ms-transform: scale(1);
-    transform: scale(1);
+    width:150px
 }
 
 .search-item:hover {
@@ -193,13 +189,10 @@
 .searchBox-instances {
     float: left;
     opacity: 1;
-    width: 150px;
+    width: 0px;
     transition: all 0.2s ease;
     color: black;
-    transform-origin: top right;
-    -webkit-transform: scale(0);
-    -ms-transform: scale(0);
-    transform: scale(0);
+    overflow: hidden;
 }
 
 
@@ -208,7 +201,7 @@
 }
 
 .searchBox-placeholder {
-    min-height: 70px;
+    min-height: 50px;
     margin-left: 150px;
     text-transform: uppercase;
     text-align: left;
diff --git a/src/client/views/search/SearchItem.tsx b/src/client/views/search/SearchItem.tsx
index a7822ed46..b8cff16f2 100644
--- a/src/client/views/search/SearchItem.tsx
+++ b/src/client/views/search/SearchItem.tsx
@@ -213,15 +213,6 @@ export class SearchItem extends React.Component<SearchItemProps> {
     @computed
     get linkCount() { return LinkManager.Instance.getAllRelatedLinks(this.props.doc).length; }
 
-    @computed
-    get linkString(): string {
-        let num = this.linkCount;
-        if (num === 1) {
-            return num.toString() + " link";
-        }
-        return num.toString() + " links";
-    }
-
     @action
     pointerDown = (e: React.PointerEvent) => { e.preventDefault(); e.button === 0 && SearchBox.Instance.openSearch(e); }
 
@@ -290,7 +281,11 @@ export class SearchItem extends React.Component<SearchItemProps> {
                 <div className="search-item" onPointerDown={this.nextHighlight} onPointerEnter={this.highlightDoc} onPointerLeave={this.unHighlightDoc} id="result"
                     onClick={this.onClick}>
                     <div className="main-search-info">
-                        <div title="Drag as document" onPointerDown={this.onPointerDown} style={{ marginRight: "7px" }}> <FontAwesomeIcon icon="file" size="lg" /> </div>
+                        <div title="Drag as document" onPointerDown={this.onPointerDown} style={{ marginRight: "7px" }}> <FontAwesomeIcon icon="file" size="lg" />
+                            <div className="link-container item">
+                                <div className="link-count" title={`${this.linkCount + " links"}`}>{this.linkCount}</div>
+                            </div>
+                        </div>
                         <div className="search-title-container">
                             <div className="search-title">{StrCast(this.props.doc.title)}</div>
                             <div className="search-highlighting">{this.props.highlighting.length ? "Matched fields:" + this.props.highlighting.join(", ") : this.props.lines.length ? this.props.lines[0] : ""}</div>
@@ -301,10 +296,6 @@ export class SearchItem extends React.Component<SearchItemProps> {
                                 <div className="search-type" title="Click to Preview">{this.DocumentIcon()}</div>
                                 <div className="search-label">{this.props.doc.type ? this.props.doc.type : "Other"}</div>
                             </div>
-                            <div className="link-container item">
-                                <div className="link-count">{this.linkCount}</div>
-                                <div className="link-extended">{this.linkString}</div>
-                            </div>
                         </div>
                     </div>
                 </div>
-- 
cgit v1.2.3-70-g09d2