From 0054924cdbcdb3e3631bd7036244aebba4234c33 Mon Sep 17 00:00:00 2001
From: Reed Garmsen <rgarmsen2295@gmail.com>
Date: Tue, 3 Nov 2015 09:39:07 -0800
Subject: Moved code theme picker into custom theme subarea

---
 .../user_settings/custom_theme_chooser.jsx         | 78 +++++++++++++++++-----
 .../user_settings/user_settings_appearance.jsx     | 14 ++--
 web/react/utils/constants.jsx                      | 24 ++++++-
 3 files changed, 92 insertions(+), 24 deletions(-)

(limited to 'web/react')

diff --git a/web/react/components/user_settings/custom_theme_chooser.jsx b/web/react/components/user_settings/custom_theme_chooser.jsx
index 095e5b622..07e3fb24c 100644
--- a/web/react/components/user_settings/custom_theme_chooser.jsx
+++ b/web/react/components/user_settings/custom_theme_chooser.jsx
@@ -55,26 +55,70 @@ export default class CustomThemeChooser extends React.Component {
         const elements = [];
         let colors = '';
         Constants.THEME_ELEMENTS.forEach((element, index) => {
-            elements.push(
-                <div
-                    className='col-sm-4 form-group'
-                    key={'custom-theme-key' + index}
-                >
-                    <label className='custom-label'>{element.uiName}</label>
+            if (element.id === 'codeTheme') {
+                const codeThemeOptions = [];
+
+                element.themes.forEach((codeTheme, codeThemeIndex) => {
+                    codeThemeOptions.push(
+                        <option
+                            key={'code-theme-key' + codeThemeIndex}
+                            value={codeTheme.id}
+                        >
+                            {codeTheme.uiName}
+                        </option>
+                    );
+                });
+
+                elements.push(
                     <div
-                        className='input-group color-picker'
-                        id={element.id}
+                        className='col-sm-4 form-group'
+                        key={'custom-theme-key' + index}
                     >
-                        <input
-                            className='form-control'
-                            type='text'
-                            defaultValue={theme[element.id]}
-                            onChange={this.onInputChange}
-                        />
-                        <span className='input-group-addon'><i></i></span>
+                        <label className='custom-label'>{element.uiName}</label>
+                        <div
+                            className='input-group dropdown'
+                            id={element.id}
+                        >
+                            <select
+                                className='form-control'
+                                type='text'
+                                defaultValue={theme[element.id]}
+                                onChange={this.onInputChange}
+                            >
+                                {codeThemeOptions}
+                            </select>
+                            <span className='input-group-addon'>
+                                <i>
+                                    <img
+                                        src={'/static/images/themes/code_themes/' + theme[element.id] + '.png'}
+                                    />
+                                </i>
+                            </span>
+                        </div>
                     </div>
-                </div>
-            );
+                );
+            } else {
+                elements.push(
+                    <div
+                        className='col-sm-4 form-group'
+                        key={'custom-theme-key' + index}
+                    >
+                        <label className='custom-label'>{element.uiName}</label>
+                        <div
+                            className='input-group color-picker'
+                            id={element.id}
+                        >
+                            <input
+                                className='form-control'
+                                type='text'
+                                defaultValue={theme[element.id]}
+                                onChange={this.onInputChange}
+                            />
+                            <span className='input-group-addon'><i></i></span>
+                        </div>
+                    </div>
+                );
+            }
 
             colors += theme[element.id] + ',';
         });
diff --git a/web/react/components/user_settings/user_settings_appearance.jsx b/web/react/components/user_settings/user_settings_appearance.jsx
index 425645c1f..550c180c0 100644
--- a/web/react/components/user_settings/user_settings_appearance.jsx
+++ b/web/react/components/user_settings/user_settings_appearance.jsx
@@ -203,12 +203,7 @@ export default class UserSettingsAppearance extends React.Component {
                     </div>
                     {custom}
                     <hr />
-                    <strong className='radio'>{'Code Theme'}</strong>
-                    <CodeThemeChooser
-                        theme={this.state.theme}
-                        updateTheme={this.updateCodeTheme}
-                    />
-                    <hr />
+
                     {serverError}
                     <a
                         className='btn btn-sm btn-primary'
@@ -228,6 +223,13 @@ 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'>
diff --git a/web/react/utils/constants.jsx b/web/react/utils/constants.jsx
index b8d346ba7..3cc76bd95 100644
--- a/web/react/utils/constants.jsx
+++ b/web/react/utils/constants.jsx
@@ -304,11 +304,33 @@ module.exports = {
         {
             id: 'mentionHighlightLink',
             uiName: 'Mention Highlight Link'
+        },
+        {
+            id: 'codeTheme',
+            uiName: 'Code Theme',
+            themes: [
+                {
+                    id: 'solarized_dark',
+                    uiName: 'Solarized Dark'
+                },
+                {
+                    id: 'solarized_light',
+                    uiName: 'Solarized light'
+                },
+                {
+                    id: 'github',
+                    uiName: 'GitHub'
+                },
+                {
+                    id: 'monokai',
+                    uiName: 'Monokai'
+                }
+            ]
         }
     ],
     CODE_THEMES: {
         github: 'GitHub',
-        solarized_light: 'Solarized light',
+        solarized_light: 'Solarized Light',
         monokai: 'Monokai',
         solarized_dark: 'Solarized Dark'
     },
-- 
cgit v1.2.3-1-g7c22


From 4897997025d07998e77cee4dd1c4252fff763db4 Mon Sep 17 00:00:00 2001
From: Reed Garmsen <rgarmsen2295@gmail.com>
Date: Wed, 4 Nov 2015 13:49:39 -0800
Subject: Removed old code theme selector and fixed some issues

---
 .../user_settings/code_theme_chooser.jsx           | 55 ----------------------
 .../user_settings/custom_theme_chooser.jsx         | 15 +++---
 .../user_settings/user_settings_appearance.jsx     | 19 --------
 web/react/utils/constants.jsx                      | 20 ++++----
 web/react/utils/utils.jsx                          | 10 ++--
 5 files changed, 20 insertions(+), 99 deletions(-)
 delete mode 100644 web/react/components/user_settings/code_theme_chooser.jsx

(limited to 'web/react')

diff --git a/web/react/components/user_settings/code_theme_chooser.jsx b/web/react/components/user_settings/code_theme_chooser.jsx
deleted file mode 100644
index eef4b24ba..000000000
--- a/web/react/components/user_settings/code_theme_chooser.jsx
+++ /dev/null
@@ -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
-};
diff --git a/web/react/components/user_settings/custom_theme_chooser.jsx b/web/react/components/user_settings/custom_theme_chooser.jsx
index 07e3fb24c..986b0b2fd 100644
--- a/web/react/components/user_settings/custom_theme_chooser.jsx
+++ b/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>
+                            <img
+                                src={'/static/images/themes/code_themes/' + theme[element.id] + '.png'}
+                            />
                         </div>
                     </div>
                 );
