feat(web): improve UI/UX for settings pages (#12626)
* fix(web): local date time for buckets * feat(web): improve UI/UX for setting pages * search admin settings and icon * clean up * fix translation file * Update web/src/routes/admin/system-settings/+page.svelte Co-authored-by: Ben <45583362+ben-basten@users.noreply.github.com> * Update web/src/lib/components/shared-components/settings/setting-accordion.svelte Co-authored-by: Ben <45583362+ben-basten@users.noreply.github.com> * better search bar on smaller screen * lint * template syntax --------- Co-authored-by: Jason Rasmussen <jason@rasm.me> Co-authored-by: Ben <45583362+ben-basten@users.noreply.github.com>
This commit is contained in:
Alex
@@ -27,11 +27,33 @@
|
||||
import { copyToClipboard } from '$lib/utils';
|
||||
import { downloadBlob } from '$lib/utils/asset-utils';
|
||||
import type { SystemConfigDto } from '@immich/sdk';
|
||||
import { mdiAlert, mdiContentCopy, mdiDownload, mdiUpload } from '@mdi/js';
|
||||
import {
|
||||
mdiAccountOutline,
|
||||
mdiAlert,
|
||||
mdiBellOutline,
|
||||
mdiBookshelf,
|
||||
mdiContentCopy,
|
||||
mdiDatabaseOutline,
|
||||
mdiDownload,
|
||||
mdiFileDocumentOutline,
|
||||
mdiFolderOutline,
|
||||
mdiImageOutline,
|
||||
mdiLockOutline,
|
||||
mdiMapMarkerOutline,
|
||||
mdiPaletteOutline,
|
||||
mdiRobotOutline,
|
||||
mdiServerOutline,
|
||||
mdiSync,
|
||||
mdiTrashCanOutline,
|
||||
mdiUpdate,
|
||||
mdiUpload,
|
||||
mdiVideoOutline,
|
||||
} from '@mdi/js';
|
||||
import type { PageData } from './$types';
|
||||
import { t } from 'svelte-i18n';
|
||||
import type { ComponentType, SvelteComponent } from 'svelte';
|
||||
import type { SettingsComponentProps } from '$lib/components/admin-page/settings/admin-settings';
|
||||
import SearchBar from '$lib/components/elements/search-bar.svelte';
|
||||
|
||||
export let data: PageData;
|
||||
|
||||
@@ -68,104 +90,128 @@
|
||||
title: string;
|
||||
subtitle: string;
|
||||
key: string;
|
||||
icon: string;
|
||||
}> = [
|
||||
{
|
||||
component: AuthSettings,
|
||||
title: $t('admin.authentication_settings'),
|
||||
subtitle: $t('admin.authentication_settings_description'),
|
||||
key: 'image',
|
||||
key: 'authentication',
|
||||
icon: mdiLockOutline,
|
||||
},
|
||||
{
|
||||
component: ImageSettings,
|
||||
title: $t('admin.image_settings'),
|
||||
subtitle: $t('admin.image_settings_description'),
|
||||
key: 'image',
|
||||
icon: mdiImageOutline,
|
||||
},
|
||||
{
|
||||
component: JobSettings,
|
||||
title: $t('admin.job_settings'),
|
||||
subtitle: $t('admin.job_settings_description'),
|
||||
key: 'job',
|
||||
icon: mdiSync,
|
||||
},
|
||||
{
|
||||
component: MetadataSettings,
|
||||
title: $t('admin.metadata_settings'),
|
||||
subtitle: $t('admin.metadata_settings_description'),
|
||||
key: 'metadata',
|
||||
icon: mdiDatabaseOutline,
|
||||
},
|
||||
{
|
||||
component: LibrarySettings,
|
||||
title: $t('admin.library_settings'),
|
||||
subtitle: $t('admin.library_settings_description'),
|
||||
key: 'external-library',
|
||||
icon: mdiBookshelf,
|
||||
},
|
||||
{
|
||||
component: LoggingSettings,
|
||||
title: $t('admin.logging_settings'),
|
||||
subtitle: $t('admin.manage_log_settings'),
|
||||
key: 'logging',
|
||||
icon: mdiFileDocumentOutline,
|
||||
},
|
||||
{
|
||||
component: MachineLearningSettings,
|
||||
title: $t('admin.machine_learning_settings'),
|
||||
subtitle: $t('admin.machine_learning_settings_description'),
|
||||
key: 'machine-learning',
|
||||
icon: mdiRobotOutline,
|
||||
},
|
||||
{
|
||||
component: MapSettings,
|
||||
title: $t('admin.map_gps_settings'),
|
||||
subtitle: $t('admin.map_gps_settings_description'),
|
||||
key: 'location',
|
||||
icon: mdiMapMarkerOutline,
|
||||
},
|
||||
{
|
||||
component: NotificationSettings,
|
||||
title: $t('admin.notification_settings'),
|
||||
subtitle: $t('admin.notification_settings_description'),
|
||||
key: 'notifications',
|
||||
icon: mdiBellOutline,
|
||||
},
|
||||
{
|
||||
component: ServerSettings,
|
||||
title: $t('admin.server_settings'),
|
||||
subtitle: $t('admin.server_settings_description'),
|
||||
key: 'server',
|
||||
icon: mdiServerOutline,
|
||||
},
|
||||
{
|
||||
component: StorageTemplateSettings,
|
||||
title: $t('admin.storage_template_settings'),
|
||||
subtitle: $t('admin.storage_template_settings_description'),
|
||||
key: 'storage-template',
|
||||
icon: mdiFolderOutline,
|
||||
},
|
||||
{
|
||||
component: ThemeSettings,
|
||||
title: $t('admin.theme_settings'),
|
||||
subtitle: $t('admin.theme_settings_description'),
|
||||
key: 'theme',
|
||||
icon: mdiPaletteOutline,
|
||||
},
|
||||
{
|
||||
component: TrashSettings,
|
||||
title: $t('admin.trash_settings'),
|
||||
subtitle: $t('admin.trash_settings_description'),
|
||||
key: 'trash',
|
||||
icon: mdiTrashCanOutline,
|
||||
},
|
||||
{
|
||||
component: UserSettings,
|
||||
title: $t('admin.user_settings'),
|
||||
subtitle: $t('admin.user_settings_description'),
|
||||
key: 'user-settings',
|
||||
icon: mdiAccountOutline,
|
||||
},
|
||||
{
|
||||
component: NewVersionCheckSettings,
|
||||
title: $t('admin.version_check_settings'),
|
||||
subtitle: $t('admin.version_check_settings_description'),
|
||||
key: 'version-check',
|
||||
icon: mdiUpdate,
|
||||
},
|
||||
{
|
||||
component: FFmpegSettings,
|
||||
title: $t('admin.transcoding_settings'),
|
||||
subtitle: $t('admin.transcoding_settings_description'),
|
||||
key: 'video-transcoding',
|
||||
icon: mdiVideoOutline,
|
||||
},
|
||||
];
|
||||
|
||||
let searchQuery = '';
|
||||
|
||||
$: filteredSettings = settings.filter(({ title, subtitle }) => {
|
||||
const query = searchQuery.toLowerCase();
|
||||
return title.toLowerCase().includes(query) || subtitle.toLowerCase().includes(query);
|
||||
});
|
||||
</script>
|
||||
|
||||
<input bind:this={inputElement} type="file" accept=".json" style="display: none" on:change={uploadConfig} />
|
||||
@@ -182,6 +228,9 @@
|
||||
|
||||
<UserPageLayout title={data.meta.title} admin>
|
||||
<div class="flex justify-end gap-2" slot="buttons">
|
||||
<div class="hidden lg:block">
|
||||
<SearchBar placeholder={$t('search_settings')} bind:name={searchQuery} showLoadingSpinner={false} />
|
||||
</div>
|
||||
<LinkButton on:click={() => copyToClipboard(JSON.stringify(config, null, 2))}>
|
||||
<div class="flex place-items-center gap-2 text-sm">
|
||||
<Icon path={mdiContentCopy} size="18" />
|
||||
@@ -206,10 +255,13 @@
|
||||
|
||||
<AdminSettings bind:config let:handleReset bind:handleSave let:savedConfig let: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-[850px]">
|
||||
<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 settings as { component: Component, title, subtitle, key }}
|
||||
<SettingAccordion {title} {subtitle} {key}>
|
||||
{#each filteredSettings as { component: Component, title, subtitle, key, icon } (key)}
|
||||
<SettingAccordion {title} {subtitle} {key} {icon}>
|
||||
<Component
|
||||
onSave={(config) => handleSave(config)}
|
||||
onReset={(options) => handleReset(options)}
|
||||
|
||||
Reference in New Issue
Block a user