Remove appearance settings tab and move theme management to display settings tab

7 files changed, 155 insertions, 143 deletions

diff --git a/web/react/components/setting_item_max.jsx b/web/react/components/setting_item_max.jsx
index 537055641..ac750614b 100644
--- a/web/react/components/setting_item_max.jsx
+++ b/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'>
diff --git a/web/react/components/user_settings/custom_theme_chooser.jsx b/web/react/components/user_settings/custom_theme_chooser.jsx
index 9116dd938..2d88a3650 100644
--- a/web/react/components/user_settings/custom_theme_chooser.jsx
+++ b/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='row form-group'>
+            <div className='appearance-section'>
+                <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);
\ No newline at end of file
+export default injectIntl(CustomThemeChooser);
diff --git a/web/react/components/user_settings/premade_theme_chooser.jsx b/web/react/components/user_settings/premade_theme_chooser.jsx
index 9889bff5c..80ff8c4de 100644
--- a/web/react/components/user_settings/premade_theme_chooser.jsx
+++ b/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>
         );
diff --git a/web/react/components/user_settings/user_settings.jsx b/web/react/components/user_settings/user_settings.jsx
index 54d98bbde..4da51fa5f 100644
--- a/web/react/components/user_settings/user_settings.jsx
+++ b/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>
             );
diff --git a/web/react/components/user_settings/user_settings_display.jsx b/web/react/components/user_settings/user_settings_display.jsx
index 776bde442..4b11c06fb 100644
--- a/web/react/components/user_settings/user_settings_display.jsx
+++ b/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);
\ No newline at end of file
+export default injectIntl(UserSettingsDisplay);
diff --git a/web/react/components/user_settings/user_settings_modal.jsx b/web/react/components/user_settings/user_settings_modal.jsx
index 2a0a90cf5..57796d559 100644
--- a/web/react/components/user_settings/user_settings_modal.jsx
+++ b/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,10 @@ 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();
+                Utils.applyTheme(user.theme_props);
+            }
             this.setState({active_section: section});
         }
     }
@@ -224,7 +228,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 +297,4 @@ UserSettingsModal.propTypes = {
     onModalDismissed: React.PropTypes.func.isRequired
 };
 
-export default injectIntl(UserSettingsModal);
\ No newline at end of file
+export default injectIntl(UserSettingsModal);
diff --git a/web/react/components/user_settings/user_settings_appearance.jsx b/web/react/components/user_settings/user_settings_theme.jsx
index fb11dc81b..a0656feaa 100644
--- a/web/react/components/user_settings/user_settings_appearance.jsx
+++ b/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
-                    theme={this.state.theme}
-                    updateTheme={this.updateTheme}
-                />
+                <div key='customThemeChooser'>
+                    <br/>
+                    <CustomThemeChooser
+                        theme={this.state.theme}
+                        updateTheme={this.updateTheme}
+                    />
+                </div>
             );
         } else {
             premade = (
-                <PremadeThemeChooser
-                    theme={this.state.theme}
-                    updateTheme={this.updateTheme}
-                />
+                <div key='premadeThemeChooser'>
+                    <br/>
+                    <PremadeThemeChooser
+                        theme={this.state.theme}
+                        updateTheme={this.updateTheme}
+                    />
+                </div>
             );
         }
 
-        const themeUI = (
-            <div className='section-max appearance-section'>
-                <div className='col-sm-12'>
-                    <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'
+        let themeUI;
+        if (this.props.selected) {
+            let inputs = [];
+
+            inputs.push(
+                <div
+                    className='radio'
+                    key='premadeThemeColorLabel'
+                >
+                    <label>
+                        <input type='radio'
+                            checked={!displayCustom}
+                            onChange={this.updateType.bind(this, 'premade')}
                         />
-                    </a>
-                    <a
-                        className='btn btn-sm theme'
-                        href='#'
-                        onClick={this.resetFields}
-                    >
                         <FormattedMessage
-                            id='user.settings.appearance.cancel'
-                            defaultMessage='Cancel'
+                            id='user.settings.display.theme.themeColors'
+                            defaultMessage='Theme Colors'
                         />
-                    </a>
+                    </label>
+                    <br/>
                 </div>
-            </div>
-        );
+            );
 
-        return (
-            <div>
-                <div className='modal-header'>
-                    <button
-                        type='button'
-                        className='close'
-                        aria-label='Close'
-                        onClick={this.props.closeModal}
-                    >
-                        <span aria-hidden='true'>{'×'}</span>
-                    </button>
-                    <h4
-                        className='modal-title'
-                        ref='title'
-                    >
-                        <i
-                            className='modal-back'
-                            onClick={this.props.collapseModal}
+            inputs.push(premade);
+
+            inputs.push(
+                <div
+                    className='radio'
+                    key='customThemeColorLabel'
+                >
+                    <label>
+                        <input type='radio'
+                            checked={displayCustom}
+                            onChange={this.updateType.bind(this, 'custom')}
                         />
                         <FormattedMessage
-                            id='user.settings.appearance.title'
-                            defaultMessage='Appearance Settings'
+                            id='user.settings.display.theme.customTheme'
+                            defaultMessage='Custom Theme'
                         />
-                    </h4>
+                    </label>
+                    <br/>
                 </div>
-                <div className='user-settings'>
-                    <h3 className='tab-header'>
-                        <FormattedMessage
-                            id='user.settings.appearance.title'
-                            defaultMessage='Appearance Settings'
-                        />
-                    </h3>
-                    <div className='divider-dark first'/>
-                    {themeUI}
-                    <div className='divider-dark'/>
+            );
+
+            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 = {
-    activeSection: ''
-};
-UserSettingsAppearance.propTypes = {
-    activeSection: React.PropTypes.string,
-    updateTab: React.PropTypes.func,
-    closeModal: React.PropTypes.func.isRequired,
-    collapseModal: React.PropTypes.func.isRequired,
+ThemeSetting.propTypes = {
+    intl: intlShape.isRequired,
+    selected: React.PropTypes.bool.isRequired,
+    updateSection: React.PropTypes.func.isRequired,
     setRequireConfirm: React.PropTypes.func.isRequired,
     setEnforceFocus: React.PropTypes.func.isRequired
 };
+
+export default injectIntl(ThemeSetting);