Switch list of hex values to theme name value pairs (#5301)

* use theme name value pairs

* format

* Beautify view

* handle split

1 files changed, 34 insertions, 11 deletions

diff --git a/webapp/components/user_settings/custom_theme_chooser.jsx b/webapp/components/user_settings/custom_theme_chooser.jsx
index 148996293..a8819f846 100644
--- a/webapp/components/user_settings/custom_theme_chooser.jsx
+++ b/webapp/components/user_settings/custom_theme_chooser.jsx
@@ -156,17 +156,36 @@ class CustomThemeChooser extends React.Component {
         this.props.updateTheme(theme);
     }
 
+    getColors(text) {
+        const colorsText = text.split(',');
+        return colorsText.map((colorText) => {
+            const trimText = colorText.trim();
+            const keyValue = trimText.split(':');
+            const color = keyValue[1].trim() || trimText;
+            if (Utils.isHexColor(color)) {
+                return color;
+            } else if (keyValue[0] === 'Code Theme') {
+                return keyValue[1].trim();
+            }
+            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 +201,10 @@ class CustomThemeChooser extends React.Component {
         this.props.updateTheme(theme);
     }
 
+    onChangeHandle(e) {
+        e.stopPropagation();
+    }
+
     toggleContent(e) {
         e.stopPropagation();
         if ($(e.target).hasClass('theme-elements__header')) {
@@ -291,7 +314,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 +336,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 +358,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 +372,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>
         );