mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2026-01-30 08:34:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

Remove unused gradient display image and implement predefined color options in gradient generator

Browse Source
This commit is contained in:
mr. M
2025-02-19 13:04:18 +01:00
parent 1cc5cd1b1d
commit 93df13ff78
5 changed files with 100 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/browser/base/content/zen-assets.jar.inc.mn
View File

@@ -57,7 +57,6 @@
# Images
content/browser/zen-images/gradient.png (content/zen-images/gradient.png)
content/browser/zen-images/gradient-display.png (content/zen-images/gradient-display.png)
content/browser/zen-images/brand-header.svg (content/zen-images/brand-header.svg)
content/browser/zen-images/layouts/collapsed.png (content/zen-images/layouts/collapsed.png)
content/browser/zen-images/layouts/multiple-toolbar.png (content/zen-images/layouts/multiple-toolbar.png)

BIN
src/browser/base/content/zen-images/gradient-display.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 422 KiB

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

@@ -85,6 +85,20 @@
<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>
<hbox id="PanelUI-zen-gradient-generator-predefined">
<box data-algo="analogous" data-num-dots="3" data-position="219,99" style="background: linear-gradient(135deg, rgb(117, 255, 136), rgb(60, 66, 58));"></box>
<box data-algo="analogous" data-num-dots="3" data-position="167,201" style="background: linear-gradient(135deg, #a03fe0, #382b5c);"></box>
<box data-algo="analogous" data-num-dots="3" data-position="90,170" style="background: linear-gradient(135deg, #c57aa3, #af824f);"></box>
<box data-algo="splitComplementary" data-num-dots="3" data-position="83,103" style="background: linear-gradient(135deg, #1e90ff, #968a4a);"></box>
<box data-algo="analogous" data-num-dots="3" data-position="219,99" style="background: linear-gradient(135deg, #a07a48, #ab80e4);"></box>
<box data-algo="float" data-num-dots="1" data-position="196,176" style="background: #7bcbda;"></box>
<box data-algo="float" data-num-dots="1" data-position="116,167" style="background: #be9ac9;"></box>
<box data-algo="float" data-num-dots="1" data-position="122,110" style="background: #cdcea1;"></box>
<box data-algo="float" data-num-dots="1" data-position="181,83" style="background: #6ac593;"></box>
<box data-algo="complementary" data-num-dots="3" data-position="82,112" style="background: linear-gradient(135deg, #1e90ff, #cfb179);"></box>
</hbox>
</hbox>
<hbox class="zen-theme-picker-gradient">
<div id="PanelUI-zen-gradient-generator-color-actions">
<button id="PanelUI-zen-gradient-generator-color-add" class="subviewbutton">
@@ -104,7 +118,6 @@
<html:input type="range" min="0" max="1" value="0.5" step="0.05" oninput="gZenThemePicker.onOpacityChange(event);" id="PanelUI-zen-gradient-generator-opacity" />
</vbox>
<vbox>
<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>
</hbox>

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

@@ -62,6 +62,32 @@
gap: 10px;
}
#PanelUI-zen-gradient-generator-predefined {
display: flex;
gap: 5px;
align-items: center;
margin: 5px 5px 10px 0;
& > box {
width: 18px;
height: 18px;
border-radius: 50%;
cursor: pointer;
position: relative;
&::after {
content: '';
position: absolute;
width: 18px;
height: 18px;
top: 0;
left: 0;
outline: 2px solid var(--zen-toolbar-element-bg);
border-radius: 50%;
pointer-events: none;
}
}
}
#PanelUI-zen-gradient-generator-custom-list {
margin-top: 15px;
@@ -135,43 +161,15 @@
position: relative;
border-radius: calc(var(--zen-border-radius) - 2px);
overflow: hidden;
border: 1px solid var(--zen-colors-border);
border-radius: var(--zen-border-radius);
min-height: calc(var(--panel-width) - var(--panel-padding) * 2);
margin-bottom: 20px;
background: var(--zen-theme-picker-gradient-image) center center / cover no-repeat;
&::before {
background: color-mix(in srgb, var(--zen-themed-toolbar-bg) 70%, transparent 30%);
backdrop-filter: blur(10px);
content: '';
position: absolute;
top: 0;
left: 0;
pointer-events: none;
box-shadow: 0 0 0 1px 1px var(--zen-colors-border);
width: 100%;
height: 100%;
}
&::after {
z-index: 0;
position: absolute;
inset: 0;
--zen-theme-picker-lines-color: light-dark(rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.5));
background-image: linear-gradient(to right, var(--zen-theme-picker-lines-color) 1px, transparent 1px),
linear-gradient(to bottom, var(--zen-theme-picker-lines-color) 1px, transparent 1px);
background-size: 20px 20px;
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.1;
}
background: var(--zen-toolbar-element-bg);
background-image: radial-gradient(light-dark(rgba(0, 0, 0, 0.05), rgba(0,0,0,.225)) 1px, transparent 0);
background-position: -19px -19px;
background-size: 10px 10px;
& .zen-theme-picker-dot {
position: absolute;
@@ -180,9 +178,11 @@
height: 20px;
border-radius: 50%;
background: var(--zen-theme-picker-dot-color);
box-shadow: 0 0 0 2px var(--zen-themed-toolbar-bg);
@media (-prefers-color-scheme: dark) {
box-shadow: 0 0 0 2px rgba(0,0,0,.1);
}
cursor: pointer;
border: 2px solid #fff;
border: 2px solid #ffffff;
animation: zen-theme-picker-dot-animation 0.5s;
transition: transform 0.2s;
transform: translate(-50%, -50%);
@@ -230,13 +230,18 @@
padding: 0.4rem !important;
min-width: fit-content !important;
transition: background 0.2s;
gap: 0.3rem;
appearance: none;
& .button-box {
gap: 0.1rem;
}
&:not(#PanelUI-zen-gradient-generator-color-toggle-algo) .button-text {
display: none;
}
appearance: none;
&:hover {
background: light-dark(rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.2));
background: light-dark(#cfcfcf, #313131);
}
&[disabled] {

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

@@ -1,7 +1,6 @@
{
class ZenThemePicker extends ZenMultiWindowFeature {
static GRADIENT_IMAGE_URL = 'chrome://browser/content/zen-images/gradient.png';
static GRADIENT_DISPLAY_URL = 'chrome://browser/content/zen-images/gradient-display.png';
static MAX_DOTS = 3;
currentOpacity = 0.5;
@@ -90,11 +89,54 @@
// Call the rest of the initialization
this.initContextMenu();
this.initPredefinedColors();
this._hasInitialized = true;
this.onDarkModeChange(null);
}
initPredefinedColors() {
document.getElementById('PanelUI-zen-gradient-generator-predefined').addEventListener('click', async (event) => {
const target = event.target;
const rawPosition = target.getAttribute('data-position');
if (!rawPosition) {
return;
}
const algo = target.getAttribute('data-algo');
const numDots = parseInt(target.getAttribute('data-num-dots'));
if (algo == 'float') {
for (const dot of this.dots) {
dot.element.remove();
}
this.dots = [];
}
// Generate new gradient from the single color given
const [x, y] = rawPosition.split(',').map((pos) => parseInt(pos));
let dots = [
{
ID: 0,
position: { x, y },
},
];
for (let i = 1; i < numDots; i++) {
dots.push({
ID: i,
position: { x: 0, y: 0 },
});
}
this.useAlgo = algo;
dots = this.calculateCompliments(dots, 'update', this.useAlgo);
if (algo == 'float') {
for (const dot of dots) {
this.spawnDot(dot.position);
}
this.dots[0].element.classList.add('primary');
}
this.handleColorPositions(dots);
this.updateCurrentWorkspace();
});
}
initCustomColorInput() {
this.customColorInput.addEventListener('keydown', this.onCustomColorKeydown.bind(this));
}
@@ -113,7 +155,6 @@
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})`);
document.addEventListener('mousemove', this._onDotMouseMove);
document.addEventListener('mouseup', this._onDotMouseUp);
themePicker.addEventListener('mousedown', this._onDotMouseDown);
@@ -350,7 +391,7 @@
this.useAlgo = harmonyAngles.type;
if (!harmonyAngles || harmonyAngles.angles.length === 0) return [];
if (!harmonyAngles || harmonyAngles.angles.length === 0) return dots;
let primaryDot = dots.find((dot) => dot.ID === 0);
if (!primaryDot) return [];
@@ -391,8 +432,6 @@
dot.element.style.zIndex = 999;
let pixelX, pixelY;
const rect = this.panel.querySelector('.zen-theme-picker-gradient').getBoundingClientRect();
if (dot.position.x === null) {
const leftPercentage = parseFloat(dot.element.style.left) / 100;
const topPercentage = parseFloat(dot.element.style.top) / 100;