Commit ca5e8d38 authored by Joram Wilander's avatar Joram Wilander Committed by Christopher Speller
Browse files

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

parent 4a326dd6
......@@ -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'
......
......@@ -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>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment