diff options
| author | madelinegr <monika_hedman@brown.edu> | 2019-06-11 15:28:51 -0400 |
|---|---|---|
| committer | madelinegr <monika_hedman@brown.edu> | 2019-06-11 15:28:51 -0400 |
| commit | fc1290b614eeda0f99bb857b1a264dc0fc344674 (patch) | |
| tree | 84cc7859f9d50d347d323a31585ebf87536d0b11 | |
| parent | 5c3580902a63f7321c08065188f42c1874d399ad (diff) | |
big icon changes coming
| -rw-r--r-- | src/client/views/search/SearchBox.tsx | 1 | ||||
| -rw-r--r-- | src/client/views/search/ToggleBar.scss | 4 | ||||
| -rw-r--r-- | src/client/views/search/ToggleBar.tsx | 6 |
3 files changed, 9 insertions, 2 deletions
diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index 836062af6..e9146a6d1 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -255,6 +255,7 @@ export class SearchBox extends React.Component { temp for filtering where in doc the keywords are found </div> </div> + <button className = "reset-filter">Reset Filters</button> </div> ) : undefined} </div> diff --git a/src/client/views/search/ToggleBar.scss b/src/client/views/search/ToggleBar.scss index cccbf30fc..caae354ee 100644 --- a/src/client/views/search/ToggleBar.scss +++ b/src/client/views/search/ToggleBar.scss @@ -12,6 +12,10 @@ .toggle-option{ width: 100px; text-align: 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; } } diff --git a/src/client/views/search/ToggleBar.tsx b/src/client/views/search/ToggleBar.tsx index f3a1a3171..7dbb3b767 100644 --- a/src/client/views/search/ToggleBar.tsx +++ b/src/client/views/search/ToggleBar.tsx @@ -19,6 +19,7 @@ export class ToggleBar extends React.Component<ToggleBarProps>{ @observable forwardTimeline: anime.AnimeTimelineInstance; @observable _toggleButton: React.RefObject<HTMLDivElement>; @observable _originalStatus: boolean = this.props.originalStatus; + @observable _curStatus: boolean = this.props.originalStatus; constructor(props: ToggleBarProps) { super(props); @@ -69,6 +70,7 @@ export class ToggleBar extends React.Component<ToggleBarProps>{ @action.bound onclick() { + this._curStatus = !this._curStatus; this.forwardTimeline.play(); this.forwardTimeline.reverse(); this.props.changeStatus(); @@ -78,8 +80,8 @@ export class ToggleBar extends React.Component<ToggleBarProps>{ return ( <div> <div className="toggle-title"> - <div className="toggle-option">{this.props.optionOne}</div> - <div className="toggle-option">{this.props.optionTwo}</div> + <div className="toggle-option" style = {{ opacity: (this._curStatus ? 1:.4)}}>{this.props.optionOne}</div> + <div className="toggle-option" style = {{ opacity: (this._curStatus ? .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} /> |