From bb7010b2bbf6f9cd3fec4d90ea3b4f9764ee709d Mon Sep 17 00:00:00 2001
From: Alex <alex.tran1502@gmail.com>
Date: Thu, 8 May 2025 17:49:16 -0500
Subject: [PATCH] chore: rounded map corner when needed (#18163)
---
web/src/lib/components/album-page/album-map.svelte | 1 +
.../shared-components/change-location.svelte | 1 +
.../lib/components/shared-components/map/map.svelte | 10 +++++++---
.../map/[[photos=photos]]/[[assetId=id]]/+page.svelte | 2 +-
4 files changed, 10 insertions(+), 4 deletions(-)
diff --git a/web/src/lib/components/album-page/album-map.svelte b/web/src/lib/components/album-page/album-map.svelte
index 871e26b4f9..497422daa2 100644
--- a/web/src/lib/components/album-page/album-map.svelte
+++ b/web/src/lib/components/album-page/album-map.svelte
@@ -131,6 +131,7 @@
bind:mapMarkers
onSelect={onViewAssets}
showSettings={false}
+ rounded
/>
{/await}
</div>
diff --git a/web/src/lib/components/shared-components/change-location.svelte b/web/src/lib/components/shared-components/change-location.svelte
index e502d9aeda..45168f4591 100644
--- a/web/src/lib/components/shared-components/change-location.svelte
+++ b/web/src/lib/components/shared-components/change-location.svelte
@@ -191,6 +191,7 @@
clickable={true}
onClickPoint={(selected) => (point = selected)}
showSettings={false}
+ rounded
/>
{/await}
</div>
diff --git a/web/src/lib/components/shared-components/map/map.svelte b/web/src/lib/components/shared-components/map/map.svelte
index bf66018eb6..ef4b7b5b8e 100644
--- a/web/src/lib/components/shared-components/map/map.svelte
+++ b/web/src/lib/components/shared-components/map/map.svelte
@@ -53,6 +53,7 @@
onSelect?: (assetIds: string[]) => void;
onClickPoint?: ({ lat, lng }: { lat: number; lng: number }) => void;
popup?: import('svelte').Snippet<[{ marker: MapMarkerResponseDto }]>;
+ rounded?: boolean;
}
let {
@@ -68,6 +69,7 @@
onSelect = () => {},
onClickPoint = () => {},
popup,
+ rounded = false,
}: Props = $props();
let map: maplibregl.Map | undefined = $state();
@@ -247,7 +249,7 @@
<MapLibre
{hash}
style=""
- class="h-full rounded-2xl"
+ class="h-full {rounded ? 'rounded-2xl' : 'rounded-none'}"
{center}
{zoom}
attributionControl={false}
@@ -274,7 +276,9 @@
{#if showSettings}
<Control>
<ControlGroup>
- <ControlButton onclick={handleSettingsClick}><Icon path={mdiCog} size="100%" /></ControlButton>
+ <ControlButton onclick={handleSettingsClick}
+ ><Icon path={mdiCog} size="100%" class="text-black/80" /></ControlButton
+ >
</ControlGroup>
</Control>
{/if}
@@ -283,7 +287,7 @@
<Control position="top-right">
<ControlGroup>
<ControlButton onclick={() => onOpenInMapView()}>
- <Icon title={$t('open_in_map_view')} path={mdiMap} size="100%" />
+ <Icon title={$t('open_in_map_view')} path={mdiMap} size="100%" class="text-black/80" />
</ControlButton>
</ControlGroup>
</Control>
diff --git a/web/src/routes/(user)/map/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/map/[[photos=photos]]/[[assetId=id]]/+page.svelte
index b1fff3a0cd..5875309b05 100644
--- a/web/src/routes/(user)/map/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/map/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -72,7 +72,7 @@
{#if $featureFlags.loaded && $featureFlags.map}
<UserPageLayout title={data.meta.title}>
<div class="isolate h-full w-full">
- <Map hash onSelect={onViewAssets} />
+ <Map hash onSelect={onViewAssets} rounded />
</div>
</UserPageLayout>
<Portal target="body">