mirror of
https://github.com/Ku6epXBOCTuK/easy-png-tools.git
synced 2026-09-14 13:36:36 +00:00
fix: update i18n - fields components
This commit is contained in:
@@ -4,7 +4,8 @@
|
||||
FieldSpecKind,
|
||||
ToolSchema,
|
||||
} from "$lib/registry-schema";
|
||||
import { fieldLabel } from "$lib/i18n/schema-tool-strings";
|
||||
import { fieldLabel, groupLabel } from "$lib/i18n/schema-tool-strings";
|
||||
import { t } from "$lib/i18n/t";
|
||||
import { RotateCcw } from "@lucide/svelte";
|
||||
import type { Component } from "svelte";
|
||||
import DimensionField from "./fields/DimensionField.svelte";
|
||||
@@ -89,7 +90,7 @@
|
||||
|
||||
{#each layoutGroups as group (group.key)}
|
||||
{#if group.title}
|
||||
<span class="group-title">{group.title}</span>
|
||||
<span class="group-title">{groupLabel(group.title)}</span>
|
||||
{/if}
|
||||
<div
|
||||
class="group-fields"
|
||||
@@ -111,9 +112,10 @@
|
||||
|
||||
<div class="panel-foot">
|
||||
<button class="reset-btn" onclick={onreset}>
|
||||
<RotateCcw size={14} /> Reset
|
||||
<RotateCcw size={14} />
|
||||
{t("ui.reset")}
|
||||
</button>
|
||||
<span class="auto-note"><i></i> updates automatically</span>
|
||||
<span class="auto-note"><i></i> {t("ui.autoUpdate")}</span>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
<script lang="ts">
|
||||
import { t } from "$lib/i18n/t";
|
||||
import type {
|
||||
Dimension,
|
||||
DimensionSpec,
|
||||
@@ -37,7 +38,7 @@
|
||||
<span class="dimension-label">{label}</span>
|
||||
<div class="dimension-field">
|
||||
<label class="dimension-axis">
|
||||
<span>Width</span>
|
||||
<span>{t("ui.width")}</span>
|
||||
<input
|
||||
type="number"
|
||||
min={sp.min}
|
||||
@@ -48,7 +49,7 @@
|
||||
/>
|
||||
</label>
|
||||
<label class="dimension-axis">
|
||||
<span>Height</span>
|
||||
<span>{t("ui.height")}</span>
|
||||
<input
|
||||
type="number"
|
||||
min={sp.min}
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { t } from "$lib/i18n/t";
|
||||
|
||||
interface Preset {
|
||||
value: number;
|
||||
label: string;
|
||||
@@ -15,7 +17,7 @@
|
||||
}
|
||||
|
||||
let {
|
||||
label = "Angle",
|
||||
label = t("ui.angle"),
|
||||
value,
|
||||
min = 0,
|
||||
max = 360,
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
<script lang="ts">
|
||||
import { t } from "$lib/i18n/t";
|
||||
import type {
|
||||
ColorList,
|
||||
ColorListSpec,
|
||||
@@ -59,14 +60,16 @@
|
||||
class="remove"
|
||||
onclick={() => removeColor(i)}
|
||||
disabled={current.length <= 1}
|
||||
aria-label="Remove color"
|
||||
aria-label={t("ui.removeColor")}
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
<button type="button" class="add" onclick={addColor}>+ Add color</button>
|
||||
<button type="button" class="add" onclick={addColor}
|
||||
>{t("ui.addColor")}</button
|
||||
>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
<script lang="ts">
|
||||
import { t } from "$lib/i18n/t";
|
||||
import type { TextFont } from "$lib/core/domText";
|
||||
import type {
|
||||
FieldSpec,
|
||||
@@ -35,10 +36,10 @@
|
||||
onchange?.({ ...current, [key]: val });
|
||||
}
|
||||
|
||||
const FONTS: { value: TextFont; label: string }[] = [
|
||||
{ value: "sans", label: "Sans" },
|
||||
{ value: "serif", label: "Serif" },
|
||||
{ value: "mono", label: "Mono" },
|
||||
const FONTS: { value: TextFont; labelKey: string }[] = [
|
||||
{ value: "sans", labelKey: "ui.fontSans" },
|
||||
{ value: "serif", labelKey: "ui.fontSerif" },
|
||||
{ value: "mono", labelKey: "ui.fontMono" },
|
||||
];
|
||||
</script>
|
||||
|
||||
@@ -46,7 +47,7 @@
|
||||
<span class="fs-label">{label}</span>
|
||||
<div class="fs-grid">
|
||||
<label class="fs-cell">
|
||||
<span class="fs-sub">Font</span>
|
||||
<span class="fs-sub">{t("ui.font")}</span>
|
||||
<select
|
||||
class="fs-select"
|
||||
value={current.font}
|
||||
@@ -54,12 +55,12 @@
|
||||
set("font", (e.target as HTMLSelectElement).value as TextFont)}
|
||||
>
|
||||
{#each FONTS as option (option.value)}
|
||||
<option value={option.value}>{option.label}</option>
|
||||
<option value={option.value}>{t(option.labelKey)}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</label>
|
||||
<label class="fs-cell">
|
||||
<span class="fs-sub">Size</span>
|
||||
<span class="fs-sub">{t("ui.size")}</span>
|
||||
<input
|
||||
class="fs-input"
|
||||
type="number"
|
||||
@@ -71,7 +72,7 @@
|
||||
/>
|
||||
</label>
|
||||
<label class="fs-cell">
|
||||
<span class="fs-sub">Color</span>
|
||||
<span class="fs-sub">{t("ui.color")}</span>
|
||||
<span class="fs-color">
|
||||
<span class="swatch" style="background:{current.color}"></span>
|
||||
<input
|
||||
@@ -83,7 +84,7 @@
|
||||
</span>
|
||||
</label>
|
||||
<label class="fs-cell fs-bold">
|
||||
<span class="fs-sub">Bold</span>
|
||||
<span class="fs-sub">{t("ui.bold")}</span>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={current.bold}
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<script lang="ts">
|
||||
import AngleControl from "./AngleControl.svelte";
|
||||
import { t } from "$lib/i18n/t";
|
||||
import type { FieldSpec, Gradient, GradientSpec } from "$lib/registry-schema";
|
||||
|
||||
interface Props {
|
||||
@@ -32,7 +33,7 @@
|
||||
<span class="gradient-label">{label}</span>
|
||||
<div class="gradient-colors">
|
||||
<label class="color-field">
|
||||
<span>From</span>
|
||||
<span>{t("ui.from")}</span>
|
||||
<span class="swatch" style="background:{current.from}"></span>
|
||||
<input
|
||||
type="color"
|
||||
@@ -41,7 +42,7 @@
|
||||
/>
|
||||
</label>
|
||||
<label class="color-field">
|
||||
<span>To</span>
|
||||
<span>{t("ui.to")}</span>
|
||||
<span class="swatch" style="background:{current.to}"></span>
|
||||
<input
|
||||
type="color"
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
<script lang="ts">
|
||||
import { t } from "$lib/i18n/t";
|
||||
import type { FieldSpec, Plate, PlateSpec } from "$lib/registry-schema";
|
||||
|
||||
interface Props {
|
||||
@@ -31,7 +32,7 @@
|
||||
<span class="plate-label">{label}</span>
|
||||
<div class="plate-row {current.enabled ? '' : 'off'}">
|
||||
<label class="plate-enabled">
|
||||
<span>Backing plate</span>
|
||||
<span>{t("ui.backingPlate")}</span>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={current.enabled}
|
||||
@@ -49,7 +50,7 @@
|
||||
</label>
|
||||
<label class="plate-opacity">
|
||||
<span>
|
||||
Opacity
|
||||
{t("ui.opacity")}
|
||||
<output>{current.opacity}%</output>
|
||||
</span>
|
||||
<input
|
||||
|
||||
Reference in New Issue
Block a user