mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2026-04-02 05:39:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor compact mode behavior and styles: adjust sidebar width handling, improve transition timings, and enhance media query conditions

Browse Source
This commit is contained in:
mr. M
2024-12-14 21:38:13 +01:00
parent 6ea43b65d3
commit 8842f099ed
4 changed files with 23 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/browser/base/content/ZenUIManager.mjs
View File

@@ -300,9 +300,7 @@ var gZenVerticalTabsManager = {
let shouldHide = false;
if (((!isRightSide && this.isWindowsStyledButtons) || (isRightSide && !this.isWindowsStyledButtons)
|| (
isCompactMode && isSingleToolbar && !(
(!this.isWindowsStyledButtons && !isRightSide)
)
isCompactMode && isSingleToolbar && this.isWindowsStyledButtons && !isRightSide
)) && isSingleToolbar) {
appContentNavbarContaienr.setAttribute('should-hide', 'true');
shouldHide = true;
@@ -384,6 +382,10 @@ var gZenVerticalTabsManager = {
if (!doNotChangeWindowButtons && isSingleToolbar && !isCompactMode && !isRightSide && !this.isWindowsStyledButtons) {
topButtons.prepend(windowButtons);
}
// Case: single toolbar, compact mode, right side and windows styled buttons
if (isSingleToolbar && isCompactMode && isRightSide && this.isWindowsStyledButtons) {
topButtons.prepend(windowButtons);
}
if (doNotChangeWindowButtons) {
if (isRightSide && !isSidebarExpanded) {
@@ -413,7 +415,7 @@ var gZenVerticalTabsManager = {
}
}
if (shouldHide) {
if (shouldHide && !isCompactMode) {
appContentNavbarContaienr.append(windowButtons);
}

11
src/browser/base/content/zen-styles/zen-compact-mode.css
View File

@@ -10,7 +10,7 @@
pointer-events: none;
}
@media (-moz-bool-pref: 'zen.view.compact.hide-tabbar') {
@media (-moz-bool-pref: 'zen.view.compact.hide-tabbar') or (-moz-bool-pref: 'zen.view.use-single-toolbar') {
#zen-sidebar-web-panel-wrapper:has(#zen-sidebar-web-panel[pinned='true']) {
margin-left: calc(var(--zen-sidebar-web-panel-spacing) * 2) !important;
}
@@ -133,6 +133,10 @@
margin-top: var(--zen-element-separation) !important;
}
& #zen-appcontent-wrapper {
z-index: 3 !important;
}
& #zen-sidebar-web-panel-wrapper:has(#zen-sidebar-web-panel[pinned='true']) {
margin-top: calc(var(--zen-element-separation) * 2) !important;
}
@@ -154,6 +158,9 @@
background: var(--zen-dialog-background);
padding-left: var(--zen-toolbox-padding) !important;
max-height: var(--zen-toolbar-height);
overflow: hidden;
& > * {
position: relative !important;
}
@@ -187,6 +194,8 @@
border-top-width: 1px;
top: -1px;
overflow: initial;
max-height: unset;
& #urlbar {
transform: translateY(0);

2
src/browser/base/content/zen-styles/zen-tabs/vertical-tabs-topbar.inc.css
View File

@@ -6,7 +6,7 @@ height: var(--zen-toolbar-height);
transition-delay: 0.05s;
& > * {
transition: transform 0.1s ease-out;
transition: transform 0.2s ease-out;
}
}

9
src/browser/base/zen-components/ZenCompactMode.mjs
View File

@@ -104,7 +104,10 @@ var gZenCompactModeManager = {
return;
}
this._isAnimating = true;
const sidebarWidth = this.sidebar.getBoundingClientRect().width;
let sidebarWidth = this.sidebar.getBoundingClientRect().width;
if (sidebarWidth < 300) {
sidebarWidth += sidebarWidth < 210 ? 9 : 11; // Bug: IF sidebar is too small, it will not animate properly
}
if (canHideSidebar && isCompactMode) {
this.sidebar.style.position = "relative";
this.sidebar.style.transition = "margin .3s ease, opacity .3s ease";
@@ -132,7 +135,7 @@ var gZenCompactModeManager = {
this.sidebar.style.removeProperty("left");
document.getElementById('browser').style.removeProperty("overflow");
});
}, 500);
}, 400);
});
} else if (canHideSidebar && !isCompactMode) {
document.getElementById('browser').style.overflow = "hidden";
@@ -171,7 +174,7 @@ var gZenCompactModeManager = {
document.getElementById('browser').style.removeProperty("overflow");
});
}, 500);
}, 400);
});
}
},