diff options
author | André Oliveira <37463445+SpecialAro@users.noreply.github.com> | 2022-07-14 02:12:46 +0100 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-07-14 01:12:46 +0000 |
commit | b9e12652ad763ab82a1c0a877670cc0c6114a19f (patch) | |
tree | 251dadf8fe109789c7fcd12e20a1054bcfd61dab /src | |
parent | Update submodules, browserslist data updates and linter fixes [skip ci] (diff) | |
download | ferdium-app-b9e12652ad763ab82a1c0a877670cc0c6114a19f.tar.gz ferdium-app-b9e12652ad763ab82a1c0a877670cc0c6114a19f.tar.zst ferdium-app-b9e12652ad763ab82a1c0a877670cc0c6114a19f.zip |
fix: horizontal sidebar style on macOS (#482)
Diffstat (limited to 'src')
-rw-r--r-- | src/components/layout/Sidebar.jsx | 16 | ||||
-rw-r--r-- | src/components/services/tabs/Tabbar.js | 6 | ||||
-rw-r--r-- | src/components/settings/settings/EditSettingsForm.jsx | 2 | ||||
-rw-r--r-- | src/config.ts | 2 | ||||
-rw-r--r-- | src/containers/settings/EditSettingsScreen.tsx | 14 | ||||
-rw-r--r-- | src/features/appearance/index.ts | 43 | ||||
-rw-r--r-- | src/i18n/locales/en-US.json | 2 |
7 files changed, 48 insertions, 37 deletions
diff --git a/src/components/layout/Sidebar.jsx b/src/components/layout/Sidebar.jsx index dd81f4ab5..fef5baf64 100644 --- a/src/components/layout/Sidebar.jsx +++ b/src/components/layout/Sidebar.jsx | |||
@@ -151,7 +151,7 @@ class Sidebar extends Component { | |||
151 | hideNotificationsButton, | 151 | hideNotificationsButton, |
152 | hideSettingsButton, | 152 | hideSettingsButton, |
153 | hideSplitModeButton, | 153 | hideSplitModeButton, |
154 | useVerticalStyle, | 154 | useHorizontalStyle, |
155 | splitMode, | 155 | splitMode, |
156 | } = stores.settings.app; | 156 | } = stores.settings.app; |
157 | const { intl } = this.props; | 157 | const { intl } = this.props; |
@@ -180,7 +180,7 @@ class Sidebar extends Component { | |||
180 | {...this.props} | 180 | {...this.props} |
181 | enableToolTip={() => this.enableToolTip()} | 181 | enableToolTip={() => this.enableToolTip()} |
182 | disableToolTip={() => this.disableToolTip()} | 182 | disableToolTip={() => this.disableToolTip()} |
183 | useVerticalStyle={stores.settings.all.app.useVerticalStyle} | 183 | useHorizontalStyle={stores.settings.all.app.useHorizontalStyle} |
184 | /> | 184 | /> |
185 | <> | 185 | <> |
186 | {numberActiveButtons <= 1 || hideCollapseButton ? null : ( | 186 | {numberActiveButtons <= 1 || hideCollapseButton ? null : ( |
@@ -189,16 +189,14 @@ class Sidebar extends Component { | |||
189 | onClick={() => toggleCollapseMenu()} | 189 | onClick={() => toggleCollapseMenu()} |
190 | className="sidebar__button sidebar__button--hamburger-menu" | 190 | className="sidebar__button sidebar__button--hamburger-menu" |
191 | > | 191 | > |
192 | {isMenuCollapsed && !useVerticalStyle ? ( | 192 | {isMenuCollapsed ? <Icon icon={mdiMenu} size={1.5} /> : null} |
193 | <Icon icon={mdiMenu} size={1.5} /> | ||
194 | ) : null} | ||
195 | 193 | ||
196 | {isMenuCollapsed && useVerticalStyle ? ( | 194 | {!isMenuCollapsed && !useHorizontalStyle ? ( |
197 | <Icon icon={mdiChevronRight} size={1.5} /> | 195 | <Icon icon={mdiChevronDown} size={1.5} /> |
198 | ) : null} | 196 | ) : null} |
199 | 197 | ||
200 | {!isMenuCollapsed ? ( | 198 | {!isMenuCollapsed && useHorizontalStyle ? ( |
201 | <Icon icon={mdiChevronDown} size={1.5} /> | 199 | <Icon icon={mdiChevronRight} size={1.5} /> |
202 | ) : null} | 200 | ) : null} |
203 | </button> | 201 | </button> |
204 | )} | 202 | )} |
diff --git a/src/components/services/tabs/Tabbar.js b/src/components/services/tabs/Tabbar.js index d9e11df41..f0cb48e5e 100644 --- a/src/components/services/tabs/Tabbar.js +++ b/src/components/services/tabs/Tabbar.js | |||
@@ -20,7 +20,7 @@ class TabBar extends Component { | |||
20 | updateService: PropTypes.func.isRequired, | 20 | updateService: PropTypes.func.isRequired, |
21 | hibernateService: PropTypes.func.isRequired, | 21 | hibernateService: PropTypes.func.isRequired, |
22 | wakeUpService: PropTypes.func.isRequired, | 22 | wakeUpService: PropTypes.func.isRequired, |
23 | useVerticalStyle: PropTypes.bool.isRequired, | 23 | useHorizontalStyle: PropTypes.bool.isRequired, |
24 | showMessageBadgeWhenMutedSetting: PropTypes.bool.isRequired, | 24 | showMessageBadgeWhenMutedSetting: PropTypes.bool.isRequired, |
25 | showServiceNameSetting: PropTypes.bool.isRequired, | 25 | showServiceNameSetting: PropTypes.bool.isRequired, |
26 | showMessageBadgesEvenWhenMuted: PropTypes.bool.isRequired, | 26 | showMessageBadgesEvenWhenMuted: PropTypes.bool.isRequired, |
@@ -80,13 +80,13 @@ class TabBar extends Component { | |||
80 | toggleAudio, | 80 | toggleAudio, |
81 | toggleDarkMode, | 81 | toggleDarkMode, |
82 | deleteService, | 82 | deleteService, |
83 | useVerticalStyle, | 83 | useHorizontalStyle, |
84 | showMessageBadgeWhenMutedSetting, | 84 | showMessageBadgeWhenMutedSetting, |
85 | showServiceNameSetting, | 85 | showServiceNameSetting, |
86 | showMessageBadgesEvenWhenMuted, | 86 | showMessageBadgesEvenWhenMuted, |
87 | } = this.props; | 87 | } = this.props; |
88 | 88 | ||
89 | const axis = useVerticalStyle ? 'x' : 'y'; | 89 | const axis = useHorizontalStyle ? 'x' : 'y'; |
90 | 90 | ||
91 | return ( | 91 | return ( |
92 | <div> | 92 | <div> |
diff --git a/src/components/settings/settings/EditSettingsForm.jsx b/src/components/settings/settings/EditSettingsForm.jsx index 32a44aa37..cb1d261f8 100644 --- a/src/components/settings/settings/EditSettingsForm.jsx +++ b/src/components/settings/settings/EditSettingsForm.jsx | |||
@@ -712,7 +712,7 @@ class EditSettingsForm extends Component { | |||
712 | 712 | ||
713 | <Select field={form.$('sidebarServicesLocation')} /> | 713 | <Select field={form.$('sidebarServicesLocation')} /> |
714 | 714 | ||
715 | <Toggle field={form.$('useVerticalStyle')} /> | 715 | <Toggle field={form.$('useHorizontalStyle')} /> |
716 | 716 | ||
717 | <Toggle field={form.$('hideCollapseButton')} /> | 717 | <Toggle field={form.$('hideCollapseButton')} /> |
718 | 718 | ||
diff --git a/src/config.ts b/src/config.ts index 7c0807a37..f872f31aa 100644 --- a/src/config.ts +++ b/src/config.ts | |||
@@ -261,7 +261,7 @@ export const DEFAULT_APP_SETTINGS = { | |||
261 | iconSize: iconSizeBias, | 261 | iconSize: iconSizeBias, |
262 | navigationBarBehaviour: 'custom', | 262 | navigationBarBehaviour: 'custom', |
263 | searchEngine: SEARCH_ENGINE_STARTPAGE, | 263 | searchEngine: SEARCH_ENGINE_STARTPAGE, |
264 | useVerticalStyle: false, | 264 | useHorizontalStyle: false, |
265 | hideCollapseButton: false, | 265 | hideCollapseButton: false, |
266 | isMenuCollapsed: false, | 266 | isMenuCollapsed: false, |
267 | hideRecipesButton: false, | 267 | hideRecipesButton: false, |
diff --git a/src/containers/settings/EditSettingsScreen.tsx b/src/containers/settings/EditSettingsScreen.tsx index 0ab3b63cf..a6c4561dd 100644 --- a/src/containers/settings/EditSettingsScreen.tsx +++ b/src/containers/settings/EditSettingsScreen.tsx | |||
@@ -199,8 +199,8 @@ const messages = defineMessages({ | |||
199 | id: 'settings.app.form.enableLongPressServiceHint', | 199 | id: 'settings.app.form.enableLongPressServiceHint', |
200 | defaultMessage: 'Enable service shortcut hint on long press', | 200 | defaultMessage: 'Enable service shortcut hint on long press', |
201 | }, | 201 | }, |
202 | useVerticalStyle: { | 202 | useHorizontalStyle: { |
203 | id: 'settings.app.form.useVerticalStyle', | 203 | id: 'settings.app.form.useHorizontalStyle', |
204 | defaultMessage: 'Use horizontal style', | 204 | defaultMessage: 'Use horizontal style', |
205 | }, | 205 | }, |
206 | hideCollapseButton: { | 206 | hideCollapseButton: { |
@@ -377,7 +377,7 @@ class EditSettingsScreen extends Component<EditSettingsScreenProps> { | |||
377 | enableLongPressServiceHint: Boolean( | 377 | enableLongPressServiceHint: Boolean( |
378 | settingsData.enableLongPressServiceHint, | 378 | settingsData.enableLongPressServiceHint, |
379 | ), | 379 | ), |
380 | useVerticalStyle: Boolean(settingsData.useVerticalStyle), | 380 | useHorizontalStyle: Boolean(settingsData.useHorizontalStyle), |
381 | hideCollapseButton: Boolean(settingsData.hideCollapseButton), | 381 | hideCollapseButton: Boolean(settingsData.hideCollapseButton), |
382 | hideRecipesButton: Boolean(settingsData.hideRecipesButton), | 382 | hideRecipesButton: Boolean(settingsData.hideRecipesButton), |
383 | hideSplitModeButton: Boolean(settingsData.hideSplitModeButton), | 383 | hideSplitModeButton: Boolean(settingsData.hideSplitModeButton), |
@@ -739,10 +739,10 @@ class EditSettingsScreen extends Component<EditSettingsScreenProps> { | |||
739 | value: settings.all.app.enableLongPressServiceHint, | 739 | value: settings.all.app.enableLongPressServiceHint, |
740 | default: DEFAULT_APP_SETTINGS.enableLongPressServiceHint, | 740 | default: DEFAULT_APP_SETTINGS.enableLongPressServiceHint, |
741 | }, | 741 | }, |
742 | useVerticalStyle: { | 742 | useHorizontalStyle: { |
743 | label: intl.formatMessage(messages.useVerticalStyle), | 743 | label: intl.formatMessage(messages.useHorizontalStyle), |
744 | value: settings.all.app.useVerticalStyle, | 744 | value: settings.all.app.useHorizontalStyle, |
745 | default: DEFAULT_APP_SETTINGS.useVerticalStyle, | 745 | default: DEFAULT_APP_SETTINGS.useHorizontalStyle, |
746 | }, | 746 | }, |
747 | hideCollapseButton: { | 747 | hideCollapseButton: { |
748 | label: intl.formatMessage(messages.hideCollapseButton), | 748 | label: intl.formatMessage(messages.hideCollapseButton), |
diff --git a/src/features/appearance/index.ts b/src/features/appearance/index.ts index 17ae5937e..8b7416126 100644 --- a/src/features/appearance/index.ts +++ b/src/features/appearance/index.ts | |||
@@ -129,11 +129,12 @@ function generateAccentStyle(accentColorStr) { | |||
129 | function generateServiceRibbonWidthStyle( | 129 | function generateServiceRibbonWidthStyle( |
130 | widthStr, | 130 | widthStr, |
131 | iconSizeStr, | 131 | iconSizeStr, |
132 | vertical, | 132 | horizontal, |
133 | isLabelEnabled, | 133 | isLabelEnabled, |
134 | sidebarServicesLocation, | 134 | sidebarServicesLocation, |
135 | useGrayscaleServices, | 135 | useGrayscaleServices, |
136 | grayscaleServicesDim, | 136 | grayscaleServicesDim, |
137 | showDragArea, | ||
137 | ) { | 138 | ) { |
138 | const width = Number(widthStr); | 139 | const width = Number(widthStr); |
139 | const iconSize = Number(iconSizeStr) - iconSizeBias; | 140 | const iconSize = Number(iconSizeStr) - iconSizeBias; |
@@ -141,6 +142,7 @@ function generateServiceRibbonWidthStyle( | |||
141 | let tabItemHeightBias = -5; | 142 | let tabItemHeightBias = -5; |
142 | let sidebarSizeBias = 22; | 143 | let sidebarSizeBias = 22; |
143 | const tabItemWidthBias = 3; | 144 | const tabItemWidthBias = 3; |
145 | const verticalStyleOffset = 29; | ||
144 | 146 | ||
145 | switch (width) { | 147 | switch (width) { |
146 | case 35: | 148 | case 35: |
@@ -194,24 +196,24 @@ function generateServiceRibbonWidthStyle( | |||
194 | let sidebarServicesAlignment; | 196 | let sidebarServicesAlignment; |
195 | switch (sidebarServicesLocation) { | 197 | switch (sidebarServicesLocation) { |
196 | case SIDEBAR_SERVICES_LOCATION_TOPLEFT: | 198 | case SIDEBAR_SERVICES_LOCATION_TOPLEFT: |
197 | sidebarServicesAlignment = vertical ? "left" : "start"; | 199 | sidebarServicesAlignment = horizontal ? 'left' : 'start'; |
198 | break; | 200 | break; |
199 | case SIDEBAR_SERVICES_LOCATION_CENTER: | 201 | case SIDEBAR_SERVICES_LOCATION_CENTER: |
200 | sidebarServicesAlignment = vertical ? "center" : "center"; | 202 | sidebarServicesAlignment = horizontal ? 'center' : 'center'; |
201 | break; | 203 | break; |
202 | case SIDEBAR_SERVICES_LOCATION_BOTTOMRIGHT: | 204 | case SIDEBAR_SERVICES_LOCATION_BOTTOMRIGHT: |
203 | sidebarServicesAlignment = vertical ? "right" : "end"; | 205 | sidebarServicesAlignment = horizontal ? 'right' : 'end'; |
204 | break; | 206 | break; |
205 | default: | 207 | default: |
206 | sidebarServicesAlignment = vertical ? "left" : "start"; | 208 | sidebarServicesAlignment = horizontal ? 'left' : 'start'; |
207 | break; | 209 | break; |
208 | } | 210 | } |
209 | 211 | ||
210 | const graysacleServices = | 212 | const graysacleServices = `filter: grayscale(1); |
211 | `filter: grayscale(1); | 213 | opacity: ${grayscaleServicesDim}%;`; |
212 | opacity: ${grayscaleServicesDim}%;` | ||
213 | 214 | ||
214 | return vertical | 215 | const sizeDragArea = showDragArea ? verticalStyleOffset : 0; |
216 | return horizontal | ||
215 | ? ` | 217 | ? ` |
216 | .sidebar { | 218 | .sidebar { |
217 | height: ${width}px !important; | 219 | height: ${width}px !important; |
@@ -247,7 +249,17 @@ function generateServiceRibbonWidthStyle( | |||
247 | margin-top: -${width}px !important; | 249 | margin-top: -${width}px !important; |
248 | } | 250 | } |
249 | .darwin .sidebar { | 251 | .darwin .sidebar { |
250 | height: ${width + sidebarSizeBias}px !important; | 252 | height: ${width + verticalStyleOffset - 3 - sizeDragArea}px !important; |
253 | } | ||
254 | .darwin .app .app__content { | ||
255 | padding-top: ${ | ||
256 | width + sidebarSizeBias + (sizeDragArea !== 0 ? 4 - sizeDragArea : 4) | ||
257 | }px !important; | ||
258 | } | ||
259 | .darwin .workspaces-drawer { | ||
260 | margin-top: -${ | ||
261 | width + verticalStyleOffset - 5 - sizeDragArea | ||
262 | }px !important; | ||
251 | } | 263 | } |
252 | .darwin .sidebar .sidebar__button--workspaces.is-active { | 264 | .darwin .sidebar .sidebar__button--workspaces.is-active { |
253 | height: ${width - sidebarSizeBias}px !important; | 265 | height: ${width - sidebarSizeBias}px !important; |
@@ -358,7 +370,7 @@ function generateStyle(settings) { | |||
358 | grayscaleServicesDim, | 370 | grayscaleServicesDim, |
359 | iconSize, | 371 | iconSize, |
360 | showDragArea, | 372 | showDragArea, |
361 | useVerticalStyle, | 373 | useHorizontalStyle, |
362 | alwaysShowWorkspaces, | 374 | alwaysShowWorkspaces, |
363 | showServiceName, | 375 | showServiceName, |
364 | } = settings; | 376 | } = settings; |
@@ -372,17 +384,18 @@ function generateStyle(settings) { | |||
372 | style += generateServiceRibbonWidthStyle( | 384 | style += generateServiceRibbonWidthStyle( |
373 | serviceRibbonWidth, | 385 | serviceRibbonWidth, |
374 | iconSize, | 386 | iconSize, |
375 | useVerticalStyle, | 387 | useHorizontalStyle, |
376 | showServiceName, | 388 | showServiceName, |
377 | sidebarServicesLocation, | 389 | sidebarServicesLocation, |
378 | useGrayscaleServices, | 390 | useGrayscaleServices, |
379 | grayscaleServicesDim, | 391 | grayscaleServicesDim, |
392 | showDragArea, | ||
380 | ); | 393 | ); |
381 | 394 | ||
382 | if (showDragArea) { | 395 | if (showDragArea) { |
383 | style += generateShowDragAreaStyle(accentColor); | 396 | style += generateShowDragAreaStyle(accentColor); |
384 | } | 397 | } |
385 | if (useVerticalStyle) { | 398 | if (useHorizontalStyle) { |
386 | style += generateVerticalStyle(serviceRibbonWidth, alwaysShowWorkspaces); | 399 | style += generateVerticalStyle(serviceRibbonWidth, alwaysShowWorkspaces); |
387 | } else if (document.querySelector('#vertical-style')) { | 400 | } else if (document.querySelector('#vertical-style')) { |
388 | const link = document.querySelector('#vertical-style'); | 401 | const link = document.querySelector('#vertical-style'); |
@@ -403,7 +416,7 @@ function updateProgressbar(settings) { | |||
403 | barColors: { | 416 | barColors: { |
404 | '0': settings.progressbarAccentColor, | 417 | '0': settings.progressbarAccentColor, |
405 | }, | 418 | }, |
406 | shadowBlur: 5 | 419 | shadowBlur: 5, |
407 | }); | 420 | }); |
408 | } | 421 | } |
409 | 422 | ||
@@ -429,7 +442,7 @@ export default function initAppearance(stores) { | |||
429 | settings.all.app.sidebarServicesLocation, | 442 | settings.all.app.sidebarServicesLocation, |
430 | settings.all.app.useGrayscaleServices, | 443 | settings.all.app.useGrayscaleServices, |
431 | settings.all.app.grayscaleServicesDim, | 444 | settings.all.app.grayscaleServicesDim, |
432 | settings.all.app.useVerticalStyle, | 445 | settings.all.app.useHorizontalStyle, |
433 | settings.all.app.alwaysShowWorkspaces, | 446 | settings.all.app.alwaysShowWorkspaces, |
434 | settings.all.app.showServiceName, | 447 | settings.all.app.showServiceName, |
435 | ], | 448 | ], |
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json index 249bf6373..8c9eba56b 100644 --- a/src/i18n/locales/en-US.json +++ b/src/i18n/locales/en-US.json | |||
@@ -256,8 +256,8 @@ | |||
256 | "settings.app.form.startMinimized": "Start minimized", | 256 | "settings.app.form.startMinimized": "Start minimized", |
257 | "settings.app.form.universalDarkMode": "Enable universal Dark Mode", | 257 | "settings.app.form.universalDarkMode": "Enable universal Dark Mode", |
258 | "settings.app.form.useGrayscaleServices": "Use grayscale services", | 258 | "settings.app.form.useGrayscaleServices": "Use grayscale services", |
259 | "settings.app.form.useHorizontalStyle": "Use horizontal style", | ||
259 | "settings.app.form.useTouchIdToUnlock": "Allow using TouchID to unlock Ferdium", | 260 | "settings.app.form.useTouchIdToUnlock": "Allow using TouchID to unlock Ferdium", |
260 | "settings.app.form.useVerticalStyle": "Use horizontal style", | ||
261 | "settings.app.form.wakeUpHibernationSplay": "Splay hibernate/wake cycles to reduce load", | 261 | "settings.app.form.wakeUpHibernationSplay": "Splay hibernate/wake cycles to reduce load", |
262 | "settings.app.form.wakeUpHibernationStrategy": "Hibernation strategy after automatic wake up", | 262 | "settings.app.form.wakeUpHibernationStrategy": "Hibernation strategy after automatic wake up", |
263 | "settings.app.form.wakeUpStrategy": "Wake up strategy", | 263 | "settings.app.form.wakeUpStrategy": "Wake up strategy", |