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