KevinMidboe/immich
1
0
Fork 0
mirror of https://github.com/KevinMidboe/immich.git synced 2025-10-29 17:40:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore(web) Update SvelteKit (#1066)

Browse Source 
* Update sveltekit

* Update sveltekit

* Update correct preloading attribute
This commit is contained in:
Alex
2022-12-06 18:08:08 -06:00
committed by GitHub
parent b5a5363a6a
commit 1adf8ff6b6
15 changed files with 3336 additions and 3077 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6357
web/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

2
web/src/lib/components/album-page/album-card.svelte
View File

@@ -60,8 +60,10 @@
<div
class="h-[339px] w-[275px] hover:cursor-pointer mt-4 relative"
on:click={() => dispatchClick('click', album)}
on:keydown={() => dispatchClick('click', album)}
data-testid="album-card"
>
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div
id={`icon-${album.id}`}
class="absolute top-2 right-2"

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

@@ -258,6 +258,7 @@
halfLeftHover = false;
}}
on:click={navigateAssetBackward}
on:keydown={navigateAssetBackward}
>
<button
class="rounded-full p-3 hover:bg-gray-500 hover:text-gray-700 z-[1000] text-gray-500 mx-4"
@@ -291,6 +292,7 @@
asset.type === AssetTypeEnum.Video ? '' : 'z-[500]'
}`}
on:click={navigateAssetForward}
on:keydown={navigateAssetForward}
on:mouseenter={() => {
halfLeftHover = false;
halfRightHover = true;

8
web/src/lib/components/asset-viewer/detail-panel.svelte
View File

@@ -197,8 +197,12 @@
<p class="text-sm pb-4 ">APPEARS IN</p>
{/if}
{#each albums as album}
<a data-sveltekit-prefetch href={`/albums/${album.id}`}>
<div class="flex gap-4 py-2 hover:cursor-pointer" on:click={() => dispatch('click', album)}>
<a data-sveltekit-preload-data="hover" href={`/albums/${album.id}`}>
<div
class="flex gap-4 py-2 hover:cursor-pointer"
on:click={() => dispatch('click', album)}
on:keydown={() => dispatch('click', album)}
>
<div>
<img
alt={album.albumName}

1
web/src/lib/components/photos-page/asset-date-group.svelte
View File

@@ -137,6 +137,7 @@
transition:fly={{ x: -24, duration: 200, opacity: 0.5 }}
class="inline-block px-2 hover:cursor-pointer"
on:click={() => selectAssetGroupHandler(assetsInDateGroup, dateGroupTitle)}
on:keydown={() => selectAssetGroupHandler(assetsInDateGroup, dateGroupTitle)}
>
{#if $selectedGroup.has(dateGroupTitle)}
<CheckCircle size="24" color="#4250af" />

1
web/src/lib/components/shared-components/immich-thumbnail.svelte
View File

@@ -154,6 +154,7 @@
on:mouseenter={handleMouseOverThumbnail}
on:mouseleave={handleMouseLeaveThumbnail}
on:click={thumbnailClickedHandler}
on:keydown={thumbnailClickedHandler}
>
{#if mouseOver || selected || disabled}
<div

5
web/src/lib/components/shared-components/navigation-bar.svelte
View File

@@ -52,7 +52,7 @@
>
<div class="flex border-b dark:border-b-immich-dark-gray place-items-center px-6 py-2 ">
<a
data-sveltekit-prefetch
data-sveltekit-preload-data="hover"
class="flex gap-2 place-items-center hover:cursor-pointer"
href="/photos"
>
@@ -82,7 +82,7 @@
{/if}
{#if user.isAdmin}
<a data-sveltekit-prefetch href={`admin`}>
<a data-sveltekit-preload-data="hover" href={`admin`}>
<button
class={`flex place-items-center place-content-center gap-2 hover:bg-immich-primary/5 dark:hover:bg-immich-dark-primary/25 dark:text-immich-dark-fg p-2 rounded-lg font-medium ${
$page.url.pathname == '/admin' &&
@@ -97,6 +97,7 @@
on:focus={() => (shouldShowAccountInfo = true)}
on:mouseleave={() => (shouldShowAccountInfo = false)}
on:click={showAccountInfoPanel}
on:keydown={showAccountInfoPanel}
>
<button
class="flex place-items-center place-content-center rounded-full bg-immich-primary hover:bg-immich-primary/80 h-12 w-12 text-gray-100 dark:text-immich-dark-bg dark:bg-immich-dark-primary"

1
web/src/lib/components/shared-components/notification/notification-card.svelte
View File

@@ -76,6 +76,7 @@
style:border={borderStyle()}
class="min-h-[80px] w-[300px] rounded-2xl z-[999999] shadow-md p-4 mb-4 hover:cursor-pointer"
on:click={handleClick}
on:keydown={handleClick}
>
<div class="flex justify-between">
<div class="flex gap-2 place-items-center">

2
web/src/lib/components/shared-components/portal/portal.svelte
View File

@@ -44,7 +44,7 @@
}
</script>
<script>
<script lang="ts">
/**
* DOM Element or CSS Selector
* @type { HTMLElement|string}

1
web/src/lib/components/shared-components/scrollbar/scrollbar.svelte
View File

@@ -28,7 +28,6 @@
export let scrollbarHeight = 0;
$: timelineHeight = $assetGridState.timelineHeight;
$: viewportWidth = $assetGridState.viewportWidth;
$: timelineScrolltop = (scrollbarPosition / scrollbarHeight) * timelineHeight;
let segmentScrollbarLayout: SegmentScrollbarLayout[] = [];

1
web/src/lib/components/shared-components/side-bar/side-bar-button.svelte
View File

@@ -23,6 +23,7 @@
<div
on:click={onButtonClicked}
on:keydown={onButtonClicked}
class={`flex gap-4 place-items-center pl-5 py-3 rounded-tr-full rounded-br-full hover:bg-immich-gray dark:hover:bg-immich-dark-gray hover:text-immich-primary dark:text-immich-dark-fg dark:hover:text-immich-dark-primary hover:cursor-pointer
${
isSelected &&

20
web/src/lib/components/shared-components/side-bar/side-bar.svelte
View File

@@ -20,11 +20,11 @@
// let domCount = 0;
onMount(async () => {
if ($page.routeId == 'albums') {
if ($page.route.id == 'albums') {
selectedAction = AppSideBarSelection.ALBUMS;
} else if ($page.routeId == 'photos') {
} else if ($page.route.id == 'photos') {
selectedAction = AppSideBarSelection.PHOTOS;
} else if ($page.routeId == 'sharing') {
} else if ($page.route.id == 'sharing') {
selectedAction = AppSideBarSelection.SHARING;
}
@@ -54,9 +54,9 @@
<section id="sidebar" class="flex flex-col gap-1 pt-8 pr-6 bg-immich-bg dark:bg-immich-dark-bg">
<a
data-sveltekit-prefetch
data-sveltekit-preload-data="hover"
data-sveltekit-noscroll
href={$page.routeId !== 'photos' ? `/photos` : null}
href={$page.route.id !== 'photos' ? `/photos` : null}
class="relative"
>
<SideBarButton
@@ -92,8 +92,8 @@
</a>
<a
data-sveltekit-prefetch
href={$page.routeId !== 'sharing' ? `/sharing` : null}
data-sveltekit-preload-data="hover"
href={$page.route.id !== 'sharing' ? `/sharing` : null}
class="relative"
>
<SideBarButton
@@ -129,7 +129,11 @@
<div class="text-xs ml-5 my-4 dark:text-immich-dark-fg">
<p>LIBRARY</p>
</div>
<a data-sveltekit-prefetch href={$page.routeId !== 'albums' ? `/albums` : null} class="relative">
<a
data-sveltekit-preload-data="hover"
href={$page.route.id !== 'albums' ? `/albums` : null}
class="relative"
>
<SideBarButton
title="Albums"
logo={ImageAlbum}

3
web/src/lib/components/shared-components/theme-button.svelte
View File

@@ -1,8 +1,6 @@
<script lang="ts">
import { onMount } from 'svelte';
let toggleButton: HTMLElement;
onMount(() => {
var themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');
var themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');
@@ -48,7 +46,6 @@
</script>
<button
bind:this={toggleButton}
on:click={toggleTheme}
id="theme-toggle"
type="button"

3
web/src/routes/albums/+page.svelte
View File

@@ -80,7 +80,7 @@
<div class="flex flex-wrap gap-8">
{#each $albums as album}
{#key album.id}
<a data-sveltekit-prefetch href={`albums/${album.id}`}>
<a data-sveltekit-preload-data="hover" href={`albums/${album.id}`}>
<AlbumCard
{album}
on:showalbumcontextmenu={(e) => showAlbumContextMenu(e.detail, album)}
@@ -94,6 +94,7 @@
{#if $albums.length === 0}
<div
on:click={handleCreateAlbum}
on:keydown={handleCreateAlbum}
class="border dark:border-immich-dark-gray hover:bg-immich-primary/5 dark:hover:bg-immich-dark-primary/25 hover:cursor-pointer p-5 w-[50%] m-auto mt-10 bg-gray-50 dark:bg-immich-dark-gray rounded-3xl flex flex-col place-content-center place-items-center"
>
<img src="/empty-1.svg" alt="Empty shared album" width="500" />

2
web/src/routes/sharing/+page.svelte
View File

@@ -75,7 +75,7 @@
<!-- Share Album List -->
<div class="w-full flex flex-col place-items-center">
{#each data.sharedAlbums as album}
<a data-sveltekit-prefetch href={`albums/${album.id}`}>
<a data-sveltekit-preload-data="hover" href={`albums/${album.id}`}>
<SharedAlbumListTile {album} user={data.user} />
</a>
{/each}