1
0
mirror of https://github.com/immich-app/immich.git synced 2024-12-25 10:43:13 +02:00

feat(web): Add file path info for owned assets (#4943)

* feat(web): Add file path info for external assets

Add file path information to the asset details panel for External assets. This will allow a user to easily locate said asset in the filesystem, to perform any desired tasks on that asset. Styling was chosen to be as unobtrusive as possible.

* feat(web): toggleable file path info for external assets

If the user is the owner of the current asset and it's an external asset, then add a button next to the filename to reveal the asset's file path.

* show path on owned asset and styling

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
This commit is contained in:
Dmitriy P 2023-11-13 15:57:58 -06:00 committed by GitHub
parent ac7e8bcdf4
commit 72fb421f54
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -6,10 +6,18 @@
import { AlbumResponseDto, AssetResponseDto, ThumbnailFormat, api } from '@api'; import { AlbumResponseDto, AssetResponseDto, ThumbnailFormat, api } from '@api';
import { DateTime } from 'luxon'; import { DateTime } from 'luxon';
import { createEventDispatcher } from 'svelte'; import { createEventDispatcher } from 'svelte';
import { slide } from 'svelte/transition';
import { asByteUnitString } from '../../utils/byte-units'; import { asByteUnitString } from '../../utils/byte-units';
import ImageThumbnail from '../assets/thumbnail/image-thumbnail.svelte'; import ImageThumbnail from '../assets/thumbnail/image-thumbnail.svelte';
import UserAvatar from '../shared-components/user-avatar.svelte'; import UserAvatar from '../shared-components/user-avatar.svelte';
import { mdiCalendar, mdiCameraIris, mdiClose, mdiImageOutline, mdiMapMarkerOutline } from '@mdi/js'; import {
mdiCalendar,
mdiCameraIris,
mdiClose,
mdiImageOutline,
mdiMapMarkerOutline,
mdiInformationOutline,
} from '@mdi/js';
import Icon from '$lib/components/elements/icon.svelte'; import Icon from '$lib/components/elements/icon.svelte';
import Map from '../shared-components/map/map.svelte'; import Map from '../shared-components/map/map.svelte';
@ -77,6 +85,9 @@
console.error(error); console.error(error);
} }
}; };
let showAssetPath = false;
const toggleAssetPath = () => (showAssetPath = !showAssetPath);
</script> </script>
<section class="p-2 dark:bg-immich-dark-bg dark:text-immich-dark-fg"> <section class="p-2 dark:bg-immich-dark-bg dark:text-immich-dark-fg">
@ -215,8 +226,15 @@
<div><Icon path={mdiImageOutline} size="24" /></div> <div><Icon path={mdiImageOutline} size="24" /></div>
<div> <div>
<p class="break-all"> <p class="break-all flex place-items-center gap-2">
{getAssetFilename(asset)} {#if isOwner}
{asset.originalFileName}
<button title="Show File Location" on:click={toggleAssetPath}>
<Icon path={mdiInformationOutline} />
</button>
{:else}
{getAssetFilename(asset)}
{/if}
</p> </p>
<div class="flex gap-2 text-sm"> <div class="flex gap-2 text-sm">
{#if asset.exifInfo.exifImageHeight && asset.exifInfo.exifImageWidth} {#if asset.exifInfo.exifImageHeight && asset.exifInfo.exifImageWidth}
@ -230,6 +248,11 @@
{/if} {/if}
<p>{asByteUnitString(asset.exifInfo.fileSizeInByte, $locale)}</p> <p>{asByteUnitString(asset.exifInfo.fileSizeInByte, $locale)}</p>
</div> </div>
{#if showAssetPath}
<p class="text-xs opacity-50 break-all" transition:slide={{ duration: 250 }}>
{asset.originalPath}
</p>
{/if}
</div> </div>
</div> </div>
{/if} {/if}