From 0e89d9be1d6a2a1ca470f9ca92e0d59e5945ca18 Mon Sep 17 00:00:00 2001 From: Saturnino Abril Date: Thu, 15 Jun 2017 07:45:46 +0800 Subject: create DotMenu components and add dotmenu IDs to posts at center and RHS (#6642) --- webapp/components/dot_menu/dot_menu.jsx | 197 +++++++++++++++++++++++++++ webapp/components/dot_menu/dot_menu_edit.jsx | 58 ++++++++ webapp/components/dot_menu/dot_menu_flag.jsx | 70 ++++++++++ webapp/components/dot_menu/dot_menu_item.jsx | 107 +++++++++++++++ 4 files changed, 432 insertions(+) create mode 100644 webapp/components/dot_menu/dot_menu.jsx create mode 100644 webapp/components/dot_menu/dot_menu_edit.jsx create mode 100644 webapp/components/dot_menu/dot_menu_flag.jsx create mode 100644 webapp/components/dot_menu/dot_menu_item.jsx (limited to 'webapp/components/dot_menu') diff --git a/webapp/components/dot_menu/dot_menu.jsx b/webapp/components/dot_menu/dot_menu.jsx new file mode 100644 index 000000000..b5f9fde45 --- /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 ( + + ); +} + +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 000000000..105363211 --- /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 000000000..ceda0a1a4 --- /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 +}; -- cgit v1.2.3-1-g7c22