feat: rtl (#17860)

2025-12-20 09:15:35 +03:00 · 2025-04-28 09:53:53 -04:00
parent 85ac0512a6
commit e6c575c33e
130 changed files with 354 additions and 323 deletions
--- a/web/src/lib/components/admin-page/settings/auth/auth-settings.svelte
+++ b/web/src/lib/components/admin-page/settings/auth/auth-settings.svelte
@@ -76,13 +76,13 @@
 <div>
  <div in:fade={{ duration: 500 }}>
    <form autocomplete="off" onsubmit={(e) => e.preventDefault()}>
-      <div class="ml-4 mt-4 flex flex-col">
+      <div class="ms-4 mt-4 flex flex-col">
        <SettingAccordion
          key="oauth"
          title={$t('admin.oauth_settings')}
          subtitle={$t('admin.oauth_settings_description')}
        >
-          <div class="ml-4 mt-4 flex flex-col gap-4">
+          <div class="ms-4 mt-4 flex flex-col gap-4">
            <p class="text-sm dark:text-immich-dark-fg">
              <FormatMessage key="admin.oauth_settings_more_details">
                {#snippet children({ message })}
@@ -243,8 +243,8 @@
          title={$t('admin.password_settings')}
          subtitle={$t('admin.password_settings_description')}
        >
-          <div class="ml-4 mt-4 flex flex-col gap-4">
-            <div class="ml-4 mt-4 flex flex-col">
+          <div class="ms-4 mt-4 flex flex-col gap-4">
+            <div class="ms-4 mt-4 flex flex-col">
              <SettingSwitch
                title={$t('admin.password_enable_description')}
                {disabled}
--- a/web/src/lib/components/admin-page/settings/backup-settings/backup-settings.svelte
+++ b/web/src/lib/components/admin-page/settings/backup-settings/backup-settings.svelte
@@ -37,7 +37,7 @@
 <div>
  <div in:fade={{ duration: 500 }}>
    <form autocomplete="off" {onsubmit}>
-      <div class="ml-4 mt-4 flex flex-col gap-4">
+      <div class="ms-4 mt-4 flex flex-col gap-4">
        <SettingSwitch
          title={$t('admin.backup_database_enable_description')}
          {disabled}
--- a/web/src/lib/components/admin-page/settings/ffmpeg/ffmpeg-settings.svelte
+++ b/web/src/lib/components/admin-page/settings/ffmpeg/ffmpeg-settings.svelte
@@ -43,7 +43,7 @@
 <div>
  <div in:fade={{ duration: 500 }}>
    <form autocomplete="off" {onsubmit}>
-      <div class="ml-4 mt-4 flex flex-col gap-4">
+      <div class="ms-4 mt-4 flex flex-col gap-4">
        <p class="text-sm dark:text-immich-dark-fg">
          <Icon path={mdiHelpCircleOutline} class="inline" size="15" />
          <FormatMessage key="admin.transcoding_codecs_learn_more">
@@ -70,7 +70,7 @@
          title={$t('admin.transcoding_policy')}
          subtitle={$t('admin.transcoding_policy_description')}
        >
-          <div class="ml-4 mt-4 flex flex-col gap-4">
+          <div class="ms-4 mt-4 flex flex-col gap-4">
            <SettingSelect
              label={$t('admin.transcoding_transcode_policy')}
              {disabled}
@@ -159,7 +159,7 @@
          title={$t('admin.transcoding_encoding_options')}
          subtitle={$t('admin.transcoding_encoding_options_description')}
        >
-          <div class="ml-4 mt-4 flex flex-col gap-4">
+          <div class="ms-4 mt-4 flex flex-col gap-4">
            <SettingSelect
              label={$t('admin.transcoding_video_codec')}
              {disabled}
@@ -302,7 +302,7 @@
          title={$t('admin.transcoding_hardware_acceleration')}
          subtitle={$t('admin.transcoding_hardware_acceleration_description')}
        >
-          <div class="ml-4 mt-4 flex flex-col gap-4">
+          <div class="ms-4 mt-4 flex flex-col gap-4">
            <SettingSelect
              label={$t('admin.transcoding_acceleration_api')}
              {disabled}
@@ -376,7 +376,7 @@
          title={$t('advanced')}
          subtitle={$t('admin.transcoding_advanced_options_description')}
        >
-          <div class="ml-4 mt-4 flex flex-col gap-4">
+          <div class="ms-4 mt-4 flex flex-col gap-4">
            <SettingInputField
              inputType={SettingInputFieldType.NUMBER}
              label={$t('admin.transcoding_max_b_frames')}
@@ -407,7 +407,7 @@
        </SettingAccordion>
      </div>

-      <div class="ml-4">
+      <div class="ms-4">
        <SettingButtonsRow
          onReset={(options) => onReset({ ...options, configKeys: ['ffmpeg'] })}
          onSave={() => onSave({ ffmpeg: config.ffmpeg })}
--- a/web/src/lib/components/admin-page/settings/image/image-settings.svelte
+++ b/web/src/lib/components/admin-page/settings/image/image-settings.svelte
@@ -40,7 +40,7 @@
 <div>
  <div in:fade={{ duration: 500 }}>
    <form autocomplete="off" {onsubmit}>
-      <div class="ml-4 mt-4">
+      <div class="ms-4 mt-4">
        <SettingAccordion
          key="thumbnail-settings"
          title={$t('admin.image_thumbnail_title')}
@@ -195,7 +195,7 @@
        </div>
      </div>

-      <div class="ml-4 mt-4">
+      <div class="ms-4 mt-4">
        <SettingButtonsRow
          onReset={(options) => onReset({ ...options, configKeys: ['image'] })}
          onSave={() => onSave({ image: config.image })}
--- a/web/src/lib/components/admin-page/settings/job-settings/job-settings.svelte
+++ b/web/src/lib/components/admin-page/settings/job-settings/job-settings.svelte
@@ -47,7 +47,7 @@
  <div in:fade={{ duration: 500 }}>
    <form autocomplete="off" {onsubmit}>
      {#each jobNames as jobName (jobName)}
-        <div class="ml-4 mt-4 flex flex-col gap-4">
+        <div class="ms-4 mt-4 flex flex-col gap-4">
          {#if isSystemConfigJobDto(jobName)}
            <SettingInputField
              inputType={SettingInputFieldType.NUMBER}
@@ -71,7 +71,7 @@
        </div>
      {/each}

-      <div class="ml-4">
+      <div class="ms-4">
        <SettingButtonsRow
          onReset={(options) => onReset({ ...options, configKeys: ['job'] })}
          onSave={() => onSave({ job: config.job })}
--- a/web/src/lib/components/admin-page/settings/library-settings/library-settings.svelte
+++ b/web/src/lib/components/admin-page/settings/library-settings/library-settings.svelte
@@ -47,14 +47,14 @@
 <div>
  <div in:fade={{ duration: 500 }}>
    <form autocomplete="off" {onsubmit}>
-      <div class="ml-4 mt-4 flex flex-col gap-4">
+      <div class="ms-4 mt-4 flex flex-col gap-4">
        <SettingAccordion
          key="library-watching"
          title={$t('admin.library_watching_settings')}
          subtitle={$t('admin.library_watching_settings_description')}
          isOpen={openByDefault}
        >
-          <div class="ml-4 mt-4 flex flex-col gap-4">
+          <div class="ms-4 mt-4 flex flex-col gap-4">
            <SettingSwitch
              title={$t('admin.library_watching_enable_description')}
              {disabled}
@@ -69,7 +69,7 @@
          subtitle={$t('admin.library_scanning_description')}
          isOpen={openByDefault}
        >
-          <div class="ml-4 mt-4 flex flex-col gap-4">
+          <div class="ms-4 mt-4 flex flex-col gap-4">
            <SettingSwitch
              title={$t('admin.library_scanning_enable_description')}
              {disabled}
--- a/web/src/lib/components/admin-page/settings/logging-settings/logging-settings.svelte
+++ b/web/src/lib/components/admin-page/settings/logging-settings/logging-settings.svelte
@@ -27,7 +27,7 @@
 <div>
  <div in:fade={{ duration: 500 }}>
    <form autocomplete="off" {onsubmit}>
-      <div class="ml-4 mt-4 flex flex-col gap-4">
+      <div class="ms-4 mt-4 flex flex-col gap-4">
        <SettingSwitch
          title={$t('admin.logging_enable_description')}
          {disabled}
--- a/web/src/lib/components/admin-page/settings/machine-learning-settings/machine-learning-settings.svelte
+++ b/web/src/lib/components/admin-page/settings/machine-learning-settings/machine-learning-settings.svelte
@@ -51,7 +51,7 @@
              {#if config.machineLearning.urls.length > 1}
                <CircleIconButton
                  size="24"
-                  class="ml-2"
+                  class="ms-2"
                  padding="2"
                  color="red"
                  title=""
@@ -88,7 +88,7 @@
        title={$t('admin.machine_learning_smart_search')}
        subtitle={$t('admin.machine_learning_smart_search_description')}
      >
-        <div class="ml-4 mt-4 flex flex-col gap-4">
+        <div class="ms-4 mt-4 flex flex-col gap-4">
          <SettingSwitch
            title={$t('admin.machine_learning_smart_search_enabled')}
            subtitle={$t('admin.machine_learning_smart_search_enabled_description')}
@@ -124,7 +124,7 @@
        title={$t('admin.machine_learning_duplicate_detection')}
        subtitle={$t('admin.machine_learning_duplicate_detection_setting_description')}
      >
-        <div class="ml-4 mt-4 flex flex-col gap-4">
+        <div class="ms-4 mt-4 flex flex-col gap-4">
          <SettingSwitch
            title={$t('admin.machine_learning_duplicate_detection_enabled')}
            subtitle={$t('admin.machine_learning_duplicate_detection_enabled_description')}
@@ -154,7 +154,7 @@
        title={$t('admin.machine_learning_facial_recognition')}
        subtitle={$t('admin.machine_learning_facial_recognition_description')}
      >
-        <div class="ml-4 mt-4 flex flex-col gap-4">
+        <div class="ms-4 mt-4 flex flex-col gap-4">
          <SettingSwitch
            title={$t('admin.machine_learning_facial_recognition_setting')}
            subtitle={$t('admin.machine_learning_facial_recognition_setting_description')}
--- a/web/src/lib/components/admin-page/settings/map-settings/map-settings.svelte
+++ b/web/src/lib/components/admin-page/settings/map-settings/map-settings.svelte
@@ -32,7 +32,7 @@
    <form autocomplete="off" {onsubmit}>
      <div class="flex flex-col gap-4">
        <SettingAccordion key="map" title={$t('admin.map_settings')} subtitle={$t('admin.map_settings_description')}>
-          <div class="ml-4 mt-4 flex flex-col gap-4">
+          <div class="ms-4 mt-4 flex flex-col gap-4">
            <SettingSwitch
              title={$t('admin.map_enable_description')}
              subtitle={$t('admin.map_implications')}
@@ -78,7 +78,7 @@
              </FormatMessage>
            </p>
          {/snippet}
-          <div class="ml-4 mt-4 flex flex-col gap-4">
+          <div class="ms-4 mt-4 flex flex-col gap-4">
            <SettingSwitch
              title={$t('admin.map_reverse_geocoding_enable_description')}
              {disabled}
--- a/web/src/lib/components/admin-page/settings/metadata-settings/metadata-settings.svelte
+++ b/web/src/lib/components/admin-page/settings/metadata-settings/metadata-settings.svelte
@@ -26,7 +26,7 @@
 <div class="mt-2">
  <div in:fade={{ duration: 500 }}>
    <form autocomplete="off" {onsubmit} class="mx-4 mt-4">
-      <div class="ml-4 mt-4 flex flex-col gap-4">
+      <div class="ms-4 mt-4 flex flex-col gap-4">
        <SettingSwitch
          title={$t('admin.metadata_faces_import_setting')}
          subtitle={$t('admin.metadata_faces_import_setting_description')}
--- a/web/src/lib/components/admin-page/settings/new-version-check-settings/new-version-check-settings.svelte
+++ b/web/src/lib/components/admin-page/settings/new-version-check-settings/new-version-check-settings.svelte
@@ -26,7 +26,7 @@
 <div>
  <div in:fade={{ duration: 500 }}>
    <form autocomplete="off" {onsubmit}>
-      <div class="ml-4 mt-4">
+      <div class="ms-4 mt-4">
        <SettingSwitch
          title={$t('admin.version_check_enabled_description')}
          subtitle={$t('admin.version_check_implications')}
--- a/web/src/lib/components/admin-page/settings/notification-settings/notification-settings.svelte
+++ b/web/src/lib/components/admin-page/settings/notification-settings/notification-settings.svelte
@@ -80,7 +80,7 @@
    <form autocomplete="off" {onsubmit} class="mt-4">
      <div class="flex flex-col gap-4">
        <SettingAccordion key="email" title={$t('email')} subtitle={$t('admin.notification_email_setting_description')}>
-          <div class="ml-4 mt-4 flex flex-col gap-4">
+          <div class="ms-4 mt-4 flex flex-col gap-4">
            <SettingSwitch
              title={$t('admin.notification_enable_email_notifications')}
              {disabled}
--- a/web/src/lib/components/admin-page/settings/server/server-settings.svelte
+++ b/web/src/lib/components/admin-page/settings/server/server-settings.svelte
@@ -28,7 +28,7 @@
 <div>
  <div in:fade={{ duration: 500 }}>
    <form autocomplete="off" {onsubmit}>
-      <div class="mt-4 ml-4">
+      <div class="mt-4 ms-4">
        <SettingInputField
          inputType={SettingInputFieldType.TEXT}
          label={$t('admin.server_external_domain_settings')}
@@ -52,7 +52,7 @@
          bind:checked={config.server.publicUsers}
        />

-        <div class="ml-4">
+        <div class="ms-4">
          <SettingButtonsRow
            onReset={(options) => onReset({ ...options, configKeys: ['server'] })}
            onSave={() => onSave({ server: config.server })}
--- a/web/src/lib/components/admin-page/settings/storage-template/storage-template-settings.svelte
+++ b/web/src/lib/components/admin-page/settings/storage-template/storage-template-settings.svelte
@@ -141,7 +141,7 @@
    </p>
  </div>
  {#await getTemplateOptions() then}
-    <div id="directory-path-builder" class="flex flex-col gap-4 {minified ? '' : 'ml-4 mt-4'}">
+    <div id="directory-path-builder" class="flex flex-col gap-4 {minified ? '' : 'ms-4 mt-4'}">
      <SettingSwitch
        title={$t('admin.storage_template_enable_description')}
        {disabled}
--- a/web/src/lib/components/admin-page/settings/template-settings/template-settings.svelte
+++ b/web/src/lib/components/admin-page/settings/template-settings/template-settings.svelte
@@ -76,7 +76,7 @@
          title={$t('admin.template_email_settings')}
          subtitle={$t('admin.template_settings_description')}
        >
-          <div class="ml-4 mt-4 flex flex-col gap-4">
+          <div class="ms-4 mt-4 flex flex-col gap-4">
            <p class="text-sm dark:text-immich-dark-fg">
              <FormatMessage key="admin.template_email_if_empty">
                {$t('admin.template_email_if_empty')}
@@ -102,7 +102,7 @@
                  onclick={() => getTemplate(templateName, config.templates.email[templateKey])}
                  title={$t('admin.template_email_preview')}
                >
-                  <Icon path={mdiEyeOutline} class="mr-1" />
+                  <Icon path={mdiEyeOutline} class="me-1" />
                  {$t('admin.template_email_preview')}
                </Button>
              </div>
--- a/web/src/lib/components/admin-page/settings/theme/theme-settings.svelte
+++ b/web/src/lib/components/admin-page/settings/theme/theme-settings.svelte
@@ -26,7 +26,7 @@
 <div>
  <div in:fade={{ duration: 500 }}>
    <form autocomplete="off" {onsubmit}>
-      <div class="ml-4 mt-4 flex flex-col gap-4">
+      <div class="ms-4 mt-4 flex flex-col gap-4">
        <SettingTextarea
          {disabled}
          label={$t('admin.theme_custom_css_settings')}
--- a/web/src/lib/components/admin-page/settings/trash-settings/trash-settings.svelte
+++ b/web/src/lib/components/admin-page/settings/trash-settings/trash-settings.svelte
@@ -28,7 +28,7 @@
 <div>
  <div in:fade={{ duration: 500 }}>
    <form autocomplete="off" {onsubmit}>
-      <div class="ml-4 mt-4 flex flex-col gap-4">
+      <div class="ms-4 mt-4 flex flex-col gap-4">
        <SettingSwitch title={$t('admin.trash_enabled_description')} {disabled} bind:checked={config.trash.enabled} />

        <hr />
--- a/web/src/lib/components/admin-page/settings/user-settings/user-settings.svelte
+++ b/web/src/lib/components/admin-page/settings/user-settings/user-settings.svelte
@@ -24,7 +24,7 @@
 <div>
  <div in:fade={{ duration: 500 }}>
    <form autocomplete="off" onsubmit={(e) => e.preventDefault()}>
-      <div class="ml-4 mt-4 flex flex-col gap-4">
+      <div class="ms-4 mt-4 flex flex-col gap-4">
        <SettingInputField
          inputType={SettingInputFieldType.NUMBER}
          min={1}
@@ -35,7 +35,7 @@
        />
      </div>

-      <div class="ml-4">
+      <div class="ms-4">
        <SettingButtonsRow
          onReset={(options) => onReset({ ...options, configKeys: ['user'] })}
          onSave={() => onSave({ user: config.user })}