aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/views/search/IconBar.scss50
-rw-r--r--src/client/views/search/IconBar.tsx165
-rw-r--r--src/client/views/search/SearchBox.scss14
-rw-r--r--src/client/views/search/SearchBox.tsx20
-rw-r--r--src/client/views/search/ToggleBar.scss4
-rw-r--r--src/client/views/search/ToggleBar.tsx8
6 files changed, 167 insertions, 94 deletions
diff --git a/src/client/views/search/IconBar.scss b/src/client/views/search/IconBar.scss
index eb7b45754..98b4e50a6 100644
--- a/src/client/views/search/IconBar.scss
+++ b/src/client/views/search/IconBar.scss
@@ -1,17 +1,23 @@
@import "../globalCssVariables";
-.icon-bar{
+.icon-bar {
display: flex;
justify-content: space-evenly;
align-items: center;
height: 40px;
width: 100%;
flex-wrap: wrap;
- font-size: 2em;
+ // font-size: 2em;
+}
+
+.icon-title {
+ color: $light-color;
+ text-transform: uppercase;
+ padding: 5px;
}
-.type-icon{
+.type-icon {
height: 50px;
width: 50px;
color: $light-color;
@@ -19,22 +25,50 @@
display: flex;
justify-content: center;
align-items: center;
- // background-color: "#121721";
+ -webkit-transition: all 0.2s ease-in-out;
+ -moz-transition: all 0.2s ease-in-out;
+ -o-transition: all 0.2s ease-in-out;
+ transition: all 0.2s ease-in-out;
+ font-size: 2em;
}
-.type-icon.selected{
+.type-icon.selected {
background-color: $alt-accent;
}
-.type-icon.not-selected{
+.type-icon.not-selected {
background-color: transparent;
}
-.fontawesome-icon{
+.fontawesome-icon {
height: 28px;
width: 28px;
}
-.type-icon:hover{
+.type-icon:hover {
+ transform: scale(1.1);
background-color: $alt-accent;
+
+ +.filter-description {
+ opacity: 1;
+ }
+}
+
+.type-outer {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ width: 50px;
+}
+
+.filter-description {
+ font-size: 10;
+ text-align: center;
+ height: 15px;
+ margin-top: 5px;
+ opacity: 0;
+ -webkit-transition: all 0.2s ease-in-out;
+ -moz-transition: all 0.2s ease-in-out;
+ -o-transition: all 0.2s ease-in-out;
+ transition: all 0.2s ease-in-out;
} \ No newline at end of file
diff --git a/src/client/views/search/IconBar.tsx b/src/client/views/search/IconBar.tsx
index bf98e1ef3..9a36e7cdf 100644
--- a/src/client/views/search/IconBar.tsx
+++ b/src/client/views/search/IconBar.tsx
@@ -145,80 +145,101 @@ export class IconBar extends React.Component<IconBarProps> {
render() {
return (
- <div>
- <div className="icon-bar">
- <div
- className={"type-icon none"}
- ref={this.noneRef}
- data-selected={"true"}
- onClick={() => { this.onClick(DocTypes.NONE) }}>
- <FontAwesomeIcon className="fontawesome-icon" style={{ order: -2 }} icon={faBan} />
- </div>
- <div
- className={"type-icon " + (this.isRefSelected(this.pdfRef) ? "selected" : "not-selected")}
- ref={this.pdfRef}
- data-selected={"false"}
- onClick={() => { this.onClick(DocTypes.PDF) }}>
- <FontAwesomeIcon className="fontawesome-icon" style={{ order: 0 }} icon={faFilePdf} />
- </div>
- <div
- className={"type-icon " + (this.isRefSelected(this.histRef) ? "selected" : "not-selected")}
- ref={this.histRef}
- data-selected={"false"}
- onClick={() => { this.onClick(DocTypes.HIST) }}>
- <FontAwesomeIcon className="fontawesome-icon" style={{ order: 1 }} icon={faChartBar} />
- </div>
- <div
- className={"type-icon " + (this.isRefSelected(this.colRef) ? "selected" : "not-selected")}
- ref={this.colRef}
- data-selected={"false"}
- onClick={() => { this.onClick(DocTypes.COL) }}>
- <FontAwesomeIcon className="fontawesome-icon" style={{ order: 2 }} icon={faObjectGroup} />
- </div>
- <div
- className={"type-icon " + (this.isRefSelected(this.imgRef) ? "selected" : "not-selected")}
- ref={this.imgRef}
- data-selected={"false"}
- onClick={() => { this.onClick(DocTypes.IMG) }}>
- <FontAwesomeIcon className="fontawesome-icon" style={{ order: 3 }} icon={faImage} />
- </div>
- <div
- className={"type-icon " + (this.isRefSelected(this.vidRef) ? "selected" : "not-selected")}
- ref={this.vidRef}
- data-selected={"false"}
- onClick={() => { this.onClick(DocTypes.VID) }}>
- <FontAwesomeIcon className="fontawesome-icon" style={{ order: 4 }} icon={faFilm} />
- </div>
- <div
- className={"type-icon " + (this.isRefSelected(this.webRef) ?"selected" : "not-selected")}
- ref={this.webRef}
- data-selected={"false"}
- onClick={() => { this.onClick(DocTypes.WEB) }}>
- <FontAwesomeIcon className="fontawesome-icon" style={{ order: 5 }} icon={faGlobeAsia} />
- </div>
- <div
- className={"type-icon " + (this.isRefSelected(this.linkRef) ?"selected" : "not-selected")}
- ref={this.linkRef}
- data-selected={"false"}
- onClick={() => { this.onClick(DocTypes.LINK) }}>
- <FontAwesomeIcon className="fontawesome-icon" style={{ order: 6 }} icon={faLink} />
- </div>
- <div
- className={"type-icon " + (this.isRefSelected(this.audioRef) ? "selected" : "not-selected")}
- ref={this.audioRef}
- data-selected={"false"}
- onClick={() => { this.onClick(DocTypes.AUDIO) }}>
- <FontAwesomeIcon className="fontawesome-icon" style={{ order: 7 }} icon={faMusic} />
- </div>
- <div
- className={"type-icon " + (this.isRefSelected(this.textRef) ?"selected" : "not-selected")}
- ref={this.textRef}
- data-selected={"false"}
- onClick={() => { this.onClick(DocTypes.TEXT) }}>
- <FontAwesomeIcon className="fontawesome-icon" style={{ order: 8 }} icon={faStickyNote} />
+ <div>
+ <div className="icon-title">Filter by type of node</div>
+ <div className="icon-bar">
+ <div className="type-outer">
+ <div className={"type-icon none"}
+ ref={this.noneRef}
+ data-selected={"true"}
+ onClick={() => { this.onClick(DocTypes.NONE) }}>
+ <FontAwesomeIcon className="fontawesome-icon" style={{ order: -2 }} icon={faBan} />
+ </div>
+ <div className="filter-description">Clear</div>
+ </div>
+ <div className="type-outer">
+ <div className={"type-icon " + (this.isRefSelected(this.pdfRef) ? "selected" : "not-selected")}
+ ref={this.pdfRef}
+ data-selected={"false"}
+ onClick={() => { this.onClick(DocTypes.PDF) }}>
+ <FontAwesomeIcon className="fontawesome-icon" style={{ order: 0 }} icon={faFilePdf} />
+ </div>
+ <div className="filter-description">PDF</div>
+ </div>
+ <div className="type-outer">
+ <div className={"type-icon " + (this.isRefSelected(this.histRef) ? "selected" : "not-selected")}
+ ref={this.histRef}
+ data-selected={"false"}
+ onClick={() => { this.onClick(DocTypes.HIST) }}>
+ <FontAwesomeIcon className="fontawesome-icon" style={{ order: 1 }} icon={faChartBar} />
+ </div>
+ <div className="filter-description">Histogram</div>
+ </div>
+ <div className="type-outer">
+ <div className={"type-icon " + (this.isRefSelected(this.colRef) ? "selected" : "not-selected")}
+ ref={this.colRef}
+ data-selected={"false"}
+ onClick={() => { this.onClick(DocTypes.COL) }}>
+ <FontAwesomeIcon className="fontawesome-icon" style={{ order: 2 }} icon={faObjectGroup} />
+ </div>
+ <div className="filter-description">Collection</div>
+ </div>
+ <div className="type-outer">
+ <div className={"type-icon " + (this.isRefSelected(this.imgRef) ? "selected" : "not-selected")}
+ ref={this.imgRef}
+ data-selected={"false"}
+ onClick={() => { this.onClick(DocTypes.IMG) }}>
+ <FontAwesomeIcon className="fontawesome-icon" style={{ order: 3 }} icon={faImage} />
+ </div>
+ <div className="filter-description">Image</div>
+ </div>
+ <div className="type-outer">
+ <div className={"type-icon " + (this.isRefSelected(this.vidRef) ? "selected" : "not-selected")}
+ ref={this.vidRef}
+ data-selected={"false"}
+ onClick={() => { this.onClick(DocTypes.VID) }}>
+ <FontAwesomeIcon className="fontawesome-icon" style={{ order: 4 }} icon={faFilm} />
+ </div>
+ <div className="filter-description">Video</div>
+ </div>
+ <div className="type-outer">
+ <div className={"type-icon " + (this.isRefSelected(this.webRef) ? "selected" : "not-selected")}
+ ref={this.webRef}
+ data-selected={"false"}
+ onClick={() => { this.onClick(DocTypes.WEB) }}>
+ <FontAwesomeIcon className="fontawesome-icon" style={{ order: 5 }} icon={faGlobeAsia} />
+ </div>
+ <div className="filter-description">Web</div>
+ </div>
+ <div className="type-outer">
+ <div className={"type-icon " + (this.isRefSelected(this.linkRef) ? "selected" : "not-selected")}
+ ref={this.linkRef}
+ data-selected={"false"}
+ onClick={() => { this.onClick(DocTypes.LINK) }}>
+ <FontAwesomeIcon className="fontawesome-icon" style={{ order: 6 }} icon={faLink} />
+ </div>
+ <div className="filter-description">Link</div>
+ </div>
+ <div className="type-outer">
+ <div className={"type-icon " + (this.isRefSelected(this.audioRef) ? "selected" : "not-selected")}
+ ref={this.audioRef}
+ data-selected={"false"}
+ onClick={() => { this.onClick(DocTypes.AUDIO) }}>
+ <FontAwesomeIcon className="fontawesome-icon" style={{ order: 7 }} icon={faMusic} />
+ </div>
+ <div className="filter-description">Audio</div>
+ </div>
+ <div className="type-outer">
+ <div className={"type-icon " + (this.isRefSelected(this.textRef) ? "selected" : "not-selected")}
+ ref={this.textRef}
+ data-selected={"false"}
+ onClick={() => { this.onClick(DocTypes.TEXT) }}>
+ <FontAwesomeIcon className="fontawesome-icon" style={{ order: 8 }} icon={faStickyNote} />
+ </div>
+ <div className="filter-description">Text</div>
+ </div>
</div>
</div>
- </div>
)
}
}
diff --git a/src/client/views/search/SearchBox.scss b/src/client/views/search/SearchBox.scss
index 4ce40614f..48c8f4af1 100644
--- a/src/client/views/search/SearchBox.scss
+++ b/src/client/views/search/SearchBox.scss
@@ -57,10 +57,6 @@
height: 40px;
}
-// #option {
-// height: 20px;
-// }
-
.searchBox-results {
top: 300px;
display: flex;
@@ -68,8 +64,16 @@
margin-right: 72px;
}
+.filter-collection{
+ height: 20px;
+}
+
+.where-in-doc{
+ height: 20px;
+}
+
.type-of-node{
- height: 60px;
+ height: 90px;
}
.required-words{
diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
index 329643464..67122b320 100644
--- a/src/client/views/search/SearchBox.tsx
+++ b/src/client/views/search/SearchBox.tsx
@@ -27,6 +27,7 @@ import { IconBar } from './IconBar';
@observer
export class SearchBox extends React.Component {
@observable _searchString: string = "";
+ //if true, any keywords can be used. if false, all keywords are required.
@observable _wordStatus: boolean = true;
@observable _icons: string[] = [];
@observable private _open: boolean = false;
@@ -42,6 +43,20 @@ export class SearchBox extends React.Component {
@action
submitSearch = async () => {
let query = this._searchString;
+
+ if(!this._wordStatus){
+ let oldWords = query.split(" ");
+ let newWords: string[] = [];
+ console.log(oldWords)
+ oldWords.forEach(word => {
+ let newWrd = "+" + word;
+ newWords.push(newWrd);
+ })
+ console.log(newWords)
+
+ query = newWords.join(" ")
+ }
+
//gets json result into a list of documents that can be used
const results = await this.getResults(query);
@@ -185,8 +200,9 @@ export class SearchBox extends React.Component {
return toReturn;
}
- handleWordQueryChange = (value: boolean) => {
- this._wordStatus = value;
+ //if true, any keywords can be used. if false, all keywords are required.
+ handleWordQueryChange = () => {
+ this._wordStatus = !this._wordStatus;
}
@action.bound
diff --git a/src/client/views/search/ToggleBar.scss b/src/client/views/search/ToggleBar.scss
index 601b9a1dc..cccbf30fc 100644
--- a/src/client/views/search/ToggleBar.scss
+++ b/src/client/views/search/ToggleBar.scss
@@ -1,9 +1,5 @@
@import "../globalCssVariables";
-.toggle{
-
-}
-
.toggle-title{
display: flex;
align-items: center;
diff --git a/src/client/views/search/ToggleBar.tsx b/src/client/views/search/ToggleBar.tsx
index 2fc9c0040..5ede368d6 100644
--- a/src/client/views/search/ToggleBar.tsx
+++ b/src/client/views/search/ToggleBar.tsx
@@ -8,7 +8,8 @@ import * as anime from 'animejs';
export interface ToggleBarProps {
//false = right, true = left
// status: boolean;
- changeStatus(value: boolean): void;
+ changeStatus(): void;
+ // changeStatus(value: boolean): void;
optionOne: string;
optionTwo: string;
}
@@ -53,8 +54,9 @@ export class ToggleBar extends React.Component<ToggleBarProps>{
@action.bound
onclick() {
- this._status = !this._status;
- this.props.changeStatus(this._status);
+ // this._status = !this._status;
+ // this.props.changeStatus(this._status);
+ this.props.changeStatus();
this.timeline.play();
this.timeline.reverse();
}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-11 15:43:07 +0000