mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2025-10-16 14:56:14 +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 { & .zen-theme-picker-dot {
position: absolute; position: absolute;
z-index: 2; z-index: 2;
width: 28px; width: 28px;
height: 28px; height: 28px;
border-radius: 50%; border-radius: 50%;
background: var(--zen-theme-picker-dot-color); background: var(--zen-theme-picker-dot-color);
box-shadow: 0 0 0 2px var(--zen-themed-toolbar-bg); box-shadow: 0 0 0 2px var(--zen-themed-toolbar-bg);
cursor: pointer; cursor: pointer;
border: 3px solid #fff; border: 3px solid #fff;
animation: zen-theme-picker-dot-animation 0.5s; animation: zen-theme-picker-dot-animation 0.5s;
transition: transform 0.2s; transition: transform 0.2s;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
&[dragging='true'] { &[dragging='true'] {
transform: scale(1.2) translate(-50%, -50%) !important; transform: scale(1.2) translate(-50%, -50%) !important;

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

@@ -174,12 +174,11 @@
if (event.key === 'Enter') { if (event.key === 'Enter') {
event.preventDefault(); event.preventDefault();
this.addCustomColor(); this.addCustomColor();
let colorPositions = this.calculateCompliments(this.dots); let colorPositions = this.calculateCompliments(this.dots);
this.handleColorPositions(colorPositions); this.handleColorPositions(colorPositions);
} }
} }
initThemePicker() { initThemePicker() {
const themePicker = this.panel.querySelector('.zen-theme-picker-gradient'); const themePicker = this.panel.querySelector('.zen-theme-picker-gradient');
@@ -242,19 +241,19 @@
const dot = document.createElement('div'); const dot = document.createElement('div');
dot.classList.add('zen-theme-picker-dot'); dot.classList.add('zen-theme-picker-dot');
dot.style.left = `${x * 100}%`; dot.style.left = `${x * 100}%`;
dot.style.top = `${y * 100}%`; dot.style.top = `${y * 100}%`;
dotPad.appendChild(dot); dotPad.appendChild(dot);
let id = this.dots.length; let id = this.dots.length;
dot.style.setProperty('--zen-theme-picker-dot-color', `rgb(${r}, ${g}, ${b})`); dot.style.setProperty('--zen-theme-picker-dot-color', `rgb(${r}, ${g}, ${b})`);
this.dots.push({ this.dots.push({
ID: id, ID: id,
Element: dot, 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) { if (!fromWorkspace) {
@@ -307,13 +306,13 @@
dot.style.left = `${relativePosition.x}px`; dot.style.left = `${relativePosition.x}px`;
dot.style.top = `${relativePosition.y}px`; dot.style.top = `${relativePosition.y}px`;
dotPad.appendChild(dot); dotPad.appendChild(dot);
let id = this.dots.length; let id = this.dots.length;
if (primary === true) { if (primary === true) {
id = 0 id = 0;
const existingPrimaryDot = this.dots.find((d) => d.ID === 0); const existingPrimaryDot = this.dots.find((d) => d.ID === 0);
if (existingPrimaryDot) { if (existingPrimaryDot) {
existingPrimaryDot.ID = this.dots.length; existingPrimaryDot.ID = this.dots.length;
@@ -322,12 +321,11 @@
const colorFromPos = this.getColorFromPosition(relativePosition.x, relativePosition.y); const colorFromPos = this.getColorFromPosition(relativePosition.x, relativePosition.y);
dot.style.setProperty('--zen-theme-picker-dot-color', `rgb(${colorFromPos[0]}, ${colorFromPos[1]}, ${colorFromPos[2]})`); dot.style.setProperty('--zen-theme-picker-dot-color', `rgb(${colorFromPos[0]}, ${colorFromPos[1]}, ${colorFromPos[2]})`);
this.dots.push({ this.dots.push({
ID: id, ID: id,
Element: dot, Element: dot,
Position: { x: parseFloat(dot.style.left), y: parseFloat(dot.style.top) } Position: { x: parseFloat(dot.style.left), y: parseFloat(dot.style.top) },
}); });
} }
@@ -377,71 +375,76 @@
if (!primaryDot) return []; if (!primaryDot) return [];
const baseAngle = getAngleFromPosition(primaryDot.Position, centerPosition); const baseAngle = getAngleFromPosition(primaryDot.Position, centerPosition);
let distance = getDistanceFromCenter(primaryDot.Position, centerPosition); let distance = getDistanceFromCenter(primaryDot.Position, centerPosition);
if (distance > radius) { if (distance > radius) {
distance = radius; distance = radius;
} }
dots.sort((a, b) => a.ID - b.ID); dots.sort((a, b) => a.ID - b.ID);
let updatedDots = []; let updatedDots = [];
harmonyAngles.angles.forEach((angleOffset, index) => { harmonyAngles.angles.forEach((angleOffset, index) => {
let newAngle = (baseAngle + angleOffset) % 360; let newAngle = (baseAngle + angleOffset) % 360;
let radian = (newAngle * Math.PI) / 180; let radian = (newAngle * Math.PI) / 180;
let newPosition = { let newPosition = {
x: centerPosition.x + distance * Math.cos(radian), x: centerPosition.x + distance * Math.cos(radian),
y: centerPosition.y + distance * Math.sin(radian), y: centerPosition.y + distance * Math.sin(radian),
}; };
updatedDots.push({ID: index + 1, Position: newPosition}); updatedDots.push({ ID: index + 1, Position: newPosition });
}); });
return updatedDots; return updatedDots;
} }
handleColorPositions(colorPositions) { handleColorPositions(colorPositions) {
colorPositions.sort((a, b) => a.ID - b.ID); colorPositions.sort((a, b) => a.ID - b.ID);
const existingPrimaryDot = this.dots.find((d) => d.ID === 0); const existingPrimaryDot = this.dots.find((d) => d.ID === 0);
if (existingPrimaryDot) { if (existingPrimaryDot) {
existingPrimaryDot.Element.style.zIndex = 999; existingPrimaryDot.Element.style.zIndex = 999;
const colorFromPos = this.getColorFromPosition(existingPrimaryDot.Position.x, existingPrimaryDot.Position.y); 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 => { colorPositions.forEach((dotPosition) => {
const existingDot = this.dots.find(dot => dot.ID === dotPosition.ID); const existingDot = this.dots.find((dot) => dot.ID === dotPosition.ID);
if (existingDot) { if (existingDot) {
existingDot.Position = dotPosition.Position; existingDot.Position = dotPosition.Position;
existingDot.Element.style.left = `${dotPosition.Position.x}px`; existingDot.Element.style.left = `${dotPosition.Position.x}px`;
existingDot.Element.style.top = `${dotPosition.Position.y}px`; existingDot.Element.style.top = `${dotPosition.Position.y}px`;
const colorFromPos = this.getColorFromPosition(dotPosition.Position.x, dotPosition.Position.y); 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',
if (!this.dragging) { `rgb(${colorFromPos[0]}, ${colorFromPos[1]}, ${colorFromPos[2]})`
gZenUIManager.motion.animate(
existingDot.Element,
{
left: `${dotPosition.Position.x}px`,
top: `${dotPosition.Position.y}px`,
},
{
duration: 0.4,
type: 'spring',
bounce: 0.3,
}
); );
}
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,
}
);
}
} else { } else {
this.spawnDot(dotPosition.Position); this.spawnDot(dotPosition.Position);
} }
}); });
} }
onThemePickerClick(event) { onThemePickerClick(event) {
event.preventDefault(); event.preventDefault();
@@ -476,27 +479,24 @@
if (distance > radius) { if (distance > radius) {
return; return;
} }
const relativeX = event.clientX - rect.left; const relativeX = event.clientX - rect.left;
const relativeY = event.clientY - rect.top; const relativeY = event.clientY - rect.top;
if (!clickedDot && this.dots.length < 1) {
if (!clickedDot && this.dots.length < 1) {
if (this.dots.length === 0) { if (this.dots.length === 0) {
this.spawnDot({x: relativeX, y: relativeY}, true); this.spawnDot({ x: relativeX, y: relativeY }, true);
} else {
this.spawnDot({ x: relativeX, y: relativeY });
} }
else{
this.spawnDot({x: relativeX, y: relativeY});
}
this.updateCurrentWorkspace(true); this.updateCurrentWorkspace(true);
} } else if (!clickedDot && existingPrimaryDot) {
else if (!clickedDot && existingPrimaryDot) {
existingPrimaryDot.Element.style.left = `${relativeX}px`; existingPrimaryDot.Element.style.left = `${relativeX}px`;
existingPrimaryDot.Element.style.top = `${relativeY}px`; existingPrimaryDot.Element.style.top = `${relativeY}px`;
existingPrimaryDot.Position = { existingPrimaryDot.Position = {
x: relativeX, x: relativeX,
y: relativeY y: relativeY,
}; };
let colorPositions = this.calculateCompliments(this.dots, true); let colorPositions = this.calculateCompliments(this.dots, true);
@@ -513,8 +513,8 @@
type: 'spring', type: 'spring',
bounce: 0.3, bounce: 0.3,
} }
); );
} }
} }
onDotMouseDown(event) { onDotMouseDown(event) {
@@ -522,7 +522,7 @@
if (event.button === 2) { if (event.button === 2) {
return; return;
} }
const draggedDot = this.dots.find(dot => dot.Element === event.target) const draggedDot = this.dots.find((dot) => dot.Element === event.target);
if (draggedDot) { if (draggedDot) {
this.dragging = true; this.dragging = true;
this.draggedDot = event.target; this.draggedDot = event.target;
@@ -541,7 +541,7 @@
if (!event.target.classList.contains('zen-theme-picker-dot')) { if (!event.target.classList.contains('zen-theme-picker-dot')) {
return; return;
} }
this.dots = this.dots.filter(dot => dot.Element !== event.target); this.dots = this.dots.filter((dot) => dot.Element !== event.target);
event.target.remove(); event.target.remove();
let colorPositions = this.calculateCompliments(this.dots, true); let colorPositions = this.calculateCompliments(this.dots, true);
this.handleColorPositions(colorPositions); this.handleColorPositions(colorPositions);
@@ -566,7 +566,6 @@
} }
} }
onDotMouseMove(event) { onDotMouseMove(event) {
if (this.dragging) { if (this.dragging) {
event.preventDefault(); event.preventDefault();
@@ -591,17 +590,17 @@
// set the location of the dot in pixels // set the location of the dot in pixels
const relativeX = pixelX - rect.left; const relativeX = pixelX - rect.left;
const relativeY = pixelY - rect.top; 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.left = `${relativeX}px`;
draggedDot.Element.style.top = `${relativeY}px`; draggedDot.Element.style.top = `${relativeY}px`;
draggedDot.Position = { draggedDot.Position = {
x: relativeX, x: relativeX,
y: relativeY y: relativeY,
}; };
let colorPositions = this.calculateCompliments(this.dots, true); let colorPositions = this.calculateCompliments(this.dots, true);
this.handleColorPositions(colorPositions); this.handleColorPositions(colorPositions);
this.updateCurrentWorkspace(); this.updateCurrentWorkspace();
} }
} }