diff options
author | Corey Hulen <corey@hulen.com> | 2015-10-22 21:38:49 -0700 |
---|---|---|
committer | Corey Hulen <corey@hulen.com> | 2015-10-22 21:38:49 -0700 |
commit | 2dd28dbb5ff61aeafab7c47e864e8b7253c6b244 (patch) | |
tree | 1b3ffafcc8ac5c8fcecc802c8b52b987dae3e356 /web | |
parent | 22d7f0f11607e74acdb642eba455a33489c9cd58 (diff) | |
parent | 47d519927a66c9e8e39b81f6f0f22f992648cdee (diff) | |
download | chat-2dd28dbb5ff61aeafab7c47e864e8b7253c6b244.tar.gz chat-2dd28dbb5ff61aeafab7c47e864e8b7253c6b244.tar.bz2 chat-2dd28dbb5ff61aeafab7c47e864e8b7253c6b244.zip |
Merge pull request #1145 from hmhealey/plt719
PLT-719 Added help popover to search box
Diffstat (limited to 'web')
-rw-r--r-- | web/react/components/search_bar.jsx | 33 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_popover.scss | 19 |
2 files changed, 51 insertions, 1 deletions
diff --git a/web/react/components/search_bar.jsx b/web/react/components/search_bar.jsx index 2e9764bd9..bf12ca160 100644 --- a/web/react/components/search_bar.jsx +++ b/web/react/components/search_bar.jsx @@ -8,6 +8,7 @@ var AppDispatcher = require('../dispatcher/app_dispatcher.jsx'); var utils = require('../utils/utils.jsx'); var Constants = require('../utils/constants.jsx'); var ActionTypes = Constants.ActionTypes; +var Tooltip = ReactBootstrap.Tooltip; export default class SearchBar extends React.Component { constructor() { @@ -16,10 +17,14 @@ export default class SearchBar extends React.Component { this.onListenerChange = this.onListenerChange.bind(this); this.handleUserInput = this.handleUserInput.bind(this); + this.handleUserFocus = this.handleUserFocus.bind(this); + this.handleUserBlur = this.handleUserBlur.bind(this); this.performSearch = this.performSearch.bind(this); this.handleSubmit = this.handleSubmit.bind(this); - this.state = this.getSearchTermStateFromStores(); + const state = this.getSearchTermStateFromStores(); + state.focused = false; + this.state = state; } getSearchTermStateFromStores() { var term = PostStore.getSearchTerm() || ''; @@ -78,9 +83,14 @@ export default class SearchBar extends React.Component { handleMouseInput(e) { e.preventDefault(); } + handleUserBlur() { + this.setState({focused: false}); + } handleUserFocus(e) { e.target.select(); $('.search-bar__container').addClass('focused'); + + this.setState({focused: true}); } performSearch(terms, isMentionSearch) { if (terms.length) { @@ -115,6 +125,12 @@ export default class SearchBar extends React.Component { if (this.state.isSearching) { isSearching = <span className={'glyphicon glyphicon-refresh glyphicon-refresh-animate'}></span>; } + + let helpClass = 'search-help-popover'; + if (!this.state.searchTerm && this.state.focused) { + helpClass += ' visible'; + } + return ( <div> <div @@ -142,10 +158,25 @@ export default class SearchBar extends React.Component { placeholder='Search' value={this.state.searchTerm} onFocus={this.handleUserFocus} + onBlur={this.handleUserBlur} onChange={this.handleUserInput} onMouseUp={this.handleMouseInput} /> {isSearching} + <Tooltip + placement='bottom' + className={helpClass} + > + <h4>{'Search Options'}</h4> + <ul> + <li> + <span>{'Use '}</span><b>{'"quotation marks"'}</b><span>{' to search for phrases'}</span> + </li> + <li> + <span>{'Use '}</span><b>{'from:'}</b><span>{' to find posts from specific users and '}</span><b>{'in:'}</b><span>{' to find posts in specific channels'}</span> + </li> + </ul> + </Tooltip> </form> </div> ); diff --git a/web/sass-files/sass/partials/_popover.scss b/web/sass-files/sass/partials/_popover.scss index 126d239ec..c389ddf7d 100644 --- a/web/sass-files/sass/partials/_popover.scss +++ b/web/sass-files/sass/partials/_popover.scss @@ -20,3 +20,22 @@ display: block; } +.search-help-popover { + transition: opacity 0.3s; + + h4 { + text-align: left; + } + ul { + padding-left: 2em; + text-align: left; + } + .tooltip-inner { + max-width: 100%; + } +} + +.search-help-popover.visible { + opacity: 100; + transition: opacity 0.3s; +} |