diff options
author | 2022-07-04 15:24:58 +0100 | |
---|---|---|
committer | 2022-07-04 15:24:58 +0100 | |
commit | dc80abc1f4a626c923d0f0d8739173809000df60 (patch) | |
tree | 1ec95c0f5ebf9cefa6d9e04983690e5cf6dc84ac /src/components | |
parent | 6.0.0-nightly.88 [skip ci] (diff) | |
download | ferdium-app-dc80abc1f4a626c923d0f0d8739173809000df60.tar.gz ferdium-app-dc80abc1f4a626c923d0f0d8739173809000df60.tar.zst ferdium-app-dc80abc1f4a626c923d0f0d8739173809000df60.zip |
Fix bug of TODO settings not being shown when a TODO Recipe is present (#421)
Fix #281
Diffstat (limited to 'src/components')
-rw-r--r-- | src/components/settings/settings/EditSettingsForm.jsx (renamed from src/components/settings/settings/EditSettingsForm.js) | 191 |
1 files changed, 105 insertions, 86 deletions
diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.jsx index 56d7b8905..a2168f4fc 100644 --- a/src/components/settings/settings/EditSettingsForm.js +++ b/src/components/settings/settings/EditSettingsForm.jsx | |||
@@ -34,7 +34,9 @@ import globalMessages from '../../../i18n/globalMessages'; | |||
34 | import Icon from '../../ui/icon'; | 34 | import Icon from '../../ui/icon'; |
35 | import Slider from '../../ui/Slider'; | 35 | import Slider from '../../ui/Slider'; |
36 | 36 | ||
37 | const debug = require('../../../preload-safe-debug')('Ferdium:EditSettingsForm'); | 37 | const debug = require('../../../preload-safe-debug')( |
38 | 'Ferdium:EditSettingsForm', | ||
39 | ); | ||
38 | 40 | ||
39 | const messages = defineMessages({ | 41 | const messages = defineMessages({ |
40 | headlineGeneral: { | 42 | headlineGeneral: { |
@@ -236,8 +238,18 @@ const messages = defineMessages({ | |||
236 | }, | 238 | }, |
237 | }); | 239 | }); |
238 | 240 | ||
239 | const Hr = () => <hr className='settings__hr' style={{ marginBottom: 20, borderStyle: "dashed" }} />; | 241 | const Hr = () => ( |
240 | const HrSections = () => <hr className='settings__hr-sections' style={{ marginTop: 20, marginBottom: 40, borderStyle: "solid" }} />; | 242 | <hr |
243 | className="settings__hr" | ||
244 | style={{ marginBottom: 20, borderStyle: 'dashed' }} | ||
245 | /> | ||
246 | ); | ||
247 | const HrSections = () => ( | ||
248 | <hr | ||
249 | className="settings__hr-sections" | ||
250 | style={{ marginTop: 20, marginBottom: 40, borderStyle: 'solid' }} | ||
251 | /> | ||
252 | ); | ||
241 | 253 | ||
242 | class EditSettingsForm extends Component { | 254 | class EditSettingsForm extends Component { |
243 | static propTypes = { | 255 | static propTypes = { |
@@ -260,14 +272,17 @@ class EditSettingsForm extends Component { | |||
260 | isUseGrayscaleServicesEnabled: PropTypes.bool.isRequired, | 272 | isUseGrayscaleServicesEnabled: PropTypes.bool.isRequired, |
261 | openProcessManager: PropTypes.func.isRequired, | 273 | openProcessManager: PropTypes.func.isRequired, |
262 | isSplitModeEnabled: PropTypes.bool.isRequired, | 274 | isSplitModeEnabled: PropTypes.bool.isRequired, |
263 | hasAddedTodosAsService: PropTypes.bool.isRequired, | ||
264 | isOnline: PropTypes.bool.isRequired, | 275 | isOnline: PropTypes.bool.isRequired, |
265 | }; | 276 | }; |
266 | 277 | ||
267 | state = { | 278 | constructor(props) { |
268 | activeSetttingsTab: 'general', | 279 | super(props); |
269 | clearCacheButtonClicked: false, | 280 | |
270 | }; | 281 | this.state = { |
282 | activeSetttingsTab: 'general', | ||
283 | clearCacheButtonClicked: false, | ||
284 | }; | ||
285 | } | ||
271 | 286 | ||
272 | setActiveSettingsTab(tab) { | 287 | setActiveSettingsTab(tab) { |
273 | this.setState({ | 288 | this.setState({ |
@@ -311,7 +326,6 @@ class EditSettingsForm extends Component { | |||
311 | isSplitModeEnabled, | 326 | isSplitModeEnabled, |
312 | openProcessManager, | 327 | openProcessManager, |
313 | isTodosActivated, | 328 | isTodosActivated, |
314 | hasAddedTodosAsService, | ||
315 | isOnline, | 329 | isOnline, |
316 | } = this.props; | 330 | } = this.props; |
317 | const { intl } = this.props; | 331 | const { intl } = this.props; |
@@ -439,16 +453,19 @@ class EditSettingsForm extends Component { | |||
439 | }} | 453 | }} |
440 | > | 454 | > |
441 | {intl.formatMessage(messages.headlineUpdates)} | 455 | {intl.formatMessage(messages.headlineUpdates)} |
442 | {automaticUpdates && (updateIsReadyToInstall || isUpdateAvailable || showServicesUpdatedInfoBar) && ( | 456 | {automaticUpdates && |
443 | <span className="update-available">•</span> | 457 | (updateIsReadyToInstall || |
444 | )} | 458 | isUpdateAvailable || |
459 | showServicesUpdatedInfoBar) && ( | ||
460 | <span className="update-available">•</span> | ||
461 | )} | ||
445 | </H5> | 462 | </H5> |
446 | </div> | 463 | </div> |
447 | 464 | ||
448 | {/* General */} | 465 | {/* General */} |
449 | {this.state.activeSetttingsTab === 'general' && ( | 466 | {this.state.activeSetttingsTab === 'general' && ( |
450 | <div> | 467 | <div> |
451 | <H2 className='settings__section_header'> | 468 | <H2 className="settings__section_header"> |
452 | {intl.formatMessage(messages.sectionMain)} | 469 | {intl.formatMessage(messages.sectionMain)} |
453 | </H2> | 470 | </H2> |
454 | <Toggle field={form.$('autoLaunchOnStart')} /> | 471 | <Toggle field={form.$('autoLaunchOnStart')} /> |
@@ -469,38 +486,35 @@ class EditSettingsForm extends Component { | |||
469 | 486 | ||
470 | <Toggle field={form.$('keepAllWorkspacesLoaded')} /> | 487 | <Toggle field={form.$('keepAllWorkspacesLoaded')} /> |
471 | 488 | ||
472 | {!hasAddedTodosAsService && ( | 489 | {isTodosActivated && <Hr />} |
473 | <> | 490 | <Toggle field={form.$('enableTodos')} /> |
474 | {isTodosActivated && <Hr />} | 491 | {isTodosActivated && ( |
475 | <Toggle field={form.$('enableTodos')} /> | 492 | <div> |
476 | {isTodosActivated && ( | 493 | <Select field={form.$('predefinedTodoServer')} /> |
494 | {form.$('predefinedTodoServer').value === | ||
495 | 'isUsingCustomTodoService' && ( | ||
477 | <div> | 496 | <div> |
478 | <Select field={form.$('predefinedTodoServer')} /> | 497 | <Input |
479 | {form.$('predefinedTodoServer').value === | 498 | placeholder="Todo Server" |
480 | 'isUsingCustomTodoService' && ( | 499 | onChange={e => this.submit(e)} |
481 | <div> | 500 | field={form.$('customTodoServer')} |
482 | <Input | 501 | /> |
483 | placeholder="Todo Server" | 502 | <p |
484 | onChange={e => this.submit(e)} | 503 | className="settings__message" |
485 | field={form.$('customTodoServer')} | 504 | style={{ |
486 | /> | 505 | borderTop: 0, |
487 | <p | 506 | marginTop: 0, |
488 | className="settings__message" | 507 | paddingTop: 0, |
489 | style={{ | 508 | marginBottom: '2rem', |
490 | borderTop: 0, | 509 | }} |
491 | marginTop: 0, | 510 | > |
492 | paddingTop: 0, | 511 | {intl.formatMessage(messages.todoServerInfo)} |
493 | marginBottom: '2rem', | 512 | </p> |
494 | }} | ||
495 | > | ||
496 | {intl.formatMessage(messages.todoServerInfo)} | ||
497 | </p> | ||
498 | </div> | ||
499 | )} | ||
500 | </div> | 513 | </div> |
501 | )} | 514 | )} |
502 | </> | 515 | </div> |
503 | )} | 516 | )} |
517 | {isTodosActivated && <Hr />} | ||
504 | 518 | ||
505 | {scheduledDNDEnabled && <Hr />} | 519 | {scheduledDNDEnabled && <Hr />} |
506 | <Toggle field={form.$('scheduledDNDEnabled')} /> | 520 | <Toggle field={form.$('scheduledDNDEnabled')} /> |
@@ -561,7 +575,7 @@ class EditSettingsForm extends Component { | |||
561 | 575 | ||
562 | <HrSections /> | 576 | <HrSections /> |
563 | 577 | ||
564 | <H2 className='settings__section_header'> | 578 | <H2 className="settings__section_header"> |
565 | {intl.formatMessage(messages.sectionHibernation)} | 579 | {intl.formatMessage(messages.sectionHibernation)} |
566 | </H2> | 580 | </H2> |
567 | <Select field={form.$('hibernationStrategy')} /> | 581 | <Select field={form.$('hibernationStrategy')} /> |
@@ -587,7 +601,7 @@ class EditSettingsForm extends Component { | |||
587 | {/* Appearance */} | 601 | {/* Appearance */} |
588 | {this.state.activeSetttingsTab === 'appearance' && ( | 602 | {this.state.activeSetttingsTab === 'appearance' && ( |
589 | <div> | 603 | <div> |
590 | <H2 className='settings__section_header'> | 604 | <H2 className="settings__section_header"> |
591 | {intl.formatMessage(messages.sectionGeneralUi)} | 605 | {intl.formatMessage(messages.sectionGeneralUi)} |
592 | </H2> | 606 | </H2> |
593 | {isMac && <Toggle field={form.$('showDragArea')} />} | 607 | {isMac && <Toggle field={form.$('showDragArea')} />} |
@@ -629,7 +643,7 @@ class EditSettingsForm extends Component { | |||
629 | )} | 643 | )} |
630 | 644 | ||
631 | <HrSections /> | 645 | <HrSections /> |
632 | <H2 className='settings__section_header'> | 646 | <H2 className="settings__section_header"> |
633 | {intl.formatMessage(messages.sectionAccentColorSettings)} | 647 | {intl.formatMessage(messages.sectionAccentColorSettings)} |
634 | </H2> | 648 | </H2> |
635 | <p> | 649 | <p> |
@@ -638,38 +652,40 @@ class EditSettingsForm extends Component { | |||
638 | })} | 652 | })} |
639 | </p> | 653 | </p> |
640 | <p> | 654 | <p> |
641 | {intl.formatMessage(messages.overallTheme)} | 655 | {intl.formatMessage(messages.overallTheme)} |
642 | <div className="settings__settings-group__apply-color"> | 656 | <div className="settings__settings-group__apply-color"> |
643 | <ColorPickerInput | 657 | <ColorPickerInput |
644 | onChange={e => this.submit(e)} | 658 | onChange={e => this.submit(e)} |
645 | field={form.$('accentColor')} | 659 | field={form.$('accentColor')} |
646 | className='color-picker-input' | 660 | className="color-picker-input" |
647 | /> | 661 | /> |
648 | </div> | 662 | </div> |
649 | </p> | 663 | </p> |
650 | <p> | 664 | <p> |
651 | {intl.formatMessage(messages.progressbarTheme)} | 665 | {intl.formatMessage(messages.progressbarTheme)} |
652 | <div className="settings__settings-group__apply-color"> | 666 | <div className="settings__settings-group__apply-color"> |
653 | <ColorPickerInput | 667 | <ColorPickerInput |
654 | onChange={e => this.submit(e)} | 668 | onChange={e => this.submit(e)} |
655 | field={form.$('progressbarAccentColor')} | 669 | field={form.$('progressbarAccentColor')} |
656 | className='color-picker-input' | 670 | className="color-picker-input" |
657 | /> | 671 | /> |
658 | </div> | 672 | </div> |
659 | </p> | 673 | </p> |
660 | <p> | 674 | <p> |
661 | <div className="settings__settings-group__apply-color"> | 675 | <div className="settings__settings-group__apply-color"> |
662 | <Button | 676 | <Button |
663 | buttonType="secondary" | 677 | buttonType="secondary" |
664 | className="settings__settings-group__apply-color__button" | 678 | className="settings__settings-group__apply-color__button" |
665 | label="Apply color" | 679 | label="Apply color" |
666 | onClick={(e) => { this.submit(e) }} | 680 | onClick={e => { |
667 | /> | 681 | this.submit(e); |
668 | </div> | 682 | }} |
683 | /> | ||
684 | </div> | ||
669 | </p> | 685 | </p> |
670 | <HrSections /> | 686 | <HrSections /> |
671 | 687 | ||
672 | <H2 className='settings__section_header'> | 688 | <H2 className="settings__section_header"> |
673 | {intl.formatMessage(messages.sectionSidebarSettings)} | 689 | {intl.formatMessage(messages.sectionSidebarSettings)} |
674 | </H2> | 690 | </H2> |
675 | 691 | ||
@@ -695,7 +711,7 @@ class EditSettingsForm extends Component { | |||
695 | 711 | ||
696 | <HrSections /> | 712 | <HrSections /> |
697 | 713 | ||
698 | <H2 className='settings__section_header'> | 714 | <H2 className="settings__section_header"> |
699 | {intl.formatMessage(messages.sectionServiceIconsSettings)} | 715 | {intl.formatMessage(messages.sectionServiceIconsSettings)} |
700 | </H2> | 716 | </H2> |
701 | 717 | ||
@@ -709,9 +725,9 @@ class EditSettingsForm extends Component { | |||
709 | {isUseGrayscaleServicesEnabled && ( | 725 | {isUseGrayscaleServicesEnabled && ( |
710 | <> | 726 | <> |
711 | <Slider | 727 | <Slider |
712 | type="number" | 728 | type="number" |
713 | onChange={e => this.submit(e)} | 729 | onChange={e => this.submit(e)} |
714 | field={form.$('grayscaleServicesDim')} | 730 | field={form.$('grayscaleServicesDim')} |
715 | /> | 731 | /> |
716 | <Hr /> | 732 | <Hr /> |
717 | </> | 733 | </> |
@@ -726,7 +742,7 @@ class EditSettingsForm extends Component { | |||
726 | {/* Privacy */} | 742 | {/* Privacy */} |
727 | {this.state.activeSetttingsTab === 'privacy' && ( | 743 | {this.state.activeSetttingsTab === 'privacy' && ( |
728 | <div> | 744 | <div> |
729 | <H2 className='settings__section_header'> | 745 | <H2 className="settings__section_header"> |
730 | {intl.formatMessage(messages.sectionPrivacy)} | 746 | {intl.formatMessage(messages.sectionPrivacy)} |
731 | </H2> | 747 | </H2> |
732 | 748 | ||
@@ -793,8 +809,7 @@ class EditSettingsForm extends Component { | |||
793 | {/* Language */} | 809 | {/* Language */} |
794 | {this.state.activeSetttingsTab === 'language' && ( | 810 | {this.state.activeSetttingsTab === 'language' && ( |
795 | <div> | 811 | <div> |
796 | 812 | <H2 className="settings__section_header"> | |
797 | <H2 className='settings__section_header'> | ||
798 | {intl.formatMessage(messages.sectionLanguage)} | 813 | {intl.formatMessage(messages.sectionLanguage)} |
799 | </H2> | 814 | </H2> |
800 | 815 | ||
@@ -832,8 +847,7 @@ class EditSettingsForm extends Component { | |||
832 | {/* Advanced */} | 847 | {/* Advanced */} |
833 | {this.state.activeSetttingsTab === 'advanced' && ( | 848 | {this.state.activeSetttingsTab === 'advanced' && ( |
834 | <div> | 849 | <div> |
835 | 850 | <H2 className="settings__section_header"> | |
836 | <H2 className='settings__section_header'> | ||
837 | {intl.formatMessage(messages.sectionAdvanced)} | 851 | {intl.formatMessage(messages.sectionAdvanced)} |
838 | </H2> | 852 | </H2> |
839 | 853 | ||
@@ -925,7 +939,7 @@ class EditSettingsForm extends Component { | |||
925 | {/* Updates */} | 939 | {/* Updates */} |
926 | {this.state.activeSetttingsTab === 'updates' && ( | 940 | {this.state.activeSetttingsTab === 'updates' && ( |
927 | <div> | 941 | <div> |
928 | <H2 className='settings__section_header'> | 942 | <H2 className="settings__section_header"> |
929 | {intl.formatMessage(messages.sectionUpdates)} | 943 | {intl.formatMessage(messages.sectionUpdates)} |
930 | </H2> | 944 | </H2> |
931 | 945 | ||
@@ -937,7 +951,9 @@ class EditSettingsForm extends Component { | |||
937 | <Toggle field={form.$('beta')} /> | 951 | <Toggle field={form.$('beta')} /> |
938 | {updateIsReadyToInstall ? ( | 952 | {updateIsReadyToInstall ? ( |
939 | <Button | 953 | <Button |
940 | label={intl.formatMessage(messages.buttonInstallUpdate)} | 954 | label={intl.formatMessage( |
955 | messages.buttonInstallUpdate, | ||
956 | )} | ||
941 | onClick={installUpdate} | 957 | onClick={installUpdate} |
942 | /> | 958 | /> |
943 | ) : ( | 959 | ) : ( |
@@ -957,7 +973,8 @@ class EditSettingsForm extends Component { | |||
957 | <br /> | 973 | <br /> |
958 | </div> | 974 | </div> |
959 | <p> | 975 | <p> |
960 | {intl.formatMessage(messages.currentVersion)} {ferdiumVersion} | 976 | {intl.formatMessage(messages.currentVersion)}{' '} |
977 | {ferdiumVersion} | ||
961 | </p> | 978 | </p> |
962 | {noUpdateAvailable && ( | 979 | {noUpdateAvailable && ( |
963 | <p> | 980 | <p> |
@@ -966,7 +983,8 @@ class EditSettingsForm extends Component { | |||
966 | )} | 983 | )} |
967 | {updateFailed && ( | 984 | {updateFailed && ( |
968 | <Infobox type="danger" icon="alert"> | 985 | <Infobox type="danger" icon="alert"> |
969 | An error occurred (check the console for more details) | 986 | An error occurred (check the console for more |
987 | details) | ||
970 | </Infobox> | 988 | </Infobox> |
971 | )} | 989 | )} |
972 | </> | 990 | </> |
@@ -977,21 +995,22 @@ class EditSettingsForm extends Component { | |||
977 | {intl.formatMessage(messages.servicesUpdated)} | 995 | {intl.formatMessage(messages.servicesUpdated)} |
978 | </p> | 996 | </p> |
979 | <Button | 997 | <Button |
980 | label={intl.formatMessage(messages.buttonReloadServices)} | 998 | label={intl.formatMessage( |
999 | messages.buttonReloadServices, | ||
1000 | )} | ||
981 | onClick={() => window.location.reload()} | 1001 | onClick={() => window.location.reload()} |
982 | /> | 1002 | /> |
983 | </> | 1003 | </> |
984 | ) : ( | 1004 | ) : ( |
985 | <p> | 1005 | <p> |
986 | <Icon icon={mdiPowerPlug} /> | 1006 | <Icon icon={mdiPowerPlug} /> |
987 | Your services are up-to-date. | 1007 | Your services are up-to-date. |
988 | </p> | 1008 | </p> |
989 | )} | 1009 | )} |
990 | </> | 1010 | </> |
991 | )} | 1011 | )} |
992 | <p className="settings__message"> | 1012 | <p className="settings__message"> |
993 | <Icon icon={mdiGithub} /> | 1013 | <Icon icon={mdiGithub} /> Ferdium is based on{' '} |
994 | {' '}Ferdium is based on{' '} | ||
995 | <a | 1014 | <a |
996 | href={`${GITHUB_FRANZ_URL}/franz`} | 1015 | href={`${GITHUB_FRANZ_URL}/franz`} |
997 | target="_blank" | 1016 | target="_blank" |