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..2980c4751e 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: 'Show margins around Webview', + }, 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 0bbeb0123d..18e1241db8 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; @@ -144,6 +150,7 @@ const generateServiceRibbonWidthStyle = ( grayscaleServicesDim, shouldShowDragArea, isFullScreen, + webviewPadding, ) => { const width = Number(widthStr); const iconSize = Number(iconSizeStr) - iconSizeBias; @@ -231,7 +238,7 @@ const generateServiceRibbonWidthStyle = ( return horizontal ? ` .sidebar { - height: ${width}px !important; + height: ${width + PADDING}px !important; overflow: hidden !important; } .sidebar div { @@ -250,15 +257,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 + PADDING}px !important; } .workspaces-drawer { margin-top: -${width}px !important; @@ -289,10 +293,16 @@ const generateServiceRibbonWidthStyle = ( .tab-item div { overflow: hidden !important; } + .services__webview-wrapper { + padding: ${webviewPadding ? '6px' : '0px'}; + } + .services__webview-wrapper webview { + border-radius: ${webviewPadding ? '4px' : '0px'}; + } ` : ` .sidebar { - width: ${width}px !important; + width: ${width + PADDING}px !important; } .tabs { justify-content: ${sidebarServicesAlignment}; @@ -312,6 +322,12 @@ const generateServiceRibbonWidthStyle = ( .todos__todos-panel--expanded { width: calc(100% - ${300 + width}px) !important; } + .services__webview-wrapper { + padding: ${webviewPadding ? '6px' : '0px'}; + } + .services__webview-wrapper webview { + border-radius: ${webviewPadding ? '4px' : '0px'}; + } `; }; @@ -361,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 { @@ -396,6 +412,7 @@ const generateStyle = (settings, app) => { useHorizontalStyle, alwaysShowWorkspaces, showServiceName, + webviewPadding, } = settings; const { isFullScreen } = app; @@ -418,6 +435,7 @@ const generateStyle = (settings, app) => { grayscaleServicesDim, shouldShowDragArea, isFullScreen, + webviewPadding, ); if (shouldShowDragArea) { @@ -475,6 +493,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/i18n/locales/en-US.json b/src/i18n/locales/en-US.json index 30d55719e0..c80edaff50 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": "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", diff --git a/src/styles/layout.scss b/src/styles/layout.scss index 591f7c54b3..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 { @@ -102,6 +110,7 @@ body.win32:not(.isFullScreen) .app .app__content { .app { background: #fff; + .app__content { display: flex; width: calc(100% + 300px); diff --git a/src/styles/services.scss b/src/styles/services.scss index 7ce6f8c876..e10678a979 100644 --- a/src/styles/services.scss +++ b/src/styles/services.scss @@ -51,6 +51,10 @@ .services__webview-wrapper { background: $theme-gray-lighter; + + webview { + overflow: hidden; + } } .services__webview, diff --git a/src/styles/tabs.scss b/src/styles/tabs.scss index 17d458c17c..e6898a56fb 100644 --- a/src/styles/tabs.scss +++ b/src/styles/tabs.scss @@ -16,6 +16,8 @@ display: flex; flex-direction: column; flex-shrink: 1; + padding: 6px; + gap: 6px; .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..97401b58b1 100644 --- a/src/styles/vertical.scss +++ b/src/styles/vertical.scss @@ -30,12 +30,13 @@ $tabitem-bias: 30px; .tabs { flex-direction: row; + overflow-y: hidden; + overflow-x: scroll; .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 +45,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 { @@ -57,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; } }