diff options
author | Asaad Mahmood <asaadmahmood@users.noreply.github.com> | 2017-01-04 23:40:51 +0500 |
---|---|---|
committer | Corey Hulen <corey@hulen.com> | 2017-01-04 13:40:51 -0500 |
commit | 3e7a59b7b9c6289d71551eedc763188c2a99f6e5 (patch) | |
tree | cb1eec4b847816c4b82225c5025e0c6e9925f647 /webapp/components | |
parent | be5aa0398b254c37a0fae143c0e26a43d5004468 (diff) | |
download | chat-3e7a59b7b9c6289d71551eedc763188c2a99f6e5.tar.gz chat-3e7a59b7b9c6289d71551eedc763188c2a99f6e5.tar.bz2 chat-3e7a59b7b9c6289d71551eedc763188c2a99f6e5.zip |
Minor UI improvements (#4959)
* PLT-5128 - Fixing channel header responsively
* PLT-4984 - Fixing search popover behaviour
Diffstat (limited to 'webapp/components')
-rw-r--r-- | webapp/components/search_bar.jsx | 50 |
1 files changed, 31 insertions, 19 deletions
diff --git a/webapp/components/search_bar.jsx b/webapp/components/search_bar.jsx index cfd9b0c73..bea722243 100644 --- a/webapp/components/search_bar.jsx +++ b/webapp/components/search_bar.jsx @@ -193,6 +193,19 @@ export default class SearchBar extends React.Component { </Tooltip> ); + const searchPopover = ( + <Popover + id='searchbar-help-popup' + placement='bottom' + className={helpClass} + > + <FormattedHTMLMessage + id='search_bar.usage' + defaultMessage='<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>' + /> + </Popover> + ); + const flaggedTooltip = ( <Tooltip id='flaggedTooltip'> <FormattedMessage @@ -276,29 +289,28 @@ export default class SearchBar extends React.Component { autoComplete='off' > <span className='fa fa-search sidebar__search-icon'/> - <SuggestionBox - ref='search' - className='form-control search-bar' - placeholder={Utils.localizeMessage('search_bar.search', 'Search')} - value={this.state.searchTerm} - onFocus={this.handleUserFocus} - onBlur={this.handleUserBlur} - onChange={this.handleChange} - listComponent={SearchSuggestionList} - providers={this.suggestionProviders} - type='search' - /> - {isSearching} - <Popover - id='searchbar-help-popup' + <OverlayTrigger + delayShow={Constants.OVERLAY_TIME_DELAY_SMALL} placement='bottom' + overlay={searchPopover} + trigger='focus' + rootClose={true} className={helpClass} > - <FormattedHTMLMessage - id='search_bar.usage' - defaultMessage='<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>' + <SuggestionBox + ref='search' + className='form-control search-bar' + placeholder={Utils.localizeMessage('search_bar.search', 'Search')} + value={this.state.searchTerm} + onFocus={this.handleUserFocus} + onBlur={this.handleUserBlur} + onChange={this.handleChange} + listComponent={SearchSuggestionList} + providers={this.suggestionProviders} + type='search' /> - </Popover> + </OverlayTrigger> + {isSearching} </form> {mentionBtn} |