From 0e5612a7db9f4205485b0c4bfcd8d2ab35727d01 Mon Sep 17 00:00:00 2001
From: Florian Orben <florian.orben@gmail.com>
Date: Mon, 26 Oct 2015 22:05:26 +0100
Subject: allow messages to be send on ctrl+enter

---
 web/react/components/create_comment.jsx            | 31 ++++++--
 web/react/components/create_post.jsx               | 31 ++++++--
 .../user_settings/user_settings_general.jsx        | 89 +++++++++++++++++++++-
 3 files changed, 134 insertions(+), 17 deletions(-)

(limited to 'web/react')

diff --git a/web/react/components/create_comment.jsx b/web/react/components/create_comment.jsx
index 18936e808..7b199f5d6 100644
--- a/web/react/components/create_comment.jsx
+++ b/web/react/components/create_comment.jsx
@@ -27,7 +27,7 @@ export default class CreateComment extends React.Component {
         this.handleSubmit = this.handleSubmit.bind(this);
         this.commentMsgKeyPress = this.commentMsgKeyPress.bind(this);
         this.handleUserInput = this.handleUserInput.bind(this);
-        this.handleArrowUp = this.handleArrowUp.bind(this);
+        this.handleKeyDown = this.handleKeyDown.bind(this);
         this.handleUploadStart = this.handleUploadStart.bind(this);
         this.handleFileUploadComplete = this.handleFileUploadComplete.bind(this);
         this.handleUploadError = this.handleUploadError.bind(this);
@@ -36,6 +36,7 @@ export default class CreateComment extends React.Component {
         this.handleSubmit = this.handleSubmit.bind(this);
         this.getFileCount = this.getFileCount.bind(this);
         this.handleResize = this.handleResize.bind(this);
+        this.onUserChange = this.onUserChange.bind(this);
 
         PostStore.clearCommentDraftUploads();
 
@@ -45,8 +46,11 @@ export default class CreateComment extends React.Component {
             uploadsInProgress: draft.uploadsInProgress,
             previews: draft.previews,
             submitting: false,
-            windowWidth: Utils.windowWidth()
+            windowWidth: Utils.windowWidth(),
+            ctrlSend: UserStore.getCurrentUser().props.ctrlSend
         };
+
+        UserStore.addChangeListener(this.onUserChange);
     }
     componentDidMount() {
         window.addEventListener('resize', this.handleResize);
@@ -54,6 +58,10 @@ export default class CreateComment extends React.Component {
     componentWillUnmount() {
         window.removeEventListener('resize', this.handleResize);
     }
+    onUserChange() {
+        const ctrlSend = UserStore.getCurrentUser().props.ctrlSend || 'false';
+        this.setState({ctrlSend});
+    }
     handleResize() {
         this.setState({windowWidth: Utils.windowWidth()});
     }
@@ -140,10 +148,12 @@ export default class CreateComment extends React.Component {
         this.setState({messageText: '', submitting: false, postError: null, previews: [], serverError: null});
     }
     commentMsgKeyPress(e) {
-        if (e.which === 13 && !e.shiftKey && !e.altKey) {
-            e.preventDefault();
-            ReactDOM.findDOMNode(this.refs.textbox).blur();
-            this.handleSubmit(e);
+        if (this.state.ctrlSend === 'true' && e.ctrlKey || this.state.ctrlSend === 'false') {
+            if (e.which === KeyCodes.ENTER && !e.shiftKey && !e.altKey) {
+                e.preventDefault();
+                ReactDOM.findDOMNode(this.refs.textbox).blur();
+                this.handleSubmit(e);
+            }
         }
 
         const t = Date.now();
@@ -161,7 +171,12 @@ export default class CreateComment extends React.Component {
         $('.post-right__scroll').perfectScrollbar('update');
         this.setState({messageText: messageText});
     }
-    handleArrowUp(e) {
+    handleKeyDown(e) {
+        if (this.state.ctrlSend === 'true' && e.keyCode === KeyCodes.ENTER && e.ctrlKey === true) {
+            this.commentMsgKeyPress(e);
+            return;
+        }
+
         if (e.keyCode === KeyCodes.UP && this.state.messageText === '') {
             e.preventDefault();
 
@@ -313,7 +328,7 @@ export default class CreateComment extends React.Component {
                             <Textbox
                                 onUserInput={this.handleUserInput}
                                 onKeyPress={this.commentMsgKeyPress}
-                                onKeyDown={this.handleArrowUp}
+                                onKeyDown={this.handleKeyDown}
                                 messageText={this.state.messageText}
                                 createMessage='Add a comment...'
                                 initialText=''
diff --git a/web/react/components/create_post.jsx b/web/react/components/create_post.jsx
index 32ee31efe..3bde457b5 100644
--- a/web/react/components/create_post.jsx
+++ b/web/react/components/create_post.jsx
@@ -36,9 +36,10 @@ export default class CreatePost extends React.Component {
         this.removePreview = this.removePreview.bind(this);
         this.onChange = this.onChange.bind(this);
         this.getFileCount = this.getFileCount.bind(this);
-        this.handleArrowUp = this.handleArrowUp.bind(this);
+        this.handleKeyDown = this.handleKeyDown.bind(this);
         this.handleResize = this.handleResize.bind(this);
         this.sendMessage = this.sendMessage.bind(this);
+        this.onUserChange = this.onUserChange.bind(this);
 
         PostStore.clearDraftUploads();
 
@@ -52,8 +53,15 @@ export default class CreatePost extends React.Component {
             submitting: false,
             initialText: draft.messageText,
             windowWidth: Utils.windowWidth(),
-            windowHeight: Utils.windowHeight()
+            windowHeight: Utils.windowHeight(),
+            ctrlSend: UserStore.getCurrentUser().props.ctrlSend
         };
+
+        UserStore.addChangeListener(this.onUserChange);
+    }
+    onUserChange() {
+        const ctrlSend = UserStore.getCurrentUser().props.ctrlSend || 'false';
+        this.setState({ctrlSend});
     }
     handleResize() {
         this.setState({
@@ -201,10 +209,12 @@ export default class CreatePost extends React.Component {
         );
     }
     postMsgKeyPress(e) {
-        if (e.which === KeyCodes.ENTER && !e.shiftKey && !e.altKey) {
-            e.preventDefault();
-            ReactDOM.findDOMNode(this.refs.textbox).blur();
-            this.handleSubmit(e);
+        if (this.state.ctrlSend === 'true' && e.ctrlKey || this.state.ctrlSend === 'false') {
+            if (e.which === KeyCodes.ENTER && !e.shiftKey && !e.altKey) {
+                e.preventDefault();
+                ReactDOM.findDOMNode(this.refs.textbox).blur();
+                this.handleSubmit(e);
+            }
         }
 
         const t = Date.now();
@@ -328,7 +338,12 @@ export default class CreatePost extends React.Component {
         const draft = PostStore.getDraft(channelId);
         return draft.previews.length + draft.uploadsInProgress.length;
     }
-    handleArrowUp(e) {
+    handleKeyDown(e) {
+        if (this.state.ctrlSend === 'true' && e.keyCode === KeyCodes.ENTER && e.ctrlKey === true) {
+            this.postMsgKeyPress(e);
+            return;
+        }
+
         if (e.keyCode === KeyCodes.UP && this.state.messageText === '') {
             e.preventDefault();
 
@@ -393,7 +408,7 @@ export default class CreatePost extends React.Component {
                             <Textbox
                                 onUserInput={this.handleUserInput}
                                 onKeyPress={this.postMsgKeyPress}
-                                onKeyDown={this.handleArrowUp}
+                                onKeyDown={this.handleKeyDown}
                                 onHeightChange={this.resizePostHolder}
                                 messageText={this.state.messageText}
                                 createMessage='Write a message...'
diff --git a/web/react/components/user_settings/user_settings_general.jsx b/web/react/components/user_settings/user_settings_general.jsx
index 1c8ce3c79..6b7f1ad51 100644
--- a/web/react/components/user_settings/user_settings_general.jsx
+++ b/web/react/components/user_settings/user_settings_general.jsx
@@ -22,6 +22,7 @@ export default class UserSettingsGeneralTab extends React.Component {
         this.submitEmail = this.submitEmail.bind(this);
         this.submitUser = this.submitUser.bind(this);
         this.submitPicture = this.submitPicture.bind(this);
+        this.submitCtrlSend = this.submitCtrlSend.bind(this);
 
         this.updateUsername = this.updateUsername.bind(this);
         this.updateFirstName = this.updateFirstName.bind(this);
@@ -30,6 +31,7 @@ export default class UserSettingsGeneralTab extends React.Component {
         this.updateEmail = this.updateEmail.bind(this);
         this.updateConfirmEmail = this.updateConfirmEmail.bind(this);
         this.updatePicture = this.updatePicture.bind(this);
+        this.updateCtrlSend = this.updateCtrlSend.bind(this);
         this.updateSection = this.updateSection.bind(this);
 
         this.handleClose = this.handleClose.bind(this);
@@ -176,6 +178,13 @@ export default class UserSettingsGeneralTab extends React.Component {
             }.bind(this)
         );
     }
+    submitCtrlSend(e) {
+        e.preventDefault();
+
+        var user = UserStore.getCurrentUser();
+        user.props = this.state.props;
+        this.submitUser(user, true);
+    }
     updateUsername(e) {
         this.setState({username: e.target.value});
     }
@@ -194,6 +203,11 @@ export default class UserSettingsGeneralTab extends React.Component {
     updateConfirmEmail(e) {
         this.setState({confirmEmail: e.target.value});
     }
+    updateCtrlSend(value) {
+        let props = this.state.props;
+        props.ctrlSend = value;
+        this.setState({props});
+    }
     updatePicture(e) {
         if (e.target.files && e.target.files[0]) {
             this.setState({picture: e.target.files[0]});
@@ -228,7 +242,8 @@ export default class UserSettingsGeneralTab extends React.Component {
         var user = props.user;
 
         return {username: user.username, firstName: user.first_name, lastName: user.last_name, nickname: user.nickname,
-                        email: user.email, confirmEmail: '', picture: null, loadingPicture: false, emailChangeInProgress: false};
+                        email: user.email, confirmEmail: '', picture: null, loadingPicture: false, emailChangeInProgress: false,
+                        props: user.props};
     }
     render() {
         var user = this.props.user;
@@ -570,6 +585,76 @@ export default class UserSettingsGeneralTab extends React.Component {
                 />
             );
         }
+
+        var miscellaneousSection;
+        var describeCtrlSend = this.state.props.ctrlSend === 'true' ? 'On' : 'Off';
+        if (this.props.activeSection === 'ctrlSend') {
+            var ctrlSendActive = [false, false];
+            if (this.state.props.ctrlSend === 'true') {
+                ctrlSendActive[0] = true;
+            } else {
+                ctrlSendActive[1] = true;
+            }
+
+            let ctrlSendInputs = [];
+            ctrlSendInputs.push(
+                <div
+                    key='ctrlSendSetting'
+                    className='form-group'
+                >
+                    <div className=''>
+                        <div className='radio'>
+                            <label>
+                                <input
+                                    type='radio'
+                                    onChange={() => this.updateCtrlSend('true')}
+                                    checked={ctrlSendActive[0]}
+                                />
+                                {'On'}
+                            </label>
+                            <br/>
+                        </div>
+                        <div className='radio'>
+                            <label>
+                                <input
+                                    type='radio'
+                                    onChange={() => this.updateCtrlSend('false')}
+                                    checked={ctrlSendActive[1]}
+                                />
+                                {'Off'}
+                            </label>
+                            <br/>
+                        </div>
+                        <div><br/>{'If enabled \'Enter\' inserts a new line and ctrl + enter submits the message.'}</div>
+                    </div>
+                </div>
+            );
+
+            miscellaneousSection = (
+                <SettingItemMax
+                    title='Send messages on Ctrl + Enter'
+                    inputs={ctrlSendInputs}
+                    submit={this.submitCtrlSend}
+                    server_error={serverError}
+                    client_error={emailError}
+                    updateSection={function clearCtrlSend(e) {
+                        this.updateSection('ctrlSend');
+                        e.preventDefault();
+                    }.bind(this)}
+                />
+            );
+        } else {
+            miscellaneousSection = (
+                <SettingItemMin
+                    title='Send messages on Ctrl + Enter'
+                    describe={describeCtrlSend}
+                    updateSection={function updateCtrlSend() {
+                        this.updateSection('ctrlSend');
+                    }.bind(this)}
+                />
+            );
+        }
+
         return (
             <div>
                 <div className='modal-header'>
@@ -601,6 +686,8 @@ export default class UserSettingsGeneralTab extends React.Component {
                     {emailSection}
                     <div className='divider-light'/>
                     {pictureSection}
+                    <div className='divider-light'/>
+                    {miscellaneousSection}
                     <div className='divider-dark'/>
                 </div>
             </div>
-- 
cgit v1.2.3-1-g7c22