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:
parent
ac7e8bcdf4
commit
72fb421f54
@ -6,10 +6,18 @@
|
||||
import { AlbumResponseDto, AssetResponseDto, ThumbnailFormat, api } from '@api';
|
||||
import { DateTime } from 'luxon';
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import { slide } from 'svelte/transition';
|
||||
import { asByteUnitString } from '../../utils/byte-units';
|
||||
import ImageThumbnail from '../assets/thumbnail/image-thumbnail.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 Map from '../shared-components/map/map.svelte';
|
||||
|
||||
@ -77,6 +85,9 @@
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
|
||||
let showAssetPath = false;
|
||||
const toggleAssetPath = () => (showAssetPath = !showAssetPath);
|
||||
</script>
|
||||
|
||||
<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>
|
||||
<p class="break-all">
|
||||
<p class="break-all flex place-items-center gap-2">
|
||||
{#if isOwner}
|
||||
{asset.originalFileName}
|
||||
<button title="Show File Location" on:click={toggleAssetPath}>
|
||||
<Icon path={mdiInformationOutline} />
|
||||
</button>
|
||||
{:else}
|
||||
{getAssetFilename(asset)}
|
||||
{/if}
|
||||
</p>
|
||||
<div class="flex gap-2 text-sm">
|
||||
{#if asset.exifInfo.exifImageHeight && asset.exifInfo.exifImageWidth}
|
||||
@ -230,6 +248,11 @@
|
||||
{/if}
|
||||
<p>{asByteUnitString(asset.exifInfo.fileSizeInByte, $locale)}</p>
|
||||
</div>
|
||||
{#if showAssetPath}
|
||||
<p class="text-xs opacity-50 break-all" transition:slide={{ duration: 250 }}>
|
||||
{asset.originalPath}
|
||||
</p>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
Loading…
Reference in New Issue
Block a user