code style theme chooser

9 files changed, 111 insertions, 2 deletions

diff --git a/web/react/components/user_settings/code_theme_chooser.jsx b/web/react/components/user_settings/code_theme_chooser.jsx
new file mode 100644
index 000000000..eef4b24ba
--- /dev/null
+++ b/web/react/components/user_settings/code_theme_chooser.jsx
@@ -0,0 +1,55 @@
+// 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
+};
diff --git a/web/react/components/user_settings/user_settings_appearance.jsx b/web/react/components/user_settings/user_settings_appearance.jsx
index 8c62a189d..e94894a1d 100644
--- a/web/react/components/user_settings/user_settings_appearance.jsx
+++ b/web/react/components/user_settings/user_settings_appearance.jsx
@@ -7,6 +7,7 @@ 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;
@@ -18,12 +19,14 @@ 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.handleClose = this.handleClose.bind(this);
         this.handleImportModal = this.handleImportModal.bind(this);
 
         this.state = this.getStateFromStores();
 
         this.originalTheme = this.state.theme;
+        this.originalCodeTheme = this.state.theme.codeTheme;
     }
     componentDidMount() {
         UserStore.addChangeListener(this.onChange);
@@ -58,6 +61,10 @@ export default class UserSettingsAppearance extends React.Component {
             type = 'custom';
         }
 
+        if (!theme.codeTheme) {
+            theme.codeTheme = Constants.DEFAULT_CODE_THEME;
+        }
+
         return {theme, type};
     }
     onChange() {
@@ -93,6 +100,13 @@ export default class UserSettingsAppearance extends React.Component {
         );
     }
     updateTheme(theme) {
+        theme.codeTheme = this.state.theme.codeTheme;
+        this.setState({theme});
+        Utils.applyTheme(theme);
+    }
+    updateCodeTheme(codeTheme) {
+        var theme = this.state.theme;
+        theme.codeTheme = codeTheme;
         this.setState({theme});
         Utils.applyTheme(theme);
     }
@@ -102,6 +116,7 @@ export default class UserSettingsAppearance extends React.Component {
     handleClose() {
         const state = this.getStateFromStores();
         state.serverError = null;
+        state.theme.codeTheme = this.originalCodeTheme;
 
         Utils.applyTheme(state.theme);
 
@@ -170,7 +185,13 @@ export default class UserSettingsAppearance extends React.Component {
                     </div>
                     {custom}
                     <hr />
-                                {serverError}
+                    <strong className='radio'>{'Code Theme'}</strong>
+                    <CodeThemeChooser
+                        theme={this.state.theme}
+                        updateTheme={this.updateCodeTheme}
+                    />
+                    <hr />
+                    {serverError}
                     <a
                         className='btn btn-sm btn-primary'
                         href='#'
diff --git a/web/react/utils/constants.jsx b/web/react/utils/constants.jsx
index 1a1d7f39f..9c079bb87 100644
--- a/web/react/utils/constants.jsx
+++ b/web/react/utils/constants.jsx
@@ -300,6 +300,13 @@ module.exports = {
             uiName: 'Mention Highlight Link'
         }
     ],
+    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',
         CATEGORY_DISPLAY_SETTINGS: 'display_settings'
diff --git a/web/react/utils/utils.jsx b/web/react/utils/utils.jsx
index 67a9d6983..4074c1767 100644
--- a/web/react/utils/utils.jsx
+++ b/web/react/utils/utils.jsx
@@ -402,6 +402,11 @@ 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);
     }
@@ -588,6 +593,27 @@ export function rgb2hex(rgbIn) {
     return '#' + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
 }
 
+export function updateCodeTheme(theme) {
+    const path = '/static/css/highlight/' + theme + '.css';
+    const $link = $('link.code_theme');
+    if (path !== $link.attr('href')) {
+        changeCss('code.hljs', 'visibility: hidden');
+        var xmlHTTP = new XMLHttpRequest();
+        xmlHTTP.open('GET', path, true);
+        xmlHTTP.onload = function onLoad() {
+            $link.attr('href', path);
+            if (isBrowserFirefox()) {
+                $link.one('load', () => {
+                    changeCss('code.hljs', 'visibility: visible');
+                });
+            } else {
+                changeCss('code.hljs', 'visibility: visible');
+            }
+        };
+        xmlHTTP.send();
+    }
+}
+
 export function placeCaretAtEnd(el) {
     el.focus();
     if (typeof window.getSelection != 'undefined' && typeof document.createRange != 'undefined') {
diff --git a/web/static/images/themes/code_themes/github.png b/web/static/images/themes/code_themes/github.png
new file mode 100644
index 000000000..d0538d6c0
--- /dev/null
+++ b/web/static/images/themes/code_themes/github.png
diff --git a/web/static/images/themes/code_themes/monokai.png b/web/static/images/themes/code_themes/monokai.png
new file mode 100644
index 000000000..8f92d2a18
--- /dev/null
+++ b/web/static/images/themes/code_themes/monokai.png
diff --git a/web/static/images/themes/code_themes/solarized_dark.png b/web/static/images/themes/code_themes/solarized_dark.png
new file mode 100644
index 000000000..76055c678
--- /dev/null
+++ b/web/static/images/themes/code_themes/solarized_dark.png
diff --git a/web/static/images/themes/code_themes/solarized_light.png b/web/static/images/themes/code_themes/solarized_light.png
new file mode 100644
index 000000000..b9595c22d
--- /dev/null
+++ b/web/static/images/themes/code_themes/solarized_light.png
diff --git a/web/templates/head.html b/web/templates/head.html
index 837cfb133..fdc371af4 100644
--- a/web/templates/head.html
+++ b/web/templates/head.html
@@ -24,7 +24,7 @@
     <link rel="stylesheet" href="/static/css/bootstrap-colorpicker.min.css">
     <link rel="stylesheet" href="/static/css/styles.css">
     <link rel="stylesheet" href="/static/css/google-fonts.css">
-    <link rel="stylesheet" href="/static/css/highlight/monokai_sublime.css">
+    <link rel="stylesheet" class="code_theme" href="">
 
     <link id="favicon" rel="icon" href="/static/images/favicon.ico" type="image/x-icon">
     <link rel="shortcut icon" href="/static/images/favicon.ico" type="image/x-icon">