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

Added sidebar compact mode animations!

Browse Source
This commit is contained in:
mr. M
2024-12-13 01:47:09 +01:00
parent c67fc71069
commit a9fb598134
3 changed files with 52 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,7 +2,7 @@ height: var(--zen-toolbar-height);
@media (-moz-bool-pref: 'zen.view.hide-window-controls') {
& {
transition: height 0.2s ease-out, opacity 0.2s ease-out;
transition: height 0.2s ease, opacity 0.2s ease-out;
transition-delay: 0.05s;
}

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

@@ -371,7 +371,7 @@
padding-right: 0;
:root[zen-single-toolbar='true'] & {
margin-left: calc(var(--zen-toolbox-padding) / 2);
margin-left: var(--zen-toolbox-padding);
width: calc(100% - var(--zen-toolbox-padding));
& #urlbar:not([breakout-extend='true']) .urlbar-input-container {
padding-left: 4px;

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

@@ -93,6 +93,56 @@ var gZenCompactModeManager = {
this._evenListeners.forEach((callback) => callback());
this._disableTabsOnHoverIfConflict();
this.updateContextMenu();
this.animateCompactMode();
},
animateCompactMode() {
const isCompactMode = this.prefefence;
const canHideSidebar = Services.prefs.getBoolPref('zen.view.compact.hide-tabbar');
if (this._isAnimating) {
return;
}
this._isAnimating = true;
if (canHideSidebar && isCompactMode) {
window.requestAnimationFrame(() => {
this.sidebar.style.position = "relative";
this.sidebar.style.transition = "margin-left .3s ease";
this.sidebar.style.marginLeft = `calc(-1 * ${this.sidebar.getAttribute("width")}px)`;
this.sidebar.style.pointerEvents = "none";
this.sidebar.style.opacity = "0";
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);
});
} else if (canHideSidebar && !isCompactMode) {
// we are in compact mode and we are exiting it
this.sidebar.style.marginLeft = `calc(-1 * ${this.sidebar.getAttribute("width")}px)`;
window.requestAnimationFrame(() => {
this.sidebar.style.position = "relative";
this.sidebar.style.transition = "margin-left .3s ease";
this.sidebar.style.marginLeft = "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);
});
}
},
updateContextMenu() {