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 +++++++++++++++++-----
 1 file changed, 61 insertions(+), 17 deletions(-)

(limited to 'web/react/components/user_settings/custom_theme_chooser.jsx')

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] + ',';
         });
-- 
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

---
 .../components/user_settings/custom_theme_chooser.jsx     | 15 ++++++---------
 1 file changed, 6 insertions(+), 9 deletions(-)

(limited to 'web/react/components/user_settings/custom_theme_chooser.jsx')

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}
-- 
cgit v1.2.3-1-g7c22