@@ -118,9 +114,9 @@ export default class CustomThemeChooser extends React.Component {
                         </div>
                     </div>
                 );
-            }
 
-            colors += theme[element.id] + ',';
+                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}
diff --git a/web/react/components/user_settings/user_settings_appearance.jsx b/web/react/components/user_settings/user_settings_appearance.jsx
index 550c180c0..d73b5f476 100644
--- a/web/react/components/user_settings/user_settings_appearance.jsx
+++ b/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'>
diff --git a/web/react/utils/constants.jsx b/web/react/utils/constants.jsx
index 3cc76bd95..7d885681a 100644
--- a/web/react/utils/constants.jsx
+++ b/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',
diff --git a/web/react/utils/utils.jsx b/web/react/utils/utils.jsx
index e8d34dccd..770ab01c5 100644
--- a/web/react/utils/utils.jsx
+++ b/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
-- 
cgit v1.2.3-1-g7c22


From 9bf832f9f32a1171b2250ed99caa3a3553e877e2 Mon Sep 17 00:00:00 2001
From: Asaad Mahmood <Unknowngi@live.com>
Date: Thu, 5 Nov 2015 10:43:20 +0500
Subject: Updating code themes

---
 web/react/components/user_settings/custom_theme_chooser.jsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

(limited to 'web/react')

diff --git a/web/react/components/user_settings/custom_theme_chooser.jsx b/web/react/components/user_settings/custom_theme_chooser.jsx
index 986b0b2fd..895d0c500 100644
--- a/web/react/components/user_settings/custom_theme_chooser.jsx
+++ b/web/react/components/user_settings/custom_theme_chooser.jsx
@@ -76,7 +76,7 @@ export default class CustomThemeChooser extends React.Component {
                     >
                         <label className='custom-label'>{element.uiName}</label>
                         <div
-                            className='input-group dropdown'
+                            className='input-group theme-group dropdown'
                             id={element.id}
                         >
                             <select
@@ -87,9 +87,11 @@ export default class CustomThemeChooser extends React.Component {
                             >
                                 {codeThemeOptions}
                             </select>
-                            <img
-                                src={'/static/images/themes/code_themes/' + theme[element.id] + '.png'}
-                            />
+                            <span className='input-group-addon'>
+                                <img
+                                    src={'/static/images/themes/code_themes/' + theme[element.id] + '.png'}
+                                />
+                            </span>
                         </div>
                     </div>
                 );
-- 
cgit v1.2.3-1-g7c22


From a809ff88625e0fbaab8d14e2d35e85abd8fe6111 Mon Sep 17 00:00:00 2001
From: Asaad Mahmood <Unknowngi@live.com>
Date: Thu, 5 Nov 2015 11:06:47 +0500
Subject: Updating UI for access history and access log modals

---
 web/react/components/activity_log_modal.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'web/react')

diff --git a/web/react/components/activity_log_modal.jsx b/web/react/components/activity_log_modal.jsx
index 6a24870f6..ef3077470 100644
--- a/web/react/components/activity_log_modal.jsx
+++ b/web/react/components/activity_log_modal.jsx
@@ -167,8 +167,8 @@ export default class ActivityLogModal extends React.Component {
                 <Modal.Header closeButton={true}>
                     <Modal.Title>{'Active Sessions'}</Modal.Title>
                 </Modal.Header>
-                <p className='session-help-text'>{'Sessions are created when you log in with your email and password to a new browser on a device. Sessions let you use Mattermost for up to 30 days without having to log in again. If you want to log out sooner, use the \'Logout\' button below to end a session.'}</p>
                 <Modal.Body ref='modalBody'>
+                    <p className='session-help-text'>{'Sessions are created when you log in with your email and password to a new browser on a device. Sessions let you use Mattermost for up to 30 days without having to log in again. If you want to log out sooner, use the \'Logout\' button below to end a session.'}</p>
                     {content}
                 </Modal.Body>
             </Modal>
-- 
cgit v1.2.3-1-g7c22