diff --git a/web/react/components/post_info.jsx b/web/react/components/post_info.jsx
index cedb2b59b3..9c53704b8d 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);
@@ -99,6 +100,20 @@ export default class PostInfo extends React.Component {
);
}
+ dropdownContents.push(
+
+ this.setState({target: e.target, show: !this.state.show})}
+ >
+ {'Permalink'}
+
+
+ );
+
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});
}
@@ -167,7 +183,7 @@ export default class PostInfo extends React.Component {
var dropdown = this.createDropdown();
const permalink = TeamStore.getCurrentTeamUrl() + '/pl/' + post.id;
- const copyButtonText = this.state.copiedLink ? ({'Copy '}
) : 'Copy';
+ const copyButtonText = this.state.copiedLink ? ({'Copy X '}
) : 'Copy X';
const permalinkOverlay = (
);
+ 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 ed16326811..4e9c4a9cff 100644
--- a/web/sass-files/sass/partials/_post.scss
+++ b/web/sass-files/sass/partials/_post.scss
@@ -564,7 +564,6 @@ body.ios {
display: inline-block;
visibility: hidden;
top: -1px;
- float: right;
.dropdown-menu {
right: 0;
@@ -794,4 +793,5 @@ body.ios {
.permalink-popover {
min-width: 320px;
+ margin-left: 50px !important;
}