mirror of
https://github.com/Ku6epXBOCTuK/easy-png-tools.git
synced 2026-09-14 13:36:36 +00:00
fix: update design with references
This commit is contained in:
@@ -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, применяется на `<html>`; проверено — фон `#eef1f4`↔`#11171d`), `TopBar` приведён к виду `demo.html` (бренд + синий хлебный крош `/* страница */`, безрамочные иконки, язык — active = `--foreground`/`--background`), страницы `/preview/*` на всю ширину (убран `max-width`). Точечное выравнивание к рефу отложено: реф-дизайн неконсистентен.
|
||||
(доказательство отсутствия регресса). Фиксы по результатам — отдельными
|
||||
мелкими коммитами.
|
||||
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
<script lang="ts">
|
||||
import IconButton from "./IconButton.svelte";
|
||||
import Segmented from "./Segmented.svelte";
|
||||
import StatusDot from "./StatusDot.svelte";
|
||||
import { CircleHelp, Moon, Sun } from "@lucide/svelte";
|
||||
|
||||
interface Props {
|
||||
theme: "light" | "dark";
|
||||
crumb?: string;
|
||||
ontoggle: () => void;
|
||||
}
|
||||
|
||||
let { theme, ontoggle }: Props = $props();
|
||||
let { theme, crumb, ontoggle }: Props = $props();
|
||||
|
||||
let lang = $state("RU");
|
||||
</script>
|
||||
@@ -18,22 +18,31 @@
|
||||
<div class="brand">
|
||||
<span class="brand-mark">EP</span>
|
||||
<span>easy-png-tools</span>
|
||||
{#if crumb}<span class="version">{crumb}</span>{/if}
|
||||
</div>
|
||||
<div class="top-actions">
|
||||
<span class="status"><StatusDot /> AUTO PIPELINE</span>
|
||||
<IconButton icon={CircleHelp} label="Help" onclick={() => {}} />
|
||||
<IconButton icon={CircleHelp} label="Help" variant="bare" onclick={() => {}} />
|
||||
<IconButton
|
||||
icon={theme === "light" ? Moon : Sun}
|
||||
label="Toggle theme"
|
||||
variant="bare"
|
||||
onclick={ontoggle}
|
||||
/>
|
||||
<Segmented
|
||||
bind:value={lang}
|
||||
options={[
|
||||
{ value: "RU", label: "RU" },
|
||||
{ value: "EN", label: "EN" },
|
||||
]}
|
||||
/>
|
||||
<div class="lang" role="group" aria-label="Language">
|
||||
<button
|
||||
type="button"
|
||||
class="lang-btn"
|
||||
class:active={lang === "RU"}
|
||||
onclick={() => (lang = "RU")}>RU</button
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="lang-btn"
|
||||
class:active={lang === "EN"}
|
||||
onclick={() => (lang = "EN")}>EN</button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<script lang="ts">
|
||||
import "$lib/styles/design2.css";
|
||||
import type { Snippet } from "svelte";
|
||||
import { page } from "$app/stores";
|
||||
import AppShell from "$lib/components/kit/AppShell.svelte";
|
||||
import TopBar from "$lib/components/kit/TopBar.svelte";
|
||||
|
||||
@@ -10,13 +11,40 @@
|
||||
|
||||
let { children }: Props = $props();
|
||||
|
||||
let theme = $state<"light" | "dark">("light");
|
||||
type Theme = "light" | "dark";
|
||||
const stored =
|
||||
typeof localStorage !== "undefined"
|
||||
? (localStorage.getItem("easy-png-tools:theme") as Theme | null)
|
||||
: null;
|
||||
let theme = $state<Theme>(stored ?? "light");
|
||||
|
||||
function toggle() {
|
||||
theme = theme === "light" ? "dark" : "light";
|
||||
}
|
||||
|
||||
$effect(() => {
|
||||
document.documentElement.dataset.theme = theme;
|
||||
try {
|
||||
localStorage.setItem("easy-png-tools:theme", theme);
|
||||
} catch {
|
||||
/* ignore */
|
||||
}
|
||||
});
|
||||
|
||||
let crumb = $derived(toCrumb($page.url.pathname));
|
||||
|
||||
function toCrumb(path: string): string {
|
||||
const seg = path
|
||||
.replace(/^\/preview/, "")
|
||||
.replace(/^\//, "")
|
||||
.split("/")
|
||||
.filter(Boolean);
|
||||
const label = seg.length ? seg.join(" / ").toUpperCase() : "PREVIEW";
|
||||
return "/ " + label;
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="preview-root" data-theme={theme}>
|
||||
<TopBar {theme} ontoggle={toggle} />
|
||||
<TopBar {theme} {crumb} ontoggle={toggle} />
|
||||
<AppShell>{@render children()}</AppShell>
|
||||
</div>
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -214,9 +214,9 @@
|
||||
|
||||
<style>
|
||||
.showcase {
|
||||
max-width: 880px;
|
||||
max-width: none;
|
||||
margin: 0 auto;
|
||||
padding: 2.5rem 1.25rem 4rem;
|
||||
padding: 2.5rem clamp(24px, 4vw, 72px) 4rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.25rem;
|
||||
|
||||
@@ -50,9 +50,9 @@
|
||||
|
||||
<style>
|
||||
.catalog {
|
||||
max-width: 880px;
|
||||
max-width: none;
|
||||
margin: 0 auto;
|
||||
padding: 2.5rem 1.25rem 4rem;
|
||||
padding: 2.5rem clamp(24px, 4vw, 72px) 4rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.25rem;
|
||||
|
||||
Reference in New Issue
Block a user