diff options
| -rw-r--r-- | src/client/views/search/NaviconButton.scss | 52 | ||||
| -rw-r--r-- | src/client/views/search/NaviconButton.tsx | 2 | ||||
| -rw-r--r-- | src/client/views/search/SearchBox.scss | 56 | ||||
| -rw-r--r-- | src/client/views/search/SearchBox.tsx | 90 | ||||
| -rw-r--r-- | src/client/views/search/ToggleBar.tsx | 14 |
5 files changed, 139 insertions, 75 deletions
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<NaviconProps> { 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 { </div> {this._filterOpen ? ( <div className="filter-form" onPointerDown={this.stopProp} id="filter" style={this._filterOpen ? { display: "flex" } : { display: "none" }}> - <div style={{ display: "flex", width: "100%"}}> + <div style={{ display: "flex", width: "100%" }}> <div id="header">Filter Search Results</div> - <div className = "close-icon" onClick = {this.closeFilter}><FontAwesomeIcon className="fontawesome-icon" icon={faTimes} size = "2x"/></div> + <div className="close-icon" onClick={this.closeFilter}> + <span className="line line-1"></span> + <span className="line line-2"></span></div> </div> <div> <div className="filter-div"> @@ -502,9 +543,9 @@ export class SearchBox extends React.Component { <div style={{ marginLeft: "auto" }}><NaviconButton onClick={this.toggleWordStatusOpen} /></div> </div> <div className="filter-panel" > - <ToggleBar - originalStatus={this._basicWordStatus} optionOne={"Include Any Keywords"} optionTwo={"Include All Keywords"} /> - </div> + <ToggleBar handleChange={this.handleWordQueryChange} getStatus={this.getBasicWordStatus} + originalStatus={this._basicWordStatus} optionOne={"Include Any Keywords"} optionTwo={"Include All Keywords"} /> + </div> </div> <div className="filter-div"> <div className="filter-header"> @@ -532,7 +573,12 @@ export class SearchBox extends React.Component { updateAuthorStatus={this.updateAuthorStatus} updateDataStatus={this.updateDataStatus} updateTitleStatus={this.updateTitleStatus} /> </div> </div> </div> - <button className="filter-div reset-filter" onClick={this.resetFilters}>Reset Filters</button> + <div className="filter-buttons" style={{ display: "flex", justifyContent: "space-around" }}> + <button className="minimizwe-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> </div> ) : undefined} </div> 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<ToggleBarProps>{ 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<ToggleBarProps>{ return ( <div> <div className="toggle-title"> - <div className="toggle-option" style={{ opacity: (SearchBox.Instance.getBasicWordStatus() ? 1 : .4) }}>{this.props.optionOne}</div> - <div className="toggle-option" style={{ opacity: (SearchBox.Instance.getBasicWordStatus() ? .4 : 1) }}>{this.props.optionTwo}</div> + <div className="toggle-option" style={{ opacity: (this.props.getStatus() ? 1 : .4) }}>{this.props.optionOne}</div> + <div className="toggle-option" style={{ opacity: (this.props.getStatus() ? .4 : 1) }}>{this.props.optionTwo}</div> </div> <div className="toggle-bar" id="toggle-bar" style={{ flexDirection: (this._originalStatus ? "row" : "row-reverse") }}> <div className="toggle-button" id="toggle-button" ref={this._toggleButton} onClick={this.onclick} /> |