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

Moved code theme picker into custom theme subarea

Browse Source
This commit is contained in:
Reed Garmsen
2015-11-03 09:39:07 -08:00
parent aee6d9b608
commit 0054924cdb
3 changed files with 92 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
web/react/components/user_settings/custom_theme_chooser.jsx
View File

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

14
web/react/components/user_settings/user_settings_appearance.jsx
View File

@@ -203,12 +203,7 @@ export default class UserSettingsAppearance extends React.Component {
</div>
{custom}
<hr />
<strong className='radio'>{'Code Theme'}</strong>
<CodeThemeChooser
theme={this.state.theme}
updateTheme={this.updateCodeTheme}
/>
<hr />
{serverError}
<a
className='btn btn-sm btn-primary'
@@ -228,6 +223,13 @@ export default class UserSettingsAppearance extends React.Component {
</div>
);
/* <strong className='radio'>{'Code Theme'}</strong>
<CodeThemeChooser
theme={this.state.theme}
updateTheme={this.updateCodeTheme}
/>
<hr /> */
return (
<div>
<div className='modal-header'>

24
web/react/utils/constants.jsx
View File

@@ -304,11 +304,33 @@ module.exports = {
{
id: 'mentionHighlightLink',
uiName: 'Mention Highlight Link'
},
{
id: 'codeTheme',
uiName: 'Code Theme',
themes: [
{
id: 'solarized_dark',
uiName: 'Solarized Dark'
},
{
id: 'solarized_light',
uiName: 'Solarized light'
},
{
id: 'github',
uiName: 'GitHub'
},
{
id: 'monokai',
uiName: 'Monokai'
}
]
}
],
CODE_THEMES: {
github: 'GitHub',
solarized_light: 'Solarized light',
solarized_light: 'Solarized Light',
monokai: 'Monokai',
solarized_dark: 'Solarized Dark'
},