summaryrefslogtreecommitdiffstats
path: root/web/react/components/post_info.jsx
diff options
context:
space:
mode:
Diffstat (limited to 'web/react/components/post_info.jsx')
-rw-r--r--web/react/components/post_info.jsx81
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>
);