helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-11-07 17:27:20 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

fix(web): set album description textarea height correctly (#9880)

Browse source 
* fix(web): set description textarea content correctly

* Deduplicate description textarea

* Add strict types to function

* Add strict types to functions

* Add default parameter values

* Add tests covering AutogrowTextarea

* Add another test and lint the files

* Add a test, fix a typo

* Implement suggestions

* Remove use of $$restProp
This commit is contained in:
Snowknight26 2024-06-01 12:47:14 -05:00 • committed by GitHub
parent 7524c746a6
commit 21718cc343
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 130 additions and 47 deletions
Download patch file Download diff file Expand all files Collapse all files

34
web/src/lib/components/asset-viewer/detail-panel-description.svelte
View file

@ -1,32 +1,18 @@
<script lang="ts">
import { autoGrowHeight } from '$lib/actions/autogrow';
import { clickOutside } from '$lib/actions/click-outside';
import { shortcut } from '$lib/actions/shortcut';
import {
NotificationType,
notificationController,
} from '$lib/components/shared-components/notification/notification';
import { handleError } from '$lib/utils/handle-error';
import { updateAsset, type AssetResponseDto } from '@immich/sdk';
import { tick } from 'svelte';
import AutogrowTextarea from '$lib/components/shared-components/autogrow-textarea.svelte';
export let asset: AssetResponseDto;
export let isOwner: boolean;
let textarea: HTMLTextAreaElement;
$: description = asset.exifInfo?.description || '';
$: newDescription = description;
$: if (textarea) {
newDescription;
void tick().then(() => autoGrowHeight(textarea));
}
const handleFocusOut = async () => {
if (description === newDescription) {
return;
}
const handleFocusOut = async (newDescription: string) => {
try {
await updateAsset({ id: asset.id, updateAssetDto: { description: newDescription } });
notificationController.show({
@ -36,23 +22,17 @@
} catch (error) {
handleError(error, 'Cannot update the description');
}
description = newDescription;
};
</script>
{#if isOwner}
<section class="px-4 mt-10">
<textarea
bind:this={textarea}
class="max-h-[500px] w-full resize-none border-b border-gray-500 bg-transparent text-base text-black outline-none transition-all focus:border-b-2 focus:border-immich-primary disabled:border-none dark:text-white dark:focus:border-immich-dark-primary immich-scrollbar"
<AutogrowTextarea
content={description}
class="max-h-[500px] w-full border-b border-gray-500 bg-transparent text-base text-black outline-none transition-all focus:border-b-2 focus:border-immich-primary disabled:border-none dark:text-white dark:focus:border-immich-dark-primary immich-scrollbar"
onContentUpdate={handleFocusOut}
placeholder="Add a description"
on:focusout={handleFocusOut}
on:input={(e) => (newDescription = e.currentTarget.value)}
value={description}
use:clickOutside={{ onOutclick: void handleFocusOut }}
use:shortcut={{
shortcut: { key: 'Enter', ctrl: true },
onShortcut: (e) => e.currentTarget.blur(),
}}
/>
</section>
{:else if description}