Merge pull request #1571 from mattermost/PLT-1310

PLT-1310 moving permalink to dropdown

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(
+                <li
+                    key='replyLink'
+                    role='presentation'
+                >
+                    <a
+                        className='link__reply theme'
+                        href='#'
+                        onClick={this.props.handleCommentClick}
+                    >
+                        {'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
+                    key='deletePost'
+                    role='presentation'
+                >
+                    <a
+                        href='#'
+                        role='menuitem'
+                        onClick={() => EventHelpers.showDeletePostModal(post, dataComments)}
+                    >
+                        {'Delete'}
+                    </a>
+                </li>
+            );
+        }
+
         if (isOwner) {
             dropdownContents.push(
                 <li
@@ -65,40 +114,6 @@ export default class PostInfo extends React.Component {
             );
         }
 
-        if (isOwner || isAdmin) {
-            dropdownContents.push(
-                <li
-                    key='deletePost'
-                    role='presentation'
-                >
-                    <a
-                        href='#'
-                        role='menuitem'
-                        onClick={() => EventHelpers.showDeletePostModal(post, dataComments)}
-                    >
-                        {'Delete'}
-                    </a>
-                </li>
-            );
-        }
-
-        if (this.props.allowReply === 'true') {
-            dropdownContents.push(
-                <li
-                    key='replyLink'
-                    role='presentation'
-                >
-                    <a
-                        className='link__reply theme'
-                        href='#'
-                        onClick={this.props.handleCommentClick}
-                    >
-                        {'Reply'}
-                    </a>
-                </li>
-            );
-        }
-
         if (dropdownContents.length === 0) {
             return '';
         }
@@ -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>
         );

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