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

feat(web): theme/locale preferences and improve SSR (#1832)

Browse source
This commit is contained in:
Michel Heusschen 2023-02-22 18:53:08 +01:00 • committed by GitHub
parent a9a769d902
commit 10cb612fb1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
20 changed files with 142 additions and 144 deletions
Download patch file Download diff file Expand all files Collapse all files

8
web/src/lib/components/album-page/album-card.svelte
View file

@ -17,6 +17,7 @@
import DotsVertical from 'svelte-material-icons/DotsVertical.svelte';
import CircleIconButton from '../shared-components/circle-icon-button.svelte';
import noThumbnailUrl from '$lib/assets/no-thumbnail.png';
import { locale } from '$lib/stores/preferences.store';
export let album: AlbumResponseDto;
@ -52,8 +53,6 @@
onMount(async () => {
imageData = (await loadHighQualityThumbnail(album.albumThumbnailAssetId)) || noThumbnailUrl;
});
const locale = navigator.language;
</script>
<div
@ -91,7 +90,10 @@
</p>
<span class="text-xs flex gap-2 dark:text-immich-dark-fg" data-testid="album-details">
<p>{album.assetCount.toLocaleString(locale)} {album.assetCount == 1 ? `item` : `items`}</p>
<p>
{album.assetCount.toLocaleString($locale)}
{album.assetCount == 1 ? `item` : `items`}
</p>
{#if album.shared}
<p>·</p>

8
web/src/lib/components/album-page/album-viewer.svelte
View file

@ -39,6 +39,7 @@
import ThemeButton from '../shared-components/theme-button.svelte';
import { openFileUploadDialog } from '$lib/utils/file-uploader';
import { bulkDownload } from '$lib/utils/asset-utils';
import { locale } from '$lib/stores/preferences.store';
import GalleryViewer from '../shared-components/gallery-viewer/gallery-viewer.svelte';
import ImmichLogo from '../shared-components/immich-logo.svelte';
@ -88,7 +89,6 @@
}
});
const locale = navigator.language;
const albumDateFormat: Intl.DateTimeFormatOptions = {
month: 'short',
day: 'numeric',
@ -99,8 +99,8 @@
const startDate = new Date(album.assets[0].fileCreatedAt);
const endDate = new Date(album.assets[album.assetCount - 1].fileCreatedAt);
const startDateString = startDate.toLocaleDateString(locale, albumDateFormat);
const endDateString = endDate.toLocaleDateString(locale, albumDateFormat);
const startDateString = startDate.toLocaleDateString($locale, albumDateFormat);
const endDateString = endDate.toLocaleDateString($locale, albumDateFormat);
// If the start and end date are the same, only show one date
return startDateString === endDateString
@ -380,7 +380,7 @@
>
<svelte:fragment slot="leading">
<p class="font-medium text-immich-primary dark:text-immich-dark-primary">
Selected {multiSelectAsset.size.toLocaleString(locale)}
Selected {multiSelectAsset.size.toLocaleString($locale)}
</p>
</svelte:fragment>
<svelte:fragment slot="trailing">

4
web/src/lib/components/album-page/asset-selection.svelte
View file

@ -11,12 +11,12 @@
assetsInAlbumStoreState,
selectedAssets
} from '$lib/stores/asset-interaction.store';
import { locale } from '$lib/stores/preferences.store';
const dispatch = createEventDispatcher();
export let albumId: string;
export let assetsInAlbum: AssetResponseDto[];
const locale = navigator.language;
onMount(() => {
$assetsInAlbumStoreState = assetsInAlbum;
@ -51,7 +51,7 @@
<p class="text-lg dark:text-immich-dark-fg">Add to album</p>
{:else}
<p class="text-lg dark:text-immich-dark-fg">
{$selectedAssets.size.toLocaleString(locale)} selected
{$selectedAssets.size.toLocaleString($locale)} selected
</p>
{/if}
</svelte:fragment>