mirror of
https://github.com/immich-app/immich.git
synced 2025-01-27 22:22:45 +01:00
parent
68d4f1b946
commit
aa02ccb731
3 changed files with 41 additions and 10 deletions
web/src
lib/components/asset-viewer
routes/(user)/albums/[albumId]
|
@ -172,12 +172,12 @@
|
||||||
</div>
|
</div>
|
||||||
{#if innerHeight}
|
{#if innerHeight}
|
||||||
<div
|
<div
|
||||||
class="overflow-y-auto immich-scrollbar relative w-full"
|
class="overflow-y-auto immich-scrollbar relative w-full px-2"
|
||||||
style="height: {divHeight}px;padding-bottom: {chatHeight}px"
|
style="height: {divHeight}px;padding-bottom: {chatHeight}px"
|
||||||
>
|
>
|
||||||
{#each reactions as reaction, index (reaction.id)}
|
{#each reactions as reaction, index (reaction.id)}
|
||||||
{#if reaction.type === 'comment'}
|
{#if reaction.type === 'comment'}
|
||||||
<div class="flex dark:bg-gray-800 bg-gray-200 p-3 mx-2 mt-3 rounded-lg gap-4 justify-start">
|
<div class="flex dark:bg-gray-800 bg-gray-200 py-3 pl-3 mt-3 rounded-lg gap-4 justify-start">
|
||||||
<div class="flex items-center">
|
<div class="flex items-center">
|
||||||
<UserAvatar user={reaction.user} size="sm" />
|
<UserAvatar user={reaction.user} size="sm" />
|
||||||
</div>
|
</div>
|
||||||
|
@ -215,7 +215,7 @@
|
||||||
|
|
||||||
{#if (index != reactions.length - 1 && !shouldGroup(reactions[index].createdAt, reactions[index + 1].createdAt)) || index === reactions.length - 1}
|
{#if (index != reactions.length - 1 && !shouldGroup(reactions[index].createdAt, reactions[index + 1].createdAt)) || index === reactions.length - 1}
|
||||||
<div
|
<div
|
||||||
class=" px-2 text-right w-full text-sm text-gray-500 dark:text-gray-300"
|
class="pt-1 px-2 text-right w-full text-sm text-gray-500 dark:text-gray-300"
|
||||||
title={new Date(reaction.createdAt).toLocaleDateString(undefined, timeOptions)}
|
title={new Date(reaction.createdAt).toLocaleDateString(undefined, timeOptions)}
|
||||||
>
|
>
|
||||||
{timeSince(luxon.DateTime.fromISO(reaction.createdAt))}
|
{timeSince(luxon.DateTime.fromISO(reaction.createdAt))}
|
||||||
|
@ -223,7 +223,7 @@
|
||||||
{/if}
|
{/if}
|
||||||
{:else if reaction.type === 'like'}
|
{:else if reaction.type === 'like'}
|
||||||
<div class="relative">
|
<div class="relative">
|
||||||
<div class="flex p-3 mx-2 mt-3 rounded-full gap-4 items-center text-sm">
|
<div class="flex py-3 pl-3 mt-3 gap-4 items-center text-sm">
|
||||||
<div class="text-red-600"><Icon path={mdiHeart} size={20} /></div>
|
<div class="text-red-600"><Icon path={mdiHeart} size={20} /></div>
|
||||||
|
|
||||||
<div class="w-full" title={`${reaction.user.name} (${reaction.user.email})`}>
|
<div class="w-full" title={`${reaction.user.name} (${reaction.user.email})`}>
|
||||||
|
@ -260,7 +260,7 @@
|
||||||
</div>
|
</div>
|
||||||
{#if (index != reactions.length - 1 && isTenMinutesApart(reactions[index].createdAt, reactions[index + 1].createdAt)) || index === reactions.length - 1}
|
{#if (index != reactions.length - 1 && isTenMinutesApart(reactions[index].createdAt, reactions[index + 1].createdAt)) || index === reactions.length - 1}
|
||||||
<div
|
<div
|
||||||
class=" px-2 text-right w-full text-sm text-gray-500 dark:text-gray-300"
|
class="pt-1 px-2 text-right w-full text-sm text-gray-500 dark:text-gray-300"
|
||||||
title={new Date(reaction.createdAt).toLocaleDateString(navigator.language, timeOptions)}
|
title={new Date(reaction.createdAt).toLocaleDateString(navigator.language, timeOptions)}
|
||||||
>
|
>
|
||||||
{timeSince(luxon.DateTime.fromISO(reaction.createdAt))}
|
{timeSince(luxon.DateTime.fromISO(reaction.createdAt))}
|
||||||
|
@ -274,7 +274,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="absolute w-full bottom-0">
|
<div class="absolute w-full bottom-0">
|
||||||
<div class="flex items-center justify-center p-2 mr-2" bind:clientHeight={chatHeight}>
|
<div class="flex items-center justify-center p-2" bind:clientHeight={chatHeight}>
|
||||||
<div class="flex p-2 gap-4 h-fit bg-gray-200 text-immich-dark-gray rounded-3xl w-full">
|
<div class="flex p-2 gap-4 h-fit bg-gray-200 text-immich-dark-gray rounded-3xl w-full">
|
||||||
<div>
|
<div>
|
||||||
<UserAvatar {user} size="md" showTitle={false} />
|
<UserAvatar {user} size="md" showTitle={false} />
|
||||||
|
|
|
@ -741,7 +741,7 @@
|
||||||
<div
|
<div
|
||||||
transition:fly={{ duration: 150 }}
|
transition:fly={{ duration: 150 }}
|
||||||
id="activity-panel"
|
id="activity-panel"
|
||||||
class="z-[1002] row-start-1 row-span-5 w-[360px] md:w-[460px] overflow-y-auto bg-immich-bg transition-all dark:border-l dark:border-l-immich-dark-gray dark:bg-immich-dark-bg pl-4"
|
class="z-[1002] row-start-1 row-span-5 w-[360px] md:w-[460px] overflow-y-auto bg-immich-bg transition-all dark:border-l dark:border-l-immich-dark-gray dark:bg-immich-dark-bg"
|
||||||
translate="yes"
|
translate="yes"
|
||||||
>
|
>
|
||||||
<ActivityViewer
|
<ActivityViewer
|
||||||
|
|
|
@ -100,6 +100,7 @@
|
||||||
let reactions: ActivityResponseDto[] = [];
|
let reactions: ActivityResponseDto[] = [];
|
||||||
let globalWidth: number;
|
let globalWidth: number;
|
||||||
let assetGridWidth: number;
|
let assetGridWidth: number;
|
||||||
|
let textarea: HTMLTextAreaElement;
|
||||||
|
|
||||||
const assetStore = new AssetStore({ albumId: album.id });
|
const assetStore = new AssetStore({ albumId: album.id });
|
||||||
const assetInteractionStore = createAssetInteractionStore();
|
const assetInteractionStore = createAssetInteractionStore();
|
||||||
|
@ -122,7 +123,13 @@
|
||||||
$: showActivityStatus =
|
$: showActivityStatus =
|
||||||
album.sharedUsers.length > 0 && !$showAssetViewer && (album.isActivityEnabled || $numberOfComments > 0);
|
album.sharedUsers.length > 0 && !$showAssetViewer && (album.isActivityEnabled || $numberOfComments > 0);
|
||||||
|
|
||||||
afterNavigate(({ from }) => {
|
$: {
|
||||||
|
if (textarea) {
|
||||||
|
textarea.value = album.description;
|
||||||
|
autoGrowHeight();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
$: afterNavigate(({ from }) => {
|
||||||
assetViewingStore.showAssetViewer(false);
|
assetViewingStore.showAssetViewer(false);
|
||||||
|
|
||||||
let url: string | undefined = from?.url?.pathname;
|
let url: string | undefined = from?.url?.pathname;
|
||||||
|
@ -142,6 +149,13 @@
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const autoGrowHeight = () => {
|
||||||
|
// little hack so that the height of the text area is correctly initialized
|
||||||
|
textarea.scrollHeight;
|
||||||
|
textarea.style.height = '5px';
|
||||||
|
textarea.style.height = `${textarea.scrollHeight}px`;
|
||||||
|
};
|
||||||
|
|
||||||
const handleToggleEnableActivity = async () => {
|
const handleToggleEnableActivity = async () => {
|
||||||
try {
|
try {
|
||||||
const { data } = await api.albumApi.updateAlbumInfo({
|
const { data } = await api.albumApi.updateAlbumInfo({
|
||||||
|
@ -636,7 +650,12 @@
|
||||||
disabled={!isOwned}
|
disabled={!isOwned}
|
||||||
title="Edit description"
|
title="Edit description"
|
||||||
>
|
>
|
||||||
{album.description || 'Add description'}
|
<textarea
|
||||||
|
class="w-full bg-transparent resize-none overflow-hidden outline-none"
|
||||||
|
bind:this={textarea}
|
||||||
|
bind:value={album.description}
|
||||||
|
placeholder="Add description"
|
||||||
|
/>
|
||||||
</button>
|
</button>
|
||||||
{/if}
|
{/if}
|
||||||
</section>
|
</section>
|
||||||
|
@ -680,7 +699,7 @@
|
||||||
<div
|
<div
|
||||||
transition:fly={{ duration: 150 }}
|
transition:fly={{ duration: 150 }}
|
||||||
id="activity-panel"
|
id="activity-panel"
|
||||||
class="z-[2] w-[360px] md:w-[460px] overflow-y-auto bg-immich-bg transition-all dark:border-l dark:border-l-immich-dark-gray dark:bg-immich-dark-bg pl-4"
|
class="z-[2] w-[360px] md:w-[460px] overflow-y-auto bg-immich-bg transition-all dark:border-l dark:border-l-immich-dark-gray dark:bg-immich-dark-bg"
|
||||||
translate="yes"
|
translate="yes"
|
||||||
>
|
>
|
||||||
<ActivityViewer
|
<ActivityViewer
|
||||||
|
@ -753,3 +772,15 @@
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<UpdatePanel {assetStore} />
|
<UpdatePanel {assetStore} />
|
||||||
|
|
||||||
|
<style>
|
||||||
|
::placeholder {
|
||||||
|
color: rgb(60, 60, 60);
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-ms-input-placeholder {
|
||||||
|
/* Edge 12 -18 */
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
Loading…
Reference in a new issue