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

feat(web): add an option to change the date formats (#7174)

Browse source 
* feat: add an option to change the date formats

* pr feedback

* fix: change title

* fix: show list supported by the browser

* fix: tests

* fix: dates

* fix: check only if locale is set

* fix: better fallback value

* fix: fallback

* fix: fallback

* feat: add default locale option

* refactor: shared components

* refactor: shared components

* prepare for svelte 5

* don't use relative paths

* refactor: fallback value

Co-authored-by: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com>

* fix: parsing store

* fix: lint

* refactor: locales

---------

Co-authored-by: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com>
Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>
This commit is contained in:
martin 2024-02-22 15:36:14 +01:00 • committed by GitHub
parent a224bb23d0
commit 01d6707b59
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
45 changed files with 383 additions and 80 deletions
Download patch file Download diff file Expand all files Collapse all files

75
web/src/lib/components/shared-components/settings/setting-input-field.svelte Normal file
View file

@ -0,0 +1,75 @@
<script lang="ts" context="module">
export enum SettingInputFieldType {
EMAIL = 'email',
TEXT = 'text',
NUMBER = 'number',
PASSWORD = 'password',
}
</script>
<script lang="ts">
import { quintOut } from 'svelte/easing';
import { fly } from 'svelte/transition';
export let inputType: SettingInputFieldType;
export let value: string | number;
export let min = Number.MIN_SAFE_INTEGER.toString();
export let max = Number.MAX_SAFE_INTEGER.toString();
export let step = '1';
export let label = '';
export let desc = '';
export let title = '';
export let required = false;
export let disabled = false;
export let isEdited = false;
const handleInput = (e: Event) => {
value = (e.target as HTMLInputElement).value;
if (inputType === SettingInputFieldType.NUMBER) {
value = Number(value) || 0;
}
};
</script>
<div class="mb-4 w-full">
<div class={`flex h-[26px] place-items-center gap-1`}>
<label class={`immich-form-label text-sm`} for={label}>{label}</label>
{#if required}
<div class="text-red-400">*</div>
{/if}
{#if isEdited}
<div
transition:fly={{ x: 10, duration: 200, easing: quintOut }}
class="rounded-full bg-orange-100 px-2 text-[10px] text-orange-900"
>
Unsaved change
</div>
{/if}
</div>
{#if desc}
<p class="immich-form-label pb-2 text-sm" id="{label}-desc">
{desc}
</p>
{:else}
<slot name="desc" />
{/if}
<input
class="immich-form-input w-full pb-2"
aria-describedby={desc ? `${label}-desc` : undefined}
aria-labelledby="{label}-label"
id={label}
name={label}
type={inputType}
{min}
{max}
{step}
{required}
{value}
on:input={handleInput}
{disabled}
{title}
/>
</div>