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

feat: more tooltips & fixes

This commit is contained in:
JovannMC 2025-05-28 16:27:31 +03:00
parent 31a3fa08b9
commit af5920e698
No known key found for this signature in database
3 changed files with 37 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/lib/components/layout/Navbar/Base.svelte
View File

@ -21,6 +21,7 @@
import Panel from "../../visual/Panel.svelte"; import Panel from "../../visual/Panel.svelte";
import Logo from "../../visual/svg/Logo.svelte"; import Logo from "../../visual/svg/Logo.svelte";
import { beforeNavigate } from "$app/navigation"; import { beforeNavigate } from "$app/navigation";
import Tooltip from "$lib/components/visual/Tooltip.svelte";
const items = $derived< const items = $derived<
{ {
@ -182,16 +183,18 @@
{@render link(item, i)} {@render link(item, i)}
{/each} {/each}
<div class="w-0.5 bg-separator h-full hidden md:flex"></div> <div class="w-0.5 bg-separator h-full hidden md:flex"></div>
<button <Tooltip text="Toggle theme" position="right">
onclick={() => { <button
const isDark = onclick={() => {
document.documentElement.classList.contains("dark"); const isDark =
setTheme(isDark ? "light" : "dark"); document.documentElement.classList.contains("dark");
}} setTheme(isDark ? "light" : "dark");
class="w-14 h-full items-center justify-center hidden md:flex" }}
> class="w-14 h-full items-center justify-center hidden md:flex"
<SunIcon class="dynadark:hidden block" /> >
<MoonIcon class="dynadark:block hidden" /> <SunIcon class="dynadark:hidden block" />
</button> <MoonIcon class="dynadark:block hidden" />
</button>
</Tooltip>
</Panel> </Panel>
</div> </div>

8
src/lib/components/visual/Tooltip.svelte
View File

@ -57,7 +57,13 @@
} }
.tooltip-top::after { .tooltip-top::after {
@apply content-[""] absolute top-full left-1/2 -ml-2 border-x-transparent border-b-transparent border-t-inherit; @apply content-[""] absolute top-full left-1/2 -translate-x-1/2 border-8 border-x-transparent border-b-transparent;
}
.tooltip-top::before {
border-width: calc(var(--border-size) + 8px);
margin-left: calc(-1 * (var(--border-size) + 8px));
@apply content-[""] absolute top-full left-1/2 border-x-transparent border-b-transparent border-t-inherit;
} }
.tooltip-bottom { .tooltip-bottom {

22
src/routes/convert/+page.svelte
View File

@ -14,7 +14,7 @@
vertdLoaded, vertdLoaded,
} from "$lib/store/index.svelte"; } from "$lib/store/index.svelte";
import { addToast } from "$lib/store/ToastProvider"; import { addToast } from "$lib/store/ToastProvider";
import { VertFile, type Categories } from "$lib/types"; import { VertFile } from "$lib/types";
import { import {
AudioLines, AudioLines,
BookText, BookText,
@ -129,15 +129,25 @@
<Panel class="p-5 flex flex-col min-w-0 gap-4 relative"> <Panel class="p-5 flex flex-col min-w-0 gap-4 relative">
<div class="flex-shrink-0 h-8 w-full flex items-center gap-2"> <div class="flex-shrink-0 h-8 w-full flex items-center gap-2">
{#if !converters.length} {#if !converters.length}
<FileQuestionIcon size="24" class="flex-shrink-0" /> <Tooltip text="Unknown file type" position="bottom">
<FileQuestionIcon size="24" class="flex-shrink-0" />
</Tooltip>
{:else if isAudio} {:else if isAudio}
<AudioLines size="24" class="flex-shrink-0" /> <Tooltip text="Audio file" position="bottom">
<AudioLines size="24" class="flex-shrink-0" />
</Tooltip>
{:else if isVideo} {:else if isVideo}
<FilmIcon size="24" class="flex-shrink-0" /> <Tooltip text="Video file" position="bottom">
<FilmIcon size="24" class="flex-shrink-0" />
</Tooltip>
{:else if isDocument} {:else if isDocument}
<BookText size="24" class="flex-shrink-0" /> <Tooltip text="Document file" position="bottom">
<BookText size="24" class="flex-shrink-0" />
</Tooltip>
{:else} {:else}
<ImageIcon size="24" class="flex-shrink-0" /> <Tooltip text="Image file" position="bottom">
<ImageIcon size="24" class="flex-shrink-0" />
</Tooltip>
{/if} {/if}
<div class="flex-grow overflow-hidden"> <div class="flex-grow overflow-hidden">
{#if file.processing} {#if file.processing}