diff options
Diffstat (limited to 'src/components')
-rw-r--r-- | src/components/settings/settings/EditSettingsForm.js | 47 | ||||
-rw-r--r-- | src/components/ui/ColorPickerInput.tsx | 14 |
2 files changed, 37 insertions, 24 deletions
diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js index b45c7ea56..96ae5a5ed 100644 --- a/src/components/settings/settings/EditSettingsForm.js +++ b/src/components/settings/settings/EditSettingsForm.js | |||
@@ -118,7 +118,15 @@ const messages = defineMessages({ | |||
118 | accentColorInfo: { | 118 | accentColorInfo: { |
119 | id: 'settings.app.accentColorInfo', | 119 | id: 'settings.app.accentColorInfo', |
120 | defaultMessage: | 120 | defaultMessage: |
121 | 'Write your accent color in a CSS-compatible format. (Default: {defaultAccentColor} or clear the input field)', | 121 | 'Write your color choice in a CSS-compatible format. (Default: {defaultAccentColor} or clear the input field)', |
122 | }, | ||
123 | overallTheme: { | ||
124 | id: 'settings.app.overallTheme', | ||
125 | defaultMessage: 'Overall Theme', | ||
126 | }, | ||
127 | progressbarTheme: { | ||
128 | id: 'settings.app.progressbarTheme', | ||
129 | defaultMessage: 'Progressbar Theme', | ||
122 | }, | 130 | }, |
123 | universalDarkModeInfo: { | 131 | universalDarkModeInfo: { |
124 | id: 'settings.app.universalDarkModeInfo', | 132 | id: 'settings.app.universalDarkModeInfo', |
@@ -598,25 +606,40 @@ class EditSettingsForm extends Component { | |||
598 | <H2 className='settings__section_header'> | 606 | <H2 className='settings__section_header'> |
599 | {intl.formatMessage(messages.sectionAccentColorSettings)} | 607 | {intl.formatMessage(messages.sectionAccentColorSettings)} |
600 | </H2> | 608 | </H2> |
609 | <p> | ||
610 | {intl.formatMessage(messages.accentColorInfo, { | ||
611 | defaultAccentColor: DEFAULT_APP_SETTINGS.accentColor, | ||
612 | })} | ||
613 | </p> | ||
614 | <p> | ||
615 | {intl.formatMessage(messages.overallTheme)} | ||
601 | <div className="settings__settings-group__apply-color"> | 616 | <div className="settings__settings-group__apply-color"> |
602 | <ColorPickerInput | 617 | <ColorPickerInput |
603 | onChange={e => this.submit(e)} | 618 | onChange={e => this.submit(e)} |
604 | field={form.$('accentColor')} | 619 | field={form.$('accentColor')} |
605 | className='color-picker-input' | 620 | className='color-picker-input' |
606 | /> | 621 | /> |
607 | <> | ||
608 | <Button | ||
609 | buttonType="secondary" | ||
610 | className="settings__settings-group__apply-color__button" | ||
611 | label="Apply color" | ||
612 | onClick={(e) => { this.submit(e) }} | ||
613 | /> | ||
614 | </> | ||
615 | </div> | 622 | </div> |
623 | </p> | ||
624 | <p> | ||
625 | {intl.formatMessage(messages.progressbarTheme)} | ||
626 | <div className="settings__settings-group__apply-color"> | ||
627 | <ColorPickerInput | ||
628 | onChange={e => this.submit(e)} | ||
629 | field={form.$('progressbarAccentColor')} | ||
630 | className='color-picker-input' | ||
631 | /> | ||
632 | </div> | ||
633 | </p> | ||
616 | <p> | 634 | <p> |
617 | {intl.formatMessage(messages.accentColorInfo, { | 635 | <div className="settings__settings-group__apply-color"> |
618 | defaultAccentColor: DEFAULT_APP_SETTINGS.accentColor, | 636 | <Button |
619 | })} | 637 | buttonType="secondary" |
638 | className="settings__settings-group__apply-color__button" | ||
639 | label="Apply color" | ||
640 | onClick={(e) => { this.submit(e) }} | ||
641 | /> | ||
642 | </div> | ||
620 | </p> | 643 | </p> |
621 | <Hr /> | 644 | <Hr /> |
622 | 645 | ||
diff --git a/src/components/ui/ColorPickerInput.tsx b/src/components/ui/ColorPickerInput.tsx index 7cbdb295b..8a4d3129a 100644 --- a/src/components/ui/ColorPickerInput.tsx +++ b/src/components/ui/ColorPickerInput.tsx | |||
@@ -3,7 +3,6 @@ import { observer } from 'mobx-react'; | |||
3 | import { Field } from 'mobx-react-form'; | 3 | import { Field } from 'mobx-react-form'; |
4 | import classnames from 'classnames'; | 4 | import classnames from 'classnames'; |
5 | import { SliderPicker } from 'react-color'; | 5 | import { SliderPicker } from 'react-color'; |
6 | import { DEFAULT_APP_SETTINGS } from '../../config'; | ||
7 | 6 | ||
8 | interface IProps { | 7 | interface IProps { |
9 | field: Field; | 8 | field: Field; |
@@ -11,20 +10,12 @@ interface IProps { | |||
11 | focus?: boolean; | 10 | focus?: boolean; |
12 | }; | 11 | }; |
13 | 12 | ||
14 | interface IState { | 13 | class ColorPickerInput extends Component<IProps> { |
15 | background: string; | ||
16 | } | ||
17 | |||
18 | class ColorPickerInput extends Component<IProps, IState> { | ||
19 | static defaultProps = { | 14 | static defaultProps = { |
20 | className: null, | 15 | className: null, |
21 | focus: false, | 16 | focus: false, |
22 | }; | 17 | }; |
23 | 18 | ||
24 | state = { | ||
25 | background: DEFAULT_APP_SETTINGS.accentColor, | ||
26 | }; | ||
27 | |||
28 | inputElement: HTMLInputElement | null | undefined; | 19 | inputElement: HTMLInputElement | null | undefined; |
29 | 20 | ||
30 | componentDidMount() { | 21 | componentDidMount() { |
@@ -45,7 +36,6 @@ class ColorPickerInput extends Component<IProps, IState> { | |||
45 | 36 | ||
46 | handleChangeComplete = (color: { hex: string; }) => { | 37 | handleChangeComplete = (color: { hex: string; }) => { |
47 | const { field } = this.props; | 38 | const { field } = this.props; |
48 | this.setState({ background: color.hex }); | ||
49 | field.value = color.hex | 39 | field.value = color.hex |
50 | }; | 40 | }; |
51 | 41 | ||
@@ -67,7 +57,7 @@ class ColorPickerInput extends Component<IProps, IState> { | |||
67 | })} | 57 | })} |
68 | > | 58 | > |
69 | <SliderPicker | 59 | <SliderPicker |
70 | color={ this.state.background } | 60 | color={ field.value } |
71 | onChangeComplete={ this.handleChangeComplete } | 61 | onChangeComplete={ this.handleChangeComplete } |
72 | id={field.id} | 62 | id={field.id} |
73 | type={type} | 63 | type={type} |