aboutsummaryrefslogtreecommitdiff
path: root/src/client/views
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views')
-rw-r--r--src/client/views/SearchDocBox.tsx34
-rw-r--r--src/client/views/search/CheckBox.tsx146
-rw-r--r--src/client/views/search/SearchBox.tsx47
3 files changed, 138 insertions, 89 deletions
diff --git a/src/client/views/SearchDocBox.tsx b/src/client/views/SearchDocBox.tsx
index 5f308ff71..5a76a882f 100644
--- a/src/client/views/SearchDocBox.tsx
+++ b/src/client/views/SearchDocBox.tsx
@@ -39,6 +39,8 @@ export const keyPlaceholder = "Query";
@observer
export class SearchDocBox extends React.Component<FieldViewProps> {
+ public static LayoutString(fieldKey: string) { return FieldView.LayoutString(SearchDocBox, fieldKey); }
+
// @observable private _display: boolean = false;
@observable private _pageX: number = 0;
@observable private _pageY: number = 0;
@@ -72,7 +74,7 @@ export class SearchDocBox extends React.Component<FieldViewProps> {
console.log("didit"
);
this.query = StrCast(this.props.Document.searchText);
- this.content = (Docs.Create.TreeDocument(DocListCast(Doc.GetProto(this.props.Document).data), { _width: 200, _height: 400, _chromeStatus: "disabled", title: `Search Docs:` + this.query}));
+ this.content = (Docs.Create.TreeDocument(DocListCast(Doc.GetProto(this.props.Document).data), { _width: 200, _height: 400, _chromeStatus: "disabled", title: `Search Docs:` + this.query }));
});
if (this.inputRef.current) {
@@ -89,16 +91,16 @@ export class SearchDocBox extends React.Component<FieldViewProps> {
@action
updateKey = async (newKey: string) => {
this.query = newKey;
- if (newKey.length >1){
- let newdocs= await this.getAllResults(this.query)
+ if (newKey.length > 1) {
+ let newdocs = await this.getAllResults(this.query);
let things = newdocs.docs
console.log(things);
console.log(this.content);
runInAction(() => {
- this.content= Docs.Create.TreeDocument(things, { _width: 200, _height: 400, _chromeStatus: "disabled", title: `Search Docs:` + this.query });
- });
- console.log(this.content);
- }
+ this.content = Docs.Create.TreeDocument(things, { _width: 200, _height: 400, _chromeStatus: "disabled", title: `Search Docs:` + this.query });
+ });
+ console.log(this.content);
+ }
//this.keyRef.current && this.keyRef.current.setIsFocused(false);
@@ -161,11 +163,11 @@ export class SearchDocBox extends React.Component<FieldViewProps> {
enter = async (e: React.KeyboardEvent) => {
console.log(e.key);
if (e.key === "Enter") {
- let newdocs= await this.getAllResults(this.query)
+ let newdocs = await this.getAllResults(this.query)
let things = newdocs.docs
console.log(things);
- this.content=Docs.Create.TreeDocument(things, { _width: 200, _height: 400, _chromeStatus: "disabled", title: `Search Docs: "Results"` });
-
+ this.content = Docs.Create.TreeDocument(things, { _width: 200, _height: 400, _chromeStatus: "disabled", title: `Search Docs: "Results"` });
+
}
}
@@ -407,9 +409,9 @@ export class SearchDocBox extends React.Component<FieldViewProps> {
return (
<div style={{ pointerEvents: "all" }}>
<ContentFittingDocumentView {...this.props}
- Document={this.content}
- getTransform={this.props.ScreenToLocalTransform}>
- s</ContentFittingDocumentView>
+ Document={this.content}
+ getTransform={this.props.ScreenToLocalTransform}>
+ s</ContentFittingDocumentView>
<div
style={{
position: "absolute",
@@ -421,12 +423,12 @@ export class SearchDocBox extends React.Component<FieldViewProps> {
opacity: 1,
transition: "0.4s opacity ease",
zIndex: 99,
- top:0,
+ top: 0,
}}
title={"Add Metadata"}
- onClick={action(() => {this.editingMetadata = !this.editingMetadata })}
+ onClick={action(() => { this.editingMetadata = !this.editingMetadata })}
/>
- <div className="editableclass" onKeyPress={this.enter} style={{ opacity: isEditing ? 1 : 0, pointerEvents: isEditing ? "auto" : "none", transition: "0.4s opacity ease",position:"absolute",top:0,left:0, height:20, width:"-webkit-fill-available" }}>
+ <div className="editableclass" onKeyPress={this.enter} style={{ opacity: isEditing ? 1 : 0, pointerEvents: isEditing ? "auto" : "none", transition: "0.4s opacity ease", position: "absolute", top: 0, left: 0, height: 20, width: "-webkit-fill-available" }}>
<EditableView
contents={this.query}
SetValue={this.updateKey}
diff --git a/src/client/views/search/CheckBox.tsx b/src/client/views/search/CheckBox.tsx
index a9d48219a..8c97d5dbc 100644
--- a/src/client/views/search/CheckBox.tsx
+++ b/src/client/views/search/CheckBox.tsx
@@ -17,8 +17,8 @@ interface CheckBoxProps {
export class CheckBox extends React.Component<CheckBoxProps>{
// true = checked, false = unchecked
@observable private _status: boolean;
- @observable private uncheckTimeline: anime.AnimeTimelineInstance;
- @observable private checkTimeline: anime.AnimeTimelineInstance;
+ // @observable private uncheckTimeline: anime.AnimeTimelineInstance;
+ // @observable private checkTimeline: anime.AnimeTimelineInstance;
@observable private checkRef: any;
@observable private _resetReaction?: IReactionDisposer;
@@ -28,87 +28,87 @@ export class CheckBox extends React.Component<CheckBoxProps>{
this._status = this.props.originalStatus;
this.checkRef = React.createRef();
- this.checkTimeline = anime.timeline({
- loop: false,
- autoplay: false,
- direction: "normal",
- }); this.uncheckTimeline = anime.timeline({
- loop: false,
- autoplay: false,
- direction: "normal",
- });
+ // this.checkTimeline = anime.timeline({
+ // loop: false,
+ // autoplay: false,
+ // direction: "normal",
+ // }); this.uncheckTimeline = anime.timeline({
+ // loop: false,
+ // autoplay: false,
+ // direction: "normal",
+ // });
}
- componentDidMount = () => {
- this.uncheckTimeline.add({
- targets: this.checkRef.current,
- easing: "easeInOutQuad",
- duration: 500,
- opacity: 0,
- });
- this.checkTimeline.add({
- targets: this.checkRef.current,
- easing: "easeInOutQuad",
- duration: 500,
- strokeDashoffset: [anime.setDashoffset, 0],
- opacity: 1
- });
+ // componentDidMount = () => {
+ // this.uncheckTimeline.add({
+ // targets: this.checkRef.current,
+ // easing: "easeInOutQuad",
+ // duration: 500,
+ // opacity: 0,
+ // });
+ // this.checkTimeline.add({
+ // targets: this.checkRef.current,
+ // easing: "easeInOutQuad",
+ // duration: 500,
+ // strokeDashoffset: [anime.setDashoffset, 0],
+ // opacity: 1
+ // });
- if (this.props.originalStatus) {
- this.checkTimeline.play();
- this.checkTimeline.restart();
- }
+ // if (this.props.originalStatus) {
+ // this.checkTimeline.play();
+ // this.checkTimeline.restart();
+ // }
- this._resetReaction = reaction(
- () => this.props.parent._resetBoolean,
- () => {
- if (this.props.parent._resetBoolean) {
- runInAction(() => {
- this.reset();
- this.props.parent._resetCounter++;
- if (this.props.parent._resetCounter === this.props.numCount) {
- this.props.parent._resetCounter = 0;
- this.props.parent._resetBoolean = false;
- }
- });
- }
- },
- );
- }
+ // this._resetReaction = reaction(
+ // () => this.props.parent._resetBoolean,
+ // () => {
+ // if (this.props.parent._resetBoolean) {
+ // runInAction(() => {
+ // this.reset();
+ // this.props.parent._resetCounter++;
+ // if (this.props.parent._resetCounter === this.props.numCount) {
+ // this.props.parent._resetCounter = 0;
+ // this.props.parent._resetBoolean = false;
+ // }
+ // });
+ // }
+ // },
+ // );
+ // }
- @action.bound
- reset() {
- if (this.props.default) {
- if (!this._status) {
- this._status = true;
- this.checkTimeline.play();
- this.checkTimeline.restart();
- }
- }
- else {
- if (this._status) {
- this._status = false;
- this.uncheckTimeline.play();
- this.uncheckTimeline.restart();
- }
- }
+ // @action.bound
+ // reset() {
+ // if (this.props.default) {
+ // if (!this._status) {
+ // this._status = true;
+ // this.checkTimeline.play();
+ // this.checkTimeline.restart();
+ // }
+ // }
+ // else {
+ // if (this._status) {
+ // this._status = false;
+ // this.uncheckTimeline.play();
+ // this.uncheckTimeline.restart();
+ // }
+ // }
- this.props.updateStatus(this.props.default);
- }
+ // this.props.updateStatus(this.props.default);
+ // }
@action.bound
onClick = () => {
- if (this._status) {
- this.uncheckTimeline.play();
- this.uncheckTimeline.restart();
- }
- else {
- this.checkTimeline.play();
- this.checkTimeline.restart();
+ // if (this._status) {
+ // this.uncheckTimeline.play();
+ // this.uncheckTimeline.restart();
+ // }
+ // else {
+ // this.checkTimeline.play();
+ // this.checkTimeline.restart();
- }
- this._status = !this._status;
- this.props.updateStatus(this._status);
+ // }
+ // this._status = !this._status;
+ // this.props.updateStatus(this._status);
}
diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
index 9af8829fa..02b41bc70 100644
--- a/src/client/views/search/SearchBox.tsx
+++ b/src/client/views/search/SearchBox.tsx
@@ -17,6 +17,7 @@ import "./FilterBox.scss";
import "./SearchBox.scss";
import { SearchItem } from './SearchItem';
import { IconBar } from './IconBar';
+import { FieldFilters } from './FieldFilters';
library.add(faTimes);
@@ -338,6 +339,9 @@ export class SearchBox extends React.Component {
@computed
get resultHeight() { return this._numTotalResults * 70; }
+ @observable private _filterOpen: boolean = false;
+
+
render() {
return (
<div className="searchBox-container" onPointerDown={e => { e.stopPropagation(); e.preventDefault(); }}>
@@ -353,6 +357,49 @@ export class SearchBox extends React.Component {
<div className="searchBox-quickFilter" onPointerDown={this.openSearch}>
<div className="filter-panel"><IconBar /></div>
</div>
+ <div>
+ <div style={{ display: "flex", flexDirection: "row-reverse" }}>
+ <SearchBox />
+ {/* {this.getActiveFilters()} */}
+ </div>
+ <div className="filter-form" onPointerDown={this.stopProp} id="filter-form" style={this._filterOpen ? { display: "flex" } : { display: "none" }}>
+ <div className="top-filter-header" style={{ display: "flex", width: "100%" }}>
+ <div id="header">Filter Search Results</div>
+ <div style={{ marginLeft: "auto" }}></div>
+ <div className="close-icon" >
+ <span className="line line-1"></span>
+ <span className="line line-2"></span></div>
+ </div>
+ <div className="filter-options">
+ <div className="filter-div">
+ <div className="filter-header">
+ <div className='filter-title words'>Required words</div>
+ </div>
+ <div className="filter-panel" >
+ <button className="all-filter">Include All Keywords</button>
+ </div>
+ </div>
+ <div className="filter-div">
+ <div className="filter-header">
+ <div className="filter-title icon">Filter by type of node</div>
+ </div>
+ <div className="filter-panel"><IconBar /></div>
+ </div>
+ <div className="filter-div">
+ <div className="filter-header">
+ <div className="filter-title field">Filter by Basic Keys</div>
+ </div>
+ <div className="filter-panel"><FieldFilters
+ titleFieldStatus={this._titleFieldStatus} dataFieldStatus={this._deletedDocsStatus} authorFieldStatus={this._authorFieldStatus}
+ updateAuthorStatus={this.updateAuthorStatus} updateDataStatus={this.updateDataStatus} updateTitleStatus={this.updateTitleStatus} /> </div>
+ </div>
+ </div>
+ <div className="filter-buttons" style={{ display: "flex", justifyContent: "space-around" }}>
+ <button className="save-filter" >Save Filters</button>
+ <button className="reset-filter" >Reset Filters</button>
+ </div>
+ </div>
+ </div>
<div className="searchBox-results" onScroll={this.resultsScrolled} style={{
display: this._resultsOpen ? "flex" : "none",
height: this.resFull ? "auto" : this.resultHeight,
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2026-02-20 17:38:34 +0000