mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2025-09-05 19:08:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refined sidebar transition effects in compact mode for improved performance and visual consistency

Browse Source
This commit is contained in:
mr. M
2024-12-17 19:41:51 +01:00
parent d43bbbd5ba
commit a1cef01c22
2 changed files with 34 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -15,8 +15,6 @@
margin-left: var(--zen-sidebar-web-panel-spacing) !important;
}
#urlbar[open]
#zen-appcontent-wrapper {
margin-left: var(--zen-element-separation) !important;
}
@@ -36,7 +34,7 @@
&:not([animate='true']) {
position: absolute;
z-index: 10;
transition: transform 0.25s ease, opacity 1s ease;
transition: transform 0.25s ease, opacity 1.5s ease;
transform: translateX(0);
top: 0;
bottom: var(--zen-element-separation);
@@ -112,15 +110,16 @@
#navigator-toolbox[flash-popup],
#navigator-toolbox[has-popup-menu],
#navigator-toolbox[movingtab],
#mainPopupSet:has(> #appMenu-popup:hover) ~ toolbox,
#navigator-toolbox:has(.tabbrowser-tab:active),
#navigator-toolbox:has(*[open='true']:not(tab):not(.zen-compact-mode-ignore)) {
transition: transform 0.25s ease;
opacity: 1;
&:not([animate='true']) {
transition: transform 0.25s ease;
opacity: 1;
transform: translateX(calc(100% - var(--zen-element-separation) - 1px));
:root[zen-right-side='true'] & {
transform: translateX(calc(-100% + var(--zen-element-separation) + 1px));
transform: translateX(calc(100% - var(--zen-element-separation) - 1px));
:root[zen-right-side='true'] & {
transform: translateX(calc(-100% + var(--zen-element-separation) + 1px));
}
}
}
}

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

@@ -111,34 +111,33 @@ var gZenCompactModeManager = {
window.requestAnimationFrame(() => {
let sidebarWidth = this.sidebar.getBoundingClientRect().width;
if (canHideSidebar && isCompactMode) {
this.sidebar.style.position = "relative";
this.sidebar.style.transition = "margin .4s ease, opacity .4s ease";
this.sidebar.style.left = "0";
this.sidebar.style.setProperty("opacity", "1", "important");
if (!this.sidebarIsOnRight) {
this.sidebar.style.marginLeft = `${-1 * sidebarWidth}px`;
} else {
this.sidebar.style.marginRight = `${-1 * sidebarWidth}px`;
}
this.sidebar.style.pointerEvents = "none";
window.requestAnimationFrame(() => {
this.sidebar.style.opacity = "0";
setTimeout(() => {
window.requestAnimationFrame(() => {
this._isAnimating = false;
this.sidebar.style.removeProperty("opacity");
this.sidebar.style.removeProperty("position");
this.sidebar.style.removeProperty("transition");
this.sidebar.style.removeProperty("pointer-events");
this.sidebar.style.removeProperty("margin-left");
this.sidebar.style.removeProperty("margin-right");
this.sidebar.style.removeProperty("transform");
this.sidebar.style.removeProperty("left");
document.getElementById('browser').style.removeProperty("overflow");
this.sidebar.removeAttribute("animate");
});
}, 450);
this.sidebar.style.position = "unset";
this.sidebar.style.transition = "margin .4s ease";
this.sidebar.style.left = "0";
if (!this.sidebarIsOnRight) {
this.sidebar.style.marginLeft = `${-1 * sidebarWidth}px`;
} else {
this.sidebar.style.marginRight = `${-1 * sidebarWidth}px`;
}
this.sidebar.style.pointerEvents = "none";
window.requestAnimationFrame(() => {
setTimeout(() => {
window.requestAnimationFrame(() => {
this._isAnimating = false;
this.sidebar.style.removeProperty("position");
this.sidebar.style.removeProperty("pointer-events");
this.sidebar.style.removeProperty("margin-left");
this.sidebar.style.removeProperty("margin-right");
this.sidebar.style.removeProperty("transform");
this.sidebar.style.removeProperty("left");
document.getElementById('browser').style.removeProperty("overflow");
this.sidebar.removeAttribute("animate");
this.sidebar.style.removeProperty("transition");
});
}, 450);
});
});
} else if (canHideSidebar && !isCompactMode) {
document.getElementById('browser').style.overflow = "hidden";