From 3405e22bf2bcddef2de0d59453c978fd1ea03836 Mon Sep 17 00:00:00 2001 From: Vijay A Date: Wed, 11 Aug 2021 22:32:58 +0530 Subject: feat: allow the user to enable/disable dark mode (from the sidebar context menu) --- src/actions/service.js | 3 ++ src/components/layout/Sidebar.js | 1 + src/components/services/tabs/TabBarSortableList.js | 3 ++ src/components/services/tabs/TabItem.js | 16 +++++++ src/components/services/tabs/Tabbar.js | 3 ++ src/containers/layout/AppLayoutContainer.js | 2 + src/i18n/locales/defaultMessages.json | 50 ++++++++++++++++------ src/i18n/locales/en-US.json | 2 + .../src/components/services/tabs/TabItem.json | 50 ++++++++++++++++------ .../app/Controllers/Http/ServiceController.js | 6 +-- src/stores/ServicesStore.js | 13 ++++++ 11 files changed, 122 insertions(+), 27 deletions(-) (limited to 'src') diff --git a/src/actions/service.js b/src/actions/service.js index 578fdeca8..e56513f8f 100644 --- a/src/actions/service.js +++ b/src/actions/service.js @@ -91,6 +91,9 @@ export default { toggleAudio: { serviceId: PropTypes.string.isRequired, }, + toggleDarkMode: { + serviceId: PropTypes.string.isRequired, + }, openDevTools: { serviceId: PropTypes.string.isRequired, }, diff --git a/src/components/layout/Sidebar.js b/src/components/layout/Sidebar.js index a3dbc3539..daa5642c3 100644 --- a/src/components/layout/Sidebar.js +++ b/src/components/layout/Sidebar.js @@ -61,6 +61,7 @@ export default @inject('stores', 'actions') @observer class Sidebar extends Comp reload: PropTypes.func.isRequired, toggleNotifications: PropTypes.func.isRequired, toggleAudio: PropTypes.func.isRequired, + toggleDarkMode: PropTypes.func.isRequired, showMessageBadgeWhenMutedSetting: PropTypes.bool.isRequired, showMessageBadgesEvenWhenMuted: PropTypes.bool.isRequired, deleteService: PropTypes.func.isRequired, diff --git a/src/components/services/tabs/TabBarSortableList.js b/src/components/services/tabs/TabBarSortableList.js index 117d799d7..1a389991d 100644 --- a/src/components/services/tabs/TabBarSortableList.js +++ b/src/components/services/tabs/TabBarSortableList.js @@ -14,6 +14,7 @@ class TabBarSortableList extends Component { reload: PropTypes.func.isRequired, toggleNotifications: PropTypes.func.isRequired, toggleAudio: PropTypes.func.isRequired, + toggleDarkMode: PropTypes.func.isRequired, deleteService: PropTypes.func.isRequired, disableService: PropTypes.func.isRequired, enableService: PropTypes.func.isRequired, @@ -30,6 +31,7 @@ class TabBarSortableList extends Component { reload, toggleNotifications, toggleAudio, + toggleDarkMode, deleteService, disableService, enableService, @@ -54,6 +56,7 @@ class TabBarSortableList extends Component { reload={() => reload({ serviceId: service.id })} toggleNotifications={() => toggleNotifications({ serviceId: service.id })} toggleAudio={() => toggleAudio({ serviceId: service.id })} + toggleDarkMode={() => toggleDarkMode({ serviceId: service.id })} deleteService={() => deleteService({ serviceId: service.id })} disableService={() => disableService({ serviceId: service.id })} enableService={() => enableService({ serviceId: service.id })} diff --git a/src/components/services/tabs/TabItem.js b/src/components/services/tabs/TabItem.js index d4a4048eb..3c27cca73 100644 --- a/src/components/services/tabs/TabItem.js +++ b/src/components/services/tabs/TabItem.js @@ -41,6 +41,14 @@ const messages = defineMessages({ id: 'tabs.item.enableAudio', defaultMessage: '!!!Enable audio', }, + enableDarkMode: { + id: 'tabs.item.enableDarkMode', + defaultMessage: '!!!Enable Dark mode', + }, + disableDarkMode: { + id: 'tabs.item.disableDarkMode', + defaultMessage: '!!!Disable Dark mode', + }, disableService: { id: 'tabs.item.disableService', defaultMessage: '!!!Disable Service', @@ -118,6 +126,7 @@ class TabItem extends Component { reload: PropTypes.func.isRequired, toggleNotifications: PropTypes.func.isRequired, toggleAudio: PropTypes.func.isRequired, + toggleDarkMode: PropTypes.func.isRequired, openSettings: PropTypes.func.isRequired, deleteService: PropTypes.func.isRequired, disableService: PropTypes.func.isRequired, @@ -169,6 +178,7 @@ class TabItem extends Component { reload, toggleNotifications, toggleAudio, + toggleDarkMode, deleteService, disableService, enableService, @@ -215,6 +225,12 @@ class TabItem extends Component { : intl.formatMessage(messages.disableAudio), click: () => toggleAudio(), }, + { + label: service.isDarkModeEnabled + ? intl.formatMessage(messages.enableDarkMode) + : intl.formatMessage(messages.disableDarkMode), + click: () => toggleDarkMode(), + }, { label: intl.formatMessage( service.isEnabled ? messages.disableService : messages.enableService, diff --git a/src/components/services/tabs/Tabbar.js b/src/components/services/tabs/Tabbar.js index 0f608c415..ab1e46c9f 100644 --- a/src/components/services/tabs/Tabbar.js +++ b/src/components/services/tabs/Tabbar.js @@ -15,6 +15,7 @@ export default @observer class TabBar extends Component { reload: PropTypes.func.isRequired, toggleNotifications: PropTypes.func.isRequired, toggleAudio: PropTypes.func.isRequired, + toggleDarkMode: PropTypes.func.isRequired, deleteService: PropTypes.func.isRequired, updateService: PropTypes.func.isRequired, hibernateService: PropTypes.func.isRequired, @@ -78,6 +79,7 @@ export default @observer class TabBar extends Component { reload, toggleNotifications, toggleAudio, + toggleDarkMode, deleteService, showMessageBadgeWhenMutedSetting, showMessageBadgesEvenWhenMuted, @@ -94,6 +96,7 @@ export default @observer class TabBar extends Component { reload={reload} toggleNotifications={toggleNotifications} toggleAudio={toggleAudio} + toggleDarkMode={toggleDarkMode} deleteService={deleteService} disableService={(args) => this.disableService(args)} enableService={(args) => this.enableService(args)} diff --git a/src/containers/layout/AppLayoutContainer.js b/src/containers/layout/AppLayoutContainer.js index fff628946..32b1f1cf7 100644 --- a/src/containers/layout/AppLayoutContainer.js +++ b/src/containers/layout/AppLayoutContainer.js @@ -54,6 +54,7 @@ export default @inject('stores', 'actions') @observer class AppLayoutContainer e reload, toggleNotifications, toggleAudio, + toggleDarkMode, deleteService, updateService, hibernate, @@ -109,6 +110,7 @@ export default @inject('stores', 'actions') @observer class AppLayoutContainer e reload={reload} toggleNotifications={toggleNotifications} toggleAudio={toggleAudio} + toggleDarkMode={toggleDarkMode} deleteService={deleteService} updateService={updateService} hibernateService={hibernate} diff --git a/src/i18n/locales/defaultMessages.json b/src/i18n/locales/defaultMessages.json index 4279ba079..683ec4628 100644 --- a/src/i18n/locales/defaultMessages.json +++ b/src/i18n/locales/defaultMessages.json @@ -1771,81 +1771,107 @@ } }, { - "defaultMessage": "!!!Disable Service", + "defaultMessage": "!!!Enable Dark mode", "end": { "column": 3, "line": 47 }, "file": "src/components/services/tabs/TabItem.js", - "id": "tabs.item.disableService", + "id": "tabs.item.enableDarkMode", "start": { "column": 18, "line": 44 } }, { - "defaultMessage": "!!!Enable Service", + "defaultMessage": "!!!Disable Dark mode", "end": { "column": 3, "line": 51 }, "file": "src/components/services/tabs/TabItem.js", + "id": "tabs.item.disableDarkMode", + "start": { + "column": 19, + "line": 48 + } + }, + { + "defaultMessage": "!!!Disable Service", + "end": { + "column": 3, + "line": 55 + }, + "file": "src/components/services/tabs/TabItem.js", + "id": "tabs.item.disableService", + "start": { + "column": 18, + "line": 52 + } + }, + { + "defaultMessage": "!!!Enable Service", + "end": { + "column": 3, + "line": 59 + }, + "file": "src/components/services/tabs/TabItem.js", "id": "tabs.item.enableService", "start": { "column": 17, - "line": 48 + "line": 56 } }, { "defaultMessage": "!!!Hibernate Service", "end": { "column": 3, - "line": 55 + "line": 63 }, "file": "src/components/services/tabs/TabItem.js", "id": "tabs.item.hibernateService", "start": { "column": 20, - "line": 52 + "line": 60 } }, { "defaultMessage": "!!!Wake Up Service", "end": { "column": 3, - "line": 59 + "line": 67 }, "file": "src/components/services/tabs/TabItem.js", "id": "tabs.item.wakeUpService", "start": { "column": 17, - "line": 56 + "line": 64 } }, { "defaultMessage": "!!!Delete Service", "end": { "column": 3, - "line": 63 + "line": 71 }, "file": "src/components/services/tabs/TabItem.js", "id": "tabs.item.deleteService", "start": { "column": 17, - "line": 60 + "line": 68 } }, { "defaultMessage": "!!!Do you really want to delete the {serviceName} service?", "end": { "column": 3, - "line": 68 + "line": 76 }, "file": "src/components/services/tabs/TabItem.js", "id": "tabs.item.confirmDeleteService", "start": { "column": 24, - "line": 64 + "line": 72 } } ], diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json index 1705d20e8..002ea5655 100644 --- a/src/i18n/locales/en-US.json +++ b/src/i18n/locales/en-US.json @@ -434,10 +434,12 @@ "tabs.item.confirmDeleteService": "Do you really want to delete the {serviceName} service?", "tabs.item.deleteService": "Delete service", "tabs.item.disableAudio": "Disable audio", + "tabs.item.disableDarkMode": "Disable Dark mode", "tabs.item.disableNotifications": "Disable notifications", "tabs.item.disableService": "Disable service", "tabs.item.edit": "Edit", "tabs.item.enableAudio": "Enable audio", + "tabs.item.enableDarkMode": "Enable Dark mode", "tabs.item.enableNotification": "Enable notifications", "tabs.item.enableService": "Enable service", "tabs.item.hibernateService": "Hibernate service", diff --git a/src/i18n/messages/src/components/services/tabs/TabItem.json b/src/i18n/messages/src/components/services/tabs/TabItem.json index 60cfde52d..92ff6fb14 100644 --- a/src/i18n/messages/src/components/services/tabs/TabItem.json +++ b/src/i18n/messages/src/components/services/tabs/TabItem.json @@ -78,8 +78,8 @@ } }, { - "id": "tabs.item.disableService", - "defaultMessage": "!!!Disable Service", + "id": "tabs.item.enableDarkMode", + "defaultMessage": "!!!Enable Dark mode", "file": "src/components/services/tabs/TabItem.js", "start": { "line": 44, @@ -90,16 +90,42 @@ "column": 3 } }, + { + "id": "tabs.item.disableDarkMode", + "defaultMessage": "!!!Disable Dark mode", + "file": "src/components/services/tabs/TabItem.js", + "start": { + "line": 48, + "column": 19 + }, + "end": { + "line": 51, + "column": 3 + } + }, + { + "id": "tabs.item.disableService", + "defaultMessage": "!!!Disable Service", + "file": "src/components/services/tabs/TabItem.js", + "start": { + "line": 52, + "column": 18 + }, + "end": { + "line": 55, + "column": 3 + } + }, { "id": "tabs.item.enableService", "defaultMessage": "!!!Enable Service", "file": "src/components/services/tabs/TabItem.js", "start": { - "line": 48, + "line": 56, "column": 17 }, "end": { - "line": 51, + "line": 59, "column": 3 } }, @@ -108,11 +134,11 @@ "defaultMessage": "!!!Hibernate Service", "file": "src/components/services/tabs/TabItem.js", "start": { - "line": 52, + "line": 60, "column": 20 }, "end": { - "line": 55, + "line": 63, "column": 3 } }, @@ -121,11 +147,11 @@ "defaultMessage": "!!!Wake Up Service", "file": "src/components/services/tabs/TabItem.js", "start": { - "line": 56, + "line": 64, "column": 17 }, "end": { - "line": 59, + "line": 67, "column": 3 } }, @@ -134,11 +160,11 @@ "defaultMessage": "!!!Delete Service", "file": "src/components/services/tabs/TabItem.js", "start": { - "line": 60, + "line": 68, "column": 17 }, "end": { - "line": 63, + "line": 71, "column": 3 } }, @@ -147,11 +173,11 @@ "defaultMessage": "!!!Do you really want to delete the {serviceName} service?", "file": "src/components/services/tabs/TabItem.js", "start": { - "line": 64, + "line": 72, "column": 24 }, "end": { - "line": 68, + "line": 76, "column": 3 } } diff --git a/src/internal-server/app/Controllers/Http/ServiceController.js b/src/internal-server/app/Controllers/Http/ServiceController.js index e4a7f0295..d98ba146e 100644 --- a/src/internal-server/app/Controllers/Http/ServiceController.js +++ b/src/internal-server/app/Controllers/Http/ServiceController.js @@ -52,7 +52,7 @@ class ServiceController { isNotificationEnabled: true, isBadgeEnabled: true, isMuted: false, - isDarkModeEnabled: '', + isDarkModeEnabled: false, spellcheckerLanguage: '', order: 1, customRecipe: false, @@ -79,7 +79,7 @@ class ServiceController { customRecipe: false, hasCustomIcon: false, isBadgeEnabled: true, - isDarkModeEnabled: '', + isDarkModeEnabled: false, isEnabled: true, isMuted: false, isNotificationEnabled: true, @@ -253,7 +253,7 @@ class ServiceController { customRecipe: false, hasCustomIcon: false, isBadgeEnabled: true, - isDarkModeEnabled: '', + isDarkModeEnabled: false, isEnabled: true, isMuted: false, isNotificationEnabled: true, diff --git a/src/stores/ServicesStore.js b/src/stores/ServicesStore.js index 499495d08..4ccb995ae 100644 --- a/src/stores/ServicesStore.js +++ b/src/stores/ServicesStore.js @@ -97,6 +97,7 @@ export default class ServicesStore extends Store { this._toggleNotifications.bind(this), ); this.actions.service.toggleAudio.listen(this._toggleAudio.bind(this)); + this.actions.service.toggleDarkMode.listen(this._toggleDarkMode.bind(this)); this.actions.service.openDevTools.listen(this._openDevTools.bind(this)); this.actions.service.openDevToolsForActiveService.listen( this._openDevToolsForActiveService.bind(this), @@ -916,6 +917,18 @@ export default class ServicesStore extends Store { }); } + @action _toggleDarkMode({ serviceId }) { + const service = this.one(serviceId); + + this.actions.service.updateService({ + serviceId, + serviceData: { + isDarkModeEnabled: !service.isDarkModeEnabled, + }, + redirect: false, + }); + } + @action _openDevTools({ serviceId }) { const service = this.one(serviceId); if (service.isTodosService) { -- cgit v1.2.3-54-g00ecf