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

feat(web): improve UI/UX for settings pages (#12626)

Browse source 
* 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 2024-09-16 15:51:03 -05:00 • committed by GitHub
parent b74b20824a
commit 186b4e1333
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 126 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

57
web/src/lib/components/user-settings-page/user-settings-list.svelte
View file

@ -19,6 +19,19 @@
import DownloadSettings from '$lib/components/user-settings-page/download-settings.svelte';
import UserPurchaseSettings from '$lib/components/user-settings-page/user-purchase-settings.svelte';
import FeatureSettings from '$lib/components/user-settings-page/feature-settings.svelte';
import {
mdiAccountGroupOutline,
mdiAccountOutline,
mdiApi,
mdiBellOutline,
mdiCogOutline,
mdiDevices,
mdiDownload,
mdiFeatureSearchOutline,
mdiKeyOutline,
mdiOnepassword,
mdiTwoFactorAuthentication,
} from '@mdi/js';
export let keys: ApiKeyResponseDto[] = [];
export let sessions: SessionResponseDto[] = [];
@ -29,23 +42,34 @@
</script>
<SettingAccordionState queryParam={QueryParameter.IS_OPEN}>
<SettingAccordion key="app-settings" title={$t('app_settings')} subtitle={$t('manage_the_app_settings')}>
<SettingAccordion
icon={mdiCogOutline}
key="app-settings"
title={$t('app_settings')}
subtitle={$t('manage_the_app_settings')}
>
<AppSettings />
</SettingAccordion>
<SettingAccordion key="account" title={$t('account')} subtitle={$t('manage_your_account')}>
<SettingAccordion icon={mdiAccountOutline} key="account" title={$t('account')} subtitle={$t('manage_your_account')}>
<UserProfileSettings />
</SettingAccordion>
<SettingAccordion key="api-keys" title={$t('api_keys')} subtitle={$t('manage_your_api_keys')}>
<SettingAccordion icon={mdiApi} key="api-keys" title={$t('api_keys')} subtitle={$t('manage_your_api_keys')}>
<UserAPIKeyList bind:keys />
</SettingAccordion>
<SettingAccordion key="authorized-devices" title={$t('authorized_devices')} subtitle={$t('manage_your_devices')}>
<SettingAccordion
icon={mdiDevices}
key="authorized-devices"
title={$t('authorized_devices')}
subtitle={$t('manage_your_devices')}
>
<DeviceList bind:devices={sessions} />
</SettingAccordion>
<SettingAccordion
icon={mdiDownload}
key="download-settings"
title={$t('download_settings')}
subtitle={$t('download_settings_description')}
@ -53,16 +77,27 @@
<DownloadSettings />
</SettingAccordion>
<SettingAccordion key="feature" title={$t('features')} subtitle={$t('features_setting_description')}>
<SettingAccordion
icon={mdiFeatureSearchOutline}
key="feature"
title={$t('features')}
subtitle={$t('features_setting_description')}
>
<FeatureSettings />
</SettingAccordion>
<SettingAccordion key="notifications" title={$t('notifications')} subtitle={$t('notifications_setting_description')}>
<SettingAccordion
icon={mdiBellOutline}
key="notifications"
title={$t('notifications')}
subtitle={$t('notifications_setting_description')}
>
<NotificationsSettings />
</SettingAccordion>
{#if $featureFlags.loaded && $featureFlags.oauth}
<SettingAccordion
icon={mdiTwoFactorAuthentication}
key="oauth"
title={$t('oauth')}
subtitle={$t('manage_your_oauth_connection')}
@ -72,15 +107,21 @@
</SettingAccordion>
{/if}
<SettingAccordion key="password" title={$t('password')} subtitle={$t('change_your_password')}>
<SettingAccordion icon={mdiOnepassword} key="password" title={$t('password')} subtitle={$t('change_your_password')}>
<ChangePasswordSettings />
</SettingAccordion>
<SettingAccordion key="partner-sharing" title={$t('partner_sharing')} subtitle={$t('manage_sharing_with_partners')}>
<SettingAccordion
icon={mdiAccountGroupOutline}
key="partner-sharing"
title={$t('partner_sharing')}
subtitle={$t('manage_sharing_with_partners')}
>
<PartnerSettings user={$user} />
</SettingAccordion>
<SettingAccordion
icon={mdiKeyOutline}
key="user-purchase-settings"
title={$t('user_purchase_settings')}
subtitle={$t('user_purchase_settings_description')}