forked from MapComplete/MapComplete
42 lines
1.1 KiB
Svelte
42 lines
1.1 KiB
Svelte
<script lang="ts">
|
|
import { Popover } from "flowbite-svelte"
|
|
import { fade } from "svelte/transition"
|
|
import { OsmConnection } from "../../Logic/Osm/OsmConnection"
|
|
import { onDestroy } from "svelte"
|
|
|
|
let open = false
|
|
export let state: { osmConnection: OsmConnection }
|
|
let userdetails = state.osmConnection.userDetails
|
|
let username = userdetails.mapD((ud) => ud.name, onDestroy)
|
|
username.addCallbackAndRunD((ud) => {
|
|
if (ud) {
|
|
open = true
|
|
window.setTimeout(() => {
|
|
open = false
|
|
}, 3000)
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<Popover
|
|
class="mt-4 hidden sm:block"
|
|
defaultClass="py-2 px-3 w-fit "
|
|
trigger="null"
|
|
placement="bottom"
|
|
transition={(e) => fade(e, { duration: 150 })}
|
|
bind:open
|
|
>
|
|
{#if $username !== undefined}
|
|
<div style="width: max-content" class="flex items-center">
|
|
{#if $userdetails.img}
|
|
<img src={$userdetails.img} alt="avatar" class="mr-4 h-10 w-10 rounded-full" />
|
|
{/if}
|
|
<div>
|
|
<div>Welcome back</div>
|
|
<div class="normal-background" style="width: max-content">
|
|
<b>{$username}</b>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
</Popover>
|