Add Airbnb-style "search as I move" checkbox + hover highlight
All checks were successful
Build Docker Image / build (push) Successful in 3m33s
All checks were successful
Build Docker Image / build (push) Successful in 3m33s
- Move filter checkbox to right side, same line as view toggle - Add hover events on selection cards to highlight map points - Update translations: "Искать при перемещении" / "Search as I move the map"
This commit is contained in:
@@ -38,8 +38,23 @@
|
||||
<span class="text-white text-sm">{{ $t('common.loading') }}</span>
|
||||
</div>
|
||||
|
||||
<!-- View toggle (top RIGHT overlay, below header) - works in both modes -->
|
||||
<div class="absolute top-[116px] right-4 z-20 hidden lg:block">
|
||||
<!-- View toggle + filter checkbox (top RIGHT overlay, below header) -->
|
||||
<div class="absolute top-[116px] right-4 z-20 hidden lg:flex items-center gap-2">
|
||||
<!-- Filter by bounds checkbox (when panel is open) -->
|
||||
<label
|
||||
v-if="showPanel"
|
||||
class="flex items-center gap-2 bg-black/30 backdrop-blur-md rounded-lg px-3 py-1.5 border border-white/10 cursor-pointer text-white text-sm hover:bg-black/40 transition-colors"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
:checked="filterByBounds"
|
||||
class="checkbox checkbox-xs checkbox-primary"
|
||||
@change="$emit('update:filter-by-bounds', ($event.target as HTMLInputElement).checked)"
|
||||
/>
|
||||
<span>{{ $t('catalog.search.filterByMap') }}</span>
|
||||
</label>
|
||||
|
||||
<!-- View mode toggle -->
|
||||
<div class="flex gap-1 bg-black/30 backdrop-blur-md rounded-lg p-1 border border-white/10">
|
||||
<button
|
||||
class="flex items-center gap-2 px-3 py-1.5 rounded-md text-sm font-medium transition-colors"
|
||||
@@ -194,6 +209,7 @@ const props = withDefaults(defineProps<{
|
||||
hoveredId?: string
|
||||
items?: MapItem[]
|
||||
showPanel?: boolean
|
||||
filterByBounds?: boolean
|
||||
}>(), {
|
||||
loading: false,
|
||||
useServerClustering: true,
|
||||
@@ -201,13 +217,15 @@ const props = withDefaults(defineProps<{
|
||||
mapId: 'catalog-map',
|
||||
pointColor: '#f97316',
|
||||
items: () => [],
|
||||
showPanel: false
|
||||
showPanel: false,
|
||||
filterByBounds: false
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
'select': [item: MapItem]
|
||||
'bounds-change': [bounds: MapBounds]
|
||||
'update:hoveredId': [uuid: string | undefined]
|
||||
'update:filter-by-bounds': [value: boolean]
|
||||
}>()
|
||||
|
||||
// Server-side clustering - use computed node type based on view mode
|
||||
|
||||
Reference in New Issue
Block a user