From 04fd1451fb33bba806f9fe406d51c13d8d4dd541 Mon Sep 17 00:00:00 2001 From: Monika Hedman Date: Tue, 16 Apr 2019 17:17:41 -0400 Subject: checking other search --- src/client/views/Main.scss | 39 ++++++++++++++++++++++++++++----------- 1 file changed, 28 insertions(+), 11 deletions(-) (limited to 'src/client/views/Main.scss') diff --git a/src/client/views/Main.scss b/src/client/views/Main.scss index 4373534b2..26284974a 100644 --- a/src/client/views/Main.scss +++ b/src/client/views/Main.scss @@ -1,5 +1,6 @@ @import "globalCssVariables"; @import "nodeModuleOverrides"; + html, body { width: 100%; @@ -7,9 +8,9 @@ body { overflow: auto; font-family: $sans-serif; margin: 0; - position:absolute; + position: absolute; top: 0; - left:0; + left: 0; } #dash-title { @@ -42,7 +43,7 @@ h1 { } .jsx-parser { - width:100% + width: 100% } p { @@ -80,6 +81,10 @@ button:hover { cursor: pointer; } +search { + background: $dark-color; +} + .clear-db-button { position: absolute; right: 45%; @@ -114,6 +119,7 @@ button:hover { position: absolute; bottom: 62px; left: 24px; + .toolbar-button { display: block; margin-bottom: 10px; @@ -125,6 +131,7 @@ button:hover { position: absolute; bottom: 24px; left: 24px; + label { background: $dark-color; color: $light-color; @@ -137,44 +144,53 @@ button:hover { cursor: pointer; transition: transform 0.2s; } + label p { padding-left: 10.5px; padding-top: 3px; } + label:hover { background: $main-accent; transform: scale(1.15); } + input { display: none; } + input:not(:checked)~#add-options-content { display: none; } + input:checked~label { transform: rotate(45deg); transition: transform 0.5s; cursor: pointer; } } + #root { overflow: visible; } + #main-div { - width:100%; - height:100%; - position:absolute; + width: 100%; + height: 100%; + position: absolute; top: 0; - left:0; + left: 0; overflow: scroll; } + #mainContent-div { - width:100%; - height:100%; - position:absolute; + width: 100%; + height: 100%; + position: absolute; top: 0; - left:0; + left: 0; } + #add-options-content { display: table; opacity: 1; @@ -189,6 +205,7 @@ button:hover { ul#add-options-list { list-style: none; padding: 0; + li { display: inline-block; padding: 0; -- cgit v1.2.3-70-g09d2 From 39bb878a32821d2e14110f4158471890234f4769 Mon Sep 17 00:00:00 2001 From: Monika Hedman 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/client/views/Main.scss') 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 {
, -
, +
, -
+
]; } 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) { + 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 ( +
+
+ {/* + +
+
+
+ +
+ filter by collection, key, type of node +
+ +
+
+ + ); + } +} \ No newline at end of file -- cgit v1.2.3-70-g09d2