From 39bb878a32821d2e14110f4158471890234f4769 Mon Sep 17 00:00:00 2001
From: Monika Hedman <monika_hedman@brown.edu>
Date: Mon, 29 Apr 2019 19:52:35 -0400
Subject: search UI

---
 src/client/views/Main.scss      |  4 --
 src/client/views/Main.tsx       |  5 ++-
 src/client/views/SearchBox.scss | 64 +++++++++++++++++++++++++++++
 src/client/views/SearchBox.tsx  | 89 +++++++++++++++++++++++++++++++++++++++++
 4 files changed, 156 insertions(+), 6 deletions(-)
 create mode 100644 src/client/views/SearchBox.scss
 create mode 100644 src/client/views/SearchBox.tsx

(limited to 'src')

diff --git a/src/client/views/Main.scss b/src/client/views/Main.scss
index 26284974a..bca75da47 100644
--- a/src/client/views/Main.scss
+++ b/src/client/views/Main.scss
@@ -81,10 +81,6 @@ button:hover {
     cursor: pointer;
 }
 
-search {
-    background: $dark-color;
-}
-
 .clear-db-button {
     position: absolute;
     right: 45%;
diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index 92c7fa7dd..87eefe67f 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -38,6 +38,7 @@ import "./Main.scss";
 import { MainOverlayTextBox } from './MainOverlayTextBox';
 import { DocumentView } from './nodes/DocumentView';
 import { PreviewCursor } from './PreviewCursor';
+import { SearchBox } from './SearchBox';
 
 
 @observer
@@ -263,9 +264,9 @@ export class Main extends React.Component {
             <div className="main-buttonDiv" key="workspaces" style={{ top: '34px', left: '2px', position: 'absolute' }} ref={workspacesRef}>
                 <button onClick={toggleWorkspaces}>Workspaces</button></div>,
 
-            <div className="main-searchDiv" key="search" style={{ top: '34px', right: '100px', position: 'absolute' }} ref={workspacesRef}> <SearchBox/> </div>,
+            <div className="main-searchDiv" key="search" style={{ top: '34px', right: '1px', position: 'absolute' }} ref={workspacesRef}> <SearchBox /> </div>,
 
-            <div className="main-buttonDiv" key="logout" style={{ top: '34px', right: '1px', position: 'absolute' }} ref={logoutRef}>
+            <div className="main-buttonDiv" key="logout" style={{ bottom: '34px', right: '1px', position: 'absolute' }} ref={logoutRef}>
                 <button onClick={() => request.get(ServerUtils.prepend(RouteStore.logout), emptyFunction)}>Log Out</button></div>
         ];
     }
diff --git a/src/client/views/SearchBox.scss b/src/client/views/SearchBox.scss
new file mode 100644
index 000000000..e1a1de142
--- /dev/null
+++ b/src/client/views/SearchBox.scss
@@ -0,0 +1,64 @@
+@import "globalCssVariables";
+
+.searchBox {
+    height: 32px;
+    //display: flex;
+    //padding: 4px;
+    -webkit-transition: width 0.4s ease-in-out;
+    transition: width 0.4s ease-in-out;
+    align-items: center;
+
+    .submit-search {
+        display: inline-block;
+        text-align: right;
+        color: $dark-color;
+        -webkit-transition: right 0.4s;
+        transition: right 0.4s;
+    }
+
+    .submit-search:hover {
+        color: $main-accent;
+        transform: scale(1.05);
+        cursor: pointer;
+    }
+
+    input[type=text] {
+        width: 130px;
+        -webkit-transition: width 0.4s;
+        transition: width 0.4s;
+        position: absolute;
+        right: 100px;
+    }
+
+    input[type=text]:focus {
+        width: 500px;
+        outline: 3px solid lightblue;
+    }
+
+    .filter-button {
+        position: absolute;
+        right: 30px;
+    }
+}
+
+.filter-form {
+    background: $dark-color;
+    height: 400px;
+    width: 400px;
+    position: relative;
+    right: 1px;
+    color: $light-color;
+    padding: 10px;
+    flex-direction: column;
+}
+
+#header {
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    font-size: 100%;
+    height: 40px;
+}
+
+#option {
+    height: 20px;
+}
\ No newline at end of file
diff --git a/src/client/views/SearchBox.tsx b/src/client/views/SearchBox.tsx
new file mode 100644
index 000000000..7f388719d
--- /dev/null
+++ b/src/client/views/SearchBox.tsx
@@ -0,0 +1,89 @@
+import * as React from 'react';
+import { observer } from 'mobx-react';
+import { observable, action } from 'mobx';
+import { Utils } from '../../Utils';
+import { MessageStore } from '../../server/Message';
+import { Server } from '../Server';
+import "./SearchBox.scss";
+import { faSearch } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { library } from '@fortawesome/fontawesome-svg-core';
+import { actionFieldDecorator } from 'mobx/lib/internal';
+
+library.add(faSearch);
+
+@observer
+export class SearchBox extends React.Component {
+    @observable
+    searchString: string = "";
+
+    @observable private _open: boolean = false;
+
+    @action.bound
+    onChange(e: React.ChangeEvent<HTMLInputElement>) {
+        this.searchString = e.target.value;
+
+    }
+
+    submitSearch = () => {
+        Utils.EmitCallback(Server.Socket, MessageStore.SearchFor, this.searchString, (results: string[]) => {
+            for (const result of results) {
+                console.log(result);
+                Utils.GetQueryVariable()
+            }
+        });
+    }
+
+    @action
+    handleClick = (e: Event): void => {
+        var className = (e.target as any).className;
+        var id = (e.target as any).id;
+        console.log(id);
+        //let imgPrev = document.getElementById("img_preview");
+        console.log(className);
+        if (className !== "filter-button" && className !== "filter-form") {
+            console.log("false");
+            this._open = false;
+        }
+
+    }
+
+    componentWillMount() {
+        document.addEventListener('mousedown', this.handleClick, false);
+    }
+
+    componentWillUnmount() {
+        document.removeEventListener('mousedown', this.handleClick, false);
+    }
+
+    @action
+    toggleDisplay = () => {
+        this._open = !this._open;
+    }
+
+    render() {
+        return (
+            <div id="outer">
+                <div className="searchBox" id="outer">
+                    {/* <input value={this.searchString} onChange={this.onChange} />
+                <button onClick={this.submitSearch} /> */}
+
+                    <input value={this.searchString} onChange={this.onChange} type="text" placeholder="Search.." className="search" />
+                    {/* {this._items.filter(prop => prop.description.toLowerCase().indexOf(this._searchString.toLowerCase()) !== -1).
+                    map(prop => <ContextMenuItem {...prop} key={prop.description} />)} */}
+
+                    <button className="filter-button" onClick={this.toggleDisplay}> Filter </button>
+                    <div className="submit-search" ><FontAwesomeIcon style={{ height: "100%" }} icon="search" size="lg" /></div>
+                </div>
+                <div className="filter-form" id="filter" style={this._open ? { display: "flex" } : { display: "none" }}>
+                    <div className="filter-form" id="header">Filter Search Results</div>
+                    <div className="filter-form" id="option">
+                        filter by collection, key, type of node
+                    </div>
+
+                </div>
+            </div>
+
+        );
+    }
+}
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2