cjones/immich
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: rtl (#17860)

Browse Source
This commit is contained in:
Jason Rasmussen
2025-04-28 09:53:53 -04:00
committed by GitHub
parent 85ac0512a6
commit e6c575c33e
130 changed files with 354 additions and 323 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte
View File

@@ -708,7 +708,7 @@
</AssetGrid>
{#if showActivityStatus}
<div class="absolute z-[2] bottom-0 right-0 mb-6 mr-6 justify-self-end">
<div class="absolute z-[2] bottom-0 end-0 mb-6 me-6 justify-self-end">
<ActivityStatus
disabled={!album.isActivityEnabled}
{isLiked}
@@ -725,7 +725,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"
class="z-[2] w-[360px] md:w-[460px] overflow-y-auto bg-immich-bg transition-all dark:border-l dark:border-s-immich-dark-gray dark:bg-immich-dark-bg"
translate="yes"
>
<ActivityViewer

6
web/src/routes/(user)/explore/+page.svelte
View File

@@ -48,7 +48,7 @@
<p class="mb-4 font-medium dark:text-immich-dark-fg">{$t('people')}</p>
<a
href={AppRoute.PEOPLE}
class="pr-4 text-sm font-medium hover:text-immich-primary dark:text-immich-dark-fg dark:hover:text-immich-dark-primary"
class="pe-4 text-sm font-medium hover:text-immich-primary dark:text-immich-dark-fg dark:hover:text-immich-dark-primary"
draggable="false">{$t('view_all')}</a
>
</div>
@@ -64,7 +64,7 @@
widthStyle="100%"
/>
{#if person.isFavorite}
<div class="absolute top-2 left-2">
<div class="absolute top-2 start-2">
<Icon path={mdiHeart} size="24" class="text-white" />
</div>
{/if}
@@ -82,7 +82,7 @@
<p class="mb-4 font-medium dark:text-immich-dark-fg">{$t('places')}</p>
<a
href={AppRoute.PLACES}
class="pr-4 text-sm font-medium hover:text-immich-primary dark:text-immich-dark-fg dark:hover:text-immich-dark-primary"
class="pe-4 text-sm font-medium hover:text-immich-primary dark:text-immich-dark-fg dark:hover:text-immich-dark-primary"
draggable="false">{$t('view_all')}</a
>
</div>

4
web/src/routes/(user)/folders/[[photos=photos]]/[[assetId=id]]/+page.svelte
View File

@@ -87,7 +87,7 @@
</script>
{#if assetInteraction.selectionActive}
<div class="fixed z-[910] top-0 left-0 w-full">
<div class="fixed z-[910] top-0 start-0 w-full">
<AssetSelectControlBar
assets={assetInteraction.selectedAssets}
clearSelect={() => cancelMultiselect(assetInteraction)}
@@ -133,7 +133,7 @@
<SideBarSection>
<SkipLink target={`#${headerId}`} text={$t('skip_to_folders')} breakpoint="md" />
<section>
<div class="text-xs pl-4 mb-2 dark:text-white">{$t('explorer').toUpperCase()}</div>
<div class="text-xs ps-4 mb-2 dark:text-white">{$t('explorer').toUpperCase()}</div>
<div class="h-full">
<TreeItems
icons={{ default: mdiFolderOutline, active: mdiFolder }}

2
web/src/routes/(user)/people/+page.svelte
View File

@@ -458,7 +458,7 @@
<dialog
open
transition:fly={{ y: innerHeight, duration: 150, easing: quintOut, opacity: 0 }}
class="absolute left-0 top-0 z-[9999] h-full w-full bg-immich-bg dark:bg-immich-dark-bg"
class="absolute start-0 top-0 z-[9999] h-full w-full bg-immich-bg dark:bg-immich-dark-bg"
aria-modal="true"
aria-labelledby="manage-visibility-title"
use:focusTrap

6
web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/+page.svelte
View File

@@ -486,7 +486,7 @@
</header>
<main
class="relative h-dvh overflow-hidden bg-immich-bg tall:ml-4 md:pt-[var(--navbar-height-md)] pt-[var(--navbar-height)] dark:bg-immich-dark-bg"
class="relative h-dvh overflow-hidden bg-immich-bg tall:ms-4 md:pt-[var(--navbar-height-md)] pt-[var(--navbar-height)] dark:bg-immich-dark-bg"
use:scrollMemoryClearer={{
routeStartsWith: AppRoute.PEOPLE,
beforeClear: () => {
@@ -542,7 +542,7 @@
heightStyle="3.375rem"
/>
<div
class="flex flex-col justify-center text-left px-4 text-immich-primary dark:text-immich-dark-primary"
class="flex flex-col justify-center text-start px-4 text-immich-primary dark:text-immich-dark-primary"
>
<p class="w-40 sm:w-72 font-medium truncate">{person.name || $t('add_a_name')}</p>
<p class="text-sm text-gray-500 dark:text-immich-gray">
@@ -598,7 +598,7 @@
widthStyle="2rem"
heightStyle="2rem"
/>
<p class="ml-4 text-gray-700 dark:text-gray-100">{person.name}</p>
<p class="ms-4 text-gray-700 dark:text-gray-100">{person.name}</p>
</button>
{/each}
</div>

12
web/src/routes/(user)/search/[[photos=photos]]/[[assetId=id]]/+page.svelte
View File

@@ -251,7 +251,7 @@
<section>
{#if assetInteraction.selectionActive}
<div class="fixed z-[100] top-0 left-0 w-full">
<div class="fixed z-[100] top-0 start-0 w-full">
<AssetSelectControlBar
assets={assetInteraction.selectedAssets}
clearSelect={() => cancelMultiselect(assetInteraction)}
@@ -289,13 +289,13 @@
</AssetSelectControlBar>
</div>
{:else}
<div class="fixed z-[100] top-0 left-0 w-full">
<div class="fixed z-[100] top-0 start-0 w-full">
<ControlAppBar onClose={() => goto(previousRoute)} backIcon={mdiArrowLeft}>
<div
class="-z-[1] bg-immich-bg dark:bg-immich-dark-bg"
style="position:absolute;top:0;left:0;right:0;bottom:0;"
></div>
<div class="w-full flex-1 pl-4">
<div class="w-full flex-1 ps-4">
<SearchBar grayTheme={false} value={terms?.query ?? ''} searchQuery={terms} />
</div>
</ControlAppBar>
@@ -313,13 +313,13 @@
<div class="flex place-content-center place-items-center text-xs">
<div
class="bg-immich-primary py-2 px-4 text-white dark:text-black dark:bg-immich-dark-primary
{value === true ? 'rounded-full' : 'rounded-tl-full rounded-bl-full'}"
{value === true ? 'rounded-full' : 'roudned-s-full'}"
>
{getHumanReadableSearchKey(key as keyof SearchTerms)}
</div>
{#if value !== true}
<div class="bg-gray-300 py-2 px-4 dark:bg-gray-800 dark:text-white rounded-tr-full rounded-br-full">
<div class="bg-gray-300 py-2 px-4 dark:bg-gray-800 dark:text-white rounded-e-full">
{#if (key === 'takenAfter' || key === 'takenBefore') && typeof value === 'string'}
{getHumanReadableDate(value)}
{:else if key === 'personIds' && Array.isArray(value)}
@@ -349,7 +349,7 @@
>
{#if searchResultAlbums.length > 0}
<section>
<div class="ml-6 text-4xl font-medium text-black/70 dark:text-white/80">{$t('albums').toUpperCase()}</div>
<div class="ms-6 text-4xl font-medium text-black/70 dark:text-white/80">{$t('albums').toUpperCase()}</div>
<AlbumCardGroup albums={searchResultAlbums} showDateRange showItemCount />
<div class="m-6 text-4xl font-medium text-black/70 dark:text-white/80">

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

@@ -68,7 +68,7 @@
class="flex gap-4 rounded-lg px-5 py-4 transition-all hover:bg-gray-200 dark:hover:bg-gray-700"
>
<UserAvatar user={partner} size="lg" />
<div class="text-left">
<div class="text-start">
<p class="text-immich-fg dark:text-immich-dark-fg">
{partner.name}
</p>

2
web/src/routes/(user)/tags/[[photos=photos]]/[[assetId=id]]/+page.svelte
View File

@@ -146,7 +146,7 @@
<SideBarSection>
<SkipLink target={`#${headerId}`} text={$t('skip_to_tags')} breakpoint="md" />
<section>
<div class="text-xs pl-4 mb-2 dark:text-white">{$t('explorer').toUpperCase()}</div>
<div class="text-xs ps-4 mb-2 dark:text-white">{$t('explorer').toUpperCase()}</div>
<div class="h-full">
<TreeItems
icons={{ default: mdiTag, active: mdiTag }}

5
web/src/routes/+layout.svelte
View File

@@ -11,7 +11,8 @@
import UploadPanel from '$lib/components/shared-components/upload-panel.svelte';
import VersionAnnouncementBox from '$lib/components/shared-components/version-announcement-box.svelte';
import { Theme } from '$lib/constants';
import { colorTheme, handleToggleTheme, type ThemeSetting } from '$lib/stores/preferences.store';
import { languageManager } from '$lib/stores/language-manager.svelte';
import { colorTheme, handleToggleTheme, lang, type ThemeSetting } from '$lib/stores/preferences.store';
import { serverConfig } from '$lib/stores/server-config.store';
import { user } from '$lib/stores/user.store';
import { closeWebsocketConnection, openWebsocketConnection } from '$lib/stores/websocket';
@@ -66,6 +67,8 @@
element?.remove();
// if the browser theme changes, changes the Immich theme too
globalThis.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', handleChangeTheme);
return lang.subscribe((lang) => languageManager.setLanguage(lang));
});
onDestroy(() => {

2
web/src/routes/admin/jobs-status/+page.svelte
View File

@@ -107,7 +107,7 @@
>
{#snippet promptSnippet()}
<form {onsubmit} autocomplete="off" id="create-tag-form" class="w-full">
<div class="flex flex-col gap-1 text-left">
<div class="flex flex-col gap-1 text-start">
<Combobox
bind:selectedOption={selectedJob}
label={$t('jobs')}

4
web/src/routes/admin/library-management/+page.svelte
View File

@@ -282,7 +282,7 @@
<section class="my-4">
<div class="flex flex-col gap-2" in:fade={{ duration: 500 }}>
{#if libraries.length > 0}
<table class="w-full text-left">
<table class="w-full text-start">
<thead
class="mb-4 flex h-12 w-full rounded-md border bg-gray-50 text-immich-primary dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-primary"
>
@@ -369,7 +369,7 @@
{/if}
{#if editScanSettings === index}
<!-- svelte-ignore node_invalid_placement_ssr -->
<div transition:slide={{ duration: 250 }} class="mb-4 ml-4 mr-4">
<div transition:slide={{ duration: 250 }} class="mb-4 ms-4 me-4">
<LibraryScanSettingsForm
{library}
onSubmit={handleUpdate}

14
web/src/routes/admin/repair/+page.svelte
View File

@@ -228,7 +228,7 @@
</div>
{:else}
<div class="gap-2">
<table class="table-fixed mt-5 w-full text-left">
<table class="table-fixed mt-5 w-full text-start">
<thead
class="mb-4 flex w-full rounded-md border bg-gray-50 text-immich-primary dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-primary"
>
@@ -265,7 +265,7 @@
</tbody>
</table>
<table class="table-fixed mt-5 w-full text-left">
<table class="table-fixed mt-5 w-full text-start">
<thead
class="mb-4 flex w-full rounded-md border bg-gray-50 text-immich-primary dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-primary"
>
@@ -295,7 +295,7 @@
<td onclick={() => copyToClipboard(orphan.pathValue)}>
<CircleIconButton title={$t('copy_file_path')} icon={mdiContentCopy} size="18" onclick={() => {}} />
</td>
<td class="truncate text-sm font-mono text-left" title={orphan.pathValue}>
<td class="truncate text-sm font-mono text-start" title={orphan.pathValue}>
{orphan.pathValue}
</td>
<td class="text-sm font-mono">
@@ -306,7 +306,7 @@
</tbody>
</table>
<table class="table-fixed mt-5 w-full text-left max-h-[300px]">
<table class="table-fixed mt-5 w-full text-start max-h-[300px]">
<thead
class="mb-4 flex w-full rounded-md border bg-gray-50 text-immich-primary dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-primary"
>
@@ -337,11 +337,11 @@
<td onclick={() => copyToClipboard(extra.filename)}>
<CircleIconButton title={$t('copy_file_path')} icon={mdiContentCopy} size="18" onclick={() => {}} />
</td>
<td class="w-full text-md text-ellipsis flex justify-between pr-5">
<span class="text-ellipsis grow truncate font-mono text-sm pr-5" title={extra.filename}
<td class="w-full text-md text-ellipsis flex justify-between pe-5">
<span class="text-ellipsis grow truncate font-mono text-sm pe-5" title={extra.filename}
>{extra.filename}</span
>
<span class="text-sm font-mono dark:text-immich-dark-primary text-immich-primary pr-5">
<span class="text-sm font-mono dark:text-immich-dark-primary text-immich-primary pes-5">
{#if extra.checksum}
[sha1:{extra.checksum}]
{/if}

2
web/src/routes/admin/user-management/+page.svelte
View File

@@ -180,7 +180,7 @@
</ConfirmDialog>
{/if}
<table class="my-5 w-full text-left">
<table class="my-5 w-full text-start">
<thead
class="mb-4 flex h-12 w-full rounded-md border bg-gray-50 text-immich-primary dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-primary"
>

2
web/src/routes/auth/login/+page.svelte
View File

@@ -132,7 +132,7 @@
<div class="inline-flex w-full items-center justify-center my-4">
<hr class="my-4 h-px w-3/4 border-0 bg-gray-200 dark:bg-gray-600" />
<span
class="absolute left-1/2 -translate-x-1/2 bg-gray-50 px-3 font-medium text-gray-900 dark:bg-neutral-900 dark:text-white"
class="absolute start-1/2 -translate-x-1/2 bg-gray-50 px-3 font-medium text-gray-900 dark:bg-neutral-900 dark:text-white"
>
{$t('or').toUpperCase()}
</span>