diff options
| -rw-r--r-- | src/client/views/Main.scss | 35 | ||||
| -rw-r--r-- | src/client/views/Main.tsx | 7 | ||||
| -rw-r--r-- | src/client/views/SearchBox.scss | 64 | ||||
| -rw-r--r-- | src/client/views/SearchBox.tsx | 89 |
4 files changed, 182 insertions, 13 deletions
diff --git a/src/client/views/Main.scss b/src/client/views/Main.scss index 89fdf595a..fbc7c8ef3 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; } div { @@ -46,7 +47,7 @@ h1 { } .jsx-parser { - width:100%; + width: 100%; pointer-events: none; border-radius: inherit; } @@ -120,6 +121,7 @@ button:hover { position: absolute; bottom: 62px; left: 24px; + .toolbar-button { display: block; margin-bottom: 10px; @@ -131,6 +133,7 @@ button:hover { position: absolute; bottom: 24px; left: 24px; + label { background: $dark-color; color: $light-color; @@ -143,44 +146,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; @@ -195,6 +207,7 @@ button:hover { ul#add-options-list { list-style: none; padding: 0; + li { display: inline-block; padding: 0; diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx index 129079271..f32e92aac 100644 --- a/src/client/views/Main.tsx +++ b/src/client/views/Main.tsx @@ -38,9 +38,9 @@ import "./Main.scss"; import { MainOverlayTextBox } from './MainOverlayTextBox'; import { DocumentView } from './nodes/DocumentView'; import { PreviewCursor } from './PreviewCursor'; +import { SearchBox } from './SearchBox'; import { SelectionManager } from '../util/SelectionManager'; - @observer export class Main extends React.Component { public static Instance: Main; @@ -270,7 +270,10 @@ export class Main extends React.Component { </div >, <div className="main-buttonDiv" key="workspaces" style={{ top: '34px', left: '2px', position: 'absolute' }} ref={workspacesRef}> <button onClick={toggleWorkspaces}>Workspaces</button></div>, - <div className="main-buttonDiv" key="logout" style={{ top: '34px', right: '1px', position: 'absolute' }} ref={logoutRef}> + + <div className="main-searchDiv" key="search" style={{ top: '34px', right: '1px', position: 'absolute' }} ref={workspacesRef}> <SearchBox /> </div>, + + <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 |