PLT-6905 - Updating channel header design (#6789)

* PLT-6905 - Updating channel header design * Updating border-radius * Updating radius for wide icons * Updating trigger for overlay * Updating UI for channel header * Updating channel header sizing * Updating channel header css * Updating sidebar css * Updating status icons * Adjusting border * Updating comment * Removing type from status icon * Fixing UI issues for the channel header/sidebar * make "Add a channel description" open the channel header modal * Updating status and opacity * Updating stauts icon positioning * Updating description and heading size * Updating UI changes * Updating UI changes * add a focused class to the parent div .search__form and then remove when hover away * Fix active state for pinned posts icon * Updating UI changes * Update channel header text
mattermost · Jul 6, 2017 · c510233 · c510233
1 parent 4cd4783
commit c510233
Show file tree

Hide file tree

Showing 42 changed files with 1,047 additions and 522 deletions.
diff --git a/components/analytics/table_chart.jsx b/components/analytics/table_chart.jsx
@@ -31,6 +31,7 @@ export default function TableChart(props) {
  <tr key={'table-entry-' + item.name}>
  <td>
  <OverlayTrigger
+ trigger={['hover', 'focus']}
  delayShow={Constants.OVERLAY_TIME_DELAY}
  placement='top'
  overlay={tooltip}

diff --git a/components/change_url_modal.jsx b/components/change_url_modal.jsx
@@ -180,6 +180,7 @@ export default class ChangeUrlModal extends React.Component {
  <div className='col-sm-10'>
  <div className={urlClass}>
  <OverlayTrigger
+ trigger={['hover', 'focus']}
  delayShow={Constants.OVERLAY_TIME_DELAY}
  placement='top'
  overlay={urlTooltip}

diff --git a/components/channel_header.jsx b/components/channel_header.jsx
@@ -64,6 +64,7 @@ export default class ChannelHeader extends React.Component {
  this.hideLeaveChannelModal = this.hideLeaveChannelModal.bind(this);
 
  const state = this.getStateFromStores();
+ state.showEditChannelHeaderModal = false;
  state.showEditChannelPurposeModal = false;
  state.showMembersModal = false;
  state.showRenameChannelModal = false;
@@ -90,7 +91,8 @@ export default class ChannelHeader extends React.Component {
  enableFormatting: PreferenceStore.getBool(Preferences.CATEGORY_ADVANCED_SETTINGS, 'formatting', true),
  isBusy: WebrtcStore.isBusy(),
  isFavorite: channel && ChannelUtils.isFavoriteChannel(channel),
- showLeaveChannelModal: false
+ showLeaveChannelModal: false,
+ pinsOpen: SearchStore.getIsPinnedPosts()
  };
  }
 
@@ -281,7 +283,8 @@ export default class ChannelHeader extends React.Component {
 
  render() {
  const flagIcon = Constants.FLAG_ICON_SVG;
- const pinIcon = Constants.PIN_ICON;
+ const pinIcon = Constants.PIN_ICON_SVG;
+ const mentionsIcon = Constants.MENTIONS_ICON_SVG;
 
  if (!this.validState()) {
  // Use an empty div to make sure the header's height stays constant
@@ -300,6 +303,15 @@ export default class ChannelHeader extends React.Component {
  </Tooltip>
  );
 
+ const pinnedPostTooltip = (
+ <Tooltip id='pinnedPostTooltip'>
+ <FormattedMessage
+ id='channel_header.pinnedPosts'
+ defaultMessage='Pinned Posts'
+ />
+ </Tooltip>
+ );
+
  const flaggedTooltip = (
  <Tooltip
  id='flaggedTooltip'
@@ -382,13 +394,14 @@ export default class ChannelHeader extends React.Component {
  );
 
  webrtc = (
- <div className='webrtc__header'>
+ <div className='webrtc__header channel-header__icon'>
  <a
  href='#'
  onClick={() => this.initWebrtc(otherUserId, !isOffline)}
  disabled={isOffline}
  >
  <OverlayTrigger
+ trigger={['hover', 'focus']}
  delayShow={Constants.WEBRTC_TIME_DELAY}
  placement='bottom'
  overlay={webrtcTooltip}
@@ -754,11 +767,62 @@ export default class ChannelHeader extends React.Component {
  }
  }
 
- let headerText;
- if (this.state.enableFormatting) {
- headerText = TextFormatting.formatText(channel.header, {singleline: true, mentionHighlight: false, siteURL: getSiteURL()});
+ let headerTextContainer;
+ if (channel.header) {
+ let headerTextElement;
+ if (this.state.enableFormatting) {
+ headerTextElement = (
+ <div
+ onClick={Utils.handleFormattedTextClick}
+ className='channel-header__description'
+ dangerouslySetInnerHTML={{__html: TextFormatting.formatText(channel.header, {singleline: true, mentionHighlight: false, siteURL: getSiteURL()})}}
+ />
+ );
+ } else {
+ headerTextElement = (
+ <div
+ onClick={Utils.handleFormattedTextClick}
+ className='channel-header__description'
+ >
+ {channel.header}
+ </div>
+ );
+ }
+
+ headerTextContainer = (
+ <OverlayTrigger
+ trigger={'click'}
+ placement='bottom'
+ rootClose={true}
+ overlay={popoverContent}
+ ref='headerOverlay'
+ >
+ {headerTextElement}
+ </OverlayTrigger>
+ );
  } else {
- headerText = channel.header;
+ headerTextContainer = (
+ <a
+ href='#'
+ className='channel-header__description light'
+ onClick={() => this.setState({showEditChannelHeaderModal: true})}
+ >
+ <FormattedMessage
+ id='channel_header.addChannelHeader'
+ defaultMessage='Add a channel description'
+ />
+ </a>
+ );
+ }
+
+ let editHeaderModal;
+ if (this.state.showEditChannelHeaderModal) {
+ editHeaderModal = (
+ <EditChannelHeaderModal
+ onHide={() => this.setState({showEditChannelHeaderModal: false})}
+ channel={channel}
+ />
+ );
  }
 
  let toggleFavoriteTooltip;
@@ -784,6 +848,7 @@ export default class ChannelHeader extends React.Component {
 
  const toggleFavorite = (
  <OverlayTrigger
+ trigger={['hover', 'focus']}
  delayShow={Constants.OVERLAY_TIME_DELAY}
  placement='bottom'
  overlay={toggleFavoriteTooltip}
@@ -792,7 +857,7 @@ export default class ChannelHeader extends React.Component {
  id='toggleFavorite'
  href='#'
  onClick={this.toggleFavorite}
- className='channel-header__favorites'
+ className={'channel-header__favorites ' + (this.state.isFavorite ? 'active' : 'inactive')}
  >
  <i className={'icon fa ' + (this.state.isFavorite ? 'fa-star' : 'fa-star-o')}/>
  </a>
@@ -822,19 +887,23 @@ export default class ChannelHeader extends React.Component {
 
  const leaveChannelModal = this.createLeaveChannelModal();
 
+ let pinnedIconClass = 'channel-header__icon';
+ if (this.state.pinsOpen) {
+ pinnedIconClass += ' active';
+ }
+
  return (
  <div
  id='channel-header'
- className='channel-header'
+ className='channel-header alt'
  >
- <table className='channel-header alt'>
+ <table>
  <tbody>
  <tr>
  <th>
  <div className='channel-header__info'>
- {webrtc}
  {toggleFavorite}
- <div className='dropdown'>
+ <div className='channel-header__title dropdown'>
  <a
  id='channelHeaderDropdown'
  href='#'
@@ -844,7 +913,7 @@ export default class ChannelHeader extends React.Component {
  aria-expanded='true'
  >
  <strong className='heading'>{channelTitle} </strong>
- <span className='fa fa-chevron-down header-dropdown__icon'/>
+ <span className='fa fa-angle-down header-dropdown__icon'/>
  </a>
  <ul
  className='dropdown-menu'
@@ -854,35 +923,33 @@ export default class ChannelHeader extends React.Component {
  {dropdownContents}
  </ul>
  </div>
- <OverlayTrigger
- trigger={'click'}
- placement='bottom'
- rootClose={true}
- overlay={popoverContent}
- ref='headerOverlay'
- >
- <div
- onClick={Utils.handleFormattedTextClick}
- className='description'
- dangerouslySetInnerHTML={{__html: headerText}}
- />
- </OverlayTrigger>
+ {headerTextContainer}
  </div>
  </th>
- <th className='header-list__right'>
+ <th>
+ {webrtc}
+ </th>
+ <th>
  {popoverListMembers}
- <a
- href='#'
- type='button'
- id='pinnedPostsButton'
- className='pinned-posts-button'
- onClick={this.getPinnedPosts}
+ </th>
+ <th>
+ <OverlayTrigger
+ trigger={['hover', 'focus']}
+ delayShow={Constants.OVERLAY_TIME_DELAY}
+ placement='bottom'
+ overlay={pinnedPostTooltip}
  >
- <span
- dangerouslySetInnerHTML={{__html: pinIcon}}
- aria-hidden='true'
- />
- </a>
+ <div
+ className={pinnedIconClass}
+ onClick={this.getPinnedPosts}
+ >
+ <span
+ className='icon icon__pin'
+ dangerouslySetInnerHTML={{__html: pinIcon}}
+ aria-hidden='true'
+ />
+ </div>
+ </OverlayTrigger>
  </th>
  <th className='search-bar__container'>
  <NavbarSearchBox
@@ -891,47 +958,44 @@ export default class ChannelHeader extends React.Component {
  />
  </th>
  <th>
- <div className='dropdown channel-header__links search-btns'>
- <OverlayTrigger
- delayShow={Constants.OVERLAY_TIME_DELAY}
- placement='bottom'
- overlay={recentMentionsTooltip}
- >
- <a
- id='searchMentions'
- href='#'
- type='button'
- onClick={this.searchMentions}
- >
- {'@'}
- </a>
- </OverlayTrigger>
- </div>
+ <OverlayTrigger
+ trigger={['hover', 'focus']}
+ delayShow={Constants.OVERLAY_TIME_DELAY}
+ placement='bottom'
+ overlay={recentMentionsTooltip}
+ >
+ <div className='channel-header__icon icon--hidden'>
+ <span
+ className='icon icon__mentions'
+ dangerouslySetInnerHTML={{__html: mentionsIcon}}
+ aria-hidden='true'
+ />
+ </div>
+ </OverlayTrigger>
  </th>
  <th>
- <div className='dropdown channel-header__links search-btns'>
- <OverlayTrigger
- delayShow={Constants.OVERLAY_TIME_DELAY}
- placement='bottom'
- overlay={flaggedTooltip}
+ <OverlayTrigger
+ trigger={['hover', 'focus']}
+ delayShow={Constants.OVERLAY_TIME_DELAY}
+ placement='bottom'
+ overlay={flaggedTooltip}
+ >
+ <div
+ className='channel-header__icon icon--hidden'
+ onClick={this.getFlagged}
+
  >
- <a
- id='flaggedPostsButton'
- href='#'
- type='button'
- onClick={this.getFlagged}
- >
- <span
- className='icon icon__flag'
- dangerouslySetInnerHTML={{__html: flagIcon}}
- />
- </a>
- </OverlayTrigger>
- </div>
+ <span
+ className='icon icon__flag'
+ dangerouslySetInnerHTML={{__html: flagIcon}}
+ />
+ </div>
+ </OverlayTrigger>
  </th>
  </tr>
  </tbody>
  </table>
+ {editHeaderModal}
  {editPurposeModal}
  {channelMembersModal}
  {leaveChannelModal}

diff --git a/components/channel_info_modal.jsx b/components/channel_info_modal.jsx
@@ -29,6 +29,8 @@ export default class ChannelInfoModal extends React.Component {
  render() {
  let channel = this.props.channel;
  let channelIcon;
+ const globeIcon = Constants.GLOBE_ICON_SVG;
+ const lockIcon = Constants.LOCK_ICON_SVG;
 
  if (!channel) {
  const notFound = Utils.localizeMessage('channel_info.notFound', 'No Channel Found');
@@ -43,9 +45,19 @@ export default class ChannelInfoModal extends React.Component {
  }
 
  if (channel.type === 'O') {
- channelIcon = (<span className='fa fa-globe'/>);
+ channelIcon = (
+ <span
+ className='icon icon__globe icon--body'
+ dangerouslySetInnerHTML={{__html: globeIcon}}
+ />
+ );
  } else if (channel.type === 'P') {
- channelIcon = (<span className='fa fa-lock'/>);
+ channelIcon = (
+ <span
+ className='icon icon__globe icon--body'
+ dangerouslySetInnerHTML={{__html: lockIcon}}
+ />
+ );
  }
 
  const channelURL = TeamStore.getCurrentTeamUrl() + '/channels/' + channel.name;

diff --git a/components/create_team/components/team_url.jsx b/components/create_team/components/team_url.jsx
@@ -178,6 +178,7 @@ export default class TeamUrl extends React.Component {
  <div className='col-sm-11'>
  <div className='input-group input-group--limit'>
  <OverlayTrigger
+ trigger={['hover', 'focus']}
  delayShow={Constants.OVERLAY_TIME_DELAY}
  placement='top'
  overlay={urlTooltip}

diff --git a/components/file_attachment.jsx b/components/file_attachment.jsx
@@ -105,6 +105,7 @@ export default class FileAttachment extends React.Component {
  if (this.props.compactDisplay) {
  filenameOverlay = (
  <OverlayTrigger
+ trigger={['hover', 'focus']}
  delayShow={1000}
  placement='top'
  overlay={<Tooltip id='file-name__tooltip'>{fileName}</Tooltip>}
@@ -126,6 +127,7 @@ export default class FileAttachment extends React.Component {
  } else {
  filenameOverlay = (
  <OverlayTrigger
+ trigger={['hover', 'focus']}
  delayShow={1000}
  placement='top'
  overlay={<Tooltip id='file-name__tooltip'>{Utils.localizeMessage('file_attachment.download', 'Download') + ' "' + fileName + '"'}</Tooltip>}