0ct0pu5/immich
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Review suggestions

Browse source
This commit is contained in:
Matthias Rupp 2023-05-02 08:13:57 -11:00
parent 6b1a863e2d
commit 655423571e
6 changed files with 59 additions and 78 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
web/package-lock.json generated
View file

@ -14,7 +14,6 @@
"justified-layout": "^4.1.0",
"leaflet": "^1.9.3",
"leaflet.markercluster": "^1.5.3",
"leaflet.tilelayer.colorfilter": "^1.2.5",
"lodash-es": "^4.17.21",
"luxon": "^3.2.1",
"rxjs": "^7.8.0",
@ -9064,11 +9063,6 @@
"leaflet": "^1.3.1"
}
},
"node_modules/leaflet.tilelayer.colorfilter": {
"version": "1.2.5",
"resolved": "https://registry.npmjs.org/leaflet.tilelayer.colorfilter/-/leaflet.tilelayer.colorfilter-1.2.5.tgz",
"integrity": "sha512-wUvqVlpEofDEDi0ocXApXAcz1l06RsNBEw3L/2ColaygDPERswgas2Jgv/DVrWrVd0HQAxDerwFqOtBI+zbw3w=="
},
"node_modules/leven": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
@ -18085,11 +18079,6 @@
"integrity": "sha512-vPTw/Bndq7eQHjLBVlWpnGeLa3t+3zGiuM7fJwCkiMFq+nmRuG3RI3f7f4N4TDX7T4NpbAXpR2+NTRSEGfCSeA==",
"requires": {}
},
"leaflet.tilelayer.colorfilter": {
"version": "1.2.5",
"resolved": "https://registry.npmjs.org/leaflet.tilelayer.colorfilter/-/leaflet.tilelayer.colorfilter-1.2.5.tgz",
"integrity": "sha512-wUvqVlpEofDEDi0ocXApXAcz1l06RsNBEw3L/2ColaygDPERswgas2Jgv/DVrWrVd0HQAxDerwFqOtBI+zbw3w=="
},
"leven": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",

1
web/package.json
View file

@ -63,7 +63,6 @@
"justified-layout": "^4.1.0",
"leaflet": "^1.9.3",
"leaflet.markercluster": "^1.5.3",
"leaflet.tilelayer.colorfilter": "^1.2.5",
"lodash-es": "^4.17.21",
"luxon": "^3.2.1",
"rxjs": "^7.8.0",

29
web/src/app.css
View file

@ -93,32 +93,3 @@ input:focus-visible {
scrollbar-width: none;
}
}
/* Leaflet */
.leaflet-marker-icon {
border-radius: 25%;
}
.marker-cluster {
background-clip: padding-box;
border-radius: 20px;
}
.marker-cluster div {
width: 40px;
height: 40px;
margin-left: 5px;
margin-top: 5px;
text-align: center;
border-radius: 20px;
font-weight: bold;
background-color: rgb(236, 237, 246);
color: rgb(69, 80, 169);
}
.marker-cluster span {
line-height: 40px;
}

29
web/src/lib/components/shared-components/leaflet/asset-marker-cluster.svelte
View file

@ -88,3 +88,32 @@
{#if cluster}
<slot />
{/if}
<style>
:global(.leaflet-marker-icon) {
border-radius: 25%;
}
:global(.marker-cluster) {
background-clip: padding-box;
border-radius: 20px;
}
:global(.marker-cluster div) {
width: 40px;
height: 40px;
margin-left: 5px;
margin-top: 5px;
text-align: center;
border-radius: 20px;
font-weight: bold;
background-color: rgb(236, 237, 246);
color: rgb(69, 80, 169);
}
:global(.marker-cluster span) {
line-height: 40px;
}
</style>

31
web/src/lib/components/shared-components/leaflet/tile-layer.svelte
View file

@ -1,29 +1,34 @@
<script lang="ts" context="module">
type TileLayerFilterOptions = TileLayerOptions & {
filter?: string[];
};
</script>
<script lang="ts">
import { onDestroy, onMount } from 'svelte';
import 'leaflet.tilelayer.colorfilter';
import { TileLayer, type TileLayerOptions } from 'leaflet';
import L, { TileLayer, type TileLayerOptions } from 'leaflet';
import { getMapContext } from './map.svelte';
import L from 'leaflet';
export let urlTemplate: string;
export let options: TileLayerFilterOptions | undefined = undefined;
export let options: TileLayerOptions | undefined = undefined;
export let allowDarkMode: boolean = false;
let tileLayer: TileLayer;
const map = getMapContext();
onMount(() => {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
tileLayer = new L.tileLayer.colorFilter(urlTemplate, options).addTo(map);
tileLayer = new L.TileLayer(urlTemplate, {
className: allowDarkMode ? 'leaflet-layer-dynamic' : 'leaflet-layer',
...options
}).addTo(map);
});
onDestroy(() => {
if (tileLayer) tileLayer.remove();
});
</script>
<style>
:global(.leaflet-layer-dynamic) {
filter: brightness(100%) contrast(100%) saturate(80%);
}
:global(.dark .leaflet-layer-dynamic) {
filter: invert(100%) brightness(130%) saturate(0%);
}
</style>

36
web/src/routes/(user)/map/+page.svelte
View file

@ -9,15 +9,16 @@
isViewingAssetStoreState,
viewingAssetStoreState
} from '$lib/stores/asset-interaction.store';
import { colorTheme } from '$lib/stores/preferences.store';
export let data: PageData;
let initialMapCenter: [number, number] = [48, 11];
if (data.mapMarkers.length) {
let firstMarker = data.mapMarkers[0];
initialMapCenter = [firstMarker.lat, firstMarker.lon];
$: {
if (data.mapMarkers.length) {
let firstMarker = data.mapMarkers[0];
initialMapCenter = [firstMarker.lat, firstMarker.lon];
}
}
let viewingAssets: string[] = [];
@ -47,26 +48,13 @@
<div class="h-[90%] w-full">
<Map latlng={initialMapCenter} zoom={7}>
{#if $colorTheme === 'dark'}
<TileLayer
urlTemplate={'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'}
options={{
filter: ['invert:100%', 'bright:127%', 'saturate:0%'],
attribution:
'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}}
/>
{:else}
<TileLayer
urlTemplate={'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'}
options={{
filter: ['bright:101%', 'contrast:101%', 'saturate:79%'],
attribution:
'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}}
/>
{/if}
<TileLayer
allowDarkMode={true}
urlTemplate={'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'}
options={{
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}}
/>
<AssetMarkerCluster
markers={data.mapMarkers}
on:view={(event) => onViewAssets(event.detail.assets)}