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

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

@ -57,7 +57,13 @@
}
.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 {

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

@ -14,7 +14,7 @@
vertdLoaded,
} from "$lib/store/index.svelte";
import { addToast } from "$lib/store/ToastProvider";
import { VertFile, type Categories } from "$lib/types";
import { VertFile } from "$lib/types";
import {
AudioLines,
BookText,
@ -129,15 +129,25 @@
<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">
{#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}
<AudioLines size="24" class="flex-shrink-0" />
<Tooltip text="Audio file" position="bottom">
<AudioLines size="24" class="flex-shrink-0" />
</Tooltip>
{: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}
<BookText size="24" class="flex-shrink-0" />
<Tooltip text="Document file" position="bottom">
<BookText size="24" class="flex-shrink-0" />
</Tooltip>
{:else}
<ImageIcon size="24" class="flex-shrink-0" />
<Tooltip text="Image file" position="bottom">
<ImageIcon size="24" class="flex-shrink-0" />
</Tooltip>
{/if}
<div class="flex-grow overflow-hidden">
{#if file.processing}