Removed old code theme selector and fixed some issues

web/react/components/user_settings/code_theme_chooser.jsx

@@ -1,55 +0,0 @@
-// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
-// See License.txt for license information.
-
-var Constants = require('../../utils/constants.jsx');
-
-export default class CodeThemeChooser extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = {};
-    }
-    render() {
-        const theme = this.props.theme;
-
-        const premadeThemes = [];
-        for (const k in Constants.CODE_THEMES) {
-            if (Constants.CODE_THEMES.hasOwnProperty(k)) {
-                let activeClass = '';
-                if (k === theme.codeTheme) {
-                    activeClass = 'active';
-                }
-
-                premadeThemes.push(
-                    <div
-                        className='col-xs-6 col-sm-3 premade-themes'
-                        key={'premade-theme-key' + k}
-                    >
-                        <div
-                            className={activeClass}
-                            onClick={() => this.props.updateTheme(k)}
-                        >
-                            <label>
-                                <img
-                                    className='img-responsive'
-                                    src={'/static/images/themes/code_themes/' + k + '.png'}
-                                />
-                                <div className='theme-label'>{Constants.CODE_THEMES[k]}</div>
-                            </label>
-                        </div>
-                    </div>
-                );
-            }
-        }
-
-        return (
-            <div className='row'>
-                {premadeThemes}
-            </div>
-        );
-    }
-}
-
-CodeThemeChooser.propTypes = {
-    theme: React.PropTypes.object.isRequired,
-    updateTheme: React.PropTypes.func.isRequired
-};

web/react/components/user_settings/custom_theme_chooser.jsx

@@ -87,13 +87,9 @@ export default class CustomThemeChooser extends React.Component {
                             >
                                 {codeThemeOptions}
                             </select>
-                            <span className='input-group-addon'>
-                                <i>
                             <img
                                 src={'/static/images/themes/code_themes/' + theme[element.id] + '.png'}
                             />
-                                </i>
-                            </span>
                         </div>
                     </div>
                 );
@@ -118,9 +114,9 @@ export default class CustomThemeChooser extends React.Component {
                         </div>
                     </div>
                 );
-            }
 
                 colors += theme[element.id] + ',';
+            }
         });
 
         colors += theme.codeTheme;
