diff options
author | khawerrind <khawer.zeshan@gmail.com> | 2016-12-22 22:21:16 +0500 |
---|---|---|
committer | enahum <nahumhbl@gmail.com> | 2016-12-22 14:21:16 -0300 |
commit | c9eb23a3d44c96042522bf7cdefc65903eb1d0a3 (patch) | |
tree | 604f6b626503ee007efd4d46063f66280ed4754b /webapp/components/search_bar.jsx | |
parent | a857cf18f4809ab5fbff4956b42430e5eeddb54e (diff) | |
download | chat-c9eb23a3d44c96042522bf7cdefc65903eb1d0a3.tar.gz chat-c9eb23a3d44c96042522bf7cdefc65903eb1d0a3.tar.bz2 chat-c9eb23a3d44c96042522bf7cdefc65903eb1d0a3.zip |
PLT-3782 Do not move the "@" sign and flag icon to the left of search bar when opening the right hand sidebar (#4850)
* do not move the mention & flag button to the left of the search box when in search mode
* fixed the margin & padding issues of the search box
* fixed the member icon positioning issue and the expanded sidebar toggle issue
* fixed remaining bugs when sidebar is in expanded mode
* changed propTypes from func to bool
Diffstat (limited to 'webapp/components/search_bar.jsx')
-rw-r--r-- | webapp/components/search_bar.jsx | 107 |
1 files changed, 105 insertions, 2 deletions
diff --git a/webapp/components/search_bar.jsx b/webapp/components/search_bar.jsx index 3ddc192d9..cfd9b0c73 100644 --- a/webapp/components/search_bar.jsx +++ b/webapp/components/search_bar.jsx @@ -5,7 +5,9 @@ import $ from 'jquery'; import ReactDOM from 'react-dom'; import Client from 'client/web_client.jsx'; import * as AsyncClient from 'utils/async_client.jsx'; +import * as GlobalActions from 'actions/global_actions.jsx'; import SearchStore from 'stores/search_store.jsx'; +import UserStore from 'stores/user_store.jsx'; import AppDispatcher from '../dispatcher/app_dispatcher.jsx'; import SuggestionBox from './suggestion/suggestion_box.jsx'; import SearchChannelProvider from './suggestion/search_channel_provider.jsx'; @@ -13,12 +15,12 @@ import SearchSuggestionList from './suggestion/search_suggestion_list.jsx'; import SearchUserProvider from './suggestion/search_user_provider.jsx'; import * as Utils from 'utils/utils.jsx'; import Constants from 'utils/constants.jsx'; -import {loadProfilesForPosts} from 'actions/post_actions.jsx'; +import {loadProfilesForPosts, getFlaggedPosts} from 'actions/post_actions.jsx'; import {FormattedMessage, FormattedHTMLMessage} from 'react-intl'; var ActionTypes = Constants.ActionTypes; -import {Popover} from 'react-bootstrap'; +import {Tooltip, OverlayTrigger, Popover} from 'react-bootstrap'; import React from 'react'; @@ -33,6 +35,8 @@ export default class SearchBar extends React.Component { this.handleUserBlur = this.handleUserBlur.bind(this); this.performSearch = this.performSearch.bind(this); this.handleSubmit = this.handleSubmit.bind(this); + this.searchMentions = this.searchMentions.bind(this); + this.getFlagged = this.getFlagged.bind(this); const state = this.getSearchTermStateFromStores(); state.focused = false; @@ -148,7 +152,28 @@ export default class SearchBar extends React.Component { this.clearFocus(); } + searchMentions(e) { + e.preventDefault(); + const user = UserStore.getCurrentUser(); + if (SearchStore.isMentionSearch) { + // Close + GlobalActions.toggleSideBarAction(false); + } else { + GlobalActions.emitSearchMentionsEvent(user); + } + } + + getFlagged(e) { + e.preventDefault(); + if (SearchStore.isFlaggedPosts) { + GlobalActions.toggleSideBarAction(false); + } else { + getFlaggedPosts(); + } + } + render() { + const flagIcon = Constants.FLAG_ICON_SVG; var isSearching = null; if (this.state.isSearching) { isSearching = <span className={'fa fa-refresh fa-refresh-animate icon--refresh icon--rotate'}/>; @@ -159,6 +184,73 @@ export default class SearchBar extends React.Component { helpClass += ' visible'; } + const recentMentionsTooltip = ( + <Tooltip id='recentMentionsTooltip'> + <FormattedMessage + id='channel_header.recentMentions' + defaultMessage='Recent Mentions' + /> + </Tooltip> + ); + + const flaggedTooltip = ( + <Tooltip id='flaggedTooltip'> + <FormattedMessage + id='channel_header.flagged' + defaultMessage='Flagged Posts' + /> + </Tooltip> + ); + + let mentionBtn; + let flagBtn; + if (this.props.showMentionFlagBtns) { + mentionBtn = ( + <div + className='dropdown channel-header__links' + style={{float: 'left', marginTop: '1px'}} + > + <OverlayTrigger + delayShow={Constants.OVERLAY_TIME_DELAY} + placement='bottom' + overlay={recentMentionsTooltip} + > + <a + href='#' + type='button' + onClick={this.searchMentions} + > + {'@'} + </a> + </OverlayTrigger> + </div> + ); + + flagBtn = ( + <div + className='dropdown channel-header__links' + style={{float: 'left', marginTop: '1px'}} + > + <OverlayTrigger + delayShow={Constants.OVERLAY_TIME_DELAY} + placement='bottom' + overlay={flaggedTooltip} + > + <a + href='#' + type='button' + onClick={this.getFlagged} + > + <span + className='icon icon__flag' + dangerouslySetInnerHTML={{__html: flagIcon}} + /> + </a> + </OverlayTrigger> + </div> + ); + } + return ( <div> <div @@ -208,7 +300,18 @@ export default class SearchBar extends React.Component { /> </Popover> </form> + + {mentionBtn} + {flagBtn} </div> ); } } + +SearchBar.defaultProps = { + showMentionFlagBtns: true +}; + +SearchBar.propTypes = { + showMentionFlagBtns: React.PropTypes.bool +};
\ No newline at end of file |