[MM-23517] - Fix channel header popover (#5159)

* [MM-23517] - Fix channel header popover * Add more accurate css values * consider DM's for the header popover Co-authored-by: Nevyana Angelova <[email protected]> Co-authored-by: mattermod <[email protected]>
mattermost · Mar 26, 2020 · dd12f81 · dd12f81
1 parent cfd272d
commit dd12f81
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 4 deletions.
diff --git a/components/channel_header/channel_header.js b/components/channel_header/channel_header.js
@@ -85,6 +85,7 @@ class ChannelHeader extends React.PureComponent {
  }).isRequired,
  teammateNameDisplaySetting: PropTypes.string.isRequired,
  currentRelativeTeamUrl: PropTypes.string.isRequired,
+ newSideBarPreference: PropTypes.bool,
  };
 
  constructor(props) {
@@ -290,6 +291,7 @@ class ChannelHeader extends React.PureComponent {
  rhsState,
  hasGuests,
  teammateNameDisplaySetting,
+ newSideBarPreference,
  } = this.props;
  const {formatMessage} = this.props.intl;
  const ariaLabelChannelHeader = Utils.localizeMessage('accessibility.sections.channelHeader', 'channel header region');
@@ -437,7 +439,10 @@ class ChannelHeader extends React.PureComponent {
  popoverSize='lg'
  style={{maxWidth: `${this.state.popoverOverlayWidth}px`}}
  placement='bottom'
- className={classNames(['channel-header__popover', {'chanel-header__popover--lhs_offset': this.props.hasMoreThanOneTeam}])}
+ className={classNames(['channel-header__popover',
+ {'chanel-header__popover--dm': isDirect,
+ 'chanel-header__popover--lhs_offset': this.props.hasMoreThanOneTeam,
+ 'chanel-header__popover--new_sidebar': newSideBarPreference}])}
  >
  <span
  onClick={this.handleFormattedTextClick}

diff --git a/components/channel_header/index.js b/components/channel_header/index.js
@@ -19,7 +19,7 @@ import {
  isCurrentChannelReadOnly,
  getCurrentChannelStats,
 } from 'mattermost-redux/selectors/entities/channels';
-import {getTeammateNameDisplaySetting} from 'mattermost-redux/selectors/entities/preferences';
+import {getTeammateNameDisplaySetting, getNewSidebarPreference} from 'mattermost-redux/selectors/entities/preferences';
 import {getCurrentRelativeTeamUrl, getCurrentTeamId, getMyTeams} from 'mattermost-redux/selectors/entities/teams';
 import {
  getCurrentUser,
@@ -79,7 +79,8 @@ function makeMapStateToProps() {
  pinnedPostsCount: stats.pinnedpost_count,
  hasMoreThanOneTeam,
  teammateNameDisplaySetting: getTeammateNameDisplaySetting(state),
- currentRelativeTeamUrl: getCurrentRelativeTeamUrl(state)
+ currentRelativeTeamUrl: getCurrentRelativeTeamUrl(state),
+ newSideBarPreference: getNewSidebarPreference(state)
  };
  };
 }

diff --git a/sass/components/_popover.scss b/sass/components/_popover.scss
@@ -29,8 +29,25 @@
  margin-left: -4px;
  font-size: em(12px);
 
+ &.chanel-header__popover--dm {
+ margin-left: 73px;
+ }
+
  &.chanel-header__popover--lhs_offset {
  margin-left: 61px;
+
+ &.chanel-header__popover--new_sidebar {
+ margin-left: 81px;
+ }
+ }
+
+ &.chanel-header__popover--new_sidebar {
+ margin-left: 16px;
+
+
+ &.chanel-header__popover--dm {
+ margin-left: 91px;
+ }
  }
 
  .popover-content {

diff --git a/utils/markdown/index.ts b/utils/markdown/index.ts
@@ -23,7 +23,8 @@ export function formatWithRenderer(text: string, renderer: marked.Renderer) {
  sanitize: true,
  gfm: true,
  tables: true,
- mangle: false
+ mangle: false,
+ breaks: true,
  };
 
  return marked(text, markdownOptions).trim();