mirror of https://github.com/VERT-sh/VERT.git
fix: better checkbox & settings behaviour
doing this on the way to a national robotics competition lmao
This commit is contained in:
Maya
parent
575f444abc
commit
1ef2639ca5
|
|
@ -9,6 +9,8 @@
|
|||
let {
|
||||
class: className,
|
||||
value = $bindable(),
|
||||
checked = $bindable(),
|
||||
type = "text",
|
||||
disabled = false,
|
||||
extension,
|
||||
prefix,
|
||||
|
|
@ -17,14 +19,36 @@
|
|||
</script>
|
||||
|
||||
<div class="relative flex w-full {className}">
|
||||
<input
|
||||
{...rest}
|
||||
bind:value
|
||||
class="w-full p-3 rounded-lg bg-panel border-2 border-button
|
||||
{prefix ? 'pl-[2rem]' : 'pl-3'}
|
||||
{extension ? 'pr-[4rem]' : 'pr-3'}
|
||||
{disabled && 'opacity-50 cursor-not-allowed'}"
|
||||
/>
|
||||
{#if type === "checkbox"}
|
||||
<div class="relative w-full h-full">
|
||||
<input
|
||||
{...rest}
|
||||
type="checkbox"
|
||||
bind:checked
|
||||
class="w-full p-3 rounded-lg bg-panel border-2 border-button
|
||||
{prefix ? 'pl-[2rem]' : 'pl-3'}
|
||||
{extension ? 'pr-[4rem]' : 'pr-3'}
|
||||
{disabled && 'opacity-50 cursor-not-allowed'} appearance-none"
|
||||
/>
|
||||
{#if checked}
|
||||
<div class="absolute w-7 h-7 inset-0 flex items-center justify-center pointer-events-none">
|
||||
<svg class="w-6 h-6" fill="var(--bg-panel)" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{:else}
|
||||
<input
|
||||
{...rest}
|
||||
bind:value
|
||||
class="w-full p-3 rounded-lg bg-panel border-2 border-button
|
||||
{prefix ? 'pl-[2rem]' : 'pl-3'}
|
||||
{extension ? 'pr-[4rem]' : 'pr-3'}
|
||||
{disabled && 'opacity-50 cursor-not-allowed'}"
|
||||
/>
|
||||
{/if}
|
||||
|
||||
{#if prefix}
|
||||
<div class="absolute left-0 top-0 bottom-0 flex items-center px-2">
|
||||
<span class="text-sm text-gray-400 px-2 py-1 rounded">{prefix}</span
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@
|
|||
import Modal from "./Modal.svelte";
|
||||
import { m } from "$lib/paraglide/messages";
|
||||
import type { VertFile } from "$lib/types";
|
||||
import type { SettingDefinition } from "$lib/types/conversion-settings";
|
||||
|
||||
type Props = {
|
||||
file: VertFile | null;
|
||||
|
|
@ -14,13 +13,23 @@
|
|||
|
||||
let { file, onclose }: Props = $props();
|
||||
|
||||
let settings = $state<Record<string, any>>({});
|
||||
|
||||
const handleSettingChange = (key: string, value: any) => {
|
||||
if (!file) return;
|
||||
file.conversionSettings[key] = value;
|
||||
settings[key] = value;
|
||||
console.log(
|
||||
`Changed settings for ${file.name}: ${JSON.stringify(settings, null, 2)}`,
|
||||
);
|
||||
};
|
||||
|
||||
const applySettings = () => {
|
||||
onclose?.();
|
||||
if (!file) return;
|
||||
file.conversionSettings = { ...file.conversionSettings, ...settings };
|
||||
console.log(
|
||||
`Applied settings for ${file.name}: ${JSON.stringify(file.conversionSettings, null, 2)}`,
|
||||
);
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
@ -63,61 +72,64 @@
|
|||
{m["settings.conversion.no_settings"]?.() ||
|
||||
"No settings available for this converter"}
|
||||
</p>
|
||||
{:else}
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
{#each settings as setting (setting.key)}
|
||||
<div class="flex flex-col gap-2">
|
||||
<p class="text-sm font-bold">
|
||||
{setting.label}
|
||||
</p>
|
||||
<!-- prob unneeded -->
|
||||
{#if setting.description}
|
||||
<p class="text-xs text-muted">
|
||||
{setting.description}
|
||||
</p>
|
||||
{/if}
|
||||
{:else}
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
{#each settings as setting (setting.key)}
|
||||
<div class="flex flex-col gap-2">
|
||||
<p class="text-sm font-bold">
|
||||
{setting.label}
|
||||
</p>
|
||||
<!-- prob unneeded -->
|
||||
{#if setting.description}
|
||||
<p class="text-xs text-muted">
|
||||
{setting.description}
|
||||
</p>
|
||||
{/if}
|
||||
|
||||
{#if setting.type === "select"}
|
||||
<Dropdown
|
||||
options={setting.options?.map(
|
||||
(opt) => opt.value,
|
||||
) || []}
|
||||
selected={file.conversionSettings[
|
||||
setting.key
|
||||
] ?? setting.default}
|
||||
settingsStyle
|
||||
onselect={(value) =>
|
||||
handleSettingChange(setting.key, value)}
|
||||
/>
|
||||
{:else if setting.type === "boolean"}
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={file.conversionSettings[
|
||||
setting.key
|
||||
] ?? setting.default}
|
||||
onchange={(e) =>
|
||||
handleSettingChange(
|
||||
setting.key,
|
||||
e.currentTarget.checked,
|
||||
)}
|
||||
class="w-4 h-4"
|
||||
/>
|
||||
{:else}
|
||||
<FancyInput
|
||||
type={setting.type}
|
||||
value={file.conversionSettings[
|
||||
setting.key
|
||||
] ?? setting.default}
|
||||
oninput={(e) =>
|
||||
handleSettingChange(
|
||||
setting.key,
|
||||
e.detail.value,
|
||||
)}
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{#if setting.type === "select"}
|
||||
<Dropdown
|
||||
options={setting.options?.map(
|
||||
(opt) => opt.value,
|
||||
) || []}
|
||||
selected={file.conversionSettings[
|
||||
setting.key
|
||||
] ?? setting.default}
|
||||
settingsStyle
|
||||
onselect={(value) =>
|
||||
handleSettingChange(
|
||||
setting.key,
|
||||
value,
|
||||
)}
|
||||
/>
|
||||
{:else if setting.type === "boolean"}
|
||||
<FancyInput
|
||||
type="checkbox"
|
||||
checked={file.conversionSettings[
|
||||
setting.key
|
||||
] ?? setting.default}
|
||||
onchange={(e) =>
|
||||
handleSettingChange(
|
||||
setting.key,
|
||||
e.currentTarget.checked,
|
||||
)}
|
||||
|
||||
/>
|
||||
{:else}
|
||||
<FancyInput
|
||||
type={setting.type}
|
||||
value={file.conversionSettings[
|
||||
setting.key
|
||||
] ?? setting.default}
|
||||
oninput={(e) =>
|
||||
handleSettingChange(
|
||||
setting.key,
|
||||
e.currentTarget.value,
|
||||
)}
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -59,6 +59,8 @@
|
|||
--fg-accent: var(--accent-pink-muted);
|
||||
--fg-failure: var(--accent-red-alt);
|
||||
|
||||
--text-panel: hsl(0, 0%, 100%);
|
||||
|
||||
// backgrounds
|
||||
--bg: hsl(0, 0%, 95%);
|
||||
|
||||
|
|
@ -188,6 +190,8 @@
|
|||
// backgrounds
|
||||
--bg: hsl(220, 5%, 15%);
|
||||
|
||||
--text-panel: hsl(220, 4%, 24%);
|
||||
|
||||
--bg-gradient-from: hsla(303, 100%, 50%, 0.1);
|
||||
--bg-gradient-to: hsla(303, 100%, 50%, 0);
|
||||
--bg-gradient-pink-from: hsla(303, 100%, 50%, 0.1);
|
||||
|
|
@ -393,16 +397,20 @@ body {
|
|||
@apply outline outline-accent outline-2;
|
||||
}
|
||||
|
||||
input[type="range"] {
|
||||
@apply appearance-none bg-panel h-2 rounded-lg;
|
||||
input[type="checkbox"] {
|
||||
@apply appearance-none w-5 h-5 rounded-md bg-button border-2 border-button cursor-pointer transition-colors duration-200;
|
||||
}
|
||||
|
||||
input[type="range"]::-webkit-slider-thumb {
|
||||
@apply appearance-none w-4 h-4 bg-accent rounded-full cursor-pointer;
|
||||
input[type="checkbox"]:hover {
|
||||
@apply bg-button border-accent;
|
||||
}
|
||||
|
||||
input[type="range"]::-moz-range-thumb {
|
||||
@apply w-4 h-4 bg-accent rounded-full cursor-pointer;
|
||||
input[type="checkbox"]:checked {
|
||||
@apply bg-accent border-accent;
|
||||
}
|
||||
|
||||
input[type="checkbox"]:focus {
|
||||
@apply outline outline-accent outline-2;
|
||||
}
|
||||
|
||||
hr {
|
||||
|
|
|
|||
Loading…
Reference in New Issue