Changes for Town Square read only on web small screen size. Overlay m… (

#1092) * Changes for Town Square read only on web small screen size. Overlay menu options. * fix bug that displays dot menu with empty option on small screen devices.
mattermost · Apr 20, 2018 · c2ac94d · c2ac94d
1 parent a36151a
commit c2ac94d
Show file tree

Hide file tree

Showing 10 changed files with 143 additions and 198 deletions.
diff --git a/components/dot_menu/dot_menu.jsx b/components/dot_menu/dot_menu.jsx
@@ -117,7 +117,7 @@ export default class DotMenu extends Component {
  const isSystemMessage = PostUtils.isSystemMessage(this.props.post);
  const isMobile = Utils.isMobile();
 
- if (this.props.idPrefix === Constants.CENTER && (!isMobile && isSystemMessage && !this.state.canDelete && !this.state.canEdit)) {
+ if (this.props.idPrefix === Constants.CENTER && ((!isMobile || isSystemMessage) && !this.state.canDelete && !this.state.canEdit)) {
  return null;
  }
 

diff --git a/components/navbar/index.js b/components/navbar/index.js
@@ -4,6 +4,7 @@
 import {connect} from 'react-redux';
 import {bindActionCreators} from 'redux';
 import {getConfig} from 'mattermost-redux/selectors/entities/general';
+import {isCurrentChannelReadOnly} from 'mattermost-redux/selectors/entities/channels';
 
 import {
  closeRightHandSide as closeRhs,
@@ -27,6 +28,7 @@ function mapStateToProps(state) {
  return {
  isPinnedPosts: rhsState === RHSStates.PIN,
  enableWebrtc,
+ isReadOnly: isCurrentChannelReadOnly(state),
  };
 }
 

diff --git a/components/navbar/navbar.jsx b/components/navbar/navbar.jsx
@@ -47,6 +47,7 @@ export default class Navbar extends React.Component {
  teamDisplayName: PropTypes.string,
  isPinnedPosts: PropTypes.bool,
  enableWebrtc: PropTypes.bool.isRequired,
+ isReadOnly: PropTypes.bool,
  actions: PropTypes.shape({
  updateRhsState: PropTypes.func,
  showPinnedPosts: PropTypes.func,
@@ -554,89 +555,91 @@ export default class Navbar extends React.Component {
  </li>
  );
 
- setChannelHeaderOption = (
- <ChannelPermissionGate
- channelId={channel.id}
- teamId={teamId}
- permissions={[isPrivate ? Permissions.MANAGE_PRIVATE_CHANNEL_PROPERTIES : Permissions.MANAGE_PUBLIC_CHANNEL_PROPERTIES]}
- >
- <li role='presentation'>
- <a
- role='menuitem'
- href='#'
- onClick={this.showEditChannelHeaderModal}
- >
- <FormattedMessage
- id='channel_header.setHeader'
- defaultMessage='Edit Channel Header'
- />
- </a>
- </li>
- </ChannelPermissionGate>
- );
+ if (!this.props.isReadOnly) {
+ setChannelHeaderOption = (
+ <ChannelPermissionGate
+ channelId={channel.id}
+ teamId={teamId}
+ permissions={[isPrivate ? Permissions.MANAGE_PRIVATE_CHANNEL_PROPERTIES : Permissions.MANAGE_PUBLIC_CHANNEL_PROPERTIES]}
+ >
+ <li role='presentation'>
+ <a
+ role='menuitem'
+ href='#'
+ onClick={this.showEditChannelHeaderModal}
+ >
+ <FormattedMessage
+ id='channel_header.setHeader'
+ defaultMessage='Edit Channel Header'
+ />
+ </a>
+ </li>
+ </ChannelPermissionGate>
+ );
 
- setChannelPurposeOption = (
- <ChannelPermissionGate
- channelId={channel.id}
- teamId={teamId}
- permissions={[isPrivate ? Permissions.MANAGE_PRIVATE_CHANNEL_PROPERTIES : Permissions.MANAGE_PUBLIC_CHANNEL_PROPERTIES]}
- >
- <li role='presentation'>
- <a
- role='menuitem'
- href='#'
- onClick={this.showChannelPurposeModal}
- >
- <FormattedMessage
- id='channel_header.setPurpose'
- defaultMessage='Edit Channel Purpose'
- />
- </a>
- </li>
- </ChannelPermissionGate>
- );
+  setChannelPurposeOption = (
+  <ChannelPermissionGate
+  channelId={channel.id}
+  teamId={teamId}
+  permissions={[isPrivate ? Permissions.MANAGE_PRIVATE_CHANNEL_PROPERTIES : Permissions.MANAGE_PUBLIC_CHANNEL_PROPERTIES]}
+  >
+  <li role='presentation'>
+  <a
+  role='menuitem'
+  href='#'
+  onClick={this.showChannelPurposeModal}
+  >
+  <FormattedMessage
+  id='channel_header.setPurpose'
+  defaultMessage='Edit Channel Purpose'
+  />
+  </a>
+  </li>
+  </ChannelPermissionGate>
+  );
 
- renameChannelOption = (
- <ChannelPermissionGate
- channelId={channel.id}
- teamId={teamId}
- permissions={[isPrivate ? Permissions.MANAGE_PRIVATE_CHANNEL_PROPERTIES : Permissions.MANAGE_PUBLIC_CHANNEL_PROPERTIES]}
- >
- <li role='presentation'>
- <a
- role='menuitem'
- href='#'
- onClick={this.showRenameChannelModal}
- >
- <FormattedMessage
- id='channel_header.rename'
- defaultMessage='Rename Channel'
- />
- </a>
- </li>
- </ChannelPermissionGate>
- );
+  renameChannelOption = (
+  <ChannelPermissionGate
+  channelId={channel.id}
+  teamId={teamId}
+  permissions={[isPrivate ? Permissions.MANAGE_PRIVATE_CHANNEL_PROPERTIES : Permissions.MANAGE_PUBLIC_CHANNEL_PROPERTIES]}
+  >
+  <li role='presentation'>
+  <a
+  role='menuitem'
+  href='#'
+  onClick={this.showRenameChannelModal}
+  >
+  <FormattedMessage
+  id='channel_header.rename'
+  defaultMessage='Rename Channel'
+  />
+  </a>
+  </li>
+  </ChannelPermissionGate>
+  );
 
- deleteChannelOption = (
- <ChannelPermissionGate
- channelId={channel.id}
- teamId={teamId}
- permissions={[isPrivate ? Permissions.DELETE_PRIVATE_CHANNEL : Permissions.DELETE_PUBLIC_CHANNEL]}
- >
- <li role='presentation'>
- <ToggleModalButton
- role='menuitem'
- dialogType={DeleteChannelModal}
- dialogProps={{channel}}
- >
- <FormattedMessage
- id='channel_header.delete'
- defaultMessage='Delete Channel'
- />
- </ToggleModalButton>
- </li>
- </ChannelPermissionGate>
- );
+ deleteChannelOption = (
+ <ChannelPermissionGate
+ channelId={channel.id}
+ teamId={teamId}
+ permissions={[isPrivate ? Permissions.DELETE_PRIVATE_CHANNEL : Permissions.DELETE_PUBLIC_CHANNEL]}
+ >
+ <li role='presentation'>
+ <ToggleModalButton
+ role='menuitem'
+ dialogType={DeleteChannelModal}
+ dialogProps={{channel}}
+ >
+ <FormattedMessage
+ id='channel_header.delete'
+ defaultMessage='Delete Channel'
+ />
+ </ToggleModalButton>
+ </li>
+ </ChannelPermissionGate>
+ );
+ }
 
  if (!ChannelStore.isDefault(channel)) {
  leaveChannelOption = (
@@ -942,6 +945,7 @@ export default class Navbar extends React.Component {
  ref='headerOverlay'
  channel={channel}
  showEditChannelHeaderModal={this.showEditChannelHeaderModal}
+ isReadOnly={this.props.isReadOnly}
  />
  <Pluggable pluggableName='MobileChannelHeaderButton'/>
  {channelMenuDropdown}

diff --git a/components/navbar/navbar_info_button.jsx b/components/navbar/navbar_info_button.jsx
@@ -13,6 +13,7 @@ export default class NavbarInfoButton extends React.PureComponent {
  static propTypes = {
  channel: PropTypes.object,
  showEditChannelHeaderModal: PropTypes.func.isRequired,
+ isReadOnly: PropTypes.bool,
  };
 
  showEditChannelHeaderModal = () => {
@@ -36,28 +37,38 @@ export default class NavbarInfoButton extends React.PureComponent {
  />
  );
  } else {
- const link = (
- <a
- href='#'
- onClick={this.showEditChannelHeaderModal}
- >
- <FormattedMessage
- id='navbar.click'
- defaultMessage='Click here'
- />
- </a>
- );
+ let addOne;
+ if (!this.props.isReadOnly) {
+ const link = (
+ <a
+ href='#'
+ onClick={this.showEditChannelHeaderModal}
+ >
+ <FormattedMessage
+ id='navbar.click'
+ defaultMessage='Click here'
+ />
+ </a>
+ );
+ addOne = (
+ <React.Fragment>
+ <br/>
+ <FormattedMessage
+ id='navbar.clickToAddHeader'
+ defaultMessage='{clickHere} to add one.'
+ values={{clickHere: link}}
+ />
+ </React.Fragment>
+ );
+ }
 
  popoverContent = (
  <div>
  <FormattedMessage
  id='navbar.noHeader'
- defaultMessage='No channel header yet.{newline}{link} to add one.'
- values={{
- newline: (<br/>),
- link,
- }}
+ defaultMessage='No channel header yet.'
  />
+ {addOne}
  </div>
  );
  }

diff --git a/components/post_view/post_info/post_info.jsx b/components/post_view/post_info/post_info.jsx
@@ -240,7 +240,7 @@ export default class PostInfo extends React.PureComponent {
  return (
  <div
  ref='dotMenu'
- className={'col col__reply' + (isReadOnly ? ' dot_small' : '')}
+ className={'col col__reply'}
  >
  {dotMenu}
  {react}

diff --git a/i18n/en.json b/i18n/en.json
@@ -2305,10 +2305,11 @@
  "multiselect.placeholder": "Search and add members",
  "navbar.addMembers": "Add Members",
  "navbar.click": "Click here",
+ "navbar.clickToAddHeader": "{clickHere} to add one.",
  "navbar.delete": "Delete Channel...",
  "navbar.leave": "Leave Channel",
  "navbar.manageMembers": "Manage Members",
- "navbar.noHeader": "No channel header yet.{newline}{link} to add one.",
+ "navbar.noHeader": "No channel header yet.",
  "navbar.preferences": "Notification Preferences",
  "navbar.rename": "Rename Channel...",
  "navbar.setHeader": "Set Channel Header...",

diff --git a/tests/components/dot_menu/__snapshots__/dot_menu.test.jsx.snap b/tests/components/dot_menu/__snapshots__/dot_menu.test.jsx.snap
@@ -75,63 +75,7 @@ exports[`components/dot_menu/DotMenu should match snapshot, canDelete 1`] = `
 </div>
 `;
 
-exports[`components/dot_menu/DotMenu should match snapshot, on Center 1`] = `
-<div
- className="dropdown"
- id={null}
->
- <div
- id="center_dropdownpost_id_1"
- >
- <button
- aria-expanded="false"
- className="dropdown-toggle post__dropdown color--link style--none"
- data-toggle="dropdown"
- type="button"
- />
- <div
- className="dropdown-menu__content"
- >
- <ul
- className="dropdown-menu"
- role="menu"
- >
- <DotMenuItem
- handleOnClick={[MockFunction]}
- idCount={-1}
- idPrefix="centerDotMenuReply"
- />
- <DotMenuItem
- idCount={-1}
- idPrefix="centerDotMenuPermalink"
- post={
- Object {
- "id": "post_id_1",
- "is_pinned": false,
- }
- }
- />
- <DotMenuItem
- actions={
- Object {
- "pinPost": [MockFunction],
- "unpinPost": [MockFunction],
- }
- }
- idCount={-1}
- idPrefix="centerDotMenuPin"
- post={
- Object {
- "id": "post_id_1",
- "is_pinned": false,
- }
- }
- />
- </ul>
- </div>
- </div>
-</div>
-`;
+exports[`components/dot_menu/DotMenu should match snapshot, on Center 1`] = `""`;
 
 exports[`components/dot_menu/DotMenu should match snapshot, on Center 2`] = `
 <div

diff --git a/tests/components/dot_menu/__snapshots__/dot_menu_mobile.test.jsx.snap b/tests/components/dot_menu/__snapshots__/dot_menu_mobile.test.jsx.snap
@@ -1,27 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`components/dot_menu/DotMenu on mobile view should match snapshot 1`] = `
-<div
- className="dropdown"
- id={null}
->
- <div
- id="center_dropdownpost_id_1"
- >
- <button
- aria-expanded="false"
- className="dropdown-toggle post__dropdown color--link style--none"
- data-toggle="dropdown"
- type="button"
- />
- <div
- className="dropdown-menu__content"
- >
- <ul
- className="dropdown-menu"
- role="menu"
- />
- </div>
- </div>
-</div>
-`;
+exports[`components/dot_menu/DotMenu on mobile view should match snapshot 1`] = `""`;