tbelway/immich-quadlet
1
0
Fork 0
forked from Cutlery/immich
Code Pull Requests Activity

fix(web): album description (#6512)

Browse Source 
fix: album description
This commit is contained in:
martin 2024-01-19 22:30:00 +01:00 committed by GitHub
parent 68d4f1b946
commit aa02ccb731
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 41 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
web/src/lib/components/asset-viewer/activity-viewer.svelte
View File

@ -172,12 +172,12 @@
</div>
{#if innerHeight}
<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"
>
{#each reactions as reaction, index (reaction.id)}
{#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">
<UserAvatar user={reaction.user} size="sm" />
</div>
@ -215,7 +215,7 @@
{#if (index != reactions.length - 1 && !shouldGroup(reactions[index].createdAt, reactions[index + 1].createdAt)) || index === reactions.length - 1}
<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)}
>
{timeSince(luxon.DateTime.fromISO(reaction.createdAt))}
@ -223,7 +223,7 @@
{/if}
{:else if reaction.type === 'like'}
<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="w-full" title={`${reaction.user.name} (${reaction.user.email})`}>
@ -260,7 +260,7 @@
</div>
{#if (index != reactions.length - 1 && isTenMinutesApart(reactions[index].createdAt, reactions[index + 1].createdAt)) || index === reactions.length - 1}
<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)}
>
{timeSince(luxon.DateTime.fromISO(reaction.createdAt))}
@ -274,7 +274,7 @@
</div>
<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>
<UserAvatar {user} size="md" showTitle={false} />

2
web/src/lib/components/asset-viewer/asset-viewer.svelte
View File

@ -741,7 +741,7 @@
<div
transition:fly={{ duration: 150 }}
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"
>
<ActivityViewer

37
web/src/routes/(user)/albums/[albumId]/+page.svelte
View File

@ -100,6 +100,7 @@
let reactions: ActivityResponseDto[] = [];
let globalWidth: number;
let assetGridWidth: number;
let textarea: HTMLTextAreaElement;
const assetStore = new AssetStore({ albumId: album.id });
const assetInteractionStore = createAssetInteractionStore();
@ -122,7 +123,13 @@
$: showActivityStatus =
album.sharedUsers.length > 0 && !$showAssetViewer && (album.isActivityEnabled || $numberOfComments > 0);
afterNavigate(({ from }) => {
$: {
if (textarea) {
textarea.value = album.description;
autoGrowHeight();
}
}
$: afterNavigate(({ from }) => {
assetViewingStore.showAssetViewer(false);
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 () => {
try {
const { data } = await api.albumApi.updateAlbumInfo({
@ -636,7 +650,12 @@
disabled={!isOwned}
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>
{/if}
</section>
@ -680,7 +699,7 @@
<div
transition:fly={{ duration: 150 }}
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"
>
<ActivityViewer
@ -753,3 +772,15 @@
{/if}
<UpdatePanel {assetStore} />
<style>
::placeholder {
color: rgb(60, 60, 60);
opacity: 0.6;
}
::-ms-input-placeholder {
/* Edge 12 -18 */
color: white;
}
</style>