diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/views/search/IconButton.tsx | 34 | ||||
| -rw-r--r-- | src/client/views/search/SearchBox.tsx | 9 | ||||
| -rw-r--r-- | src/client/views/search/ToggleBar.tsx | 9 |
3 files changed, 28 insertions, 24 deletions
diff --git a/src/client/views/search/IconButton.tsx b/src/client/views/search/IconButton.tsx index a684944d7..1894332a1 100644 --- a/src/client/views/search/IconButton.tsx +++ b/src/client/views/search/IconButton.tsx @@ -50,12 +50,14 @@ export class IconButton extends React.Component<IconButtonProps>{ () => IconBar.Instance.ResetClicked, () => { if (IconBar.Instance.ResetClicked) { - this.reset(); - IconBar.Instance.Reset++; - if (IconBar.Instance.Reset === 9) { - IconBar.Instance.Reset = 0; - IconBar.Instance.ResetClicked = false; - } + runInAction(() => { + this.reset(); + IconBar.Instance.Reset++; + if (IconBar.Instance.Reset === 9) { + IconBar.Instance.Reset = 0; + IconBar.Instance.ResetClicked = false; + } + }) } }, ) @@ -63,12 +65,14 @@ export class IconButton extends React.Component<IconButtonProps>{ () => IconBar.Instance.SelectAllClicked, () => { if (IconBar.Instance.SelectAllClicked) { - this.select(); - IconBar.Instance.Select++; - if (IconBar.Instance.Select === 9) { - IconBar.Instance.Select = 0; - IconBar.Instance.SelectAllClicked = false; - } + runInAction(() => { + this.select(); + IconBar.Instance.Select++; + if (IconBar.Instance.Select === 9) { + IconBar.Instance.Select = 0; + IconBar.Instance.SelectAllClicked = false; + } + }) } }, ) @@ -106,11 +110,11 @@ export class IconButton extends React.Component<IconButtonProps>{ onClick = () => { let newList: string[] = SearchBox.Instance.getIcons(); - if(!this.isSelected){ + if (!this.isSelected) { this.isSelected = true; newList.push(this.props.type) } - else{ + else { this.isSelected = false; _.pull(newList, this.props.type) } @@ -186,7 +190,7 @@ export class IconButton extends React.Component<IconButtonProps>{ onMouseLeave={this.onMouseLeave} onClick={this.onClick}> <div className="type-icon" id={this.props.type + "-icon"} - style = {this.hover ? this.hoverStyle : this.isSelected ? this.selected : this.notSelected} + style={this.hover ? this.hoverStyle : this.isSelected ? this.selected : this.notSelected} > {this.getFA()} </div> diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index 12c21a4e5..755d6a14c 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -116,9 +116,6 @@ export class SearchBox extends React.Component { this._results = results; this._openNoResults = true; }); - - //clears searchstring after search - may not be preferred - this._searchString = ""; } @action @@ -238,10 +235,16 @@ export class SearchBox extends React.Component { } //if true, any keywords can be used. if false, all keywords are required. + @action.bound handleWordQueryChange = () => { this._basicWordStatus = !this._basicWordStatus; } + @action + getBasicWordStatus() { + return this._basicWordStatus; + } + @action.bound updateIcon(newArray: string[]) { this._icons = newArray; diff --git a/src/client/views/search/ToggleBar.tsx b/src/client/views/search/ToggleBar.tsx index b12ef4429..0fee81e20 100644 --- a/src/client/views/search/ToggleBar.tsx +++ b/src/client/views/search/ToggleBar.tsx @@ -19,7 +19,6 @@ 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); @@ -71,7 +70,6 @@ export class ToggleBar extends React.Component<ToggleBarProps>{ @action.bound onclick() { - this._curStatus = !this._curStatus; this.forwardTimeline.play(); this.forwardTimeline.reverse(); SearchBox.Instance.handleWordQueryChange(); @@ -79,11 +77,10 @@ export class ToggleBar extends React.Component<ToggleBarProps>{ @action.bound public resetToggle = () => { - if (!this._curStatus) { + if (!SearchBox.Instance.getBasicWordStatus()) { this.forwardTimeline.play() this.forwardTimeline.reverse(); SearchBox.Instance.handleWordQueryChange(); - this._curStatus = true; } } @@ -91,8 +88,8 @@ export class ToggleBar extends React.Component<ToggleBarProps>{ return ( <div> <div className="toggle-title"> - <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 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> <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} /> |