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/NaviconButton.tsx | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) create mode 100644 src/client/views/search/NaviconButton.tsx (limited to 'src/client/views/search/NaviconButton.tsx') 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 -- cgit v1.2.3-70-g09d2 From f05b323cff1f09c5c84042aa30ad57b2ac74b7cb Mon Sep 17 00:00:00 2001 From: Monika Date: Fri, 21 Jun 2019 13:46:53 -0400 Subject: navicon working --- src/client/views/search/CollectionFilters.tsx | 1 - src/client/views/search/FieldFilters.tsx | 1 - src/client/views/search/IconBar.tsx | 1 - src/client/views/search/NaviconButton.scss | 18 +---- src/client/views/search/NaviconButton.tsx | 39 +++++++++-- src/client/views/search/SearchBox.scss | 26 ++++--- src/client/views/search/SearchBox.tsx | 97 +++++++++++---------------- src/client/views/search/SearchItem.scss | 2 +- 8 files changed, 89 insertions(+), 96 deletions(-) (limited to 'src/client/views/search/NaviconButton.tsx') diff --git a/src/client/views/search/CollectionFilters.tsx b/src/client/views/search/CollectionFilters.tsx index 5bfe37efb..b8c1579b2 100644 --- a/src/client/views/search/CollectionFilters.tsx +++ b/src/client/views/search/CollectionFilters.tsx @@ -74,7 +74,6 @@ export class CollectionFilters extends React.Component { render() { return (
-
Search in current collections
diff --git a/src/client/views/search/FieldFilters.tsx b/src/client/views/search/FieldFilters.tsx index c7928dcd6..5ad08a7bc 100644 --- a/src/client/views/search/FieldFilters.tsx +++ b/src/client/views/search/FieldFilters.tsx @@ -33,7 +33,6 @@ export class FieldFilters extends React.Component { render() { return (
-
Filter by Basic Keys
diff --git a/src/client/views/search/IconBar.tsx b/src/client/views/search/IconBar.tsx index 2ae4af642..ea8c626ca 100644 --- a/src/client/views/search/IconBar.tsx +++ b/src/client/views/search/IconBar.tsx @@ -68,7 +68,6 @@ export class IconBar extends React.Component { render() { return (
-
Filter by type of node
= React.createRef(); + componentDidMount = () => { - $(document).ready(function () { - var hamburger = $('#hamburger-icon'); - hamburger.click(function () { - hamburger.toggleClass('active'); + // this.ref = React.createRef(); + // $(document).ready(function () { + // var hamburger = $('#hamburger-icon'); + // hamburger.click(function () { + // hamburger.toggleClass('active'); + // console.log("toggling 1") + // return false; + // }); + // }); + + // document.addEventListener("click", this.toggle) + + let that = this; + + if(this.ref.current){this.ref.current.addEventListener("click", function(e) { + e.preventDefault(); + if(that.ref.current){ + that.ref.current.classList.toggle('active'); + console.log("toggling 2") return false; - }); - }); + } + })} + } + // toggle = (e: MouseEvent) => { + // this.ref.current.toggleClass('active'); + // console.log("toggling 2") + // return false; + // } + render() { return ( - + diff --git a/src/client/views/search/SearchBox.scss b/src/client/views/search/SearchBox.scss index 3b96e3922..c65a8b084 100644 --- a/src/client/views/search/SearchBox.scss +++ b/src/client/views/search/SearchBox.scss @@ -32,6 +32,13 @@ } +.filter-title{ + font-size: 18; + text-transform: uppercase; + margin-top: 10px; + margin-bottom: 10px; +} + .searchBox-results { margin-left: 27px; //Is there a better way to do this? } @@ -46,6 +53,11 @@ color: $light-color; flex-direction: column; display: inline-block; + + .filter-header{ + display: flex; + align-items: center; + } } #filter{ @@ -79,20 +91,13 @@ margin-bottom: 5px; } -.type-of-node{ - height: 90px; -} - -.required-words{ +.filter-div{ + margin-top: 10px; + margin-bottom: 10px; display: inline-block; width: 100%; } -.filter-div{ - margin-top: 5px; - margin-bottom: 5px; -} - .collection-title{ color: $light-color; text-transform: uppercase; @@ -109,7 +114,6 @@ height: 50px; text-transform: uppercase; text-align: left; - // width: 80%; font-weight: bold; } diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index 71472886f..a76269114 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -409,58 +409,23 @@ export class SearchBox extends React.Component { } @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; - } - - getCollectionStatus() { - return this.collectionStatus; - } - - getSelfCollectionStatus() { - return this.collectionSelfStatus; - } - - getParentCollectionStatus() { - return this.collectionParentStatus; - } - - getTitleStatus() { - return this.titleFieldStatus; - } - - getAuthorStatus() { - return this.authorFieldStatus; - } - - getDataStatus() { - return this.dataFieldStatus; - } + 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} @@ -490,26 +455,42 @@ export class SearchBox extends React.Component {
{this._filterOpen ? (
- -
+ +
-
+
+
+
Filter by type of node
+ +
-
- +
+
+
Search in current collections
+ +
+
-
- +
+
Filter by Basic Keys
+ +
+
- +
) : undefined}
diff --git a/src/client/views/search/SearchItem.scss b/src/client/views/search/SearchItem.scss index 6e88d1f44..c82d4bb06 100644 --- a/src/client/views/search/SearchItem.scss +++ b/src/client/views/search/SearchItem.scss @@ -106,7 +106,7 @@ height: 100% } -.collection { +.contexts.collection { border-color: $darker-alt-accent; border-bottom-style: solid; } -- cgit v1.2.3-70-g09d2 From a70ac0d98f879d2f9b8824e51dcab62b840f0b8a Mon Sep 17 00:00:00 2001 From: Monika Date: Fri, 21 Jun 2019 15:00:16 -0400 Subject: mleh end of day 6/21 --- src/client/views/search/FieldFilters.tsx | 2 +- src/client/views/search/NaviconButton.tsx | 28 +++-------- src/client/views/search/SearchBox.scss | 33 ++++++++++--- src/client/views/search/SearchBox.tsx | 81 +++++++++++++++++++++---------- 4 files changed, 88 insertions(+), 56 deletions(-) (limited to 'src/client/views/search/NaviconButton.tsx') diff --git a/src/client/views/search/FieldFilters.tsx b/src/client/views/search/FieldFilters.tsx index 5ad08a7bc..f87755478 100644 --- a/src/client/views/search/FieldFilters.tsx +++ b/src/client/views/search/FieldFilters.tsx @@ -32,7 +32,7 @@ export class FieldFilters extends React.Component { render() { return ( -
+
diff --git a/src/client/views/search/NaviconButton.tsx b/src/client/views/search/NaviconButton.tsx index d89874453..8c022fab6 100644 --- a/src/client/views/search/NaviconButton.tsx +++ b/src/client/views/search/NaviconButton.tsx @@ -4,26 +4,17 @@ import "./NaviconButton.scss"; import * as $ from 'jquery'; import { observable } from 'mobx'; +export interface NaviconProps{ + onClick(): void; +} -export class NaviconButton extends React.Component { + +export class NaviconButton extends React.Component { @observable ref: React.RefObject = React.createRef(); componentDidMount = () => { - // this.ref = React.createRef(); - // $(document).ready(function () { - // var hamburger = $('#hamburger-icon'); - // hamburger.click(function () { - // hamburger.toggleClass('active'); - // console.log("toggling 1") - // return false; - // }); - // }); - - // document.addEventListener("click", this.toggle) - let that = this; - if(this.ref.current){this.ref.current.addEventListener("click", function(e) { e.preventDefault(); if(that.ref.current){ @@ -31,16 +22,9 @@ export class NaviconButton extends React.Component { console.log("toggling 2") return false; } - })} - + })}; } - // toggle = (e: MouseEvent) => { - // this.ref.current.toggleClass('active'); - // console.log("toggling 2") - // return false; - // } - render() { return ( diff --git a/src/client/views/search/SearchBox.scss b/src/client/views/search/SearchBox.scss index c65a8b084..98eb31ba1 100644 --- a/src/client/views/search/SearchBox.scss +++ b/src/client/views/search/SearchBox.scss @@ -32,11 +32,15 @@ } -.filter-title{ +.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 { @@ -54,13 +58,22 @@ flex-direction: column; display: inline-block; - .filter-header{ + .filter-header { display: flex; align-items: center; + margin-bottom: 10px; + } + + .filter-header:hover .filter-title{ + transform: scale(1.05); + } + + .filter-panel { + display: none; } } -#filter{ +#filter { padding: 25px; width: 600px; } @@ -79,7 +92,7 @@ margin-right: 72px; } -.filter-collection{ +.filter-collection { display: inline-block; width: 100%; } @@ -91,18 +104,18 @@ margin-bottom: 5px; } -.filter-div{ +.filter-div { margin-top: 10px; margin-bottom: 10px; display: inline-block; width: 100%; } -.collection-title{ +.collection-title { color: $light-color; text-transform: uppercase; margin-top: 5px; - margin-bottom: 5px; + margin-bottom: 5px; } .no-result { @@ -117,3 +130,9 @@ font-weight: bold; } +.field-filters { + width: 100%; + display: grid; + grid-template-columns: 18% 20% 60%; + // white-space: space-between; +} \ No newline at end of file diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index a76269114..9a0a69f87 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -2,33 +2,23 @@ import * as React from 'react'; import { observer } from 'mobx-react'; import { observable, action, runInAction } from 'mobx'; import "./SearchBox.scss"; -import { faSearch, faFilePdf, faFilm, faImage, faObjectGroup, faStickyNote, faMusic, faLink, faChartBar, faGlobeAsia, faBan, faThList, faWineGlassAlt } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { library } from '@fortawesome/fontawesome-svg-core'; import * as rp from 'request-promise'; import { SearchItem } from './SearchItem'; import { DocServer } from '../../DocServer'; -import { Doc, Opt } from '../../../new_fields/Doc'; +import { Doc } from '../../../new_fields/Doc'; import { Id } from '../../../new_fields/FieldSymbols'; import { SetupDrag } from '../../util/DragManager'; import { Docs, DocTypes } from '../../documents/Documents'; import { RouteStore } from '../../../server/RouteStore'; import { NumCast, Cast, StrCast } from '../../../new_fields/Types'; import { SearchUtil } from '../../util/SearchUtil'; -import * as anime from 'animejs'; -import { updateFunction } from '../../../new_fields/util'; import * as _ from "lodash"; -import { findDOMNode } from 'react-dom'; import { ToggleBar } from './ToggleBar'; import { IconBar } from './IconBar'; -import { type } from 'os'; -import { CheckBox } from './CheckBox'; import { FieldFilters } from './FieldFilters'; import { SelectionManager } from '../../util/SelectionManager'; import { DocumentView } from '../nodes/DocumentView'; -import { CollectionView } from '../collections/CollectionView'; -import { CollectionPDFView } from '../collections/CollectionPDFView'; -import { CollectionVideoView } from '../collections/CollectionVideoView'; import { CollectionFilters } from './CollectionFilters'; import { NaviconButton } from './NaviconButton'; @@ -59,6 +49,10 @@ export class SearchBox extends React.Component { @observable collectionStatus = false; @observable collectionSelfStatus = true; @observable collectionParentStatus = true; + @observable private _wordStatusOpen: boolean = false; + @observable private _typeOpen: boolean = false; + @observable private _colOpen: boolean = false; + @observable private _fieldOpen: boolean = false; constructor(props: Readonly<{}>) { super(props); @@ -72,12 +66,47 @@ export class SearchBox extends React.Component { } }); + + var acc = document.getElementsByClassName('filter-header'); + // var i: number = 0; + + console.log("hello") + + 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"); + + var panel = this.nextElementSibling as HTMLElement; + if (panel) { + if (panel.style.display === "inline-block") { + panel.style.display = "none"; + } else { + panel.style.display = "inline-block"; + } + } + }); + } + //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(); @@ -457,37 +486,37 @@ export class SearchBox extends React.Component {
-
-
+
-
+
Filter by type of node
- +
- +
-
+
Search in current collections
- +
- + collectionStatus={this.collectionStatus} collectionParentStatus={this.collectionParentStatus} collectionSelfStatus={this.collectionSelfStatus} />
-
+
Filter by Basic Keys
- +
- + updateAuthorStatus={this.updateAuthorStatus} updateDataStatus={this.updateDataStatus} updateTitleStatus={this.updateTitleStatus} />
-- cgit v1.2.3-70-g09d2 From c886665b3f244389a09e05ab4805c1225de54d7e Mon Sep 17 00:00:00 2001 From: Monika Date: Mon, 24 Jun 2019 11:45:20 -0400 Subject: accordion almost workin --- src/client/views/search/CollectionFilters.tsx | 4 +- src/client/views/search/NaviconButton.tsx | 1 + src/client/views/search/SearchBox.scss | 18 +++++- src/client/views/search/SearchBox.tsx | 91 +++++++++++++++------------ src/client/views/search/ToggleBar.tsx | 13 +++- 5 files changed, 81 insertions(+), 46 deletions(-) (limited to 'src/client/views/search/NaviconButton.tsx') 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 { } @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,25 +98,9 @@ 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(); @@ -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(); @@ -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; @@ -437,18 +423,39 @@ export class SearchBox extends React.Component { this._pointerTime = e.timeStamp; } + @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 {
{this._filterOpen ? (
- +
+ +
+
Required words
-
+
+ +
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{ 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({ -- cgit v1.2.3-70-g09d2 From a9ae54044fdb7f10dd01473e711e1afea00d33c1 Mon Sep 17 00:00:00 2001 From: Monika Date: Mon, 24 Jun 2019 14:46:01 -0400 Subject: filter box is looking NICEEE --- src/client/views/search/NaviconButton.scss | 52 ++++++----------- src/client/views/search/NaviconButton.tsx | 2 - src/client/views/search/SearchBox.scss | 56 +++++++++++++++---- src/client/views/search/SearchBox.tsx | 90 ++++++++++++++++++++++-------- src/client/views/search/ToggleBar.tsx | 14 +++-- 5 files changed, 139 insertions(+), 75 deletions(-) (limited to 'src/client/views/search/NaviconButton.tsx') diff --git a/src/client/views/search/NaviconButton.scss b/src/client/views/search/NaviconButton.scss index d26d67de2..634b4aeb5 100644 --- a/src/client/views/search/NaviconButton.scss +++ b/src/client/views/search/NaviconButton.scss @@ -14,7 +14,9 @@ $translateX: 0; height:$height-icon; position:relative; display:block; -// margin: ($height-icon * 2) auto $height-icon auto; + transition: all $transition-time; + -webkit-transition: all $transition-time; + -moz-transition: all $transition-time; .line { display:block; @@ -38,44 +40,26 @@ $translateX: 0; 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 { +} + +.filter-header.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); + 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; + 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); + 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 +.filter-header:hover #hamburger-icon { + transform: scale(1.1); + -webkit-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 adfd1308c..1b8ad7e91 100644 --- a/src/client/views/search/NaviconButton.tsx +++ b/src/client/views/search/NaviconButton.tsx @@ -6,7 +6,6 @@ import { observable } from 'mobx'; export interface NaviconProps{ onClick(): void; - outsideClick(): void; } @@ -20,7 +19,6 @@ export class NaviconButton extends React.Component { e.preventDefault(); if(that.ref.current){ that.ref.current.classList.toggle('active'); - console.log("toggling 2") return false; } })}; diff --git a/src/client/views/search/SearchBox.scss b/src/client/views/search/SearchBox.scss index c98c7c28f..57002a94a 100644 --- a/src/client/views/search/SearchBox.scss +++ b/src/client/views/search/SearchBox.scss @@ -1,4 +1,5 @@ @import "../globalCssVariables"; +@import "./NaviconButton.scss"; .searchBox-bar { height: 32px; @@ -49,7 +50,6 @@ .filter-form { background: $dark-color; - // height: 400px; height: auto; overflow: auto; position: relative; @@ -64,27 +64,52 @@ margin-bottom: 10px; } - .filter-header:hover .filter-title{ + .filter-header:hover .filter-title { transform: scale(1.05); } .filter-panel { - display: none; + 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 { - height: 100%; + width: 20%; opacity: .6; - justify-content: right; position: relative; - .fontawesome-icon { - margin-right: 0px; - height: 30px; + 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{ + .close-icon:hover { opacity: 1; } } @@ -98,7 +123,7 @@ text-transform: uppercase; letter-spacing: 2px; font-size: 25; - width: 100%; + width: 80%; } .searchBox-results { @@ -120,11 +145,19 @@ 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: inline-block; + display: block; width: 100%; + border-color: rgba(178, 206, 248, .2); // $darker-alt-accent + border-top-style: solid; } .collection-title { @@ -150,5 +183,4 @@ width: 100%; display: grid; grid-template-columns: 18% 20% 60%; - // white-space: space-between; } \ No newline at end of file diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index b19841312..31e9f5d06 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -24,6 +24,7 @@ import { DocumentView } from '../nodes/DocumentView'; import { CollectionFilters } from './CollectionFilters'; import { NaviconButton } from './NaviconButton'; import * as $ from 'jquery'; +import * as anime from 'animejs'; library.add(faTimes); @@ -78,27 +79,63 @@ export class SearchBox extends React.Component { } setupAccordion() { - $('document').ready(function(){ + $('document').ready(function () { var acc = document.getElementsByClassName('filter-header'); - for (var i = 0; i < acc.length; i++) { - // for(let entry of acc){ - 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") { - panel.style.display = "none"; + for (var i = 0; i < acc.length; i++) { + acc[i].addEventListener("click", function (this: HTMLElement) { + this.classList.toggle("active"); + + var panel = this.nextElementSibling as HTMLElement; + // if (panel) { + // console.log(panel.style.transform) + // if (panel.style.display === "inline-block") { + // panel.style.opacity = "0"; + // // panel.style.transform = "scaleY(0)" + // setTimeout(function(){ + // panel.style.display = "none"; + // }, 200); + + // } else { + // panel.style.opacity = "1"; + // // panel.style.transform = "scaleY(1)" + // panel.style.display = "inline-block"; + // } + // } + if (panel.style.maxHeight) { + panel.style.overflow = "hidden"; + panel.style.maxHeight = null; + panel.style.opacity = "0"; } else { - panel.style.display = "inline-block"; + setTimeout(() => { + panel.style.overflow = "visible"; + }, 200); + setTimeout(() => { + panel.style.opacity = "1"; + }, 50) + panel.style.maxHeight = panel.scrollHeight + "px"; + } + }); + } + }); + } + + @action.bound + minimizeAll() { + $('document').ready(function () { + var acc = document.getElementsByClassName('filter-header'); + + for (var i = 0; i < acc.length; i++) { + let classList = acc[i].classList; + if (classList.contains("active")) { + acc[i].classList.toggle("active"); + var panel = acc[i].nextElementSibling as HTMLElement; + panel.style.overflow = "hidden"; + panel.style.maxHeight = null; } - }); - } - }); + } + }); } @action.bound @@ -423,6 +460,8 @@ export class SearchBox extends React.Component { this._pointerTime = e.timeStamp; } + + @action.bound closeFilter() { this._filterOpen = false; } @@ -491,9 +530,11 @@ export class SearchBox extends React.Component {
{this._filterOpen ? (
-
+
-
+
+ +
@@ -502,9 +543,9 @@ export class SearchBox extends React.Component {
- -
+ +
@@ -532,7 +573,12 @@ export class SearchBox extends React.Component { updateAuthorStatus={this.updateAuthorStatus} updateDataStatus={this.updateDataStatus} updateTitleStatus={this.updateTitleStatus} />
- +
+ + + + +
) : undefined}
diff --git a/src/client/views/search/ToggleBar.tsx b/src/client/views/search/ToggleBar.tsx index 90fab99ee..5c5e525c8 100644 --- a/src/client/views/search/ToggleBar.tsx +++ b/src/client/views/search/ToggleBar.tsx @@ -10,6 +10,8 @@ export interface ToggleBarProps { originalStatus: boolean; optionOne: string; optionTwo: string; + handleChange(): void; + getStatus(): boolean; } @observer @@ -79,15 +81,17 @@ export class ToggleBar extends React.Component{ onclick() { this.forwardTimeline.play(); this.forwardTimeline.reverse(); - SearchBox.Instance.handleWordQueryChange(); + // SearchBox.Instance.handleWordQueryChange(); + this.props.handleChange(); } @action.bound public resetToggle = () => { - if (!SearchBox.Instance.getBasicWordStatus()) { + if (!this.props.getStatus()) { this.forwardTimeline.play(); this.forwardTimeline.reverse(); - SearchBox.Instance.handleWordQueryChange(); + // SearchBox.Instance.handleWordQueryChange(); + this.props.handleChange(); } } @@ -95,8 +99,8 @@ export class ToggleBar extends React.Component{ return (
-
{this.props.optionOne}
-
{this.props.optionTwo}
+
{this.props.optionOne}
+
{this.props.optionTwo}
-- cgit v1.2.3-70-g09d2 From 56394d6631f494526546cb5cd03297b400a85e65 Mon Sep 17 00:00:00 2001 From: Monika Date: Mon, 24 Jun 2019 16:07:38 -0400 Subject: clean ups --- src/client/views/search/IconBar.tsx | 8 ++------ src/client/views/search/IconButton.tsx | 16 ++++------------ src/client/views/search/NaviconButton.tsx | 1 - src/client/views/search/SearchBox.tsx | 17 +---------------- src/client/views/search/SearchItem.tsx | 9 ++------- src/client/views/search/ToggleBar.tsx | 22 ---------------------- 6 files changed, 9 insertions(+), 64 deletions(-) (limited to 'src/client/views/search/NaviconButton.tsx') diff --git a/src/client/views/search/IconBar.tsx b/src/client/views/search/IconBar.tsx index ea8c626ca..8746ac6e2 100644 --- a/src/client/views/search/IconBar.tsx +++ b/src/client/views/search/IconBar.tsx @@ -44,14 +44,10 @@ export class IconBar extends React.Component { } @action.bound - getList = (): string[] => { - return SearchBox.Instance.getIcons(); - } + getList = (): string[] => { return SearchBox.Instance.getIcons(); } @action.bound - updateList(newList: string[]) { - SearchBox.Instance.updateIcon(newList); - } + updateList(newList: string[]) { SearchBox.Instance.updateIcon(newList); } @action.bound resetSelf = () => { diff --git a/src/client/views/search/IconButton.tsx b/src/client/views/search/IconButton.tsx index 9df285b70..541fe5ba5 100644 --- a/src/client/views/search/IconButton.tsx +++ b/src/client/views/search/IconButton.tsx @@ -137,24 +137,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) { diff --git a/src/client/views/search/NaviconButton.tsx b/src/client/views/search/NaviconButton.tsx index 1b8ad7e91..3f9bb030f 100644 --- a/src/client/views/search/NaviconButton.tsx +++ b/src/client/views/search/NaviconButton.tsx @@ -8,7 +8,6 @@ export interface NaviconProps{ onClick(): void; } - export class NaviconButton extends React.Component { @observable ref: React.RefObject = React.createRef(); diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index 30bd0c3d9..28bcadc6b 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -194,23 +194,17 @@ export class SearchBox extends React.Component { 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 //if a collection is the only thing selected, search only in that collection (not its container) getCurCollections(): Doc[] { let selectedDocs: DocumentView[] = SelectionManager.SelectedDocuments(); let collections: Doc[] = []; - //TODO: make this some sort of error - if (selectedDocs.length === 0) { - console.log("there is nothing selected!") - } - //also searches in a collection if it is selected - else { selectedDocs.forEach(async element => { let layout: string = StrCast(element.props.Document.baseLayout); //checks if selected view (element) is a collection. if it is, adds to list to search through if (layout.indexOf("Collection") > -1) { - console.log("current doc is a collection") //makes sure collections aren't added more than once if (!collections.includes(element.props.Document)) { collections.push(element.props.Document); @@ -223,7 +217,6 @@ export class SearchBox extends React.Component { collections.push(containingView.props.Document); } }); - } return collections; } @@ -249,7 +242,6 @@ export class SearchBox extends React.Component { query = this.addCollectionFilter(query); query = query.replace(/\s+/g, ' ').trim(); } - console.log(query) return query; } @@ -276,7 +268,6 @@ export class SearchBox extends React.Component { let results: Doc[]; query = this.getFinalQuery(query); - console.log(query) //if there is no query there should be no result if (query === "") { @@ -287,8 +278,6 @@ export class SearchBox extends React.Component { results = await this.getResults(query); } - console.log(results); - runInAction(() => { this._resultsOpen = true; this._results = results; @@ -312,18 +301,14 @@ export class SearchBox extends React.Component { docs.push(field); } } - console.log(docs) return this.filterDocsByType(docs); } //this.icons will now include all the icons that need to be included @action filterDocsByType(docs: Doc[]) { - console.log(this._icons) let finalDocs: Doc[] = []; docs.forEach(doc => { - console.log(doc.layout) let layoutresult = Cast(doc.type, "string", ""); - console.log(layoutresult) if (this._icons.includes(layoutresult)) { finalDocs.push(doc); } diff --git a/src/client/views/search/SearchItem.tsx b/src/client/views/search/SearchItem.tsx index c19057819..e80d42a5c 100644 --- a/src/client/views/search/SearchItem.tsx +++ b/src/client/views/search/SearchItem.tsx @@ -69,7 +69,6 @@ export class SelectorContextMenu extends React.Component { }; } - //these all need class names in order to find ancestor - please do not delete render() { return ( < div className="parents"> @@ -119,9 +118,7 @@ export class SearchItem extends React.Component { } @computed - get linkCount() { - return Cast(this.props.doc.linkedToDocs, listSpec(Doc), []).length + Cast(this.props.doc.linkedFromDocs, listSpec(Doc), []).length; - } + get linkCount() { return Cast(this.props.doc.linkedToDocs, listSpec(Doc), []).length + Cast(this.props.doc.linkedFromDocs, listSpec(Doc), []).length; } @computed get linkString(): string { @@ -132,9 +129,7 @@ export class SearchItem extends React.Component { return num.toString() + " links"; } - pointerDown = (e: React.PointerEvent) => { - SearchBox.Instance.openSearch(e); - } + pointerDown = (e: React.PointerEvent) => { SearchBox.Instance.openSearch(e); } highlightDoc = (e: React.PointerEvent) => { let docViews: DocumentView[] = DocumentManager.Instance.getAllDocumentViews(this.props.doc); diff --git a/src/client/views/search/ToggleBar.tsx b/src/client/views/search/ToggleBar.tsx index 96536794d..b1d22d38c 100644 --- a/src/client/views/search/ToggleBar.tsx +++ b/src/client/views/search/ToggleBar.tsx @@ -33,30 +33,8 @@ export class ToggleBar extends React.Component{ }); } - @computed get totalWidth() { return this.getTotalWidth(); } - - getTotalWidth() { - let bar = document.getElementById("toggle-bar"); - let tog = document.getElementById("toggle-button"); - let barwidth = 0; - let togwidth = 0; - if (bar && tog) { - 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 = 265; if (this._originalStatus) { -- cgit v1.2.3-70-g09d2 From 329565c35729f5171de9efa30f36e6b4e0714101 Mon Sep 17 00:00:00 2001 From: Monika Date: Mon, 24 Jun 2019 16:10:19 -0400 Subject: lint fixes --- src/client/views/collections/CollectionDockingView.tsx | 4 ++-- src/client/views/collections/CollectionStackingView.tsx | 2 +- src/client/views/search/IconBar.tsx | 2 +- src/client/views/search/NaviconButton.tsx | 2 +- src/client/views/search/SearchBox.tsx | 2 +- src/client/views/search/SearchItem.tsx | 2 +- 6 files changed, 7 insertions(+), 7 deletions(-) (limited to 'src/client/views/search/NaviconButton.tsx') diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index 30d68fffd..c43497cfd 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -260,9 +260,9 @@ export class CollectionDockingView extends React.Component { this._isPointerDown = true; let onPointerUp = action(() => { - window.removeEventListener("pointerup", onPointerUp) + window.removeEventListener("pointerup", onPointerUp); this._isPointerDown = false; - }) + }); window.addEventListener("pointerup", onPointerUp); var className = (e.target as any).className; if (className === "messageCounter") { diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx index c855cb43a..597e4795c 100644 --- a/src/client/views/collections/CollectionStackingView.tsx +++ b/src/client/views/collections/CollectionStackingView.tsx @@ -99,7 +99,7 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) { let dref = React.createRef(); let dxf = () => this.getDocTransform(d, dref.current!).scale(this.columnWidth / d[WidthSym]()); let width = () => d.nativeWidth ? Math.min(d[WidthSym](), this.columnWidth) : this.columnWidth; - let height = () => aspect ? width() / aspect : d[HeightSym]() + let height = () => aspect ? width() / aspect : d[HeightSym](); let rowSpan = Math.ceil((height() + this.gridGap) / (this._gridSize + this.gridGap)); return (
{ return SearchBox.Instance.getIcons(); } + getList(): string[] { return SearchBox.Instance.getIcons(); } @action.bound updateList(newList: string[]) { SearchBox.Instance.updateIcon(newList); } diff --git a/src/client/views/search/NaviconButton.tsx b/src/client/views/search/NaviconButton.tsx index 3f9bb030f..e319b945a 100644 --- a/src/client/views/search/NaviconButton.tsx +++ b/src/client/views/search/NaviconButton.tsx @@ -20,7 +20,7 @@ export class NaviconButton extends React.Component { that.ref.current.classList.toggle('active'); return false; } - })}; + });} } render() { diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index 28bcadc6b..07e7496cf 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -92,7 +92,7 @@ export class SearchBox extends React.Component { }, 200); setTimeout(() => { panel.style.opacity = "1"; - }, 50) + }, 50); panel.style.maxHeight = panel.scrollHeight + "px"; } diff --git a/src/client/views/search/SearchItem.tsx b/src/client/views/search/SearchItem.tsx index e80d42a5c..fa9d58152 100644 --- a/src/client/views/search/SearchItem.tsx +++ b/src/client/views/search/SearchItem.tsx @@ -129,7 +129,7 @@ export class SearchItem extends React.Component { return num.toString() + " links"; } - pointerDown = (e: React.PointerEvent) => { SearchBox.Instance.openSearch(e); } + pointerDown = (e: React.PointerEvent) => { SearchBox.Instance.openSearch(e); }; highlightDoc = (e: React.PointerEvent) => { let docViews: DocumentView[] = DocumentManager.Instance.getAllDocumentViews(this.props.doc); -- 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/NaviconButton.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