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

Added right side compact mode animations

Browse Source
This commit is contained in:
mr. M
2024-12-14 15:26:31 +01:00
parent a9fb598134
commit 37f5756ddb
1 changed files with 35 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -37,7 +37,8 @@ var gZenCompactModeManager = {
if (this._sidebarIsOnRight) { if (this._sidebarIsOnRight) {
return this._sidebarIsOnRight; return this._sidebarIsOnRight;
} }
return Services.prefs.getBoolPref('zen.tabs.vertical.right-side'); this._sidebarIsOnRight = Services.prefs.getBoolPref('zen.tabs.vertical.right-side');
return this._sidebarIsOnRight;
}, },
get sidebar() { get sidebar() {
@@ -105,42 +106,46 @@ var gZenCompactModeManager = {
this._isAnimating = true; this._isAnimating = true;
if (canHideSidebar && isCompactMode) { if (canHideSidebar && isCompactMode) {
window.requestAnimationFrame(() => { window.requestAnimationFrame(() => {
this.sidebar.style.position = "relative"; window.requestAnimationFrame(() => {
this.sidebar.style.transition = "margin-left .3s ease"; this.sidebar.style.position = "relative";
this.sidebar.style.marginLeft = `calc(-1 * ${this.sidebar.getAttribute("width")}px)`; this.sidebar.style.transition = "margin-left .3s ease";
this.sidebar.style.pointerEvents = "none"; this.sidebar.style.marginLeft = `${(this.sidebarIsOnRight ? 1 : -1) * this.sidebar.getAttribute("width")}px`;
this.sidebar.style.opacity = "0"; this.sidebar.style.pointerEvents = "none";
this.sidebar.style.opacity = "0";
setTimeout(() => { setTimeout(() => {
window.requestAnimationFrame(() => { window.requestAnimationFrame(() => {
this._isAnimating = false; this._isAnimating = false;
this.sidebar.style.removeProperty("position"); this.sidebar.style.removeProperty("position");
this.sidebar.style.removeProperty("transition"); this.sidebar.style.removeProperty("transition");
this.sidebar.style.removeProperty("margin-left"); this.sidebar.style.removeProperty("margin-left");
this.sidebar.style.removeProperty("pointer-events"); this.sidebar.style.removeProperty("pointer-events");
this.sidebar.style.removeProperty("opacity"); this.sidebar.style.removeProperty("opacity");
}); });
}, 300); }, 300);
});
}); });
} else if (canHideSidebar && !isCompactMode) { } else if (canHideSidebar && !isCompactMode) {
// we are in compact mode and we are exiting it // we are in compact mode and we are exiting it
this.sidebar.style.marginLeft = `calc(-1 * ${this.sidebar.getAttribute("width")}px)`; this.sidebar.style.marginLeft = `${(this.sidebarIsOnRight ? 1 : -1) * this.sidebar.getAttribute("width")}px`;
window.requestAnimationFrame(() => { window.requestAnimationFrame(() => {
this.sidebar.style.position = "relative"; window.requestAnimationFrame(() => {
this.sidebar.style.transition = "margin-left .3s ease"; this.sidebar.style.position = "relative";
this.sidebar.style.marginLeft = "0"; this.sidebar.style.transition = "margin-left .3s ease";
this.sidebar.style.pointerEvents = "none"; this.sidebar.style.marginLeft = "0";
this.sidebar.style.pointerEvents = "none";
setTimeout(() => { setTimeout(() => {
window.requestAnimationFrame(() => { window.requestAnimationFrame(() => {
this._isAnimating = false; this._isAnimating = false;
this.sidebar.style.removeProperty("position"); this.sidebar.style.removeProperty("position");
this.sidebar.style.removeProperty("transition"); this.sidebar.style.removeProperty("transition");
this.sidebar.style.removeProperty("margin-left"); this.sidebar.style.removeProperty("margin-left");
this.sidebar.style.removeProperty("pointer-events"); this.sidebar.style.removeProperty("pointer-events");
}); });
}, 300); }, 300);
});
}); });
} }
}, },