Skip to content

Commit 3819899

Browse files
CarlSchwanCarlSchwan
committed
fix: Fix positioning and rendering of markers
Signed-off-by: Carl Schwan <carlschwan@kde.org>
1 parent 242bd97 commit 3819899

15 files changed

Lines changed: 739 additions & 677 deletions

‎src/components/Map.vue‎

Lines changed: 502 additions & 453 deletions
Large diffs are not rendered by default.

‎src/components/map/ClickSearchPopup.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
<template>
22
<MglMarker :coordinates="[latLng.lng, latLng.lat]">
3-
<template #default>
3+
<template #marker>
44
<div style="display:none" />
5-
<MglPopup :close-button="false" anchor="bottom" :offset="[0, 0]" :showed="true">
5+
</template>
6+
<MglPopup :close-button="false" anchor="bottom" :offset="[0, 0]" :showed="true">
67
<h3 id="click-search-popup-title">
78
{{ t('maps', 'This place') }}
89
</h3>
@@ -27,7 +28,6 @@
2728
<span>{{ action.label }}</span>
2829
</button>
2930
</MglPopup>
30-
</template>
3131
</MglMarker>
3232
</template>
3333

‎src/components/map/ContactLayer.vue‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,17 @@
11
<template>
22
<MglMarker :coordinates="coordinates">
3-
<template #default>
4-
<div class="contact-marker-icon">
3+
<template #marker>
4+
<div class="contact-marker-icon"
5+
@click="onMarkerClick"
6+
@contextmenu="onMarkerContextmenu">
57
<div class="thumbnail" :style="'background-image: url(\'' + contactAvatar + '\');'" />
68
</div>
7-
<MglPopup
8-
v-if="showPopup"
9-
:close-button="false"
10-
anchor="bottom"
11-
@close="showPopup = false">
9+
</template>
10+
<MglPopup
11+
v-if="showPopup"
12+
:close-button="false"
13+
anchor="bottom"
14+
@close="showPopup = false">
1215
<div v-if="click === 'left'">
1316
<div class="left-contact-popup">
1417
<img class="tooltip-contact-avatar"
@@ -59,7 +62,6 @@
5962
</div>
6063
</div>
6164
</MglPopup>
62-
</template>
6365
</MglMarker>
6466
</template>
6567

‎src/components/map/DeviceHoverMarker.vue‎

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,32 @@
11
<template>
22
<MglMarker :coordinates="[point.lng, point.lat]">
3-
<template #default>
3+
<template #marker>
44
<div class="device-over-marker-wrapper">
55
<div class="device-over-marker" :style="'background-color: ' + point.color" />
66
</div>
7-
<MglPopup :close-button="false" anchor="bottom">
8-
<div class="tooltip-device-wrapper" :style="'border: 2px solid ' + point.color">
9-
<b>{{ t('maps', 'Device') }}:</b>
10-
<span>{{ point.user_agent }}</span>
11-
<div v-if="date">
12-
<b>{{ t('maps', 'Date') }}:</b>
13-
<span>{{ date }}</span>
14-
</div>
15-
<div v-if="altitude">
16-
<b>{{ t('maps', 'Altitude') }}:</b>
17-
<span>{{ altitude }}</span>
18-
</div>
19-
<div v-if="battery">
20-
<b>{{ t('maps', 'Battery') }}:</b>
21-
<span>{{ battery }}</span>
22-
</div>
23-
<div v-if="accuracy">
24-
<b>{{ t('maps', 'Accuracy') }}:</b>
25-
<span>{{ accuracy }}</span>
26-
</div>
27-
</div>
28-
</MglPopup>
297
</template>
8+
<MglPopup :close-button="false" anchor="bottom">
9+
<div class="tooltip-device-wrapper" :style="'border: 2px solid ' + point.color">
10+
<b>{{ t('maps', 'Device') }}:</b>
11+
<span>{{ point.user_agent }}</span>
12+
<div v-if="date">
13+
<b>{{ t('maps', 'Date') }}:</b>
14+
<span>{{ date }}</span>
15+
</div>
16+
<div v-if="altitude">
17+
<b>{{ t('maps', 'Altitude') }}:</b>
18+
<span>{{ altitude }}</span>
19+
</div>
20+
<div v-if="battery">
21+
<b>{{ t('maps', 'Battery') }}:</b>
22+
<span>{{ battery }}</span>
23+
</div>
24+
<div v-if="accuracy">
25+
<b>{{ t('maps', 'Accuracy') }}:</b>
26+
<span>{{ accuracy }}</span>
27+
</div>
28+
</div>
29+
</MglPopup>
3030
</MglMarker>
3131
</template>
3232

