diff options
Diffstat (limited to 'webapp/components/channel_header.jsx')
| -rw-r--r-- | webapp/components/channel_header.jsx | 78 |
1 files changed, 64 insertions, 14 deletions
diff --git a/webapp/components/channel_header.jsx b/webapp/components/channel_header.jsx index 01e1e98cf..c05033b51 100644 --- a/webapp/components/channel_header.jsx +++ b/webapp/components/channel_header.jsx @@ -30,7 +30,7 @@ import * as Utils from 'utils/utils.jsx'; import * as ChannelUtils from 'utils/channel_utils.jsx'; import {getSiteURL} from 'utils/url.jsx'; import * as TextFormatting from 'utils/text_formatting.jsx'; -import {getFlaggedPosts} from 'actions/post_actions.jsx'; +import {getFlaggedPosts, getPinnedPosts} from 'actions/post_actions.jsx'; import AppDispatcher from 'dispatcher/app_dispatcher.jsx'; @@ -53,6 +53,7 @@ export default class ChannelHeader extends React.Component { this.hideRenameChannelModal = this.hideRenameChannelModal.bind(this); this.handleShortcut = this.handleShortcut.bind(this); this.getFlagged = this.getFlagged.bind(this); + this.getPinnedPosts = this.getPinnedPosts.bind(this); this.initWebrtc = this.initWebrtc.bind(this); this.onBusy = this.onBusy.bind(this); this.openDirectMessageModal = this.openDirectMessageModal.bind(this); @@ -158,6 +159,15 @@ export default class ChannelHeader extends React.Component { } } + getPinnedPosts(e) { + e.preventDefault(); + if (SearchStore.isPinnedPosts) { + GlobalActions.toggleSideBarAction(false); + } else { + getPinnedPosts(this.props.channelId); + } + } + getFlagged(e) { e.preventDefault(); if (SearchStore.isFlaggedPosts) { @@ -211,6 +221,7 @@ export default class ChannelHeader extends React.Component { render() { const flagIcon = Constants.FLAG_ICON_SVG; + const pinIcon = Constants.PIN_ICON; if (!this.validState()) { // Use an empty div to make sure the header's height stays constant @@ -230,7 +241,10 @@ export default class ChannelHeader extends React.Component { ); const flaggedTooltip = ( - <Tooltip id='flaggedTooltip'> + <Tooltip + id='flaggedTooltip' + className='text-nowrap' + > <FormattedMessage id='channel_header.flagged' defaultMessage='Flagged Posts' @@ -365,6 +379,7 @@ export default class ChannelHeader extends React.Component { if (isDirect) { dropdownContents.push( <li + id='channelEditHeaderDirect' key='edit_header_direct' role='presentation' > @@ -383,6 +398,7 @@ export default class ChannelHeader extends React.Component { } else if (isGroup) { dropdownContents.push( <li + id='channelEditHeaderGroup' key='edit_header_direct' role='presentation' > @@ -401,6 +417,7 @@ export default class ChannelHeader extends React.Component { dropdownContents.push( <li + id='channelnotificationPreferencesGroup' key='notification_preferences' role='presentation' > @@ -423,6 +440,7 @@ export default class ChannelHeader extends React.Component { dropdownContents.push( <li + id='channelAddMembersGroup' key='add_members' role='presentation' > @@ -441,6 +459,7 @@ export default class ChannelHeader extends React.Component { } else { dropdownContents.push( <li + id='channelViewInfo' key='view_info' role='presentation' > @@ -459,6 +478,7 @@ export default class ChannelHeader extends React.Component { dropdownContents.push( <li + id='channelNotificationPreferences' key='notification_preferences' role='presentation' > @@ -489,6 +509,7 @@ export default class ChannelHeader extends React.Component { if (!ChannelStore.isDefault(channel)) { dropdownContents.push( <li + id='channelAddMembers' key='add_members' role='presentation' > @@ -508,6 +529,7 @@ export default class ChannelHeader extends React.Component { dropdownContents.push( <li + id='channelManageMembers' key='manage_members' role='presentation' > @@ -534,6 +556,7 @@ export default class ChannelHeader extends React.Component { const deleteOption = ( <li + id='channelDelete' key='delete_channel' role='presentation' > @@ -556,6 +579,7 @@ export default class ChannelHeader extends React.Component { if (ChannelUtils.showManagementOptions(channel, isAdmin, isSystemAdmin, isChannelAdmin)) { dropdownContents.push( <li + id='channelEditHeader' key='set_channel_header' role='presentation' > @@ -577,6 +601,7 @@ export default class ChannelHeader extends React.Component { dropdownContents.push( <li + id='channelEditPurpose' key='set_channel_purpose' role='presentation' > @@ -598,6 +623,7 @@ export default class ChannelHeader extends React.Component { dropdownContents.push( <li + id='channelRename' key='rename_channel' role='presentation' > @@ -637,6 +663,7 @@ export default class ChannelHeader extends React.Component { if (!ChannelStore.isDefault(channel) && canLeave) { dropdownContents.push( <li + id='channelLeave' key='leave_channel' role='presentation' > @@ -665,19 +692,27 @@ export default class ChannelHeader extends React.Component { headerText = channel.header; } - const toggleFavoriteTooltip = ( - <Tooltip id='favoriteTooltip'> - {this.state.isFavorite ? + let toggleFavoriteTooltip; + if (this.state.isFavorite) { + toggleFavoriteTooltip = ( + <Tooltip id='favoriteTooltip'> <FormattedMessage id='channelHeader.removeFromFavorites' defaultMessage='Remove from Favorites' - /> : - <FormattedMessage - id='channelHeader.addToFavorites' - defaultMessage='Add to Favorites' - />} - </Tooltip> - ); + /> + </Tooltip> + ); + } else { + toggleFavoriteTooltip = ( + <Tooltip id='favoriteTooltip'> + <FormattedMessage + id='channelHeader.addToFavorites' + defaultMessage='Add to Favorites' + /> + </Tooltip> + ); + } + const toggleFavorite = ( <OverlayTrigger delayShow={Constants.OVERLAY_TIME_DELAY} @@ -685,6 +720,7 @@ export default class ChannelHeader extends React.Component { overlay={toggleFavoriteTooltip} > <a + id='toggleFavorite' href='#' onClick={this.toggleFavorite} className='channel-header__favorites' @@ -729,10 +765,10 @@ export default class ChannelHeader extends React.Component { {toggleFavorite} <div className='dropdown'> <a + id='channelHeaderDropdown' href='#' className='dropdown-toggle theme' type='button' - id='channel_header_dropdown' data-toggle='dropdown' aria-expanded='true' > @@ -762,8 +798,20 @@ export default class ChannelHeader extends React.Component { </OverlayTrigger> </div> </th> - <th className='header-list__members'> + <th className='header-list__right'> {popoverListMembers} + <a + href='#' + type='button' + id='pinnedPostsButton' + className='pinned-posts-button' + onClick={this.getPinnedPosts} + > + <span + dangerouslySetInnerHTML={{__html: pinIcon}} + aria-hidden='true' + /> + </a> </th> <th className='search-bar__container'> <NavbarSearchBox @@ -779,6 +827,7 @@ export default class ChannelHeader extends React.Component { overlay={recentMentionsTooltip} > <a + id='searchMentions' href='#' type='button' onClick={this.searchMentions} @@ -796,6 +845,7 @@ export default class ChannelHeader extends React.Component { overlay={flaggedTooltip} > <a + id='flaggedPostsButton' href='#' type='button' onClick={this.getFlagged} |