@@ -131,6 +127,7 @@ export default class CustomThemeChooser extends React.Component {
                     {'Copy and paste to share theme colors:'}
                 </label>
                 <input
+                    readOnly='true'
                     type='text'
                     className='form-control'
                     value={colors}

web/react/components/user_settings/user_settings_appearance.jsx

@@ -7,7 +7,6 @@ var Utils = require('../../utils/utils.jsx');
 
 const CustomThemeChooser = require('./custom_theme_chooser.jsx');
 const PremadeThemeChooser = require('./premade_theme_chooser.jsx');
-const CodeThemeChooser = require('./code_theme_chooser.jsx');
 const AppDispatcher = require('../../dispatcher/app_dispatcher.jsx');
 const Constants = require('../../utils/constants.jsx');
 const ActionTypes = Constants.ActionTypes;
@@ -19,7 +18,6 @@ export default class UserSettingsAppearance extends React.Component {
         this.onChange = this.onChange.bind(this);
         this.submitTheme = this.submitTheme.bind(this);
         this.updateTheme = this.updateTheme.bind(this);
-        this.updateCodeTheme = this.updateCodeTheme.bind(this);
         this.deactivate = this.deactivate.bind(this);
         this.resetFields = this.resetFields.bind(this);
         this.handleImportModal = this.handleImportModal.bind(this);
@@ -100,10 +98,6 @@ export default class UserSettingsAppearance extends React.Component {
         );
     }
     updateTheme(theme) {
-        if (!theme.codeTheme) {
-            theme.codeTheme = this.state.theme.codeTheme;
-        }
-
         let themeChanged = this.state.theme.length === theme.length;
         if (!themeChanged) {
             for (const field in theme) {
@@ -121,11 +115,6 @@ export default class UserSettingsAppearance extends React.Component {
         this.setState({theme});
         Utils.applyTheme(theme);
     }
-    updateCodeTheme(codeTheme) {
-        var theme = this.state.theme;
-        theme.codeTheme = codeTheme;
-        this.updateTheme(theme);
-    }
     updateType(type) {
         this.setState({type});
     }
@@ -203,7 +192,6 @@ export default class UserSettingsAppearance extends React.Component {
                     </div>
                     {custom}
                     <hr />
-
                     {serverError}
                     <a
                         className='btn btn-sm btn-primary'
@@ -223,13 +211,6 @@ export default class UserSettingsAppearance extends React.Component {
             </div>
         );
 
-                   /* <strong className='radio'>{'Code Theme'}</strong>
-                    <CodeThemeChooser
-                        theme={this.state.theme}
-                        updateTheme={this.updateCodeTheme}
-                    />
-                    <hr /> */
-
         return (
             <div>
                 <div className='modal-header'>

web/react/utils/constants.jsx

@@ -159,7 +159,8 @@ module.exports = {
             buttonBg: '#2389d7',
             buttonColor: '#FFFFFF',
             mentionHighlightBg: '#fff2bb',
-            mentionHighlightLink: '#2f81b7'
+            mentionHighlightLink: '#2f81b7',
+            codeTheme: 'github'
         },
         organization: {
             type: 'Organization',
@@ -181,7 +182,8 @@ module.exports = {
             buttonBg: '#1dacfc',
             buttonColor: '#FFFFFF',
             mentionHighlightBg: '#fff2bb',
-            mentionHighlightLink: '#2f81b7'
+            mentionHighlightLink: '#2f81b7',
+            codeTheme: 'github'
         },
         mattermostDark: {
             type: 'Mattermost Dark',
@@ -203,7 +205,8 @@ module.exports = {
             buttonBg: '#4CBBA4',
             buttonColor: '#FFFFFF',
             mentionHighlightBg: '#984063',
-            mentionHighlightLink: '#A4FFEB'
+            mentionHighlightLink: '#A4FFEB',
+            codeTheme: 'solarized_dark'
         },
         windows10: {
             type: 'Windows Dark',
@@ -225,7 +228,8 @@ module.exports = {
             buttonBg: '#0177e7',
             buttonColor: '#FFFFFF',
             mentionHighlightBg: '#784098',
-            mentionHighlightLink: '#A4FFEB'
+            mentionHighlightLink: '#A4FFEB',
+            codeTheme: 'monokai'
         }
     },
     THEME_ELEMENTS: [
@@ -315,7 +319,7 @@ module.exports = {
                 },
                 {
                     id: 'solarized_light',
-                    uiName: 'Solarized light'
+                    uiName: 'Solarized Light'
                 },
                 {
                     id: 'github',
@@ -328,12 +332,6 @@ module.exports = {
             ]
         }
     ],
-    CODE_THEMES: {
-        github: 'GitHub',
-        solarized_light: 'Solarized Light',
-        monokai: 'Monokai',
-        solarized_dark: 'Solarized Dark'
-    },
     DEFAULT_CODE_THEME: 'github',
     Preferences: {
         CATEGORY_DIRECT_CHANNEL_SHOW: 'direct_channel_show',

web/react/utils/utils.jsx

@@ -438,11 +438,6 @@ export function toTitleCase(str) {
 }
 
 export function applyTheme(theme) {
-    if (!theme.codeTheme) {
-        theme.codeTheme = Constants.DEFAULT_CODE_THEME;
-    }
-    updateCodeTheme(theme.codeTheme);
-
     if (theme.sidebarBg) {
         changeCss('.sidebar--left, .settings-modal .settings-table .settings-links, .sidebar--menu', 'background:' + theme.sidebarBg, 1);
     }
@@ -598,6 +593,11 @@ export function applyTheme(theme) {
     if (theme.mentionHighlightLink) {
         changeCss('.mention-highlight .mention-link', 'color:' + theme.mentionHighlightLink, 1);
     }
+
+    if (!theme.codeTheme) {
+        theme.codeTheme = Constants.DEFAULT_CODE_THEME;
+    }
+    updateCodeTheme(theme.codeTheme);
 }
 export function changeCss(className, classValue, classRepeat) {
     // we need invisible container to store additional css definitions