aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/views/Main.scss35
-rw-r--r--src/client/views/Main.tsx7
-rw-r--r--src/client/views/SearchBox.scss64
-rw-r--r--src/client/views/SearchBox.tsx89
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
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-09 22:14:42 +0000