From fdc8fd1b01a0d892ed942c64fe7d8c2af38a7e54 Mon Sep 17 00:00:00 2001 From: "mr. m" Date: Sun, 16 Feb 2025 16:57:18 +0100 Subject: [PATCH] New design --- .../base/content/zen-popupset.inc.xhtml | 6 ++--- .../zen-styles/zen-gradient-generator.css | 27 ++++++++++--------- .../zen-components/ZenGradientGenerator.mjs | 12 ++++++--- src/browser/themes/shared/zen-icons/icons.css | 4 +++ .../themes/shared/zen-icons/jar.inc.mn | 1 + .../themes/shared/zen-icons/palette.svg | 1 + 6 files changed, 33 insertions(+), 18 deletions(-) create mode 100644 src/browser/themes/shared/zen-icons/palette.svg diff --git a/src/browser/base/content/zen-popupset.inc.xhtml b/src/browser/base/content/zen-popupset.inc.xhtml index 45f3b9316..4bbcd7efd 100644 --- a/src/browser/base/content/zen-popupset.inc.xhtml +++ b/src/browser/base/content/zen-popupset.inc.xhtml @@ -106,12 +106,12 @@
- - -
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 8c5c0893d..7999c51f6 100644 --- a/src/browser/base/content/zen-styles/zen-gradient-generator.css +++ b/src/browser/base/content/zen-styles/zen-gradient-generator.css @@ -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,28 +255,34 @@ #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 { - background: light-dark(rgba(0,0,0,0.1), rgba(255,255,255,0.1)); + background: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1)); } & 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)); + background: light-dark(rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.2)); } } & .separator { width: 1px; - height: 20px; + margin: 0 0.5rem; + height: 30px; } } diff --git a/src/browser/base/zen-components/ZenGradientGenerator.mjs b/src/browser/base/zen-components/ZenGradientGenerator.mjs index 8c3c4160b..2d2096d65 100644 --- a/src/browser/base/zen-components/ZenGradientGenerator.mjs +++ b/src/browser/base/zen-components/ZenGradientGenerator.mjs @@ -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; diff --git a/src/browser/themes/shared/zen-icons/icons.css b/src/browser/themes/shared/zen-icons/icons.css index 36d1b2e34..aa00115d3 100644 --- a/src/browser/themes/shared/zen-icons/icons.css +++ b/src/browser/themes/shared/zen-icons/icons.css @@ -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; diff --git a/src/browser/themes/shared/zen-icons/jar.inc.mn b/src/browser/themes/shared/zen-icons/jar.inc.mn index ba6f17c2c..011515c27 100644 --- a/src/browser/themes/shared/zen-icons/jar.inc.mn +++ b/src/browser/themes/shared/zen-icons/jar.inc.mn @@ -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) diff --git a/src/browser/themes/shared/zen-icons/palette.svg b/src/browser/themes/shared/zen-icons/palette.svg new file mode 100644 index 000000000..44c6edbf2 --- /dev/null +++ b/src/browser/themes/shared/zen-icons/palette.svg @@ -0,0 +1 @@ + \ No newline at end of file