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') 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