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

Allow users to manually enter colors into theme pickers (#3164)

Browse Source
This commit is contained in:
Joram Wilander
2016-05-31 10:40:23 -04:00
committed by Christopher Speller
parent 4a326dd6ce
commit ca5e8d38e9
2 changed files with 15 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
webapp/components/navbar_dropdown.jsx
View File

@@ -292,7 +292,10 @@ export default class NavbarDropdown extends React.Component {
<li>
<a
href='#'
onClick={() => this.setState({showUserSettingsModal: true})}
onClick={(e) => {
e.preventDefault();
this.setState({showUserSettingsModal: true});
}}
>
<FormattedMessage
id='navbar_dropdown.accountSettings'

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

@@ -99,12 +99,13 @@ const messages = defineMessages({
import React from 'react';
const HEX_CODE_LENGTH = 7;
class CustomThemeChooser extends React.Component {
constructor(props) {
super(props);
this.onPickerChange = this.onPickerChange.bind(this);
this.onInputChange = this.onInputChange.bind(this);
this.pasteBoxChange = this.pasteBoxChange.bind(this);
this.toggleContent = this.toggleContent.bind(this);
@@ -126,17 +127,16 @@ class CustomThemeChooser extends React.Component {
});
}
onPickerChange(e) {
const inputBox = e.target.childNodes[0];
if (document.activeElement === inputBox && inputBox.value.length !== HEX_CODE_LENGTH) {
return;
}
const theme = this.props.theme;
theme[e.target.id] = e.color.toHex();
theme.type = 'custom';
this.props.updateTheme(theme);
}
onInputChange(e) {
const theme = this.props.theme;
theme[e.target.parentNode.id] = e.target.value;
theme.type = 'custom';
this.props.updateTheme(theme);
}
pasteBoxChange(e) {
const text = e.target.value;
@@ -225,8 +225,7 @@ class CustomThemeChooser extends React.Component {
<select
className='form-control'
type='text'
value={theme[element.id]}
onChange={this.onInputChange}
defaultValue={theme[element.id]}
>
{codeThemeOptions}
</select>
@@ -258,8 +257,7 @@ class CustomThemeChooser extends React.Component {
<input
className='form-control'
type='text'
value={theme[element.id]}
onChange={this.onInputChange}
defaultValue={theme[element.id]}
/>
<span className='input-group-addon'><i></i></span>
</div>
@@ -281,8 +279,7 @@ class CustomThemeChooser extends React.Component {
<input
className='form-control'
type='text'
value={theme[element.id]}
onChange={this.onInputChange}
defaultValue={theme[element.id]}
/>
<span className='input-group-addon'><i></i></span>
</div>
@@ -304,8 +301,7 @@ class CustomThemeChooser extends React.Component {
<input
className='form-control'
type='text'
value={theme[element.id]}
onChange={this.onInputChange}
defaultValue={theme[element.id]}
/>
<span className='input-group-addon'><i></i></span>
</div>