‎src/components/map/DeviceLayer.vue‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -21,28 +21,28 @@
2121
</MglGeoJsonSource>
2222
<MglMarker v-if="lastPoint"
2323
:coordinates="[lastPoint.lng, lastPoint.lat]">
24-
<template #default>
24+
<template #marker>
2525
<div class="device-last-point-marker"
2626
:class="thumbnailClass"
2727
:style="'background-color: ' + color + '; border-color: ' + color"
2828
@click.stop="onLineClick"
2929
@contextmenu.stop="onLineRightClick"
3030
@mouseover="deviceLastPointMouseover" />
31-
<MglPopup v-if="showPopup" :close-button="false" anchor="bottom" @close="showPopup = false">
32-
<NcActionButton icon="icon-category-monitoring" @click="$emit('toggle-history', device)">
33-
{{ device.historyEnabled ? t('maps', 'Hide history') : t('maps', 'Show history') }}
34-
</NcActionButton>
35-
<NcActionButton v-if="mapIsUpdatable" icon="icon-colorpicker" @click="$emit('change-color', device)">
36-
{{ t('maps', 'Change color') }}
37-
</NcActionButton>
38-
<NcActionButton icon="icon-file" @click="$emit('export', device)">
39-
{{ t('maps', 'Export') }}
40-
</NcActionButton>
41-
<NcActionButton v-if="!isPublicVal" icon="icon-share" @click="$emit('add-to-map-device', device)">
42-
{{ t('maps', 'Link to map') }}
43-
</NcActionButton>
44-
</MglPopup>
4531
</template>
32+
<MglPopup v-if="showPopup" :close-button="false" anchor="bottom" @close="showPopup = false">
33+
<NcActionButton icon="icon-category-monitoring" @click="$emit('toggle-history', device)">
34+
{{ device.historyEnabled ? t('maps', 'Hide history') : t('maps', 'Show history') }}
35+
</NcActionButton>
36+
<NcActionButton v-if="mapIsUpdatable" icon="icon-colorpicker" @click="$emit('change-color', device)">
37+
{{ t('maps', 'Change color') }}
38+
</NcActionButton>
39+
<NcActionButton icon="icon-file" @click="$emit('export', device)">
40+
{{ t('maps', 'Export') }}
41+
</NcActionButton>
42+
<NcActionButton v-if="!isPublicVal" icon="icon-share" @click="$emit('add-to-map-device', device)">
43+
{{ t('maps', 'Link to map') }}
44+
</NcActionButton>
45+
</MglPopup>
4646
</MglMarker>
4747
</template>
4848
</template>

‎src/components/map/FavoriteMarker.vue‎

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -3,32 +3,32 @@
33
:coordinates="[favorite.lng, favorite.lat]"
44
:draggable="draggable && favorite.isUpdateable"
55
@update:coordinates="onMoved">
6-
<template #default>
6+
<template #marker>
77
<div
88
class="favorite-marker-icon"
99
:style="markerStyle"
1010
@click.stop="onLeftClick"
1111
@contextmenu.stop="onRightClick" />
12-
<MglPopup
13-
v-if="showPopup"
14-
:close-button="false"
15-
anchor="bottom"
16-
@close="showPopup = false">
17-
<NcActionButton v-if="favorite.isDeletable" @click="emit('delete', favorite.id)">
18-
<template #icon>
19-
<TrashCanIcon :size="20" />
20-
</template>
21-
{{ t('maps', 'Delete favorite') }}
22-
</NcActionButton>
23-
<NcActionButton v-if="!isPublicVal"
24-
@click="emit('add-to-map-favorite', favorite)">
25-
<template #icon>
26-
<ShareVariantIcon :size="20" />
27-
</template>
28-
{{ t('maps', 'Copy to map') }}
29-
</NcActionButton>
30-
</MglPopup>
3112
</template>
13+
<MglPopup
14+
v-if="showPopup"
15+
:close-button="false"
16+
anchor="bottom"
17+
@close="showPopup = false">
18+
<NcActionButton v-if="favorite.isDeletable" @click="emit('delete', favorite.id)">
19+
<template #icon>
20+
<TrashCanIcon :size="20" />
21+
</template>
22+
{{ t('maps', 'Delete favorite') }}
23+
</NcActionButton>
24+
<NcActionButton v-if="!isPublicVal"
25+
@click="emit('add-to-map-favorite', favorite)">
26+
<template #icon>
27+
<ShareVariantIcon :size="20" />
28+
</template>
29+
{{ t('maps', 'Copy to map') }}
30+
</NcActionButton>
31+
</MglPopup>
3232
</MglMarker>
3333
</template>
3434

