From aa02ccb7314b2d627be5a2c5fab0fc8974456ade Mon Sep 17 00:00:00 2001 From: martin <74269598+martabal@users.noreply.github.com> Date: Fri, 19 Jan 2024 22:30:00 +0100 Subject: [PATCH] fix(web): album description (#6512) fix: album description --- .../asset-viewer/activity-viewer.svelte | 12 +++--- .../asset-viewer/asset-viewer.svelte | 2 +- .../(user)/albums/[albumId]/+page.svelte | 37 +++++++++++++++++-- 3 files changed, 41 insertions(+), 10 deletions(-) diff --git a/web/src/lib/components/asset-viewer/activity-viewer.svelte b/web/src/lib/components/asset-viewer/activity-viewer.svelte index 7b49fdb4d1..ba8ed47f09 100644 --- a/web/src/lib/components/asset-viewer/activity-viewer.svelte +++ b/web/src/lib/components/asset-viewer/activity-viewer.svelte @@ -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} /> diff --git a/web/src/lib/components/asset-viewer/asset-viewer.svelte b/web/src/lib/components/asset-viewer/asset-viewer.svelte index fc298f471d..9de100c2a6 100644 --- a/web/src/lib/components/asset-viewer/asset-viewer.svelte +++ b/web/src/lib/components/asset-viewer/asset-viewer.svelte @@ -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 diff --git a/web/src/routes/(user)/albums/[albumId]/+page.svelte b/web/src/routes/(user)/albums/[albumId]/+page.svelte index c878b98f6e..89d048eaae 100644 --- a/web/src/routes/(user)/albums/[albumId]/+page.svelte +++ b/web/src/routes/(user)/albums/[albumId]/+page.svelte @@ -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>