diff options
author | monikahedman <monika_hedman@brown.edu> | 2019-07-30 17:08:50 -0400 |
---|---|---|
committer | monikahedman <monika_hedman@brown.edu> | 2019-07-30 17:08:50 -0400 |
commit | a511218a8e02f154ff1a580ef14d10db83dc7351 (patch) | |
tree | c39ce1efc8956473df955a8cac388750365fcb4c | |
parent | c80dd97ef4b859f9b7af2e6c7b2ba0d9d039e2f5 (diff) |
final changes hopefully
-rw-r--r-- | src/client/views/search/FilterBox.scss | 14 | ||||
-rw-r--r-- | src/client/views/search/FilterBox.tsx | 47 | ||||
-rw-r--r-- | src/client/views/search/IconButton.scss | 3 | ||||
-rw-r--r-- | src/client/views/search/IconButton.tsx | 5 | ||||
-rw-r--r-- | src/client/views/search/RequiredWordsFilters.tsx | 37 |
5 files changed, 16 insertions, 90 deletions
diff --git a/src/client/views/search/FilterBox.scss b/src/client/views/search/FilterBox.scss index d9eddd383..b2b452419 100644 --- a/src/client/views/search/FilterBox.scss +++ b/src/client/views/search/FilterBox.scss @@ -100,6 +100,7 @@ -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; + text-align: center; } } } @@ -110,14 +111,15 @@ padding-top: 10px; } - .any-filter, .save-filter, - .reset-filter { - background-color: rgb(194, 194, 197); + .reset-filter, + .all-filter { + background-color: gray; } - .all-filter { - background-color: rgb(194, 194, 197); - margin-left: 15px; + .save-filter:hover, + .reset-filter:hover, + .all-filter:hover { + background-color: $darker-alt-accent; } }
\ No newline at end of file diff --git a/src/client/views/search/FilterBox.tsx b/src/client/views/search/FilterBox.tsx index 740e68118..ba193df5a 100644 --- a/src/client/views/search/FilterBox.tsx +++ b/src/client/views/search/FilterBox.tsx @@ -9,17 +9,14 @@ import { Id } from '../../../new_fields/FieldSymbols'; import { DocumentType } from '../../documents/Documents'; import { Cast, StrCast } from '../../../new_fields/Types'; import * as _ from "lodash"; -import { ToggleBar } from './ToggleBar'; import { IconBar } from './IconBar'; import { FieldFilters } from './FieldFilters'; import { SelectionManager } from '../../util/SelectionManager'; import { DocumentView } from '../nodes/DocumentView'; import { CollectionFilters } from './CollectionFilters'; -// import { NaviconButton } from './NaviconButton'; import * as $ from 'jquery'; import "./FilterBox.scss"; import { SearchBox } from './SearchBox'; -import { RequiredWordsFilter } from './RequiredWordsFilters'; library.add(faTimes); @@ -117,12 +114,9 @@ export class FilterBox extends React.Component { @action.bound resetFilters = () => { - ToggleBar.Instance.resetToggle(); - // RequiredWordsFilter.Instance.resetRequiredFieldFilters(); this._basicWordStatus = true; IconBar.Instance.selectAll(); FieldFilters.Instance.resetFieldFilters(); - CollectionFilters.Instance.resetCollectionFilters(); } basicRequireWords(query: string): string { @@ -273,10 +267,9 @@ export class FilterBox extends React.Component { //if true, any keywords can be used. if false, all keywords are required. @action.bound - handleWordQueryChange = () => { this._basicWordStatus = !this._basicWordStatus; } - - @action.bound - getBasicWordStatus() { return this._basicWordStatus; } + handleWordQueryChange = () => { + this._basicWordStatus = !this._basicWordStatus; + } @action.bound updateIcon(newArray: string[]) { this._icons = newArray; } @@ -294,18 +287,6 @@ export class FilterBox extends React.Component { 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 updateAnyKeywordStatus(newStat: boolean) { this._anyKeywordStatus = newStat; } @@ -361,40 +342,20 @@ export class FilterBox extends React.Component { <div className="filter-div"> <div className="filter-header"> <div className='filter-title words'>Required words</div> - {/* <div style={{ marginLeft: "auto" }}><NaviconButton onClick={this.toggleWordStatusOpen} /></div> */} </div> <div className="filter-panel" > - <button className="any-filter" onClick={this.getBasicWordStatus}>Include Any Keywords</button> <button className="all-filter" onClick={this.handleWordQueryChange}>Include All Keywords</button> - {/* <ToggleBar handleChange={this.handleWordQueryChange} getStatus={this.getBasicWordStatus} - originalStatus={this._basicWordStatus} optionOne={"Include Any Keywords"} optionTwo={"Include All Keywords"} /> */} </div> - {/* <div className="filter-panel" > - <RequiredWordsFilter - anyKeywordStatus={this._anyKeywordStatus} allKeywordStatus={this._allKeywordStatus} - updateAnyKeywordStatus={this.updateAnyKeywordStatus} updateAllKeywordStatus={this.updateAllKeywordStatus} /> - </div> */} </div> <div className="filter-div"> <div className="filter-header"> <div className="filter-title icon">Filter by type of node</div> - {/* <div style={{ marginLeft: "auto" }}><NaviconButton onClick={this.toggleTypeOpen} /></div> */} </div> <div className="filter-panel"><IconBar /></div> </div> - {/* <div className="filter-div"> - <div className="filter-header"> - <div className='filter-title collection'>Search in current collections</div> - <div style={{ marginLeft: "auto" }}><NaviconButton onClick={this.toggleColOpen} /></div> - </div> - <div className="filter-panel"><CollectionFilters - updateCollectionStatus={this.updateCollectionStatus} updateParentCollectionStatus={this.updateParentCollectionStatus} updateSelfCollectionStatus={this.updateSelfCollectionStatus} - collectionStatus={this._collectionStatus} collectionParentStatus={this._collectionParentStatus} collectionSelfStatus={this._collectionSelfStatus} /></div> - </div> */} <div className="filter-div"> <div className="filter-header"> <div className="filter-title field">Filter by Basic Keys</div> - {/* <div style={{ marginLeft: "auto" }}><NaviconButton onClick={this.toggleFieldOpen} /></div> */} </div> <div className="filter-panel"><FieldFilters titleFieldStatus={this._titleFieldStatus} dataFieldStatus={this._deletedDocsStatus} authorFieldStatus={this._authorFieldStatus} @@ -402,8 +363,6 @@ export class FilterBox extends React.Component { </div> </div> <div className="filter-buttons" style={{ display: "flex", justifyContent: "space-around" }}> - {/* <button className="minimize-filter" onClick={this.minimizeAll}>Minimize All</button> - <button className="advanced-filter" >Advanced Filters</button> */} <button className="save-filter" >Save Filters</button> <button className="reset-filter" onClick={this.resetFilters}>Reset Filters</button> </div> diff --git a/src/client/views/search/IconButton.scss b/src/client/views/search/IconButton.scss index 1abf7e6d9..d1853177e 100644 --- a/src/client/views/search/IconButton.scss +++ b/src/client/views/search/IconButton.scss @@ -11,7 +11,8 @@ height: 30px; width: 30px; color: $light-color; - background-color: rgb(194, 194, 197); + // background-color: rgb(194, 194, 197); + background-color: gray; border-radius: 50%; display: flex; justify-content: center; diff --git a/src/client/views/search/IconButton.tsx b/src/client/views/search/IconButton.tsx index bfe2c7d0b..5d23f6eeb 100644 --- a/src/client/views/search/IconButton.tsx +++ b/src/client/views/search/IconButton.tsx @@ -13,6 +13,7 @@ import { IconBar } from './IconBar'; import { props } from 'bluebird'; import { FilterBox } from './FilterBox'; import { Search } from '../../../server/Search'; +import { gravity } from 'sharp'; library.add(faSearch); library.add(faObjectGroup); @@ -123,11 +124,11 @@ export class IconButton extends React.Component<IconButtonProps>{ selected = { opacity: 1, - backgroundColor: "#c2c2c5" //$alt-accent + backgroundColor: "rgb(128, 128, 128)" }; notSelected = { - opacity: 0.6, + opacity: 0.2, }; hoverStyle = { diff --git a/src/client/views/search/RequiredWordsFilters.tsx b/src/client/views/search/RequiredWordsFilters.tsx deleted file mode 100644 index 23ac6a9aa..000000000 --- a/src/client/views/search/RequiredWordsFilters.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import * as React from 'react'; -import { observable } from 'mobx'; -import { CheckBox } from './CheckBox'; -import "./FieldFilters.scss"; - -export interface RequiredWordsFilterProps { - anyKeywordStatus: boolean; - allKeywordStatus: boolean; - updateAnyKeywordStatus(stat: boolean): void; - updateAllKeywordStatus(stat: boolean): void; -} - -export class RequiredWordsFilter extends React.Component<RequiredWordsFilterProps> { - - static Instance: RequiredWordsFilter; - - @observable public _resetBoolean = false; - @observable public _resetCounter: number = 0; - - constructor(props: RequiredWordsFilterProps) { - super(props); - RequiredWordsFilter.Instance = this; - } - - resetRequiredFieldFilters() { - this._resetBoolean = true; - } - - render() { - return ( - <div className="field-filters-required"> - <CheckBox default={true} numCount={2} parent={this} originalStatus={this.props.anyKeywordStatus} updateStatus={this.props.updateAnyKeywordStatus} title={"Include Any Keywords"} /> - <CheckBox default={true} numCount={2} parent={this} originalStatus={this.props.allKeywordStatus} updateStatus={this.props.updateAllKeywordStatus} title={"Include All Keywords"} /> - </div> - ); - } -}
\ No newline at end of file |