‎src/components/map/PhotoSuggestionsLayer.vue‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,19 +5,19 @@
55
:coordinates="[photo.lng, photo.lat]"
66
:draggable="draggable"
77
@update:coordinates="(ll) => $emit('photo-suggestion-moved', photo.originalIndex, ll)">
8-
<template #default>
8+
<template #marker>
99
<div :class="['leaflet-marker-photo-suggestion', 'photo-suggestion-marker', photoSuggestionsSelectedIndices.includes(photo.originalIndex) ? 'photo-suggestion-marker-selected' : '']"
1010
:style="'background-image: url(' + getPreviewUrl(photo) + ')'"
1111
@click.stop="$emit('photo-suggestion-selected', photo.originalIndex)"
1212
@contextmenu.stop="currentPopupSuggestion = photo"
1313
@mouseover="currentSuggestion = photo"
1414
@mouseleave="currentSuggestion = null" />
15-
<MglPopup v-if="currentPopupSuggestion === photo" :close-button="false" anchor="bottom" @close="currentPopupSuggestion = null">
16-
<NcActionButton icon="icon-toggle" @click="viewPhoto(photo)">
17-
{{ t('maps', 'Display picture') }}
18-
</NcActionButton>
19-
</MglPopup>
2015
</template>
16+
<MglPopup v-if="currentPopupSuggestion === photo" :close-button="false" anchor="bottom" @close="currentPopupSuggestion = null">
17+
<NcActionButton icon="icon-toggle" @click="viewPhoto(photo)">
18+
{{ t('maps', 'Display picture') }}
19+
</NcActionButton>
20+
</MglPopup>
2121
</MglMarker>
2222
</template>
2323
</template>

‎src/components/map/PhotosLayer.vue‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -5,30 +5,30 @@
55
:coordinates="[photo.lng, photo.lat]"
66
:draggable="draggable && photo.isUpdateable"
77
@update:coordinates="(ll) => $emit('photo-moved', photo, ll)">
8-
<template #default>
8+
<template #marker>
99
<div class="leaflet-marker-photo photo-marker"
1010
:style="'background-image: url(' + getPreviewUrl(photo) + ')'"
1111
@click.stop="onPhotoClick(photo)"
1212
@contextmenu.stop="onPhotoRightClick(photo)"
1313
@mouseover="currentPhoto = photo"
1414
@mouseleave="currentPhoto = null" />
15-
<MglPopup v-if="currentPopupPhoto === photo" :close-button="false" anchor="bottom" @close="currentPopupPhoto = null">
16-
<NcActionButton v-if="photo.path" icon="icon-toggle" @click="$emit('open-sidebar', photo.path)">
17-
{{ t('maps', 'Open in Sidebar') }}
18-
</NcActionButton>
19-
<NcActionButton icon="icon-toggle" @click="viewPhoto(photo)">
20-
{{ t('maps', 'Display picture') }}
21-
</NcActionButton>
22-
<NcActionButton v-if="photo.isUpdateable" icon="icon-history" @click="$emit('coords-reset', [photo.path])">
23-
{{ t('maps', 'Remove geo data') }}
24-
</NcActionButton>
25-
<NcActionButton v-if="!isPublicVal"
26-
icon="icon-share"
27-
@click="$emit('add-to-map-photo', photo)">
28-
{{ t('maps', 'Copy to map') }}
29-
</NcActionButton>
30-
</MglPopup>
3115
</template>
16+
<MglPopup v-if="currentPopupPhoto === photo" :close-button="false" anchor="bottom" @close="currentPopupPhoto = null">
17+
<NcActionButton v-if="photo.path" icon="icon-toggle" @click="$emit('open-sidebar', photo.path)">
18+
{{ t('maps', 'Open in Sidebar') }}
19+
</NcActionButton>
20+
<NcActionButton icon="icon-toggle" @click="viewPhoto(photo)">
21+
{{ t('maps', 'Display picture') }}
22+
</NcActionButton>
23+
<NcActionButton v-if="photo.isUpdateable" icon="icon-history" @click="$emit('coords-reset', [photo.path])">
24+
{{ t('maps', 'Remove geo data') }}
25+
</NcActionButton>
26+
<NcActionButton v-if="!isPublicVal"
27+
icon="icon-share"
28+
@click="$emit('add-to-map-photo', photo)">
29+
{{ t('maps', 'Copy to map') }}
30+
</NcActionButton>
31+
</MglPopup>
3232
</MglMarker>
3333
</template>
3434
</template>

‎src/components/map/PlaceContactPopup.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
<template>
22
<MglMarker :coordinates="[latLng.lng, latLng.lat]">
3-
<template #default>
3+
<template #marker>
44
<div class="placement-marker-icon"
55
:style="'background-image: url(' + markerIconUrl + '); width: 40px; height: 40px; border-radius: 50%; background-size: cover;'" />
6-
<MglPopup :close-button="false" anchor="bottom" :showed="true">
6+
</template>
7+
<MglPopup :close-button="false" anchor="bottom" :showed="true">
78
<h3 id="place-popup-title">
89
{{ t('maps', 'New contact address') }}
910
</h3>
@@ -63,7 +64,6 @@
6364
{{ t('maps', 'Add address to contact') }}
6465
</button>
6566
</MglPopup>
66-
</template>
6767
</MglMarker>
6868
</template>
6969

0 commit comments

Comments
 (0)