UX: add popup indicating "logged in as"

This commit is contained in:
Pieter Vander Vennet 2025-06-07 13:31:36 +02:00
parent 886b25c0b4
commit 89ba8ce2c1
3 changed files with 42 additions and 2 deletions

View file

@ -14,7 +14,6 @@
let open = true
function showFor(timeoutSeconds: number = 5) {
console.trace("Showing for", timeoutSeconds)
open = true
window.setTimeout(() => {
open = false
@ -36,7 +35,7 @@
})
let explanation = gpsState.gpsStateExplanation
onDestroy(
explanation.addCallbackD(
explanation.stabilized(50).addCallbackD(
expl => {
if (expl) {
showFor(5)

View file

@ -0,0 +1,39 @@
<script lang="ts">
import { Avatar, Popover } from "flowbite-svelte"
import { fade } from "svelte/transition"
import Tr from "../Base/Tr.svelte"
import { OsmConnection } from "../../Logic/Osm/OsmConnection"
let open = false
export let state: { osmConnection: OsmConnection }
let userdetails = state.osmConnection.userDetails
userdetails.addCallbackAndRunD(ud => {
if (ud) {
open = true
window.setTimeout(() => {
open = false
}, 5000)
}
})
</script>
<Popover class="mt-4" defaultClass="py-2 px-3 w-fit " trigger=null placement="bottom"
transition={e => fade(e, {duration: 150})} bind:open>
{#if $userdetails !== undefined}
<div style="width: max-content" class="flex items-center">
{#if $userdetails.img}
<img src={$userdetails.img } alt="profile picture" class="w-8 h-8 rounded-full mr-4" />
{/if}
<div>
<div>Welcome back</div>
<div class="normal-background" style="width: max-content">
<b>{$userdetails?.name}</b>
</div>
</div>
</div>
{/if}
</Popover>

View file

@ -53,6 +53,7 @@
import TagRenderingAnswer from "./Popup/TagRendering/TagRenderingAnswer.svelte"
import GpsElementHelper from "./BigComponents/GpsElementHelper.svelte"
import { dragDetection } from "../Utils/dragDetection"
import WelcomeBack from "./BigComponents/WelcomeBack.svelte"
export let state: WithSearchState
new TitleHandler(state.selectedElement, state)
@ -353,6 +354,7 @@
on:keydown={forwardEventToMap}
>
<MenuIcon class="h-6 w-6 cursor-pointer" />
<WelcomeBack {state}/>
</MapControlButton>
<MapControlButton