Replaced Permalink popover with a Permalink modal

web/react/components/get_post_link_modal.jsx

@@ -0,0 +1,76 @@
+// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import Constants from '../utils/constants.jsx';
+import GetLinkModal from './get_link_modal.jsx';
+import ModalStore from '../stores/modal_store.jsx';
+import TeamStore from '../stores/team_store.jsx';
+
+import {intlShape, injectIntl, defineMessages} from 'mm-intl';
+
+const holders = defineMessages({
+    title: {
+        id: 'get_post_link_modal.title',
+        defaultMessage: 'Copy Permalink'
+    },
+    help: {
+        id: 'get_post_link_modal.help',
+        defaultMessage: 'The link below allows authorized users to see your post.'
+    }
+});
+
+class GetPostLinkModal extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.handleToggle = this.handleToggle.bind(this);
+
+        this.hide = this.hide.bind(this);
+
+        this.state = {
+            show: false,
+            post: {}
+        };
+    }
+
+    componentDidMount() {
+        ModalStore.addModalListener(Constants.ActionTypes.TOGGLE_GET_POST_LINK_MODAL, this.handleToggle);
+    }
+
+    componentWillUnmount() {
+        ModalStore.removeModalListener(Constants.ActionTypes.TOGGLE_GET_POST_LINK_MODAL, this.handleToggle);
+    }
+
+    handleToggle(value, args) {
+        this.setState({
+            show: value,
+            post: args.post
+        });
+    }
+
+    hide() {
+        this.setState({
+            show: false
+        });
+    }
+
+    render() {
+        const {formatMessage} = this.props.intl;
+
+        return (
+            <GetLinkModal
+                show={this.state.show}
+                onHide={this.hide}
+                title={formatMessage(holders.title)}
+                helpText={formatMessage(holders.help)}
+                link={TeamStore.getCurrentTeamUrl() + '/pl/' + this.state.post.id}
+            />
+        );
+    }
+}
+
+GetPostLinkModal.propTypes = {
+    intl: intlShape.isRequired
+};
+
+export default injectIntl(GetPostLinkModal);

web/react/components/post_info.jsx

@@ -2,7 +2,6 @@
 // See License.txt for license information.
 
 import UserStore from '../stores/user_store.jsx';
-import TeamStore from '../stores/team_store.jsx';
 import * as Utils from '../utils/utils.jsx';
 import TimeSince from './time_since.jsx';
 import * as EventHelpers from '../dispatcher/event_helpers.jsx';
@@ -11,18 +10,11 @@ import Constants from '../utils/constants.jsx';
 
 import {FormattedMessage} from 'mm-intl';
 
-const Overlay = ReactBootstrap.Overlay;
-const Popover = ReactBootstrap.Popover;
-
 export default class PostInfo extends React.Component {
     constructor(props) {
         super(props);
-        this.state = {
-            copiedLink: false,
-            show: false
-        };
 
-        this.handlePermalinkCopy = this.handlePermalinkCopy.bind(this);
+        this.handlePermalink = this.handlePermalink.bind(this);
         this.removePost = this.removePost.bind(this);
     }
     createDropdown() {
@@ -72,7 +64,7 @@ export default class PostInfo extends React.Component {
             >
                 <a
                     href='#'
-                    onClick={(e) => this.setState({target: e.target, show: !this.state.show})}
+                    onClick={this.handlePermalink}
                 >
                     <FormattedMessage
                         id='post_info.permalink'
@@ -152,21 +144,10 @@ export default class PostInfo extends React.Component {
         );
     }
 
-    handlePermalinkCopy() {
+    handlePermalink() {
-        const textBox = $(ReactDOM.findDOMNode(this.refs.permalinkbox));
+        EventHelpers.showGetPostLinkModal(this.props.post);
-        textBox.select();
-
-        try {
-            const successful = document.execCommand('copy');
-            if (successful) {
-                this.setState({copiedLink: true, show: false});
-            } else {
-                this.setState({copiedLink: false});
-            }
-        } catch (err) {
-            this.setState({copiedLink: false});
-        }
     }
+
     removePost() {
         EventHelpers.emitRemovePost(this.props.post);
     }
@@ -216,47 +197,6 @@ export default class PostInfo extends React.Component {
 
         var dropdown = this.createDropdown();
 
-        const permalink = TeamStore.getCurrentTeamUrl() + '/pl/' + post.id;
-        const copyButtonText = this.state.copiedLink ? (
-            <div>
-                <FormattedMessage
-                    id='post_info.copy'
-                    defaultMessage='Copy '
-                />
-                <i className='fa fa-check'/></div>
-        ) : (<FormattedMessage id='post_info.copy' />);
-
-        const permalinkOverlay = (
-            <Popover
-                id='permalink-overlay'
-                className='permalink-popover'
-                placement='left'
-                title=''
-            >
-                <div className='form-inline'>
-                    <input
-                        type='text'
-                        readOnly='true'
-                        ref='permalinkbox'
-                        className='permalink-text form-control no-resize'
-                        rows='1'
-                        value={permalink}
-                    />
-                    <button
-                        data-copy-btn='true'
-                        type='button'
-                        className='btn btn-primary'
-                        onClick={this.handlePermalinkCopy}
-                        data-clipboard-text={permalink}
-                    >
-                        {copyButtonText}
-                    </button>
-                </div>
-            </Popover>
-        );
-
-        const containerPadding = 20;
-
         return (
             <ul className='post__header post__header--info'>
                 <li className='col'>
@@ -273,17 +213,6 @@ export default class PostInfo extends React.Component {
                         {dropdown}
                     </div>
                     {comments}
-                    <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>
                     {this.createRemovePostButton(post)}
                 </li>
             </ul>

web/react/dispatcher/event_helpers.jsx

@@ -117,6 +117,14 @@ export function showDeletePostModal(post, commentCount = 0) {
     });
 }
 
+export function showGetPostLinkModal(post) {
+    AppDispatcher.handleViewAction({
+        type: ActionTypes.TOGGLE_GET_POST_LINK_MODAL,
+        value: true,
+        post
+    });
+}
+
 export function showGetTeamInviteLinkModal() {
     AppDispatcher.handleViewAction({
         type: Constants.ActionTypes.TOGGLE_GET_TEAM_INVITE_LINK_MODAL,

web/react/pages/channel.jsx

@@ -6,6 +6,7 @@ import ChannelLoader from '../components/channel_loader.jsx';
 import ErrorBar from '../components/error_bar.jsx';
 import * as Client from '../utils/client.jsx';
 
+import GetPostLinkModal from '../components/get_post_link_modal.jsx';
 import GetTeamInviteLinkModal from '../components/get_team_invite_link_modal.jsx';
 import RenameChannelModal from '../components/rename_channel_modal.jsx';
 import EditPostModal from '../components/edit_post_modal.jsx';
@@ -69,6 +70,7 @@ class Root extends React.Component {
                     <ErrorBar/>
                     <ChannelView/>
 
+                    <GetPostLinkModal />
                     <GetTeamInviteLinkModal />
                     <InviteMemberModal />
                     <ImportThemeModal />

web/react/stores/modal_store.jsx

@@ -34,6 +34,7 @@ class ModalStoreClass extends EventEmitter {
         case ActionTypes.TOGGLE_IMPORT_THEME_MODAL:
         case ActionTypes.TOGGLE_INVITE_MEMBER_MODAL:
         case ActionTypes.TOGGLE_DELETE_POST_MODAL:
+        case ActionTypes.TOGGLE_GET_POST_LINK_MODAL:
         case ActionTypes.TOGGLE_GET_TEAM_INVITE_LINK_MODAL:
         case ActionTypes.TOGGLE_REGISTER_APP_MODAL:
             this.emit(type, value, args);

web/react/utils/constants.jsx

@@ -54,6 +54,7 @@ export default {
         TOGGLE_IMPORT_THEME_MODAL: null,
         TOGGLE_INVITE_MEMBER_MODAL: null,
         TOGGLE_DELETE_POST_MODAL: null,
+        TOGGLE_GET_POST_LINK_MODAL: null,
         TOGGLE_GET_TEAM_INVITE_LINK_MODAL: null,
         TOGGLE_REGISTER_APP_MODAL: null,
 

web/static/i18n/en.json

@@ -625,6 +625,8 @@
   "get_link.copy": "Copy Link",
   "get_link.clipboard": " Link copied to clipboard.",
   "get_link.close": "Close",
+  "get_post_link_modal.title": "Copy Permalink",
+  "get_post_link_modal.help": "The link below allows authorized users to see your post.",
   "get_team_invite_link_modal.title": "Team Invite Link",
   "get_team_invite_link_modal.help": "Send teammates the link below for them to sign-up to this team site.",
   "get_team_invite_link_modal.helpDisabled": "User creation has been disabled for your team. Please ask your team administrator for details.",
@@ -787,7 +789,6 @@
   "post_info.permalink": "Permalink",
   "post_info.del": "Delete",
   "post_info.edit": "Edit",
-  "post_info.copy": "Copy ",
   "posts_view.newMsg": "New Messages",
   "posts_view.loadMore": "Load more messages",
   "register_app.required": "Required",

web/static/i18n/es.json

@@ -823,7 +823,6 @@
   "post_delete.okay": "Ok",
   "post_delete.someone": "Alguien borró el mensaje que querías comentar.",
   "post_focus_view.beginning": "Inicio de los Archivos del Canal",
-  "post_info.copy": "Copiar ",
   "post_info.del": "Borrar",
   "post_info.edit": "Editar",
   "post_info.permalink": "Enlace permanente",