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>
         );