Nikolay Tatarinov
7f990c0c11
- Added fullscreen and measurement mode buttons for improved map interaction. - Introduced a bookmarks section to save and navigate to locations easily. - Implemented a search feature for quick access to coordinates and markers. - Added keyboard shortcuts overlay for enhanced usability. - Refactored MapControls and MapControlsContent to support new functionalities. - Introduced new icon components for better visual representation in the UI.
85 lines
3.0 KiB
Vue
85 lines
3.0 KiB
Vue
<template>
|
||
<Teleport to="body">
|
||
<Transition name="shortcuts-modal">
|
||
<div
|
||
v-if="open"
|
||
class="fixed inset-0 z-[1200] flex items-center justify-center p-4 bg-black/50"
|
||
role="dialog"
|
||
aria-modal="true"
|
||
aria-label="Keyboard shortcuts"
|
||
@click.self="$emit('close')"
|
||
>
|
||
<div
|
||
class="bg-base-100 rounded-xl shadow-2xl border border-base-300 max-w-md w-full p-6"
|
||
@click.stop
|
||
>
|
||
<div class="flex items-center justify-between mb-4">
|
||
<h2 class="text-lg font-semibold flex items-center gap-2">
|
||
<icons-icon-keyboard class="size-5" />
|
||
Keyboard shortcuts
|
||
</h2>
|
||
<button
|
||
type="button"
|
||
class="btn btn-ghost btn-sm btn-circle"
|
||
aria-label="Close"
|
||
@click="$emit('close')"
|
||
>
|
||
×
|
||
</button>
|
||
</div>
|
||
<dl class="space-y-2 text-sm">
|
||
<div class="flex justify-between gap-4 py-1 border-b border-base-300/50">
|
||
<dt class="text-base-content/80"><kbd class="kbd kbd-sm">?</kbd></dt>
|
||
<dd>Show this help</dd>
|
||
</div>
|
||
<div class="flex justify-between gap-4 py-1 border-b border-base-300/50">
|
||
<dt class="text-base-content/80"><kbd class="kbd kbd-sm">+</kbd> / <kbd class="kbd kbd-sm">−</kbd></dt>
|
||
<dd>Zoom in / out</dd>
|
||
</div>
|
||
<div class="flex justify-between gap-4 py-1 border-b border-base-300/50">
|
||
<dt class="text-base-content/80"><kbd class="kbd kbd-sm">H</kbd></dt>
|
||
<dd>Toggle markers visibility</dd>
|
||
</div>
|
||
<div class="flex justify-between gap-4 py-1 border-b border-base-300/50">
|
||
<dt class="text-base-content/80"><kbd class="kbd kbd-sm">G</kbd></dt>
|
||
<dd>Toggle grid coordinates</dd>
|
||
</div>
|
||
<div class="flex justify-between gap-4 py-1 border-b border-base-300/50">
|
||
<dt class="text-base-content/80"><kbd class="kbd kbd-sm">F</kbd></dt>
|
||
<dd>Focus search</dd>
|
||
</div>
|
||
<div class="flex justify-between gap-4 py-1">
|
||
<dt class="text-base-content/80"><kbd class="kbd kbd-sm">Esc</kbd></dt>
|
||
<dd>Close menus / overlay</dd>
|
||
</div>
|
||
</dl>
|
||
</div>
|
||
</div>
|
||
</Transition>
|
||
</Teleport>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
defineProps<{ open: boolean }>()
|
||
defineEmits<{ close: [] }>()
|
||
</script>
|
||
|
||
<style scoped>
|
||
.shortcuts-modal-enter-active,
|
||
.shortcuts-modal-leave-active {
|
||
transition: opacity 0.2s ease;
|
||
}
|
||
.shortcuts-modal-enter-from,
|
||
.shortcuts-modal-leave-to {
|
||
opacity: 0;
|
||
}
|
||
.shortcuts-modal-enter-active .bg-base-100,
|
||
.shortcuts-modal-leave-active .bg-base-100 {
|
||
transition: transform 0.2s ease;
|
||
}
|
||
.shortcuts-modal-enter-from .bg-base-100,
|
||
.shortcuts-modal-leave-to .bg-base-100 {
|
||
transform: scale(0.95);
|
||
}
|
||
</style>
|