IntenseWebs/mattermost
3
0
Fork 0
mirror of https://github.com/mattermost/mattermost.git synced 2025-02-25 18:55:24 -06:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* use theme name value pairs

* format

* Beautify view

* handle split
This commit is contained in:
fengpan
2017-02-14 11:08:52 +08:00
committed by Corey Hulen
parent 1cfafed23e
commit 452a7c29a2
1 changed files with 34 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
webapp/components/user_settings/custom_theme_chooser.jsx
View File

@@ -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>
);