aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/views/MainOverlayTextBox.tsx2
-rw-r--r--src/client/views/SearchBox.scss17
-rw-r--r--src/client/views/SearchBox.tsx121
-rw-r--r--src/client/views/SearchItem.tsx19
4 files changed, 128 insertions, 31 deletions
diff --git a/src/client/views/MainOverlayTextBox.tsx b/src/client/views/MainOverlayTextBox.tsx
index 24327b995..d1224febe 100644
--- a/src/client/views/MainOverlayTextBox.tsx
+++ b/src/client/views/MainOverlayTextBox.tsx
@@ -102,6 +102,6 @@ export class MainOverlayTextBox extends React.Component<MainOverlayTextBoxProps>
</div>
</ div>;
}
- else return (null); Z
+ else return (null);
}
} \ No newline at end of file
diff --git a/src/client/views/SearchBox.scss b/src/client/views/SearchBox.scss
index 76332a515..eff47393b 100644
--- a/src/client/views/SearchBox.scss
+++ b/src/client/views/SearchBox.scss
@@ -75,4 +75,21 @@
width: 100%;
}
+}
+
+.toggle-bar{
+ width: 100%;
+ height: 50px;
+ background-color: $alt-accent;
+ border-radius: 10px;
+ padding: 5px;
+ display: flex;
+ align-items: center;
+
+ .toggle-button{
+ width: 80px;
+ height: 100%;
+ border-radius: 10px;
+ background-color: $light-color;
+ }
} \ No newline at end of file
diff --git a/src/client/views/SearchBox.tsx b/src/client/views/SearchBox.tsx
index 8fb180273..4ebf77f60 100644
--- a/src/client/views/SearchBox.tsx
+++ b/src/client/views/SearchBox.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
import { observer } from 'mobx-react';
import { observable, action, runInAction } from 'mobx';
import "./SearchBox.scss";
-import { faSearch, faFilePdf, faFilm, faImage, faObjectGroup, faStickyNote, faMusic, faLink, faChartBar, faGlobeAsia } from '@fortawesome/free-solid-svg-icons';
+import { faSearch, faFilePdf, faFilm, faImage, faObjectGroup, faStickyNote, faMusic, faLink, faChartBar, faGlobeAsia, faBan } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { library } from '@fortawesome/fontawesome-svg-core';
import * as rp from 'request-promise';
@@ -16,7 +16,12 @@ import { RouteStore } from '../../server/RouteStore';
import { NumCast } from '../../new_fields/Types';
import { SearchUtil } from '../util/SearchUtil';
import * as anime from 'animejs';
-// import anime from 'animejs';
+// const Anime = ReactAnime.default;
+// import * as anime from '../../../node_modules/@types';
+// const anime = require('lib/anime.js');
+// import anime from 'animejs/lib/anime.es';
+// import anime = require ('lib/anime.min.js');
+// import Anime from 'react-anime';
library.add(faSearch);
library.add(faObjectGroup);
@@ -28,12 +33,98 @@ library.add(faMusic);
library.add(faLink);
library.add(faChartBar);
library.add(faGlobeAsia);
+library.add(faBan);
+
+export interface ToggleBarProps {
+ //false = right, true = left
+ // status: boolean;
+ changeStatus(value: boolean): void;
+ //addDocTab(doc: Doc, location: string): void;
+}
+
+@observer
+export class ToggleBar extends React.Component<ToggleBarProps>{
+
+ @observable _status: boolean = false;
+
+ // @observable clicked: boolean = true;
+
+ @action.bound
+ toggle() {
+ this._status = !this._status;
+ }
+
+ render() {
+ var timeline = anime.timeline({
+ autoplay:false
+ })
+
+ timeline.add({
+ targets: '.toggle-button',
+ translateX: '100%',
+ direction: 'alternate',
+ easing: 'easeInOutQuad'
+ });
+
+ // var wordQueryToggle = anime({
+ // targets: '.toggle-button',
+ // translateX: '100%',
+ // direction: 'alternate',
+ // easing: 'easeInOutQuad'
+ // });
+ // document.querySelector('.toggle-button').onClick = wordQueryToggle;
+
+ return (
+ <div className="toggle-bar">
+ <div className = "toggle-button" onClick = {() => timeline.play()}>
+ {/* <div className = "toggle-button"> */}
+ {/* {this._status ? (
+ <Anime
+ loop={false}
+ autoplay={false}
+ translateX="100%"
+ direction="alternate"
+ easing="easeInOutQuad"
+ >
+ <div className="toggle-button" onClick = {this.toggle} />
+ </Anime>
+ ) : (
+ <Anime
+ loop={false}
+ autoplay={true}
+ translateX="100%"
+ direction="alternate"
+ easing="easeInOutQuad"
+ >
+ <div className="toggle-button" onClick = {this.toggle} />
+ </Anime>
+ )} */}
+
+{/*
+
+ <Anime
+ loop={false}
+ autoplay={false}
+ translateX="100%"
+ direction="alternate"
+ easing="easeInOutQuad"
+ >
+ <div className="toggle-button" onClick = {this.toggle} />
+ </Anime> */}
+ {/* </div> */}
+ </div>
+ );
+ };
+}
+
@observer
export class SearchBox extends React.Component {
@observable
searchString: string = "";
+ @observable _wordStatus: boolean = true;
+
@observable private _open: boolean = false;
@observable private _resultsOpen: boolean = false;
@@ -99,27 +190,28 @@ export class SearchBox extends React.Component {
handleSearchClick = (e: Event): void => {
let element = document.getElementsByClassName((e.target as any).className)[0];
//handles case with filter button
- if((e.target as any).className.includes("filter")){
+ if ((e.target as any).className.includes("filter")) {
this._resultsOpen = false;
- this._open = true;}
- else if (element && element.parentElement){
+ this._open = true;
+ }
+ else if (element && element.parentElement) {
//if the filter element is found, show the form and hide the results
- if(this.findAncestor(element, "filter-form")){
+ if (this.findAncestor(element, "filter-form")) {
this._resultsOpen = false;
this._open = true;
}
//if in main search div, keep results open and close filter
- else if(this.findAncestor(element, "main-searchDiv")){
+ else if (this.findAncestor(element, "main-searchDiv")) {
this._resultsOpen = true;
this._open = false;
}
}
//not in either, close both
- else{
+ else {
this._resultsOpen = false;
this._open = false;
}
-
+
}
@@ -137,11 +229,6 @@ export class SearchBox extends React.Component {
document.removeEventListener('mousedown', this.handleSearchClick, false);
}
- @action
- toggleFilterDisplay = () => {
- this._open = !this._open;
- }
-
enter = (e: React.KeyboardEvent) => {
if (e.key === "Enter") {
this.submitSearch();
@@ -196,6 +283,9 @@ export class SearchBox extends React.Component {
return toReturn;
}
+ handleWordQueryChange = (value: boolean) => {
+ this._wordStatus = value;
+ }
// Useful queries:
// Delegates of a document: {!join from=id to=proto_i}id:{protoId}
@@ -225,12 +315,13 @@ export class SearchBox extends React.Component {
<div className="filter-form" id="header">Filter Search Results</div>
<div className="filter-form" id="option">
<div className="required-words">
- temp for making words required
+ <ToggleBar changeStatus={this.handleWordQueryChange} />
</div>
<div className="type-of-node">
temp for filtering by a type of node
<div className="icon-bar">
{/* hoping to ultimately animate a reorder when an icon is chosen */}
+ <FontAwesomeIcon style={{ order: -2 }} icon={faBan} size="2x" />
<FontAwesomeIcon style={{ order: 0 }} icon={faFilePdf} size="2x" />
<FontAwesomeIcon style={{ order: 1 }} icon={faChartBar} size="2x" />
<FontAwesomeIcon style={{ order: 2 }} icon={faObjectGroup} size="2x" />
diff --git a/src/client/views/SearchItem.tsx b/src/client/views/SearchItem.tsx
index c80d9baa2..8e6a4010a 100644
--- a/src/client/views/SearchItem.tsx
+++ b/src/client/views/SearchItem.tsx
@@ -17,7 +17,6 @@ import { CollectionViewType } from "./collections/CollectionBaseView";
export interface SearchItemProps {
doc: Doc;
- // addDocTab(doc: Doc, location: string): void
}
library.add(faCaretUp);
@@ -63,28 +62,17 @@ export class SelectorContextMenu extends React.Component<SearchItemProps> {
col.panX = newPanX;
col.panY = newPanY;
}
- // this.props.addDocTab(col, "inTab");
CollectionDockingView.Instance.AddRightSplit(col);
};
}
- onClick = () => {
- console.log("click");
- }
-
//these all need class names in order to find ancestor - please do not delete
render() {
return (
< div className="parents">
<p className = "contexts">Contexts:</p>
- {this._docs.map(doc => <div onClick={this.onClick} className="collection"><a className= "title" onClick={(e: React.MouseEvent) => {
- console.log("clicked");
- this.getOnClick(doc)
- }}>{doc.col.title}</a></div>)}
- {this._otherDocs.map(doc => <div className="collection"><a className= "title" onClick={(e: React.MouseEvent) => {
- console.log("clicked");
- this.getOnClick(doc)
- }}>{doc.col.title}</a></div>)}
+ {this._docs.map(doc => <div className="collection"><a className= "title" onClick={this.getOnClick(doc)}>{doc.col.title}</a></div>)}
+ {this._otherDocs.map(doc => <div className="collection"><a className= "title" onClick={this.getOnClick(doc)}>{doc.col.title}</a></div>)}
</div>
);
}
@@ -97,7 +85,8 @@ export class SearchItem extends React.Component<SearchItemProps> {
@observable hover = false;
onClick = () => {
- DocumentManager.Instance.jumpToDocument(this.props.doc);
+ // DocumentManager.Instance.jumpToDocument(this.props.doc);
+ CollectionDockingView.Instance.AddRightSplit(this.props.doc);
}
public DocumentIcon() {
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-12 23:03:34 +0000