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

New design

Browse Source
This commit is contained in:
mr. m
2025-02-16 16:57:18 +01:00
parent fdb26de664
commit fdc8fd1b01
6 changed files with 33 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -106,12 +106,12 @@
<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">
<div id="PanelUI-zen-gradient-generator-color-actions">
<button id="PanelUI-zen-gradient-generator-color-add" class="subviewbutton" oncommand="gZenThemePicker.addColor();" data-l10n-id="zen-panel-ui-gradient-generator-color-add">
<button id="PanelUI-zen-gradient-generator-color-add" class="subviewbutton">
</button>
<button id="PanelUI-zen-gradient-generator-color-remove" class="subviewbutton" oncommand="gZenThemePicker.removeColor();" data-l10n-id="zen-panel-ui-gradient-generator-color-remove">
<button id="PanelUI-zen-gradient-generator-color-remove" class="subviewbutton">
</button>
<html:div class="separator"></html:div>
<button id="PanelUI-zen-gradient-generator-color-reverse" class="subviewbutton" oncommand="gZenThemePicker.reverseColors();" data-l10n-id="zen-panel-ui-gradient-generator-color-reverse">
<button id="PanelUI-zen-gradient-generator-color-toggle-algo" class="subviewbutton">
</button>
</div>
</hbox>

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

@@ -5,7 +5,7 @@
*/
#PanelUI-zen-gradient-generator {
--panel-width: 300px;
--panel-width: 350px;
--panel-padding: 10px;
min-width: var(--panel-width);
}
@@ -68,9 +68,6 @@
padding-right: var(--panel-padding);
align-items: center;
gap: var(--panel-padding);
border-bottom: 1px solid color-mix(in srgb, var(--zen-colors-border) 50%, transparent 50%);
padding-bottom: 15px;
margin-bottom: 15px;
}
#zen-theme-picker-color {
@@ -225,7 +222,7 @@
inset: 0;
background-image: linear-gradient(to right, var(--zen-primary-color) 1px, transparent 1px),
linear-gradient(to bottom, var(--zen-primary-color) 1px, transparent 1px);
background-size: 24px 24px;
background-size: 20px 20px;
content: '';
position: absolute;
top: 0;
@@ -258,10 +255,10 @@
#PanelUI-zen-gradient-generator-color-actions {
display: flex;
gap: 10px;
position: absolute;
bottom: 15px;
bottom: 20px;
left: 50%;
z-index: 1;
transform: translateX(-50%);
& .separator,
& button {
@@ -269,9 +266,14 @@
}
& button {
padding: 0.4rem;
border-radius: 5px;
border: none !important;
padding: 0.4rem !important;
min-width: fit-content !important;
transition: background 0.2s;
& .button-text {
display: none;
}
appearance: none;
&:hover {
background: light-dark(rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.2));
}
@@ -279,7 +281,8 @@
& .separator {
width: 1px;
height: 20px;
margin: 0 0.5rem;
height: 30px;
}
}

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

@@ -2,7 +2,7 @@
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 = 5;
static MAX_DOTS = 3;
currentOpacity = 0.5;
currentRotation = 45;
@@ -78,7 +78,7 @@
onImageLoad() {
// resize the image to fit the panel
const imageSize = 300 - 20; // 20 is the padding (10px)
const imageSize = 350 - 20; // 20 is the padding (10px)
const scale = imageSize / Math.max(this.image.width, this.image.height);
this.image.width *= scale;
this.image.height *= scale;
@@ -448,12 +448,18 @@
onThemePickerClick(event) {
event.preventDefault();
const target = event.target;
if (target.id === 'PanelUI-zen-gradient-generator-color-add') {
if (this.dots.length >= ZenThemePicker.MAX_DOTS) return;
} else if (target.id === 'PanelUI-zen-gradient-generator-color-remove') {
} else if (target.id === 'PanelUI-zen-gradient-generator-color-toggle-algo') {
}
if (event.button !== 0 || this.dragging || this.recentlyDragged) return;
const gradient = this.panel.querySelector('.zen-theme-picker-gradient');
const rect = gradient.getBoundingClientRect();
const padding = 90;
const padding = 60;
const centerX = rect.left + rect.width / 2;
const centerY = rect.top + rect.height / 2;

4
src/browser/themes/shared/zen-icons/icons.css
View File

@@ -45,6 +45,10 @@
list-style-image: url('reload.svg') !important;
}
#PanelUI-zen-gradient-generator-color-toggle-algo {
list-style-image: url('palette.svg');
}
.tab-reset-button,
#PanelUI-zen-gradient-generator-color-remove {
list-style-image: url('unpin.svg') !important;

1
src/browser/themes/shared/zen-icons/jar.inc.mn
View File

@@ -82,6 +82,7 @@
skin/classic/browser/zen-icons/nucleo-copyright-notice.html (../shared/zen-icons/nucleo-copyright-notice.html)
skin/classic/browser/zen-icons/open.svg (../shared/zen-icons/open.svg)
skin/classic/browser/zen-icons/page-portrait.svg (../shared/zen-icons/page-portrait.svg)
skin/classic/browser/zen-icons/palette.svg (../shared/zen-icons/palette.svg)
skin/classic/browser/zen-icons/passwords.svg (../shared/zen-icons/passwords.svg)
skin/classic/browser/zen-icons/paste-and-go.svg (../shared/zen-icons/paste-and-go.svg)
skin/classic/browser/zen-icons/permissions.svg (../shared/zen-icons/permissions.svg)

1
src/browser/themes/shared/zen-icons/palette.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M7.25,4.25v-.5c0-.552-.448-1-1-1H3.75c-.552,0-1,.448-1,1V13" data-color="color-2"></path><path d="M12.932,8.25l.2-.2c.391-.391,.391-1.024,0-1.414l-1.768-1.768c-.391-.391-1.024-.391-1.414,0L3.409,11.409" data-color="color-2"></path><circle cx="5" cy="13" r=".75" fill="currentColor" data-stroke="none" stroke="none"></circle><path d="M9,6.75h0c1.242,0,2.25,1.008,2.25,2.25v9.25c0,.552-.448,1-1,1h-2.5c-.552,0-1-.448-1-1V9c0-1.242,1.008-2.25,2.25-2.25Z" transform="translate(-4 22) rotate(-90)"></path><line x1="8.25" y1="10.75" x2="8.25" y2="15.25"></line><line x1="11.75" y1="10.75" x2="11.75" y2="15.25"></line></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 841 B