diff options
author | Corey Hulen <corey@hulen.com> | 2015-12-04 15:20:37 -0800 |
---|---|---|
committer | Corey Hulen <corey@hulen.com> | 2015-12-04 15:20:37 -0800 |
commit | 8ae357c535d3f8068cd0e42ed00d48061e3ffa1d (patch) | |
tree | 65e3f7a33c3118a815592af76eb69e89c857e503 /web/react/components/post_info.jsx | |
parent | 1bee1e06e4d0110db274c076860fa97f76471ddb (diff) | |
parent | d4db4545f599bbf1558302b09f038fd6736f5d7f (diff) | |
download | chat-8ae357c535d3f8068cd0e42ed00d48061e3ffa1d.tar.gz chat-8ae357c535d3f8068cd0e42ed00d48061e3ffa1d.tar.bz2 chat-8ae357c535d3f8068cd0e42ed00d48061e3ffa1d.zip |
Merge pull request #1571 from mattermost/PLT-1310
PLT-1310 moving permalink to dropdown
Diffstat (limited to 'web/react/components/post_info.jsx')
-rw-r--r-- | web/react/components/post_info.jsx | 81 |
1 files changed, 52 insertions, 29 deletions
diff --git a/web/react/components/post_info.jsx b/web/react/components/post_info.jsx index cedb2b59b..0b8b07d8c 100644 --- a/web/react/components/post_info.jsx +++ b/web/react/components/post_info.jsx @@ -9,14 +9,15 @@ import * as EventHelpers from '../dispatcher/event_helpers.jsx'; import Constants from '../utils/constants.jsx'; -const OverlayTrigger = ReactBootstrap.OverlayTrigger; +const Overlay = ReactBootstrap.Overlay; const Popover = ReactBootstrap.Popover; export default class PostInfo extends React.Component { constructor(props) { super(props); this.state = { - copiedLink: false + copiedLink: false, + show: false }; this.handlePermalinkCopy = this.handlePermalinkCopy.bind(this); @@ -41,30 +42,37 @@ export default class PostInfo extends React.Component { dataComments = this.props.commentCount; } - if (isOwner) { + if (this.props.allowReply === 'true') { dropdownContents.push( <li - key='editPost' + key='replyLink' role='presentation' > <a + className='link__reply theme' href='#' - role='menuitem' - data-toggle='modal' - data-target='#edit_post' - data-refocusid='#post_textbox' - data-title={type} - data-message={post.message} - data-postid={post.id} - data-channelid={post.channel_id} - data-comments={dataComments} + onClick={this.props.handleCommentClick} > - {'Edit'} + {'Reply'} </a> </li> ); } + dropdownContents.push( + <li + key='copyLink' + role='presentation' + > + <a + href='#' + onClick={(e) => this.setState({target: e.target, show: !this.state.show})} + > + {'Permalink'} + </a> + </li> + ); + if (isOwner || isAdmin) { dropdownContents.push( <li @@ -82,18 +90,25 @@ export default class PostInfo extends React.Component { ); } - if (this.props.allowReply === 'true') { + if (isOwner) { dropdownContents.push( <li - key='replyLink' + key='editPost' role='presentation' > <a - className='link__reply theme' href='#' - onClick={this.props.handleCommentClick} + role='menuitem' + data-toggle='modal' + data-target='#edit_post' + data-refocusid='#post_textbox' + data-title={type} + data-message={post.message} + data-postid={post.id} + data-channelid={post.channel_id} + data-comments={dataComments} > - {'Reply'} + {'Edit'} </a> </li> ); @@ -121,6 +136,7 @@ export default class PostInfo extends React.Component { </div> ); } + handlePermalinkCopy() { const textBox = $(ReactDOM.findDOMNode(this.refs.permalinkbox)); textBox.select(); @@ -128,7 +144,7 @@ export default class PostInfo extends React.Component { try { const successful = document.execCommand('copy'); if (successful) { - this.setState({copiedLink: true}); + this.setState({copiedLink: true, show: false}); } else { this.setState({copiedLink: false}); } @@ -197,6 +213,8 @@ export default class PostInfo extends React.Component { </Popover> ); + const containerPadding = 20; + return ( <ul className='post__header post__header--info'> <li className='col'> @@ -206,18 +224,23 @@ export default class PostInfo extends React.Component { </li> <li className='col col__reply'> {comments} - <OverlayTrigger - trigger='click' - placement='left' - rootClose={true} - overlay={permalinkOverlay} + <div + className='dropdown' + ref='dotMenu' > - <i className={'permalink-icon fa fa-link ' + showCommentClass}/> - </OverlayTrigger> - - <div className='dropdown'> {dropdown} </div> + <Overlay + show={this.state.show} + target={() => ReactDOM.findDOMNode(this.refs.dotMenu)} + onHide={() => this.setState({show: false})} + placement='left' + container={this} + containerPadding={containerPadding} + rootClose={true} + > + {permalinkOverlay} + </Overlay> </li> </ul> ); |