From ee0edd82fe3a1e03ca4960ea4c324949f99a915d Mon Sep 17 00:00:00 2001 From: Denys Madureira Date: Fri, 25 Oct 2024 16:51:16 +0100 Subject: [PATCH 01/14] feat: add rounded border to service view --- src/styles/layout.scss | 4 +++- src/styles/services.scss | 6 ++++++ 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/src/styles/layout.scss b/src/styles/layout.scss index 591f7c54b3..6335e0171e 100644 --- a/src/styles/layout.scss +++ b/src/styles/layout.scss @@ -17,7 +17,7 @@ html { } .theme__dark .app { - background: #272727; + background: #353535; .sidebar { background: $dark-theme-gray-darker; @@ -102,6 +102,7 @@ body.win32:not(.isFullScreen) .app .app__content { .app { background: #fff; + .app__content { display: flex; width: calc(100% + 300px); @@ -116,6 +117,7 @@ body.win32:not(.isFullScreen) .app .app__content { display: flex; flex: 1; flex-direction: column; + padding: 4px; } } diff --git a/src/styles/services.scss b/src/styles/services.scss index 7ce6f8c876..37a01e2c34 100644 --- a/src/styles/services.scss +++ b/src/styles/services.scss @@ -51,6 +51,12 @@ .services__webview-wrapper { background: $theme-gray-lighter; + border-radius: 4px; + + webview { + border-radius: 4px; + overflow: hidden; + } } .services__webview, From 5054dcafc57a16b86a3a769801e9bafbc4c4adf4 Mon Sep 17 00:00:00 2001 From: Denys Madureira Date: Sat, 26 Oct 2024 12:57:27 +0100 Subject: [PATCH 02/14] feat: add padding to webview-wrapper --- src/styles/layout.scss | 3 +-- src/styles/services.scss | 1 + 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/styles/layout.scss b/src/styles/layout.scss index 6335e0171e..fe42fd1f59 100644 --- a/src/styles/layout.scss +++ b/src/styles/layout.scss @@ -17,7 +17,7 @@ html { } .theme__dark .app { - background: #353535; + background: #272727; .sidebar { background: $dark-theme-gray-darker; @@ -117,7 +117,6 @@ body.win32:not(.isFullScreen) .app .app__content { display: flex; flex: 1; flex-direction: column; - padding: 4px; } } diff --git a/src/styles/services.scss b/src/styles/services.scss index 37a01e2c34..8960d2cd64 100644 --- a/src/styles/services.scss +++ b/src/styles/services.scss @@ -52,6 +52,7 @@ .services__webview-wrapper { background: $theme-gray-lighter; border-radius: 4px; + padding: 4px; webview { border-radius: 4px; From 644e7137fb43dc31074dbbbf92c98e97ef655a2b Mon Sep 17 00:00:00 2001 From: Denys Madureira Date: Sat, 26 Oct 2024 13:15:01 +0100 Subject: [PATCH 03/14] feat: add new style to horizontal sidebar --- src/features/appearance/index.ts | 9 +++------ src/styles/tabs.scss | 11 ++++++----- src/styles/vertical.scss | 6 +----- 3 files changed, 10 insertions(+), 16 deletions(-) diff --git a/src/features/appearance/index.ts b/src/features/appearance/index.ts index 0bbeb0123d..c679755cb4 100644 --- a/src/features/appearance/index.ts +++ b/src/features/appearance/index.ts @@ -231,7 +231,7 @@ const generateServiceRibbonWidthStyle = ( return horizontal ? ` .sidebar { - height: ${width}px !important; + height: ${width + 8}px !important; overflow: hidden !important; } .sidebar div { @@ -250,15 +250,12 @@ const generateServiceRibbonWidthStyle = ( .tab-item .tab-item__label { font-size: ${fontSize}px !important; } - .tab-item.is-label-enabled { - padding-top: 6px !important; - padding-bottom: 2px !important; - } .sidebar__button { font-size: ${width / 3}px !important; + line-height: 0; } .app .app__content { - padding-top: ${width + sidebarSizeBias}px !important; + padding-top: ${width + sidebarSizeBias + 8}px !important; } .workspaces-drawer { margin-top: -${width}px !important; diff --git a/src/styles/tabs.scss b/src/styles/tabs.scss index 17d458c17c..e67215395f 100644 --- a/src/styles/tabs.scss +++ b/src/styles/tabs.scss @@ -16,6 +16,8 @@ display: flex; flex-direction: column; flex-shrink: 1; + padding: 4px; + gap: 4px; .placeholder { height: 40px; @@ -31,10 +33,13 @@ min-height: 50px; position: relative; flex-direction: column; + width: $theme-sidebar-width; + border-radius: 4px; + padding: 4px; + @media (prefers-reduced-motion: no-preference) { transition: background $theme-transition-time; } - width: $theme-sidebar-width; &.is-active { background: change-color( @@ -42,8 +47,6 @@ $lightness: min(lightness($theme-brand-primary) * 1.35, 100) ); - box-shadow: inset 4px 0 0 0 $theme-brand-primary; - .tab-item__icon, .tab-item__label { margin-left: 0px; @@ -53,8 +56,6 @@ &.is-label-enabled { height: min-content; overflow: hidden; - padding-top: 8px; - padding-bottom: 8px; } .tab-item__label { diff --git a/src/styles/vertical.scss b/src/styles/vertical.scss index febaac706a..b708ecfebb 100644 --- a/src/styles/vertical.scss +++ b/src/styles/vertical.scss @@ -33,9 +33,8 @@ $tabitem-bias: 30px; .tab-item { &.is-active { - box-shadow: inset 0 4px 0 0 $theme-brand-primary; overflow: hidden; - height: $sidebar-width + 4; + height: $sidebar-width; } &.is-label-enabled { @@ -44,9 +43,6 @@ $tabitem-bias: 30px; height: $sidebar-width + 10; width: max-content !important; overflow: hidden; - padding-left: 4px; - padding-right: 4px; - padding-top: 8px; } .tab-item__icon { From 72fc6154de88f8231e07c3e0ec3fbe869a5d9318 Mon Sep 17 00:00:00 2001 From: Denys Madureira Date: Sat, 26 Oct 2024 13:18:08 +0100 Subject: [PATCH 04/14] feat: adjust padding of new style to vertical sidebar --- src/features/appearance/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/features/appearance/index.ts b/src/features/appearance/index.ts index c679755cb4..e8c80088a4 100644 --- a/src/features/appearance/index.ts +++ b/src/features/appearance/index.ts @@ -289,7 +289,7 @@ const generateServiceRibbonWidthStyle = ( ` : ` .sidebar { - width: ${width}px !important; + width: ${width + 8}px !important; } .tabs { justify-content: ${sidebarServicesAlignment}; From 225582a6a2747a3644ae4d17cd78a4f30169c881 Mon Sep 17 00:00:00 2001 From: Denys Madureira Date: Fri, 25 Oct 2024 16:51:16 +0100 Subject: [PATCH 05/14] feat: add rounded border to service view --- src/styles/layout.scss | 4 +++- src/styles/services.scss | 6 ++++++ 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/src/styles/layout.scss b/src/styles/layout.scss index 591f7c54b3..6335e0171e 100644 --- a/src/styles/layout.scss +++ b/src/styles/layout.scss @@ -17,7 +17,7 @@ html { } .theme__dark .app { - background: #272727; + background: #353535; .sidebar { background: $dark-theme-gray-darker; @@ -102,6 +102,7 @@ body.win32:not(.isFullScreen) .app .app__content { .app { background: #fff; + .app__content { display: flex; width: calc(100% + 300px); @@ -116,6 +117,7 @@ body.win32:not(.isFullScreen) .app .app__content { display: flex; flex: 1; flex-direction: column; + padding: 4px; } } diff --git a/src/styles/services.scss b/src/styles/services.scss index 7ce6f8c876..37a01e2c34 100644 --- a/src/styles/services.scss +++ b/src/styles/services.scss @@ -51,6 +51,12 @@ .services__webview-wrapper { background: $theme-gray-lighter; + border-radius: 4px; + + webview { + border-radius: 4px; + overflow: hidden; + } } .services__webview, From f0bfe1ffe0a2cddc2a4e5b620c8996b54a4ad7eb Mon Sep 17 00:00:00 2001 From: Denys Madureira Date: Sat, 26 Oct 2024 12:57:27 +0100 Subject: [PATCH 06/14] feat: add padding to webview-wrapper --- src/styles/layout.scss | 3 +-- src/styles/services.scss | 1 + 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/styles/layout.scss b/src/styles/layout.scss index 6335e0171e..fe42fd1f59 100644 --- a/src/styles/layout.scss +++ b/src/styles/layout.scss @@ -17,7 +17,7 @@ html { } .theme__dark .app { - background: #353535; + background: #272727; .sidebar { background: $dark-theme-gray-darker; @@ -117,7 +117,6 @@ body.win32:not(.isFullScreen) .app .app__content { display: flex; flex: 1; flex-direction: column; - padding: 4px; } } diff --git a/src/styles/services.scss b/src/styles/services.scss index 37a01e2c34..8960d2cd64 100644 --- a/src/styles/services.scss +++ b/src/styles/services.scss @@ -52,6 +52,7 @@ .services__webview-wrapper { background: $theme-gray-lighter; border-radius: 4px; + padding: 4px; webview { border-radius: 4px; From 19633732559735846e9c2ce742432abf7afee400 Mon Sep 17 00:00:00 2001 From: Denys Madureira Date: Sat, 26 Oct 2024 13:15:01 +0100 Subject: [PATCH 07/14] feat: add new style to horizontal sidebar --- src/features/appearance/index.ts | 9 +++------ src/styles/tabs.scss | 11 ++++++----- src/styles/vertical.scss | 6 +----- 3 files changed, 10 insertions(+), 16 deletions(-) diff --git a/src/features/appearance/index.ts b/src/features/appearance/index.ts index 0bbeb0123d..c679755cb4 100644 --- a/src/features/appearance/index.ts +++ b/src/features/appearance/index.ts @@ -231,7 +231,7 @@ const generateServiceRibbonWidthStyle = ( return horizontal ? ` .sidebar { - height: ${width}px !important; + height: ${width + 8}px !important; overflow: hidden !important; } .sidebar div { @@ -250,15 +250,12 @@ const generateServiceRibbonWidthStyle = ( .tab-item .tab-item__label { font-size: ${fontSize}px !important; } - .tab-item.is-label-enabled { - padding-top: 6px !important; - padding-bottom: 2px !important; - } .sidebar__button { font-size: ${width / 3}px !important; + line-height: 0; } .app .app__content { - padding-top: ${width + sidebarSizeBias}px !important; + padding-top: ${width + sidebarSizeBias + 8}px !important; } .workspaces-drawer { margin-top: -${width}px !important; diff --git a/src/styles/tabs.scss b/src/styles/tabs.scss index 17d458c17c..e67215395f 100644 --- a/src/styles/tabs.scss +++ b/src/styles/tabs.scss @@ -16,6 +16,8 @@ display: flex; flex-direction: column; flex-shrink: 1; + padding: 4px; + gap: 4px; .placeholder { height: 40px; @@ -31,10 +33,13 @@ min-height: 50px; position: relative; flex-direction: column; + width: $theme-sidebar-width; + border-radius: 4px; + padding: 4px; + @media (prefers-reduced-motion: no-preference) { transition: background $theme-transition-time; } - width: $theme-sidebar-width; &.is-active { background: change-color( @@ -42,8 +47,6 @@ $lightness: min(lightness($theme-brand-primary) * 1.35, 100) ); - box-shadow: inset 4px 0 0 0 $theme-brand-primary; - .tab-item__icon, .tab-item__label { margin-left: 0px; @@ -53,8 +56,6 @@ &.is-label-enabled { height: min-content; overflow: hidden; - padding-top: 8px; - padding-bottom: 8px; } .tab-item__label { diff --git a/src/styles/vertical.scss b/src/styles/vertical.scss index febaac706a..b708ecfebb 100644 --- a/src/styles/vertical.scss +++ b/src/styles/vertical.scss @@ -33,9 +33,8 @@ $tabitem-bias: 30px; .tab-item { &.is-active { - box-shadow: inset 0 4px 0 0 $theme-brand-primary; overflow: hidden; - height: $sidebar-width + 4; + height: $sidebar-width; } &.is-label-enabled { @@ -44,9 +43,6 @@ $tabitem-bias: 30px; height: $sidebar-width + 10; width: max-content !important; overflow: hidden; - padding-left: 4px; - padding-right: 4px; - padding-top: 8px; } .tab-item__icon { From b1984276ec3321e535e69ef7b2a70079300f6927 Mon Sep 17 00:00:00 2001 From: Denys Madureira Date: Sat, 26 Oct 2024 13:18:08 +0100 Subject: [PATCH 08/14] feat: adjust padding of new style to vertical sidebar --- src/features/appearance/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/features/appearance/index.ts b/src/features/appearance/index.ts index c679755cb4..e8c80088a4 100644 --- a/src/features/appearance/index.ts +++ b/src/features/appearance/index.ts @@ -289,7 +289,7 @@ const generateServiceRibbonWidthStyle = ( ` : ` .sidebar { - width: ${width}px !important; + width: ${width + 8}px !important; } .tabs { justify-content: ${sidebarServicesAlignment}; From 092a0d7ff15902ec10f4ae6a1be94384f4d9f262 Mon Sep 17 00:00:00 2001 From: Denys Madureira Date: Tue, 29 Oct 2024 11:19:27 +0000 Subject: [PATCH 09/14] feat: add option to enable/disable the webview padding --- .../settings/settings/EditSettingsForm.tsx | 2 ++ src/config.ts | 1 + src/containers/settings/EditSettingsScreen.tsx | 14 ++++++++++++++ src/features/appearance/index.ts | 16 ++++++++++++++++ src/styles/services.scss | 3 --- 5 files changed, 33 insertions(+), 3 deletions(-) diff --git a/src/components/settings/settings/EditSettingsForm.tsx b/src/components/settings/settings/EditSettingsForm.tsx index 310fbfa5ec..e16fbdcf71 100644 --- a/src/components/settings/settings/EditSettingsForm.tsx +++ b/src/components/settings/settings/EditSettingsForm.tsx @@ -819,6 +819,8 @@ class EditSettingsForm extends Component { )} + + {isSplitModeEnabled &&
} {isSplitModeEnabled && ( diff --git a/src/config.ts b/src/config.ts index 5c85d23439..f205152bcb 100644 --- a/src/config.ts +++ b/src/config.ts @@ -375,6 +375,7 @@ export const DEFAULT_APP_SETTINGS = { spellcheckerLanguage: 'en-us', darkMode: false, navigationBarManualActive: false, + webviewPadding: true, splitMode: false, splitColumns: 3, fallbackLocale: 'en-US', diff --git a/src/containers/settings/EditSettingsScreen.tsx b/src/containers/settings/EditSettingsScreen.tsx index 58dd33c76e..9a1585f539 100644 --- a/src/containers/settings/EditSettingsScreen.tsx +++ b/src/containers/settings/EditSettingsScreen.tsx @@ -211,6 +211,10 @@ const messages = defineMessages({ id: 'settings.app.form.universalDarkMode', defaultMessage: 'Enable universal Dark Mode', }, + webviewPadding: { + id: 'settings.app.form.webviewPadding', + defaultMessage: 'Enable Webview Padding', + }, splitMode: { id: 'settings.app.form.splitMode', defaultMessage: 'Enable Split View Mode', @@ -467,6 +471,7 @@ class EditSettingsScreen extends Component< darkMode: Boolean(settingsData.darkMode), adaptableDarkMode: Boolean(settingsData.adaptableDarkMode), universalDarkMode: Boolean(settingsData.universalDarkMode), + webviewPadding: Boolean(settingsData.webviewPadding), splitMode: Boolean(settingsData.splitMode), splitColumns: Number(settingsData.splitColumns), serviceRibbonWidth: Number(settingsData.serviceRibbonWidth), @@ -1095,6 +1100,15 @@ class EditSettingsScreen extends Component< default: DEFAULT_APP_SETTINGS.universalDarkMode, type: 'checkbox', }, + webviewPadding: { + label: intl.formatMessage(messages.webviewPadding), + value: ifUndefined( + settings.all.app.webviewPadding, + DEFAULT_APP_SETTINGS.webviewPadding, + ), + default: DEFAULT_APP_SETTINGS.webviewPadding, + type: 'checkbox', + }, splitMode: { label: intl.formatMessage(messages.splitMode), value: ifUndefined( diff --git a/src/features/appearance/index.ts b/src/features/appearance/index.ts index e8c80088a4..1c36903b0a 100644 --- a/src/features/appearance/index.ts +++ b/src/features/appearance/index.ts @@ -144,6 +144,7 @@ const generateServiceRibbonWidthStyle = ( grayscaleServicesDim, shouldShowDragArea, isFullScreen, + webviewPadding, ) => { const width = Number(widthStr); const iconSize = Number(iconSizeStr) - iconSizeBias; @@ -286,6 +287,12 @@ const generateServiceRibbonWidthStyle = ( .tab-item div { overflow: hidden !important; } + .services__webview-wrapper { + padding: ${webviewPadding ? '4px' : '0px'}; + } + .services__webview-wrapper webview { + border-radius: ${webviewPadding ? '4px' : '0px'}; + } ` : ` .sidebar { @@ -309,6 +316,12 @@ const generateServiceRibbonWidthStyle = ( .todos__todos-panel--expanded { width: calc(100% - ${300 + width}px) !important; } + .services__webview-wrapper { + padding: ${webviewPadding ? '4px' : '0px'}; + } + .services__webview-wrapper webview { + border-radius: ${webviewPadding ? '4px' : '0px'}; + } `; }; @@ -393,6 +406,7 @@ const generateStyle = (settings, app) => { useHorizontalStyle, alwaysShowWorkspaces, showServiceName, + webviewPadding, } = settings; const { isFullScreen } = app; @@ -415,6 +429,7 @@ const generateStyle = (settings, app) => { grayscaleServicesDim, shouldShowDragArea, isFullScreen, + webviewPadding, ); if (shouldShowDragArea) { @@ -472,6 +487,7 @@ export default function initAppearance(stores) { settings.all.app.useHorizontalStyle, settings.all.app.alwaysShowWorkspaces, settings.all.app.showServiceName, + settings.all.app.webviewPadding, app.isFullScreen, ], () => { diff --git a/src/styles/services.scss b/src/styles/services.scss index 8960d2cd64..e10678a979 100644 --- a/src/styles/services.scss +++ b/src/styles/services.scss @@ -51,11 +51,8 @@ .services__webview-wrapper { background: $theme-gray-lighter; - border-radius: 4px; - padding: 4px; webview { - border-radius: 4px; overflow: hidden; } } From 96ae330865499d0fc9b2756cfcecc2cad02cb3e1 Mon Sep 17 00:00:00 2001 From: Denys Madureira Date: Tue, 29 Oct 2024 11:22:07 +0000 Subject: [PATCH 10/14] feat(dict): add settings.app.form.webviewPadding to en-US.json --- src/i18n/locales/en-US.json | 1 + 1 file changed, 1 insertion(+) diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json index 30d55719e0..e59b862e9c 100644 --- a/src/i18n/locales/en-US.json +++ b/src/i18n/locales/en-US.json @@ -279,6 +279,7 @@ "settings.app.form.wakeUpHibernationStrategy": "Hibernation strategy after automatic wake up", "settings.app.form.wakeUpStrategy": "Wake up strategy", "settings.app.form.webRTCIPHandlingPolicy": "WebRTC IP Handling Policy", + "settings.app.form.webviewPadding": "Enable Webview Padding", "settings.app.headlineAdvanced": "Advanced", "settings.app.headlineAppearance": "Appearance", "settings.app.headlineGeneral": "General", From 78919c12ab3147f24018e59fba433f2053b6482b Mon Sep 17 00:00:00 2001 From: Denys Madureira Date: Tue, 29 Oct 2024 11:30:13 +0000 Subject: [PATCH 11/14] refactor: use a clearer message and add translation to pt and pt-BR --- src/containers/settings/EditSettingsScreen.tsx | 2 +- src/i18n/locales/en-US.json | 2 +- src/i18n/locales/pt-BR.json | 1 + src/i18n/locales/pt.json | 1 + 4 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/containers/settings/EditSettingsScreen.tsx b/src/containers/settings/EditSettingsScreen.tsx index 9a1585f539..2980c4751e 100644 --- a/src/containers/settings/EditSettingsScreen.tsx +++ b/src/containers/settings/EditSettingsScreen.tsx @@ -213,7 +213,7 @@ const messages = defineMessages({ }, webviewPadding: { id: 'settings.app.form.webviewPadding', - defaultMessage: 'Enable Webview Padding', + defaultMessage: 'Show margins around Webview', }, splitMode: { id: 'settings.app.form.splitMode', diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json index e59b862e9c..c80edaff50 100644 --- a/src/i18n/locales/en-US.json +++ b/src/i18n/locales/en-US.json @@ -279,7 +279,7 @@ "settings.app.form.wakeUpHibernationStrategy": "Hibernation strategy after automatic wake up", "settings.app.form.wakeUpStrategy": "Wake up strategy", "settings.app.form.webRTCIPHandlingPolicy": "WebRTC IP Handling Policy", - "settings.app.form.webviewPadding": "Enable Webview Padding", + "settings.app.form.webviewPadding": "Show margins around Webview", "settings.app.headlineAdvanced": "Advanced", "settings.app.headlineAppearance": "Appearance", "settings.app.headlineGeneral": "General", diff --git a/src/i18n/locales/pt-BR.json b/src/i18n/locales/pt-BR.json index 2538273cd7..1fcd1c2acc 100644 --- a/src/i18n/locales/pt-BR.json +++ b/src/i18n/locales/pt-BR.json @@ -261,6 +261,7 @@ "settings.app.form.wakeUpHibernationStrategy": "Estratégia de hibernação após acordar automaticamente", "settings.app.form.wakeUpStrategy": "Estratégia de despertar", "settings.app.form.webRTCIPHandlingPolicy": "Política de gerenciamento IP WebRTC", + "settings.app.form.webviewPadding": "Mostrar margens ao redor da Webview", "settings.app.headlineAdvanced": "Avançado", "settings.app.headlineAppearance": "Aparência", "settings.app.headlineGeneral": "Geral", diff --git a/src/i18n/locales/pt.json b/src/i18n/locales/pt.json index 2722b9b863..d17a503648 100644 --- a/src/i18n/locales/pt.json +++ b/src/i18n/locales/pt.json @@ -260,6 +260,7 @@ "settings.app.form.wakeUpHibernationStrategy": "Estratégia de hibernação após acordar automaticamente", "settings.app.form.wakeUpStrategy": "Estratégia de despertar", "settings.app.form.webRTCIPHandlingPolicy": "Política de exposição do IP WebRTC", + "settings.app.form.webviewPadding": "Mostrar margens ao redor da Webview", "settings.app.headlineAdvanced": "Avançado", "settings.app.headlineAppearance": "Aparência", "settings.app.headlineGeneral": "Geral", From 9b56084b46fc04d3eb58339ae4f993082c607cb4 Mon Sep 17 00:00:00 2001 From: Denys Madureira Date: Tue, 29 Oct 2024 23:19:39 +0000 Subject: [PATCH 12/14] feat: make sidebar scrollable when in horizontal mode and increase padding size to 6px --- src/features/appearance/index.ts | 16 +++++++++++----- src/styles/layout.scss | 8 ++++++++ src/styles/tabs.scss | 4 ++-- src/styles/vertical.scss | 12 ++++++++++++ 4 files changed, 33 insertions(+), 7 deletions(-) diff --git a/src/features/appearance/index.ts b/src/features/appearance/index.ts index 1c36903b0a..f79c40ea7a 100644 --- a/src/features/appearance/index.ts +++ b/src/features/appearance/index.ts @@ -15,6 +15,12 @@ import { userDataPath } from '../../environment-remote'; const STYLE_ELEMENT_ID = 'custom-appearance-style'; +// The padding is 6px. We multiply because when we sum, we want to get +// the value of the left and right side when using on width +// and the value of the top and bottom side when using on height +// So we get a total of 12px +const PADDING = 6 * 2; + const createStyleElement = () => { const styles = document.createElement('style'); styles.id = STYLE_ELEMENT_ID; @@ -232,7 +238,7 @@ const generateServiceRibbonWidthStyle = ( return horizontal ? ` .sidebar { - height: ${width + 8}px !important; + height: ${width + PADDING}px !important; overflow: hidden !important; } .sidebar div { @@ -256,7 +262,7 @@ const generateServiceRibbonWidthStyle = ( line-height: 0; } .app .app__content { - padding-top: ${width + sidebarSizeBias + 8}px !important; + padding-top: ${width + sidebarSizeBias + PADDING}px !important; } .workspaces-drawer { margin-top: -${width}px !important; @@ -288,7 +294,7 @@ const generateServiceRibbonWidthStyle = ( overflow: hidden !important; } .services__webview-wrapper { - padding: ${webviewPadding ? '4px' : '0px'}; + padding: ${webviewPadding ? '6px' : '0px'}; } .services__webview-wrapper webview { border-radius: ${webviewPadding ? '4px' : '0px'}; @@ -296,7 +302,7 @@ const generateServiceRibbonWidthStyle = ( ` : ` .sidebar { - width: ${width + 8}px !important; + width: ${width + PADDING}px !important; } .tabs { justify-content: ${sidebarServicesAlignment}; @@ -317,7 +323,7 @@ const generateServiceRibbonWidthStyle = ( width: calc(100% - ${300 + width}px) !important; } .services__webview-wrapper { - padding: ${webviewPadding ? '4px' : '0px'}; + padding: ${webviewPadding ? '6px' : '0px'}; } .services__webview-wrapper webview { border-radius: ${webviewPadding ? '4px' : '0px'}; diff --git a/src/styles/layout.scss b/src/styles/layout.scss index fe42fd1f59..adfbb235a6 100644 --- a/src/styles/layout.scss +++ b/src/styles/layout.scss @@ -37,6 +37,10 @@ html { .sidebar__button { color: $dark-theme-gray-lighter; + &:first-of-type { + box-shadow: -4px 0px 4px 0px $dark-theme-gray-darker; + } + &:hover, &:active { color: $dark-theme-gray-smoke; @@ -52,6 +56,10 @@ html { filter: grayscale(1); } } + + .sidebar__button--workspaces.is-active { + box-shadow: -4px 0px 4px 0px $dark-theme-gray-darker; + } } .app-loader .app-loader__title { diff --git a/src/styles/tabs.scss b/src/styles/tabs.scss index e67215395f..e6898a56fb 100644 --- a/src/styles/tabs.scss +++ b/src/styles/tabs.scss @@ -16,8 +16,8 @@ display: flex; flex-direction: column; flex-shrink: 1; - padding: 4px; - gap: 4px; + padding: 6px; + gap: 6px; .placeholder { height: 40px; diff --git a/src/styles/vertical.scss b/src/styles/vertical.scss index b708ecfebb..97401b58b1 100644 --- a/src/styles/vertical.scss +++ b/src/styles/vertical.scss @@ -30,6 +30,8 @@ $tabitem-bias: 30px; .tabs { flex-direction: row; + overflow-y: hidden; + overflow-x: scroll; .tab-item { &.is-active { @@ -53,16 +55,26 @@ $tabitem-bias: 30px; padding: 0; } } + + &::-webkit-scrollbar { + display: none; + } } div { overflow: hidden !important; } + .sidebar__button:first-of-type { + height: 100%; + box-shadow: -4px 0px 4px 0px $theme-gray-lightest; + } + .sidebar__button--workspaces.is-active { position: absolute; right: 300px; height: 100%; background-color: #f7f7f9; + box-shadow: -4px 0px 4px 0px $theme-gray-lightest; } } From db481f45a81d6a84db34380a97fe07ccdf923b18 Mon Sep 17 00:00:00 2001 From: Denys Madureira Date: Fri, 1 Nov 2024 10:25:21 +0000 Subject: [PATCH 13/14] feat: fix top align of workspace drawer --- src/features/appearance/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/features/appearance/index.ts b/src/features/appearance/index.ts index f79c40ea7a..18e1241db8 100644 --- a/src/features/appearance/index.ts +++ b/src/features/appearance/index.ts @@ -377,7 +377,7 @@ const generateVerticalStyle = (widthStr, alwaysShowWorkspaces) => { } .workspaces-drawer { - margin-top: -${sidebarWidth - verticalStyleOffset - 1}px !important; + margin-top: -${sidebarWidth + verticalStyleOffset - 13}px !important; } .todos__todos-panel--expanded { From 8d6913305f0e2a51337060cc5ac49571c232595f Mon Sep 17 00:00:00 2001 From: Denys Madureira Date: Tue, 12 Nov 2024 16:28:58 +0000 Subject: [PATCH 14/14] feat: remove unnecessary style from appearance/index.ts --- src/features/appearance/index.ts | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/src/features/appearance/index.ts b/src/features/appearance/index.ts index 5f459854be..35e6371351 100644 --- a/src/features/appearance/index.ts +++ b/src/features/appearance/index.ts @@ -47,7 +47,7 @@ const generateUserCustomCSS = () => { return pathExistsSync(path) ? readFileSync(path).toString() : ''; }; -const generateAccentStyle = (accentColorStr, useHorizontalStyle) => { +const generateAccentStyle = accentColorStr => { let accentColor; try { accentColor = color(accentColorStr); @@ -102,10 +102,6 @@ const generateAccentStyle = (accentColorStr, useHorizontalStyle) => { border-right-color: ${accentColorStr}; } - .franz-form .franz-form__radio.is-selected, .tab-item.is-active { - box-shadow: inset ${useHorizontalStyle ? '0 4px' : '4px 0'} 0 0 ${accentColorStr}; - } - a.button:hover, button.button:hover { background: ${darkenAbsolute(accentColor, 10).hex()}; } @@ -422,7 +418,7 @@ const generateStyle = (settings, app) => { if ( accentColor.toLowerCase() !== DEFAULT_APP_SETTINGS.accentColor.toLowerCase() ) { - style += generateAccentStyle(accentColor, useHorizontalStyle); + style += generateAccentStyle(accentColor); } style += generateServiceRibbonWidthStyle(