Merge pull request #2089 from mattermost/plt-1205

PLT-1205 Remove appearance settings tab and move theme management to display s…

web/react/components/setting_item_max.jsx

@@ -46,9 +46,14 @@ export default class SettingItemMax extends React.Component {
             widthClass = 'col-sm-9 col-sm-offset-3';
         }
 
+        let title;
+        if (this.props.title) {
+            title = <li className='col-sm-12 section-title'>{this.props.title}</li>;
+        }
+
         return (
             <ul className='section-max form-horizontal'>
-                <li className='col-sm-12 section-title'>{this.props.title}</li>
+                {title}
                 <li className={widthClass}>
                     <ul className='setting-list'>
                         <li className='setting-list-item'>

web/react/components/user_settings/custom_theme_chooser.jsx

@@ -222,7 +222,7 @@ class CustomThemeChooser extends React.Component {
             } else {
                 elements.push(
                     <div
-                        className='col-sm-4 form-group'
+                        className='col-sm-4 form-group element'
                         key={'custom-theme-key' + index}
                     >
                         <label className='custom-label'>{formatMessage(messages[element.id])}</label>
@@ -265,8 +265,8 @@ class CustomThemeChooser extends React.Component {
         );
 
         return (
-            <div>
+            <div className='appearance-section'>
-                <div className='row form-group'>
+                <div className='theme-elements row form-group'>
                     {elements}
                 </div>
                 <div className='row'>
@@ -283,4 +283,4 @@ CustomThemeChooser.propTypes = {
     updateTheme: React.PropTypes.func.isRequired
 };
 
-export default injectIntl(CustomThemeChooser);
+export default injectIntl(CustomThemeChooser);

web/react/components/user_settings/premade_theme_chooser.jsx

@@ -45,7 +45,7 @@ export default class PremadeThemeChooser extends React.Component {
         }
 
         return (
-            <div className='row'>
+            <div className='row appearance-section'>
                 {premadeThemes}
             </div>
         );

web/react/components/user_settings/user_settings.jsx

@@ -6,7 +6,6 @@ import * as utils from '../../utils/utils.jsx';
 import NotificationsTab from './user_settings_notifications.jsx';
 import SecurityTab from './user_settings_security.jsx';
 import GeneralTab from './user_settings_general.jsx';
-import AppearanceTab from './user_settings_appearance.jsx';
 import DeveloperTab from './user_settings_developer.jsx';
 import IntegrationsTab from './user_settings_integrations.jsx';
 import DisplayTab from './user_settings_display.jsx';
@@ -85,21 +84,6 @@ export default class UserSettings extends React.Component {
                     />
                 </div>
             );
-        } else if (this.props.activeTab === 'appearance') {
-            return (
-                <div>
-                    <AppearanceTab
-                        ref='activeTab'
-                        activeSection={this.props.activeSection}
-                        updateSection={this.props.updateSection}
-                        updateTab={this.props.updateTab}
-                        closeModal={this.props.closeModal}
-                        collapseModal={this.props.collapseModal}
-                        setEnforceFocus={this.props.setEnforceFocus}
-                        setRequireConfirm={this.props.setRequireConfirm}
-                    />
-                </div>
-            );
         } else if (this.props.activeTab === 'developer') {
             return (
                 <div>
@@ -137,6 +121,8 @@ export default class UserSettings extends React.Component {
                         updateTab={this.props.updateTab}
                         closeModal={this.props.closeModal}
                         collapseModal={this.props.collapseModal}
+                        setEnforceFocus={this.props.setEnforceFocus}
+                        setRequireConfirm={this.props.setRequireConfirm}
                     />
                 </div>
             );

web/react/components/user_settings/user_settings_display.jsx

@@ -1,15 +1,18 @@
 // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
-import {savePreferences} from '../../utils/client.jsx';
 import SettingItemMin from '../setting_item_min.jsx';
 import SettingItemMax from '../setting_item_max.jsx';
-import Constants from '../../utils/constants.jsx';
-const PreReleaseFeatures = Constants.PRE_RELEASE_FEATURES;
-import PreferenceStore from '../../stores/preference_store.jsx';
 import ManageLanguages from './manage_languages.jsx';
+import ThemeSetting from './user_settings_theme.jsx';
+
+import PreferenceStore from '../../stores/preference_store.jsx';
 import * as Utils from '../../utils/utils.jsx';
 
+import Constants from '../../utils/constants.jsx';
+const PreReleaseFeatures = Constants.PRE_RELEASE_FEATURES;
+
+import {savePreferences} from '../../utils/client.jsx';
 import {intlShape, injectIntl, defineMessages, FormattedMessage} from 'mm-intl';
 
 const holders = defineMessages({
@@ -452,6 +455,13 @@ class UserSettingsDisplay extends React.Component {
                         />
                     </h3>
                     <div className='divider-dark first'/>
+                        <ThemeSetting
+                            selected={this.props.activeSection === 'theme'}
+                            updateSection={this.updateSection}
+                            setRequireConfirm={this.props.setRequireConfirm}
+                            setEnforceFocus={this.props.setEnforceFocus}
+                        />
+                    <div className='divider-dark'/>
                     {fontSection}
                     <div className='divider-dark'/>
                     {clockSection}
@@ -472,7 +482,9 @@ UserSettingsDisplay.propTypes = {
     updateTab: React.PropTypes.func,
     activeSection: React.PropTypes.string,
     closeModal: React.PropTypes.func.isRequired,
-    collapseModal: React.PropTypes.func.isRequired
+    collapseModal: React.PropTypes.func.isRequired,
+    setRequireConfirm: React.PropTypes.func.isRequired,
+    setEnforceFocus: React.PropTypes.func.isRequired
 };
 
-export default injectIntl(UserSettingsDisplay);
+export default injectIntl(UserSettingsDisplay);

web/react/components/user_settings/user_settings_modal.jsx

@@ -2,9 +2,13 @@
 // See License.txt for license information.
 
 import ConfirmModal from '../confirm_modal.jsx';
-const Modal = ReactBootstrap.Modal;
-import SettingsSidebar from '../settings_sidebar.jsx';
 import UserSettings from './user_settings.jsx';
+import SettingsSidebar from '../settings_sidebar.jsx';
+
+import UserStore from '../../stores/user_store.jsx';
+import * as Utils from '../../utils/utils.jsx';
+
+const Modal = ReactBootstrap.Modal;
 
 import {intlShape, injectIntl, defineMessages, FormattedMessage} from 'mm-intl';
 
@@ -21,10 +25,6 @@ const holders = defineMessages({
         id: 'user.settings.modal.notifications',
         defaultMessage: 'Notifications'
     },
-    appearance: {
-        id: 'user.settings.modal.appearance',
-        defaultMessage: 'Appearance'
-    },
     developer: {
         id: 'user.settings.modal.developer',
         defaultMessage: 'Developer'
@@ -214,6 +214,12 @@ class UserSettingsModal extends React.Component {
         if (!skipConfirm && this.requireConfirm) {
             this.showConfirmModal(() => this.updateSection(section, true));
         } else {
+            if (this.state.active_section === 'theme' && section !== 'theme') {
+                const user = UserStore.getCurrentUser();
+                if (user.theme_props != null) {
+                    Utils.applyTheme(user.theme_props);
+                }
+            }
             this.setState({active_section: section});
         }
     }
@@ -224,7 +230,6 @@ class UserSettingsModal extends React.Component {
         tabs.push({name: 'general', uiName: formatMessage(holders.general), icon: 'glyphicon glyphicon-cog'});
         tabs.push({name: 'security', uiName: formatMessage(holders.security), icon: 'glyphicon glyphicon-lock'});
         tabs.push({name: 'notifications', uiName: formatMessage(holders.notifications), icon: 'glyphicon glyphicon-exclamation-sign'});
-        tabs.push({name: 'appearance', uiName: formatMessage(holders.appearance), icon: 'glyphicon glyphicon-wrench'});
         if (global.window.mm_config.EnableOAuthServiceProvider === 'true') {
             tabs.push({name: 'developer', uiName: formatMessage(holders.developer), icon: 'glyphicon glyphicon-th'});
         }
@@ -294,4 +299,4 @@ UserSettingsModal.propTypes = {
     onModalDismissed: React.PropTypes.func.isRequired
 };
 
-export default injectIntl(UserSettingsModal);
+export default injectIntl(UserSettingsModal);

web/react/components/user_settings/user_settings_theme.jsx

@@ -1,8 +1,10 @@
-// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
+// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
 import CustomThemeChooser from './custom_theme_chooser.jsx';
 import PremadeThemeChooser from './premade_theme_chooser.jsx';
+import SettingItemMin from '../setting_item_min.jsx';
+import SettingItemMax from '../setting_item_max.jsx';
 
 import UserStore from '../../stores/user_store.jsx';
 
@@ -12,11 +14,22 @@ import * as Utils from '../../utils/utils.jsx';
 
 import Constants from '../../utils/constants.jsx';
 
-import {FormattedMessage} from 'mm-intl';
+import {intlShape, injectIntl, defineMessages, FormattedMessage} from 'mm-intl';
 
 const ActionTypes = Constants.ActionTypes;
 
-export default class UserSettingsAppearance extends React.Component {
+const holders = defineMessages({
+    themeTitle: {
+        id: 'user.settings.display.theme.title',
+        defaultMessage: 'Theme'
+    },
+    themeDescribe: {
+        id: 'user.settings.display.theme.describe',
+        defaultMessage: 'Open to manage your theme'
+    }
+});
+
+export default class ThemeSetting extends React.Component {
     constructor(props) {
         super(props);
 
@@ -34,16 +47,21 @@ export default class UserSettingsAppearance extends React.Component {
     componentDidMount() {
         UserStore.addChangeListener(this.onChange);
 
-        if (this.props.activeSection === 'theme') {
+        if (this.props.selected) {
             $(ReactDOM.findDOMNode(this.refs[this.state.theme])).addClass('active-border');
         }
     }
     componentDidUpdate() {
-        if (this.props.activeSection === 'theme') {
+        if (this.props.selected) {
             $('.color-btn').removeClass('active-border');
             $(ReactDOM.findDOMNode(this.refs[this.state.theme])).addClass('active-border');
         }
     }
+    componentWillReceiveProps(nextProps) {
+        if (!this.props.selected && nextProps.selected) {
+            this.resetFields();
+        }
+    }
     componentWillUnmount() {
         UserStore.removeChangeListener(this.onChange);
     }
@@ -96,6 +114,7 @@ export default class UserSettingsAppearance extends React.Component {
                 this.props.setRequireConfirm(false);
                 this.originalTheme = Object.assign({}, this.state.theme);
                 this.scrollToTop();
+                this.props.updateSection('');
             },
             (err) => {
                 var state = this.getStateFromStores();
@@ -149,6 +168,8 @@ export default class UserSettingsAppearance extends React.Component {
         this.props.setEnforceFocus(false);
     }
     render() {
+        const {formatMessage} = this.props.intl;
+
         var serverError;
         if (this.state.serverError) {
             serverError = this.state.serverError;
@@ -160,136 +181,121 @@ export default class UserSettingsAppearance extends React.Component {
         let premade;
         if (displayCustom) {
             custom = (
-                <CustomThemeChooser
+                <div key='customThemeChooser'>
-                    theme={this.state.theme}
+                    <br/>
-                    updateTheme={this.updateTheme}
+                    <CustomThemeChooser
-                />
+                        theme={this.state.theme}
+                        updateTheme={this.updateTheme}
+                    />
+                </div>
             );
         } else {
             premade = (
-                <PremadeThemeChooser
+                <div key='premadeThemeChooser'>
-                    theme={this.state.theme}
+                    <br/>
-                    updateTheme={this.updateTheme}
+                    <PremadeThemeChooser
-                />
+                        theme={this.state.theme}
+                        updateTheme={this.updateTheme}
+                    />
+                </div>
             );
         }
 
-        const themeUI = (
+        let themeUI;
-            <div className='section-max appearance-section'>
+        if (this.props.selected) {
-                <div className='col-sm-12'>
+            let inputs = [];
-                    <div className='radio'>
-                        <label>
-                            <input type='radio'
-                                checked={!displayCustom}
-                                onChange={this.updateType.bind(this, 'premade')}
-                            />
-                            <FormattedMessage
-                                id='user.settings.appearance.themeColors'
-                                defaultMessage='Theme Colors'
-                            />
-                        </label>
-                        <br/>
-                    </div>
-                    {premade}
-                    <div className='radio'>
-                        <label>
-                            <input type='radio'
-                                checked={displayCustom}
-                                onChange={this.updateType.bind(this, 'custom')}
-                            />
-                            <FormattedMessage
-                                id='user.settings.appearance.customTheme'
-                                defaultMessage='Custom Theme'
-                            />
-                        </label>
-                        <br/>
-                    </div>
-                    {custom}
-                    <hr />
-                    {serverError}
-                    <a
-                        className='btn btn-sm btn-primary'
-                        href='#'
-                        onClick={this.submitTheme}
-                    >
-                        <FormattedMessage
-                            id='user.settings.appearance.save'
-                            defaultMessage='Save'
-                        />
-                    </a>
-                    <a
-                        className='btn btn-sm theme'
-                        href='#'
-                        onClick={this.resetFields}
-                    >
-                        <FormattedMessage
-                            id='user.settings.appearance.cancel'
-                            defaultMessage='Cancel'
-                        />
-                    </a>
-                </div>
-            </div>
-        );
 
-        return (
+            inputs.push(
-            <div>
+                <div
-                <div className='modal-header'>
+                    className='radio'
-                    <button
+                    key='premadeThemeColorLabel'
-                        type='button'
+                >
-                        className='close'
+                    <label>
-                        aria-label='Close'
+                        <input type='radio'
-                        onClick={this.props.closeModal}
+                            checked={!displayCustom}
-                    >
+                            onChange={this.updateType.bind(this, 'premade')}
-                        <span aria-hidden='true'>{'×'}</span>
-                    </button>
-                    <h4
-                        className='modal-title'
-                        ref='title'
-                    >
-                        <i
-                            className='modal-back'
-                            onClick={this.props.collapseModal}
                         />
                         <FormattedMessage
-                            id='user.settings.appearance.title'
+                            id='user.settings.display.theme.themeColors'
-                            defaultMessage='Appearance Settings'
+                            defaultMessage='Theme Colors'
                         />
-                    </h4>
+                    </label>
+                    <br/>
                 </div>
-                <div className='user-settings'>
+            );
-                    <h3 className='tab-header'>
+
-                        <FormattedMessage
+            inputs.push(premade);
-                            id='user.settings.appearance.title'
+
-                            defaultMessage='Appearance Settings'
+            inputs.push(
+                <div
+                    className='radio'
+                    key='customThemeColorLabel'
+                >
+                    <label>
+                        <input type='radio'
+                            checked={displayCustom}
+                            onChange={this.updateType.bind(this, 'custom')}
                         />
-                    </h3>
+                        <FormattedMessage
-                    <div className='divider-dark first'/>
+                            id='user.settings.display.theme.customTheme'
-                    {themeUI}
+                            defaultMessage='Custom Theme'
-                    <div className='divider-dark'/>
+                        />
+                    </label>
+                    <br/>
+                </div>
+            );
+
+            inputs.push(custom);
+
+            inputs.push(
+                <div key='importSlackThemeButton'>
                     <br/>
                     <a
                         className='theme'
                         onClick={this.handleImportModal}
                     >
                         <FormattedMessage
-                            id='user.settings.appearance.import'
+                            id='user.settings.display.theme.import'
                             defaultMessage='Import theme colors from Slack'
                         />
                     </a>
                 </div>
-            </div>
+            );
-        );
+
+            themeUI = (
+                <SettingItemMax
+                    inputs={inputs}
+                    submit={this.submitTheme}
+                    server_error={serverError}
+                    width='full'
+                    updateSection={(e) => {
+                        this.props.updateSection('');
+                        e.preventDefault();
+                    }}
+                />
+            );
+        } else {
+            themeUI = (
+                <SettingItemMin
+                    title={formatMessage(holders.themeTitle)}
+                    describe={formatMessage(holders.themeDescribe)}
+                    updateSection={() => {
+                        this.props.updateSection('theme');
+                    }}
+                />
+            );
+        }
+
+        return themeUI;
     }
 }
 
-UserSettingsAppearance.defaultProps = {
+ThemeSetting.propTypes = {
-    activeSection: ''
+    intl: intlShape.isRequired,
-};
+    selected: React.PropTypes.bool.isRequired,
-UserSettingsAppearance.propTypes = {
+    updateSection: React.PropTypes.func.isRequired,
-    activeSection: React.PropTypes.string,
-    updateTab: React.PropTypes.func,
-    closeModal: React.PropTypes.func.isRequired,
-    collapseModal: React.PropTypes.func.isRequired,
     setRequireConfirm: React.PropTypes.func.isRequired,
     setEnforceFocus: React.PropTypes.func.isRequired
 };
+
+export default injectIntl(ThemeSetting);

web/sass-files/sass/partials/_settings.scss

@@ -178,9 +178,17 @@
                     }
                 }
             }
+
+            .theme-elements {
+                padding-left:15px;
+                .element {
+                    margin-right:10px;
+                }
+            }
+
             .custom-label {
                 font-weight: normal;
-                font-size: 13px;
+                font-size: 12px;
                 width: 100%;
                 overflow: hidden;
                 text-overflow: ellipsis;

web/static/i18n/en.json

@@ -1130,12 +1130,6 @@
   "user.settings.advance.sendDesc": "If enabled 'Enter' inserts a new line and 'Ctrl + Enter' submits the message.",
   "user.settings.advance.preReleaseDesc": "Check any pre-released features you'd like to preview.  You may also need to refresh the page before the setting will take effect.",
   "user.settings.advance.title": "Advanced Settings",
-  "user.settings.appearance.themeColors": "Theme Colors",
-  "user.settings.appearance.customTheme": "Custom Theme",
-  "user.settings.appearance.save": "Save",
-  "user.settings.appearance.cancel": "Cancel",
-  "user.settings.appearance.title": "Appearance Settings",
-  "user.settings.appearance.import": "Import theme colors from Slack",
   "user.settings.developer.applicationsPreview": "Applications (Preview)",
   "user.settings.developer.thirdParty": "Open to register a new third-party application",
   "user.settings.developer.register": "Register New Application",
@@ -1153,6 +1147,11 @@
   "user.settings.display.nameOptsDesc": "Set how to display other user's names in posts and the Direct Messages list.",
   "user.settings.display.fontDesc": "Select the font displayed in the Mattermost user interface.",
   "user.settings.display.title": "Display Settings",
+  "user.settings.display.theme.themeColors": "Theme Colors",
+  "user.settings.display.theme.customTheme": "Custom Theme",
+  "user.settings.display.theme.import": "Import theme colors from Slack",
+  "user.settings.display.theme.title": "Theme",
+  "user.settings.display.theme.describe": "Open to manage your theme",
   "user.settings.general.usernameReserved": "This username is reserved, please choose a new one.",
   "user.settings.general.usernameRestrictions": "'Username must begin with a letter, and contain between {min} to {max} lowercase characters made up of numbers, letters, and the symbols '.', '-' and '_'.",
   "user.settings.general.validEmail": "Please enter a valid email address",
@@ -1254,7 +1253,7 @@
   "intro_messages.teammate": "This is the start of your direct message history with this teammate. Direct messages and files shared here are not shown to people outside this area.",
   "intro_messages.offTopic": "<h4 class=\"channel-intro__title\">Beginning of {display_name}</h4><p class=\"channel-intro__content\">This is the start of {display_name}, a channel for non-work-related conversations.<br/></p>",
   "intro_messages.inviteOthers": "Invite others to this team",
-  "intro_messages.default": "<h4 class='channel-intro__title'>Beginning of {display_name}</h4><p class='channel-intro__content'><strong>Welcome to {display_name}!'</strong><br/><br/>This is the first channel teammates see when they sign up - use it for posting updates everyone needs to know.</p>",
+  "intro_messages.default": "<h4 class='channel-intro__title'>Beginning of {display_name}</h4><p class='channel-intro__content'><strong>Welcome to {display_name}!</strong><br/><br/>This is the first channel teammates see when they sign up - use it for posting updates everyone needs to know.</p>",
   "intro_messages.group": "private group",
   "intro_messages.onlyInvited": " Only invited members can see this private group.",
   "intro_messages.channel": "channel",

web/static/i18n/es.json

@@ -1057,12 +1057,6 @@
   "user.settings.advance.sendDesc": "Si está habilitado 'Retorno' inserta una nueva linea y 'Ctrl + Retorno' envía el mensaje.",
   "user.settings.advance.sendTitle": "Enviar mensajes con Ctrl + Retorno",
   "user.settings.advance.title": "Configuración Avanzada",
-  "user.settings.appearance.cancel": "Cancelar",
-  "user.settings.appearance.customTheme": "Tema personalizado",
-  "user.settings.appearance.import": "Importar los colores de tema de Slack",
-  "user.settings.appearance.save": "Guardar",
-  "user.settings.appearance.themeColors": "Selecciona un Tema",
-  "user.settings.appearance.title": "Configuraciones de Apariencia",
   "user.settings.cmds.add": "Agregar",
   "user.settings.cmds.add_desc": "Crea comandos que permitan enviar eventos a integraciones externas. Por favor revisa <a href=\"http://mattermost.org/commands\">http://mattermost.org/commands</a>  para aprender más.",
   "user.settings.cmds.add_display_name.placeholder": "Nombre a mostrar",
@@ -1136,6 +1130,9 @@
   "user.settings.display.showUsername": "Mostrar el nombre de usuario (predeterminado)",
   "user.settings.display.teammateDisplay": "Visualización del nombre de los integrantes",
   "user.settings.display.title": "Configuración de Visualización",
+  "user.settings.display.theme.customTheme": "Tema personalizado",
+  "user.settings.display.theme.import": "Importar los colores de tema de Slack",
+  "user.settings.display.theme.themeColors": "Selecciona un Tema",
   "user.settings.general.checkEmail": "Revisa tu correo electrónico {email} para verificar la dirección.",
   "user.settings.general.checkEmailNoAddress": "Revisa tu correo electrónico para verificar la dirección",
   "user.settings.general.close": "Cerrar",
@@ -1262,4 +1259,4 @@
   "view_image_popover.download": "Descargar",
   "view_image_popover.file": "Archivo {count} de {total}",
   "view_image_popover.publicLink": "Obtener Enlace Público"
-}
+}