Skip to content
This repository has been archived by the owner on Mar 13, 2024. It is now read-only.

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

Merged
merged 2 commits into from
Apr 20, 2018
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cb03e61
Changes for Town Square read only on web small screen size. Overlay m…
Apr 12, 2018
0245282
fix bug that displays dot menu with empty option on small screen devi…
Apr 16, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion components/dot_menu/dot_menu.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand Down
2 changes: 2 additions & 0 deletions components/navbar/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -27,6 +28,7 @@ function mapStateToProps(state) {
return {
isPinnedPosts: rhsState === RHSStates.PIN,
enableWebrtc,
isReadOnly: isCurrentChannelReadOnly(state),
};
}

Expand Down
164 changes: 84 additions & 80 deletions components/navbar/navbar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -556,89 +557,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 = (
Expand Down Expand Up @@ -944,6 +947,7 @@ export default class Navbar extends React.Component {
ref='headerOverlay'
channel={channel}
showEditChannelHeaderModal={this.showEditChannelHeaderModal}
isReadOnly={this.props.isReadOnly}
/>
<Pluggable pluggableName='MobileChannelHeaderButton'/>
{channelMenuDropdown}
Expand Down
43 changes: 27 additions & 16 deletions components/navbar/navbar_info_button.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ export default class NavbarInfoButton extends React.PureComponent {
static propTypes = {
channel: PropTypes.object,
showEditChannelHeaderModal: PropTypes.func.isRequired,
isReadOnly: PropTypes.bool,
};

showEditChannelHeaderModal = () => {
Expand All @@ -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>
);
}
Expand Down
2 changes: 1 addition & 1 deletion components/post_view/post_info/post_info.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
3 changes: 2 additions & 1 deletion i18n/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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...",
Expand Down
58 changes: 1 addition & 57 deletions tests/components/dot_menu/__snapshots__/dot_menu.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
26 changes: 1 addition & 25 deletions tests/components/dot_menu/__snapshots__/dot_menu_mobile.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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`] = `""`;
Loading