mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2025-10-07 10:26:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor URL bar behavior, update compact mode styles, and enhance sidebar animations

Browse Source
This commit is contained in:
mr. M
2024-12-14 17:43:17 +01:00
parent 37f5756ddb
commit a35c0fc1a7
6 changed files with 83 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -104,48 +104,71 @@ var gZenCompactModeManager = {
return;
}
this._isAnimating = true;
const sidebarWidth = this.sidebar.getBoundingClientRect().width;
if (canHideSidebar && isCompactMode) {
window.requestAnimationFrame(() => {
window.requestAnimationFrame(() => {
this.sidebar.style.position = "relative";
this.sidebar.style.transition = "margin-left .3s ease";
this.sidebar.style.marginLeft = `${(this.sidebarIsOnRight ? 1 : -1) * this.sidebar.getAttribute("width")}px`;
this.sidebar.style.pointerEvents = "none";
this.sidebar.style.opacity = "0";
document.getElementById('browser').style.overflow = "hidden";
this.sidebar.style.position = "relative";
this.sidebar.style.transition = "margin .3s ease, transform .4s ease, opacity .3s 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";
setTimeout(() => {
window.requestAnimationFrame(() => {
this._isAnimating = false;
this.sidebar.style.removeProperty("position");
this.sidebar.style.removeProperty("transition");
this.sidebar.style.removeProperty("margin-left");
this.sidebar.style.removeProperty("pointer-events");
this.sidebar.style.removeProperty("opacity");
});
}, 300);
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");
});
});
}, 400);
} else if (canHideSidebar && !isCompactMode) {
// we are in compact mode and we are exiting it
this.sidebar.style.marginLeft = `${(this.sidebarIsOnRight ? 1 : -1) * this.sidebar.getAttribute("width")}px`;
document.getElementById('browser').style.overflow = "hidden";
this.sidebar.style.position = "relative";
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.transform = `translateX(${sidebarWidth}px)`;
}
window.requestAnimationFrame(() => {
window.requestAnimationFrame(() => {
this.sidebar.style.position = "relative";
this.sidebar.style.transition = "margin-left .3s ease";
this.sidebar.style.transition = "margin .3s ease, transform .4s ease, opacity .3s ease";
// we are in compact mode and we are exiting it
if (!this.sidebarIsOnRight) {
this.sidebar.style.marginLeft = "0";
this.sidebar.style.pointerEvents = "none";
} else {
this.sidebar.style.marginRight = "0";
this.sidebar.style.transform = "translateX(0)";
}
this.sidebar.style.pointerEvents = "none";
setTimeout(() => {
window.requestAnimationFrame(() => {
this._isAnimating = false;
this.sidebar.style.removeProperty("position");
this.sidebar.style.removeProperty("transition");
this.sidebar.style.removeProperty("margin-left");
this.sidebar.style.removeProperty("pointer-events");
});
}, 300);
});
setTimeout(() => {
window.requestAnimationFrame(() => {
this._isAnimating = false;
this.sidebar.style.removeProperty("position");
this.sidebar.style.removeProperty("pointer-events");
this.sidebar.style.removeProperty("opacity");
this.sidebar.style.removeProperty("margin-left");
this.sidebar.style.removeProperty("margin-right");
this.sidebar.style.removeProperty("transform");
this.sidebar.style.removeProperty("transition");
this.sidebar.style.removeProperty("left");
document.getElementById('browser').style.removeProperty("overflow");
});
}, 400);
});
}
},