From f72abf1fc1edb5a85704fc91be9649834aed3bad Mon Sep 17 00:00:00 2001
From: pan feng <pan feng>
Date: Fri, 3 Feb 2017 18:08:18 +0800
Subject: [PATCH 1/3] use theme name value pairs

---
 .../user_settings/custom_theme_chooser.jsx    | 41 ++++++++++++++-----
 1 file changed, 30 insertions(+), 11 deletions(-)

diff --git a/webapp/components/user_settings/custom_theme_chooser.jsx b/webapp/components/user_settings/custom_theme_chooser.jsx
index 148996293bf44..449f4ae8ad17a 100644
--- a/webapp/components/user_settings/custom_theme_chooser.jsx
+++ b/webapp/components/user_settings/custom_theme_chooser.jsx
@@ -156,17 +156,32 @@ class CustomThemeChooser extends React.Component {
         this.props.updateTheme(theme);
     }
 
+    getColors(text) {
+        const colorsText = text.split(',');
+        const exp = new RegExp(`^#[0-9a-fA-F]{3}([0-9a-fA-F]{3})?$`);
+        return colorsText.map(colorText => {
+            let color = colorText.split(': ')[1] || colorText;
+            if(exp.test(color))
+                return color;
+            return '#FFF';
+        });
+    }
+
     pasteBoxChange(e) {
-        const text = e.target.value;
+        let text = '';
+
+        if (window.clipboardData && window.clipboardData.getData) { // IE
+            text = window.clipboardData.getData('Text');
+        } else {
+            text = e.clipboardData.getData('Text');//e.clipboardData.getData('text/plain');
+        }
 
         if (text.length === 0) {
             return;
         }
 
         // theme vectors are currently represented as a number of hex color codes followed by the code theme
-
-        const colors = text.split(',');
-
+        const colors = this.getColors(text);
         const theme = {type: 'custom'};
         let index = 0;
         Constants.THEME_ELEMENTS.forEach((element) => {
@@ -182,6 +197,10 @@ class CustomThemeChooser extends React.Component {
         this.props.updateTheme(theme);
     }
 
+    onChangeHandle(e){
+        // 
+    }
+
     toggleContent(e) {
         e.stopPropagation();
         if ($(e.target).hasClass('theme-elements__header')) {
@@ -291,7 +310,7 @@ class CustomThemeChooser extends React.Component {
                     </div>
                 );
 
-                colors += theme[element.id] + ',';
+                colors += formatMessage(messages[element.id]) + ': ' + theme[element.id] + ',';
             } else if (element.group === 'sidebarElements') {
                 sidebarElements.push(
                     <div
@@ -313,7 +332,7 @@ class CustomThemeChooser extends React.Component {
                     </div>
                 );
 
-                colors += theme[element.id] + ',';
+                colors += formatMessage(messages[element.id]) + ': ' + theme[element.id] + ',';
             } else {
                 linkAndButtonElements.push(
                     <div
@@ -335,11 +354,11 @@ class CustomThemeChooser extends React.Component {
                     </div>
                 );
 
-                colors += theme[element.id] + ',';
+                colors += formatMessage(messages[element.id]) + ': ' + theme[element.id] + ',';
             }
         });
 
-        colors += theme.codeTheme;
+        colors += 'code theme: ' + theme.codeTheme;
 
         const pasteBox = (
             <div className='col-sm-12'>
@@ -349,11 +368,11 @@ class CustomThemeChooser extends React.Component {
                         defaultMessage='Copy and paste to share theme colors:'
                     />
                 </label>
-                <input
-                    type='text'
+                <textarea
                     className='form-control'
                     value={colors}
-                    onChange={this.pasteBoxChange}
+                    onPaste={this.pasteBoxChange}
+                    onChange={this.onChangeHandle}
                 />
             </div>
         );

From d232da6cedb402d77ed3152a71d3edf8f755fd32 Mon Sep 17 00:00:00 2001
From: pan feng <pan feng>
Date: Sat, 4 Feb 2017 09:25:16 +0800
Subject: [PATCH 2/3] format

---
 .../user_settings/custom_theme_chooser.jsx          | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/webapp/components/user_settings/custom_theme_chooser.jsx b/webapp/components/user_settings/custom_theme_chooser.jsx
index 449f4ae8ad17a..5148cc161d63f 100644
--- a/webapp/components/user_settings/custom_theme_chooser.jsx
+++ b/webapp/components/user_settings/custom_theme_chooser.jsx
@@ -158,11 +158,12 @@ class CustomThemeChooser extends React.Component {
 
     getColors(text) {
         const colorsText = text.split(',');
-        const exp = new RegExp(`^#[0-9a-fA-F]{3}([0-9a-fA-F]{3})?$`);
-        return colorsText.map(colorText => {
-            let color = colorText.split(': ')[1] || colorText;
-            if(exp.test(color))
+        const exp = new RegExp('^#[0-9a-fA-F]{3}([0-9a-fA-F]{3})?$');
+        return colorsText.map((colorText) => {
+            const color = colorText.split(': ')[1] || colorText;
+            if (exp.test(color)) {
                 return color;
+            }
             return '#FFF';
         });
     }
@@ -197,8 +198,8 @@ class CustomThemeChooser extends React.Component {
         this.props.updateTheme(theme);
     }
 
-    onChangeHandle(e){
-        // 
+    onChangeHandle(e) {
+        e.stopPropagation();
     }
 
     toggleContent(e) {

From 80ad17e70b859ed16c46fbe407e1a05e8f164044 Mon Sep 17 00:00:00 2001
From: pan feng <pan feng>
Date: Tue, 7 Feb 2017 10:40:42 +0800
Subject: [PATCH 3/3] Beautify view

---
 .../user_settings/custom_theme_chooser.jsx     | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/webapp/components/user_settings/custom_theme_chooser.jsx b/webapp/components/user_settings/custom_theme_chooser.jsx
index 5148cc161d63f..dee5518c10be5 100644
--- a/webapp/components/user_settings/custom_theme_chooser.jsx
+++ b/webapp/components/user_settings/custom_theme_chooser.jsx
@@ -157,12 +157,14 @@ class CustomThemeChooser extends React.Component {
     }
 
     getColors(text) {
-        const colorsText = text.split(',');
-        const exp = new RegExp('^#[0-9a-fA-F]{3}([0-9a-fA-F]{3})?$');
+        const colorsText = text.split(', ');
         return colorsText.map((colorText) => {
-            const color = colorText.split(': ')[1] || colorText;
-            if (exp.test(color)) {
+            const keyValue = colorText.split(': ');
+            const color = keyValue[1] || colorText;
+            if (Utils.isHexColor(color)) {
                 return color;
+            } else if (keyValue[0] === 'Code Theme') {
+                return keyValue[1];
             }
             return '#FFF';
         });
@@ -311,7 +313,7 @@ class CustomThemeChooser extends React.Component {
                     </div>
                 );
 
-                colors += formatMessage(messages[element.id]) + ': ' + theme[element.id] + ',';
+                colors += formatMessage(messages[element.id]) + ': ' + theme[element.id] + ', ';
             } else if (element.group === 'sidebarElements') {
                 sidebarElements.push(
                     <div
@@ -333,7 +335,7 @@ class CustomThemeChooser extends React.Component {
                     </div>
                 );
 
-                colors += formatMessage(messages[element.id]) + ': ' + theme[element.id] + ',';
+                colors += formatMessage(messages[element.id]) + ': ' + theme[element.id] + ', ';
             } else {
                 linkAndButtonElements.push(
                     <div
@@ -355,11 +357,11 @@ class CustomThemeChooser extends React.Component {
                     </div>
                 );
 
-                colors += formatMessage(messages[element.id]) + ': ' + theme[element.id] + ',';
+                colors += formatMessage(messages[element.id]) + ': ' + theme[element.id] + ', ';
             }
         });
 
-        colors += 'code theme: ' + theme.codeTheme;
+        colors += 'Code Theme: ' + theme.codeTheme;
 
         const pasteBox = (
             <div className='col-sm-12'>