fix(web): remove unnecessary divider in External Library settings (#12583)

* fix(web): remove unnecessary divider in External Library Settings

* fix: narrowing
This commit is contained in:
Pavel Sapachev 2024-09-12 04:35:16 +03:00 committed by GitHub
parent 95987c9777
commit 4e08ff6c33
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -29,95 +29,84 @@
<div>
<div in:fade={{ duration: 500 }}>
<SettingAccordion
key="library-watching"
title={$t('admin.library_watching_settings')}
subtitle={$t('admin.library_watching_settings_description')}
isOpen
>
<form autocomplete="off" on:submit|preventDefault>
<div class="ml-4 mt-4 flex flex-col gap-4">
<SettingSwitch
title={$t('admin.library_watching_enable_description')}
{disabled}
bind:checked={config.library.watch.enabled}
/>
</div>
<div class="ml-4">
<SettingButtonsRow
onReset={(options) => onReset({ ...options, configKeys: ['library'] })}
onSave={() => onSave({ library: config.library })}
showResetToDefault={!isEqual(savedConfig.library, defaultConfig.library)}
{disabled}
/>
</div>
</form>
</SettingAccordion>
<SettingAccordion
key="library-scanning"
title={$t('admin.library_scanning')}
subtitle={$t('admin.library_scanning_description')}
isOpen
>
<form autocomplete="off" on:submit|preventDefault>
<div class="ml-4 mt-4 flex flex-col gap-4">
<SettingSwitch
title={$t('admin.library_scanning_enable_description')}
{disabled}
bind:checked={config.library.scan.enabled}
/>
<div class="flex flex-col my-2 dark:text-immich-dark-fg">
<label
class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm"
for="expression-select"
>
{$t('admin.library_cron_expression_presets')}
</label>
<select
class="p-2 mt-2 text-sm rounded-lg bg-slate-200 hover:cursor-pointer dark:bg-gray-600"
disabled={disabled || !config.library.scan.enabled}
name="expression"
id="expression-select"
bind:value={config.library.scan.cronExpression}
>
{#each cronExpressionOptions as { title, expression }}
<option value={expression}>{title}</option>
{/each}
</select>
<form autocomplete="off" on:submit|preventDefault>
<div class="ml-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
>
<div class="ml-4 mt-4 flex flex-col gap-4">
<SettingSwitch
title={$t('admin.library_watching_enable_description')}
{disabled}
bind:checked={config.library.watch.enabled}
/>
</div>
</SettingAccordion>
<SettingInputField
inputType={SettingInputFieldType.TEXT}
required={true}
disabled={disabled || !config.library.scan.enabled}
label={$t('admin.library_cron_expression')}
bind:value={config.library.scan.cronExpression}
isEdited={config.library.scan.cronExpression !== savedConfig.library.scan.cronExpression}
>
<svelte:fragment slot="desc">
<p class="text-sm dark:text-immich-dark-fg">
<FormatMessage key="admin.library_cron_expression_description" let:message>
<a href="https://crontab.guru" class="underline" target="_blank" rel="noreferrer">
{message}
</a>
</FormatMessage>
</p>
</svelte:fragment>
</SettingInputField>
</div>
<SettingAccordion
key="library-scanning"
title={$t('admin.library_scanning')}
subtitle={$t('admin.library_scanning_description')}
isOpen
>
<div class="ml-4 mt-4 flex flex-col gap-4">
<SettingSwitch
title={$t('admin.library_scanning_enable_description')}
{disabled}
bind:checked={config.library.scan.enabled}
/>
<div class="ml-4">
<SettingButtonsRow
onReset={(options) => onReset({ ...options, configKeys: ['library'] })}
onSave={() => onSave({ library: config.library })}
showResetToDefault={!isEqual(savedConfig.library, defaultConfig.library)}
{disabled}
/>
</div>
</form>
</SettingAccordion>
<div class="flex flex-col my-2 dark:text-immich-dark-fg">
<label
class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm"
for="expression-select"
>
{$t('admin.library_cron_expression_presets')}
</label>
<select
class="p-2 mt-2 text-sm rounded-lg bg-slate-200 hover:cursor-pointer dark:bg-gray-600"
disabled={disabled || !config.library.scan.enabled}
name="expression"
id="expression-select"
bind:value={config.library.scan.cronExpression}
>
{#each cronExpressionOptions as { title, expression }}
<option value={expression}>{title}</option>
{/each}
</select>
</div>
<SettingInputField
inputType={SettingInputFieldType.TEXT}
required={true}
disabled={disabled || !config.library.scan.enabled}
label={$t('admin.library_cron_expression')}
bind:value={config.library.scan.cronExpression}
isEdited={config.library.scan.cronExpression !== savedConfig.library.scan.cronExpression}
>
<svelte:fragment slot="desc">
<p class="text-sm dark:text-immich-dark-fg">
<FormatMessage key="admin.library_cron_expression_description" let:message>
<a href="https://crontab.guru" class="underline" target="_blank" rel="noreferrer">
{message}
</a>
</FormatMessage>
</p>
</svelte:fragment>
</SettingInputField>
</div>
</SettingAccordion>
<SettingButtonsRow
onReset={(options) => onReset({ ...options, configKeys: ['library'] })}
onSave={() => onSave({ library: config.library })}
showResetToDefault={!isEqual(savedConfig.library, defaultConfig.library)}
{disabled}
/>
</div>
</form>
</div>
</div>