mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2025-09-07 03:48:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add localization label for gradient generator and adjust button dimensions

Browse Source
This commit is contained in:
mr. M
2025-02-18 23:49:58 +01:00
parent c3585ed714
commit 1cc5cd1b1d
4 changed files with 88 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
l10n

Submodule l10n updated: e5f3fe7336...ead5aeaac4

1
src/browser/base/content/zen-popupset.inc.xhtml
View File

@@ -95,6 +95,7 @@
<button id="PanelUI-zen-gradient-generator-color-toggle-algo" class="subviewbutton"> <button id="PanelUI-zen-gradient-generator-color-toggle-algo" class="subviewbutton">
</button> </button>
</div> </div>
<label data-l10n-id="zen-panel-ui-gradient-click-to-add" id="PanelUI-zen-gradient-generator-color-click-to-add"></label>
</hbox> </hbox>
<hbox id="PanelUI-zen-gradient-generator-controls"> <hbox id="PanelUI-zen-gradient-generator-controls">
<hbox id="PanelUI-zen-gradient-colors-wrapper"> <hbox id="PanelUI-zen-gradient-colors-wrapper">

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

@@ -177,7 +177,7 @@
position: absolute; position: absolute;
z-index: 2; z-index: 2;
width: 22px; width: 22px;
height: 22px; height: 20px;
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);
@@ -188,8 +188,8 @@
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
&.primary { &.primary {
width: 26px; width: 28px;
height: 26px; height: 28px;
border-width: 3px; border-width: 3px;
} }
@@ -199,6 +199,20 @@
} }
} }
#PanelUI-zen-gradient-generator-color-click-to-add {
position: absolute;
font-weight: 600;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
white-space: nowrap;
pointer-events: none;
&[hidden] {
display: none;
}
}
#PanelUI-zen-gradient-generator-color-actions { #PanelUI-zen-gradient-generator-color-actions {
display: flex; display: flex;
position: absolute; position: absolute;
@@ -224,6 +238,11 @@
&:hover { &:hover {
background: light-dark(rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.2)); background: light-dark(rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.2));
} }
&[disabled] {
opacity: 0.5;
cursor: not-allowed;
}
} }
& .separator { & .separator {

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

@@ -200,8 +200,8 @@
this.dots.push({ this.dots.push({
ID: id, ID: id,
Element: dot, element: dot,
Position: { x: null, y: null }, // at some point possition should instead be stored as percentege just so that the size of the color picker does not matter. position: { x: null, y: null }, // at some point possition should instead be stored as percentege just so that the size of the color picker does not matter.
}); });
} }
if (!fromWorkspace) { if (!fromWorkspace) {
@@ -266,7 +266,7 @@
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;
existingPrimaryDot.Element.classList.remove('primary'); existingPrimaryDot.element.classList.remove('primary');
} }
dot.classList.add('primary'); dot.classList.add('primary');
} }
@@ -276,8 +276,8 @@
this.dots.push({ this.dots.push({
ID: id, ID: id,
Element: dot, element: dot,
Position: { x: relativePosition.x, y: relativePosition.y }, position: { x: relativePosition.x, y: relativePosition.y },
}); });
} }
@@ -290,6 +290,10 @@
{ type: 'floating', angles: [] }, { type: 'floating', angles: [] },
]; ];
if (dots.length === 0) {
return [];
}
function getColorHarmonyType(numDots, dots) { function getColorHarmonyType(numDots, dots) {
if (useHarmony !== '') { if (useHarmony !== '') {
const selectedHarmony = colorHarmonies.find((harmony) => harmony.type === useHarmony); const selectedHarmony = colorHarmonies.find((harmony) => harmony.type === useHarmony);
@@ -352,15 +356,15 @@
if (!primaryDot) return []; if (!primaryDot) return [];
if (action === 'add' && this.dots.length) { if (action === 'add' && this.dots.length) {
updatedDots.push({ ID: this.dots.length, Position: centerPosition }); updatedDots.push({ ID: this.dots.length, position: centerPosition });
} }
const baseAngle = getAngleFromPosition(primaryDot.Position, centerPosition); const baseAngle = getAngleFromPosition(primaryDot.position, centerPosition);
let distance = getDistanceFromCenter(primaryDot.Position, centerPosition); let distance = getDistanceFromCenter(primaryDot.position, centerPosition);
const radius = (rect.width - padding) / 2; const radius = (rect.width - padding) / 2;
if (distance > radius) distance = radius; if (distance > radius) distance = radius;
if (this.dots.length > 0) { if (this.dots.length > 0) {
updatedDots = [{ ID: 0, Position: primaryDot.Position }]; updatedDots = [{ ID: 0, position: primaryDot.position }];
} }
harmonyAngles.angles.forEach((angleOffset, index) => { harmonyAngles.angles.forEach((angleOffset, index) => {
@@ -372,7 +376,7 @@
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;
@@ -384,25 +388,25 @@
const dotPad = this.panel.querySelector('.zen-theme-picker-gradient'); const dotPad = this.panel.querySelector('.zen-theme-picker-gradient');
const rect = dotPad.getBoundingClientRect(); const rect = dotPad.getBoundingClientRect();
this.dots.forEach((dot) => { this.dots.forEach((dot) => {
dot.Element.style.zIndex = 999; dot.element.style.zIndex = 999;
let pixelX, pixelY; let pixelX, pixelY;
const rect = this.panel.querySelector('.zen-theme-picker-gradient').getBoundingClientRect(); const rect = this.panel.querySelector('.zen-theme-picker-gradient').getBoundingClientRect();
if (dot.Position.x === null) { if (dot.position.x === null) {
const leftPercentage = parseFloat(dot.Element.style.left) / 100; const leftPercentage = parseFloat(dot.element.style.left) / 100;
const topPercentage = parseFloat(dot.Element.style.top) / 100; const topPercentage = parseFloat(dot.element.style.top) / 100;
pixelX = leftPercentage * rect.width; pixelX = leftPercentage * rect.width;
pixelY = topPercentage * rect.height; pixelY = topPercentage * rect.height;
} else { } else {
pixelX = dot.Position.x; pixelX = dot.position.x;
pixelY = dot.Position.y; pixelY = dot.position.y;
} }
const colorFromPos = this.getColorFromPosition(pixelX, pixelY); const colorFromPos = this.getColorFromPosition(pixelX, pixelY);
dot.Element.style.setProperty( dot.element.style.setProperty(
'--zen-theme-picker-dot-color', '--zen-theme-picker-dot-color',
`rgb(${colorFromPos[0]}, ${colorFromPos[1]}, ${colorFromPos[2]})` `rgb(${colorFromPos[0]}, ${colorFromPos[1]}, ${colorFromPos[2]})`
); );
@@ -413,9 +417,9 @@
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( existingPrimaryDot.element.style.setProperty(
'--zen-theme-picker-dot-color', '--zen-theme-picker-dot-color',
`rgb(${colorFromPos[0]}, ${colorFromPos[1]}, ${colorFromPos[2]})` `rgb(${colorFromPos[0]}, ${colorFromPos[1]}, ${colorFromPos[2]})`
); );
@@ -425,21 +429,21 @@
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( existingDot.element.style.setProperty(
'--zen-theme-picker-dot-color', '--zen-theme-picker-dot-color',
`rgb(${colorFromPos[0]}, ${colorFromPos[1]}, ${colorFromPos[2]})` `rgb(${colorFromPos[0]}, ${colorFromPos[1]}, ${colorFromPos[2]})`
); );
if (!this.dragging) { if (!this.dragging) {
gZenUIManager.motion.animate( gZenUIManager.motion.animate(
existingDot.Element, existingDot.element,
{ {
left: `${dotPosition.Position.x}px`, left: `${dotPosition.position.x}px`,
top: `${dotPosition.Position.y}px`, top: `${dotPosition.position.y}px`,
}, },
{ {
duration: 0.4, duration: 0.4,
@@ -449,7 +453,7 @@
); );
} }
} else { } else {
this.spawnDot(dotPosition.Position); this.spawnDot(dotPosition.position);
} }
}); });
} }
@@ -469,14 +473,14 @@
if (this.dots.length === 0) return; if (this.dots.length === 0) return;
const lastDot = this.dots.pop(); const lastDot = this.dots.pop();
lastDot.Element.remove(); lastDot.element.remove();
this.dots.forEach((dot, index) => { this.dots.forEach((dot, index) => {
dot.ID = index; dot.ID = index;
if (index === 0) { if (index === 0) {
dot.Element.classList.add('primary'); dot.element.classList.add('primary');
} else { } else {
dot.Element.classList.remove('primary'); dot.element.classList.remove('primary');
} }
}); });
@@ -524,13 +528,13 @@
let clickedDot = null; let clickedDot = null;
const existingPrimaryDot = this.dots.find((d) => d.ID === 0); const existingPrimaryDot = this.dots.find((d) => d.ID === 0);
clickedDot = this.dots.find((dot) => dot.Element === clickedElement); clickedDot = this.dots.find((dot) => dot.element === clickedElement);
if (clickedDot) { if (clickedDot) {
// TODO: this doesnt work and needs to be fixed // TODO: this doesnt work and needs to be fixed
existingPrimaryDot.ID = clickedDot.ID; existingPrimaryDot.ID = clickedDot.ID;
clickedDot.ID = 0; clickedDot.ID = 0;
clickedDot.Element.style.zIndex = 999; clickedDot.element.style.zIndex = 999;
let colorPositions = this.calculateCompliments(this.dots, 'update', this.useAlgo); let colorPositions = this.calculateCompliments(this.dots, 'update', this.useAlgo);
this.handleColorPositions(colorPositions); this.handleColorPositions(colorPositions);
@@ -556,9 +560,9 @@
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,
}; };
@@ -568,10 +572,10 @@
this.updateCurrentWorkspace(true); this.updateCurrentWorkspace(true);
gZenUIManager.motion.animate( gZenUIManager.motion.animate(
existingPrimaryDot.Element, existingPrimaryDot.element,
{ {
left: `${existingPrimaryDot.Position.x}px`, left: `${existingPrimaryDot.position.x}px`,
top: `${existingPrimaryDot.Position.y}px`, top: `${existingPrimaryDot.position.y}px`,
}, },
{ {
duration: 0.4, duration: 0.4,
@@ -586,7 +590,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) {
event.preventDefault(); event.preventDefault();
this.dragging = true; this.dragging = true;
@@ -606,7 +610,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();
this.dots.sort((a, b) => a.ID - b.ID); this.dots.sort((a, b) => a.ID - b.ID);
@@ -615,9 +619,9 @@
this.dots.forEach((dot, index) => { this.dots.forEach((dot, index) => {
dot.ID = index; dot.ID = index;
if (index === 0) { if (index === 0) {
dot.Element.classList.add('primary'); dot.element.classList.add('primary');
} else { } else {
dot.Element.classList.remove('primary'); dot.element.classList.remove('primary');
} }
}); });
@@ -669,10 +673,10 @@
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,
}; };
@@ -887,6 +891,18 @@
browser.gZenThemePicker.currentRotation = workspaceTheme.rotation ?? 45; browser.gZenThemePicker.currentRotation = workspaceTheme.rotation ?? 45;
browser.gZenThemePicker.currentTexture = workspaceTheme.texture ?? 0; browser.gZenThemePicker.currentTexture = workspaceTheme.texture ?? 0;
for (const button of browser.document.querySelectorAll('#PanelUI-zen-gradient-generator-color-actions button')) {
// disable if there are no buttons
button.disabled =
workspaceTheme.gradientColors.length === 0 ||
(button.id === 'PanelUI-zen-gradient-generator-color-add'
? workspaceTheme.gradientColors.length >= ZenThemePicker.MAX_DOTS
: false);
}
document
.getElementById('PanelUI-zen-gradient-generator-color-click-to-add')
.toggleAttribute('hidden', workspaceTheme.gradientColors.length > 0);
browser.document.getElementById('PanelUI-zen-gradient-generator-opacity').value = browser.document.getElementById('PanelUI-zen-gradient-generator-opacity').value =
browser.gZenThemePicker.currentOpacity; browser.gZenThemePicker.currentOpacity;
browser.document.getElementById('PanelUI-zen-gradient-generator-texture').value = browser.document.getElementById('PanelUI-zen-gradient-generator-texture').value =