diff options
author | 2022-05-06 08:56:27 +0100 | |
---|---|---|
committer | 2022-05-06 09:57:02 -0500 | |
commit | abec4c80bf4241194e2704136db4f66d064cce38 (patch) | |
tree | 3e740790185b7eb178121b74b46ecb7e77fdfb3c /src | |
parent | docs: add cedricroijakkers as a contributor for infra (#109) [skip ci] (diff) | |
download | ferdium-app-abec4c80bf4241194e2704136db4f66d064cce38.tar.gz ferdium-app-abec4c80bf4241194e2704136db4f66d064cce38.tar.zst ferdium-app-abec4c80bf4241194e2704136db4f66d064cce38.zip |
Feature: Add monochromatic Service icons option with Dim adjustment
Diffstat (limited to 'src')
-rw-r--r-- | src/components/settings/settings/EditSettingsForm.js | 12 | ||||
-rw-r--r-- | src/config.ts | 2 | ||||
-rw-r--r-- | src/containers/settings/EditSettingsScreen.js | 21 | ||||
-rw-r--r-- | src/features/appearance/index.ts | 14 | ||||
-rw-r--r-- | src/i18n/locales/en-US.json | 2 |
5 files changed, 51 insertions, 0 deletions
diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js index 2ea9272b0..600345117 100644 --- a/src/components/settings/settings/EditSettingsForm.js +++ b/src/components/settings/settings/EditSettingsForm.js | |||
@@ -210,6 +210,7 @@ class EditSettingsForm extends Component { | |||
210 | automaticUpdates: PropTypes.bool.isRequired, | 210 | automaticUpdates: PropTypes.bool.isRequired, |
211 | isDarkmodeEnabled: PropTypes.bool.isRequired, | 211 | isDarkmodeEnabled: PropTypes.bool.isRequired, |
212 | isAdaptableDarkModeEnabled: PropTypes.bool.isRequired, | 212 | isAdaptableDarkModeEnabled: PropTypes.bool.isRequired, |
213 | isUseGrayscaleServicesEnabled: PropTypes.bool.isRequired, | ||
213 | openProcessManager: PropTypes.func.isRequired, | 214 | openProcessManager: PropTypes.func.isRequired, |
214 | isSplitModeEnabled: PropTypes.bool.isRequired, | 215 | isSplitModeEnabled: PropTypes.bool.isRequired, |
215 | hasAddedTodosAsService: PropTypes.bool.isRequired, | 216 | hasAddedTodosAsService: PropTypes.bool.isRequired, |
@@ -249,6 +250,7 @@ class EditSettingsForm extends Component { | |||
249 | form, | 250 | form, |
250 | isCheckingForUpdates, | 251 | isCheckingForUpdates, |
251 | isAdaptableDarkModeEnabled, | 252 | isAdaptableDarkModeEnabled, |
253 | isUseGrayscaleServicesEnabled, | ||
252 | isUpdateAvailable, | 254 | isUpdateAvailable, |
253 | noUpdateAvailable, | 255 | noUpdateAvailable, |
254 | updateIsReadyToInstall, | 256 | updateIsReadyToInstall, |
@@ -604,6 +606,16 @@ class EditSettingsForm extends Component { | |||
604 | 606 | ||
605 | <Toggle field={form.$('showDisabledServices')} /> | 607 | <Toggle field={form.$('showDisabledServices')} /> |
606 | <Toggle field={form.$('showServiceName')} /> | 608 | <Toggle field={form.$('showServiceName')} /> |
609 | <Toggle field={form.$('useGrayscaleServices')} /> | ||
610 | |||
611 | {isUseGrayscaleServicesEnabled && ( | ||
612 | <Input | ||
613 | type="number" | ||
614 | onChange={e => this.submit(e)} | ||
615 | field={form.$('grayscaleServicesDim')} | ||
616 | /> | ||
617 | )} | ||
618 | |||
607 | <Toggle field={form.$('showMessageBadgeWhenMuted')} /> | 619 | <Toggle field={form.$('showMessageBadgeWhenMuted')} /> |
608 | <Toggle field={form.$('enableLongPressServiceHint')} /> | 620 | <Toggle field={form.$('enableLongPressServiceHint')} /> |
609 | <Select field={form.$('iconSize')} /> | 621 | <Select field={form.$('iconSize')} /> |
diff --git a/src/config.ts b/src/config.ts index 495a07026..8dff85a6f 100644 --- a/src/config.ts +++ b/src/config.ts | |||
@@ -254,6 +254,8 @@ export const DEFAULT_APP_SETTINGS = { | |||
254 | searchEngine: SEARCH_ENGINE_DDG, | 254 | searchEngine: SEARCH_ENGINE_DDG, |
255 | useVerticalStyle: false, | 255 | useVerticalStyle: false, |
256 | hideRecipesButton: false, | 256 | hideRecipesButton: false, |
257 | useGrayscaleServices: false, | ||
258 | grayscaleServicesDim: 50, | ||
257 | hideWorkspacesButton: false, | 259 | hideWorkspacesButton: false, |
258 | hideNotificationsButton: false, | 260 | hideNotificationsButton: false, |
259 | hideSettingsButton: false, | 261 | hideSettingsButton: false, |
diff --git a/src/containers/settings/EditSettingsScreen.js b/src/containers/settings/EditSettingsScreen.js index 4c5e6d921..cf3d7b32f 100644 --- a/src/containers/settings/EditSettingsScreen.js +++ b/src/containers/settings/EditSettingsScreen.js | |||
@@ -210,6 +210,14 @@ const messages = defineMessages({ | |||
210 | id: 'settings.app.form.hideRecipesButton', | 210 | id: 'settings.app.form.hideRecipesButton', |
211 | defaultMessage: 'Hide Recipes button', | 211 | defaultMessage: 'Hide Recipes button', |
212 | }, | 212 | }, |
213 | useGrayscaleServices: { | ||
214 | id: 'settings.app.form.useGrayscaleServices', | ||
215 | defaultMessage: 'Use grayscale services', | ||
216 | }, | ||
217 | grayscaleServicesDim: { | ||
218 | id: 'settings.app.form.grayscaleServicesDim', | ||
219 | defaultMessage: 'Input grayscale dim level (%)', | ||
220 | }, | ||
213 | hideWorkspacesButton: { | 221 | hideWorkspacesButton: { |
214 | id: 'settings.app.form.hideWorkspacesButton', | 222 | id: 'settings.app.form.hideWorkspacesButton', |
215 | defaultMessage: 'Hide Workspace Drawer button', | 223 | defaultMessage: 'Hide Workspace Drawer button', |
@@ -356,6 +364,8 @@ class EditSettingsScreen extends Component { | |||
356 | ), | 364 | ), |
357 | useVerticalStyle: Boolean(settingsData.useVerticalStyle), | 365 | useVerticalStyle: Boolean(settingsData.useVerticalStyle), |
358 | hideRecipesButton: Boolean(settingsData.hideRecipesButton), | 366 | hideRecipesButton: Boolean(settingsData.hideRecipesButton), |
367 | useGrayscaleServices: Boolean(settingsData.useGrayscaleServices), | ||
368 | grayscaleServicesDim: Number(settingsData.grayscaleServicesDim), | ||
359 | hideWorkspacesButton: Boolean(settingsData.hideWorkspacesButton), | 369 | hideWorkspacesButton: Boolean(settingsData.hideWorkspacesButton), |
360 | hideNotificationsButton: Boolean(settingsData.hideNotificationsButton), | 370 | hideNotificationsButton: Boolean(settingsData.hideNotificationsButton), |
361 | hideSettingsButton: Boolean(settingsData.hideSettingsButton), | 371 | hideSettingsButton: Boolean(settingsData.hideSettingsButton), |
@@ -721,6 +731,16 @@ class EditSettingsScreen extends Component { | |||
721 | value: settings.all.app.hideRecipesButton, | 731 | value: settings.all.app.hideRecipesButton, |
722 | default: DEFAULT_APP_SETTINGS.hideRecipesButton, | 732 | default: DEFAULT_APP_SETTINGS.hideRecipesButton, |
723 | }, | 733 | }, |
734 | useGrayscaleServices: { | ||
735 | label: intl.formatMessage(messages.useGrayscaleServices), | ||
736 | value: settings.all.app.useGrayscaleServices, | ||
737 | default: DEFAULT_APP_SETTINGS.useGrayscaleServices, | ||
738 | }, | ||
739 | grayscaleServicesDim: { | ||
740 | label: intl.formatMessage(messages.grayscaleServicesDim), | ||
741 | value: settings.all.app.grayscaleServicesDim, | ||
742 | default: DEFAULT_APP_SETTINGS.grayscaleServicesDim, | ||
743 | }, | ||
724 | hideWorkspacesButton: { | 744 | hideWorkspacesButton: { |
725 | label: intl.formatMessage(messages.hideWorkspacesButton), | 745 | label: intl.formatMessage(messages.hideWorkspacesButton), |
726 | value: settings.all.app.hideWorkspacesButton, | 746 | value: settings.all.app.hideWorkspacesButton, |
@@ -828,6 +848,7 @@ class EditSettingsScreen extends Component { | |||
828 | isAdaptableDarkModeEnabled={ | 848 | isAdaptableDarkModeEnabled={ |
829 | this.props.stores.settings.app.adaptableDarkMode | 849 | this.props.stores.settings.app.adaptableDarkMode |
830 | } | 850 | } |
851 | isUseGrayscaleServicesEnabled={this.props.stores.settings.app.useGrayscaleServices} | ||
831 | isSplitModeEnabled={this.props.stores.settings.app.splitMode} | 852 | isSplitModeEnabled={this.props.stores.settings.app.splitMode} |
832 | isTodosActivated={this.props.stores.todos.isFeatureEnabledByUser} | 853 | isTodosActivated={this.props.stores.todos.isFeatureEnabledByUser} |
833 | isUsingCustomTodoService={ | 854 | isUsingCustomTodoService={ |
diff --git a/src/features/appearance/index.ts b/src/features/appearance/index.ts index 04b4b059d..aa569af73 100644 --- a/src/features/appearance/index.ts +++ b/src/features/appearance/index.ts | |||
@@ -132,6 +132,8 @@ function generateServiceRibbonWidthStyle( | |||
132 | vertical, | 132 | vertical, |
133 | isLabelEnabled, | 133 | isLabelEnabled, |
134 | sidebarServicesLocation, | 134 | sidebarServicesLocation, |
135 | useGrayscaleServices, | ||
136 | grayscaleServicesDim, | ||
135 | ) { | 137 | ) { |
136 | const width = Number(widthStr); | 138 | const width = Number(widthStr); |
137 | const iconSize = Number(iconSizeStr) - iconSizeBias; | 139 | const iconSize = Number(iconSizeStr) - iconSizeBias; |
@@ -205,6 +207,10 @@ function generateServiceRibbonWidthStyle( | |||
205 | break; | 207 | break; |
206 | } | 208 | } |
207 | 209 | ||
210 | const graysacleServices = | ||
211 | `filter: grayscale(1); | ||
212 | opacity: ${grayscaleServicesDim}%;` | ||
213 | |||
208 | return vertical | 214 | return vertical |
209 | ? ` | 215 | ? ` |
210 | .sidebar { | 216 | .sidebar { |
@@ -222,6 +228,7 @@ function generateServiceRibbonWidthStyle( | |||
222 | } | 228 | } |
223 | .tab-item .tab-item__icon { | 229 | .tab-item .tab-item__icon { |
224 | width: ${minimumAdjustedIconSize}px !important; | 230 | width: ${minimumAdjustedIconSize}px !important; |
231 | ${useGrayscaleServices ? graysacleServices : null}, | ||
225 | } | 232 | } |
226 | .sidebar__button { | 233 | .sidebar__button { |
227 | font-size: ${width / 3}px !important; | 234 | font-size: ${width / 3}px !important; |
@@ -258,6 +265,7 @@ function generateServiceRibbonWidthStyle( | |||
258 | } | 265 | } |
259 | .tab-item .tab-item__icon { | 266 | .tab-item .tab-item__icon { |
260 | width: ${minimumAdjustedIconSize}px !important; | 267 | width: ${minimumAdjustedIconSize}px !important; |
268 | ${useGrayscaleServices ? graysacleServices : null}, | ||
261 | } | 269 | } |
262 | .sidebar__button { | 270 | .sidebar__button { |
263 | font-size: ${width / 3}px !important; | 271 | font-size: ${width / 3}px !important; |
@@ -342,6 +350,8 @@ function generateStyle(settings) { | |||
342 | accentColor, | 350 | accentColor, |
343 | serviceRibbonWidth, | 351 | serviceRibbonWidth, |
344 | sidebarServicesLocation, | 352 | sidebarServicesLocation, |
353 | useGrayscaleServices, | ||
354 | grayscaleServicesDim, | ||
345 | iconSize, | 355 | iconSize, |
346 | showDragArea, | 356 | showDragArea, |
347 | useVerticalStyle, | 357 | useVerticalStyle, |
@@ -361,6 +371,8 @@ function generateStyle(settings) { | |||
361 | useVerticalStyle, | 371 | useVerticalStyle, |
362 | showServiceName, | 372 | showServiceName, |
363 | sidebarServicesLocation, | 373 | sidebarServicesLocation, |
374 | useGrayscaleServices, | ||
375 | grayscaleServicesDim, | ||
364 | ); | 376 | ); |
365 | 377 | ||
366 | if (showDragArea) { | 378 | if (showDragArea) { |
@@ -397,6 +409,8 @@ export default function initAppearance(stores) { | |||
397 | settings.all.app.iconSize, | 409 | settings.all.app.iconSize, |
398 | settings.all.app.showDragArea, | 410 | settings.all.app.showDragArea, |
399 | settings.all.app.sidebarServicesLocation, | 411 | settings.all.app.sidebarServicesLocation, |
412 | settings.all.app.useGrayscaleServices, | ||
413 | settings.all.app.grayscaleServicesDim, | ||
400 | settings.all.app.useVerticalStyle, | 414 | settings.all.app.useVerticalStyle, |
401 | settings.all.app.alwaysShowWorkspaces, | 415 | settings.all.app.alwaysShowWorkspaces, |
402 | settings.all.app.showServiceName, | 416 | settings.all.app.showServiceName, |
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json index 22061fc9c..68268b70a 100644 --- a/src/i18n/locales/en-US.json +++ b/src/i18n/locales/en-US.json | |||
@@ -216,6 +216,8 @@ | |||
216 | "settings.app.form.hibernationStrategy": "Hibernation strategy", | 216 | "settings.app.form.hibernationStrategy": "Hibernation strategy", |
217 | "settings.app.form.hideNotificationsButton": "Hide Notifications & Sound button", | 217 | "settings.app.form.hideNotificationsButton": "Hide Notifications & Sound button", |
218 | "settings.app.form.hideRecipesButton": "Hide Recipes button", | 218 | "settings.app.form.hideRecipesButton": "Hide Recipes button", |
219 | "settings.app.form.useGrayscaleServices": "Use grayscale services", | ||
220 | "settings.app.form.grayscaleServicesDim": "Input grayscale dim level (%)", | ||
219 | "settings.app.form.hideSettingsButton": "Hide Settings button", | 221 | "settings.app.form.hideSettingsButton": "Hide Settings button", |
220 | "settings.app.form.hideWorkspacesButton": "Hide Workspace Drawer button", | 222 | "settings.app.form.hideWorkspacesButton": "Hide Workspace Drawer button", |
221 | "settings.app.form.iconSize": "Service icon size", | 223 | "settings.app.form.iconSize": "Service icon size", |