diff --git a/web/react/components/post_info.jsx b/web/react/components/post_info.jsx
index cedb2b59b3..0b8b07d8c5 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,6 +42,54 @@ export default class PostInfo extends React.Component {
dataComments = this.props.commentCount;
}
+ if (this.props.allowReply === 'true') {
+ dropdownContents.push(
+
+
+ {'Reply'}
+
+
+ );
+ }
+
+ dropdownContents.push(
+
+ this.setState({target: e.target, show: !this.state.show})}
+ >
+ {'Permalink'}
+
+
+ );
+
+ if (isOwner || isAdmin) {
+ dropdownContents.push(
+
+ EventHelpers.showDeletePostModal(post, dataComments)}
+ >
+ {'Delete'}
+
+
+ );
+ }
+
if (isOwner) {
dropdownContents.push(
- EventHelpers.showDeletePostModal(post, dataComments)}
- >
- {'Delete'}
-
-
- );
- }
-
- if (this.props.allowReply === 'true') {
- dropdownContents.push(
-
-
- {'Reply'}
-
-
- );
- }
-
if (dropdownContents.length === 0) {
return '';
}
@@ -121,6 +136,7 @@ export default class PostInfo extends React.Component {
);
}
+
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 {
);
+ const containerPadding = 20;
+
return (
-
@@ -206,18 +224,23 @@ export default class PostInfo extends React.Component {
-
{comments}
-
-
-
-
-
{dropdown}
+ ReactDOM.findDOMNode(this.refs.dotMenu)}
+ onHide={() => this.setState({show: false})}
+ placement='left'
+ container={this}
+ containerPadding={containerPadding}
+ rootClose={true}
+ >
+ {permalinkOverlay}
+
);
diff --git a/web/sass-files/sass/partials/_post.scss b/web/sass-files/sass/partials/_post.scss
index 4376b43a42..0344d71fda 100644
--- a/web/sass-files/sass/partials/_post.scss
+++ b/web/sass-files/sass/partials/_post.scss
@@ -568,7 +568,6 @@ body.ios {
display: inline-block;
visibility: hidden;
top: -1px;
- float: right;
.dropdown-menu {
right: 0;
@@ -805,4 +804,5 @@ body.ios {
.permalink-popover {
min-width: 320px;
+ margin-left: 50px !important;
}