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

feat: Added experimental (unfinished) compact mode animation when hovering, b=(no-bug), c=compact-mode

Browse Source
This commit is contained in:
Mr. M
2025-05-20 22:10:48 +02:00
parent e3a341c88d
commit b18e946869
2 changed files with 37 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/zen/compact-mode/ZenCompactMode.mjs
View File

@@ -260,6 +260,7 @@ var gZenCompactModeManager = {
this.sidebar.style.removeProperty('transform');
window.requestAnimationFrame(() => {
let sidebarWidth = this.getAndApplySidebarWidth();
const elementSeparation = ZenThemeModifier.elementSeparation;
if (!canAnimate) {
this.sidebar.removeAttribute('animate');
document.documentElement.removeAttribute('zen-compact-animating');
@@ -267,11 +268,44 @@ var gZenCompactModeManager = {
this.getAndApplySidebarWidth({});
this._ignoreNextResize = true;
// TODO: Work on this a bit more, needs polishing
if (lazyCompactMode.COMPACT_MODE_CAN_ANIMATE_SIDEBAR && false) {
gZenUIManager.motion
.animate(
[
this.sidebar,
...(gZenVerticalTabsManager._hasSetSingleToolbar &&
!gURLBar.hasAttribute('zen-floating-urlbar')
? [gURLBar.textbox]
: []),
],
{
transform: [
`translateY(${(isCompactMode ? -1 : 1) * elementSeparation / 2}px) translateX(${
isCompactMode
? (this.sidebarIsOnRight ? elementSeparation : -elementSeparation) / 2
: (this.sidebarIsOnRight ? -elementSeparation : elementSeparation) / 2
}px)`,
`translateY(0px) translateX(0px)`,
],
},
{
ease: 'easeIn',
type: 'spring',
bounce: 0,
duration: 0.2,
}
)
.then(() => {
this.sidebar.style.transform = '';
gURLBar.textbox.style.transform = '';
});
}
resolve();
return;
}
if (canHideSidebar && isCompactMode) {
const elementSeparation = ZenThemeModifier.elementSeparation;
if (document.documentElement.hasAttribute('zen-sidebar-expanded')) {
sidebarWidth -= 0.5 * splitterWidth;
if (elementSeparation < splitterWidth) {

2
src/zen/compact-mode/zen-compact-mode.css
View File

@@ -172,6 +172,7 @@
z-index: 0;
opacity: var(--zen-grainy-background-opacity, 0);
mix-blend-mode: overlay;
transition: opacity 0.3s ease-in-out;
}
}
@@ -402,6 +403,7 @@
z-index: 0;
opacity: var(--zen-grainy-background-opacity, 0);
mix-blend-mode: overlay;
transition: opacity 0.3s ease-in-out;
}
}
border-top-width: 1px;