MM-22894/MM-23046/MM-24274/MM-24375 Quick wins bucket list 5 (#5353)

* Quick wins bucket list 5 * Updating navigation from channel name * Updating button * Fixing lint errors * Updating UI changes * Updating rhs UI * Updating css * Updating slash command line-height * Updating css for RHS and search * Updating width for channel name in RHS * Updating mobile css * UI updates * Updating full screen modal css * Updating thread css and test * Updating RHS styling and collapse * Updating tests * Updating icons and navigation * Updating test * Updating rhs header * Updating icons * Updating icons * Updating minor code * Updating minor functional changes * Updating translation * Updating channel state * Updating back button * Updating font icons
mattermost · May 1, 2020 · ba7358a · ba7358a
1 parent 061e9e4
commit ba7358a
Show file tree

Hide file tree

Showing 41 changed files with 372 additions and 242 deletions.
diff --git a/components/__snapshots__/quick_input.test.jsx.snap b/components/__snapshots__/quick_input.test.jsx.snap
@@ -59,7 +59,9 @@ exports[`components/QuickInput should render clear button with customized toolti
  onMouseOut={[Function]}
  onMouseOver={[Function]}
  >
- ×
+ <i
+ className="icon icon-close-circle"
+ />
  </span>
  </OverlayTrigger>
  </OverlayTrigger>
@@ -121,7 +123,9 @@ exports[`components/QuickInput should render clear button with customized toolti
  onMouseOut={[Function]}
  onMouseOver={[Function]}
  >
- ×
+ <i
+ className="icon icon-close-circle"
+ />
  </span>
  </OverlayTrigger>
  </OverlayTrigger>
@@ -191,7 +195,9 @@ exports[`components/QuickInput should render clear button with default tooltip t
  onMouseOut={[Function]}
  onMouseOver={[Function]}
  >
- ×
+ <i
+ className="icon icon-close-circle"
+ />
  </span>
  </OverlayTrigger>
  </OverlayTrigger>

diff --git a/components/channel_layout/center_channel/center_channel.tsx b/components/channel_layout/center_channel/center_channel.tsx
@@ -35,6 +35,7 @@ export default class CenterChannel extends React.PureComponent<Props, State> {
  lastReturnTo: '',
  };
  }
+
  static getDerivedStateFromProps(nextProps: Props, prevState: State) {
  if (prevState.lastReturnTo !== nextProps.location.pathname && nextProps.location.pathname.includes('/pl/')) {
  return {

diff --git a/components/invitation_modal/invitation_modal.scss b/components/invitation_modal/invitation_modal.scss
@@ -8,7 +8,8 @@
  height: 100%;
  align-items: center;
  font-size: 16px;
- color: var(--center-channel-color-90);
+ color: var(--center-channel-color);
+
  @media (max-width: 768px) {
  padding-left: 15px;
  padding-right: 15px;

diff --git a/components/plugin_marketplace/marketplace_modal.scss b/components/plugin_marketplace/marketplace_modal.scss
@@ -10,7 +10,7 @@
  height: 100%;
  align-items: center;
  font-size: 16px;
- color: var(--center-channel-color-90);
+ color: var(--center-channel-color);
 
  @media (max-width: 768px) {
  padding-left: 15px;
@@ -37,10 +37,10 @@
 
  .input-clear {
  top: 32px;
- right: 38px;
- font-size: 22px;
- width: 30px;
- height: 30px;
+ right: 36px;
+ font-size: 16px;
+ width: 32px;
+ height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
@@ -103,6 +103,7 @@
  }
 
  .search_input {
+ box-shadow: none;
  flex: 1;
  margin-left: 16px;
  margin-right: 16px;

diff --git a/components/quick_input.jsx b/components/quick_input.jsx
@@ -152,7 +152,7 @@ export default class QuickInput extends React.PureComponent {
  className='input-clear-x'
  aria-hidden='true'
  >
- {'×'}
+ <i className='icon icon-close-circle'/>
  </span>
  </OverlayTrigger>
  </div>

diff --git a/components/rhs_card_header/rhs_card_header.jsx b/components/rhs_card_header/rhs_card_header.jsx
@@ -127,7 +127,7 @@ export default class RhsCardHeader extends React.Component {
  >
  {(ariaLabel) => (
  <i
- className='fa fa-angle-left'
+ className='icon icon-arrow-back-ios'
  aria-label={ariaLabel}
  />
  )}
@@ -149,7 +149,7 @@ export default class RhsCardHeader extends React.Component {
  <div className='pull-right'>
  <button
  type='button'
- className='sidebar--right__expand'
+ className='sidebar--right__expand btn-icon'
  aria-label='Expand'
  onClick={this.props.actions.toggleRhsExpanded}
  >
@@ -164,7 +164,7 @@ export default class RhsCardHeader extends React.Component {
  >
  {(ariaLabel) => (
  <i
- className='fa fa-expand'
+ className='icon icon-arrow-expand'
  aria-label={ariaLabel}
  />
  )}
@@ -181,7 +181,7 @@ export default class RhsCardHeader extends React.Component {
  >
  {(ariaLabel) => (
  <i
- className='fa fa-compress'
+ className='icon icon-arrow-collapse'
  aria-label={ariaLabel}
  />
  )}
@@ -190,7 +190,7 @@ export default class RhsCardHeader extends React.Component {
  </button>
  <button
  type='button'
- className='sidebar--right__close'
+ className='sidebar--right__close btn-icon'
  aria-label='Close'
  onClick={this.props.actions.closeRightHandSide}
  >
@@ -205,7 +205,7 @@ export default class RhsCardHeader extends React.Component {
  >
  {(ariaLabel) => (
  <i
- className='fa fa-sign-out'
+ className='icon icon-close'
  aria-label={ariaLabel}
  />
  )}

diff --git a/components/rhs_header_post/index.js b/components/rhs_header_post/index.js
@@ -3,8 +3,10 @@
 
 import {connect} from 'react-redux';
 import {bindActionCreators} from 'redux';
+import {getCurrentRelativeTeamUrl} from 'mattermost-redux/selectors/entities/teams';
 
 import {
+ setRhsExpanded,
  showMentions,
  showSearchResults,
  showFlaggedPosts,
@@ -15,9 +17,16 @@ import {
 
 import RhsHeaderPost from './rhs_header_post.jsx';
 
+function mapStateToProps(state) {
+ return {
+ relativeTeamUrl: getCurrentRelativeTeamUrl(state),
+ };
+}
+
 function mapDispatchToProps(dispatch) {
  return {
  actions: bindActionCreators({
+ setRhsExpanded,
  showSearchResults,
  showMentions,
  showFlaggedPosts,
@@ -28,4 +37,4 @@ function mapDispatchToProps(dispatch) {
  };
 }
 
-export default connect(null, mapDispatchToProps)(RhsHeaderPost);
+export default connect(mapStateToProps, mapDispatchToProps)(RhsHeaderPost);
diff --git a/components/rhs_header_post/rhs_header_post.jsx b/components/rhs_header_post/rhs_header_post.jsx
@@ -9,13 +9,19 @@ import {FormattedMessage} from 'react-intl';
 import OverlayTrigger from 'components/overlay_trigger';
 
 import Constants, {RHSStates} from 'utils/constants';
+import {isMobile} from 'utils/utils.jsx';
+import {browserHistory} from 'utils/browser_history';
 
 export default class RhsHeaderPost extends React.Component {
  static propTypes = {
+ rootPostId: PropTypes.string.isRequired,
+ channel: PropTypes.object.isRequired,
  previousRhsState: PropTypes.oneOf(
  Object.values(RHSStates)
  ),
+ relativeTeamUrl: PropTypes.string.isRequired,
  actions: PropTypes.shape({
+ setRhsExpanded: PropTypes.func,
  showMentions: PropTypes.func,
  showSearchResults: PropTypes.func,
  showFlaggedPosts: PropTypes.func,
@@ -46,6 +52,16 @@ export default class RhsHeaderPost extends React.Component {
  }
  }
 
+ handleJumpClick = () => {
+ if (isMobile()) {
+ this.props.actions.closeRightHandSide();
+ }
+
+ this.props.actions.setRhsExpanded(false);
+ const teamUrl = this.props.relativeTeamUrl;
+ browserHistory.push(`${teamUrl}/pl/${this.props.rootPostId}`);
+ }
+
  render() {
  let back;
  const closeSidebarTooltip = (
@@ -111,6 +127,8 @@ export default class RhsHeaderPost extends React.Component {
  </Tooltip>
  );
 
+ const channelName = this.props.channel.display_name;
+
  if (backToResultsTooltip) {
  back = (
  <a
@@ -129,7 +147,7 @@ export default class RhsHeaderPost extends React.Component {
  >
  {(ariaLabel) => (
  <i
- className='fa fa-angle-left'
+ className='icon icon-arrow-back-ios'
  aria-label={ariaLabel}
  />
  )}
@@ -145,13 +163,21 @@ export default class RhsHeaderPost extends React.Component {
  {back}
  <FormattedMessage
  id='rhs_header.details'
- defaultMessage='Message Details'
+ defaultMessage='Thread'
  />
+ {channelName &&
+ <button
+ onClick={this.handleJumpClick}
+ className='style--none sidebar--right__title__channel'
+ >
+ {channelName}
+ </button>
+ }
  </span>
  <div className='pull-right'>
  <button
  type='button'
- className='sidebar--right__expand'
+ className='sidebar--right__expand btn-icon'
  aria-label='Expand'
  onClick={this.props.actions.toggleRhsExpanded}
  >
@@ -166,7 +192,7 @@ export default class RhsHeaderPost extends React.Component {
  >
  {(ariaLabel) => (
  <i
- className='fa fa-expand'
+ className='icon icon-arrow-expand'
  aria-label={ariaLabel}
  />
  )}
@@ -183,7 +209,7 @@ export default class RhsHeaderPost extends React.Component {
  >
  {(ariaLabel) => (
  <i
- className='fa fa-compress'
+ className='icon icon-arrow-collapse'
  aria-label={ariaLabel}
  />
  )}
@@ -193,7 +219,7 @@ export default class RhsHeaderPost extends React.Component {
  <button
  id='rhsCloseButton'
  type='button'
- className='sidebar--right__close'
+ className='sidebar--right__close btn-icon'
  aria-label='Close'
  onClick={this.props.actions.closeRightHandSide}
  >
@@ -209,7 +235,7 @@ export default class RhsHeaderPost extends React.Component {
  >
  {(ariaLabel) => (
  <i
- className='fa fa-sign-out'
+ className='icon icon-close'
  aria-label={ariaLabel}
  />
  )}

diff --git a/components/rhs_root_post/__snapshots__/rhs_root_post.test.jsx.snap b/components/rhs_root_post/__snapshots__/rhs_root_post.test.jsx.snap
@@ -11,11 +11,6 @@ exports[`components/RhsRootPost should match snapshot 1`] = `
  role="listitem"
  tabIndex="-1"
 >
- <div
- className="post-right-channel__name"
- >
- Test
- </div>
  <div
  className="post__content"
  role="application"
@@ -193,11 +188,6 @@ exports[`components/RhsRootPost should match snapshot on deleted post 1`] = `
  role="listitem"
  tabIndex="-1"
 >
- <div
- className="post-right-channel__name"
- >
- Test
- </div>
  <div
  className="post__content"
  role="application"
@@ -331,11 +321,6 @@ exports[`components/RhsRootPost should match snapshot on flagged, deleted post 1
  role="listitem"
  tabIndex="-1"
 >
- <div
- className="post-right-channel__name"
- >
- Test
- </div>
  <div
  className="post__content"
  role="application"
@@ -472,11 +457,6 @@ exports[`components/RhsRootPost should match snapshot when flagged 1`] = `
  role="listitem"
  tabIndex="-1"
 >
- <div
- className="post-right-channel__name"
- >
- Test
- </div>
  <div
  className="post__content"
  role="application"

diff --git a/components/rhs_root_post/index.js b/components/rhs_root_post/index.js
@@ -44,8 +44,6 @@ function mapStateToProps(state, ownProps) {
  teamId,
  pluginPostTypes: state.plugins.postTypes,
  channelIsArchived: isArchivedChannel(channel),
- channelType: channel.type,
- channelDisplayName: channel.display_name,
  isFlagged: get(state, Preferences.CATEGORY_FLAGGED_POST, ownProps.post.id, null) != null,
  compactDisplay: get(state, Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.MESSAGE_DISPLAY, Preferences.MESSAGE_DISPLAY_DEFAULT) === Preferences.MESSAGE_DISPLAY_COMPACT,
  shortcutReactToLastPostEmittedFrom,

diff --git a/components/rhs_root_post/rhs_root_post.jsx b/components/rhs_root_post/rhs_root_post.jsx
@@ -45,8 +45,6 @@ class RhsRootPost extends React.PureComponent {
  isReadOnly: PropTypes.bool.isRequired,
  pluginPostTypes: PropTypes.object,
  channelIsArchived: PropTypes.bool.isRequired,
- channelType: PropTypes.string,
- channelDisplayName: PropTypes.string,
  handleCardClick: PropTypes.func.isRequired,
 
  /**
@@ -229,25 +227,13 @@ class RhsRootPost extends React.PureComponent {
  };
 
  render() {
- const {post, isReadOnly, teamId, channelIsArchived, channelType, channelDisplayName} = this.props;
+ const {post, isReadOnly, teamId, channelIsArchived} = this.props;
 
  const isPostDeleted = post && post.state === Posts.POST_DELETED;
  const isEphemeral = Utils.isPostEphemeral(post);
  const isSystemMessage = PostUtils.isSystemMessage(post);
  const isMeMessage = ReduxPostUtils.isMeMessage(post);
 
- let channelName;
- if (channelType === 'D') {
- channelName = (
- <FormattedMessage
- id='rhs_root.direct'
- defaultMessage='Direct Message'
- />
- );
- } else {
- channelName = channelDisplayName;
- }
-
  let postReaction;
  if (!isReadOnly && !isEphemeral && !post.failed && !isSystemMessage && this.props.enableEmojiPicker && !channelIsArchived) {
  postReaction = (
@@ -421,7 +407,6 @@ class RhsRootPost extends React.PureComponent {
  onFocus={this.handlePostFocus}
  data-a11y-sort-order='0'
  >
- <div className='post-right-channel__name'>{channelName}</div>
  <div
  role='application'
  className='post__content'