aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/client/views/search/CollectionFilters.tsx4
-rw-r--r--src/client/views/search/NaviconButton.tsx1
-rw-r--r--src/client/views/search/SearchBox.scss18
-rw-r--r--src/client/views/search/SearchBox.tsx91
-rw-r--r--src/client/views/search/ToggleBar.tsx13
5 files changed, 81 insertions, 46 deletions
diff --git a/src/client/views/search/CollectionFilters.tsx b/src/client/views/search/CollectionFilters.tsx
index b8c1579b2..6019154a6 100644
--- a/src/client/views/search/CollectionFilters.tsx
+++ b/src/client/views/search/CollectionFilters.tsx
@@ -55,9 +55,7 @@ export class CollectionFilters extends React.Component<CollectionFilterProps> {
}
@action.bound
- resetCollectionFilters() {
- this.resetBoolean = true;
- }
+ resetCollectionFilters() { this.resetBoolean = true; }
@action.bound
updateColStat(val: boolean) {
diff --git a/src/client/views/search/NaviconButton.tsx b/src/client/views/search/NaviconButton.tsx
index 8c022fab6..adfd1308c 100644
--- a/src/client/views/search/NaviconButton.tsx
+++ b/src/client/views/search/NaviconButton.tsx
@@ -6,6 +6,7 @@ import { observable } from 'mobx';
export interface NaviconProps{
onClick(): void;
+ outsideClick(): void;
}
diff --git a/src/client/views/search/SearchBox.scss b/src/client/views/search/SearchBox.scss
index 98eb31ba1..c98c7c28f 100644
--- a/src/client/views/search/SearchBox.scss
+++ b/src/client/views/search/SearchBox.scss
@@ -70,6 +70,22 @@
.filter-panel {
display: none;
+ width: 100%;
+ }
+
+ .close-icon {
+ height: 100%;
+ opacity: .6;
+ justify-content: right;
+ position: relative;
+ .fontawesome-icon {
+ margin-right: 0px;
+ height: 30px;
+ }
+ }
+
+ .close-icon:hover{
+ opacity: 1;
}
}
@@ -82,7 +98,7 @@
text-transform: uppercase;
letter-spacing: 2px;
font-size: 25;
- height: 40px;
+ width: 100%;
}
.searchBox-results {
diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
index 9a0a69f87..b19841312 100644
--- a/src/client/views/search/SearchBox.tsx
+++ b/src/client/views/search/SearchBox.tsx
@@ -3,6 +3,8 @@ import { observer } from 'mobx-react';
import { observable, action, runInAction } from 'mobx';
import "./SearchBox.scss";
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faTimes } from '@fortawesome/free-solid-svg-icons';
+import { library, icon } from '@fortawesome/fontawesome-svg-core';
import * as rp from 'request-promise';
import { SearchItem } from './SearchItem';
import { DocServer } from '../../DocServer';
@@ -21,6 +23,9 @@ import { SelectionManager } from '../../util/SelectionManager';
import { DocumentView } from '../nodes/DocumentView';
import { CollectionFilters } from './CollectionFilters';
import { NaviconButton } from './NaviconButton';
+import * as $ from 'jquery';
+
+library.add(faTimes);
export enum Keys {
TITLE = "title",
@@ -66,18 +71,23 @@ export class SearchBox extends React.Component {
}
});
+ //empties search query after 30 seconds of the search bar/filter box not being open
+ // if (!this._resultsOpen && !this._filterOpen) {
+ // setTimeout(this.clearSearchQuery, 30000);
+ // }
+ }
- var acc = document.getElementsByClassName('filter-header');
- // var i: number = 0;
-
- console.log("hello")
+ setupAccordion() {
+ $('document').ready(function(){
+ var acc = document.getElementsByClassName('filter-header');
for (var i = 0; i < acc.length; i++) {
// for(let entry of acc){
- console.log("looping")
acc[i].addEventListener("click", function (this: HTMLElement) {
this.classList.toggle("active");
+ console.log(this.childNodes)
+
var panel = this.nextElementSibling as HTMLElement;
if (panel) {
if (panel.style.display === "inline-block") {
@@ -88,26 +98,10 @@ export class SearchBox extends React.Component {
}
});
}
-
- //empties search query after 30 seconds of the search bar/filter box not being open
- // if (!this._resultsOpen && !this._filterOpen) {
- // setTimeout(this.clearSearchQuery, 30000);
- // }
+ });
}
@action.bound
- toggleFieldOpen() { this._fieldOpen = !this._fieldOpen; }
-
- @action.bound
- toggleColOpen() { this._colOpen = !this._colOpen; }
-
- @action.bound
- toggleTypeOpen() { this._typeOpen = !this._typeOpen; }
-
- @action.bound
- toggleWordStatusOpen() { this._wordStatusOpen = !this._wordStatusOpen; }
-
- @action.bound
resetFilters = () => {
ToggleBar.Instance.resetToggle();
IconBar.Instance.selectAll();
@@ -333,9 +327,7 @@ export class SearchBox extends React.Component {
}
enter = (e: React.KeyboardEvent) => {
- if (e.key === "Enter") {
- this.submitSearch();
- }
+ if (e.key === "Enter") { this.submitSearch(); }
}
@action.bound
@@ -350,6 +342,8 @@ export class SearchBox extends React.Component {
this._filterOpen = !this._filterOpen;
this._resultsOpen = false;
this._results = [];
+
+ this.setupAccordion();
}
collectionRef = React.createRef<HTMLSpanElement>();
@@ -402,24 +396,16 @@ export class SearchBox extends React.Component {
//if true, any keywords can be used. if false, all keywords are required.
@action.bound
- handleWordQueryChange = () => {
- this._basicWordStatus = !this._basicWordStatus;
- }
+ handleWordQueryChange = () => { this._basicWordStatus = !this._basicWordStatus; }
@action
- getBasicWordStatus() {
- return this._basicWordStatus;
- }
+ getBasicWordStatus() { return this._basicWordStatus; }
@action.bound
- updateIcon(newArray: string[]) {
- this._icons = newArray;
- }
+ updateIcon(newArray: string[]) { this._icons = newArray; }
@action.bound
- getIcons(): string[] {
- return this._icons;
- }
+ getIcons(): string[] { return this._icons; }
private _pointerTime: number = -1;
@@ -438,17 +424,38 @@ export class SearchBox extends React.Component {
}
@action.bound
+ closeFilter() { this._filterOpen = false; }
+
+ @action.bound
+ toggleFieldOpen() { this._fieldOpen = !this._fieldOpen; }
+
+ @action.bound
+ toggleColOpen() { this._colOpen = !this._colOpen; }
+
+ @action.bound
+ toggleTypeOpen() { this._typeOpen = !this._typeOpen; }
+
+ @action.bound
+ toggleWordStatusOpen() { this._wordStatusOpen = !this._wordStatusOpen; }
+
+ @action.bound
updateTitleStatus(newStat: boolean) { this.titleFieldStatus = newStat; }
+
@action.bound
updateAuthorStatus(newStat: boolean) { this.authorFieldStatus = newStat; }
+
@action.bound
updateDataStatus(newStat: boolean) { this.dataFieldStatus = newStat; }
+
@action.bound
updateCollectionStatus(newStat: boolean) { this.collectionStatus = newStat; }
+
@action.bound
updateSelfCollectionStatus(newStat: boolean) { this.collectionSelfStatus = newStat; }
+
@action.bound
updateParentCollectionStatus(newStat: boolean) { this.collectionParentStatus = newStat; }
+
getCollectionStatus() { return this.collectionStatus; }
getSelfCollectionStatus() { return this.collectionSelfStatus; }
getParentCollectionStatus() { return this.collectionParentStatus; }
@@ -484,14 +491,20 @@ export class SearchBox extends React.Component {
</div>
{this._filterOpen ? (
<div className="filter-form" onPointerDown={this.stopProp} id="filter" style={this._filterOpen ? { display: "flex" } : { display: "none" }}>
- <div id="header">Filter Search Results</div>
+ <div style={{ display: "flex", width: "100%"}}>
+ <div id="header">Filter Search Results</div>
+ <div className = "close-icon" onClick = {this.closeFilter}><FontAwesomeIcon className="fontawesome-icon" icon={faTimes} size = "2x"/></div>
+ </div>
<div>
<div className="filter-div">
<div className="filter-header">
<div className='filter-title words'>Required words</div>
<div style={{ marginLeft: "auto" }}><NaviconButton onClick={this.toggleWordStatusOpen} /></div>
</div>
- <div className="filter-panel"><ToggleBar originalStatus={this._basicWordStatus} optionOne={"Include Any Keywords"} optionTwo={"Include All Keywords"} /></div>
+ <div className="filter-panel" >
+ <ToggleBar
+ originalStatus={this._basicWordStatus} optionOne={"Include Any Keywords"} optionTwo={"Include All Keywords"} />
+ </div>
</div>
<div className="filter-div">
<div className="filter-header">
diff --git a/src/client/views/search/ToggleBar.tsx b/src/client/views/search/ToggleBar.tsx
index 6f141d42a..90fab99ee 100644
--- a/src/client/views/search/ToggleBar.tsx
+++ b/src/client/views/search/ToggleBar.tsx
@@ -39,16 +39,23 @@ export class ToggleBar extends React.Component<ToggleBarProps>{
let barwidth = 0;
let togwidth = 0;
if (bar && tog) {
- barwidth = bar.clientWidth;
- togwidth = tog.clientWidth;
+ console.log("they exist")
+ barwidth = bar.getBoundingClientRect().width;
+ // barwidth = bar.clientWidth;
+ console.log(barwidth)
+ togwidth = tog.getBoundingClientRect().width;
+ // togwidth = tog.clientWidth;
+ console.log(togwidth)
}
let totalWidth = (barwidth - togwidth - 10);
+ console.log(totalWidth)
return totalWidth;
}
componentDidMount = () => {
- let totalWidth = this.totalWidth;
+ // let totalWidth = this.totalWidth;
+ let totalWidth = 265;
if (this._originalStatus) {
this.forwardTimeline.add({
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-09 07:38:06 +0000