diff --git a/webapp/components/dot_menu/dot_menu.jsx b/webapp/components/dot_menu/dot_menu.jsx
new file mode 100644
index 0000000000..b5f9fde452
--- /dev/null
+++ b/webapp/components/dot_menu/dot_menu.jsx
@@ -0,0 +1,197 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import $ from 'jquery';
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
+
+import DotMenuFlag from './dot_menu_flag.jsx';
+import DotMenuItem from './dot_menu_item.jsx';
+import DotMenuEdit from './dot_menu_edit.jsx';
+
+import * as Utils from 'utils/utils.jsx';
+import * as PostUtils from 'utils/post_utils.jsx';
+import Constants from 'utils/constants.jsx';
+import DelayedAction from 'utils/delayed_action.jsx';
+
+export default class DotMenu extends Component {
+ static propTypes = {
+ idPrefix: PropTypes.string.isRequired,
+ idCount: PropTypes.number,
+ post: PropTypes.object.isRequired,
+ commentCount: PropTypes.number,
+ isFlagged: PropTypes.bool,
+ handleCommentClick: PropTypes.func,
+ handleDropdownOpened: PropTypes.func
+ }
+
+ static defaultProps = {
+ idCount: -1,
+ post: {},
+ commentCount: 0,
+ isFlagged: false
+ }
+
+ constructor(props) {
+ super(props);
+
+ this.handleDropdownOpened = this.handleDropdownOpened.bind(this);
+ this.canDelete = false;
+ this.canEdit = false;
+ this.editDisableAction = new DelayedAction(this.handleEditDisable);
+ }
+
+ componentDidMount() {
+ $('#' + this.props.idPrefix + '_dropdown' + this.props.post.id).on('shown.bs.dropdown', this.handleDropdownOpened);
+ $('#' + this.props.idPrefix + '_dropdown' + this.props.post.id).on('hidden.bs.dropdown', () => this.props.handleDropdownOpened(false));
+ }
+
+ handleDropdownOpened() {
+ this.props.handleDropdownOpened(true);
+
+ const position = $('#post-list').height() - $(this.refs.dropdownToggle).offset().top;
+ const dropdown = $(this.refs.dropdown);
+
+ if (position < dropdown.height()) {
+ dropdown.addClass('bottom');
+ }
+ }
+
+ handleEditDisable() {
+ this.canEdit = false;
+ }
+
+ render() {
+ const isSystemMessage = PostUtils.isSystemMessage(this.props.post);
+ const isMobile = Utils.isMobile();
+ this.canDelete = PostUtils.canDeletePost(this.props.post);
+ this.canEdit = PostUtils.canEditPost(this.props.post, this.editDisableAction);
+
+ if (this.props.idPrefix === Constants.CENTER && (!isMobile && isSystemMessage && !this.canDelete && !this.canEdit)) {
+ return null;
+ }
+
+ if (this.props.idPrefix === Constants.RHS && (this.props.post.state === Constants.POST_FAILED || this.props.post.state === Constants.POST_LOADING)) {
+ return null;
+ }
+
+ let type = 'Post';
+ if (this.props.post.root_id && this.props.post.root_id.length > 0) {
+ type = 'Comment';
+ }
+
+ const idPrefix = this.props.idPrefix + 'DotMenu';
+
+ let dotMenuFlag = null;
+ if (isMobile) {
+ dotMenuFlag = (
+
+ );
+ }
+
+ let dotMenuReply = null;
+ let dotMenuPermalink = null;
+ let dotMenuPin = null;
+ if (!isSystemMessage) {
+ if (this.props.idPrefix === Constants.CENTER) {
+ dotMenuReply = (
+
+ );
+ }
+
+ dotMenuPermalink = (
+
+ );
+
+ dotMenuPin = (
+
+ );
+ }
+
+ let dotMenuDelete = null;
+ if (this.canDelete) {
+ dotMenuDelete = (
+
+ );
+ }
+
+ let dotMenuEdit = null;
+ if (this.canEdit) {
+ dotMenuEdit = (
+
+ );
+ }
+
+ let dotMenuId = null;
+ if (this.props.idCount > -1) {
+ dotMenuId = Utils.createSafeId(idPrefix + this.props.idCount);
+ }
+
+ if (this.props.idPrefix === Constants.RHS_ROOT) {
+ dotMenuId = idPrefix;
+ }
+
+ return (
+
+ );
+ }
+}
diff --git a/webapp/components/dot_menu/dot_menu_edit.jsx b/webapp/components/dot_menu/dot_menu_edit.jsx
new file mode 100644
index 0000000000..2ee0947e4a
--- /dev/null
+++ b/webapp/components/dot_menu/dot_menu_edit.jsx
@@ -0,0 +1,58 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import React from 'react';
+import {FormattedMessage} from 'react-intl';
+import PropTypes from 'prop-types';
+
+import * as Utils from 'utils/utils.jsx';
+import Constants from 'utils/constants.jsx';
+
+export default function DotMenuEdit(props) {
+ let editId = null;
+ if (props.idCount > -1) {
+ editId = Utils.createSafeId(props.idPrefix + props.idCount);
+ }
+
+ if (props.idPrefix.indexOf(Constants.RHS_ROOT) === 0) {
+ editId = props.idPrefix;
+ }
+
+ return (
+
+
+
+
+
+ );
+}
+
+DotMenuEdit.propTypes = {
+ idPrefix: PropTypes.string.isRequired,
+ idCount: PropTypes.number,
+ post: PropTypes.object,
+ type: PropTypes.string,
+ commentCount: PropTypes.number
+};
+
+DotMenuEdit.defaultProps = {
+ idCount: -1
+};
diff --git a/webapp/components/dot_menu/dot_menu_flag.jsx b/webapp/components/dot_menu/dot_menu_flag.jsx
new file mode 100644
index 0000000000..1053632111
--- /dev/null
+++ b/webapp/components/dot_menu/dot_menu_flag.jsx
@@ -0,0 +1,70 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import React from 'react';
+import {FormattedMessage} from 'react-intl';
+import PropTypes from 'prop-types';
+
+import {flagPost, unflagPost} from 'actions/post_actions.jsx';
+import * as Utils from 'utils/utils.jsx';
+import Constants from 'utils/constants.jsx';
+
+function formatMessage(isFlagged) {
+ return (
+
+ );
+}
+
+export default function DotMenuFlag(props) {
+ function onFlagPost(e) {
+ e.preventDefault();
+ flagPost(props.postId);
+ }
+
+ function onUnflagPost(e) {
+ e.preventDefault();
+ unflagPost(props.postId);
+ }
+
+ const flagFunc = props.isFlagged ? onUnflagPost : onFlagPost;
+
+ let flagId = null;
+ if (props.idCount > -1) {
+ flagId = Utils.createSafeId(props.idPrefix + props.idCount);
+ }
+
+ if (props.idPrefix.indexOf(Constants.RHS_ROOT) === 0) {
+ flagId = props.idPrefix;
+ }
+
+ return (
+
+
+ {formatMessage(props.isFlagged)}
+
+
+ );
+}
+
+DotMenuFlag.propTypes = {
+ idCount: PropTypes.number,
+ idPrefix: PropTypes.string.isRequired,
+ postId: PropTypes.string.isRequired,
+ isFlagged: PropTypes.bool.isRequired
+};
+
+DotMenuFlag.defaultProps = {
+ idCount: -1,
+ postId: '',
+ isFlagged: false
+};
diff --git a/webapp/components/dot_menu/dot_menu_item.jsx b/webapp/components/dot_menu/dot_menu_item.jsx
new file mode 100644
index 0000000000..ceda0a1a4c
--- /dev/null
+++ b/webapp/components/dot_menu/dot_menu_item.jsx
@@ -0,0 +1,107 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import React from 'react';
+import {FormattedMessage} from 'react-intl';
+import PropTypes from 'prop-types';
+
+import {unpinPost, pinPost} from 'actions/post_actions.jsx';
+import {showGetPostLinkModal, showDeletePostModal} from 'actions/global_actions.jsx';
+import * as Utils from 'utils/utils.jsx';
+import Constants from 'utils/constants.jsx';
+
+export default function DotMenuItem(props) {
+ function handlePermalink(e) {
+ e.preventDefault();
+ showGetPostLinkModal(props.post);
+ }
+
+ function handleUnpinPost(e) {
+ e.preventDefault();
+ unpinPost(props.post.channel_id, props.post.id);
+ }
+
+ function handlePinPost(e) {
+ e.preventDefault();
+ pinPost(props.post.channel_id, props.post.id);
+ }
+
+ function handleDeletePost(e) {
+ e.preventDefault();
+ showDeletePostModal(props.post, props.commentCount);
+ }
+
+ const attrib = {};
+ attrib.idPrefix = props.idPrefix;
+ attrib.class = '';
+
+ switch (props.idPrefix.substring((props.idPrefix.indexOf('DotMenu') + 7))) {
+ case 'Reply':
+ attrib.class = 'link__reply theme';
+ attrib.onClick = props.handleOnClick;
+ attrib.formattedMessageId = 'post_info.reply';
+ attrib.formattedDefaultMessage = 'Reply';
+ break;
+ case 'Permalink':
+ attrib.onClick = handlePermalink;
+ attrib.formattedMessageId = 'post_info.permalink';
+ attrib.formattedDefaultMessage = 'Permalink';
+ attrib.post = props.post;
+ break;
+ case 'Pin':
+ attrib.onClick = props.post.is_pinned ? handleUnpinPost : handlePinPost;
+ attrib.formattedMessageId = props.post.is_pinned ? 'post_info.unpin' : 'post_info.pin';
+ attrib.formattedDefaultMessage = props.post.is_pinned ? 'Un-pin from channel' : 'Pin from channel';
+ attrib.post = props.post;
+ break;
+ case 'Delete':
+ attrib.onClick = handleDeletePost;
+ attrib.formattedMessageId = 'post_info.del';
+ attrib.formattedDefaultMessage = 'Delete';
+ attrib.commentCount = props.commentCount;
+ break;
+ default:
+ }
+
+ let itemId = null;
+ if (props.idCount > -1) {
+ itemId = Utils.createSafeId(props.idPrefix + props.idCount);
+ }
+
+ if (attrib.idPrefix.indexOf(Constants.RHS_ROOT) === 0) {
+ itemId = attrib.idPrefix;
+ }
+
+ return (
+
+
+
+
+
+ );
+}
+
+DotMenuItem.propTypes = {
+ idPrefix: PropTypes.string.isRequired,
+ idCount: PropTypes.number,
+ post: PropTypes.object,
+ handleOnClick: PropTypes.func,
+ type: PropTypes.string,
+ commentCount: PropTypes.number
+};
+
+DotMenuItem.defaultProps = {
+ idPrefix: '',
+ idCount: -1
+};
diff --git a/webapp/components/post_view/components/post_info.jsx b/webapp/components/post_view/components/post_info.jsx
index 45c716ad09..20c37ee72e 100644
--- a/webapp/components/post_view/components/post_info.jsx
+++ b/webapp/components/post_view/components/post_info.jsx
@@ -1,10 +1,9 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
-import $ from 'jquery';
-
import PostTime from './post_time.jsx';
import PostFlagIcon from 'components/common/post_flag_icon.jsx';
+import DotMenu from 'components/dot_menu/dot_menu.jsx';
import * as GlobalActions from 'actions/global_actions.jsx';
import * as PostActions from 'actions/post_actions.jsx';
@@ -13,7 +12,6 @@ import CommentIcon from 'components/common/comment_icon.jsx';
import * as Utils from 'utils/utils.jsx';
import * as PostUtils from 'utils/post_utils.jsx';
import Constants from 'utils/constants.jsx';
-import DelayedAction from 'utils/delayed_action.jsx';
import EmojiPickerOverlay from 'components/emoji_picker/emoji_picker_overlay.jsx';
import ChannelStore from 'stores/channel_store.jsx';
@@ -26,257 +24,15 @@ export default class PostInfo extends React.Component {
constructor(props) {
super(props);
- this.handleDropdownOpened = this.handleDropdownOpened.bind(this);
- this.handlePermalink = this.handlePermalink.bind(this);
this.removePost = this.removePost.bind(this);
- this.flagPost = this.flagPost.bind(this);
- this.unflagPost = this.unflagPost.bind(this);
- this.pinPost = this.pinPost.bind(this);
- this.unpinPost = this.unpinPost.bind(this);
this.reactEmojiClick = this.reactEmojiClick.bind(this);
- this.canEdit = false;
- this.canDelete = false;
- this.editDisableAction = new DelayedAction(this.handleEditDisable);
-
this.state = {
showEmojiPicker: false,
reactionPickerOffset: 21
};
}
- handleDropdownOpened() {
- this.props.handleDropdownOpened(true);
-
- const position = $('#post-list').height() - $(this.refs.dropdownToggle).offset().top;
- const dropdown = $(this.refs.dropdown);
-
- if (position < dropdown.height()) {
- dropdown.addClass('bottom');
- }
- }
-
- handleEditDisable() {
- this.canEdit = false;
- }
-
- componentDidMount() {
- $('#post_dropdown' + this.props.post.id).on('shown.bs.dropdown', this.handleDropdownOpened);
- $('#post_dropdown' + this.props.post.id).on('hidden.bs.dropdown', () => this.props.handleDropdownOpened(false));
- }
-
- createDropdown(isSystemMessage) {
- const post = this.props.post;
-
- var type = 'Post';
- if (post.root_id && post.root_id.length > 0) {
- type = 'Comment';
- }
-
- var dropdownContents = [];
- var dataComments = 0;
- if (type === 'Post') {
- dataComments = this.props.commentCount;
- }
-
- if (!isSystemMessage) {
- dropdownContents.push(
-
-
-
-
-
- );
- }
-
- if (Utils.isMobile()) {
- if (this.props.isFlagged) {
- dropdownContents.push(
-
-
-
-
-
- );
- } else {
- dropdownContents.push(
-
-
-
-
-
- );
- }
- }
-
- if (!isSystemMessage) {
- dropdownContents.push(
-
-
-
-
-
- );
-
- if (this.props.post.is_pinned) {
- dropdownContents.push(
-
-
-
-
-
- );
- } else {
- dropdownContents.push(
-
-
-
-
-
- );
- }
- }
-
- if (this.canDelete) {
- dropdownContents.push(
-
- {
- e.preventDefault();
- GlobalActions.showDeletePostModal(post, dataComments);
- }}
- >
-
-
-
- );
- }
-
- if (this.canEdit) {
- dropdownContents.push(
-
-
-
-
-
- );
- }
-
- if (dropdownContents.length === 0) {
- return '';
- }
-
- return (
-
- );
- }
-
- handlePermalink(e) {
- e.preventDefault();
- GlobalActions.showGetPostLinkModal(this.props.post);
- }
-
toggleEmojiPicker = () => {
const showEmojiPicker = !this.state.showEmojiPicker;
@@ -306,26 +62,6 @@ export default class PostInfo extends React.Component {
);
}
- pinPost(e) {
- e.preventDefault();
- PostActions.pinPost(this.props.post.channel_id, this.props.post.id);
- }
-
- unpinPost(e) {
- e.preventDefault();
- PostActions.unpinPost(this.props.post.channel_id, this.props.post.id);
- }
-
- flagPost(e) {
- e.preventDefault();
- PostActions.flagPost(this.props.post.id);
- }
-
- unflagPost(e) {
- e.preventDefault();
- PostActions.unflagPost(this.props.post.id);
- }
-
reactEmojiClick(emoji) {
const pickerOffset = 21;
this.setState({showEmojiPicker: false, reactionPickerOffset: pickerOffset});
@@ -345,9 +81,6 @@ export default class PostInfo extends React.Component {
idCount = this.props.lastPostCount;
}
- this.canDelete = PostUtils.canDeletePost(post);
- this.canEdit = PostUtils.canEditPost(post, this.editDisableAction);
-
const isEphemeral = Utils.isPostEphemeral(post);
const isPending = post.state === Constants.POST_FAILED || post.state === Constants.POST_LOADING;
const isSystemMessage = PostUtils.isSystemMessage(post);
@@ -395,20 +128,25 @@ export default class PostInfo extends React.Component {
);
} else if (!isPending) {
- const dropdown = this.createDropdown(isSystemMessage);
+ const dotMenu = (
+
+ );
- if (dropdown) {
+ if (dotMenu) {
options = (
-
- {dropdown}
-
+ {dotMenu}
{react}
{comments}