diff options
author | fengpan <pan.feng@shareworks.cn> | 2017-02-14 11:08:52 +0800 |
---|---|---|
committer | Corey Hulen <corey@hulen.com> | 2017-02-13 22:08:52 -0500 |
commit | 452a7c29a25fc38d985d6613dd0816f41751231f (patch) | |
tree | 95a7985228b8af91e00330ab834dfd4aedd359be /webapp | |
parent | 1cfafed23ead980b3be3e5ad4f2ae61ea0c4d86d (diff) | |
download | chat-452a7c29a25fc38d985d6613dd0816f41751231f.tar.gz chat-452a7c29a25fc38d985d6613dd0816f41751231f.tar.bz2 chat-452a7c29a25fc38d985d6613dd0816f41751231f.zip |
Switch list of hex values to theme name value pairs (#5301)
* use theme name value pairs
* format
* Beautify view
* handle split
Diffstat (limited to 'webapp')
-rw-r--r-- | webapp/components/user_settings/custom_theme_chooser.jsx | 45 |
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> ); |