diff options
Diffstat (limited to 'webapp/components')
-rw-r--r-- | webapp/components/channel_header.jsx | 8 | ||||
-rw-r--r-- | webapp/components/search_bar.jsx | 107 | ||||
-rw-r--r-- | webapp/components/sidebar_right.jsx | 10 |
3 files changed, 119 insertions, 6 deletions
diff --git a/webapp/components/channel_header.jsx b/webapp/components/channel_header.jsx index 96cfa1557..52bed85cd 100644 --- a/webapp/components/channel_header.jsx +++ b/webapp/components/channel_header.jsx @@ -728,12 +728,12 @@ export default class ChannelHeader extends React.Component { </OverlayTrigger> </div> </th> - <th> + <th className='header-list__members'> {popoverListMembers} </th> - <th className='search-bar__container'><NavbarSearchBox/></th> + <th className='search-bar__container'><NavbarSearchBox showMentionFlagBtns={false}/></th> <th> - <div className='dropdown channel-header__links'> + <div className='dropdown channel-header__links search-btns'> <OverlayTrigger delayShow={Constants.OVERLAY_TIME_DELAY} placement='bottom' @@ -750,7 +750,7 @@ export default class ChannelHeader extends React.Component { </div> </th> <th> - <div className='dropdown channel-header__links'> + <div className='dropdown channel-header__links search-btns'> <OverlayTrigger delayShow={Constants.OVERLAY_TIME_DELAY} placement='bottom' 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 diff --git a/webapp/components/sidebar_right.jsx b/webapp/components/sidebar_right.jsx index 1be2a3287..da7ff818d 100644 --- a/webapp/components/sidebar_right.jsx +++ b/webapp/components/sidebar_right.jsx @@ -74,6 +74,12 @@ export default class SidebarRight extends React.Component { if (isOpen !== willOpen) { PostStore.jumpPostsViewSidebarOpen(); } + + if (!isOpen && willOpen) { + this.setState({ + expanded: false + }); + } } doStrangeThings() { @@ -191,6 +197,10 @@ export default class SidebarRight extends React.Component { ); } + if (!content) { + expandedClass = ''; + } + return ( <div className={'sidebar--right ' + expandedClass} |