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 | |
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')
-rw-r--r-- | src/components/settings/settings/EditSettingsForm.js | 40 | ||||
-rw-r--r-- | src/components/ui/ColorPickerInput.tsx | 107 | ||||
-rw-r--r-- | src/i18n/locales/en-US.json | 3 | ||||
-rw-r--r-- | src/styles/settings.scss | 20 |
4 files changed, 157 insertions, 13 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); | ||
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json index f787b90e4..3c5eef258 100644 --- a/src/i18n/locales/en-US.json +++ b/src/i18n/locales/en-US.json | |||
@@ -182,7 +182,7 @@ | |||
182 | "settings.account.tryReloadUserInfoRequest": "Try again", | 182 | "settings.account.tryReloadUserInfoRequest": "Try again", |
183 | "settings.account.userInfoRequestFailed": "Could not load user information", | 183 | "settings.account.userInfoRequestFailed": "Could not load user information", |
184 | "settings.account.yourLicense": "Your Ferdium License:", | 184 | "settings.account.yourLicense": "Your Ferdium License:", |
185 | "settings.app.accentColorInfo": "Write your accent color in a CSS-compatible format. (Default: {defaultAccentColor})", | 185 | "settings.app.accentColorInfo": "Write your accent color in a CSS-compatible format. (Default: {defaultAccentColor} or clear the input field)", |
186 | "settings.app.buttonClearAllCache": "Clear cache", | 186 | "settings.app.buttonClearAllCache": "Clear cache", |
187 | "settings.app.buttonInstallUpdate": "Restart & install update", | 187 | "settings.app.buttonInstallUpdate": "Restart & install update", |
188 | "settings.app.buttonOpenFerdiumProfileFolder": "Open Profile folder", | 188 | "settings.app.buttonOpenFerdiumProfileFolder": "Open Profile folder", |
@@ -267,6 +267,7 @@ | |||
267 | "settings.app.restartRequired": "Changes require restart", | 267 | "settings.app.restartRequired": "Changes require restart", |
268 | "settings.app.scheduledDNDInfo": "Scheduled Do-not-Disturb allows you to define a period of time in which you do not want to get Notifications from Ferdium.", | 268 | "settings.app.scheduledDNDInfo": "Scheduled Do-not-Disturb allows you to define a period of time in which you do not want to get Notifications from Ferdium.", |
269 | "settings.app.scheduledDNDTimeInfo": "Times in 24-Hour-Format. End time can be before start time (e.g. start 17:00, end 09:00) to enable Do-not-Disturb overnight.", | 269 | "settings.app.scheduledDNDTimeInfo": "Times in 24-Hour-Format. End time can be before start time (e.g. start 17:00, end 09:00) to enable Do-not-Disturb overnight.", |
270 | "settings.app.sectionAccentColorSettings": "Accent Color Settings", | ||
270 | "settings.app.sectionGeneralUi": "General UI", | 271 | "settings.app.sectionGeneralUi": "General UI", |
271 | "settings.app.sectionHibernation": "Hibernation", | 272 | "settings.app.sectionHibernation": "Hibernation", |
272 | "settings.app.sectionMain": "Main", | 273 | "settings.app.sectionMain": "Main", |
diff --git a/src/styles/settings.scss b/src/styles/settings.scss index 2bb9074ba..e2cf46478 100644 --- a/src/styles/settings.scss +++ b/src/styles/settings.scss | |||
@@ -176,6 +176,26 @@ | |||
176 | overflow: hidden; | 176 | overflow: hidden; |
177 | background: #fff; | 177 | background: #fff; |
178 | } | 178 | } |
179 | |||
180 | .settings__section_header { | ||
181 | text-align: center; | ||
182 | } | ||
183 | |||
184 | .settings__settings-group__apply-color { | ||
185 | display: flex; | ||
186 | } | ||
187 | |||
188 | .settings__settings-group__apply-color__button { | ||
189 | height: 60px; | ||
190 | } | ||
191 | |||
192 | .franz-form__input-wrapper__color-picker { | ||
193 | width: 20% !important; | ||
194 | margin-top: 2%; | ||
195 | } | ||
196 | .color-picker-input { | ||
197 | align-items: center; | ||
198 | } | ||
179 | 199 | ||
180 | .settings__header { | 200 | .settings__header { |
181 | align-items: center; | 201 | align-items: center; |