mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2026-04-01 05:11:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: Add grey-out effect for inactive windows and adjust opacity settings, b=no-bug, c=workspaces, styles

Browse Source
This commit is contained in:
mr. m
2025-06-27 16:39:23 +02:00
parent 84183910b7
commit 5930552cdc
8 changed files with 36 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/zen/workspaces/ZenWorkspaces.mjs
View File

@@ -706,10 +706,12 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
event.stopPropagation();
const delta = event.delta * 300;
const stripWidth = document.getElementById('tabbrowser-tabs').getBoundingClientRect().width;
const stripWidth =
document.getElementById('navigator-toolbox').getBoundingClientRect().width +
document.getElementById('zen-sidebar-splitter').getBoundingClientRect().width * 2;
let translateX = this._swipeState.lastDelta + delta;
// Add a force multiplier as we are translating the strip depending on how close to the edge we are
let forceMultiplier = Math.min(1, 1 - Math.abs(translateX) / (stripWidth * 4.5)); // 4.5 instead of 4 to add a bit of a buffer
let forceMultiplier = Math.min(1, 1 - Math.abs(translateX) / (stripWidth * 5)); // 4.5 instead of 4 to add a bit of a buffer
if (forceMultiplier > 0.5) {
translateX *= forceMultiplier;
this._swipeState.lastDelta = delta + (translateX - delta) * 0.5;
@@ -1672,20 +1674,15 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
if (nextWorkspace) {
const [nextGradient, nextGrain] =
await gZenThemePicker.getGradientForWorkspace(nextWorkspace);
const [existingBackground, existingGrain] =
await gZenThemePicker.getGradientForWorkspace(workspace);
const [_, existingGrain] = await gZenThemePicker.getGradientForWorkspace(workspace);
const percentage = Math.abs(offsetPixels) / 200;
await new Promise((resolve) => {
requestAnimationFrame(() => {
document.documentElement.style.setProperty('--zen-background-opacity', percentage);
document.documentElement.style.setProperty('--zen-background-opacity', 1 - percentage);
if (!this._hasAnimatedBackgrounds) {
this._hasAnimatedBackgrounds = true;
document.documentElement.style.setProperty(
'--zen-main-browser-background-old',
existingBackground
);
document.documentElement.style.setProperty(
'--zen-main-browser-background',
nextGradient
);
}
@@ -1783,6 +1780,7 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
if (previousBackgroundOpacity == 1 || !previousBackgroundOpacity) {
previousBackgroundOpacity = 0;
}
previousBackgroundOpacity = 1 - previousBackgroundOpacity;
gZenThemePicker.previousBackgroundOpacity = previousBackgroundOpacity;
await new Promise((resolve) => {
requestAnimationFrame(() => {