From 639dee759e23083d269ab2a66f30e669b46a9aaf Mon Sep 17 00:00:00 2001 From: madelinegr Date: Thu, 13 Jun 2019 18:41:18 -0400 Subject: honestly no idea what is going on --- src/client/views/search/CheckBox.tsx | 40 ++++++++++++++++++++++++++++++++++++ 1 file changed, 40 insertions(+) create mode 100644 src/client/views/search/CheckBox.tsx (limited to 'src/client/views/search/CheckBox.tsx') diff --git a/src/client/views/search/CheckBox.tsx b/src/client/views/search/CheckBox.tsx new file mode 100644 index 000000000..8b5f7d7c1 --- /dev/null +++ b/src/client/views/search/CheckBox.tsx @@ -0,0 +1,40 @@ +import * as React from 'react'; +import { observer } from 'mobx-react'; +import { observable, action, runInAction } from 'mobx'; +import "./CheckBox.scss"; + +interface CheckBoxProps { + originalStatus: boolean; + updateStatus(newStatus: boolean): void; + title: string; +} + +@observer +export class CheckBox extends React.Component{ + @observable _status: boolean; + + constructor(props: CheckBoxProps) { + super(props); + + this._status = this.props.originalStatus; + } + + onClick = () => { + this._status = !this._status; + this.props.updateStatus(this._status); + } + + render() { + return ( +
+
+ + + +
+
{this.props.title}
+
+ ) + } + +} \ No newline at end of file -- cgit v1.2.3-70-g09d2 From f3f76fc25a9e39d4c08618fb601b5e66ce62e235 Mon Sep 17 00:00:00 2001 From: madelinegr Date: Tue, 18 Jun 2019 18:24:51 -0400 Subject: end of day 6/18 --- src/client/views/search/CheckBox.scss | 19 ++++++++++-- src/client/views/search/CheckBox.tsx | 58 +++++++++++++++++++++++++++++++---- 2 files changed, 69 insertions(+), 8 deletions(-) (limited to 'src/client/views/search/CheckBox.tsx') diff --git a/src/client/views/search/CheckBox.scss b/src/client/views/search/CheckBox.scss index 8eee9176b..f7652d830 100644 --- a/src/client/views/search/CheckBox.scss +++ b/src/client/views/search/CheckBox.scss @@ -1,8 +1,15 @@ -@import "../globalCssVariables"; +@import "../globalCssVariables"; .checkbox { display: flex; + .outer { + display: flex; + position: relative; + justify-content: center; + align-items: center; + } + .check-box { z-index: 900; position: relative; @@ -15,13 +22,20 @@ border-width: 2px; } + .check-container { + width: 40px; + height: 40px; + position: absolute; + z-index: 1000; + } + .box:hover { background-color: $intermediate-color; } .checkmark { z-index: 1000; - position: relative; + position: absolute; fill-opacity: 0; stroke-width: 4px; stroke: white; @@ -31,4 +45,5 @@ .checkbox-title { text-transform: uppercase; + margin-left: 10px; } \ No newline at end of file diff --git a/src/client/views/search/CheckBox.tsx b/src/client/views/search/CheckBox.tsx index 8b5f7d7c1..ace479c70 100644 --- a/src/client/views/search/CheckBox.tsx +++ b/src/client/views/search/CheckBox.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; import { observer } from 'mobx-react'; import { observable, action, runInAction } from 'mobx'; import "./CheckBox.scss"; +import * as anime from 'animejs'; interface CheckBoxProps { originalStatus: boolean; @@ -11,27 +12,72 @@ interface CheckBoxProps { @observer export class CheckBox extends React.Component{ + // true = checked, false = unchecked @observable _status: boolean; + @observable uncheckTimeline: anime.AnimeTimelineInstance; + @observable checkTimeline: anime.AnimeTimelineInstance; + @observable checkRef: any; + constructor(props: CheckBoxProps) { super(props); - 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", + }); + } + + componentDidMount = () => { + this.uncheckTimeline.add({ + targets: this.checkRef.current, + easing: "easeInOutQuad", + duration: 500, + opacity: 1 , + }); + this.checkTimeline.add({ + targets: this.checkRef.current, + easing: "easeInOutQuad", + duration: 500, + strokeDashoffset: [anime.setDashoffset, 0], + opacity: 1 + }); } + @action.bound onClick = () => { - this._status = !this._status; this.props.updateStatus(this._status); + + if(this._status){ + this.uncheckTimeline.play(); + this.uncheckTimeline.restart(); + } + else{ + this.checkTimeline.play(); + this.checkTimeline.restart(); + + } + this._status = !this._status; } render() { return ( -
-
- - +
+
+
+ +
+
+
{this.props.title}
) -- cgit v1.2.3-70-g09d2 From 3f393bd6579f4d37ff2ffc7791ce707cedf3763f Mon Sep 17 00:00:00 2001 From: Monika Date: Wed, 19 Jun 2019 10:46:05 -0400 Subject: testin push --- src/client/views/search/CheckBox.tsx | 2 ++ 1 file changed, 2 insertions(+) (limited to 'src/client/views/search/CheckBox.tsx') diff --git a/src/client/views/search/CheckBox.tsx b/src/client/views/search/CheckBox.tsx index ace479c70..94fd3503d 100644 --- a/src/client/views/search/CheckBox.tsx +++ b/src/client/views/search/CheckBox.tsx @@ -35,6 +35,8 @@ export class CheckBox extends React.Component{ }); } + //testiing + componentDidMount = () => { this.uncheckTimeline.add({ targets: this.checkRef.current, -- cgit v1.2.3-70-g09d2 From 3e7b7ea48e8ee6b4f2059f54e7cbc81c19ef4bef Mon Sep 17 00:00:00 2001 From: Monika Date: Wed, 19 Jun 2019 12:44:35 -0400 Subject: filtering by basic key working nicely --- src/client/views/search/CheckBox.tsx | 8 ++- src/client/views/search/FieldFilters.tsx | 29 +++++++++ src/client/views/search/SearchBox.scss | 12 +++- src/client/views/search/SearchBox.tsx | 100 ++++++++++++++++++++++++++----- src/client/views/search/ToggleBar.scss | 4 -- 5 files changed, 129 insertions(+), 24 deletions(-) create mode 100644 src/client/views/search/FieldFilters.tsx (limited to 'src/client/views/search/CheckBox.tsx') diff --git a/src/client/views/search/CheckBox.tsx b/src/client/views/search/CheckBox.tsx index 94fd3503d..fc1d4005e 100644 --- a/src/client/views/search/CheckBox.tsx +++ b/src/client/views/search/CheckBox.tsx @@ -42,7 +42,7 @@ export class CheckBox extends React.Component{ targets: this.checkRef.current, easing: "easeInOutQuad", duration: 500, - opacity: 1 , + opacity: 0 , }); this.checkTimeline.add({ targets: this.checkRef.current, @@ -51,11 +51,15 @@ export class CheckBox extends React.Component{ strokeDashoffset: [anime.setDashoffset, 0], opacity: 1 }); + + if(this.props.originalStatus){ + this.checkTimeline.play(); + } } @action.bound onClick = () => { - this.props.updateStatus(this._status); + this.props.updateStatus(!this._status); if(this._status){ this.uncheckTimeline.play(); diff --git a/src/client/views/search/FieldFilters.tsx b/src/client/views/search/FieldFilters.tsx new file mode 100644 index 000000000..e84137d69 --- /dev/null +++ b/src/client/views/search/FieldFilters.tsx @@ -0,0 +1,29 @@ +import * as React from 'react'; +import { observer } from 'mobx-react'; +import { observable, action, runInAction } from 'mobx'; +import "./SearchBox.scss"; +import { CheckBox } from './CheckBox'; +import { Keys } from './SearchBox'; +import "./SearchBox.scss"; + +export interface FieldFilterProps { + titleFieldStatus: boolean; + dataFieldStatus: boolean; + authorFieldStatus: boolean; + updateTitleStatus(stat: boolean): void; + updateAuthorStatus(stat: boolean): void; + updateDataStatus(stat: boolean): void; +} + +export class FieldFilters extends React.Component { + render() { + return ( +
+
Filter by Basic Keys
+ + + +
+ ) + } +} \ No newline at end of file diff --git a/src/client/views/search/SearchBox.scss b/src/client/views/search/SearchBox.scss index 786b76a5b..2b52112e0 100644 --- a/src/client/views/search/SearchBox.scss +++ b/src/client/views/search/SearchBox.scss @@ -38,11 +38,14 @@ .filter-form { background: $dark-color; - height: 400px; + // height: 400px; + height: auto; + overflow: auto; position: relative; right: 1px; color: $light-color; flex-direction: column; + display: inline-block; } #filter{ @@ -68,8 +71,11 @@ height: 20px; } -.where-in-doc{ - height: 20px; +.field-title { + color: $light-color; + text-transform: uppercase; + margin-top: 5px; + margin-bottom: 5px; } .type-of-node{ diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index 755d6a14c..a25fff32d 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -23,9 +23,12 @@ import { ToggleBar } from './ToggleBar'; import { IconBar } from './IconBar'; import { type } from 'os'; import { CheckBox } from './CheckBox'; +import { FieldFilters } from './FieldFilters'; export enum Keys { TITLE = "title", + AUTHOR = "author", + DATA = "data" } @observer @@ -39,11 +42,13 @@ export class SearchBox extends React.Component { @observable private _filterOpen: boolean = false; @observable private _resultsOpen: boolean = false; @observable private _results: Doc[] = []; - @observable filterBoxStatus: boolean = false; @observable private _openNoResults: boolean = false; allIcons: string[] = [DocTypes.AUDIO, DocTypes.COL, DocTypes.HIST, DocTypes.IMG, DocTypes.LINK, DocTypes.PDF, DocTypes.TEXT, DocTypes.VID, DocTypes.WEB]; @observable _icons: string[] = this.allIcons; @observable _selectedTypes: any[] = []; + @observable titleFieldStatus: boolean = true; + @observable authorFieldStatus: boolean = true; + @observable dataFieldStatus: boolean = true; constructor(props: Readonly<{}>) { super(props); @@ -58,7 +63,7 @@ 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){ + if (!this._resultsOpen && !this._filterOpen) { setTimeout(this.clearSearchQuery, 30000); } } @@ -69,6 +74,7 @@ export class SearchBox extends React.Component { IconBar.Instance.selectAll(); } + @action.bound onChange(e: React.ChangeEvent) { this._searchString = e.target.value; @@ -85,27 +91,80 @@ export class SearchBox extends React.Component { this._results = []; } + basicRequireWords(query: string): string { + let oldWords = query.split(" "); + let newWords: string[] = []; + oldWords.forEach(word => { + let newWrd = "+" + word; + newWords.push(newWrd); + }); + query = newWords.join(" "); + + return query; + } + + basicFieldFilters(query: string, type: string): string { + let oldWords = query.split(" "); + let mod = ""; + + if(type === Keys.AUTHOR){ + mod = " author_t:"; + }if(type === Keys.DATA){ + //TODO + }if(type === Keys.TITLE){ + mod = " title_t:"; + } + + let newWords:string[] = []; + oldWords.forEach(word => { + let newWrd = mod + word; + newWords.push(newWrd); + }); + + query = newWords.join(" "); + + return query; + } + + applyBasicFieldFilters(query: string) { + let finalQuery = ""; + + if(this.titleFieldStatus){ + finalQuery = finalQuery + this.basicFieldFilters(query, Keys.TITLE); + } + if(this.authorFieldStatus){ + finalQuery = finalQuery + this.basicFieldFilters(query, Keys.AUTHOR); + } + if(this.dataFieldStatus){ + finalQuery = finalQuery + this.basicFieldFilters(query, Keys.DATA); + } + return finalQuery; + } + + get fieldFiltersApplied(){return !(this.dataFieldStatus && this.authorFieldStatus && this.titleFieldStatus);} + @action submitSearch = async () => { let query = this._searchString; let results: Doc[]; + //if this is true, then not all of the field boxes are checked + //TODO: data + if(this.fieldFiltersApplied){ + query = this.applyBasicFieldFilters(query); + } + //if this._wordstatus is false, all words are required and a + is added before each if (!this._basicWordStatus) { - let oldWords = query.split(" "); - let newWords: string[] = []; - oldWords.forEach(word => { - let newWrd = "+" + word; - newWords.push(newWrd); - }); - query = newWords.join(" "); + query = this.basicRequireWords(query); } + query = query.replace(/\s+/g, ' ').trim() + //if there is no query there should be no result if (query === "") { results = []; } - else { //gets json result into a list of documents that can be used results = await this.getResults(query); @@ -271,9 +330,19 @@ export class SearchBox extends React.Component { this._pointerTime = e.timeStamp; } - //TODO: to be done with checkmark - updateCheckStatus(newStat: boolean) { - console.log("updating!") + @action.bound + updateTitleStatus(newStat: boolean) { + this.titleFieldStatus = newStat; + } + + @action.bound + updateAuthorStatus(newStat: boolean) { + this.authorFieldStatus = newStat; + } + + @action.bound + updateDataStatus(newStat: boolean) { + this.dataFieldStatus = newStat; } // Useful queries: @@ -310,13 +379,14 @@ export class SearchBox extends React.Component {
- +
temp for filtering by collection
- +
diff --git a/src/client/views/search/ToggleBar.scss b/src/client/views/search/ToggleBar.scss index 68f0c9c2b..3a262709d 100644 --- a/src/client/views/search/ToggleBar.scss +++ b/src/client/views/search/ToggleBar.scss @@ -32,9 +32,5 @@ height: 100%; border-radius: 10px; background-color: $light-color; - -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 -- cgit v1.2.3-70-g09d2 From 1980d7009606bef0fb52104db0856b691c12bb9e Mon Sep 17 00:00:00 2001 From: Monika Date: Wed, 19 Jun 2019 13:48:31 -0400 Subject: checkboxes working and clearing --- src/client/views/search/CheckBox.tsx | 63 +++++++++++++++++++++++--------- src/client/views/search/FieldFilters.tsx | 23 ++++++++++-- src/client/views/search/SearchBox.tsx | 2 +- 3 files changed, 66 insertions(+), 22 deletions(-) (limited to 'src/client/views/search/CheckBox.tsx') diff --git a/src/client/views/search/CheckBox.tsx b/src/client/views/search/CheckBox.tsx index fc1d4005e..163507ec3 100644 --- a/src/client/views/search/CheckBox.tsx +++ b/src/client/views/search/CheckBox.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { observer } from 'mobx-react'; -import { observable, action, runInAction } from 'mobx'; +import { observable, action, runInAction, IReactionDisposer, reaction } from 'mobx'; import "./CheckBox.scss"; import * as anime from 'animejs'; @@ -8,6 +8,8 @@ interface CheckBoxProps { originalStatus: boolean; updateStatus(newStatus: boolean): void; title: string; + parent: any; + numCount: number; } @observer @@ -17,6 +19,7 @@ export class CheckBox extends React.Component{ @observable uncheckTimeline: anime.AnimeTimelineInstance; @observable checkTimeline: anime.AnimeTimelineInstance; @observable checkRef: any; + @observable _resetReaction?: IReactionDisposer; constructor(props: CheckBoxProps) { @@ -28,21 +31,19 @@ export class CheckBox extends React.Component{ loop: false, autoplay: false, direction: "normal", - });this.uncheckTimeline = anime.timeline({ + }); this.uncheckTimeline = anime.timeline({ loop: false, autoplay: false, direction: "normal", }); } - //testiing - componentDidMount = () => { this.uncheckTimeline.add({ targets: this.checkRef.current, easing: "easeInOutQuad", duration: 500, - opacity: 0 , + opacity: 0, }); this.checkTimeline.add({ targets: this.checkRef.current, @@ -52,37 +53,63 @@ export class CheckBox extends React.Component{ opacity: 1 }); - if(this.props.originalStatus){ + if (this.props.originalStatus) { this.checkTimeline.play(); } + + 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.resetCounter = false; + } + }) + } + }, + ) } @action.bound - onClick = () => { - this.props.updateStatus(!this._status); + reset() { + if (!this._status) { + this._status = true; + this.checkTimeline.play(); + this.checkTimeline.restart(); + } - if(this._status){ + } + + @action.bound + onClick = () => { + if (this._status) { this.uncheckTimeline.play(); this.uncheckTimeline.restart(); } - else{ + else { this.checkTimeline.play(); this.checkTimeline.restart(); } this._status = !this._status; + this.props.updateStatus(this._status); + } render() { return ( -
-
-
- - - -
-
+
+
+
+ + + +
+
{this.props.title}
diff --git a/src/client/views/search/FieldFilters.tsx b/src/client/views/search/FieldFilters.tsx index e84137d69..81391e73b 100644 --- a/src/client/views/search/FieldFilters.tsx +++ b/src/client/views/search/FieldFilters.tsx @@ -16,13 +16,30 @@ export interface FieldFilterProps { } export class FieldFilters extends React.Component { + + static Instance: FieldFilters; + @observable public resetBoolean = false; + @observable public resetCounter: number = 0; + + constructor(props: FieldFilterProps){ + super(props); + FieldFilters.Instance = this; + } + +resetFieldFilters() { + this.props.updateAuthorStatus(true); + this.props.updateDataStatus(true); + this.props.updateTitleStatus(true); + this.resetBoolean = true; +} + render() { return (
Filter by Basic Keys
- - - + + +
) } diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index a25fff32d..4a0fe452a 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -72,9 +72,9 @@ export class SearchBox extends React.Component { resetFilters = () => { ToggleBar.Instance.resetToggle(); IconBar.Instance.selectAll(); + FieldFilters.Instance.resetFieldFilters(); } - @action.bound onChange(e: React.ChangeEvent) { this._searchString = e.target.value; -- cgit v1.2.3-70-g09d2 From 475df987dd647bb1e5202329f0d0ffc088bb66e6 Mon Sep 17 00:00:00 2001 From: Monika Date: Wed, 19 Jun 2019 13:57:34 -0400 Subject: lint errors --- src/client/views/search/CheckBox.tsx | 6 ++--- src/client/views/search/FieldFilters.tsx | 2 +- src/client/views/search/IconBar.tsx | 2 +- src/client/views/search/IconButton.tsx | 38 ++++++++++++++++---------------- src/client/views/search/SearchBox.tsx | 2 +- src/client/views/search/ToggleBar.tsx | 2 +- 6 files changed, 26 insertions(+), 26 deletions(-) (limited to 'src/client/views/search/CheckBox.tsx') diff --git a/src/client/views/search/CheckBox.tsx b/src/client/views/search/CheckBox.tsx index 163507ec3..26ad9d8ce 100644 --- a/src/client/views/search/CheckBox.tsx +++ b/src/client/views/search/CheckBox.tsx @@ -68,10 +68,10 @@ export class CheckBox extends React.Component{ this.props.parent.resetCounter = 0; this.props.parent.resetCounter = false; } - }) + }); } }, - ) + ); } @action.bound @@ -113,7 +113,7 @@ export class CheckBox extends React.Component{
{this.props.title}
- ) + ); } } \ No newline at end of file diff --git a/src/client/views/search/FieldFilters.tsx b/src/client/views/search/FieldFilters.tsx index 81391e73b..a7b142617 100644 --- a/src/client/views/search/FieldFilters.tsx +++ b/src/client/views/search/FieldFilters.tsx @@ -41,6 +41,6 @@ resetFieldFilters() {
- ) + ); } } \ No newline at end of file diff --git a/src/client/views/search/IconBar.tsx b/src/client/views/search/IconBar.tsx index 4741359d0..2ae4af642 100644 --- a/src/client/views/search/IconBar.tsx +++ b/src/client/views/search/IconBar.tsx @@ -50,7 +50,7 @@ export class IconBar extends React.Component { @action.bound updateList(newList: string[]) { - SearchBox.Instance.updateIcon(newList) + SearchBox.Instance.updateIcon(newList); } @action.bound diff --git a/src/client/views/search/IconButton.tsx b/src/client/views/search/IconButton.tsx index 1894332a1..9df285b70 100644 --- a/src/client/views/search/IconButton.tsx +++ b/src/client/views/search/IconButton.tsx @@ -57,10 +57,10 @@ export class IconButton extends React.Component{ IconBar.Instance.Reset = 0; IconBar.Instance.ResetClicked = false; } - }) + }); } }, - ) + ); this._selectAllReaction = reaction( () => IconBar.Instance.SelectAllClicked, () => { @@ -72,10 +72,10 @@ export class IconButton extends React.Component{ IconBar.Instance.Select = 0; IconBar.Instance.SelectAllClicked = false; } - }) + }); } }, - ) + ); } @action.bound @@ -112,11 +112,11 @@ export class IconButton extends React.Component{ if (!this.isSelected) { this.isSelected = true; - newList.push(this.props.type) + newList.push(this.props.type); } else { this.isSelected = false; - _.pull(newList, this.props.type) + _.pull(newList, this.props.type); } SearchBox.Instance.updateIcon(newList); @@ -125,16 +125,16 @@ export class IconButton extends React.Component{ selected = { opacity: 1, backgroundColor: "#c2c2c5" //$alt-accent - } + }; notSelected = { opacity: 0.6, - } + }; hoverStyle = { opacity: 1, backgroundColor: "rgb(178, 206, 248)" //$darker-alt-accent - } + }; @action.bound public reset() { @@ -161,25 +161,25 @@ export class IconButton extends React.Component{ case (DocTypes.NONE): return (); case (DocTypes.AUDIO): - return () + return (); case (DocTypes.COL): - return () + return (); case (DocTypes.HIST): - return () + return (); case (DocTypes.IMG): - return () + return (); case (DocTypes.LINK): - return () + return (); case (DocTypes.PDF): - return () + return (); case (DocTypes.TEXT): - return () + return (); case (DocTypes.VID): - return () + return (); case (DocTypes.WEB): - return () + return (); default: - return () + return (); } } diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index 4a0fe452a..86c239f30 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -159,7 +159,7 @@ export class SearchBox extends React.Component { query = this.basicRequireWords(query); } - query = query.replace(/\s+/g, ' ').trim() + query = query.replace(/\s+/g, ' ').trim(); //if there is no query there should be no result if (query === "") { diff --git a/src/client/views/search/ToggleBar.tsx b/src/client/views/search/ToggleBar.tsx index 0fee81e20..6f141d42a 100644 --- a/src/client/views/search/ToggleBar.tsx +++ b/src/client/views/search/ToggleBar.tsx @@ -78,7 +78,7 @@ export class ToggleBar extends React.Component{ @action.bound public resetToggle = () => { if (!SearchBox.Instance.getBasicWordStatus()) { - this.forwardTimeline.play() + this.forwardTimeline.play(); this.forwardTimeline.reverse(); SearchBox.Instance.handleWordQueryChange(); } -- cgit v1.2.3-70-g09d2 From 82e7b6008b4cbab1890235b4b959634ec916d1a1 Mon Sep 17 00:00:00 2001 From: Monika Date: Thu, 20 Jun 2019 18:31:58 -0400 Subject: checkboxes working --- src/client/views/search/CheckBox.scss | 10 +++-- src/client/views/search/CheckBox.tsx | 15 ++++++- src/client/views/search/CollectionFilters.scss | 19 +++++++++ src/client/views/search/CollectionFilters.tsx | 52 +++++++++++++++++++++++ src/client/views/search/FieldFilters.tsx | 19 ++++----- src/client/views/search/SearchBox.scss | 1 + src/client/views/search/SearchBox.tsx | 59 ++++++++++++++++++++++---- 7 files changed, 150 insertions(+), 25 deletions(-) create mode 100644 src/client/views/search/CollectionFilters.scss create mode 100644 src/client/views/search/CollectionFilters.tsx (limited to 'src/client/views/search/CheckBox.tsx') diff --git a/src/client/views/search/CheckBox.scss b/src/client/views/search/CheckBox.scss index 582d24e72..9b0af68d5 100644 --- a/src/client/views/search/CheckBox.scss +++ b/src/client/views/search/CheckBox.scss @@ -1,13 +1,16 @@ @import "../globalCssVariables"; -.checkbox { +.checkboxfilter { display: flex; + margin-top: 0px; + padding: 3px; .outer { display: flex; position: relative; justify-content: center; - align-items: center; + align-items: center; + margin-top: 0px; } .check-box { @@ -28,7 +31,6 @@ .check-container:hover ~ .check-box { background-color: $intermediate-color; - } .check-container { @@ -49,6 +51,8 @@ } .checkbox-title { + display: flex; + align-items: center; text-transform: capitalize; margin-left: 15px; } \ No newline at end of file diff --git a/src/client/views/search/CheckBox.tsx b/src/client/views/search/CheckBox.tsx index 26ad9d8ce..24c404892 100644 --- a/src/client/views/search/CheckBox.tsx +++ b/src/client/views/search/CheckBox.tsx @@ -10,6 +10,7 @@ interface CheckBoxProps { title: string; parent: any; numCount: number; + default: boolean; } @observer @@ -36,6 +37,9 @@ export class CheckBox extends React.Component{ autoplay: false, direction: "normal", }); + + // console.log(this.props.getStatus()) + // console.log(this.props.getStatus) } componentDidMount = () => { @@ -55,6 +59,7 @@ export class CheckBox extends React.Component{ if (this.props.originalStatus) { this.checkTimeline.play(); + this.checkTimeline.restart(); } this._resetReaction = reaction( @@ -76,12 +81,18 @@ export class CheckBox extends React.Component{ @action.bound reset() { - if (!this._status) { + if(this.props.default){ this._status = true; this.checkTimeline.play(); this.checkTimeline.restart(); } + else{ + this._status = false; + this.uncheckTimeline.play(); + this.uncheckTimeline.restart(); + } + this.props.updateStatus(this.props.default); } @action.bound @@ -102,7 +113,7 @@ export class CheckBox extends React.Component{ render() { return ( -
+
diff --git a/src/client/views/search/CollectionFilters.scss b/src/client/views/search/CollectionFilters.scss new file mode 100644 index 000000000..5e1f4effc --- /dev/null +++ b/src/client/views/search/CollectionFilters.scss @@ -0,0 +1,19 @@ +@import "../globalCssVariables"; + +.collection-filters{ + display: flex; + flex-direction: row; + width: 100%; +} + +.collection-filters.main{ + width: 47%; + float: left; +} + +.collection-filters.optional{ + width: 60%; + display: grid; + grid-template-columns: 50% 50%; + float: right; +} \ No newline at end of file diff --git a/src/client/views/search/CollectionFilters.tsx b/src/client/views/search/CollectionFilters.tsx new file mode 100644 index 000000000..8d1aa1294 --- /dev/null +++ b/src/client/views/search/CollectionFilters.tsx @@ -0,0 +1,52 @@ +import * as React from 'react'; +import { observer } from 'mobx-react'; +import { observable, action, runInAction } from 'mobx'; +import "./SearchBox.scss"; +import { CheckBox } from './CheckBox'; +import { Keys } from './SearchBox'; +import "./SearchBox.scss"; +import "./CollectionFilters.scss"; +import { FieldFilters } from './FieldFilters'; + +interface CollectionFilterProps { + collectionStatus: boolean; + updateCollectionStatus(val: boolean): void; + collectionSelfStatus: boolean; + updateSelfCollectionStatus(val: boolean): void; + collectionParentStatus: boolean; + updateParentCollectionStatus(val: boolean): void; +} + +export class CollectionFilters extends React.Component { + + static Instance: CollectionFilters; + + @observable public resetBoolean = false; + @observable public resetCounter: number = 0; + + constructor(props:CollectionFilterProps){ + super(props); + CollectionFilters.Instance = this; + } + + resetCollectionFilters() { + this.resetBoolean = true; + } + + render() { + return ( +
+
Search in current collections
+
+
+ +
+
+ + +
+
+
+ ); + } +} \ No newline at end of file diff --git a/src/client/views/search/FieldFilters.tsx b/src/client/views/search/FieldFilters.tsx index a7b142617..c7928dcd6 100644 --- a/src/client/views/search/FieldFilters.tsx +++ b/src/client/views/search/FieldFilters.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { observer } from 'mobx-react'; -import { observable, action, runInAction } from 'mobx'; +import { observable, action, runInAction, } from 'mobx'; import "./SearchBox.scss"; import { CheckBox } from './CheckBox'; import { Keys } from './SearchBox'; @@ -21,25 +21,22 @@ export class FieldFilters extends React.Component { @observable public resetBoolean = false; @observable public resetCounter: number = 0; - constructor(props: FieldFilterProps){ + constructor(props: FieldFilterProps) { super(props); FieldFilters.Instance = this; } -resetFieldFilters() { - this.props.updateAuthorStatus(true); - this.props.updateDataStatus(true); - this.props.updateTitleStatus(true); - this.resetBoolean = true; -} + resetFieldFilters() { + this.resetBoolean = true; + } render() { return (
Filter by Basic Keys
- - - + + +
); } diff --git a/src/client/views/search/SearchBox.scss b/src/client/views/search/SearchBox.scss index 26a23c218..486ec9a93 100644 --- a/src/client/views/search/SearchBox.scss +++ b/src/client/views/search/SearchBox.scss @@ -69,6 +69,7 @@ .filter-collection{ display: inline-block; + width: 100%; } .field-title { diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index 4ebd9c5e4..2ff960aeb 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -29,6 +29,7 @@ import { DocumentView } from '../nodes/DocumentView'; import { CollectionView } from '../collections/CollectionView'; import { CollectionPDFView } from '../collections/CollectionPDFView'; import { CollectionVideoView } from '../collections/CollectionVideoView'; +import { CollectionFilters } from './CollectionFilters'; export enum Keys { TITLE = "title", @@ -55,6 +56,8 @@ export class SearchBox extends React.Component { @observable authorFieldStatus: boolean = true; @observable dataFieldStatus: boolean = true; @observable collectionStatus = false; + @observable collectionSelfStatus = true; + @observable collectionParentStatus = true; constructor(props: Readonly<{}>) { super(props); @@ -79,6 +82,14 @@ export class SearchBox extends React.Component { ToggleBar.Instance.resetToggle(); IconBar.Instance.selectAll(); FieldFilters.Instance.resetFieldFilters(); + // console.log("field filters at end") + // console.log("title", this.titleFieldStatus, "author:", this.authorFieldStatus, "data:", this.dataFieldStatus) + // console.log("should be true, true, true\n") + + CollectionFilters.Instance.resetCollectionFilters(); + // console.log("collection filters at end") + // console.log("normal;", this.collectionStatus, "self:", this.collectionSelfStatus, "parent:", this.collectionParentStatus) + // console.log("should be fase, true, true") } @action.bound @@ -207,10 +218,6 @@ export class SearchBox extends React.Component { query = this.addCollectionFilter(query); query = query.replace(/\s+/g, ' ').trim(); } - - //gets rid of any extra spaces that may have been added - // query = query.replace(/\s+/g, ' ').trim(); - return query; } @@ -238,8 +245,6 @@ export class SearchBox extends React.Component { query = this.getFinalQuery(query); - console.log(query); - //if there is no query there should be no result if (query === "") { results = []; @@ -429,6 +434,40 @@ export class SearchBox extends React.Component { 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; + } + + getTitleStatus() { + return this.titleFieldStatus; + } + + getAuthorStatus() { + return this.authorFieldStatus; + } + + getDataStatus() { + return this.dataFieldStatus; + } + // Useful queries: // Delegates of a document: {!join from=id to=proto_i}id:{protoId} // Documents in a collection: {!join from=data_l to=id}id:{collectionProtoId} //id of collections prototype @@ -466,11 +505,13 @@ export class SearchBox extends React.Component {
-
Search in current collections
- +
-
-- cgit v1.2.3-70-g09d2 From 9f8b48837a202af92600fc2fe2d0de06baf0032b Mon Sep 17 00:00:00 2001 From: Monika Date: Thu, 20 Jun 2019 19:24:17 -0400 Subject: end of day 6/20, filter form not reopening correctly --- src/client/views/search/CheckBox.tsx | 5 +-- src/client/views/search/CollectionFilters.scss | 1 + src/client/views/search/CollectionFilters.tsx | 43 +++++++++++++++++++++++--- src/client/views/search/SearchBox.scss | 3 +- src/client/views/search/ToggleBar.scss | 2 +- 5 files changed, 43 insertions(+), 11 deletions(-) (limited to 'src/client/views/search/CheckBox.tsx') diff --git a/src/client/views/search/CheckBox.tsx b/src/client/views/search/CheckBox.tsx index 24c404892..9f0b75887 100644 --- a/src/client/views/search/CheckBox.tsx +++ b/src/client/views/search/CheckBox.tsx @@ -37,9 +37,6 @@ export class CheckBox extends React.Component{ autoplay: false, direction: "normal", }); - - // console.log(this.props.getStatus()) - // console.log(this.props.getStatus) } componentDidMount = () => { @@ -71,7 +68,7 @@ export class CheckBox extends React.Component{ this.props.parent.resetCounter++; if (this.props.parent.resetCounter === this.props.numCount) { this.props.parent.resetCounter = 0; - this.props.parent.resetCounter = false; + this.props.parent.resetBoolean = false; } }); } diff --git a/src/client/views/search/CollectionFilters.scss b/src/client/views/search/CollectionFilters.scss index 5e1f4effc..8d5ab96e7 100644 --- a/src/client/views/search/CollectionFilters.scss +++ b/src/client/views/search/CollectionFilters.scss @@ -16,4 +16,5 @@ display: grid; grid-template-columns: 50% 50%; float: right; + opacity: 0; } \ No newline at end of file diff --git a/src/client/views/search/CollectionFilters.tsx b/src/client/views/search/CollectionFilters.tsx index 8d1aa1294..a5e479567 100644 --- a/src/client/views/search/CollectionFilters.tsx +++ b/src/client/views/search/CollectionFilters.tsx @@ -7,6 +7,7 @@ import { Keys } from './SearchBox'; import "./SearchBox.scss"; import "./CollectionFilters.scss"; import { FieldFilters } from './FieldFilters'; +import * as anime from 'animejs'; interface CollectionFilterProps { collectionStatus: boolean; @@ -23,27 +24,59 @@ export class CollectionFilters extends React.Component { @observable public resetBoolean = false; @observable public resetCounter: number = 0; + @observable collectionsSelected = this.props.collectionStatus; + @observable timeline: anime.AnimeTimelineInstance; + @observable ref: any; - constructor(props:CollectionFilterProps){ + constructor(props: CollectionFilterProps) { super(props); CollectionFilters.Instance = this; + this.ref = React.createRef(); + + this.timeline = anime.timeline({ + loop: false, + autoplay: false, + direction: "reverse", + }); + } + + componentDidMount = () => { + this.timeline.add({ + targets: this.ref.current, + easing: "easeInOutQuad", + duration: 500, + opacity: 1, + }); } + @action.bound resetCollectionFilters() { this.resetBoolean = true; } + @action.bound + updateColStat(val: boolean) { + this.props.updateCollectionStatus(val); + + if (this.collectionsSelected !== val) { + this.timeline.play(); + this.timeline.reverse(); + } + + this.collectionsSelected = val; + } + render() { return (
Search in current collections
- +
-
- - +
+ +
diff --git a/src/client/views/search/SearchBox.scss b/src/client/views/search/SearchBox.scss index 486ec9a93..3b96e3922 100644 --- a/src/client/views/search/SearchBox.scss +++ b/src/client/views/search/SearchBox.scss @@ -84,7 +84,8 @@ } .required-words{ - height: 110px; + display: inline-block; + width: 100%; } .filter-div{ diff --git a/src/client/views/search/ToggleBar.scss b/src/client/views/search/ToggleBar.scss index 3a262709d..633a194fe 100644 --- a/src/client/views/search/ToggleBar.scss +++ b/src/client/views/search/ToggleBar.scss @@ -10,7 +10,7 @@ padding: 5px; .toggle-option { - width: 100px; + width: 50%; text-align: center; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -- cgit v1.2.3-70-g09d2 From 4b8a6b7a76ccadfd39ec037e282018c7d588dea8 Mon Sep 17 00:00:00 2001 From: Monika Date: Fri, 21 Jun 2019 11:31:34 -0400 Subject: about to make some big changes - things are working nicely --- src/client/views/search/CheckBox.tsx | 20 +++--- src/client/views/search/CollectionFilters.tsx | 5 ++ src/client/views/search/NaviconButton.scss | 95 +++++++++++++++++++++++++++ src/client/views/search/NaviconButton.tsx | 28 ++++++++ src/client/views/search/SearchBox.tsx | 10 +-- 5 files changed, 142 insertions(+), 16 deletions(-) create mode 100644 src/client/views/search/NaviconButton.scss create mode 100644 src/client/views/search/NaviconButton.tsx (limited to 'src/client/views/search/CheckBox.tsx') diff --git a/src/client/views/search/CheckBox.tsx b/src/client/views/search/CheckBox.tsx index 9f0b75887..c75980e7c 100644 --- a/src/client/views/search/CheckBox.tsx +++ b/src/client/views/search/CheckBox.tsx @@ -78,15 +78,19 @@ export class CheckBox extends React.Component{ @action.bound reset() { - if(this.props.default){ - this._status = true; - this.checkTimeline.play(); - this.checkTimeline.restart(); + if (this.props.default) { + if (!this._status) { + this._status = true; + this.checkTimeline.play(); + this.checkTimeline.restart(); + } } - else{ - this._status = false; - this.uncheckTimeline.play(); - this.uncheckTimeline.restart(); + else { + if (this._status) { + this._status = false; + this.uncheckTimeline.play(); + this.uncheckTimeline.restart(); + } } this.props.updateStatus(this.props.default); diff --git a/src/client/views/search/CollectionFilters.tsx b/src/client/views/search/CollectionFilters.tsx index a5e479567..5bfe37efb 100644 --- a/src/client/views/search/CollectionFilters.tsx +++ b/src/client/views/search/CollectionFilters.tsx @@ -47,6 +47,11 @@ export class CollectionFilters extends React.Component { duration: 500, opacity: 1, }); + + if(this.collectionsSelected){ + this.timeline.play(); + this.timeline.reverse(); + } } @action.bound diff --git a/src/client/views/search/NaviconButton.scss b/src/client/views/search/NaviconButton.scss new file mode 100644 index 000000000..529f11a57 --- /dev/null +++ b/src/client/views/search/NaviconButton.scss @@ -0,0 +1,95 @@ +@import "../globalCssVariables"; + + +@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700); + +// $background: #3d566e; +$color: #ecf0f1; + +$height-icon: 20px; +$width-line: 30px; +$height-line: 4px; + +$transition-time: 0.4s; +$rotation: 45deg; +$translateY: ($height-icon / 2); +$translateX: 0; + +// body { +// background: $background; +// color: $color; +// font-family: 'Montserrat', sans-serif; +// -webkit-font-smoothing: antialiased; +// text-align:center; +// } + +#hamburger-icon { + width:$width-line; + height:$height-icon; + position:relative; + display:block; +// margin: ($height-icon * 2) auto $height-icon auto; + + .line { + display:block; + background:$color; + width:$width-line; + height:$height-line; + position:absolute; + left:0; + border-radius:($height-line / 2); + transition: all $transition-time; + -webkit-transition: all $transition-time; + -moz-transition: all $transition-time; + + &.line-1 { + top:0; + } + &.line-2 { + top:50%; + } + &.line-3 { + top:100%; + } + } + &:hover, &:focus { + .line-1 { + transform: translateY($height-line / 2 * -1); + -webkit-transform: translateY($height-line / 2 * -1); + -moz-transform: translateY($height-line / 2 * -1); + } + .line-3 { + transform: translateY($height-line / 2); + -webkit-transform: translateY($height-line / 2); + -moz-transform: translateY($height-line / 2); + } + } + &.active { + .line-1 { + transform: translateY($translateY) translateX($translateX) rotate($rotation); + -webkit-transform: translateY($translateY) translateX($translateX) rotate($rotation); + -moz-transform: translateY($translateY) translateX($translateX) rotate($rotation); + } + .line-2 { + opacity:0; + } + .line-3 { + transform: translateY($translateY * -1) translateX($translateX) rotate($rotation * -1); + -webkit-transform: translateY($translateY * -1) translateX($translateX) rotate($rotation * -1); + -moz-transform: translateY($translateY * -1) translateX($translateX) rotate($rotation * -1); + } + } +} + +// h1 { +// text-transform:uppercase; +// } +// a { +// text-decoration:none; +// color:#95a5a6; +// margin: 0.5em 1.5em; +// display:inline-block; +// &:hover, &:focus { +// color:$color; +// } +// } \ No newline at end of file diff --git a/src/client/views/search/NaviconButton.tsx b/src/client/views/search/NaviconButton.tsx new file mode 100644 index 000000000..aa9e627c0 --- /dev/null +++ b/src/client/views/search/NaviconButton.tsx @@ -0,0 +1,28 @@ +import * as React from 'react'; +import { observer } from 'mobx-react'; +import "./NaviconButton.scss"; +import * as $ from 'jquery'; + + +export class NaviconButton extends React.Component { + + componentDidMount = () => { + $(document).ready(function () { + var hamburger = $('#hamburger-icon'); + hamburger.click(function () { + hamburger.toggleClass('active'); + return false; + }); + }); + } + + render() { + return ( + + + + + + ); + } +} \ No newline at end of file diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index 2ff960aeb..71472886f 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -30,6 +30,7 @@ import { CollectionView } from '../collections/CollectionView'; import { CollectionPDFView } from '../collections/CollectionPDFView'; import { CollectionVideoView } from '../collections/CollectionVideoView'; import { CollectionFilters } from './CollectionFilters'; +import { NaviconButton } from './NaviconButton'; export enum Keys { TITLE = "title", @@ -82,14 +83,7 @@ export class SearchBox extends React.Component { ToggleBar.Instance.resetToggle(); IconBar.Instance.selectAll(); FieldFilters.Instance.resetFieldFilters(); - // console.log("field filters at end") - // console.log("title", this.titleFieldStatus, "author:", this.authorFieldStatus, "data:", this.dataFieldStatus) - // console.log("should be true, true, true\n") - CollectionFilters.Instance.resetCollectionFilters(); - // console.log("collection filters at end") - // console.log("normal;", this.collectionStatus, "self:", this.collectionSelfStatus, "parent:", this.collectionParentStatus) - // console.log("should be fase, true, true") } @action.bound @@ -324,7 +318,7 @@ export class SearchBox extends React.Component { @action openFilter = () => { - this._filterOpen = true; + this._filterOpen = !this._filterOpen; this._resultsOpen = false; this._results = []; } -- cgit v1.2.3-70-g09d2 From b954eeb57c1ba7a459d85ca7f98855e1b4134267 Mon Sep 17 00:00:00 2001 From: Monika Date: Tue, 25 Jun 2019 12:38:51 -0400 Subject: lots of clean up (css & variables) --- src/client/views/search/CheckBox.tsx | 22 +- src/client/views/search/CollectionFilters.tsx | 41 ++-- src/client/views/search/FieldFilters.tsx | 15 +- src/client/views/search/FilterBox.scss | 108 +++++++++ src/client/views/search/IconBar.scss | 60 +---- src/client/views/search/IconBar.tsx | 50 ++-- src/client/views/search/IconButton.scss | 52 +++++ src/client/views/search/IconButton.tsx | 47 ++-- src/client/views/search/NaviconButton.scss | 60 ++--- src/client/views/search/NaviconButton.tsx | 10 +- src/client/views/search/SearchBox.scss | 184 +++------------ src/client/views/search/SearchBox.tsx | 70 +++--- src/client/views/search/SearchItem.scss | 276 ++++++++++++----------- src/client/views/search/SearchItem.tsx | 2 +- src/client/views/search/SelectorContextMenu.scss | 15 ++ src/client/views/search/ToggleBar.tsx | 20 +- 16 files changed, 520 insertions(+), 512 deletions(-) create mode 100644 src/client/views/search/FilterBox.scss create mode 100644 src/client/views/search/IconButton.scss create mode 100644 src/client/views/search/SelectorContextMenu.scss (limited to 'src/client/views/search/CheckBox.tsx') diff --git a/src/client/views/search/CheckBox.tsx b/src/client/views/search/CheckBox.tsx index c75980e7c..a9d48219a 100644 --- a/src/client/views/search/CheckBox.tsx +++ b/src/client/views/search/CheckBox.tsx @@ -16,11 +16,11 @@ interface CheckBoxProps { @observer export class CheckBox extends React.Component{ // true = checked, false = unchecked - @observable _status: boolean; - @observable uncheckTimeline: anime.AnimeTimelineInstance; - @observable checkTimeline: anime.AnimeTimelineInstance; - @observable checkRef: any; - @observable _resetReaction?: IReactionDisposer; + @observable private _status: boolean; + @observable private uncheckTimeline: anime.AnimeTimelineInstance; + @observable private checkTimeline: anime.AnimeTimelineInstance; + @observable private checkRef: any; + @observable private _resetReaction?: IReactionDisposer; constructor(props: CheckBoxProps) { @@ -60,15 +60,15 @@ export class CheckBox extends React.Component{ } this._resetReaction = reaction( - () => this.props.parent.resetBoolean, + () => this.props.parent._resetBoolean, () => { - if (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.props.parent._resetCounter++; + if (this.props.parent._resetCounter === this.props.numCount) { + this.props.parent._resetCounter = 0; + this.props.parent._resetBoolean = false; } }); } diff --git a/src/client/views/search/CollectionFilters.tsx b/src/client/views/search/CollectionFilters.tsx index 3dd87157d..48d0b2ddb 100644 --- a/src/client/views/search/CollectionFilters.tsx +++ b/src/client/views/search/CollectionFilters.tsx @@ -17,18 +17,19 @@ export class CollectionFilters extends React.Component { static Instance: CollectionFilters; - @observable public resetBoolean = false; - @observable public resetCounter: number = 0; - @observable collectionsSelected = this.props.collectionStatus; - @observable timeline: anime.AnimeTimelineInstance; - @observable ref: any; + @observable public _resetBoolean = false; + @observable public _resetCounter: number = 0; + + @observable private _collectionsSelected = this.props.collectionStatus; + @observable private _timeline: anime.AnimeTimelineInstance; + @observable private _ref: any; constructor(props: CollectionFilterProps) { super(props); CollectionFilters.Instance = this; - this.ref = React.createRef(); + this._ref = React.createRef(); - this.timeline = anime.timeline({ + this._timeline = anime.timeline({ loop: false, autoplay: false, direction: "reverse", @@ -36,32 +37,32 @@ export class CollectionFilters extends React.Component { } componentDidMount = () => { - this.timeline.add({ - targets: this.ref.current, + this._timeline.add({ + targets: this._ref.current, easing: "easeInOutQuad", duration: 500, opacity: 1, }); - if (this.collectionsSelected) { - this.timeline.play(); - this.timeline.reverse(); + if (this._collectionsSelected) { + this._timeline.play(); + this._timeline.reverse(); } } @action.bound - resetCollectionFilters() { this.resetBoolean = true; } + resetCollectionFilters() { this._resetBoolean = true; } @action.bound updateColStat(val: boolean) { this.props.updateCollectionStatus(val); - if (this.collectionsSelected !== val) { - this.timeline.play(); - this.timeline.reverse(); - } + if (this._collectionsSelected !== val) { + this._timeline.play(); + this._timeline.reverse(); + } - this.collectionsSelected = val; + this._collectionsSelected = val; } render() { @@ -70,8 +71,8 @@ export class CollectionFilters extends React.Component {
-
-
+
+
diff --git a/src/client/views/search/FieldFilters.tsx b/src/client/views/search/FieldFilters.tsx index eb12e654f..befe5d54d 100644 --- a/src/client/views/search/FieldFilters.tsx +++ b/src/client/views/search/FieldFilters.tsx @@ -16,8 +16,9 @@ export interface FieldFilterProps { export class FieldFilters extends React.Component { static Instance: FieldFilters; - @observable public resetBoolean = false; - @observable public resetCounter: number = 0; + + @observable public _resetBoolean = false; + @observable public _resetCounter: number = 0; constructor(props: FieldFilterProps) { super(props); @@ -25,15 +26,15 @@ export class FieldFilters extends React.Component { } resetFieldFilters() { - this.resetBoolean = true; + this._resetBoolean = true; } render() { return ( -
- - - +
+ + +
); } diff --git a/src/client/views/search/FilterBox.scss b/src/client/views/search/FilterBox.scss new file mode 100644 index 000000000..1eb8963d7 --- /dev/null +++ b/src/client/views/search/FilterBox.scss @@ -0,0 +1,108 @@ +@import "../globalCssVariables"; +@import "./NaviconButton.scss"; + +.filter-form { + padding: 25px; + width: 600px; + background: $dark-color; + position: relative; + right: 1px; + color: $light-color; + flex-direction: column; + display: inline-block; + transform-origin: top; + overflow: auto; + + .top-filter-header { + + #header { + text-transform: uppercase; + letter-spacing: 2px; + font-size: 25; + width: 80%; + } + + .close-icon { + width: 20%; + opacity: .6; + position: relative; + display: inline-block; + + .line { + display: block; + background: $alt-accent; + width: $width-line; + height: $height-line; + position: absolute; + right: 0; + border-radius: ($height-line / 2); + + &.line-1 { + transform: rotate(45deg); + top: 45%; + } + + &.line-2 { + transform: rotate(-45deg); + top: 45%; + } + } + } + + .close-icon:hover { + opacity: 1; + } + + } + + .filter-options { + + .filter-div { + margin-top: 10px; + margin-bottom: 10px; + display: inline-block; + width: 100%; + border-color: rgba(178, 206, 248, .2); // $darker-alt-accent + border-top-style: solid; + + .filter-header { + display: flex; + align-items: center; + margin-bottom: 10px; + + .filter-title { + font-size: 18; + text-transform: uppercase; + margin-top: 10px; + margin-bottom: 10px; + -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; + } + } + + .filter-header:hover .filter-title { + transform: scale(1.05); + } + + .filter-panel { + max-height: 0px; + width: 100%; + overflow: hidden; + opacity: 0; + transform-origin: top; + -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; + } + } + } + + .filter-buttons { + border-color: rgba(178, 206, 248, .2); // $darker-alt-accent + border-top-style: solid; + padding-top: 10px; + } +} \ No newline at end of file diff --git a/src/client/views/search/IconBar.scss b/src/client/views/search/IconBar.scss index cb7de15a0..e384722ce 100644 --- a/src/client/views/search/IconBar.scss +++ b/src/client/views/search/IconBar.scss @@ -7,64 +7,6 @@ height: 40px; width: 100%; flex-wrap: wrap; + margin-bottom: 10px; } -.icon-title { - color: $light-color; - text-transform: uppercase; - padding: 5px; -} - -.type-icon { - height: 45px; - width: 45px; - color: $light-color; - border-radius: 50%; - display: flex; - justify-content: center; - align-items: center; - -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; -} - -.fontawesome-icon { - height: 24px; - width: 24px; -} - -.filter-description{ - text-transform: capitalize; -} - -.type-icon:hover { - transform: scale(1.1); - background-color: $darker-alt-accent; - opacity: 1; - - +.filter-description { - opacity: 1; - } -} - -.type-outer { - display: flex; - flex-direction: column; - align-items: center; - width: 45px; - height: 60px; -} - -.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 a446159fe..c5b4d33cf 100644 --- a/src/client/views/search/IconBar.tsx +++ b/src/client/views/search/IconBar.tsx @@ -1,8 +1,9 @@ import * as React from 'react'; import { observer } from 'mobx-react'; import { observable, action } from 'mobx'; -import "./SearchBox.scss"; +// import "./SearchBox.scss"; import "./IconBar.scss"; +import "./IconButton.scss"; import { DocTypes } from '../../documents/Documents'; import { faSearch, faFilePdf, faFilm, faImage, faObjectGroup, faStickyNote, faMusic, faLink, faChartBar, faGlobeAsia, faBan, faTimesCircle, faCheckCircle } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; @@ -28,11 +29,10 @@ export class IconBar extends React.Component { static Instance: IconBar; - allIcons: string[] = [DocTypes.AUDIO, DocTypes.COL, DocTypes.HIST, DocTypes.IMG, DocTypes.LINK, DocTypes.PDF, DocTypes.TEXT, DocTypes.VID, DocTypes.WEB]; - @observable public ResetClicked: boolean = false; - @observable public SelectAllClicked: boolean = false; - public Reset: number = 0; - public Select: number = 0; + @observable public _resetClicked: boolean = false; + @observable public _selectAllClicked: boolean = false; + @observable public _reset: number = 0; + @observable public _select: number = 0; constructor(props: any) { super(props); @@ -47,37 +47,37 @@ export class IconBar extends React.Component { @action.bound resetSelf = () => { - this.ResetClicked = true; + this._resetClicked = true; this.updateList([]); } @action.bound selectAll = () => { - this.SelectAllClicked = true; - this.updateList(this.allIcons); + this._selectAllClicked = true; + this.updateList(SearchBox.Instance._allIcons); } render() { return ( -
-
-
- +
+
+
+ +
+
Select All
-
Select All
-
- {this.allIcons.map((type: string) => - - )} -
-
- + {SearchBox.Instance._allIcons.map((type: string) => + + )} +
+
+ +
+
Clear
-
Clear
-
); } } diff --git a/src/client/views/search/IconButton.scss b/src/client/views/search/IconButton.scss new file mode 100644 index 000000000..94b294ba5 --- /dev/null +++ b/src/client/views/search/IconButton.scss @@ -0,0 +1,52 @@ +@import "../globalCssVariables"; + +.type-outer { + display: flex; + flex-direction: column; + align-items: center; + width: 45px; + height: 60px; + + .type-icon { + height: 45px; + width: 45px; + color: $light-color; + border-radius: 50%; + display: flex; + justify-content: center; + align-items: center; + -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; + + .fontawesome-icon { + height: 24px; + width: 24px; + } + } + + .filter-description { + text-transform: capitalize; + 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; + } + + .type-icon:hover { + transform: scale(1.1); + background-color: $darker-alt-accent; + opacity: 1; + + +.filter-description { + opacity: 1; + } + } +} \ No newline at end of file diff --git a/src/client/views/search/IconButton.tsx b/src/client/views/search/IconButton.tsx index 541fe5ba5..c40bb587f 100644 --- a/src/client/views/search/IconButton.tsx +++ b/src/client/views/search/IconButton.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { observer } from 'mobx-react'; import { observable, action, runInAction, IReactionDisposer, reaction } from 'mobx'; import "./SearchBox.scss"; -import "./IconBar.scss"; +import "./IconButton.scss"; import { faSearch, faFilePdf, faFilm, faImage, faObjectGroup, faStickyNote, faMusic, faLink, faChartBar, faGlobeAsia, faBan, faVideo, faCaretDown } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { library, icon } from '@fortawesome/fontawesome-svg-core'; @@ -33,9 +33,8 @@ interface IconButtonProps { @observer export class IconButton extends React.Component{ - @observable isSelected: boolean = SearchBox.Instance.getIcons().indexOf(this.props.type) !== -1; - @observable hover = false; - + @observable private _isSelected: boolean = SearchBox.Instance.getIcons().indexOf(this.props.type) !== -1; + @observable private _hover = false; private _resetReaction?: IReactionDisposer; private _selectAllReaction?: IReactionDisposer; @@ -47,30 +46,30 @@ export class IconButton extends React.Component{ componentDidMount = () => { this._resetReaction = reaction( - () => IconBar.Instance.ResetClicked, + () => IconBar.Instance._resetClicked, () => { - if (IconBar.Instance.ResetClicked) { + if (IconBar.Instance._resetClicked) { runInAction(() => { this.reset(); - IconBar.Instance.Reset++; - if (IconBar.Instance.Reset === 9) { - IconBar.Instance.Reset = 0; - IconBar.Instance.ResetClicked = false; + IconBar.Instance._reset++; + if (IconBar.Instance._reset === 9) { + IconBar.Instance._reset = 0; + IconBar.Instance._resetClicked = false; } }); } }, ); this._selectAllReaction = reaction( - () => IconBar.Instance.SelectAllClicked, + () => IconBar.Instance._selectAllClicked, () => { - if (IconBar.Instance.SelectAllClicked) { + if (IconBar.Instance._selectAllClicked) { runInAction(() => { this.select(); - IconBar.Instance.Select++; - if (IconBar.Instance.Select === 9) { - IconBar.Instance.Select = 0; - IconBar.Instance.SelectAllClicked = false; + IconBar.Instance._select++; + if (IconBar.Instance._select === 9) { + IconBar.Instance._select = 0; + IconBar.Instance._selectAllClicked = false; } }); } @@ -110,12 +109,12 @@ export class IconButton extends React.Component{ onClick = () => { let newList: string[] = SearchBox.Instance.getIcons(); - if (!this.isSelected) { - this.isSelected = true; + if (!this._isSelected) { + this._isSelected = true; newList.push(this.props.type); } else { - this.isSelected = false; + this._isSelected = false; _.pull(newList, this.props.type); } @@ -137,16 +136,16 @@ export class IconButton extends React.Component{ }; @action.bound - public reset() { this.isSelected = false; } + public reset() { this._isSelected = false; } @action.bound - public select() { this.isSelected = true; } + public select() { this._isSelected = true; } @action - onMouseLeave = () => { this.hover = false; } + onMouseLeave = () => { this._hover = false; } @action - onMouseEnter = () => { this.hover = true; } + onMouseEnter = () => { this._hover = true; } getFA = () => { switch (this.props.type) { @@ -182,7 +181,7 @@ export class IconButton extends React.Component{ onMouseLeave={this.onMouseLeave} onClick={this.onClick}>
{this.getFA()}
diff --git a/src/client/views/search/NaviconButton.scss b/src/client/views/search/NaviconButton.scss index 634b4aeb5..c23bab461 100644 --- a/src/client/views/search/NaviconButton.scss +++ b/src/client/views/search/NaviconButton.scss @@ -10,36 +10,38 @@ $translateY: ($height-icon / 2); $translateX: 0; #hamburger-icon { - width:$width-line; - height:$height-icon; - position:relative; - display:block; - transition: all $transition-time; - -webkit-transition: all $transition-time; - -moz-transition: all $transition-time; - - .line { - display:block; - background:$alt-accent; - width:$width-line; - height:$height-line; - position:absolute; - left:0; - border-radius:($height-line / 2); + width: $width-line; + height: $height-icon; + position: relative; + display: block; transition: all $transition-time; -webkit-transition: all $transition-time; -moz-transition: all $transition-time; - - &.line-1 { - top:0; - } - &.line-2 { - top:50%; - } - &.line-3 { - top:100%; + + .line { + display: block; + background: $alt-accent; + width: $width-line; + height: $height-line; + position: absolute; + left: 0; + border-radius: ($height-line / 2); + transition: all $transition-time; + -webkit-transition: all $transition-time; + -moz-transition: all $transition-time; + + &.line-1 { + top: 0; + } + + &.line-2 { + top: 50%; + } + + &.line-3 { + top: 100%; + } } - } } .filter-header.active { @@ -48,9 +50,11 @@ $translateX: 0; -webkit-transform: translateY($translateY) translateX($translateX) rotate($rotation); -moz-transform: translateY($translateY) translateX($translateX) rotate($rotation); } + .line-2 { - opacity:0; + opacity: 0; } + .line-3 { transform: translateY($translateY * -1) translateX($translateX) rotate($rotation * -1); -webkit-transform: translateY($translateY * -1) translateX($translateX) rotate($rotation * -1); @@ -61,5 +65,5 @@ $translateX: 0; .filter-header:hover #hamburger-icon { transform: scale(1.1); -webkit-transform: scale(1.1); - -moz-transform: scale(1.1); + -moz-transform: scale(1.1); } \ No newline at end of file diff --git a/src/client/views/search/NaviconButton.tsx b/src/client/views/search/NaviconButton.tsx index e319b945a..3fa36b163 100644 --- a/src/client/views/search/NaviconButton.tsx +++ b/src/client/views/search/NaviconButton.tsx @@ -10,14 +10,14 @@ export interface NaviconProps{ export class NaviconButton extends React.Component { - @observable ref: React.RefObject = React.createRef(); + @observable private _ref: React.RefObject = React.createRef(); componentDidMount = () => { let that = this; - if(this.ref.current){this.ref.current.addEventListener("click", function(e) { + if(this._ref.current){this._ref.current.addEventListener("click", function(e) { e.preventDefault(); - if(that.ref.current){ - that.ref.current.classList.toggle('active'); + if(that._ref.current){ + that._ref.current.classList.toggle('active'); return false; } });} @@ -25,7 +25,7 @@ export class NaviconButton extends React.Component { render() { return ( - + diff --git a/src/client/views/search/SearchBox.scss b/src/client/views/search/SearchBox.scss index d94edba79..e570484e4 100644 --- a/src/client/views/search/SearchBox.scss +++ b/src/client/views/search/SearchBox.scss @@ -8,170 +8,54 @@ align-items: center; padding-left: 2px; padding-right: 2px; - - .searchBox-input { - width: 130px; - -webkit-transition: width 0.4s; - transition: width 0.4s; - align-self: stretch; - } - - .searchBox-input:focus { - width: 500px; - outline: 3px solid lightblue; - } + // padding: 2px; .searchBox-barChild { - flex: 0 1 auto; - margin-left: 2px; - margin-right: 2px; - } - - .searchBox-filter { - align-self: stretch; - } - -} - -.filter-title { - font-size: 18; - text-transform: uppercase; - margin-top: 10px; - margin-bottom: 10px; - -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; -} - -.searchBox-results { - margin-left: 27px; //Is there a better way to do this? -} - -.filter-form { - padding: 25px; - width: 600px; - background: $dark-color; - position: relative; - right: 1px; - color: $light-color; - flex-direction: column; - display: inline-block; - transform-origin: top; - overflow: auto; - - .filter-header { - display: flex; - align-items: center; - margin-bottom: 10px; - } - - .filter-header:hover .filter-title { - transform: scale(1.05); - } - - .filter-panel { - max-height: 0px; - width: 100%; - overflow: hidden; - opacity: 0; - transform-origin: top; - -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; - } - .close-icon { - width: 20%; - opacity: .6; - position: relative; - display: inline-block; - - .line { - display: block; - background: $alt-accent; - width: $width-line; - height: $height-line; - position: absolute; - right: 0; - border-radius: ($height-line / 2); - - &.line-1 { - transform: rotate(45deg); - top: 45%; - } - - &.line-2 { - transform: rotate(-45deg); - top: 45%; - } + &.searchBox-collection { + flex: 0 1 auto; + margin-left: 2px; + margin-right: 2px } + &.searchBox-input { + width: 130px; + -webkit-transition: width 0.4s; + transition: width 0.4s; + align-self: stretch; + margin-left: 2px; + margin-right: 2px + } - } + .searchBox-input:focus { + width: 500px; + outline: 3px solid lightblue; + } - .close-icon:hover { - opacity: 1; + &.searchBox-filter { + align-self: stretch; + margin-left: 2px; + margin-right: 2px + } } } -#header { - text-transform: uppercase; - letter-spacing: 2px; - font-size: 25; - width: 80%; -} - .searchBox-results { + margin-left: 27px; top: 300px; display: flex; flex-direction: column; margin-right: 72px; -} - -.filter-collection { - display: inline-block; - width: 100%; -} - -.field-title { - color: $light-color; - text-transform: uppercase; - margin-top: 5px; - margin-bottom: 5px; -} -.filter-buttons { - border-color: rgba(178, 206, 248, .2); // $darker-alt-accent - border-top-style: solid; - padding-top: 10px; -} - -.filter-div { - margin-top: 10px; - margin-bottom: 10px; - display: block; - width: 100%; - border-color: rgba(178, 206, 248, .2); // $darker-alt-accent - border-top-style: solid; -} - -.collection-title { - color: $light-color; - text-transform: uppercase; - margin-top: 5px; - margin-bottom: 5px; -} - -.no-result { - width: 500px; - background: $light-color-secondary; - border-color: $intermediate-color; - border-bottom-style: solid; - padding: 10px; - height: 50px; - text-transform: uppercase; - text-align: left; - font-weight: bold; + .no-result { + width: 500px; + background: $light-color-secondary; + border-color: $intermediate-color; + border-bottom-style: solid; + padding: 10px; + height: 50px; + text-transform: uppercase; + text-align: left; + font-weight: bold; + } } \ No newline at end of file diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index 07e7496cf..1fc777a8c 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -25,6 +25,7 @@ import { CollectionFilters } from './CollectionFilters'; import { NaviconButton } from './NaviconButton'; import * as $ from 'jquery'; import * as anime from 'animejs'; +import "./FilterBox.scss"; library.add(faTimes); @@ -38,23 +39,22 @@ export enum Keys { export class SearchBox extends React.Component { static Instance: SearchBox; + public _allIcons: string[] = [DocTypes.AUDIO, DocTypes.COL, DocTypes.HIST, DocTypes.IMG, DocTypes.LINK, DocTypes.PDF, DocTypes.TEXT, DocTypes.VID, DocTypes.WEB]; - @observable _searchString: string = ""; + @observable private _searchString: string = ""; //if true, any keywords can be used. if false, all keywords are required. - @observable _basicWordStatus: boolean = true; + @observable private _basicWordStatus: boolean = true; @observable private _filterOpen: boolean = false; @observable private _resultsOpen: boolean = false; @observable private _results: Doc[] = []; @observable private _openNoResults: boolean = false; - allIcons: string[] = [DocTypes.AUDIO, DocTypes.COL, DocTypes.HIST, DocTypes.IMG, DocTypes.LINK, DocTypes.PDF, DocTypes.TEXT, DocTypes.VID, DocTypes.WEB]; - @observable _icons: string[] = this.allIcons; - @observable _selectedTypes: any[] = []; - @observable titleFieldStatus: boolean = true; - @observable authorFieldStatus: boolean = true; - @observable dataFieldStatus: boolean = true; - @observable collectionStatus = false; - @observable collectionSelfStatus = true; - @observable collectionParentStatus = true; + @observable private _icons: string[] = this._allIcons; + @observable private _titleFieldStatus: boolean = true; + @observable private _authorFieldStatus: boolean = true; + @observable private _dataFieldStatus: boolean = true; + @observable private _collectionStatus = false; + @observable private _collectionSelfStatus = true; + @observable private _collectionParentStatus = true; @observable private _wordStatusOpen: boolean = false; @observable private _typeOpen: boolean = false; @observable private _colOpen: boolean = false; @@ -180,19 +180,19 @@ export class SearchBox extends React.Component { applyBasicFieldFilters(query: string) { let finalQuery = ""; - if (this.titleFieldStatus) { + if (this._titleFieldStatus) { finalQuery = finalQuery + this.basicFieldFilters(query, Keys.TITLE); } - if (this.authorFieldStatus) { + if (this._authorFieldStatus) { finalQuery = finalQuery + this.basicFieldFilters(query, Keys.AUTHOR); } - if (this.dataFieldStatus) { + if (this._dataFieldStatus) { finalQuery = finalQuery + this.basicFieldFilters(query, Keys.DATA); } return finalQuery; } - get fieldFiltersApplied() { return !(this.dataFieldStatus && this.authorFieldStatus && this.titleFieldStatus); } + get fieldFiltersApplied() { return !(this._dataFieldStatus && this._authorFieldStatus && this._titleFieldStatus); } //TODO: basically all of this //gets all of the collections of all the docviews that are selected @@ -238,7 +238,7 @@ export class SearchBox extends React.Component { } //if should be searched in a specific collection - if (this.collectionStatus) { + if (this._collectionStatus) { query = this.addCollectionFilter(query); query = query.replace(/\s+/g, ' ').trim(); } @@ -448,29 +448,29 @@ export class SearchBox extends React.Component { toggleWordStatusOpen() { this._wordStatusOpen = !this._wordStatusOpen; } @action.bound - updateTitleStatus(newStat: boolean) { this.titleFieldStatus = newStat; } + updateTitleStatus(newStat: boolean) { this._titleFieldStatus = newStat; } @action.bound - updateAuthorStatus(newStat: boolean) { this.authorFieldStatus = newStat; } + updateAuthorStatus(newStat: boolean) { this._authorFieldStatus = newStat; } @action.bound - updateDataStatus(newStat: boolean) { this.dataFieldStatus = newStat; } + updateDataStatus(newStat: boolean) { this._dataFieldStatus = newStat; } @action.bound - updateCollectionStatus(newStat: boolean) { this.collectionStatus = newStat; } + updateCollectionStatus(newStat: boolean) { this._collectionStatus = newStat; } @action.bound - updateSelfCollectionStatus(newStat: boolean) { this.collectionSelfStatus = newStat; } + updateSelfCollectionStatus(newStat: boolean) { this._collectionSelfStatus = newStat; } @action.bound - updateParentCollectionStatus(newStat: boolean) { this.collectionParentStatus = newStat; } + updateParentCollectionStatus(newStat: boolean) { this._collectionParentStatus = newStat; } - getCollectionStatus() { return this.collectionStatus; } - getSelfCollectionStatus() { return this.collectionSelfStatus; } - getParentCollectionStatus() { return this.collectionParentStatus; } - getTitleStatus() { return this.titleFieldStatus; } - getAuthorStatus() { return this.authorFieldStatus; } - getDataStatus() { return this.dataFieldStatus; } + getCollectionStatus() { return this._collectionStatus; } + getSelfCollectionStatus() { return this._collectionSelfStatus; } + getParentCollectionStatus() { return this._collectionParentStatus; } + getTitleStatus() { return this._titleFieldStatus; } + getAuthorStatus() { return this._authorFieldStatus; } + getDataStatus() { return this._dataFieldStatus; } // Useful queries: // Delegates of a document: {!join from=id to=proto_i}id:{protoId} @@ -480,8 +480,8 @@ export class SearchBox extends React.Component {
- - + + {this._filterOpen ? (
-
+
-
+
Required words
@@ -531,7 +531,7 @@ export class SearchBox extends React.Component {
+ collectionStatus={this._collectionStatus} collectionParentStatus={this._collectionParentStatus} collectionSelfStatus={this._collectionSelfStatus} />
@@ -539,12 +539,12 @@ export class SearchBox extends React.Component {
- + diff --git a/src/client/views/search/SearchItem.scss b/src/client/views/search/SearchItem.scss index c82d4bb06..9859d6293 100644 --- a/src/client/views/search/SearchItem.scss +++ b/src/client/views/search/SearchItem.scss @@ -1,149 +1,151 @@ @import "../globalCssVariables"; -.search-item { - width: 500px; - background: $light-color-secondary; - border-color: $intermediate-color; - border-bottom-style: solid; - padding: 10px; - height: 70px; -} - -.search-info { +.search-overview { display: flex; + flex-direction: row-reverse; justify-content: flex-end; - width: 40%; -} + height: 70px; -.main-search-info { - display: flex; - flex-direction: row; - width: 100%; -} - -.search-item:hover { - transition: all 0.2s; - background: $lighter-alt-accent; -} - -.search-title { - text-transform: uppercase; - text-align: left; - width: 80%; - font-weight: bold; -} - -.link-container.item { - height: 26px; - width: 26px; - border-radius: 13px; - background: $dark-color; - color: $light-color-secondary; - display: flex; - justify-content: center; - align-items: center; - margin-right: 10px; - -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; - transform-origin: top right; - overflow: hidden; - - .link-count { - opacity: 1; - position: absolute; - z-index: 1000; - -webkit-transition: opacity 0.2s ease-in-out; - -moz-transition: opacity 0.2s ease-in-out; - -o-transition: opacity 0.2s ease-in-out; - transition: opacity 0.2s ease-in-out; + .search-item { + width: 500px; + background: $light-color-secondary; + border-color: $intermediate-color; + border-bottom-style: solid; + padding: 10px; + height: 70px; + + .main-search-info { + display: flex; + flex-direction: row; + width: 100%; + + .search-title { + text-transform: uppercase; + text-align: left; + width: 80%; + font-weight: bold; + } + + .search-info { + display: flex; + justify-content: flex-end; + width: 40%; + + .link-container.item { + height: 26px; + width: 26px; + border-radius: 13px; + background: $dark-color; + color: $light-color-secondary; + display: flex; + justify-content: center; + align-items: center; + right: 120px; + -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; + transform-origin: top right; + overflow: hidden; + position: absolute; + + .link-count { + opacity: 1; + position: absolute; + z-index: 1000; + -webkit-transition: opacity 0.2s ease-in-out; + -moz-transition: opacity 0.2s ease-in-out; + -o-transition: opacity 0.2s ease-in-out; + transition: opacity 0.2s ease-in-out; + } + + .link-extended { + opacity: 0; + position: absolute; + z-index: 500; + overflow: hidden; + -webkit-transition: opacity 0.2s ease-in-out; + -moz-transition: opacity 0.2s ease-in-out; + -o-transition: opacity 0.2s ease-in-out; + transition: opacity 0.2s ease-in-out; + } + } + + .link-container.item:hover { + width: 70px; + } + + .link-container.item:hover .link-count { + opacity: 0; + } + + .link-container.item:hover .link-extended { + opacity: 1; + } + + .icon { + // display: inline-block; + // // align-items: right; + // display: flex; + position: absolute; + + .search-type { + width: 25PX; + height: 25PX; + display: flex; + justify-content: center; + align-items: center; + position: relative; + margin-right: 5px; + } + + .search-type:hover+.search-label { + opacity: 1; + } + + .search-label { + font-size: 10; + padding: 5px; + position: absolute; + right: 0px; + text-transform: capitalize; + opacity: 0; + -webkit-transition: opacity 0.2s ease-in-out; + -moz-transition: opacity 0.2s ease-in-out; + -o-transition: opacity 0.2s ease-in-out; + transition: opacity 0.2s ease-in-out; + } + } + } + } } - .link-extended { - opacity: 0; - position: absolute; - z-index: 500; - overflow: hidden; - -webkit-transition: opacity 0.2s ease-in-out; - -moz-transition: opacity 0.2s ease-in-out; - -o-transition: opacity 0.2s ease-in-out; - transition: opacity 0.2s ease-in-out; + .search-item:hover~.searchBox-instances, + .searchBox-instances:hover, + .searchBox-instances:active { + opacity: 1; + background: $lighter-alt-accent; + -webkit-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); } -} - -.link-container.item:hover{ - width: 70px; -} -.link-container.item:hover .link-count{ - opacity: 0; -} - -.link-container.item:hover .link-extended{ - opacity: 1; -} + .search-item:hover { + transition: all 0.2s; + background: $lighter-alt-accent; + } -.search-type { - width: 25PX; - height: 25PX; - display: flex; - justify-content: center; - align-items: center; -} - - -.searchBox-instances { - float: left; - opacity: 1; - width: 150px; - transition: all 0.2s ease; - color: black; - transform-origin: top right; - -webkit-transform: scale(0); - -ms-transform: scale(0); - transform: scale(0); - height: 100% -} - -.contexts.collection { - border-color: $darker-alt-accent; - border-bottom-style: solid; -} + .searchBox-instances { + float: left; + opacity: 1; + width: 150px; + transition: all 0.2s ease; + color: black; + transform-origin: top right; + -webkit-transform: scale(0); + -ms-transform: scale(0); + transform: scale(0); + height: 100% + } -.search-overview { - display: flex; - flex-direction: row-reverse; - justify-content: flex-end; - height: 70px; -} - -.parents { - background: $lighter-alt-accent; - padding: 10px; -} - -.search-item:hover~.searchBox-instances, -.searchBox-instances:hover, -.searchBox-instances:active { - opacity: 1; - background: $lighter-alt-accent; - -webkit-transform: scale(1); - -ms-transform: scale(1); - transform: scale(1); -} - -.search-label{ - text-align: right; - float: right; - text-transform: capitalize; - opacity: 0; - -webkit-transition: opacity 0.2s ease-in-out; - -moz-transition: opacity 0.2s ease-in-out; - -o-transition: opacity 0.2s ease-in-out; - transition: opacity 0.2s ease-in-out; -} - -.search-type:hover +.search-label{ - opacity: 1; } \ No newline at end of file diff --git a/src/client/views/search/SearchItem.tsx b/src/client/views/search/SearchItem.tsx index fa9d58152..71ad9a5ee 100644 --- a/src/client/views/search/SearchItem.tsx +++ b/src/client/views/search/SearchItem.tsx @@ -17,6 +17,7 @@ import { CollectionViewType } from "../collections/CollectionBaseView"; import { DocTypes } from "../../documents/Documents"; import { SearchBox } from "./SearchBox"; import { DocumentView } from "../nodes/DocumentView"; +import "./SelectorContextMenu.scss"; export interface SearchItemProps { doc: Doc; @@ -39,7 +40,6 @@ export class SelectorContextMenu extends React.Component { constructor(props: SearchItemProps) { super(props); - this.fetchDocuments(); } diff --git a/src/client/views/search/SelectorContextMenu.scss b/src/client/views/search/SelectorContextMenu.scss new file mode 100644 index 000000000..49f77b9bf --- /dev/null +++ b/src/client/views/search/SelectorContextMenu.scss @@ -0,0 +1,15 @@ +@import "../globalCssVariables"; + +.parents { + background: $lighter-alt-accent; + padding: 10px; + + .contexts { + text-transform: uppercase; + } + + .collection { + border-color: $darker-alt-accent; + border-bottom-style: solid; + } +} \ No newline at end of file diff --git a/src/client/views/search/ToggleBar.tsx b/src/client/views/search/ToggleBar.tsx index b1d22d38c..dbe16cbdb 100644 --- a/src/client/views/search/ToggleBar.tsx +++ b/src/client/views/search/ToggleBar.tsx @@ -18,15 +18,15 @@ export interface ToggleBarProps { export class ToggleBar extends React.Component{ static Instance: ToggleBar; - @observable forwardTimeline: anime.AnimeTimelineInstance; - @observable _toggleButton: React.RefObject; - @observable _originalStatus: boolean = this.props.originalStatus; + @observable private _forwardTimeline: anime.AnimeTimelineInstance; + @observable private _toggleButton: React.RefObject; + @observable private _originalStatus: boolean = this.props.originalStatus; constructor(props: ToggleBarProps) { super(props); ToggleBar.Instance = this; this._toggleButton = React.createRef(); - this.forwardTimeline = anime.timeline({ + this._forwardTimeline = anime.timeline({ loop: false, autoplay: false, direction: "reverse", @@ -38,7 +38,7 @@ export class ToggleBar extends React.Component{ let totalWidth = 265; if (this._originalStatus) { - this.forwardTimeline.add({ + this._forwardTimeline.add({ targets: this._toggleButton.current, translateX: totalWidth, easing: "easeInOutQuad", @@ -46,7 +46,7 @@ export class ToggleBar extends React.Component{ }); } else { - this.forwardTimeline.add({ + this._forwardTimeline.add({ targets: this._toggleButton.current, translateX: -totalWidth, easing: "easeInOutQuad", @@ -57,16 +57,16 @@ export class ToggleBar extends React.Component{ @action.bound onclick() { - this.forwardTimeline.play(); - this.forwardTimeline.reverse(); + this._forwardTimeline.play(); + this._forwardTimeline.reverse(); this.props.handleChange(); } @action.bound public resetToggle = () => { if (!this.props.getStatus()) { - this.forwardTimeline.play(); - this.forwardTimeline.reverse(); + this._forwardTimeline.play(); + this._forwardTimeline.reverse(); this.props.handleChange(); } } -- cgit v1.2.3-70-g09d2