mirror of
https://github.com/Ku6epXBOCTuK/easy-png-tools.git
synced 2026-09-14 21:46:35 +00:00
chore: update css lint rules, remove unused files
This commit is contained in:
@@ -1,37 +0,0 @@
|
||||
<script lang="ts">
|
||||
import type { Component } from "svelte";
|
||||
import { Upload } from "@lucide/svelte";
|
||||
|
||||
interface Props {
|
||||
name: string;
|
||||
size?: string;
|
||||
icon?: Component<{ size?: number }>;
|
||||
}
|
||||
|
||||
let { name, size, icon = Upload }: Props = $props();
|
||||
const Cmp = $derived(icon);
|
||||
</script>
|
||||
|
||||
<div class="file-chip">
|
||||
<Cmp size={15} />
|
||||
<span>{name}</span>
|
||||
{#if size}<b>{size}</b>{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.file-chip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
white-space: nowrap;
|
||||
border: 1px solid var(--line);
|
||||
background: var(--panel);
|
||||
font: 11px var(--font-mono);
|
||||
color: var(--muted);
|
||||
padding: 10px 12px;
|
||||
}
|
||||
.file-chip b {
|
||||
color: var(--blue);
|
||||
font-weight: 500;
|
||||
}
|
||||
</style>
|
||||
@@ -1,44 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { RotateCcw } from "@lucide/svelte";
|
||||
import StatusDot from "./StatusDot.svelte";
|
||||
|
||||
interface Props {
|
||||
onreset?: () => void;
|
||||
note?: string;
|
||||
}
|
||||
|
||||
let { onreset, note = "changes are applied automatically" }: Props = $props();
|
||||
</script>
|
||||
|
||||
<div class="pipeline-footer">
|
||||
<button class="reset-btn" onclick={() => onreset?.()}>
|
||||
<RotateCcw size={14} /> Reset pipeline
|
||||
</button>
|
||||
<span class="auto-note"><StatusDot /> {note}</span>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.pipeline-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-top: 18px;
|
||||
}
|
||||
.reset-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
color: var(--blue);
|
||||
background: none;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
}
|
||||
.auto-note {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: var(--muted);
|
||||
font: 11px var(--font-mono);
|
||||
}
|
||||
</style>
|
||||
@@ -1,107 +0,0 @@
|
||||
<script lang="ts">
|
||||
import CheckerCanvas from "$lib/components/kit/CheckerCanvas.svelte";
|
||||
import Dropzone from "$lib/components/kit/Dropzone.svelte";
|
||||
import EmptyState from "$lib/components/kit/EmptyState.svelte";
|
||||
import Panel from "$lib/components/kit/layout/Panel.svelte";
|
||||
import MetaList from "$lib/components/kit/MetaList.svelte";
|
||||
import PreviewStack from "$lib/components/kit/PreviewStack.svelte";
|
||||
import PreviewTile from "$lib/components/kit/PreviewTile.svelte";
|
||||
import StatusLine from "$lib/components/kit/StatusLine.svelte";
|
||||
import Button from "$lib/components/kit/ui/Button.svelte";
|
||||
import DownloadButton from "$lib/components/kit/ui/DownloadButton.svelte";
|
||||
import type { PixelImage } from "$lib/core/types";
|
||||
|
||||
interface PreviewItem {
|
||||
toolId: string;
|
||||
title: string;
|
||||
url: string;
|
||||
}
|
||||
|
||||
interface MetaItem {
|
||||
caption: string;
|
||||
value: string;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
needsSource: boolean;
|
||||
sourceImg: PixelImage | null;
|
||||
sourceUrl: string;
|
||||
stepOutputs: PreviewItem[];
|
||||
resultUrl: string;
|
||||
resultMeta: MetaItem[];
|
||||
processing: boolean;
|
||||
chainError: string;
|
||||
onFile: (file: File) => void;
|
||||
onClearSource: () => void;
|
||||
onDownload: () => void;
|
||||
}
|
||||
|
||||
let {
|
||||
needsSource,
|
||||
sourceImg,
|
||||
sourceUrl,
|
||||
stepOutputs,
|
||||
resultUrl,
|
||||
resultMeta,
|
||||
processing,
|
||||
chainError,
|
||||
onFile,
|
||||
onClearSource,
|
||||
onDownload,
|
||||
}: Props = $props();
|
||||
</script>
|
||||
|
||||
<Panel title="Pipeline output" eyebrow="RESULT">
|
||||
{#if resultUrl}
|
||||
<DownloadButton label="Download result" onclick={onDownload} />
|
||||
{/if}
|
||||
|
||||
<div class="preview-body">
|
||||
{#if chainError}
|
||||
<EmptyState title="Pipeline failed" description={chainError} />
|
||||
{/if}
|
||||
{#if needsSource && !sourceImg}
|
||||
<Dropzone onfile={onFile} />
|
||||
{:else if needsSource && sourceImg}
|
||||
<Button variant="outline" onclick={onClearSource} label="Change image" />
|
||||
{/if}
|
||||
<PreviewStack>
|
||||
{#if needsSource && sourceImg}
|
||||
<PreviewTile label="SOURCE" caption="">
|
||||
<CheckerCanvas size="sm">
|
||||
<img class="tile-img" src={sourceUrl} alt="source" />
|
||||
</CheckerCanvas>
|
||||
</PreviewTile>
|
||||
{/if}
|
||||
{#each stepOutputs as out, i (out.toolId + i)}
|
||||
<PreviewTile
|
||||
label={`STEP ${String(i + 1).padStart(2, "0")}`}
|
||||
caption=""
|
||||
>
|
||||
<CheckerCanvas size="sm">
|
||||
<img class="tile-img" src={out.url} alt={out.title} />
|
||||
</CheckerCanvas>
|
||||
</PreviewTile>
|
||||
{/each}
|
||||
</PreviewStack>
|
||||
{#if processing}
|
||||
<StatusLine label="processing pipeline" />
|
||||
{/if}
|
||||
<MetaList items={resultMeta} />
|
||||
</div>
|
||||
</Panel>
|
||||
|
||||
<style>
|
||||
.preview-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
.tile-img {
|
||||
max-width: 100%;
|
||||
max-height: 220px;
|
||||
display: block;
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
</style>
|
||||
@@ -1,29 +0,0 @@
|
||||
<script lang="ts">
|
||||
import type { Snippet } from "svelte";
|
||||
|
||||
interface Props {
|
||||
pad?: string;
|
||||
children: Snippet;
|
||||
}
|
||||
|
||||
let { pad = "0", children }: Props = $props();
|
||||
</script>
|
||||
|
||||
<div class="preview-stack" style="padding:{pad};">
|
||||
{@render children()}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.preview-stack {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 12px;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
}
|
||||
@media (max-width: 1100px) {
|
||||
.preview-stack {
|
||||
grid-template-columns: repeat(3, minmax(220px, 1fr));
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,74 +0,0 @@
|
||||
<script lang="ts">
|
||||
import type { Snippet } from "svelte";
|
||||
|
||||
interface Props {
|
||||
label: string;
|
||||
caption: string;
|
||||
active?: boolean;
|
||||
children: Snippet;
|
||||
}
|
||||
|
||||
let { label, caption, active = false, children }: Props = $props();
|
||||
</script>
|
||||
|
||||
<div class="preview-tile" class:active>
|
||||
<div class="tile-canvas">{@render children()}</div>
|
||||
<div class="tile-label">
|
||||
<span>{label}</span>
|
||||
<b>{caption}</b>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.preview-tile {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--line);
|
||||
background: var(--background);
|
||||
&.active {
|
||||
border-color: var(--blue);
|
||||
}
|
||||
}
|
||||
.tile-canvas {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
min-height: 260px;
|
||||
min-height: clamp(300px, 22vw, 430px);
|
||||
overflow: hidden;
|
||||
aspect-ratio: 1.35;
|
||||
background-color: var(--checker-background);
|
||||
background-image:
|
||||
linear-gradient(45deg, var(--checker-background-cross) 25%, #0000 25%),
|
||||
linear-gradient(-45deg, var(--checker-background-cross) 25%, #0000 25%),
|
||||
linear-gradient(45deg, #0000 75%, var(--checker-background-cross) 75%),
|
||||
linear-gradient(-45deg, #0000 75%, var(--checker-background-cross) 75%);
|
||||
background-position:
|
||||
0 0,
|
||||
0 7px,
|
||||
7px -7px,
|
||||
-7px 0;
|
||||
background-size: 14px 14px;
|
||||
place-items: center;
|
||||
padding: 16px;
|
||||
display: grid;
|
||||
}
|
||||
.tile-label {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
padding: 8px;
|
||||
border-top: 1px solid var(--line);
|
||||
font: 9px var(--font-mono);
|
||||
color: var(--blue);
|
||||
}
|
||||
.tile-label span {
|
||||
font: 9px var(--font-mono);
|
||||
color: var(--blue);
|
||||
}
|
||||
.tile-label b {
|
||||
font: 400 9px var(--font-mono);
|
||||
color: var(--muted);
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
@@ -1,60 +0,0 @@
|
||||
<script lang="ts">
|
||||
import type { Snippet } from "svelte";
|
||||
import MonoLabel from "./MonoLabel.svelte";
|
||||
|
||||
interface Props {
|
||||
label: string;
|
||||
title: string;
|
||||
meta?: string;
|
||||
actions?: Snippet;
|
||||
unwrapActions?: boolean;
|
||||
}
|
||||
|
||||
let { label, title, meta, actions, unwrapActions = false }: Props = $props();
|
||||
</script>
|
||||
|
||||
<div class="section-label">
|
||||
<div class="section-text">
|
||||
<MonoLabel>{label}</MonoLabel>
|
||||
<strong
|
||||
>{title}{#if meta}<em>{meta}</em>{/if}</strong
|
||||
>
|
||||
</div>
|
||||
{#if actions}
|
||||
{#if unwrapActions}
|
||||
{@render actions()}
|
||||
{:else}
|
||||
<div class="section-actions">
|
||||
{@render actions()}
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.section-label {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid var(--line);
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
.section-text strong {
|
||||
display: block;
|
||||
margin-top: 5px;
|
||||
font: 600 14px var(--font-mono);
|
||||
color: var(--foreground);
|
||||
}
|
||||
.section-text em {
|
||||
color: #25a96a;
|
||||
font-style: normal;
|
||||
font-size: 10px;
|
||||
}
|
||||
.section-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,73 +0,0 @@
|
||||
<script lang="ts">
|
||||
import FileChip from "$lib/components/kit/FileChip.svelte";
|
||||
|
||||
interface FileInfo {
|
||||
name: string;
|
||||
size?: string;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
eyebrowA: string;
|
||||
eyebrowB?: string;
|
||||
title: string;
|
||||
lede?: string;
|
||||
file?: FileInfo;
|
||||
}
|
||||
|
||||
let { eyebrowA, eyebrowB, title, lede, file }: Props = $props();
|
||||
</script>
|
||||
|
||||
<div class="eyebrow">
|
||||
{eyebrowA} <span>/</span>
|
||||
{eyebrowB}
|
||||
</div>
|
||||
<div class="title-row">
|
||||
<div>
|
||||
<h1>{title}</h1>
|
||||
{#if lede}<p class="lede">{lede}</p>{/if}
|
||||
</div>
|
||||
{#if file}
|
||||
<FileChip name={file.name} size={file.size} />
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.eyebrow {
|
||||
font: 10px var(--font-mono);
|
||||
letter-spacing: 0.12em;
|
||||
color: var(--blue);
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.eyebrow span {
|
||||
margin: 0 7px;
|
||||
color: var(--muted);
|
||||
}
|
||||
.title-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
gap: 30px;
|
||||
margin-bottom: 56px;
|
||||
}
|
||||
h1 {
|
||||
margin: 0 0 16px;
|
||||
font-size: clamp(36px, 4vw, 64px);
|
||||
font-weight: 650;
|
||||
line-height: 1;
|
||||
letter-spacing: -0.06em;
|
||||
color: var(--foreground);
|
||||
max-width: 700px;
|
||||
}
|
||||
.lede {
|
||||
margin: 0;
|
||||
max-width: 550px;
|
||||
color: var(--muted);
|
||||
line-height: 1.6;
|
||||
}
|
||||
@media (max-width: 800px) {
|
||||
.title-row {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,35 +0,0 @@
|
||||
<script lang="ts">
|
||||
import type { Snippet } from "svelte";
|
||||
|
||||
interface Props {
|
||||
compact?: boolean;
|
||||
children: Snippet;
|
||||
}
|
||||
|
||||
let { compact = false, children }: Props = $props();
|
||||
</script>
|
||||
|
||||
<div class="controls" class:compact>
|
||||
{@render children()}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.controls {
|
||||
display: grid;
|
||||
grid-template-columns: 1.1fr 1fr 1.2fr;
|
||||
gap: 16px;
|
||||
}
|
||||
.controls.compact {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.controls,
|
||||
.controls.compact {
|
||||
grid-auto-flow: row;
|
||||
grid-auto-columns: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,47 +0,0 @@
|
||||
<script lang="ts">
|
||||
import Field from "./Field.svelte";
|
||||
|
||||
interface Props {
|
||||
label: string;
|
||||
value: number;
|
||||
min?: number;
|
||||
max?: number;
|
||||
step?: number;
|
||||
oninput?: (value: number) => void;
|
||||
}
|
||||
let { label, value = $bindable(), min, max, step, oninput }: Props = $props();
|
||||
|
||||
function handle(e: Event) {
|
||||
value = Number((e.target as HTMLInputElement).value);
|
||||
oninput?.(value);
|
||||
}
|
||||
</script>
|
||||
|
||||
<Field {label}>
|
||||
<input
|
||||
class="number-field"
|
||||
type="number"
|
||||
{min}
|
||||
{max}
|
||||
{step}
|
||||
{value}
|
||||
oninput={handle}
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<style>
|
||||
.number-field {
|
||||
width: 100%;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
color: var(--foreground);
|
||||
background: var(--background);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius);
|
||||
padding: 0.35rem 0.5rem;
|
||||
}
|
||||
.number-field:focus {
|
||||
outline: none;
|
||||
border-color: var(--blue);
|
||||
}
|
||||
</style>
|
||||
@@ -1,23 +0,0 @@
|
||||
<script lang="ts">
|
||||
import Toggle from "../ui/Toggle.svelte";
|
||||
|
||||
interface Props {
|
||||
label: string;
|
||||
checked: boolean;
|
||||
onchange?: (checked: boolean) => void;
|
||||
}
|
||||
|
||||
let { label, checked = $bindable(), onchange }: Props = $props();
|
||||
</script>
|
||||
|
||||
<div class="toggle-row">
|
||||
<span>{label}</span>
|
||||
<Toggle bind:checked {onchange} {label} />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.toggle-row {
|
||||
color: var(--foreground);
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
@@ -1,38 +0,0 @@
|
||||
<script lang="ts">
|
||||
import type { Snippet } from "svelte";
|
||||
|
||||
interface Props {
|
||||
settings: Snippet;
|
||||
preview: Snippet;
|
||||
}
|
||||
|
||||
let { settings, preview }: Props = $props();
|
||||
</script>
|
||||
|
||||
<div class="page-grid">
|
||||
<section class="ws-settings">{@render settings()}</section>
|
||||
{@render preview()}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.page-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(calc(50% - 28px), 1fr));
|
||||
align-items: start;
|
||||
gap: 56px;
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
margin: auto;
|
||||
padding: 60px clamp(24px, 4vw, 72px) 72px;
|
||||
}
|
||||
.ws-settings {
|
||||
min-width: 0;
|
||||
}
|
||||
@media (max-width: 800px) {
|
||||
.page-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--ws-gap-mobile);
|
||||
padding: 36px 16px 48px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -3,7 +3,6 @@
|
||||
</script>
|
||||
|
||||
<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")}>
|
||||
|
||||
Reference in New Issue
Block a user