Этот коммит содержится в:
Asaad Mahmood
2015-11-05 10:26:44 +05:00
родитель 8c2dace188 4897997025
Коммит 11ccb14fd4
5 изменённых файлов: 97 добавлений и 108 удалений

Просмотреть файл

@@ -1,55 +0,0 @@
// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
var Constants = require('../../utils/constants.jsx');
export default class CodeThemeChooser extends React.Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
const theme = this.props.theme;
const premadeThemes = [];
for (const k in Constants.CODE_THEMES) {
if (Constants.CODE_THEMES.hasOwnProperty(k)) {
let activeClass = '';
if (k === theme.codeTheme) {
activeClass = 'active';
}
premadeThemes.push(
<div
className='col-xs-6 col-sm-3 premade-themes'
key={'premade-theme-key' + k}
>
<div
className={activeClass}
onClick={() => this.props.updateTheme(k)}
>
<label>
<img
className='img-responsive'
src={'/static/images/themes/code_themes/' + k + '.png'}
/>
<div className='theme-label'>{Constants.CODE_THEMES[k]}</div>
</label>
</div>
</div>
);
}
}
return (
<div className='row'>
{premadeThemes}
</div>
);
}
}
CodeThemeChooser.propTypes = {
theme: React.PropTypes.object.isRequired,
updateTheme: React.PropTypes.func.isRequired
};

Просмотреть файл

@@ -55,28 +55,68 @@ 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>
<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>
);
if (element.id === 'codeTheme') {
const codeThemeOptions = [];
colors += theme[element.id] + ',';
element.themes.forEach((codeTheme, codeThemeIndex) => {
codeThemeOptions.push(
<option
key={'code-theme-key' + codeThemeIndex}
value={codeTheme.id}
>
{codeTheme.uiName}
</option>
);
});
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 dropdown'
id={element.id}
>
<select
className='form-control'
type='text'
defaultValue={theme[element.id]}
onChange={this.onInputChange}
>
{codeThemeOptions}
</select>
<img
src={'/static/images/themes/code_themes/' + theme[element.id] + '.png'}
/>
</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] + ',';
}
});
colors += theme.codeTheme;
@@ -87,6 +127,7 @@ export default class CustomThemeChooser extends React.Component {
{'Copy and paste to share theme colors:'}
</label>
<input
readOnly='true'
type='text'
className='form-control'
value={colors}

Просмотреть файл

@@ -7,7 +7,6 @@ var Utils = require('../../utils/utils.jsx');
const CustomThemeChooser = require('./custom_theme_chooser.jsx');
const PremadeThemeChooser = require('./premade_theme_chooser.jsx');
const CodeThemeChooser = require('./code_theme_chooser.jsx');
const AppDispatcher = require('../../dispatcher/app_dispatcher.jsx');
const Constants = require('../../utils/constants.jsx');
const ActionTypes = Constants.ActionTypes;
@@ -19,7 +18,6 @@ export default class UserSettingsAppearance extends React.Component {
this.onChange = this.onChange.bind(this);
this.submitTheme = this.submitTheme.bind(this);
this.updateTheme = this.updateTheme.bind(this);
this.updateCodeTheme = this.updateCodeTheme.bind(this);
this.deactivate = this.deactivate.bind(this);
this.resetFields = this.resetFields.bind(this);
this.handleImportModal = this.handleImportModal.bind(this);
@@ -100,10 +98,6 @@ export default class UserSettingsAppearance extends React.Component {
);
}
updateTheme(theme) {
if (!theme.codeTheme) {
theme.codeTheme = this.state.theme.codeTheme;
}
let themeChanged = this.state.theme.length === theme.length;
if (!themeChanged) {
for (const field in theme) {
@@ -121,11 +115,6 @@ export default class UserSettingsAppearance extends React.Component {
this.setState({theme});
Utils.applyTheme(theme);
}
updateCodeTheme(codeTheme) {
var theme = this.state.theme;
theme.codeTheme = codeTheme;
this.updateTheme(theme);
}
updateType(type) {
this.setState({type});
}
@@ -203,12 +192,6 @@ 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'