mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2025-10-14 22:06:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor zen gradient generator: update theme picker initialization and event handling, improve CSS styles, and clean up unused code.

Browse Source
This commit is contained in:
mr. M
2025-02-18 13:29:58 +01:00
parent 82a98b8dd3
commit 0044b0206a
4 changed files with 51 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
l10n

Submodule l10n updated: 81172167fe...432fa87852

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

@@ -82,7 +82,7 @@
</panel>
</html:template>
<panel flip="side" type="arrow" orient="vertical" id="PanelUI-zen-gradient-generator" position="bottomright topright" mainview="true" side="left" onpopuphidden="gZenThemePicker.handlePanelClose();">
<panel flip="side" type="arrow" orient="vertical" id="PanelUI-zen-gradient-generator" position="bottomright topright" mainview="true" side="left" onpopuphidden="gZenThemePicker.handlePanelClose();" onpopupshowing="gZenThemePicker.handlePanelOpen();">
<panelmultiview id="PanelUI-zen-gradient-generator-multiview" mainViewId="PanelUI-zen-gradient-generator-view">
<panelview id="PanelUI-zen-gradient-generator-view" class="PanelUI-subView zen-theme-picker" role="document" mainview-with-header="true" has-custom-header="true">
<hbox class="zen-theme-picker-gradient">
@@ -97,9 +97,7 @@
</div>
</hbox>
<hbox id="PanelUI-zen-gradient-generator-controls">
<vbox id="PanelUI-zen-gradient-generator-options">
</vbox>
<vbox id="PanelUI-zen-gradient-colors-wrapper">
<hbox id="PanelUI-zen-gradient-colors-wrapper">
<vbox>
<label data-l10n-id="zen-panel-ui-gradient-generator-opacity-text"></label>
<html:input type="range" min="0" max="1" value="0.5" step="0.05" oninput="gZenThemePicker.onOpacityChange(event);" id="PanelUI-zen-gradient-generator-opacity" />
@@ -108,7 +106,7 @@
<label data-l10n-id="zen-panel-ui-gradient-generator-texture-text"></label>
<html:input type="range" min="0" max="1" value="0.5" step="0.05" oninput="gZenThemePicker.onTextureChange(event);" id="PanelUI-zen-gradient-generator-texture" />
</vbox>
</vbox>
</hbox>
</hbox>
<vbox id="PanelUI-zen-gradient-generator-custom-colors">
<vbox id="zen-theme-picker-color">

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

@@ -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;

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

@@ -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();
}
}