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

Worked on animations

Browse Source
This commit is contained in:
mr. M
2024-12-16 22:40:44 +01:00
parent df4ea8794f
commit 7428568279
5 changed files with 91 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -30,21 +30,24 @@
#navigator-toolbox {
--zen-toolbox-max-width: 54px !important;
--zen-compact-float: calc(var(--zen-element-separation) - 1px);
position: absolute;
z-index: 10;
transition: transform 0.25s ease, opacity 0.1s ease-in-out;
top: 0;
bottom: var(--zen-element-separation);
opacity: 0;
padding-left: var(--zen-compact-float) !important;
padding-bottom: 0 !important;
padding-top: 0 !important;
:root[zen-single-toolbar='true'] & {
top: var(--zen-element-separation);
&:not([animate='true']) {
position: absolute;
z-index: 10;
transition: transform 0.25s ease, opacity 0.1s ease-in-out;
top: 0;
bottom: var(--zen-element-separation);
opacity: 0;
padding-left: var(--zen-compact-float) !important;
padding-bottom: 0 !important;
padding-top: 0 !important;
& #nav-bar {
margin-left: calc(var(--zen-toolbox-padding) / 2) !important;
:root[zen-single-toolbar='true'] & {
top: var(--zen-element-separation);
& #nav-bar {
margin-left: calc(var(--zen-toolbox-padding) / 2) !important;
}
}
}
}
@@ -76,7 +79,7 @@
}
}
#titlebar {
#navigator-toolbox:not([animate='true']) #titlebar {
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1);
border-radius: calc(var(--zen-border-radius) - 2px);
padding: var(--zen-toolbox-padding) !important;

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

@@ -227,11 +227,11 @@
transition: scale 0.1s ease-in-out;
&[fadein='true']:not([zen-essential='true']) {
#tabbrowser-tabs[zen-workspace-animation='previous'] & {
animation: zen-slide-in 0.2s ease-in-out;
animation: zen-slide-in 0.2s ease;
}
#tabbrowser-tabs[zen-workspace-animation='next'] & {
animation: zen-slide-in-reverse 0.2s ease-in-out;
animation: zen-slide-in-reverse 0.2s ease;
}
}

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

@@ -17,7 +17,7 @@
/* Branding */
--zen-branding-dark: #202020;
--zen-branding-coral: #F76F53;
--zen-branding-paper: #F2F0E3;
--zen-branding-paper: #ebebeb;
--zen-branding-bg: light-dark(var(--zen-branding-paper), var(--zen-branding-dark));
--zen-branding-bg-reverse: light-dark(var(--zen-branding-dark), var(--zen-branding-paper));

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

@@ -104,79 +104,82 @@ var gZenCompactModeManager = {
return;
}
this._isAnimating = true;
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";
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.removeProperty("opacity");
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) {
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(() => {
this.sidebar.style.transition = "margin .3s ease, transform .4s ease, opacity .3s ease";
// we are in compact mode and we are exiting it
// Do this so we can get the correct width ONCE compact mode styled have been applied
this.sidebar.setAttribute("animate", "true");
window.requestAnimationFrame(() => {
let sidebarWidth = Math.max(this.sidebar.getAttribute("width"), 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 = "0";
this.sidebar.style.marginLeft = `${-1 * sidebarWidth}px`;
} else {
this.sidebar.style.marginRight = "0";
this.sidebar.style.transform = "translateX(0)";
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("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");
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);
});
} else if (canHideSidebar && !isCompactMode) {
document.getElementById('browser').style.overflow = "hidden";
this.sidebar.style.position = "relative";
this.sidebar.style.left = "0";
document.getElementById('browser').style.removeProperty("overflow");
});
}, 400);
});
}
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(() => {
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";
} 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("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");
this.sidebar.removeAttribute("animate");
});
}, 400);
});
}
});
},
updateContextMenu() {

2
src/browser/components/zen-welcome/welcome.css
View File

@@ -39,7 +39,7 @@ body {
#welcome .zen-branding-title,
#thanks .zen-branding-title {
text-align: center;
font-size: 11rem;
font-size: 9rem;
}
#buttons-footer {