elgaard/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

Use same close-buttons everywhere

Browse source
This commit is contained in:
Pieter Vander Vennet 2024-09-02 00:26:02 +02:00
parent b353be5360
commit 2f1b0c0ae2
14 changed files with 161 additions and 136 deletions
Download patch file Download diff file Expand all files Collapse all files

26
src/UI/Base/FloatOver.svelte
View file

@ -3,6 +3,7 @@
import { ariaLabel } from "../../Utils/ariaLabel"
import Translations from "../i18n/Translations"
import { XCircleIcon } from "@babeard/svelte-heroicons/solid"
import { CloseButton } from "flowbite-svelte"
/**
* The slotted element will be shown on top, with a lower-opacity border
@ -29,7 +30,7 @@
}}
>
<div
class="content normal-background pointer-events-auto h-full"
class="content relative normal-background pointer-events-auto h-full"
on:click|stopPropagation={() => {}}
>
<div class="h-full rounded-xl">
@ -37,22 +38,21 @@
</div>
<slot name="close-button">
<!-- The close button is placed _after_ the default slot in order to always paint it on top -->
<div
class="absolute right-10 top-10 m-0 cursor-pointer rounded-full border-0 border-none bg-white p-0"
style="margin: -0.25rem"
on:click={() => dispatch("close")}
use:ariaLabel={Translations.t.general.backToMap}
>
<XCircleIcon class="h-8 w-8" />
<div class="absolute top-0 right-0">
<CloseButton class="normal-background mt-2 mr-2"
on:click={() => dispatch("close")}
/>
</div>
</slot>
</div>
</div>
<style>
.content {
border-radius: 0.5rem;
overflow-x: hidden;
box-shadow: 0 0 1rem #00000088;
}
.content {
border-radius: 0.5rem;
overflow-x: hidden;
box-shadow: 0 0 1rem #00000088;
}
</style>