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

fixed formatting

Browse Source
This commit is contained in:
neurokitti
2025-02-16 02:24:05 -06:00
parent a0d2770d70
commit c71cea87cc
2 changed files with 72 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/browser/base/content/zen-styles/zen-gradient-generator.css
View File

@@ -237,19 +237,18 @@
}
& .zen-theme-picker-dot {
position: absolute;
z-index: 2;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--zen-theme-picker-dot-color);
box-shadow: 0 0 0 2px var(--zen-themed-toolbar-bg);
cursor: pointer;
border: 3px solid #fff;
animation: zen-theme-picker-dot-animation 0.5s;
transition: transform 0.2s;
transform: translate(-50%, -50%);
position: absolute;
z-index: 2;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--zen-theme-picker-dot-color);
box-shadow: 0 0 0 2px var(--zen-themed-toolbar-bg);
cursor: pointer;
border: 3px solid #fff;
animation: zen-theme-picker-dot-animation 0.5s;
transition: transform 0.2s;
transform: translate(-50%, -50%);
&[dragging='true'] {
transform: scale(1.2) translate(-50%, -50%) !important;

81
src/browser/base/zen-components/ZenGradientGenerator.mjs
View File

@@ -180,7 +180,6 @@
}
}
initThemePicker() {
const themePicker = this.panel.querySelector('.zen-theme-picker-gradient');
themePicker.style.setProperty('--zen-theme-picker-gradient-image', `url(${ZenThemePicker.GRADIENT_DISPLAY_URL})`);
@@ -254,7 +253,7 @@
this.dots.push({
ID: id,
Element: dot,
Position: { x: parseFloat(dot.style.left), y: parseFloat(dot.style.top) }
Position: { x: parseFloat(dot.style.left), y: parseFloat(dot.style.top) },
});
}
if (!fromWorkspace) {
@@ -313,7 +312,7 @@
let id = this.dots.length;
if (primary === true) {
id = 0
id = 0;
const existingPrimaryDot = this.dots.find((d) => d.ID === 0);
if (existingPrimaryDot) {
existingPrimaryDot.ID = this.dots.length;
@@ -323,11 +322,10 @@
const colorFromPos = this.getColorFromPosition(relativePosition.x, relativePosition.y);
dot.style.setProperty('--zen-theme-picker-dot-color', `rgb(${colorFromPos[0]}, ${colorFromPos[1]}, ${colorFromPos[2]})`);
this.dots.push({
ID: id,
Element: dot,
Position: { x: parseFloat(dot.style.left), y: parseFloat(dot.style.top) }
Position: { x: parseFloat(dot.style.left), y: parseFloat(dot.style.top) },
});
}
@@ -396,7 +394,7 @@
y: centerPosition.y + distance * Math.sin(radian),
};
updatedDots.push({ID: index + 1, Position: newPosition});
updatedDots.push({ ID: index + 1, Position: newPosition });
});
return updatedDots;
@@ -410,39 +408,44 @@
if (existingPrimaryDot) {
existingPrimaryDot.Element.style.zIndex = 999;
const colorFromPos = this.getColorFromPosition(existingPrimaryDot.Position.x, existingPrimaryDot.Position.y);
existingPrimaryDot.Element.style.setProperty('--zen-theme-picker-dot-color', `rgb(${colorFromPos[0]}, ${colorFromPos[1]}, ${colorFromPos[2]})`);
existingPrimaryDot.Element.style.setProperty(
'--zen-theme-picker-dot-color',
`rgb(${colorFromPos[0]}, ${colorFromPos[1]}, ${colorFromPos[2]})`
);
}
colorPositions.forEach(dotPosition => {
const existingDot = this.dots.find(dot => dot.ID === dotPosition.ID);
colorPositions.forEach((dotPosition) => {
const existingDot = this.dots.find((dot) => dot.ID === dotPosition.ID);
if (existingDot) {
existingDot.Position = dotPosition.Position;
existingDot.Element.style.left = `${dotPosition.Position.x}px`;
existingDot.Element.style.top = `${dotPosition.Position.y}px`;
const colorFromPos = this.getColorFromPosition(dotPosition.Position.x, dotPosition.Position.y);
existingDot.Element.style.setProperty('--zen-theme-picker-dot-color', `rgb(${colorFromPos[0]}, ${colorFromPos[1]}, ${colorFromPos[2]})`);
existingDot.Element.style.setProperty(
'--zen-theme-picker-dot-color',
`rgb(${colorFromPos[0]}, ${colorFromPos[1]}, ${colorFromPos[2]})`
);
if (!this.dragging) {
gZenUIManager.motion.animate(
existingDot.Element,
{
left: `${dotPosition.Position.x}px`,
top: `${dotPosition.Position.y}px`,
},
{
duration: 0.4,
type: 'spring',
bounce: 0.3,
}
);
}
gZenUIManager.motion.animate(
existingDot.Element,
{
left: `${dotPosition.Position.x}px`,
top: `${dotPosition.Position.y}px`,
},
{
duration: 0.4,
type: 'spring',
bounce: 0.3,
}
);
}
} else {
this.spawnDot(dotPosition.Position);
}
});
}
onThemePickerClick(event) {
event.preventDefault();
@@ -481,22 +484,19 @@
const relativeY = event.clientY - rect.top;
if (!clickedDot && this.dots.length < 1) {
if (this.dots.length === 0) {
this.spawnDot({x: relativeX, y: relativeY}, true);
}
else{
this.spawnDot({x: relativeX, y: relativeY});
this.spawnDot({ x: relativeX, y: relativeY }, true);
} else {
this.spawnDot({ x: relativeX, y: relativeY });
}
this.updateCurrentWorkspace(true);
}
else if (!clickedDot && existingPrimaryDot) {
} else if (!clickedDot && existingPrimaryDot) {
existingPrimaryDot.Element.style.left = `${relativeX}px`;
existingPrimaryDot.Element.style.top = `${relativeY}px`;
existingPrimaryDot.Position = {
x: relativeX,
y: relativeY
x: relativeX,
y: relativeY,
};
let colorPositions = this.calculateCompliments(this.dots, true);
@@ -513,8 +513,8 @@
type: 'spring',
bounce: 0.3,
}
);
}
);
}
}
onDotMouseDown(event) {
@@ -522,7 +522,7 @@
if (event.button === 2) {
return;
}
const draggedDot = this.dots.find(dot => dot.Element === event.target)
const draggedDot = this.dots.find((dot) => dot.Element === event.target);
if (draggedDot) {
this.dragging = true;
this.draggedDot = event.target;
@@ -541,7 +541,7 @@
if (!event.target.classList.contains('zen-theme-picker-dot')) {
return;
}
this.dots = this.dots.filter(dot => dot.Element !== event.target);
this.dots = this.dots.filter((dot) => dot.Element !== event.target);
event.target.remove();
let colorPositions = this.calculateCompliments(this.dots, true);
this.handleColorPositions(colorPositions);
@@ -566,7 +566,6 @@
}
}
onDotMouseMove(event) {
if (this.dragging) {
event.preventDefault();
@@ -592,12 +591,12 @@
const relativeX = pixelX - rect.left;
const relativeY = pixelY - rect.top;
const draggedDot = this.dots.find(dot => dot.Element === this.draggedDot)
const draggedDot = this.dots.find((dot) => dot.Element === this.draggedDot);
draggedDot.Element.style.left = `${relativeX}px`;
draggedDot.Element.style.top = `${relativeY}px`;
draggedDot.Position = {
x: relativeX,
y: relativeY
x: relativeX,
y: relativeY,
};
let colorPositions = this.calculateCompliments(this.dots, true);
this.handleColorPositions(colorPositions);