diff options
Diffstat (limited to 'web/react')
-rw-r--r-- | web/react/components/create_comment.jsx | 31 | ||||
-rw-r--r-- | web/react/components/create_post.jsx | 31 | ||||
-rw-r--r-- | web/react/components/user_settings/user_settings_general.jsx | 89 |
3 files changed, 134 insertions, 17 deletions
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> |