diff options
Diffstat (limited to 'web/react/components/post_info.jsx')
-rw-r--r-- | web/react/components/post_info.jsx | 75 |
1 files changed, 69 insertions, 6 deletions
diff --git a/web/react/components/post_info.jsx b/web/react/components/post_info.jsx index 5306edd3d..cedb2b59b 100644 --- a/web/react/components/post_info.jsx +++ b/web/react/components/post_info.jsx @@ -1,22 +1,30 @@ // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. // See License.txt for license information. -import DeletePostModal from './delete_post_modal.jsx'; import UserStore from '../stores/user_store.jsx'; -import * as utils from '../utils/utils.jsx'; +import TeamStore from '../stores/team_store.jsx'; +import * as Utils from '../utils/utils.jsx'; import TimeSince from './time_since.jsx'; +import * as EventHelpers from '../dispatcher/event_helpers.jsx'; import Constants from '../utils/constants.jsx'; +const OverlayTrigger = ReactBootstrap.OverlayTrigger; +const Popover = ReactBootstrap.Popover; + export default class PostInfo extends React.Component { constructor(props) { super(props); - this.state = {}; + this.state = { + copiedLink: false + }; + + this.handlePermalinkCopy = this.handlePermalinkCopy.bind(this); } createDropdown() { var post = this.props.post; var isOwner = UserStore.getCurrentId() === post.user_id; - var isAdmin = utils.isAdmin(UserStore.getCurrentUser().roles); + var isAdmin = Utils.isAdmin(UserStore.getCurrentUser().roles); if (post.state === Constants.POST_FAILED || post.state === Constants.POST_LOADING || post.state === Constants.POST_DELETED) { return ''; @@ -66,7 +74,7 @@ export default class PostInfo extends React.Component { <a href='#' role='menuitem' - onClick={() => DeletePostModal.show(post, dataComments)} + onClick={() => EventHelpers.showDeletePostModal(post, dataComments)} > {'Delete'} </a> @@ -81,7 +89,7 @@ export default class PostInfo extends React.Component { role='presentation' > <a - className='reply-link visible-xs theme' + className='link__reply theme' href='#' onClick={this.props.handleCommentClick} > @@ -113,6 +121,21 @@ export default class PostInfo extends React.Component { </div> ); } + handlePermalinkCopy() { + const textBox = $(ReactDOM.findDOMNode(this.refs.permalinkbox)); + textBox.select(); + + try { + const successful = document.execCommand('copy'); + if (successful) { + this.setState({copiedLink: true}); + } else { + this.setState({copiedLink: false}); + } + } catch (err) { + this.setState({copiedLink: false}); + } + } render() { var post = this.props.post; var comments = ''; @@ -143,6 +166,37 @@ export default class PostInfo extends React.Component { var dropdown = this.createDropdown(); + const permalink = TeamStore.getCurrentTeamUrl() + '/pl/' + post.id; + const copyButtonText = this.state.copiedLink ? (<div>{'Copy '}<i className='fa fa-check'/></div>) : 'Copy'; + const permalinkOverlay = ( + <Popover + id='permalink-overlay' + className='permalink-popover' + placement='left' + title='' + > + <div className='form-inline'> + <input + type='text' + readOnly='true' + ref='permalinkbox' + className='permalink-text form-control no-resize min-height input-large' + rows='1' + value={permalink} + /> + <button + data-copy-btn='true' + type='button' + className='btn btn-primary' + onClick={this.handlePermalinkCopy} + data-clipboard-text={permalink} + > + {copyButtonText} + </button> + </div> + </Popover> + ); + return ( <ul className='post__header post__header--info'> <li className='col'> @@ -152,6 +206,15 @@ export default class PostInfo extends React.Component { </li> <li className='col col__reply'> {comments} + <OverlayTrigger + trigger='click' + placement='left' + rootClose={true} + overlay={permalinkOverlay} + > + <i className={'permalink-icon fa fa-link ' + showCommentClass}/> + </OverlayTrigger> + <div className='dropdown'> {dropdown} </div> |