diff options
author | 2022-06-21 15:43:32 +0100 | |
---|---|---|
committer | 2022-06-21 20:56:34 +0530 | |
commit | 28298d7b488f31f76b76bc7b51b799e436d493d7 (patch) | |
tree | 80b9e5437d94c0ea3b153162615be8be0280dadb /src | |
parent | Fix reload after resume and add idle time setting (#324) (diff) | |
download | ferdium-app-28298d7b488f31f76b76bc7b51b799e436d493d7.tar.gz ferdium-app-28298d7b488f31f76b76bc7b51b799e436d493d7.tar.zst ferdium-app-28298d7b488f31f76b76bc7b51b799e436d493d7.zip |
Change styling on settings
Diffstat (limited to 'src')
-rw-r--r-- | src/components/settings/settings/EditSettingsForm.js | 69 | ||||
-rw-r--r-- | src/i18n/locales/en-US.json | 4 | ||||
-rw-r--r-- | src/styles/settings.scss | 19 |
3 files changed, 79 insertions, 13 deletions
diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js index 309be1315..3d46fd376 100644 --- a/src/components/settings/settings/EditSettingsForm.js +++ b/src/components/settings/settings/EditSettingsForm.js | |||
@@ -107,6 +107,22 @@ const messages = defineMessages({ | |||
107 | id: 'settings.app.sectionSidebarSettings', | 107 | id: 'settings.app.sectionSidebarSettings', |
108 | defaultMessage: 'Sidebar Settings', | 108 | defaultMessage: 'Sidebar Settings', |
109 | }, | 109 | }, |
110 | sectionPrivacy: { | ||
111 | id: 'settings.app.sectionPrivacy', | ||
112 | defaultMessage: 'Privacy Settings', | ||
113 | }, | ||
114 | sectionLanguage: { | ||
115 | id: 'settings.app.sectionLanguage', | ||
116 | defaultMessage: 'Language Settings', | ||
117 | }, | ||
118 | sectionAdvanced: { | ||
119 | id: 'settings.app.sectionAdvanced', | ||
120 | defaultMessage: 'Advanced Settings', | ||
121 | }, | ||
122 | sectionUpdates: { | ||
123 | id: 'settings.app.sectionUpdates', | ||
124 | defaultMessage: 'App Updates Settings', | ||
125 | }, | ||
110 | sectionServiceIconsSettings: { | 126 | sectionServiceIconsSettings: { |
111 | id: 'settings.app.sectionServiceIconsSettings', | 127 | id: 'settings.app.sectionServiceIconsSettings', |
112 | defaultMessage: 'Service Icons Settings', | 128 | defaultMessage: 'Service Icons Settings', |
@@ -220,7 +236,8 @@ const messages = defineMessages({ | |||
220 | }, | 236 | }, |
221 | }); | 237 | }); |
222 | 238 | ||
223 | const Hr = () => <hr style={{ marginBottom: 20 }} />; | 239 | const Hr = () => <hr className='settings__hr' style={{ marginBottom: 20, borderStyle: "dashed" }} />; |
240 | const HrSections = () => <hr className='settings__hr-sections' style={{ marginTop: 20, marginBottom: 40, borderStyle: "solid" }} />; | ||
224 | 241 | ||
225 | class EditSettingsForm extends Component { | 242 | class EditSettingsForm extends Component { |
226 | static propTypes = { | 243 | static propTypes = { |
@@ -438,10 +455,12 @@ class EditSettingsForm extends Component { | |||
438 | <Toggle field={form.$('runInBackground')} /> | 455 | <Toggle field={form.$('runInBackground')} /> |
439 | <Toggle field={form.$('confirmOnQuit')} /> | 456 | <Toggle field={form.$('confirmOnQuit')} /> |
440 | <Toggle field={form.$('enableSystemTray')} /> | 457 | <Toggle field={form.$('enableSystemTray')} /> |
458 | {reloadAfterResume && <Hr />} | ||
441 | <Toggle field={form.$('reloadAfterResume')} /> | 459 | <Toggle field={form.$('reloadAfterResume')} /> |
442 | {reloadAfterResume && ( | 460 | {reloadAfterResume && ( |
443 | <div> | 461 | <div> |
444 | <Input field={form.$('reloadAfterResumeTime')} /> | 462 | <Input field={form.$('reloadAfterResumeTime')} /> |
463 | <Hr /> | ||
445 | </div> | 464 | </div> |
446 | )} | 465 | )} |
447 | <Toggle field={form.$('startMinimized')} /> | 466 | <Toggle field={form.$('startMinimized')} /> |
@@ -452,6 +471,7 @@ class EditSettingsForm extends Component { | |||
452 | 471 | ||
453 | {!hasAddedTodosAsService && ( | 472 | {!hasAddedTodosAsService && ( |
454 | <> | 473 | <> |
474 | {isTodosActivated && <Hr />} | ||
455 | <Toggle field={form.$('enableTodos')} /> | 475 | <Toggle field={form.$('enableTodos')} /> |
456 | {isTodosActivated && ( | 476 | {isTodosActivated && ( |
457 | <div> | 477 | <div> |
@@ -479,10 +499,10 @@ class EditSettingsForm extends Component { | |||
479 | )} | 499 | )} |
480 | </div> | 500 | </div> |
481 | )} | 501 | )} |
482 | <Hr /> | ||
483 | </> | 502 | </> |
484 | )} | 503 | )} |
485 | 504 | ||
505 | {scheduledDNDEnabled && <Hr />} | ||
486 | <Toggle field={form.$('scheduledDNDEnabled')} /> | 506 | <Toggle field={form.$('scheduledDNDEnabled')} /> |
487 | 507 | ||
488 | {scheduledDNDEnabled && ( | 508 | {scheduledDNDEnabled && ( |
@@ -539,7 +559,7 @@ class EditSettingsForm extends Component { | |||
539 | 559 | ||
540 | <Select field={form.$('navigationBarBehaviour')} /> | 560 | <Select field={form.$('navigationBarBehaviour')} /> |
541 | 561 | ||
542 | <Hr /> | 562 | <HrSections /> |
543 | 563 | ||
544 | <H2 className='settings__section_header'> | 564 | <H2 className='settings__section_header'> |
545 | {intl.formatMessage(messages.sectionHibernation)} | 565 | {intl.formatMessage(messages.sectionHibernation)} |
@@ -595,6 +615,7 @@ class EditSettingsForm extends Component { | |||
595 | </> | 615 | </> |
596 | )} | 616 | )} |
597 | 617 | ||
618 | {isSplitModeEnabled && <Hr />} | ||
598 | <Toggle field={form.$('splitMode')} /> | 619 | <Toggle field={form.$('splitMode')} /> |
599 | {isSplitModeEnabled && ( | 620 | {isSplitModeEnabled && ( |
600 | <Input | 621 | <Input |
@@ -607,7 +628,7 @@ class EditSettingsForm extends Component { | |||
607 | /> | 628 | /> |
608 | )} | 629 | )} |
609 | 630 | ||
610 | <Hr /> | 631 | <HrSections /> |
611 | <H2 className='settings__section_header'> | 632 | <H2 className='settings__section_header'> |
612 | {intl.formatMessage(messages.sectionAccentColorSettings)} | 633 | {intl.formatMessage(messages.sectionAccentColorSettings)} |
613 | </H2> | 634 | </H2> |
@@ -646,7 +667,7 @@ class EditSettingsForm extends Component { | |||
646 | /> | 667 | /> |
647 | </div> | 668 | </div> |
648 | </p> | 669 | </p> |
649 | <Hr /> | 670 | <HrSections /> |
650 | 671 | ||
651 | <H2 className='settings__section_header'> | 672 | <H2 className='settings__section_header'> |
652 | {intl.formatMessage(messages.sectionSidebarSettings)} | 673 | {intl.formatMessage(messages.sectionSidebarSettings)} |
@@ -668,7 +689,7 @@ class EditSettingsForm extends Component { | |||
668 | 689 | ||
669 | <Toggle field={form.$('alwaysShowWorkspaces')} /> | 690 | <Toggle field={form.$('alwaysShowWorkspaces')} /> |
670 | 691 | ||
671 | <Hr /> | 692 | <HrSections /> |
672 | 693 | ||
673 | <H2 className='settings__section_header'> | 694 | <H2 className='settings__section_header'> |
674 | {intl.formatMessage(messages.sectionServiceIconsSettings)} | 695 | {intl.formatMessage(messages.sectionServiceIconsSettings)} |
@@ -676,14 +697,20 @@ class EditSettingsForm extends Component { | |||
676 | 697 | ||
677 | <Toggle field={form.$('showDisabledServices')} /> | 698 | <Toggle field={form.$('showDisabledServices')} /> |
678 | <Toggle field={form.$('showServiceName')} /> | 699 | <Toggle field={form.$('showServiceName')} /> |
700 | |||
701 | {isUseGrayscaleServicesEnabled && <Hr />} | ||
702 | |||
679 | <Toggle field={form.$('useGrayscaleServices')} /> | 703 | <Toggle field={form.$('useGrayscaleServices')} /> |
680 | 704 | ||
681 | {isUseGrayscaleServicesEnabled && ( | 705 | {isUseGrayscaleServicesEnabled && ( |
682 | <Slider | 706 | <> |
683 | type="number" | 707 | <Slider |
684 | onChange={e => this.submit(e)} | 708 | type="number" |
685 | field={form.$('grayscaleServicesDim')} | 709 | onChange={e => this.submit(e)} |
686 | /> | 710 | field={form.$('grayscaleServicesDim')} |
711 | /> | ||
712 | <Hr /> | ||
713 | </> | ||
687 | )} | 714 | )} |
688 | 715 | ||
689 | <Toggle field={form.$('showMessageBadgeWhenMuted')} /> | 716 | <Toggle field={form.$('showMessageBadgeWhenMuted')} /> |
@@ -695,6 +722,10 @@ class EditSettingsForm extends Component { | |||
695 | {/* Privacy */} | 722 | {/* Privacy */} |
696 | {this.state.activeSetttingsTab === 'privacy' && ( | 723 | {this.state.activeSetttingsTab === 'privacy' && ( |
697 | <div> | 724 | <div> |
725 | <H2 className='settings__section_header'> | ||
726 | {intl.formatMessage(messages.sectionPrivacy)} | ||
727 | </H2> | ||
728 | |||
698 | <Toggle field={form.$('privateNotifications')} /> | 729 | <Toggle field={form.$('privateNotifications')} /> |
699 | <Toggle field={form.$('clipboardNotifications')} /> | 730 | <Toggle field={form.$('clipboardNotifications')} /> |
700 | {(isWindows || isMac) && ( | 731 | {(isWindows || isMac) && ( |
@@ -705,8 +736,6 @@ class EditSettingsForm extends Component { | |||
705 | 736 | ||
706 | <Select field={form.$('searchEngine')} /> | 737 | <Select field={form.$('searchEngine')} /> |
707 | 738 | ||
708 | <Hr /> | ||
709 | |||
710 | <p className="settings__help"> | 739 | <p className="settings__help"> |
711 | {intl.formatMessage(messages.appRestartRequired)} | 740 | {intl.formatMessage(messages.appRestartRequired)} |
712 | </p> | 741 | </p> |
@@ -760,6 +789,11 @@ class EditSettingsForm extends Component { | |||
760 | {/* Language */} | 789 | {/* Language */} |
761 | {this.state.activeSetttingsTab === 'language' && ( | 790 | {this.state.activeSetttingsTab === 'language' && ( |
762 | <div> | 791 | <div> |
792 | |||
793 | <H2 className='settings__section_header'> | ||
794 | {intl.formatMessage(messages.sectionLanguage)} | ||
795 | </H2> | ||
796 | |||
763 | <Select field={form.$('locale')} showLabel={false} /> | 797 | <Select field={form.$('locale')} showLabel={false} /> |
764 | 798 | ||
765 | <Hr /> | 799 | <Hr /> |
@@ -794,6 +828,11 @@ class EditSettingsForm extends Component { | |||
794 | {/* Advanced */} | 828 | {/* Advanced */} |
795 | {this.state.activeSetttingsTab === 'advanced' && ( | 829 | {this.state.activeSetttingsTab === 'advanced' && ( |
796 | <div> | 830 | <div> |
831 | |||
832 | <H2 className='settings__section_header'> | ||
833 | {intl.formatMessage(messages.sectionAdvanced)} | ||
834 | </H2> | ||
835 | |||
797 | <Toggle field={form.$('enableGPUAcceleration')} /> | 836 | <Toggle field={form.$('enableGPUAcceleration')} /> |
798 | <Toggle field={form.$('enableGlobalHideShortcut')} /> | 837 | <Toggle field={form.$('enableGlobalHideShortcut')} /> |
799 | <p className="settings__help indented__help"> | 838 | <p className="settings__help indented__help"> |
@@ -883,6 +922,10 @@ class EditSettingsForm extends Component { | |||
883 | {/* Updates */} | 922 | {/* Updates */} |
884 | {this.state.activeSetttingsTab === 'updates' && ( | 923 | {this.state.activeSetttingsTab === 'updates' && ( |
885 | <div> | 924 | <div> |
925 | <H2 className='settings__section_header'> | ||
926 | {intl.formatMessage(messages.sectionUpdates)} | ||
927 | </H2> | ||
928 | |||
886 | <Toggle field={form.$('automaticUpdates')} /> | 929 | <Toggle field={form.$('automaticUpdates')} /> |
887 | {automaticUpdates && ( | 930 | {automaticUpdates && ( |
888 | <> | 931 | <> |
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json index be6d68f3a..a08cf7bea 100644 --- a/src/i18n/locales/en-US.json +++ b/src/i18n/locales/en-US.json | |||
@@ -277,6 +277,10 @@ | |||
277 | "settings.app.sectionMain": "Main", | 277 | "settings.app.sectionMain": "Main", |
278 | "settings.app.sectionServiceIconsSettings": "Service Icons Settings", | 278 | "settings.app.sectionServiceIconsSettings": "Service Icons Settings", |
279 | "settings.app.sectionSidebarSettings": "Sidebar Settings", | 279 | "settings.app.sectionSidebarSettings": "Sidebar Settings", |
280 | "settings.app.sectionPrivacy": "Privacy Settings", | ||
281 | "settings.app.sectionLanguage": "Language Settings", | ||
282 | "settings.app.sectionAdvanced": "Advanced Settings", | ||
283 | "settings.app.sectionUpdates": "App Updates Settings", | ||
280 | "settings.app.spellCheckerLanguageInfo": "Ferdium uses your Mac's build-in spellchecker to check for typos. If you want to change the languages the spellchecker checks for, you can do so in your Mac's System Preferences.", | 284 | "settings.app.spellCheckerLanguageInfo": "Ferdium uses your Mac's build-in spellchecker to check for typos. If you want to change the languages the spellchecker checks for, you can do so in your Mac's System Preferences.", |
281 | "settings.app.subheadlineCache": "Cache", | 285 | "settings.app.subheadlineCache": "Cache", |
282 | "settings.app.subheadlineFerdiumProfile": "Ferdium Profile", | 286 | "settings.app.subheadlineFerdiumProfile": "Ferdium Profile", |
diff --git a/src/styles/settings.scss b/src/styles/settings.scss index 236bda860..e0b7d39dd 100644 --- a/src/styles/settings.scss +++ b/src/styles/settings.scss | |||
@@ -23,6 +23,15 @@ | |||
23 | } | 23 | } |
24 | 24 | ||
25 | .theme__dark { | 25 | .theme__dark { |
26 | |||
27 | .settings__hr { | ||
28 | color: rgba($dark-theme-gray, 0.8); | ||
29 | } | ||
30 | |||
31 | .settings__hr-sections { | ||
32 | color: rgba($dark-theme-text-color, 0.5); | ||
33 | } | ||
34 | |||
26 | .settings-wrapper { | 35 | .settings-wrapper { |
27 | background: rgba($dark-theme-black, 0.8); | 36 | background: rgba($dark-theme-black, 0.8); |
28 | } | 37 | } |
@@ -36,6 +45,7 @@ | |||
36 | 45 | ||
37 | .settings__section_header { | 46 | .settings__section_header { |
38 | text-align: center; | 47 | text-align: center; |
48 | margin-bottom: 40px; | ||
39 | } | 49 | } |
40 | 50 | ||
41 | .settings__main { | 51 | .settings__main { |
@@ -176,9 +186,18 @@ | |||
176 | overflow: hidden; | 186 | overflow: hidden; |
177 | background: #fff; | 187 | background: #fff; |
178 | } | 188 | } |
189 | |||
190 | .settings__hr { | ||
191 | color: rgba($theme-gray, 0.2); | ||
192 | } | ||
179 | 193 | ||
194 | .settings__hr-sections { | ||
195 | color: rgba($theme-gray, 0.4); | ||
196 | } | ||
197 | |||
180 | .settings__section_header { | 198 | .settings__section_header { |
181 | text-align: center; | 199 | text-align: center; |
200 | margin-bottom: 40px; | ||
182 | } | 201 | } |
183 | 202 | ||
184 | .settings__settings-group__apply-color { | 203 | .settings__settings-group__apply-color { |