1
0
mirror of https://github.com/immich-app/immich.git synced 2024-12-23 02:06:15 +02:00

fix(web): small issues everywhere (#7207)

* multiple fix

* fix: album re-render

* fix: revert re-render album

* fix: linter

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
This commit is contained in:
martin 2024-02-21 14:29:22 +01:00 committed by GitHub
parent 855aa8e30a
commit 8f57bfb496
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 25 additions and 46 deletions

View File

@ -17,7 +17,7 @@ x-server-build: &server-common
services: services:
immich-server: immich-server:
container_name: immich_server container_name: immich_server
command: [ "./start-server.sh" ] command: [ "start.sh", "immich" ]
<<: *server-common <<: *server-common
ports: ports:
- 2283:3001 - 2283:3001
@ -27,7 +27,7 @@ services:
immich-microservices: immich-microservices:
container_name: immich_microservices container_name: immich_microservices
command: [ "./start-microservices.sh" ] command: [ "start.sh", "microservices" ]
<<: *server-common <<: *server-common
# extends: # extends:
# file: hwaccel.transcoding.yml # file: hwaccel.transcoding.yml

View File

@ -291,8 +291,9 @@
{disabled} {disabled}
bind:this={textArea} bind:this={textArea}
bind:value={message} bind:value={message}
use:autoGrowHeight={'5px'}
placeholder={disabled ? 'Comments are disabled' : 'Say something'} placeholder={disabled ? 'Comments are disabled' : 'Say something'}
on:input={() => autoGrowHeight(textArea)} on:input={() => autoGrowHeight(textArea, '5px')}
on:keypress={handleEnter} on:keypress={handleEnter}
class="h-[18px] {disabled class="h-[18px] {disabled
? 'cursor-not-allowed' ? 'cursor-not-allowed'

View File

@ -1,5 +1,4 @@
<script lang="ts"> <script lang="ts">
import { browser } from '$app/environment';
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
import Icon from '$lib/components/elements/icon.svelte'; import Icon from '$lib/components/elements/icon.svelte';
import { AppRoute, AssetAction, ProjectionType } from '$lib/constants'; import { AppRoute, AssetAction, ProjectionType } from '$lib/constants';
@ -179,11 +178,8 @@
getNumberOfComments(); getNumberOfComments();
} }
} }
const onKeyboardPress = (keyInfo: KeyboardEvent) => handleKeyboardPress(keyInfo);
onMount(async () => { onMount(async () => {
document.addEventListener('keydown', onKeyboardPress);
slideshowStateUnsubscribe = slideshowState.subscribe((value) => { slideshowStateUnsubscribe = slideshowState.subscribe((value) => {
if (value === SlideshowState.PlaySlideshow) { if (value === SlideshowState.PlaySlideshow) {
slideshowHistory.reset(); slideshowHistory.reset();
@ -221,10 +217,6 @@
}); });
onDestroy(() => { onDestroy(() => {
if (browser) {
document.removeEventListener('keydown', onKeyboardPress);
}
if (slideshowStateUnsubscribe) { if (slideshowStateUnsubscribe) {
slideshowStateUnsubscribe(); slideshowStateUnsubscribe();
} }
@ -255,13 +247,18 @@
isShowActivity = !isShowActivity; isShowActivity = !isShowActivity;
}; };
const handleKeyboardPress = (event: KeyboardEvent) => { const handleKeypress = (event: KeyboardEvent) => {
if (shouldIgnoreShortcut(event)) { if (shouldIgnoreShortcut(event)) {
return; return;
} }
const key = event.key; const key = event.key;
const shiftKey = event.shiftKey; const shiftKey = event.shiftKey;
const ctrlKey = event.ctrlKey;
if (ctrlKey) {
return;
}
switch (key) { switch (key) {
case 'a': case 'a':
@ -458,18 +455,6 @@
await handleGetAllAlbums(); await handleGetAllAlbums();
}; };
const disableKeyDownEvent = () => {
if (browser) {
document.removeEventListener('keydown', onKeyboardPress);
}
};
const enableKeyDownEvent = () => {
if (browser) {
document.addEventListener('keydown', onKeyboardPress);
}
};
const toggleArchive = async () => { const toggleArchive = async () => {
try { try {
const data = await updateAsset({ const data = await updateAsset({
@ -570,6 +555,8 @@
}; };
</script> </script>
<svelte:window on:keydown={handleKeypress} />
<section <section
id="immich-asset-viewer" id="immich-asset-viewer"
class="fixed left-0 top-0 z-[1001] grid h-screen w-screen grid-cols-4 grid-rows-[64px_1fr] overflow-hidden bg-black" class="fixed left-0 top-0 z-[1001] grid h-screen w-screen grid-cols-4 grid-rows-[64px_1fr] overflow-hidden bg-black"
@ -738,8 +725,6 @@
albums={appearsInAlbums} albums={appearsInAlbums}
on:close={() => ($isShowDetail = false)} on:close={() => ($isShowDetail = false)}
on:closeViewer={handleCloseViewer} on:closeViewer={handleCloseViewer}
on:descriptionFocusIn={disableKeyDownEvent}
on:descriptionFocusOut={enableKeyDownEvent}
/> />
</div> </div>
{/if} {/if}

View File

@ -40,6 +40,7 @@
import ChangeLocation from '../shared-components/change-location.svelte'; import ChangeLocation from '../shared-components/change-location.svelte';
import UserAvatar from '../shared-components/user-avatar.svelte'; import UserAvatar from '../shared-components/user-avatar.svelte';
import LoadingSpinner from '../shared-components/loading-spinner.svelte'; import LoadingSpinner from '../shared-components/loading-spinner.svelte';
import { NotificationType, notificationController } from '../shared-components/notification/notification';
export let asset: AssetResponseDto; export let asset: AssetResponseDto;
export let albums: AlbumResponseDto[] = []; export let albums: AlbumResponseDto[] = [];
@ -101,9 +102,6 @@
const dispatch = createEventDispatcher<{ const dispatch = createEventDispatcher<{
close: void; close: void;
descriptionFocusIn: void;
descriptionFocusOut: void;
click: AlbumResponseDto;
closeViewer: void; closeViewer: void;
}>(); }>();
@ -139,19 +137,18 @@
showEditFaces = false; showEditFaces = false;
}; };
const handleFocusIn = () => {
dispatch('descriptionFocusIn');
};
const handleFocusOut = async () => { const handleFocusOut = async () => {
textArea.blur(); textArea.blur();
if (description === originalDescription) { if (description === originalDescription) {
return; return;
} }
originalDescription = description; originalDescription = description;
dispatch('descriptionFocusOut');
try { try {
await updateAsset({ id: asset.id, updateAssetDto: { description } }); await updateAsset({ id: asset.id, updateAssetDto: { description } });
notificationController.show({
type: NotificationType.Info,
message: 'Asset description has been updated',
});
} catch (error) { } catch (error) {
handleError(error, 'Cannot update the description'); handleError(error, 'Cannot update the description');
} }
@ -220,7 +217,6 @@
class="max-h-[500px] class="max-h-[500px]
w-full resize-none overflow-hidden 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" w-full resize-none overflow-hidden 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"
placeholder={isOwner ? 'Add a description' : ''} placeholder={isOwner ? 'Add a description' : ''}
on:focusin={handleFocusIn}
on:focusout={handleFocusOut} on:focusout={handleFocusOut}
on:input={() => autoGrowHeight(textArea)} on:input={() => autoGrowHeight(textArea)}
bind:value={description} bind:value={description}
@ -665,12 +661,7 @@
<p class="pb-4 text-sm">APPEARS IN</p> <p class="pb-4 text-sm">APPEARS IN</p>
{#each albums as album} {#each albums as album}
<a data-sveltekit-preload-data="hover" href={`/albums/${album.id}`}> <a data-sveltekit-preload-data="hover" href={`/albums/${album.id}`}>
<!-- svelte-ignore a11y-no-static-element-interactions --> <div class="flex gap-4 py-2 hover:cursor-pointer">
<div
class="flex gap-4 py-2 hover:cursor-pointer"
on:click={() => dispatch('click', album)}
on:keydown={() => dispatch('click', album)}
>
<div> <div>
<img <img
alt={album.albumName} alt={album.albumName}

View File

@ -1,5 +1,4 @@
export const autoGrowHeight = (textarea: HTMLTextAreaElement, height = 'auto') => { export const autoGrowHeight = (textarea: HTMLTextAreaElement, height = 'auto') => {
textarea.scrollHeight;
textarea.style.height = height; textarea.style.height = height;
textarea.style.height = `${textarea.scrollHeight}px`; textarea.style.height = `${textarea.scrollHeight}px`;
}; };

View File

@ -83,8 +83,6 @@
let album = data.album; let album = data.album;
let description = album.description; let description = album.description;
$: album = data.album;
$: { $: {
if (!album.isActivityEnabled && $numberOfComments === 0) { if (!album.isActivityEnabled && $numberOfComments === 0) {
isShowActivity = false; isShowActivity = false;
@ -452,7 +450,10 @@
description, description,
}, },
}); });
notificationController.show({
type: NotificationType.Info,
message: 'Album description has been updated',
});
album.description = description; album.description = description;
} catch (error) { } catch (error) {
handleError(error, 'Error updating album description'); handleError(error, 'Error updating album description');
@ -672,7 +673,9 @@
placeholder="Add description" placeholder="Add description"
/> />
{:else if description} {:else if description}
<p class="break-words whitespace-pre-line w-full text-black dark:text-white text-base">{description}</p> <p class="break-words whitespace-pre-line w-full text-black dark:text-white text-base">
{description}
</p>
{/if} {/if}
</section> </section>
{/if} {/if}