self-hosted/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2024-11-24 08:52:28 +02:00
Code Issues Releases Activity

fix(web): add location modal invisible on safari (#9756)

Browse Source
This commit is contained in:
Michel Heusschen 2024-05-25 21:36:36 +02:00 committed by GitHub
parent 871f3ea468
commit 459fee9ee4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 89 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
web/src/lib/components/asset-viewer/detail-panel-location.svelte Normal file
View File

@ -0,0 +1,87 @@
<script lang="ts">
import Icon from '$lib/components/elements/icon.svelte';
import ChangeLocation from '$lib/components/shared-components/change-location.svelte';
import Portal from '$lib/components/shared-components/portal/portal.svelte';
import { handleError } from '$lib/utils/handle-error';
import { updateAsset, type AssetResponseDto } from '@immich/sdk';
import { mdiMapMarkerOutline, mdiPencil } from '@mdi/js';
export let isOwner: boolean;
export let asset: AssetResponseDto;
let isShowChangeLocation = false;
async function handleConfirmChangeLocation(gps: { lng: number; lat: number }) {
isShowChangeLocation = false;
try {
asset = await updateAsset({
id: asset.id,
updateAssetDto: { latitude: gps.lat, longitude: gps.lng },
});
} catch (error) {
handleError(error, 'Unable to change location');
}
}
</script>
{#if asset.exifInfo?.city}
<button
type="button"
class="flex w-full text-left justify-between place-items-start gap-4 py-4"
on:click={() => (isOwner ? (isShowChangeLocation = true) : null)}
title={isOwner ? 'Edit location' : ''}
class:hover:dark:text-immich-dark-primary={isOwner}
class:hover:text-immich-primary={isOwner}
>
<div class="flex gap-4">
<div><Icon path={mdiMapMarkerOutline} size="24" /></div>
<div>
<p>{asset.exifInfo.city}</p>
{#if asset.exifInfo?.state}
<div class="flex gap-2 text-sm">
<p>{asset.exifInfo.state}</p>
</div>
{/if}
{#if asset.exifInfo?.country}
<div class="flex gap-2 text-sm">
<p>{asset.exifInfo.country}</p>
</div>
{/if}
</div>
</div>
{#if isOwner}
<div>
<Icon path={mdiPencil} size="20" />
</div>
{/if}
</button>
{:else if !asset.exifInfo?.city && isOwner}
<button
type="button"
class="flex w-full text-left justify-between place-items-start gap-4 py-4 rounded-lg hover:dark:text-immich-dark-primary hover:text-immich-primary"
on:click={() => (isShowChangeLocation = true)}
title="Add location"
>
<div class="flex gap-4">
<div><Icon path={mdiMapMarkerOutline} size="24" /></div>
<p>Add a location</p>
</div>
<div class="focus:outline-none p-1">
<Icon path={mdiPencil} size="20" />
</div>
</button>
{/if}
{#if isShowChangeLocation}
<Portal>
<ChangeLocation
{asset}
on:confirm={({ detail: gps }) => handleConfirmChangeLocation(gps)}
on:cancel={() => (isShowChangeLocation = false)}
/>
</Portal>
{/if}

75
web/src/lib/components/asset-viewer/detail-panel.svelte
View File

@ -1,4 +1,5 @@
<script lang="ts">
import DetailPanelLocation from '$lib/components/asset-viewer/detail-panel-location.svelte';
import Icon from '$lib/components/elements/icon.svelte';
import ChangeDate from '$lib/components/shared-components/change-date.svelte';
import { AppRoute, QueryParameter, timeToLoadTheMap } from '$lib/constants';
@ -27,7 +28,6 @@
mdiEyeOff,
mdiImageOutline,
mdiInformationOutline,
mdiMapMarkerOutline,
mdiPencil,
} from '@mdi/js';
import { DateTime } from 'luxon';
@ -38,7 +38,6 @@
import ImageThumbnail from '../assets/thumbnail/image-thumbnail.svelte';
import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
import PersonSidePanel from '../faces-page/person-side-panel.svelte';
import ChangeLocation from '../shared-components/change-location.svelte';
import UserAvatar from '../shared-components/user-avatar.svelte';
import LoadingSpinner from '../shared-components/loading-spinner.svelte';
import { NotificationType, notificationController } from '../shared-components/notification/notification';
@ -164,18 +163,6 @@
handleError(error, 'Unable to change date');
}
}
let isShowChangeLocation = false;
async function handleConfirmChangeLocation(gps: { lng: number; lat: number }) {
isShowChangeLocation = false;
try {
await updateAsset({ id: asset.id, updateAssetDto: { latitude: gps.lat, longitude: gps.lng } });
} catch (error) {
handleError(error, 'Unable to change location');
}
}
</script>
<section class="relative p-2 dark:bg-immich-dark-bg dark:text-immich-dark-fg">
@ -464,65 +451,7 @@
</div>
{/if}
{#if asset.exifInfo?.city}
<button
type="button"
class="flex w-full text-left justify-between place-items-start gap-4 py-4"
on:click={() => (isOwner ? (isShowChangeLocation = true) : null)}
title={isOwner ? 'Edit location' : ''}
class:hover:dark:text-immich-dark-primary={isOwner}
class:hover:text-immich-primary={isOwner}
>
<div class="flex gap-4">
<div><Icon path={mdiMapMarkerOutline} size="24" /></div>
<div>
<p>{asset.exifInfo.city}</p>
{#if asset.exifInfo?.state}
<div class="flex gap-2 text-sm">
<p>{asset.exifInfo.state}</p>
</div>
{/if}
{#if asset.exifInfo?.country}
<div class="flex gap-2 text-sm">
<p>{asset.exifInfo.country}</p>
</div>
{/if}
</div>
</div>
{#if isOwner}
<div>
<Icon path={mdiPencil} size="20" />
</div>
{/if}
</button>
{:else if !asset.exifInfo?.city && isOwner}
<button
type="button"
class="flex w-full text-left justify-between place-items-start gap-4 py-4 rounded-lg hover:dark:text-immich-dark-primary hover:text-immich-primary"
on:click={() => (isShowChangeLocation = true)}
title="Add location"
>
<div class="flex gap-4">
<div>
<div><Icon path={mdiMapMarkerOutline} size="24" /></div>
</div>
<p>Add a location</p>
</div>
<div class="focus:outline-none p-1">
<Icon path={mdiPencil} size="20" />
</div>
</button>
{/if}
{#if isShowChangeLocation}
<ChangeLocation
{asset}
on:confirm={({ detail: gps }) => handleConfirmChangeLocation(gps)}
on:cancel={() => (isShowChangeLocation = false)}
/>
{/if}
<DetailPanelLocation {isOwner} {asset} />
</div>
</section>