issues with icon

3 files changed, 76 insertions, 34 deletions

diff --git a/src/client/views/SearchBox.scss b/src/client/views/SearchBox.scss
index f4fc0029e..792d6dd3c 100644
--- a/src/client/views/SearchBox.scss
+++ b/src/client/views/SearchBox.scss
@@ -68,32 +68,32 @@
     top: 300px;
     display: flex;
     flex-direction: column;
-}
 
-.search-item {
-    width: 500px;
-    height: 50px;
-    background: $light-color-secondary;
-    display: flex;
-    justify-content: left;
-    align-items: center;
-    transition: all 0.1s;
-    border-width: 0.11px;
-    border-style: none;
-    border-color: $intermediate-color;
-    border-bottom-style: solid;
-    padding: 10px;
-    white-space: nowrap;
-    font-size: 13px;
-}
+    .search-item {
+        width: 500px;
+        height: 50px;
+        background: $light-color-secondary;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        transition: all 0.1s;
+        border-width: 0.11px;
+        border-style: none;
+        border-color: $intermediate-color;
+        border-bottom-style: solid;
+        padding: 10px;
+        white-space: nowrap;
+        font-size: 13px;
+    }
 
-.search-item:hover {
-    transition: all 0.1s;
-    background: $lighter-alt-accent;
-}
+    .search-item:hover {
+        transition: all 0.1s;
+        background: $lighter-alt-accent;
+    }
 
-.search-title {
-    text-transform: uppercase;
-    text-align: left;
-    width: 8vw;
+    .search-title {
+        text-transform: uppercase;
+        text-align: left;
+        width: 8vw;
+    }
 }
\ No newline at end of file
diff --git a/src/client/views/SearchBox.tsx b/src/client/views/SearchBox.tsx
index 827d468df..7dd1af4e7 100644
--- a/src/client/views/SearchBox.tsx
+++ b/src/client/views/SearchBox.tsx
@@ -67,7 +67,7 @@ export class SearchBox extends React.Component {
     }
 
     @action
-    handleClick = (e: Event): void => {
+    handleClickFilter = (e: Event): void => {
         var className = (e.target as any).className;
         var id = (e.target as any).id;
         if (className !== "filter-button" && className !== "filter-form") {
@@ -76,16 +76,28 @@ export class SearchBox extends React.Component {
 
     }
 
+    @action
+    handleClickResults = (e: Event): void => {
+        var className = (e.target as any).className;
+        var id = (e.target as any).id;
+        if (id !== "result") {
+            this._resultsOpen = false;
+        }
+
+    }
+
     componentWillMount() {
-        document.addEventListener('mousedown', this.handleClick, false);
+        document.addEventListener('mousedown', this.handleClickFilter, false);
+        document.addEventListener('mousedown', this.handleClickResults, false);
     }
 
     componentWillUnmount() {
-        document.removeEventListener('mousedown', this.handleClick, false);
+        document.removeEventListener('mousedown', this.handleClickFilter, false);
+        document.removeEventListener('mousedown', this.handleClickResults, false);
     }
 
     @action
-    toggleDisplay = () => {
+    toggleFilterDisplay = () => {
         this._open = !this._open;
     }
 
@@ -101,9 +113,9 @@ export class SearchBox extends React.Component {
                 <div className="searchBox" id="outer">
 
                     <input value={this.searchString} onChange={this.onChange} type="text" placeholder="Search.." className="search" id="input" onKeyPress={this.enter} />
-                    <button className="filter-button" onClick={this.toggleDisplay}> Filter </button>
+                    <button className="filter-button" onClick={this.toggleFilterDisplay}> Filter </button>
                     <div className="submit-search" id="submit" onClick={this.submitSearch}><FontAwesomeIcon style={{ height: "100%" }} icon="search" size="lg" /></div>
-                    <div className="results" style={this._resultsOpen ? { display: "flex" } : { display: "none" }}>
+                    <div className="results" id="results" style={this._resultsOpen ? { display: "flex" } : { display: "none" }}>
                         {this._results.map(result => <SearchItem doc={result} key={result[Id]} />)}
                     </div>
                 </div>
diff --git a/src/client/views/SearchItem.tsx b/src/client/views/SearchItem.tsx
index 81da7ebd2..539d6b5e5 100644
--- a/src/client/views/SearchItem.tsx
+++ b/src/client/views/SearchItem.tsx
@@ -1,21 +1,51 @@
 import React = require("react");
 import { Doc } from "../../new_fields/Doc";
 import { DocumentManager } from "../util/DocumentManager";
+import { library } from '@fortawesome/fontawesome-svg-core';
+import { faCaretUp, faFilePdf, faFilm, faImage, faObjectGroup, faStickyNote } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Cast } from "../../new_fields/Types";
+import { FieldView, FieldViewProps } from './nodes/FieldView';
+import { computed } from "mobx";
+import { IconField } from "../../new_fields/IconField";
+
 
 export interface SearchProps {
     doc: Doc;
 }
 
+library.add(faCaretUp);
+library.add(faObjectGroup);
+library.add(faStickyNote);
+library.add(faFilePdf);
+library.add(faFilm);
+
 export class SearchItem extends React.Component<SearchProps> {
 
     onClick = () => {
-        DocumentManager.Instance.jumpToDocument(this.props.doc)
+        DocumentManager.Instance.jumpToDocument(this.props.doc);
+    }
+
+    //needs help
+    // @computed get layout(): string { const field = Cast(this.props.doc[fieldKey], IconField); return field ? field.icon : "<p>Error loading icon data</p>"; }
+
+
+    public static DocumentIcon(layout: string) {
+        let button = layout.indexOf("PDFBox") !== -1 ? faFilePdf :
+            layout.indexOf("ImageBox") !== -1 ? faImage :
+                layout.indexOf("Formatted") !== -1 ? faStickyNote :
+                    layout.indexOf("Video") !== -1 ? faFilm :
+                        layout.indexOf("Collection") !== -1 ? faObjectGroup :
+                            faCaretUp;
+        return <FontAwesomeIcon icon={button} className="documentView-minimizedIcon" />;
     }
 
     render() {
         return (
-            <div className="search-item" onClick={this.onClick}>
-                <div className="search-title">{this.props.doc.title}</div>
+            <div className="search-item" id="result" onClick={this.onClick}>
+                <div className="search-title" id="result" >title: {this.props.doc.title}</div>
+                <div className="search-type" id="result" >Type: {this.props.doc.layout}</div>
+                {/* <div className="search-type" >{SearchItem.DocumentIcon(this.layout)}</div> */}
             </div>
         );
     }