diff options
author | André Oliveira <37463445+SpecialAro@users.noreply.github.com> | 2022-06-12 03:20:22 +0530 |
---|---|---|
committer | Vijay A <vraravam@users.noreply.github.com> | 2022-06-12 03:20:22 +0530 |
commit | c518024d9ca33b6d59818c263b2a755313036618 (patch) | |
tree | 574291874cecc9910aca0de4bc929cd128e26872 /src/components | |
parent | Fix hero image (was referring to ferdi repo) (diff) | |
download | ferdium-app-c518024d9ca33b6d59818c263b2a755313036618.tar.gz ferdium-app-c518024d9ca33b6d59818c263b2a755313036618.tar.zst ferdium-app-c518024d9ca33b6d59818c263b2a755313036618.zip |
Feature: Add color picker component for accent color setting (#228)
Co-authored-by: Vijay A <vraravam@users.noreply.github.com>
Diffstat (limited to 'src/components')
-rw-r--r-- | src/components/settings/settings/EditSettingsForm.js | 40 | ||||
-rw-r--r-- | src/components/ui/ColorPickerInput.tsx | 107 |
2 files changed, 135 insertions, 12 deletions
diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js index 1d61a7510..3f36f5e44 100644 --- a/src/components/settings/settings/EditSettingsForm.js +++ b/src/components/settings/settings/EditSettingsForm.js | |||
@@ -12,6 +12,7 @@ import Button from '../../ui/button'; | |||
12 | import Toggle from '../../ui/Toggle'; | 12 | import Toggle from '../../ui/Toggle'; |
13 | import Select from '../../ui/Select'; | 13 | import Select from '../../ui/Select'; |
14 | import Input from '../../ui/Input'; | 14 | import Input from '../../ui/Input'; |
15 | import ColorPickerInput from '../../ui/ColorPickerInput'; | ||
15 | import Infobox from '../../ui/Infobox'; | 16 | import Infobox from '../../ui/Infobox'; |
16 | import { H1, H2, H3, H5 } from '../../ui/headline'; | 17 | import { H1, H2, H3, H5 } from '../../ui/headline'; |
17 | 18 | ||
@@ -115,15 +116,19 @@ const messages = defineMessages({ | |||
115 | id: 'settings.app.sectionServiceIconsSettings', | 116 | id: 'settings.app.sectionServiceIconsSettings', |
116 | defaultMessage: 'Service Icons Settings', | 117 | defaultMessage: 'Service Icons Settings', |
117 | }, | 118 | }, |
118 | universalDarkModeInfo: { | 119 | sectionAccentColorSettings: { |
119 | id: 'settings.app.universalDarkModeInfo', | 120 | id: 'settings.app.sectionAccentColorSettings', |
120 | defaultMessage: | 121 | defaultMessage: 'Accent Color Settings', |
121 | 'Universal Dark Mode tries to dynamically generate dark mode styles for services that are otherwise not currently supported.', | ||
122 | }, | 122 | }, |
123 | accentColorInfo: { | 123 | accentColorInfo: { |
124 | id: 'settings.app.accentColorInfo', | 124 | id: 'settings.app.accentColorInfo', |
125 | defaultMessage: | 125 | defaultMessage: |
126 | 'Write your accent color in a CSS-compatible format. (Default: {defaultAccentColor})', | 126 | 'Write your accent color in a CSS-compatible format. (Default: {defaultAccentColor} or clear the input field)', |
127 | }, | ||
128 | universalDarkModeInfo: { | ||
129 | id: 'settings.app.universalDarkModeInfo', | ||
130 | defaultMessage: | ||
131 | 'Universal Dark Mode tries to dynamically generate dark mode styles for services that are otherwise not currently supported.', | ||
127 | }, | 132 | }, |
128 | headlinePrivacy: { | 133 | headlinePrivacy: { |
129 | id: 'settings.app.headlinePrivacy', | 134 | id: 'settings.app.headlinePrivacy', |
@@ -595,18 +600,29 @@ class EditSettingsForm extends Component { | |||
595 | )} | 600 | )} |
596 | 601 | ||
597 | <Hr /> | 602 | <Hr /> |
598 | 603 | <H2 className='settings__section_header'> | |
599 | <Input | 604 | {intl.formatMessage(messages.sectionAccentColorSettings)} |
600 | placeholder="Accent Color" | 605 | </H2> |
601 | onChange={e => this.submit(e)} | 606 | <div className="settings__settings-group__apply-color"> |
602 | field={form.$('accentColor')} | 607 | <ColorPickerInput |
603 | /> | 608 | onChange={e => this.submit(e)} |
609 | field={form.$('accentColor')} | ||
610 | className='color-picker-input' | ||
611 | /> | ||
612 | <> | ||
613 | <Button | ||
614 | buttonType="secondary" | ||
615 | className="settings__settings-group__apply-color__button" | ||
616 | label="Apply color" | ||
617 | onClick={(e) => { this.submit(e) }} | ||
618 | /> | ||
619 | </> | ||
620 | </div> | ||
604 | <p> | 621 | <p> |
605 | {intl.formatMessage(messages.accentColorInfo, { | 622 | {intl.formatMessage(messages.accentColorInfo, { |
606 | defaultAccentColor: DEFAULT_APP_SETTINGS.accentColor, | 623 | defaultAccentColor: DEFAULT_APP_SETTINGS.accentColor, |
607 | })} | 624 | })} |
608 | </p> | 625 | </p> |
609 | |||
610 | <Hr /> | 626 | <Hr /> |
611 | 627 | ||
612 | <H2 className='settings__section_header'> | 628 | <H2 className='settings__section_header'> |
diff --git a/src/components/ui/ColorPickerInput.tsx b/src/components/ui/ColorPickerInput.tsx new file mode 100644 index 000000000..7cbdb295b --- /dev/null +++ b/src/components/ui/ColorPickerInput.tsx | |||
@@ -0,0 +1,107 @@ | |||
1 | import { ChangeEvent, Component } from 'react'; | ||
2 | import { observer } from 'mobx-react'; | ||
3 | import { Field } from 'mobx-react-form'; | ||
4 | import classnames from 'classnames'; | ||
5 | import { SliderPicker } from 'react-color'; | ||
6 | import { DEFAULT_APP_SETTINGS } from '../../config'; | ||
7 | |||
8 | interface IProps { | ||
9 | field: Field; | ||
10 | className?: string; | ||
11 | focus?: boolean; | ||
12 | }; | ||
13 | |||
14 | interface IState { | ||
15 | background: string; | ||
16 | } | ||
17 | |||
18 | class ColorPickerInput extends Component<IProps, IState> { | ||
19 | static defaultProps = { | ||
20 | className: null, | ||
21 | focus: false, | ||
22 | }; | ||
23 | |||
24 | state = { | ||
25 | background: DEFAULT_APP_SETTINGS.accentColor, | ||
26 | }; | ||
27 | |||
28 | inputElement: HTMLInputElement | null | undefined; | ||
29 | |||
30 | componentDidMount() { | ||
31 | if (this.props.focus) { | ||
32 | this.focus(); | ||
33 | } | ||
34 | } | ||
35 | |||
36 | onChange(e: ChangeEvent<HTMLInputElement>) { | ||
37 | const { field } = this.props; | ||
38 | |||
39 | field.onChange(e); | ||
40 | } | ||
41 | |||
42 | focus() { | ||
43 | this.inputElement?.focus(); | ||
44 | } | ||
45 | |||
46 | handleChangeComplete = (color: { hex: string; }) => { | ||
47 | const { field } = this.props; | ||
48 | this.setState({ background: color.hex }); | ||
49 | field.value = color.hex | ||
50 | }; | ||
51 | |||
52 | render() { | ||
53 | const { | ||
54 | field, | ||
55 | className, | ||
56 | } = this.props; | ||
57 | |||
58 | let { type } = field; | ||
59 | type = 'text'; | ||
60 | |||
61 | return ( | ||
62 | <div | ||
63 | className={classnames({ | ||
64 | 'franz-form__field': true, | ||
65 | 'has-error': field.error, | ||
66 | [`${className}`]: className, | ||
67 | })} | ||
68 | > | ||
69 | <SliderPicker | ||
70 | color={ this.state.background } | ||
71 | onChangeComplete={ this.handleChangeComplete } | ||
72 | id={field.id} | ||
73 | type={type} | ||
74 | className="franz-form__input" | ||
75 | name={field.name} | ||
76 | value={field.value} | ||
77 | placeholder={field.placeholder} | ||
78 | onBlur={field.onBlur} | ||
79 | onFocus={field.onFocus} | ||
80 | ref={(element: HTMLInputElement | null | undefined) => { | ||
81 | this.inputElement = element; | ||
82 | }} | ||
83 | disabled={field.disabled} | ||
84 | /> | ||
85 | <div className="franz-form__input-wrapper franz-form__input-wrapper__color-picker"> | ||
86 | <input | ||
87 | id={field.id} | ||
88 | type={type} | ||
89 | className="franz-form__input" | ||
90 | name={field.name} | ||
91 | value={field.value} | ||
92 | placeholder={field.placeholder} | ||
93 | onChange={e => this.onChange(e)} | ||
94 | onBlur={field.onBlur} | ||
95 | onFocus={field.onFocus} | ||
96 | ref={element => { | ||
97 | this.inputElement = element; | ||
98 | }} | ||
99 | disabled={field.disabled} | ||
100 | /> | ||
101 | </div> | ||
102 | </div> | ||
103 | ); | ||
104 | } | ||
105 | } | ||
106 | |||
107 | export default observer(ColorPickerInput); | ||