From f7808d1172f53873b757e6c0f5a360b025b20d2e Mon Sep 17 00:00:00 2001 From: Florian Orben Date: Tue, 27 Oct 2015 23:18:59 +0100 Subject: add new user-setting section 'advanced' and remove ctrl-send setting from general tab --- web/react/components/create_comment.jsx | 16 +- web/react/components/create_post.jsx | 14 +- .../components/user_settings/user_settings.jsx | 12 ++ .../user_settings/user_settings_advanced.jsx | 169 +++++++++++++++++++++ .../user_settings/user_settings_general.jsx | 88 +---------- .../user_settings/user_settings_modal.jsx | 1 + web/react/utils/constants.jsx | 3 +- 7 files changed, 202 insertions(+), 101 deletions(-) create mode 100644 web/react/components/user_settings/user_settings_advanced.jsx (limited to 'web') diff --git a/web/react/components/create_comment.jsx b/web/react/components/create_comment.jsx index 7b199f5d6..058594165 100644 --- a/web/react/components/create_comment.jsx +++ b/web/react/components/create_comment.jsx @@ -8,6 +8,7 @@ const SocketStore = require('../stores/socket_store.jsx'); const ChannelStore = require('../stores/channel_store.jsx'); const UserStore = require('../stores/user_store.jsx'); const PostStore = require('../stores/post_store.jsx'); +const PreferenceStore = require('../stores/preference_store.jsx'); const Textbox = require('./textbox.jsx'); const MsgTyping = require('./msg_typing.jsx'); const FileUpload = require('./file_upload.jsx'); @@ -36,7 +37,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); + this.onPreferenceChange = this.onPreferenceChange.bind(this); PostStore.clearCommentDraftUploads(); @@ -47,20 +48,21 @@ export default class CreateComment extends React.Component { previews: draft.previews, submitting: false, windowWidth: Utils.windowWidth(), - ctrlSend: UserStore.getCurrentUser().props.ctrlSend + ctrlSend: PreferenceStore.getPreference(Constants.Preferences.CATEGORY_ADVANCED_SETTINGS, 'send_on_ctrl_enter', {value: 'false'}).value }; - - UserStore.addChangeListener(this.onUserChange); } componentDidMount() { + PreferenceStore.addChangeListener(this.onPreferenceChange); window.addEventListener('resize', this.handleResize); } componentWillUnmount() { + PreferenceStore.removeChangeListener(this.onPreferenceChange); window.removeEventListener('resize', this.handleResize); } - onUserChange() { - const ctrlSend = UserStore.getCurrentUser().props.ctrlSend || 'false'; - this.setState({ctrlSend}); + onPreferenceChange() { + this.setState({ + ctrlSend: PreferenceStore.getPreference(Constants.Preferences.CATEGORY_ADVANCED_SETTINGS, 'send_on_ctrl_enter', {value: 'false'}).value + }); } handleResize() { this.setState({windowWidth: Utils.windowWidth()}); diff --git a/web/react/components/create_post.jsx b/web/react/components/create_post.jsx index 3bde457b5..cdbc3bc6d 100644 --- a/web/react/components/create_post.jsx +++ b/web/react/components/create_post.jsx @@ -8,6 +8,7 @@ const ChannelStore = require('../stores/channel_store.jsx'); const PostStore = require('../stores/post_store.jsx'); const UserStore = require('../stores/user_store.jsx'); const SocketStore = require('../stores/socket_store.jsx'); +const PreferenceStore = require('../stores/preference_store.jsx'); const MsgTyping = require('./msg_typing.jsx'); const Textbox = require('./textbox.jsx'); const FileUpload = require('./file_upload.jsx'); @@ -39,7 +40,7 @@ export default class CreatePost extends React.Component { this.handleKeyDown = this.handleKeyDown.bind(this); this.handleResize = this.handleResize.bind(this); this.sendMessage = this.sendMessage.bind(this); - this.onUserChange = this.onUserChange.bind(this); + this.onPreferenceChange = this.onPreferenceChange.bind(this); PostStore.clearDraftUploads(); @@ -54,14 +55,15 @@ export default class CreatePost extends React.Component { initialText: draft.messageText, windowWidth: Utils.windowWidth(), windowHeight: Utils.windowHeight(), - ctrlSend: UserStore.getCurrentUser().props.ctrlSend + ctrlSend: PreferenceStore.getPreference(Constants.Preferences.CATEGORY_ADVANCED_SETTINGS, 'send_on_ctrl_enter', {value: 'false'}).value }; - UserStore.addChangeListener(this.onUserChange); + PreferenceStore.addChangeListener(this.onPreferenceChange); } - onUserChange() { - const ctrlSend = UserStore.getCurrentUser().props.ctrlSend || 'false'; - this.setState({ctrlSend}); + onPreferenceChange() { + this.setState({ + ctrlSend: PreferenceStore.getPreference(Constants.Preferences.CATEGORY_ADVANCED_SETTINGS, 'send_on_ctrl_enter', {value: 'false'}).value + }); } handleResize() { this.setState({ diff --git a/web/react/components/user_settings/user_settings.jsx b/web/react/components/user_settings/user_settings.jsx index 15bf961d6..546e26ca3 100644 --- a/web/react/components/user_settings/user_settings.jsx +++ b/web/react/components/user_settings/user_settings.jsx @@ -10,6 +10,7 @@ var AppearanceTab = require('./user_settings_appearance.jsx'); var DeveloperTab = require('./user_settings_developer.jsx'); var IntegrationsTab = require('./user_settings_integrations.jsx'); var DisplayTab = require('./user_settings_display.jsx'); +var AdvancedTab = require('./user_settings_advanced.jsx'); export default class UserSettings extends React.Component { constructor(props) { @@ -110,6 +111,17 @@ export default class UserSettings extends React.Component { /> ); + } else if (this.props.activeTab === 'advanced') { + return ( +
+ +
+ ); } return
; diff --git a/web/react/components/user_settings/user_settings_advanced.jsx b/web/react/components/user_settings/user_settings_advanced.jsx new file mode 100644 index 000000000..910444735 --- /dev/null +++ b/web/react/components/user_settings/user_settings_advanced.jsx @@ -0,0 +1,169 @@ +// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. +// See License.txt for license information. + +const Client = require('../../utils/client.jsx'); +const SettingItemMin = require('../setting_item_min.jsx'); +const SettingItemMax = require('../setting_item_max.jsx'); +const Constants = require('../../utils/constants.jsx'); +const PreferenceStore = require('../../stores/preference_store.jsx'); + +export default class AdvancedSettingsDisplay extends React.Component { + constructor(props) { + super(props); + + this.updateSection = this.updateSection.bind(this); + this.updateSetting = this.updateSetting.bind(this); + this.handleClose = this.handleClose.bind(this); + this.setupInitialState = this.setupInitialState.bind(this); + + this.state = this.setupInitialState(); + } + + setupInitialState() { + const sendOnCtrlEnter = PreferenceStore.getPreference( + Constants.Preferences.CATEGORY_ADVANCED_SETTINGS, + 'send_on_ctrl_enter', + {value: 'false'} + ).value; + + return { + settings: {send_on_ctrl_enter: sendOnCtrlEnter} + }; + } + + updateSetting(setting, value) { + const settings = this.state.settings; + settings[setting] = value; + this.setState(settings); + } + + handleSubmit(setting) { + const preference = PreferenceStore.setPreference( + Constants.Preferences.CATEGORY_ADVANCED_SETTINGS, + setting, + this.state.settings[setting] + ); + + Client.savePreferences([preference], + () => { + PreferenceStore.emitChange(); + this.updateSection(''); + }, + (err) => { + this.setState({serverError: err.message}); + } + ); + } + + updateSection(section) { + this.props.updateSection(section); + } + + handleClose() { + this.updateSection(''); + } + + componentDidMount() { + $('#user_settings').on('hidden.bs.modal', this.handleClose); + } + + componentWillUnmount() { + $('#user_settings').off('hidden.bs.modal', this.handleClose); + } + + render() { + const serverError = this.state.serverError || null; + let ctrlSendSection; + + if (this.props.activeSection === 'advancedCtrlSend') { + const ctrlSendActive = [ + this.state.settings.send_on_ctrl_enter === 'true', + this.state.settings.send_on_ctrl_enter === 'false' + ]; + + const inputs = [ +
+
+ +
+
+
+ +
+
+

{'If enabled \'Enter\' inserts a new line and \'Ctrl + Enter\' submits the message.'}
+
+ ]; + + ctrlSendSection = ( + this.handleSubmit('send_on_ctrl_enter')} + server_error={serverError} + updateSection={(e) => { + this.updateSection(''); + e.preventDefault(); + }} + /> + ); + } else { + ctrlSendSection = ( + this.props.updateSection('advancedCtrlSend')} + /> + ); + } + + return ( +
+
+ +

+ + {'Advanced Settings'} +

+
+
+

{'Advanced Settings'}

+
+ {ctrlSendSection} +
+
+
+ ); + } +} + +AdvancedSettingsDisplay.propTypes = { + user: React.PropTypes.object, + updateSection: React.PropTypes.func, + updateTab: React.PropTypes.func, + activeSection: React.PropTypes.string +}; diff --git a/web/react/components/user_settings/user_settings_general.jsx b/web/react/components/user_settings/user_settings_general.jsx index 6b7f1ad51..3adac197a 100644 --- a/web/react/components/user_settings/user_settings_general.jsx +++ b/web/react/components/user_settings/user_settings_general.jsx @@ -22,7 +22,6 @@ 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); @@ -31,7 +30,6 @@ 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); @@ -178,13 +176,6 @@ 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}); } @@ -203,11 +194,6 @@ 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]}); @@ -242,8 +228,7 @@ 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, - props: user.props}; + email: user.email, confirmEmail: '', picture: null, loadingPicture: false, emailChangeInProgress: false}; } render() { var user = this.props.user; @@ -586,75 +571,6 @@ 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( -
-
-
- -
-
-
- -
-
-

{'If enabled \'Enter\' inserts a new line and ctrl + enter submits the message.'}
-
-
- ); - - miscellaneousSection = ( - - ); - } else { - miscellaneousSection = ( - - ); - } - return (
@@ -686,8 +602,6 @@ export default class UserSettingsGeneralTab extends React.Component { {emailSection}
{pictureSection} -
- {miscellaneousSection}
diff --git a/web/react/components/user_settings/user_settings_modal.jsx b/web/react/components/user_settings/user_settings_modal.jsx index 5449ae91e..18dd490e7 100644 --- a/web/react/components/user_settings/user_settings_modal.jsx +++ b/web/react/components/user_settings/user_settings_modal.jsx @@ -43,6 +43,7 @@ export default class UserSettingsModal extends React.Component { tabs.push({name: 'integrations', uiName: 'Integrations', icon: 'glyphicon glyphicon-transfer'}); } tabs.push({name: 'display', uiName: 'Display', icon: 'glyphicon glyphicon-eye-open'}); + tabs.push({name: 'advanced', uiName: 'Advanced', icon: 'glyphicon glyphicon-list-alt'}); return (