mirror of https://github.com/VERT-sh/VERT.git
feat: add tooltips
works on desktop and mobile. also shows the clear button text on mobile only, tooltip on pc
This commit is contained in:
JovannMC
parent
1c98747fd9
commit
77763dd2d0
|
|
@ -1,8 +1,9 @@
|
|||
<script lang="ts">
|
||||
import { effects, files } from "$lib/store/index.svelte";
|
||||
import { effects, files, isMobile } from "$lib/store/index.svelte";
|
||||
import { FolderArchiveIcon, RefreshCw, Trash2Icon } from "lucide-svelte";
|
||||
import Panel from "../visual/Panel.svelte";
|
||||
import Dropdown from "./Dropdown.svelte";
|
||||
import Tooltip from "../visual/Tooltip.svelte";
|
||||
</script>
|
||||
|
||||
<Panel
|
||||
|
|
@ -27,13 +28,30 @@
|
|||
<FolderArchiveIcon size="24" />
|
||||
<p>Download all as .zip</p>
|
||||
</button>
|
||||
<button
|
||||
class="btn p-4 {$effects ? '' : '!scale-100'} flex gap-3 max-md:w-full"
|
||||
disabled={files.files.length === 0}
|
||||
onclick={() => files.files = []}
|
||||
>
|
||||
<Trash2Icon size="24" />
|
||||
</button>
|
||||
{#if $isMobile}
|
||||
<button
|
||||
class="btn p-4 {$effects
|
||||
? ''
|
||||
: '!scale-100'} flex gap-3 max-md:w-full"
|
||||
disabled={files.files.length === 0}
|
||||
onclick={() => (files.files = [])}
|
||||
>
|
||||
<Trash2Icon size="24" />
|
||||
<p>Remove all files</p>
|
||||
</button>
|
||||
{:else}
|
||||
<Tooltip text="Remove all files" position="right">
|
||||
<button
|
||||
class="btn p-4 {$effects
|
||||
? ''
|
||||
: '!scale-100'} flex gap-3 max-md:w-full"
|
||||
disabled={files.files.length === 0}
|
||||
onclick={() => (files.files = [])}
|
||||
>
|
||||
<Trash2Icon size="24" />
|
||||
</button>
|
||||
</Tooltip>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="w-full bg-separator h-0.5 flex md:hidden"></div>
|
||||
<div class="flex items-center gap-2">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,78 @@
|
|||
<script lang="ts">
|
||||
interface Props {
|
||||
children: () => any;
|
||||
text: string;
|
||||
position?: "top" | "bottom" | "left" | "right";
|
||||
}
|
||||
|
||||
let { children, text, position = "top" }: Props = $props();
|
||||
let showTooltip = $state(false);
|
||||
let timeout: number = 0;
|
||||
|
||||
function show() {
|
||||
timeout = setTimeout(() => {
|
||||
showTooltip = true;
|
||||
}, 500);
|
||||
}
|
||||
|
||||
function hide() {
|
||||
showTooltip = false;
|
||||
clearTimeout(timeout);
|
||||
}
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="relative inline-block"
|
||||
onmouseenter={show}
|
||||
onmouseleave={hide}
|
||||
onfocusin={show}
|
||||
onfocusout={hide}
|
||||
ontouchstart={show}
|
||||
ontouchend={hide}
|
||||
role="tooltip"
|
||||
>
|
||||
{@render children()}
|
||||
{#if showTooltip}
|
||||
<div class="tooltip tooltip-{position}">
|
||||
{text}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.tooltip {
|
||||
@apply absolute z-10 bg-panel-alt text-foreground border-2 border-stone-400 dynadark:border-white drop-shadow-lg text-xs px-4 py-2 rounded-full whitespace-nowrap pointer-events-none;
|
||||
}
|
||||
|
||||
.tooltip-top {
|
||||
@apply bottom-full left-1/2 -translate-x-1/2 mb-3;
|
||||
}
|
||||
|
||||
.tooltip-top::after {
|
||||
@apply content-[""] absolute top-full left-1/2 -ml-2 border-8 border-x-transparent border-b-transparent border-t-inherit;
|
||||
}
|
||||
|
||||
.tooltip-bottom {
|
||||
@apply top-full left-1/2 -translate-x-1/2 mt-3;
|
||||
}
|
||||
|
||||
.tooltip-bottom::after {
|
||||
@apply content-[""] absolute bottom-full left-1/2 -ml-2 border-8 border-x-transparent border-t-transparent border-b-inherit;
|
||||
}
|
||||
|
||||
.tooltip-left {
|
||||
@apply right-full top-1/2 -translate-y-1/2 mr-3;
|
||||
}
|
||||
|
||||
.tooltip-left::after {
|
||||
@apply content-[""] absolute top-1/2 left-full -mt-2 border-8 border-y-transparent border-r-transparent border-l-inherit;
|
||||
}
|
||||
|
||||
.tooltip-right {
|
||||
@apply left-full top-1/2 -translate-y-1/2 ml-3;
|
||||
}
|
||||
|
||||
.tooltip-right::after {
|
||||
@apply content-[""] absolute top-1/2 right-full -mt-2 border-8 border-y-transparent border-l-transparent border-r-inherit;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -4,6 +4,7 @@
|
|||
import Uploader from "$lib/components/functional/Uploader.svelte";
|
||||
import Panel from "$lib/components/visual/Panel.svelte";
|
||||
import ProgressBar from "$lib/components/visual/ProgressBar.svelte";
|
||||
import Tooltip from "$lib/components/visual/Tooltip.svelte";
|
||||
import {
|
||||
effects,
|
||||
files,
|
||||
|
|
@ -192,28 +193,35 @@
|
|||
onselect={(option) => handleSelect(option, file)}
|
||||
/>
|
||||
<div class="w-full flex items-center justify-between">
|
||||
<button
|
||||
class="btn {$effects
|
||||
? ''
|
||||
: '!scale-100'} p-0 w-14 h-14 text-black {isAudio
|
||||
? 'bg-accent-purple'
|
||||
: isVideo
|
||||
? 'bg-accent-red'
|
||||
: 'bg-accent-blue'}"
|
||||
disabled={!files.ready}
|
||||
onclick={file.convert}
|
||||
<Tooltip text="Convert this file" position="bottom">
|
||||
<button
|
||||
class="btn {$effects
|
||||
? ''
|
||||
: '!scale-100'} p-0 w-14 h-14 text-black {isAudio
|
||||
? 'bg-accent-purple'
|
||||
: isVideo
|
||||
? 'bg-accent-red'
|
||||
: 'bg-accent-blue'}"
|
||||
disabled={!files.ready}
|
||||
onclick={file.convert}
|
||||
>
|
||||
<RotateCwIcon size="24" />
|
||||
</button>
|
||||
</Tooltip>
|
||||
<Tooltip
|
||||
text="Download this file"
|
||||
position="bottom"
|
||||
>
|
||||
<RotateCwIcon size="24" />
|
||||
</button>
|
||||
<button
|
||||
class="btn {$effects
|
||||
? ''
|
||||
: '!scale-100'} p-0 w-14 h-14"
|
||||
onclick={file.download}
|
||||
disabled={!file.result}
|
||||
>
|
||||
<DownloadIcon size="24" />
|
||||
</button>
|
||||
<button
|
||||
class="btn {$effects
|
||||
? ''
|
||||
: '!scale-100'} p-0 w-14 h-14"
|
||||
onclick={file.download}
|
||||
disabled={!file.result}
|
||||
>
|
||||
<DownloadIcon size="24" />
|
||||
</button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue