Cutlery/immich
1
0
Fork 1
mirror of https://github.com/immich-app/immich.git synced 2025-11-03 19:17:11 -05:00
Code Issues Packages Projects Releases Wiki Activity

feat(web): improve map styling and interaction (#2399)

Browse Source 
* improve map styling and interaction

* Update style
This commit is contained in:
Alex 2023-05-08 21:05:06 -05:00 committed by GitHub
parent 5885ec8e65
commit c2e9fe0aac
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 31 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
web/src/lib/components/shared-components/leaflet/asset-marker-cluster.svelte
View File

@ -28,7 +28,8 @@
iconAnchor: [12, 41], iconAnchor: [12, 41],
popupAnchor: [1, -34], popupAnchor: [1, -34],
tooltipAnchor: [16, -28], tooltipAnchor: [16, -28],
shadowSize: [41, 41] shadowSize: [41, 41],
className: 'asset-marker-icon'
}) })
}); });
@ -67,6 +68,16 @@
dispatch('view', { assets: ids }); dispatch('view', { assets: ids });
}); });
cluster.on('clustermouseover', (event: LeafletEvent) => {
if (event.sourceTarget.getChildCount() <= 10) {
event.sourceTarget.spiderfy();
}
});
cluster.on('clustermouseout', (event: LeafletEvent) => {
event.sourceTarget.unspiderfy();
});
for (let marker of markers) { for (let marker of markers) {
const leafletMarker = new AssetMarker(marker); const leafletMarker = new AssetMarker(marker);
@ -91,7 +102,7 @@
<style> <style>
:global(.leaflet-marker-icon) { :global(.leaflet-marker-icon) {
border-radius: 25%; border-radius: 50%;
} }
:global(.marker-cluster) { :global(.marker-cluster) {
@ -99,6 +110,15 @@
border-radius: 20px; border-radius: 20px;
} }
:global(.asset-marker-icon) {
border-radius: 50%;
object-fit: cover;
border: 1px solid rgb(69, 80, 169);
box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px,
rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px,
rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
}
:global(.marker-cluster div) { :global(.marker-cluster div) {
width: 40px; width: 40px;
height: 40px; height: 40px;
@ -110,7 +130,16 @@
font-weight: bold; font-weight: bold;
background-color: rgb(236, 237, 246); background-color: rgb(236, 237, 246);
border: 1px solid rgb(69, 80, 169);
color: rgb(69, 80, 169); color: rgb(69, 80, 169);
box-shadow: rgba(5, 5, 122, 0.12) 0px 2px 4px 0px, rgba(4, 4, 230, 0.32) 0px 2px 16px 0px;
}
:global(.dark .marker-cluster div) {
background-color: #adcbfa;
border: 1px solid black;
color: black;
} }
:global(.marker-cluster span) { :global(.marker-cluster span) {