From 8dfb6e76678257571fd6aba158331dc020e49a26 Mon Sep 17 00:00:00 2001 From: Daniel Santa Rosa Date: Thu, 26 Sep 2024 20:30:32 -0300 Subject: [PATCH] Fix sidebar layout shift when expand on hover is on --- .../zen-styles/zen-tabs/vertical-tabs.css | 146 +++++++++++++++--- 1 file changed, 127 insertions(+), 19 deletions(-) diff --git a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css b/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css index 1c97384a6..fefeb4717 100644 --- a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css +++ b/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css @@ -122,6 +122,11 @@ & > toolbarbutton:not(#zen-workspaces-button) { padding: 0 !important; } + + @media (-moz-bool-pref: 'zen.view.sidebar-expanded.on-hover') and (not ((-moz-bool-pref: 'zen.view.compact') and (-moz-bool-pref: 'zen.view.compact.hide-tabbar'))) { + align-items: unset; + } + } #newtab-button-container { @@ -151,6 +156,13 @@ } } + /** + * Match pinned tabs with other tabs spacing + */ + #navigator-toolbox[zen-has-hover='true'] #vertical-pinned-tabs-container .tab-icon-image { + padding-right: 10px; + } + /* Mark: toolbox as expanded */ #navigator-toolbox:is( #navigator-toolbox[zen-user-hover='true'][zen-has-hover], @@ -170,6 +182,15 @@ margin-left: 2px; margin-right: 2px; + /** + * Do not change workspace button to row direction when expand on hover + * is on because it makes elements to jump to new positions. keep it with + * the same layout as when its collapsed + */ + @media (-moz-bool-pref: 'zen.view.sidebar-expanded.on-hover') and (not ((-moz-bool-pref: 'zen.view.compact') and (-moz-bool-pref: 'zen.view.compact.hide-tabbar'))) { + flex-direction: column; + } + & .zen-workspace-sidebar-icon[no-icon='true'] { display: none; } @@ -187,6 +208,16 @@ position: relative; --toolbarbutton-inner-padding: var(--zen-toolbar-button-inner-padding) !important; + + /** + * Keep colum layout when expand on hover is on + */ + @media (-moz-bool-pref: 'zen.view.sidebar-expanded.on-hover') and (not ((-moz-bool-pref: 'zen.view.compact') and (-moz-bool-pref: 'zen.view.compact.hide-tabbar'))) { + flex-direction: column; + justify-content: unset; + } + + } /* Mark: Fix separator paddings */ @@ -240,8 +271,48 @@ } } + /** + When expand on hover, do not change pinned tabs layout. + keep it stacked like the other tabs and show its label + */ + @media (-moz-bool-pref: 'zen.view.sidebar-expanded.on-hover') and (not ((-moz-bool-pref: 'zen.view.compact') and (-moz-bool-pref: 'zen.view.compact.hide-tabbar'))) { + & #vertical-pinned-tabs-container { + display: flex; + flex-direction: column; + gap: 0 !important; + + & .tab-label-container { + display: unset !important; + align-content: center; + } + + } + + /* Show same separator as when colapsed */ + & #vertical-pinned-tabs-container:has(tab:not([hidden])) { + margin-bottom: 8px!important; + position: relative; + + &::after { + bottom: -4px; + content: ''; + display: block; + height: 1px; + background: color-mix(in srgb, var(--zen-colors-border) 80%, transparent 20%); + width: 100%; + left: 50%; + transform: translateX(-50%); + position: absolute; + } + } + } + & #tabbrowser-tabs { & .tabbrowser-tab { + @media (-moz-bool-pref: 'zen.view.sidebar-expanded.on-hover') and (not ((-moz-bool-pref: 'zen.view.compact') and (-moz-bool-pref: 'zen.view.compact.hide-tabbar'))) { + /* Match alignment when toolbar is colapsed */ + margin-left: 2.5px; + } & .tab-background { @media not (prefers-color-scheme: dark) { box-shadow: none !important; @@ -260,6 +331,9 @@ &:not([pinned]) { margin-inline-end: var(--toolbarbutton-inner-padding) !important; margin-inline-start: calc(var(--toolbarbutton-inner-padding) / 4) !important; + @media (-moz-bool-pref: 'zen.view.sidebar-expanded.on-hover') and (not ((-moz-bool-pref: 'zen.view.compact') and (-moz-bool-pref: 'zen.view.compact.hide-tabbar'))) { + margin-inline-start: calc(var(--toolbarbutton-inner-padding) / 6) !important; + } } } } @@ -353,10 +427,14 @@ --tab-min-width: 36px !important; & .tabbrowser-tab { - margin: 0 auto; + margin-left: 2.5px; width: var(--tab-min-width) !important; height: var(--tab-min-width) !important; + @media not (-moz-bool-pref: 'zen.view.sidebar-expanded.on-hover') and (not ((-moz-bool-pref: 'zen.view.compact') and (-moz-bool-pref: 'zen.view.compact.hide-tabbar'))) { + margin: 0 auto; + } + & .tab-background:is([selected], [multiselected]) { @media not (prefers-color-scheme: dark) { box-shadow: 0 0 1px 1px rgba(0,0,0,.05) !important; @@ -366,7 +444,13 @@ & .tab-content { display: flex; align-content: center; - justify-content: center; + /** + * Centers content when expand on hover is off. + * When its on, alignment is done with margins + */ + @media not (-moz-bool-pref: 'zen.view.sidebar-expanded.on-hover') and (not ((-moz-bool-pref: 'zen.view.compact') and (-moz-bool-pref: 'zen.view.compact.hide-tabbar'))) { + justify-content: center; + } & .tab-label-container { display: none; @@ -377,6 +461,20 @@ margin-inline-end: 0 !important; } } + + @media (-moz-bool-pref: 'zen.view.sidebar-expanded.on-hover') and (not ((-moz-bool-pref: 'zen.view.compact') and (-moz-bool-pref: 'zen.view.compact.hide-tabbar'))) { + /* Fix icon alingment on colapsed */ + .tab-throbber, + .tab-icon-pending, + .tab-icon-image, + .tab-sharing-icon-overlay, + .tab-icon-overlay { + &:not([pinned]) { + margin-inline-start: calc(var(--toolbarbutton-inner-padding) / 6) !important; + } + } + } + } #vertical-pinned-tabs-container { @@ -408,23 +506,28 @@ & #zen-workspaces-button { flex-direction: column; - &:not([as-button='true']) { - - & toolbarbutton { - &[active='true']::after { - bottom: 50% !important; - transform: translateY(50%) !important; - } - - :root:has(#navigator-toolbox:not([zen-right-side='true'])) &[active='true']::after { - left: -2px; - animation: zen-workspaces-button-active-collapsed-left 0.1s ease-in-out !important; - } + /* + Do not animate active workspace indicator on hover, since it changes position + */ + @media not (-moz-bool-pref: 'zen.view.sidebar-expanded.on-hover') and (not ((-moz-bool-pref: 'zen.view.compact') and (-moz-bool-pref: 'zen.view.compact.hide-tabbar'))) { + &:not([as-button='true']) { + + & toolbarbutton { + &[active='true']::after { + bottom: 50% !important; + transform: translateY(50%) !important; + } + + :root:has(#navigator-toolbox:not([zen-right-side='true'])) &[active='true']::after { + left: -2px; + animation: zen-workspaces-button-active-collapsed-left 0.1s ease-in-out !important; + } - :root:has(#navigator-toolbox[zen-right-side='true']) &[active='true']::after { - left: unset !important; - right: -2px; - animation: zen-workspaces-button-active-collapsed-right 0.1s ease-in-out !important; + :root:has(#navigator-toolbox[zen-right-side='true']) &[active='true']::after { + left: unset !important; + right: -2px; + animation: zen-workspaces-button-active-collapsed-right 0.1s ease-in-out !important; + } } } } @@ -485,6 +588,11 @@ transition: 0 !important; animation: zen-vtabs-animation 0.3s ease-in-out; -moz-window-dragging: no-drag; + @media (-moz-bool-pref: 'zen.view.sidebar-expanded.on-hover') and (not ((-moz-bool-pref: 'zen.view.compact') and (-moz-bool-pref: 'zen.view.compact.hide-tabbar'))) { + /* This fix tabs shifting up on hover */ + padding-top: calc(var(--zen-toolbox-padding) + 2px); + animation: unset; + } } &[zen-right-side='true'] #TabsToolbar { @@ -581,4 +689,4 @@ } } } -} \ No newline at end of file +}