refactor: ui icon buttons (#15531)
This commit is contained in:
Jason Rasmussen
@@ -17,8 +17,7 @@
|
||||
import ThemeSettings from '$lib/components/admin-page/settings/theme/theme-settings.svelte';
|
||||
import TrashSettings from '$lib/components/admin-page/settings/trash-settings/trash-settings.svelte';
|
||||
import UserSettings from '$lib/components/admin-page/settings/user-settings/user-settings.svelte';
|
||||
import { Button, HStack } from '@immich/ui';
|
||||
import Icon from '$lib/components/elements/icon.svelte';
|
||||
import { Button, Text, HStack, Alert } from '@immich/ui';
|
||||
import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
|
||||
import SettingAccordionState from '$lib/components/shared-components/settings/setting-accordion-state.svelte';
|
||||
import SettingAccordion from '$lib/components/shared-components/settings/setting-accordion.svelte';
|
||||
@@ -29,7 +28,6 @@
|
||||
import { downloadBlob } from '$lib/utils/asset-utils';
|
||||
import {
|
||||
mdiAccountOutline,
|
||||
mdiAlert,
|
||||
mdiBackupRestore,
|
||||
mdiBellOutline,
|
||||
mdiBookshelf,
|
||||
@@ -243,68 +241,64 @@
|
||||
|
||||
<input bind:this={inputElement} type="file" accept=".json" style="display: none" onchange={uploadConfig} />
|
||||
|
||||
<div class="h-svh flex flex-col overflow-hidden">
|
||||
{#if $featureFlags.configFile}
|
||||
<div class="flex flex-row items-center gap-2 bg-gray-100 p-3 dark:bg-gray-800">
|
||||
<Icon path={mdiAlert} class="text-yellow-400" size={18} />
|
||||
<h2 class="text-md text-immich-primary dark:text-immich-dark-primary">
|
||||
{$t('admin.config_set_by_file')}
|
||||
</h2>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<UserPageLayout title={data.meta.title} admin>
|
||||
{#snippet buttons()}
|
||||
<HStack gap={1}>
|
||||
<div class="hidden lg:block">
|
||||
<SearchBar placeholder={$t('search_settings')} bind:name={searchQuery} showLoadingSpinner={false} />
|
||||
</div>
|
||||
<UserPageLayout title={data.meta.title} admin>
|
||||
{#snippet buttons()}
|
||||
<HStack gap={1}>
|
||||
<div class="hidden lg:block">
|
||||
<SearchBar placeholder={$t('search_settings')} bind:name={searchQuery} showLoadingSpinner={false} />
|
||||
</div>
|
||||
<Button
|
||||
leadingIcon={mdiContentCopy}
|
||||
onclick={() => copyToClipboard(JSON.stringify(config, jsonReplacer, 2))}
|
||||
size="small"
|
||||
variant="ghost"
|
||||
color="secondary"
|
||||
>
|
||||
<Text class="hidden md:block">{$t('copy_to_clipboard')}</Text>
|
||||
</Button>
|
||||
<Button leadingIcon={mdiDownload} onclick={() => downloadConfig()} size="small" variant="ghost" color="secondary">
|
||||
<Text class="hidden md:block">{$t('export_as_json')}</Text>
|
||||
</Button>
|
||||
{#if !$featureFlags.configFile}
|
||||
<Button
|
||||
onclick={() => copyToClipboard(JSON.stringify(config, jsonReplacer, 2))}
|
||||
leadingIcon={mdiUpload}
|
||||
onclick={() => inputElement?.click()}
|
||||
size="small"
|
||||
variant="ghost"
|
||||
color="secondary"
|
||||
>
|
||||
<Icon path={mdiContentCopy} />
|
||||
{$t('copy_to_clipboard')}
|
||||
<Text class="hidden md:block">{$t('import_from_json')}</Text>
|
||||
</Button>
|
||||
<Button onclick={() => downloadConfig()} size="small" variant="ghost" color="secondary">
|
||||
<Icon path={mdiDownload} />
|
||||
{$t('export_as_json')}
|
||||
</Button>
|
||||
{#if !$featureFlags.configFile}
|
||||
<Button onclick={() => inputElement?.click()} size="small" variant="ghost" color="secondary">
|
||||
<Icon path={mdiUpload} />
|
||||
{$t('import_from_json')}
|
||||
</Button>
|
||||
{/if}
|
||||
</HStack>
|
||||
{/snippet}
|
||||
{/if}
|
||||
</HStack>
|
||||
{/snippet}
|
||||
|
||||
<AdminSettings bind:config bind:this={adminSettingElement}>
|
||||
{#snippet children({ savedConfig, defaultConfig })}
|
||||
<section id="setting-content" class="flex place-content-center sm:mx-4">
|
||||
<section class="w-full pb-28 sm:w-5/6 md:w-[896px]">
|
||||
<div class="block lg:hidden">
|
||||
<SearchBar placeholder={$t('search_settings')} bind:name={searchQuery} showLoadingSpinner={false} />
|
||||
</div>
|
||||
<SettingAccordionState queryParam={QueryParameter.IS_OPEN}>
|
||||
{#each filteredSettings as { component: Component, title, subtitle, key, icon } (key)}
|
||||
<SettingAccordion {title} {subtitle} {key} {icon}>
|
||||
<Component
|
||||
onSave={(config) => adminSettingElement?.handleSave(config)}
|
||||
onReset={(options) => adminSettingElement?.handleReset(options)}
|
||||
disabled={$featureFlags.configFile}
|
||||
bind:config
|
||||
{defaultConfig}
|
||||
{savedConfig}
|
||||
/>
|
||||
</SettingAccordion>
|
||||
{/each}
|
||||
</SettingAccordionState>
|
||||
</section>
|
||||
<AdminSettings bind:config bind:this={adminSettingElement}>
|
||||
{#snippet children({ savedConfig, defaultConfig })}
|
||||
<section id="setting-content" class="flex place-content-center sm:mx-4">
|
||||
<section class="w-full pb-28 sm:w-5/6 md:w-[896px]">
|
||||
{#if $featureFlags.configFile}
|
||||
<Alert color="warning" class="text-dark my-4" title={$t('admin.config_set_by_file')} />
|
||||
{/if}
|
||||
<div class="block lg:hidden">
|
||||
<SearchBar placeholder={$t('search_settings')} bind:name={searchQuery} showLoadingSpinner={false} />
|
||||
</div>
|
||||
<SettingAccordionState queryParam={QueryParameter.IS_OPEN}>
|
||||
{#each filteredSettings as { component: Component, title, subtitle, key, icon } (key)}
|
||||
<SettingAccordion {title} {subtitle} {key} {icon}>
|
||||
<Component
|
||||
onSave={(config) => adminSettingElement?.handleSave(config)}
|
||||
onReset={(options) => adminSettingElement?.handleReset(options)}
|
||||
disabled={$featureFlags.configFile}
|
||||
bind:config
|
||||
{defaultConfig}
|
||||
{savedConfig}
|
||||
/>
|
||||
</SettingAccordion>
|
||||
{/each}
|
||||
</SettingAccordionState>
|
||||
</section>
|
||||
{/snippet}
|
||||
</AdminSettings>
|
||||
</UserPageLayout>
|
||||
</div>
|
||||
</section>
|
||||
{/snippet}
|
||||
</AdminSettings>
|
||||
</UserPageLayout>
|
||||
|
||||
Reference in New Issue
Block a user