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

Refactor ZenGradientGenerator to clean up event handling and adjust color mix percentages for toolbar

Browse Source
This commit is contained in:
mr. M
2024-12-22 09:24:00 +01:00
parent 4e1737c2f5
commit 6d8673724d
1 changed files with 1 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -245,9 +245,7 @@
onThemePickerClick(event) {
event.preventDefault();
if (event.button !== 0 || this.dragging ) return;
const gradient = this.panel.querySelector('.zen-theme-picker-gradient');
const rect = gradient.getBoundingClientRect();
const padding = 90; // each side
@@ -274,7 +272,6 @@
const relativeX = event.clientX - rect.left;
const relativeY = event.clientY - rect.top;
const color = this.getColorFromPosition(relativeX, relativeY);
// Create new dot
@@ -357,7 +354,6 @@
listItems.querySelector('.zen-theme-picker-dot-custom').style.setProperty('--zen-theme-picker-dot-color', color);
listItems.querySelector('.zen-theme-picker-custom-list-item-label').textContent = color;
this.customColorList.appendChild(listItems);
}
@@ -365,11 +361,9 @@
const color = this.customColorInput.value;
if (!color) {
return;
}
// can be any color format, we just add it to the list as a dot, but hidden
const dot = document.createElement('div');
dot.classList.add('zen-theme-picker-dot', 'hidden', 'custom');
@@ -380,8 +374,6 @@
await this.updateCurrentWorkspace();
}
onThemePickerClick(event) {
event.preventDefault();
@@ -403,11 +395,9 @@
return;
}
const clickedElement = event.target;
const isExistingDot = clickedElement.classList.contains('zen-theme-picker-dot');
if (!isExistingDot && this.numberOfDots < ZenThemePicker.MAX_DOTS) {
const relativeX = event.clientX - rect.left;
const relativeY = event.clientY - rect.top;
@@ -498,7 +488,7 @@
getToolbarModifiedBase() {
return this.isDarkMode ?
'color-mix(in srgb, var(--zen-themed-toolbar-bg) 70%, #fff 30%)'
'color-mix(in srgb, var(--zen-themed-toolbar-bg) 80%, #fff 20%)'
: 'color-mix(in srgb, var(--zen-themed-toolbar-bg) 95%, #000 5%)';
}