Ku6epXBOCTuK/easy-png-tools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: resolve design issues from refs audit

Browse Source
This commit is contained in:
Ku6epXBOCTuK
2026-08-28 19:56:50 +05:00
parent 6959abb159
commit 0d95acba89
11 changed files with 573 additions and 422 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/lib/components/kit/MetaRow.svelte
+1 -1
View File
@@ -21,7 +21,7 @@
}
.meta-caption {
font-family: var(--font-mono);
font-size: 10px;
font-size: 9px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--muted);
web/src/lib/components/kit/MonoLabel.svelte
+1 -1
View File
@@ -20,7 +20,7 @@
font-family: var(--font-mono);
font-size: 10px;
line-height: 1.2;
font-weight: 500;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--muted);
web/src/lib/components/kit/SliderField.svelte
+6 -1
View File
@@ -29,7 +29,12 @@
<Field {label}>
<div class="slider-field">
<input type="range" {min} {max} {step} {value} oninput={handle} />
<span class="slider-value">{value}{suffix}</span>
<span class="slider-value">
{value}
{#if suffix}
{suffix}
{/if}
</span>
</div>
</Field>
web/src/lib/components/kit/StepCard.svelte
+71 -33
View File
@@ -6,59 +6,88 @@
index: number;
title?: string;
type?: string;
tools?: Snippet;
children?: Snippet;
onremove?: () => void;
}
let { index, title, type, children, onremove }: Props = $props();
let { index, title, type, tools, children, onremove }: Props = $props();
</script>
<div class="step-card">
<div class="step-heading">
<span class="drag" aria-hidden="true"><GripVertical size={16} /></span>
<article class="step-card">
<div class="step-rail">
<span class="step-index">{index.toString().padStart(2, "0")}</span>
{#if type}<span class="step-type">{type}</span>{/if}
{#if title}<span class="step-title">{title}</span>{/if}
<button
type="button"
class="step-remove"
aria-label="Remove step"
onclick={() => onremove?.()}
>
<X size={16} />
</button>
<span class="drag" aria-hidden="true"><GripVertical size={16} /></span>
</div>
{#if children}
<div class="step-body">{@render children()}</div>
{/if}
</div>
<div class="step-body">
<div class="step-heading">
<div class="step-heading-text">
{#if type}<span class="step-type">{type}</span>{/if}
{#if title}<h2 class="step-title">{title}</h2>{/if}
</div>
<div class="step-tools">
{#if tools}{@render tools()}{/if}
<button
type="button"
class="step-remove"
aria-label="Remove step"
onclick={() => onremove?.()}
>
<X size={16} />
</button>
</div>
</div>
{#if children}
<div class="step-content">{@render children()}</div>
{/if}
</div>
</article>
<style>
.step-card {
display: flex;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--panel);
overflow: hidden;
}
.step-heading {
.step-rail {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.75rem;
border-bottom: 1px solid var(--line);
flex-direction: column;
align-items: flex-start;
gap: 10px;
min-width: 46px;
padding: 17px 0 17px 15px;
border-right: 1px solid var(--line);
}
.step-index {
font: 600 22px var(--font-mono);
line-height: 1;
color: var(--blue);
}
.drag {
color: var(--muted);
cursor: grab;
display: inline-flex;
}
.step-index {
font-family: var(--font-mono);
font-size: 11px;
color: var(--blue);
.step-body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
}
.step-title {
font: 600 15px var(--font-mono);
color: var(--foreground);
margin: 0;
.step-heading {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.5rem;
padding: 0.5rem 0.75rem;
border-bottom: 1px solid var(--line);
}
.step-heading-text {
display: flex;
flex-direction: column;
min-width: 0;
}
.step-type {
color: var(--muted);
@@ -66,8 +95,17 @@
letter-spacing: 0.12em;
text-transform: uppercase;
}
.step-title {
margin: 5px 0 18px;
font: 600 15px var(--font-mono);
color: var(--foreground);
}
.step-tools {
display: flex;
align-items: center;
gap: 8px;
}
.step-remove {
margin-left: auto;
border: none;
background: transparent;
color: var(--muted);
@@ -77,7 +115,7 @@
.step-remove:hover {
color: var(--danger);
}
.step-body {
.step-content {
padding: 0.75rem;
display: flex;
flex-direction: column;
web/src/lib/components/kit/TopBar.svelte
+29 -7
View File
@@ -1,6 +1,7 @@
<script lang="ts">
import IconButton from "./IconButton.svelte";
import StatusDot from "./StatusDot.svelte";
import { resolve } from "$app/paths";
import { CircleHelp, Moon, Sun } from "@lucide/svelte";
interface Props {
@@ -14,13 +15,19 @@
let lang = $state("RU");
</script>
<header class="topbar">
<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">
<header class="topbar">
<div class="brand">
<span class="brand-mark">EP</span>
<span>easy-png-tools</span>
{#if crumb}<span class="version">{crumb}</span>{/if}
</div>
<nav class="nav">
<a href={resolve("/preview/demo")}>Workspace</a>
<a href={resolve("/preview/list-tools")}>Catalog</a>
<a href={resolve("/preview/tools/linear-gradient-png")}>Gradient</a>
<a href={resolve("/preview/tools/remove-background-png")}>Background remover</a>
</nav>
<div class="top-actions">
<span class="status"><StatusDot /> AUTO PIPELINE</span>
<IconButton
icon={CircleHelp}
@@ -85,6 +92,21 @@
letter-spacing: 0.12em;
color: var(--blue);
}
.nav {
display: flex;
align-items: center;
gap: 18px;
margin-left: 24px;
}
.nav a {
color: var(--muted);
font: 12px var(--font-mono);
letter-spacing: 0.04em;
text-decoration: none;
}
.nav a:hover {
color: var(--foreground);
}
.top-actions {
display: flex;
align-items: center;
web/src/routes/preview/+layout.svelte
+23 -2
View File
@@ -1,9 +1,9 @@
<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";
import "$lib/styles/design2.css";
import type { Snippet } from "svelte";
interface Props {
children: Snippet;
@@ -47,4 +47,25 @@
<div class="preview-root" data-theme={theme}>
<TopBar {theme} {crumb} ontoggle={toggle} />
<AppShell>{@render children()}</AppShell>
<footer class="preview-footer">
<span class="version">v0.1.0</span>
<span class="copy">© 2026</span>
</footer>
</div>
<style>
.preview-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 16px clamp(20px, 4vw, 64px);
border-top: 1px solid var(--line);
font: 10px var(--font-mono);
letter-spacing: 0.08em;
color: var(--muted);
}
.preview-footer .version {
color: var(--blue);
}
</style>
web/src/routes/preview/demo/+page.svelte
+16 -13
View File
@@ -91,7 +91,9 @@
title="Gradient background"
onremove={() => {}}
>
<div class="step-tools"><Badge tone="success">AUTO</Badge></div>
{#snippet tools()}
<Badge tone="success">AUTO</Badge>
{/snippet}
<FieldGrid>
<ColorField label="Gradient color" bind:value={gradColor} />
<SliderField
@@ -106,10 +108,10 @@
<Segmented
bind:value={opacity}
options={[
{ value: "100", label: "100" },
{ value: "75", label: "75" },
{ value: "50", label: "50" },
{ value: "25", label: "25" },
{ value: "100", label: "100%" },
{ value: "75", label: "75%" },
{ value: "50", label: "50%" },
{ value: "25", label: "25%" },
]}
/>
</div>
@@ -122,12 +124,16 @@
title="Remove background"
onremove={() => {}}
>
<div class="step-tools"><Badge tone="success">AUTO</Badge></div>
{#snippet tools()}
<Badge tone="success">AUTO</Badge>
{/snippet}
<div class="transform-note">Automatic subject detection enabled</div>
</StepCard>
<StepCard index={3} type="STYLE" title="Add outline" onremove={() => {}}>
<div class="step-tools"><Badge tone="success">AUTO</Badge></div>
{#snippet tools()}
<Badge tone="success">AUTO</Badge>
{/snippet}
<FieldGrid compact>
<SliderField
label="Outline width"
@@ -146,7 +152,9 @@
title="Round corners"
onremove={() => {}}
>
<div class="step-tools"><Badge tone="success">AUTO</Badge></div>
{#snippet tools()}
<Badge tone="success">AUTO</Badge>
{/snippet}
<FieldGrid compact>
<SliderField
label="Corner radius"
@@ -234,11 +242,6 @@
gap: 10px;
padding-top: 14px;
}
.step-tools {
display: flex;
gap: 8px;
align-items: center;
}
.control-block {
display: flex;
flex-direction: column;
web/src/routes/preview/demo/WorkspaceHeader.svelte
+1
View File
@@ -54,6 +54,7 @@
margin: 0 0 16px;
font-size: clamp(36px, 4vw, 64px);
font-weight: 650;
line-height: 0.9;
letter-spacing: -0.06em;
color: var(--foreground);
}