From 7f11d0ba785db6709d96eb3d5691485bb15a7d51 Mon Sep 17 00:00:00 2001 From: bboysoul Date: Sun, 20 Sep 2026 07:09:00 +0800 Subject: [PATCH] fix: remove completed filter click highlight --- frontend/e2e/today-plain-list.spec.ts | 14 ++++++++++++++ frontend/src/style.css | 2 +- frontend/src/visual-polish.test.ts | 2 ++ 3 files changed, 17 insertions(+), 1 deletion(-) diff --git a/frontend/e2e/today-plain-list.spec.ts b/frontend/e2e/today-plain-list.spec.ts index e200b0f..5e5de1a 100644 --- a/frontend/e2e/today-plain-list.spec.ts +++ b/frontend/e2e/today-plain-list.spec.ts @@ -207,6 +207,20 @@ test('Today plain-list layout matches the approved responsive geometry', async ( expect(metrics.styles.filterVisualHeight).toBeLessThanOrEqual(36) expect(metrics.styles.filterBackground).toBe('rgba(0, 0, 0, 0)') expect(metrics.styles.filterBorderRadius).toBe('0px') + const filter = page.getByRole('switch', { name: '显示已完成' }) + await filter.hover() + expect(await filter.evaluate(element => getComputedStyle(element).backgroundColor)).toBe('rgba(0, 0, 0, 0)') + await filter.evaluate((element) => { + element.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true, pointerType: 'mouse' })) + element.dispatchEvent(new MouseEvent('mousedown', { bubbles: true })) + }) + expect(await filter.evaluate(element => getComputedStyle(element).backgroundColor)).toBe('rgba(0, 0, 0, 0)') + expect(await filter.evaluate(element => getComputedStyle(element).borderColor)).toBe('rgba(0, 0, 0, 0)') + expect(await filter.evaluate(element => getComputedStyle(element.querySelector('.completed-filter-pill__track')!).backgroundColor)).not.toBe('rgba(0, 0, 0, 0)') + await filter.evaluate((element) => { + element.dispatchEvent(new MouseEvent('mouseup', { bubbles: true })) + element.dispatchEvent(new PointerEvent('pointerup', { bubbles: true, pointerType: 'mouse' })) + }) expect(metrics.styles.headingDisplay).toBe('grid') expect(metrics.styles.headingAlignItems).toBe('center') expect(metrics.styles.filterTop).toBeGreaterThanOrEqual(metrics.ordered[1].top) diff --git a/frontend/src/style.css b/frontend/src/style.css index 168d9bc..73870e2 100644 --- a/frontend/src/style.css +++ b/frontend/src/style.css @@ -130,7 +130,7 @@ main.list-main>.mvp-view>.habit-archive-section{border-top:1px solid #e8e0d5} .habit-section-heading{margin-top:0} .list-page-title{margin:0;font-size:34px;line-height:1.15;font-weight:700;letter-spacing:-.035em} .list-page-summary{margin:8px 0 18px;color:var(--muted);font-size:13px} -.list-inline-filter,.habit-inline-filter{align-self:start;min-width:0;width:auto;height:44px;padding:0 2px;border:0;border-radius:0;background:transparent;box-shadow:none;font-weight:400}.list-inline-filter .completed-filter-pill__track,.habit-inline-filter .completed-filter-pill__track{width:31px;height:18px;background:#d8d0c5}.list-inline-filter .completed-filter-pill__thumb,.habit-inline-filter .completed-filter-pill__thumb{width:14px;height:14px}.list-inline-filter[aria-checked="true"] .completed-filter-pill__track,.habit-inline-filter[aria-checked="true"] .completed-filter-pill__track{background:var(--accent)} +.list-inline-filter,.habit-inline-filter{align-self:start;min-width:0;width:auto;height:44px;padding:0 2px;border:0;border-radius:0;background:transparent;box-shadow:none;font-weight:400}.today-context .completed-filter-pill:hover:not(:disabled),.today-context .completed-filter-pill:active:not(:disabled),.list-inline-filter:hover:not(:disabled),.list-inline-filter:active:not(:disabled),.habit-inline-filter:hover:not(:disabled),.habit-inline-filter:active:not(:disabled){background:transparent;border-color:transparent}.today-inline-filter,.list-inline-filter,.habit-inline-filter{-webkit-tap-highlight-color:transparent}.list-inline-filter .completed-filter-pill__track,.habit-inline-filter .completed-filter-pill__track{width:31px;height:18px;background:#d8d0c5}.list-inline-filter .completed-filter-pill__thumb,.habit-inline-filter .completed-filter-pill__thumb{width:14px;height:14px}.list-inline-filter[aria-checked="true"] .completed-filter-pill__track,.habit-inline-filter[aria-checked="true"] .completed-filter-pill__track{background:var(--accent)} .list-section-heading{width:min(100%,630px);min-height:44px;margin:0 auto;display:flex;align-items:center;border-bottom:1px solid #e8e0d5} .list-section-title{font-size:13px;font-weight:700}.list-section-count{margin-left:7px;font-size:12px;font-weight:400;color:var(--muted)} .list-section-action{min-height:44px;margin-left:auto;padding:0;border:0;background:transparent;color:var(--accent);font-size:12px;font-weight:650} diff --git a/frontend/src/visual-polish.test.ts b/frontend/src/visual-polish.test.ts index 6a95e31..cfd31bf 100644 --- a/frontend/src/visual-polish.test.ts +++ b/frontend/src/visual-polish.test.ts @@ -99,6 +99,8 @@ describe('approved five-detail polish', () => { expect(css).not.toContain('.list-search-reveal{') expect(css).toContain('@media(max-width:720px){') expect(css).not.toContain('top:-62px') + expect(css).toContain('.today-context .completed-filter-pill:hover:not(:disabled),.today-context .completed-filter-pill:active:not(:disabled),.list-inline-filter:hover:not(:disabled),.list-inline-filter:active:not(:disabled),.habit-inline-filter:hover:not(:disabled),.habit-inline-filter:active:not(:disabled){background:transparent;border-color:transparent}') + expect(css).toContain('.today-inline-filter,.list-inline-filter,.habit-inline-filter{-webkit-tap-highlight-color:transparent}') expect(css).toContain('.list-inline-filter .completed-filter-pill__track,.habit-inline-filter .completed-filter-pill__track{width:31px;height:18px;background:#d8d0c5}') expect(css).toContain('.list-inline-filter .completed-filter-pill__thumb,.habit-inline-filter .completed-filter-pill__thumb{width:14px;height:14px}') expect(css).toContain('.list-section-heading{width:min(100%,630px);min-height:44px;margin:0 auto;display:flex;align-items:center;border-bottom:1px solid #e8e0d5}')