UX: add fade-out animation to menus to show where they can be found again

This commit is contained in:
Pieter Vander Vennet 2024-05-08 13:54:14 +02:00
parent 733c2c7d14
commit 2bd3806f9a
9 changed files with 107 additions and 21 deletions

View file

@ -3,7 +3,7 @@
import { twJoin } from "tailwind-merge"
import { Translation } from "../i18n/Translation"
import { ariaLabel } from "../../Utils/ariaLabel"
import { ImmutableStore, Store } from "../../Logic/UIEventSource"
import { ImmutableStore, Store, UIEventSource } from "../../Logic/UIEventSource"
/**
* A round button with an icon and possible a small text, which hovers above the map
@ -12,9 +12,15 @@
export let cls = "m-0.5 p-0.5 sm:p-1 md:m-1"
export let enabled: Store<boolean> = new ImmutableStore(true)
export let arialabel: Translation = undefined
export let htmlElem: UIEventSource<HTMLElement> = undefined
let _htmlElem : HTMLElement
$: {
htmlElem?.setData(_htmlElem)
}
</script>
<button
bind:this={_htmlElem}
on:click={(e) => dispatch("click", e)}
on:keydown
use:ariaLabel={arialabel}