Nikolay Tatarinov
2bd2c8dbca
- Added a custom light theme in app.css to match the dark theme's palette. - Introduced AdminBreadcrumbs component for improved navigation in admin pages. - Implemented Skeleton component for loading states in various views. - Added ToastContainer for displaying notifications and alerts. - Enhanced MapView with loading indicators and improved marker handling. - Updated MapCoordsDisplay to allow copying of shareable links. - Refactored MapControls and MapContextMenu for better usability. - Improved user experience in profile and admin pages with loading states and search functionality.
51 lines
1.7 KiB
Vue
51 lines
1.7 KiB
Vue
<template>
|
|
<div
|
|
v-if="displayCoords"
|
|
class="absolute bottom-2 right-2 z-[501] rounded-lg px-3 py-2 font-mono text-sm bg-base-100/95 backdrop-blur-sm border border-base-300/50 shadow cursor-pointer select-none transition-all hover:border-primary/50 hover:bg-base-100"
|
|
aria-label="Current grid position and zoom — click to copy share link"
|
|
:title="copied ? 'Copied!' : 'Click to copy share link'"
|
|
role="button"
|
|
tabindex="0"
|
|
@click="copyShareUrl"
|
|
@keydown.enter="copyShareUrl"
|
|
@keydown.space.prevent="copyShareUrl"
|
|
>
|
|
<span class="relative">
|
|
{{ mapid }} · {{ displayCoords.x }}, {{ displayCoords.y }} · z{{ displayCoords.z }}
|
|
<span
|
|
v-if="copied"
|
|
class="absolute -top-6 left-1/2 -translate-x-1/2 whitespace-nowrap rounded bg-primary px-2 py-1 text-xs font-sans text-primary-content shadow"
|
|
>
|
|
Copied!
|
|
</span>
|
|
</span>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const props = defineProps<{
|
|
mapid: number
|
|
displayCoords: { x: number; y: number; z: number } | null
|
|
}>()
|
|
|
|
const { fullUrl } = useAppPaths()
|
|
const copied = ref(false)
|
|
let copyTimeout: ReturnType<typeof setTimeout> | null = null
|
|
|
|
function copyShareUrl() {
|
|
if (!props.displayCoords) return
|
|
const path = `grid/${props.mapid}/${props.displayCoords.x}/${props.displayCoords.y}/${props.displayCoords.z}`
|
|
const url = fullUrl(path)
|
|
if (import.meta.client && navigator.clipboard?.writeText) {
|
|
navigator.clipboard.writeText(url).then(() => {
|
|
copied.value = true
|
|
if (copyTimeout) clearTimeout(copyTimeout)
|
|
copyTimeout = setTimeout(() => {
|
|
copied.value = false
|
|
copyTimeout = null
|
|
}, 2000)
|
|
})
|
|
}
|
|
}
|
|
</script>
|