RomanNum3ral
/
vert
mirror of https://github.com/VERT-sh/VERT.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Show "Set all to" 

Shows the "Set all to" option all the time, defaulting to being disabled with "N/A" until a file is uploaded
This commit is contained in:
JovannMC 2025-01-06 18:52:08 +03:00
parent e60b256bcf
commit 1667d6a98c
No known key found for this signature in database
2 changed files with 16 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/lib/components/functional/ConversionPanel.svelte
View File

@ -5,7 +5,9 @@
import Dropdown from "./Dropdown.svelte";
</script>
<Panel class="w-full h-auto flex items-center justify-between flex-col md:flex-row gap-4">
<Panel
class="w-full h-auto flex items-center justify-between flex-col md:flex-row gap-4"
>
<div class="flex items-center flex-col md:flex-row gap-2.5 max-md:w-full">
<button
onclick={() => files.convertAll()}
@ -26,15 +28,18 @@
</div>
<div class="w-full bg-separator h-0.5 flex md:hidden"></div>
<div class="flex items-center gap-2">
<p class="whitespace-nowrap text-xl md:text-base">Set all to</p>
{#if files.requiredConverters.length === 1}
<p class="whitespace-nowrap text-xl md:text-base">Set all to</p>
<Dropdown
onselect={(r) => files.files.forEach((f) => {
f.to = r;
f.result = null;
})}
onselect={(r) =>
files.files.forEach((f) => {
f.to = r;
f.result = null;
})}
options={files.files[0]?.converter?.supportedFormats || []}
/>
{:else}
<Dropdown options={["N/A"]} disabled />
{/if}
</div>
</Panel>

8
src/lib/components/functional/Dropdown.svelte
View File

@ -1,20 +1,21 @@
<script lang="ts">
import { blur, duration, flip, transition } from "$lib/animation";
import { blur, duration, transition } from "$lib/animation";
import { ChevronDown } from "lucide-svelte";
import { onMount } from "svelte";
import { quintOut } from "svelte/easing";
import { fade } from "svelte/transition";
type Props = {
options: string[];
selected?: string;
onselect?: (option: string) => void;
disabled?: boolean
};
let {
options,
selected = $bindable(options[0]),
onselect,
disabled
}: Props = $props();
let open = $state(false);
@ -49,10 +50,11 @@
<div class="relative w-full min-w-fit" bind:this={dropdown}>
<button
class="font-display w-full min-w-fit justify-between overflow-hidden relative cursor-pointer px-3 bg-button flex items-center rounded-full p-2 focus:!outline-none"
class="font-display w-full min-w-fit justify-between overflow-hidden relative cursor-pointer px-3 bg-button {disabled ? 'opacity-50' : ''} flex items-center rounded-full p-2 focus:!outline-none"
onclick={toggle}
onmouseenter={() => (hover = true)}
onmouseleave={() => (hover = false)}
{disabled}
>
<!-- <p>{selected}</p> -->
<div class="grid grid-cols-1 grid-rows-1 w-fit text-left flex-grow-0">