diff options
Diffstat (limited to 'webapp/components')
-rw-r--r-- | webapp/components/channel_header.jsx | 7 | ||||
-rw-r--r-- | webapp/components/search_bar.jsx | 32 | ||||
-rw-r--r-- | webapp/components/search_results.jsx | 2 |
3 files changed, 33 insertions, 8 deletions
diff --git a/webapp/components/channel_header.jsx b/webapp/components/channel_header.jsx index 9be2d5b58..01e1e98cf 100644 --- a/webapp/components/channel_header.jsx +++ b/webapp/components/channel_header.jsx @@ -765,7 +765,12 @@ export default class ChannelHeader extends React.Component { <th className='header-list__members'> {popoverListMembers} </th> - <th className='search-bar__container'><NavbarSearchBox showMentionFlagBtns={false}/></th> + <th className='search-bar__container'> + <NavbarSearchBox + showMentionFlagBtns={false} + isFocus={Utils.isMobile()} + /> + </th> <th> <div className='dropdown channel-header__links search-btns'> <OverlayTrigger diff --git a/webapp/components/search_bar.jsx b/webapp/components/search_bar.jsx index 4296d6da9..1c9f607e6 100644 --- a/webapp/components/search_bar.jsx +++ b/webapp/components/search_bar.jsx @@ -54,6 +54,12 @@ export default class SearchBar extends React.Component { componentDidMount() { SearchStore.addSearchTermChangeListener(this.onListenerChange); this.mounted = true; + + if (Utils.isMobile()) { + setTimeout(() => { + document.querySelector('.app__body .sidebar--menu').classList.remove('visible'); + }); + } } componentWillUnmount() { @@ -76,6 +82,12 @@ export default class SearchBar extends React.Component { handleClose(e) { e.preventDefault(); + if (Utils.isMobile()) { + setTimeout(() => { + document.querySelector('.app__body .sidebar--menu').classList.add('visible'); + }); + } + AppDispatcher.handleServerAction({ type: ActionTypes.RECEIVED_SEARCH, results: null @@ -261,7 +273,7 @@ export default class SearchBar extends React.Component { ); } - let clearClass = 'sidebar__clear-icon'; + let clearClass = 'sidebar__search-clear'; if (!this.state.isSearching && this.state.searchTerm && this.state.searchTerm.trim() !== '') { clearClass += ' visible'; } @@ -295,13 +307,19 @@ export default class SearchBar extends React.Component { listComponent={SearchSuggestionList} providers={this.suggestionProviders} type='search' + autoFocus={this.props.isFocus} /> - <span + <div className={clearClass} onClick={this.handleClear} > - <i className='fa fa-times'/> - </span> + <span + className='sidebar__search-clear-x' + aria-hidden='true' + > + {'×'} + </span> + </div> {isSearching} {this.renderHintPopover(helpClass)} </form> @@ -314,10 +332,12 @@ export default class SearchBar extends React.Component { } SearchBar.defaultProps = { - showMentionFlagBtns: true + showMentionFlagBtns: true, + isFocus: false }; SearchBar.propTypes = { showMentionFlagBtns: React.PropTypes.bool, - isCommentsPage: React.PropTypes.bool + isCommentsPage: React.PropTypes.bool, + isFocus: React.PropTypes.bool }; diff --git a/webapp/components/search_results.jsx b/webapp/components/search_results.jsx index 86d1bac1d..4c0105738 100644 --- a/webapp/components/search_results.jsx +++ b/webapp/components/search_results.jsx @@ -171,7 +171,7 @@ export default class SearchResults extends React.Component { var currentId = UserStore.getCurrentId(); var searchForm = null; if (currentId) { - searchForm = <SearchBox/>; + searchForm = <SearchBox isFocus={Utils.isMobile()}/>; } var noResults = (!results || !results.order || !results.order.length); const searchTerm = this.state.searchTerm; |