diff options
| -rw-r--r-- | src/client/views/search/CollectionFilters.tsx | 1 | ||||
| -rw-r--r-- | src/client/views/search/FieldFilters.tsx | 1 | ||||
| -rw-r--r-- | src/client/views/search/IconBar.tsx | 1 | ||||
| -rw-r--r-- | src/client/views/search/NaviconButton.scss | 18 | ||||
| -rw-r--r-- | src/client/views/search/NaviconButton.tsx | 39 | ||||
| -rw-r--r-- | src/client/views/search/SearchBox.scss | 26 | ||||
| -rw-r--r-- | src/client/views/search/SearchBox.tsx | 97 | ||||
| -rw-r--r-- | src/client/views/search/SearchItem.scss | 2 |
8 files changed, 89 insertions, 96 deletions
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<CollectionFilterProps> { render() { return ( <div> - <div className='collection-title'>Search in current collections</div> <div className="collection-filters"> <div className="collection-filters main"> <CheckBox default={false} title={"limit to current collection"} parent={this} numCount={3} updateStatus={this.updateColStat} originalStatus={this.props.collectionStatus} /> 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<FieldFilterProps> { render() { return ( <div> - <div className="filter field-title">Filter by Basic Keys</div> <CheckBox default = {true} numCount={3} parent={this} originalStatus={this.props.titleFieldStatus} updateStatus={this.props.updateTitleStatus} title={Keys.TITLE} /> <CheckBox default = {true} numCount={3} parent={this} originalStatus={this.props.authorFieldStatus} updateStatus={this.props.updateAuthorStatus} title={Keys.AUTHOR} /> <CheckBox default = {true} numCount={3} parent={this} originalStatus={this.props.dataFieldStatus} updateStatus={this.props.updateDataStatus} title={Keys.DATA} /> 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 ( <div> - <div className="filter icon-title">Filter by type of node</div> <div className="filter icon-bar"> <div className="filter type-outer"> <div className={"type-icon none not-selected"} diff --git a/src/client/views/search/NaviconButton.scss b/src/client/views/search/NaviconButton.scss index 529f11a57..d26d67de2 100644 --- a/src/client/views/search/NaviconButton.scss +++ b/src/client/views/search/NaviconButton.scss @@ -1,12 +1,6 @@ @import "../globalCssVariables"; - -@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700); - -// $background: #3d566e; -$color: #ecf0f1; - -$height-icon: 20px; +$height-icon: 15px; $width-line: 30px; $height-line: 4px; @@ -15,14 +9,6 @@ $rotation: 45deg; $translateY: ($height-icon / 2); $translateX: 0; -// body { -// background: $background; -// color: $color; -// font-family: 'Montserrat', sans-serif; -// -webkit-font-smoothing: antialiased; -// text-align:center; -// } - #hamburger-icon { width:$width-line; height:$height-icon; @@ -32,7 +18,7 @@ $translateX: 0; .line { display:block; - background:$color; + background:$alt-accent; width:$width-line; height:$height-line; position:absolute; diff --git a/src/client/views/search/NaviconButton.tsx b/src/client/views/search/NaviconButton.tsx index aa9e627c0..d89874453 100644 --- a/src/client/views/search/NaviconButton.tsx +++ b/src/client/views/search/NaviconButton.tsx @@ -2,23 +2,48 @@ import * as React from 'react'; import { observer } from 'mobx-react'; import "./NaviconButton.scss"; import * as $ from 'jquery'; +import { observable } from 'mobx'; export class NaviconButton extends React.Component { + @observable ref: React.RefObject<HTMLAnchorElement> = 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 ( - <a id="hamburger-icon" href="#" title="Menu"> + <a id="hamburger-icon" href="#" ref = {this.ref} title="Menu"> <span className="line line-1"></span> <span className="line line-2"></span> <span className="line line-3"></span> 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 { </div> {this._filterOpen ? ( <div className="filter-form" onPointerDown={this.stopProp} id="filter" style={this._filterOpen ? { display: "flex" } : { display: "none" }}> - <div className="filter-form filter-div" id="header">Filter Search Results</div> - <div className="filter-form " id="option"> + <div id="header">Filter Search Results</div> + <div> <div className="required-words filter-div"> + <div className = "filter-header"> + <div className='filter-title words'>Required words</div> + <a style = {{marginLeft: "auto"}}><NaviconButton/></a> + </div> <ToggleBar originalStatus={this._basicWordStatus} optionOne={"Include Any Keywords"} optionTwo={"Include All Keywords"} /> </div> - <div className="type-of-node filter-div"> + <div className="filter-div"> + <div className = "filter-header"> + <div className="filter-title icon">Filter by type of node</div> + <a style = {{marginLeft: "auto"}}><NaviconButton/></a> + </div> <IconBar /> </div> - <div className="filter-collection filter-div"> - <CollectionFilters - updateCollectionStatus = {this.updateCollectionStatus} updateParentCollectionStatus = {this.updateParentCollectionStatus} updateSelfCollectionStatus = {this.updateSelfCollectionStatus} - collectionStatus = {this.collectionStatus} collectionParentStatus = {this.collectionParentStatus} collectionSelfStatus = {this.collectionSelfStatus}/> + <div className="filter-div"> + <div className = "filter-header"> + <div className='filter-title collection'>Search in current collections</div> + <a style = {{marginLeft: "auto"}}><NaviconButton/></a> + </div> + <CollectionFilters + updateCollectionStatus={this.updateCollectionStatus} updateParentCollectionStatus={this.updateParentCollectionStatus} updateSelfCollectionStatus={this.updateSelfCollectionStatus} + collectionStatus={this.collectionStatus} collectionParentStatus={this.collectionParentStatus} collectionSelfStatus={this.collectionSelfStatus} /> </div> - <div className="where-in-doc filter-div"> - <FieldFilters - titleFieldStatus={this.titleFieldStatus} dataFieldStatus={this.dataFieldStatus} authorFieldStatus={this.authorFieldStatus} + <div className="filter-div"> + <div className = "filter-header"> + <div className="filter-title field">Filter by Basic Keys</div> + <a style = {{marginLeft: "auto"}}><NaviconButton/></a> + </div> + <FieldFilters + titleFieldStatus={this.titleFieldStatus} dataFieldStatus={this.dataFieldStatus} authorFieldStatus={this.authorFieldStatus} updateAuthorStatus={this.updateAuthorStatus} updateDataStatus={this.updateDataStatus} updateTitleStatus={this.updateTitleStatus} /> </div> </div> - <button className="reset-filter" onClick={this.resetFilters}>Reset Filters</button> + <button className="filter-div reset-filter" onClick={this.resetFilters}>Reset Filters</button> </div> ) : undefined} </div> 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; } |