From 0044b0206ac4468fbc4f17651e23272b1fb5ed2c Mon Sep 17 00:00:00 2001 From: "mr. M" Date: Tue, 18 Feb 2025 13:29:58 +0100 Subject: [PATCH] Refactor zen gradient generator: update theme picker initialization and event handling, improve CSS styles, and clean up unused code. --- l10n | 2 +- .../base/content/zen-popupset.inc.xhtml | 8 ++-- .../zen-styles/zen-gradient-generator.css | 25 +++++----- .../zen-components/ZenGradientGenerator.mjs | 47 ++++++++++++++----- 4 files changed, 51 insertions(+), 31 deletions(-) diff --git a/l10n b/l10n index 81172167f..432fa8785 160000 --- a/l10n +++ b/l10n @@ -1 +1 @@ -Subproject commit 81172167fe97960d19b4819b2982049d06ea2437 +Subproject commit 432fa878526e2708244f6d01a2deee151cba3491 diff --git a/src/browser/base/content/zen-popupset.inc.xhtml b/src/browser/base/content/zen-popupset.inc.xhtml index 06ad7d787..bf2c8bcc4 100644 --- a/src/browser/base/content/zen-popupset.inc.xhtml +++ b/src/browser/base/content/zen-popupset.inc.xhtml @@ -82,7 +82,7 @@ - + @@ -97,9 +97,7 @@ - - - + @@ -108,7 +106,7 @@ - + diff --git a/src/browser/base/content/zen-styles/zen-gradient-generator.css b/src/browser/base/content/zen-styles/zen-gradient-generator.css index ba1612f63..03e9e8933 100644 --- a/src/browser/base/content/zen-styles/zen-gradient-generator.css +++ b/src/browser/base/content/zen-styles/zen-gradient-generator.css @@ -62,13 +62,6 @@ gap: 10px; } -#PanelUI-zen-gradient-generator-options { - align-items: center; - margin: auto; - height: 100%; - justify-content: center; -} - #PanelUI-zen-gradient-generator-custom-list { margin-top: 15px; @@ -180,26 +173,31 @@ position: absolute; top: 0; left: 0; - margin: var(--panel-padding); - width: calc(100% - var(--panel-padding) * 2); - height: calc(100% - var(--panel-padding) * 2); + width: 100%; + height: 100%; opacity: 0.1; } & .zen-theme-picker-dot { position: absolute; z-index: 2; - width: 28px; - height: 28px; + width: 22px; + height: 22px; 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; + border: 2px solid #fff; animation: zen-theme-picker-dot-animation 0.5s; transition: transform 0.2s; transform: translate(-50%, -50%); + &.primary { + width: 26px; + height: 26px; + border-width: 3px; + } + &[dragging='true'] { transform: scale(1.2) translate(-50%, -50%) !important; } @@ -207,7 +205,6 @@ } #PanelUI-zen-gradient-generator-color-actions { - color-scheme: dark; /* Always use light colors */ display: flex; position: absolute; bottom: 20px; diff --git a/src/browser/base/zen-components/ZenGradientGenerator.mjs b/src/browser/base/zen-components/ZenGradientGenerator.mjs index aa83a0149..751b53a0f 100644 --- a/src/browser/base/zen-components/ZenGradientGenerator.mjs +++ b/src/browser/base/zen-components/ZenGradientGenerator.mjs @@ -90,7 +90,6 @@ // Call the rest of the initialization this.initContextMenu(); - this.initThemePicker(); this._hasInitialized = true; this.onDarkModeChange(null); @@ -110,11 +109,27 @@ initThemePicker() { const themePicker = this.panel.querySelector('.zen-theme-picker-gradient'); + this._onDotMouseMove = this.onDotMouseMove.bind(this); + this._onDotMouseUp = this.onDotMouseUp.bind(this); + this._onDotMouseDown = this.onDotMouseDown.bind(this); + this._onThemePickerClick = this.onThemePickerClick.bind(this); themePicker.style.setProperty('--zen-theme-picker-gradient-image', `url(${ZenThemePicker.GRADIENT_DISPLAY_URL})`); - themePicker.addEventListener('mousemove', this.onDotMouseMove.bind(this)); - themePicker.addEventListener('mouseup', this.onDotMouseUp.bind(this)); - themePicker.addEventListener('mousedown', this.onDotMouseDown.bind(this)); - themePicker.addEventListener('click', this.onThemePickerClick.bind(this)); + document.addEventListener('mousemove', this._onDotMouseMove); + document.addEventListener('mouseup', this._onDotMouseUp); + themePicker.addEventListener('mousedown', this._onDotMouseDown); + themePicker.addEventListener('click', this._onThemePickerClick); + } + + uninitThemePicker() { + const themePicker = this.panel.querySelector('.zen-theme-picker-gradient'); + document.removeEventListener('mousemove', this._onDotMouseMove); + document.removeEventListener('mouseup', this._onDotMouseUp); + themePicker.removeEventListener('mousedown', this._onDotMouseDown); + themePicker.removeEventListener('click', this._onThemePickerClick); + this._onDotMouseMove = null; + this._onDotMouseUp = null; + this._onDotMouseDown = null; + this._onThemePickerClick = null; } calculateInitialPosition(color) { @@ -155,7 +170,9 @@ createDot(color, fromWorkspace = false) { const [r, g, b] = color.c; const dot = document.createElement('div'); - dot.classList.add('zen-theme-picker-dot'); + if (color.isPrimary) { + dot.classList.add('primary'); + } if (color.isCustom) { if (!color.c) { return; @@ -167,7 +184,6 @@ const { x, y } = this.calculateInitialPosition(color); const dotPad = this.panel.querySelector('.zen-theme-picker-gradient'); - const dot = document.createElement('div'); dot.classList.add('zen-theme-picker-dot'); dot.style.left = `${x * 100}%`; @@ -239,8 +255,9 @@ let id = this.dots.length; - if (primary === true) { + if (primary) { id = 0; + dot.classList.add('primary'); const existingPrimaryDot = this.dots.find((d) => d.ID === 0); if (existingPrimaryDot) { @@ -555,12 +572,12 @@ } onDotMouseDown(event) { - event.preventDefault(); if (event.button === 2) { return; } const draggedDot = this.dots.find((dot) => dot.Element === event.target); if (draggedDot) { + event.preventDefault(); this.dragging = true; this.draggedDot = event.target; this.draggedDot.classList.add('dragging'); @@ -689,7 +706,7 @@ getGradient(colors, forToolbar = false) { const themedColors = this.themedColors(colors); - this.useAlgo = themedColors[0].algorithm; + this.useAlgo = themedColors[0]?.algorithm ?? ''; if (themedColors.length === 0) { return forToolbar ? 'var(--zen-themed-toolbar-bg)' : 'var(--zen-themed-toolbar-bg-transparent)'; @@ -889,7 +906,7 @@ fixTheme(theme) { // add a primary color if there isn't one - if (!theme.gradientColors.find((color) => color.isPrimary)) { + if (!theme.gradientColors.find((color) => color.isPrimary) && theme.gradientColors.length > 0) { theme.gradientColors[(theme.gradientColors.length / 2) | 0].isPrimary = true; } return theme; @@ -934,6 +951,9 @@ if (primaryColor) { return primaryColor.c; } + if (colors.length === 0) { + return this.hexToRgb(this.getNativeAccentColor()); + } // Get the middle color return colors[Math.floor(colors.length / 2)].c; } @@ -975,6 +995,11 @@ if (this.updated) { await this.updateCurrentWorkspace(false); } + this.uninitThemePicker(); + } + + handlePanelOpen() { + this.initThemePicker(); } }