forked from MapComplete/MapComplete
UX: add popup indicating "logged in as"
This commit is contained in:
parent
886b25c0b4
commit
89ba8ce2c1
3 changed files with 42 additions and 2 deletions
|
@ -14,7 +14,6 @@
|
||||||
let open = true
|
let open = true
|
||||||
|
|
||||||
function showFor(timeoutSeconds: number = 5) {
|
function showFor(timeoutSeconds: number = 5) {
|
||||||
console.trace("Showing for", timeoutSeconds)
|
|
||||||
open = true
|
open = true
|
||||||
window.setTimeout(() => {
|
window.setTimeout(() => {
|
||||||
open = false
|
open = false
|
||||||
|
@ -36,7 +35,7 @@
|
||||||
})
|
})
|
||||||
let explanation = gpsState.gpsStateExplanation
|
let explanation = gpsState.gpsStateExplanation
|
||||||
onDestroy(
|
onDestroy(
|
||||||
explanation.addCallbackD(
|
explanation.stabilized(50).addCallbackD(
|
||||||
expl => {
|
expl => {
|
||||||
if (expl) {
|
if (expl) {
|
||||||
showFor(5)
|
showFor(5)
|
||||||
|
|
39
src/UI/BigComponents/WelcomeBack.svelte
Normal file
39
src/UI/BigComponents/WelcomeBack.svelte
Normal 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>
|
||||||
|
|
|
@ -53,6 +53,7 @@
|
||||||
import TagRenderingAnswer from "./Popup/TagRendering/TagRenderingAnswer.svelte"
|
import TagRenderingAnswer from "./Popup/TagRendering/TagRenderingAnswer.svelte"
|
||||||
import GpsElementHelper from "./BigComponents/GpsElementHelper.svelte"
|
import GpsElementHelper from "./BigComponents/GpsElementHelper.svelte"
|
||||||
import { dragDetection } from "../Utils/dragDetection"
|
import { dragDetection } from "../Utils/dragDetection"
|
||||||
|
import WelcomeBack from "./BigComponents/WelcomeBack.svelte"
|
||||||
export let state: WithSearchState
|
export let state: WithSearchState
|
||||||
new TitleHandler(state.selectedElement, state)
|
new TitleHandler(state.selectedElement, state)
|
||||||
|
|
||||||
|
@ -353,6 +354,7 @@
|
||||||
on:keydown={forwardEventToMap}
|
on:keydown={forwardEventToMap}
|
||||||
>
|
>
|
||||||
<MenuIcon class="h-6 w-6 cursor-pointer" />
|
<MenuIcon class="h-6 w-6 cursor-pointer" />
|
||||||
|
<WelcomeBack {state}/>
|
||||||
</MapControlButton>
|
</MapControlButton>
|
||||||
|
|
||||||
<MapControlButton
|
<MapControlButton
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue