From 5093b50f5cfea72f6298e9dd5a2ae934e741b75a Mon Sep 17 00:00:00 2001 From: Ku6epXBOCTuK Date: Fri, 28 Aug 2026 13:35:09 +0500 Subject: [PATCH] fix: update design with references --- docs/plan-redesign.md | 2 +- web/src/lib/components/kit/IconButton.svelte | 15 ++++- web/src/lib/components/kit/TopBar.svelte | 56 +++++++++++++++---- web/src/routes/preview/+layout.svelte | 32 ++++++++++- web/src/routes/preview/demo/+page.svelte | 4 +- web/src/routes/preview/kit/+page.svelte | 4 +- .../routes/preview/list-tools/+page.svelte | 4 +- 7 files changed, 97 insertions(+), 20 deletions(-) diff --git a/docs/plan-redesign.md b/docs/plan-redesign.md index a1d2a04..59ed03a 100644 --- a/docs/plan-redesign.md +++ b/docs/plan-redesign.md @@ -337,7 +337,7 @@ src/routes/preview/tools/[id]/+page.svelte ### Шаг 4. Переключатель и проверка - [x] **[C15]** В старой шапке ссылка «Preview v2» → `/preview`, ставит `localStorage['easy-png-tools:preview-v2']='1'`. -- [x] **[C16]** Внешний вид `/preview/*` приведён к `refs-html/`: тип шага — приглушённый, индекс шага — синий, подпись плитки — синяя, бренд топбара — `--foreground`, `Segmented` 10px/32px, стек шрифтов сверен с рефом; старые тесты прогнаны (без регрессий). +- [x] **[C16]** База под дизайн: рабочий переключатель тем (persist в localStorage, применяется на ``; проверено — фон `#eef1f4`↔`#11171d`), `TopBar` приведён к виду `demo.html` (бренд + синий хлебный крош `/* страница */`, безрамочные иконки, язык — active = `--foreground`/`--background`), страницы `/preview/*` на всю ширину (убран `max-width`). Точечное выравнивание к рефу отложено: реф-дизайн неконсистентен. (доказательство отсутствия регресса). Фиксы по результатам — отдельными мелкими коммитами. diff --git a/web/src/lib/components/kit/IconButton.svelte b/web/src/lib/components/kit/IconButton.svelte index 6726e5b..9f1b3fd 100644 --- a/web/src/lib/components/kit/IconButton.svelte +++ b/web/src/lib/components/kit/IconButton.svelte @@ -6,10 +6,11 @@ icon: Component<{ size?: number; class?: string }>; label: string; onclick?: () => void; - variant?: "ghost" | "solid" | "accent"; + variant?: "ghost" | "solid" | "accent" | "bare"; size?: number; disabled?: boolean; } + let { icon, label, @@ -57,6 +58,18 @@ color: #042; border-color: var(--cyan); } + .icon-btn--bare { + width: auto; + height: auto; + padding: 6px; + border: 0; + border-radius: 0; + color: var(--muted); + } + .icon-btn--bare:hover:not(:disabled) { + color: var(--foreground); + border-color: transparent; + } .icon-btn:disabled { opacity: 0.5; cursor: not-allowed; diff --git a/web/src/lib/components/kit/TopBar.svelte b/web/src/lib/components/kit/TopBar.svelte index adb3fc0..1eeeed1 100644 --- a/web/src/lib/components/kit/TopBar.svelte +++ b/web/src/lib/components/kit/TopBar.svelte @@ -1,15 +1,15 @@ @@ -18,22 +18,31 @@
EP easy-png-tools + {#if crumb}{crumb}{/if}
AUTO PIPELINE - {}} /> + {}} /> - +
+ + +
@@ -66,6 +75,11 @@ display: grid; place-items: center; } + .version { + font: 10px var(--font-mono); + letter-spacing: 0.12em; + color: var(--blue); + } .top-actions { display: flex; align-items: center; @@ -79,4 +93,26 @@ font: 10px var(--font-mono); letter-spacing: 0.08em; } + .lang { + display: inline-flex; + border: 1px solid var(--line); + border-radius: var(--radius); + overflow: hidden; + } + .lang-btn { + border: 0; + background: transparent; + color: var(--muted); + font: 10px var(--font-mono); + letter-spacing: 0.06em; + padding: 6px 9px; + cursor: pointer; + } + .lang-btn + .lang-btn { + border-left: 1px solid var(--line); + } + .lang-btn.active { + background: var(--foreground); + color: var(--background); + } diff --git a/web/src/routes/preview/+layout.svelte b/web/src/routes/preview/+layout.svelte index c74f21e..f124dd3 100644 --- a/web/src/routes/preview/+layout.svelte +++ b/web/src/routes/preview/+layout.svelte @@ -1,6 +1,7 @@
- + {@render children()}
diff --git a/web/src/routes/preview/demo/+page.svelte b/web/src/routes/preview/demo/+page.svelte index 910dfc0..06893a9 100644 --- a/web/src/routes/preview/demo/+page.svelte +++ b/web/src/routes/preview/demo/+page.svelte @@ -250,8 +250,8 @@ grid-template-columns: minmax(0, 1.05fr) minmax(520px, 0.95fr); align-items: start; gap: 56px; - max-width: 1680px; - margin: 0 auto; + max-width: none; + margin: auto; padding: 60px clamp(24px, 4vw, 72px) 72px; } .workspace { diff --git a/web/src/routes/preview/kit/+page.svelte b/web/src/routes/preview/kit/+page.svelte index 44ead2f..0459dff 100644 --- a/web/src/routes/preview/kit/+page.svelte +++ b/web/src/routes/preview/kit/+page.svelte @@ -214,9 +214,9 @@