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

feat: combine tool in single card

Browse Source
This commit is contained in:
Ku6epXBOCTuK
2026-08-24 08:31:13 +05:00
parent 95ee598875
commit 702b96261d
10 changed files with 267 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/lib/components/ui/CheckboxField.svelte
+25 -11
View File
@@ -9,34 +9,48 @@
let { id, label, checked = $bindable(false), hint }: Props = $props();
</script>
<div class="checkbox">
<input id={id} type="checkbox" bind:checked />
<label for={id}>{label}</label>
<div class="checkbox-row">
<label class="checkbox" for={id}>
<input id={id} type="checkbox" bind:checked />
{label}
</label>
{#if hint}
<p class="hint text-caption text-muted">{hint}</p>
{/if}
</div>
{#if hint}
<p class="hint text-caption text-muted">{hint}</p>
{/if}
<style>
.checkbox-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
padding: calc(var(--space-1) + 2px) 0;
border-bottom: 1px dashed var(--border);
}
.checkbox {
display: flex;
align-items: center;
gap: var(--space-2);
margin-bottom: var(--space-3);
cursor: pointer;
font-size: var(--text-caption, var(--text-s));
color: var(--text-muted);
}
input[type='checkbox'] {
width: 1rem;
height: 1rem;
cursor: pointer;
accent-color: var(--accent);
}
label {
font-size: var(--text-m);
cursor: pointer;
label:hover {
color: var(--text);
}
.hint {
margin: calc(-1 * var(--space-3)) 0 var(--space-3);
margin: 0;
text-align: right;
}
</style>
web/src/lib/components/ui/Field.svelte
+30 -5
View File
@@ -13,17 +13,42 @@
<div class="field">
<label class="text-caption text-muted" for={id}>{label}</label>
{@render children()}
{#if hint}
<p class="hint text-caption text-muted">{hint}</p>
{/if}
<div class="control-slot">
{@render children()}
{#if hint}
<p class="hint text-caption text-muted">{hint}</p>
{/if}
</div>
</div>
<style>
.field {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
padding: calc(var(--space-1) + 2px) 0;
border-bottom: 1px dashed var(--border);
}
label {
flex: none;
max-width: 45%;
text-align: left;
}
.control-slot {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: var(--space-1);
margin-bottom: var(--space-3);
}
.hint {
margin: 0;
align-self: flex-end;
text-align: right;
}
</style>
web/src/lib/components/ui/SliderField.svelte
+7 -5
View File
@@ -63,19 +63,21 @@
display: flex;
align-items: center;
gap: var(--space-1);
max-width: var(--control-max-width);
width: 100%;
max-width: 22rem;
}
input[type='range'] {
flex: 1;
min-width: 0;
min-width: 3rem;
accent-color: var(--accent);
margin: 0;
}
.step {
flex: none;
width: 1.7rem;
height: 1.7rem;
width: 1.5rem;
height: 1.5rem;
display: inline-flex;
align-items: center;
justify-content: center;
@@ -84,7 +86,7 @@
border-radius: var(--radius-s);
background: var(--surface);
color: var(--text);
font-size: 0.9rem;
font-size: 0.85rem;
line-height: 1;
cursor: pointer;
transition: