From 339554cf4535343e502d3199c7873a058661d742 Mon Sep 17 00:00:00 2001
From: SandObserver <260779319+SandObserver@users.noreply.github.com>
Date: Tue, 20 Oct 2026 17:45:43 -0400
Subject: [PATCH] Feature: choose the icon colour style from a drop-down
Replace the icon colour's Dark, White, Auto and Clear swatches with a
Style drop-down that also offers Color. The colour swatches and HSB
sliders show only under Color, and choosing Color again restores the
colour a style replaced, or Blue the first time. Shorten the Auto label
to one word. Group the badge and wallpaper swatches at the row end with
one gap and one size, and drop the styles for the removed swatches.
---
e2e/control-names.spec.js | 29 +++++++++------
e2e/reflow.spec.js | 6 ++--
ui/admin/index.html | 4 +--
ui/css/admin.css | 21 ++---------
ui/i18n/de.json | 3 +-
ui/i18n/en.json | 3 +-
ui/i18n/es.json | 3 +-
ui/i18n/fa.json | 3 +-
ui/i18n/fr.json | 3 +-
ui/i18n/zh-Hans.json | 3 +-
ui/js/admin-app-form.js | 2 +-
ui/js/admin-color-control.js | 64 ++++++++++++++++++++++++++++------
ui/js/admin-list.js | 2 +-
ui/js/admin-settings.js | 2 +-
ui/js/admin-widget-form.js | 2 +-
ui/js/admin.js | 8 ++---
ui/js/widget-config-form.js | 2 +-
ui/test/i18n-coverage.test.mjs | 2 ++
18 files changed, 103 insertions(+), 59 deletions(-)
diff --git a/e2e/control-names.spec.js b/e2e/control-names.spec.js
index d331cb54..28ac8fa7 100644
--- a/e2e/control-names.spec.js
+++ b/e2e/control-names.spec.js
@@ -88,24 +88,33 @@ test('Settings group titles are headings', async ({ page }) => {
await expect(page.locator('#sec-general').getByRole('heading', { level: 2, name: 'Sprache' })).toBeVisible();
});
-test('the selected colour swatch is announced as pressed', async ({ page }) => {
+test('the icon colour Style is a named drop-down', async ({ page }) => {
await openDashboardList(page);
await rowByName(page, 'Alpha')
.getByRole('button', { name: /^Bearbeiten/ })
.click();
+ const style = page.getByRole('button', { name: /^Stil/ });
+ await expect(style).toHaveAccessibleName('Stil Dunkel');
+ const pick = async v => {
+ await style.click();
+ await page.locator(`#icon-col-style-list [data-val="${v}"]`).click();
+ };
const swatch = v => page.locator(`#icon-color-slot .cc-swatch[data-v="${v}"]`);
- await expect(swatch('dark')).toHaveAttribute('aria-pressed', 'true');
- await expect(swatch('light')).toHaveAttribute('aria-pressed', 'false');
- await swatch('light').click();
- await expect(swatch('light')).toHaveAttribute('aria-pressed', 'true');
- await expect(swatch('dark')).toHaveAttribute('aria-pressed', 'false');
- await swatch('custom').click();
- await expect(swatch('custom')).toHaveAttribute('aria-expanded', 'true');
- await expect(swatch('custom')).toHaveAttribute('aria-pressed', 'true');
+ await expect(swatch('red')).toBeHidden();
+ await pick('color');
+ await expect(style).toHaveAccessibleName('Stil Farbe');
+ await expect(swatch('blue')).toHaveAttribute('aria-pressed', 'true');
await swatch('red').click();
await expect(swatch('red')).toHaveAttribute('aria-pressed', 'true');
+ await expect(swatch('blue')).toHaveAttribute('aria-pressed', 'false');
await expect(swatch('custom')).toHaveAttribute('aria-pressed', 'false');
- await expect(swatch('custom')).toHaveAttribute('aria-expanded', 'true');
+ await pick('light');
+ await expect(swatch('red')).toBeHidden();
+ await pick('color');
+ await expect(swatch('red')).toHaveAttribute('aria-pressed', 'true');
+ await swatch('custom').click();
+ await expect(swatch('custom')).toHaveAttribute('aria-pressed', 'true');
+ await expect(swatch('red')).toHaveAttribute('aria-pressed', 'false');
});
test('the Test result is announced', async ({ page }) => {
diff --git a/e2e/reflow.spec.js b/e2e/reflow.spec.js
index be08028b..b24b4f5a 100644
--- a/e2e/reflow.spec.js
+++ b/e2e/reflow.spec.js
@@ -71,7 +71,8 @@ test.describe('on a touch screen', () => {
await page.setViewportSize({ width: 320, height: 700 });
await page.goto('/admin/#dashboard');
await page.locator('#al [data-act="edit"]').first().click();
- await page.locator('#icon-color-slot .cc-swatch[data-v="custom"]').click();
+ await page.locator('#icon-col-style-btn').click();
+ await page.locator('#icon-col-style-list [data-val="color"]').click();
const picker = page.locator('#icon-color-slot');
await picker.locator('.cc-hues').waitFor({ state: 'visible' });
await animationsDone(page);
@@ -104,7 +105,8 @@ test('the colour sliders share one length', async ({ page, request }) => {
await page.setViewportSize({ width: 1280, height: 900 });
await openDashboardList(page);
await page.locator('#al [data-act="edit"]').first().click();
- await page.locator('#icon-color-slot .cc-swatch[data-v="custom"]').click();
+ await page.locator('#icon-col-style-btn').click();
+ await page.locator('#icon-col-style-list [data-val="color"]').click();
const sliders = page.locator('#icon-color-slot .hsb-range');
await expect(sliders).toHaveCount(3);
await animationsDone(page);
diff --git a/ui/admin/index.html b/ui/admin/index.html
index cc9e837a..ea8cb997 100644
--- a/ui/admin/index.html
+++ b/ui/admin/index.html
@@ -11,7 +11,7 @@
-
+
@@ -302,6 +302,6 @@ General
-
+