Infrastructure/immich
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-03-18 02:31:28 -05:00
Code Issues Activity

refactor: use immich/ui button component in user settings (#16836)

Browse source
This commit is contained in:
Jason Rasmussen 2025-03-12 16:56:55 -04:00 • committed by GitHub
parent 77fad86b82
commit 72a7be26c0
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
11 changed files with 57 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
web/src/lib/components/user-settings-page/change-password-settings.svelte
View file

@ -3,14 +3,13 @@
notificationController,
NotificationType,
} from '$lib/components/shared-components/notification/notification';
import { changePassword } from '@immich/sdk';
import { fade } from 'svelte/transition';
import Button from '$lib/components/elements/buttons/button.svelte';
import type { HttpError } from '@sveltejs/kit';
import SettingInputField from '$lib/components/shared-components/settings/setting-input-field.svelte';
import { t } from 'svelte-i18n';
import { SettingInputFieldType } from '$lib/constants';
import { changePassword } from '@immich/sdk';
import { Button } from '@immich/ui';
import type { HttpError } from '@sveltejs/kit';
import { t } from 'svelte-i18n';
import { fade } from 'svelte/transition';
let password = $state('');
let newPassword = $state('');
@ -72,8 +71,9 @@
<div class="flex justify-end">
<Button
shape="round"
type="submit"
size="sm"
size="small"
disabled={!(password && newPassword && newPassword === confirmPassword)}
onclick={() => handleChangePassword()}>{$t('save')}</Button
>

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

@ -1,11 +1,11 @@
<script lang="ts">
import { deleteAllSessions, deleteSession, getSessions, type SessionResponseDto } from '@immich/sdk';
import { handleError } from '../../utils/handle-error';
import Button from '../elements/buttons/button.svelte';
import { notificationController, NotificationType } from '../shared-components/notification/notification';
import DeviceCard from './device-card.svelte';
import { dialogController } from '$lib/components/shared-components/dialog/dialog';
import { t } from 'svelte-i18n';
import { Button } from '@immich/ui';
interface Props {
devices: SessionResponseDto[];
@ -82,7 +82,7 @@
{$t('log_out_all_devices').toUpperCase()}
</h3>
<div class="flex justify-end">
<Button color="red" size="sm" onclick={handleDeleteAll}>{$t('log_out_all_devices')}</Button>
<Button shape="round" color="danger" size="small" onclick={handleDeleteAll}>{$t('log_out_all_devices')}</Button>
</div>
{/if}
</section>

17
web/src/lib/components/user-settings-page/download-settings.svelte
View file

@ -3,17 +3,16 @@
notificationController,
NotificationType,
} from '$lib/components/shared-components/notification/notification';
import { updateMyPreferences } from '@immich/sdk';
import { fade } from 'svelte/transition';
import { handleError } from '../../utils/handle-error';
import { preferences } from '$lib/stores/user.store';
import Button from '../elements/buttons/button.svelte';
import { t } from 'svelte-i18n';
import SettingInputField from '$lib/components/shared-components/settings/setting-input-field.svelte';
import { ByteUnit, convertFromBytes, convertToBytes } from '$lib/utils/byte-units';
import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
import { SettingInputFieldType } from '$lib/constants';
import { preferences } from '$lib/stores/user.store';
import { ByteUnit, convertFromBytes, convertToBytes } from '$lib/utils/byte-units';
import { updateMyPreferences } from '@immich/sdk';
import { Button } from '@immich/ui';
import { t } from 'svelte-i18n';
import { fade } from 'svelte/transition';
import { handleError } from '../../utils/handle-error';
let archiveSize = $state(convertFromBytes($preferences?.download?.archiveSize || 4, ByteUnit.GiB));
let includeEmbeddedVideos = $state($preferences?.download?.includeEmbeddedVideos || false);
@ -57,7 +56,7 @@
bind:checked={includeEmbeddedVideos}
></SettingSwitch>
<div class="flex justify-end">
<Button type="submit" size="sm" onclick={() => handleSave()}>{$t('save')}</Button>
<Button shape="round" type="submit" size="small" onclick={() => handleSave()}>{$t('save')}</Button>
</div>
</div>
</form>

13
web/src/lib/components/user-settings-page/feature-settings.svelte
View file

@ -3,15 +3,14 @@
notificationController,
NotificationType,
} from '$lib/components/shared-components/notification/notification';
import { updateMyPreferences } from '@immich/sdk';
import { fade } from 'svelte/transition';
import { handleError } from '../../utils/handle-error';
import SettingAccordion from '$lib/components/shared-components/settings/setting-accordion.svelte';
import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
import { preferences } from '$lib/stores/user.store';
import Button from '../elements/buttons/button.svelte';
import { updateMyPreferences } from '@immich/sdk';
import { Button } from '@immich/ui';
import { t } from 'svelte-i18n';
import SettingAccordion from '$lib/components/shared-components/settings/setting-accordion.svelte';
import { fade } from 'svelte/transition';
import { handleError } from '../../utils/handle-error';
// Folders
let foldersEnabled = $state($preferences?.folders?.enabled ?? false);
@ -140,7 +139,7 @@
</SettingAccordion>
<div class="flex justify-end">
<Button type="submit" size="sm" onclick={() => handleSave()}>{$t('save')}</Button>
<Button shape="round" type="submit" size="small" onclick={() => handleSave()}>{$t('save')}</Button>
</div>
</div>
</form>

4
web/src/lib/components/user-settings-page/notifications-settings.svelte
View file

@ -9,8 +9,8 @@
import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
import { preferences } from '$lib/stores/user.store';
import Button from '../elements/buttons/button.svelte';
import { t } from 'svelte-i18n';
import { Button } from '@immich/ui';
let emailNotificationsEnabled = $state($preferences?.emailNotifications?.enabled ?? true);
let albumInviteNotificationEnabled = $state($preferences?.emailNotifications?.albumInvite ?? true);
@ -71,7 +71,7 @@
</div>
<div class="flex justify-end">
<Button type="submit" size="sm" onclick={() => handleSave()}>{$t('save')}</Button>
<Button shape="round" type="submit" size="small" onclick={() => handleSave()}>{$t('save')}</Button>
</div>
</div>
</form>

8
web/src/lib/components/user-settings-page/oauth-settings.svelte
View file

@ -6,10 +6,10 @@
import { onMount } from 'svelte';
import { fade } from 'svelte/transition';
import { handleError } from '../../utils/handle-error';
import Button from '../elements/buttons/button.svelte';
import LoadingSpinner from '../shared-components/loading-spinner.svelte';
import { notificationController, NotificationType } from '../shared-components/notification/notification';
import { t } from 'svelte-i18n';
import { Button } from '@immich/ui';
interface Props {
user: UserAdminResponseDto;
@ -62,9 +62,11 @@
</div>
{:else if $featureFlags.oauth}
{#if user.oauthId}
<Button size="sm" onclick={() => handleUnlink()}>{$t('unlink_oauth')}</Button>
<Button shape="round" size="small" onclick={() => handleUnlink()}>{$t('unlink_oauth')}</Button>
{:else}
<Button size="sm" onclick={() => oauth.authorize(globalThis.location)}>{$t('link_to_oauth')}</Button>
<Button shape="round" size="small" onclick={() => oauth.authorize(globalThis.location)}
>{$t('link_to_oauth')}</Button
>
{/if}
{/if}
</div>

4
web/src/lib/components/user-settings-page/partner-selection-modal.svelte
View file

@ -3,8 +3,8 @@
import { getPartners, PartnerDirection, searchUsers, type UserResponseDto } from '@immich/sdk';
import { onMount } from 'svelte';
import { t } from 'svelte-i18n';
import Button from '../elements/buttons/button.svelte';
import UserAvatar from '../shared-components/user-avatar.svelte';
import { Button } from '@immich/ui';
interface Props {
user: UserResponseDto;
@ -72,7 +72,7 @@
{#if selectedUsers.length > 0}
<div class="pt-5">
<Button size="sm" fullwidth onclick={() => onAddUsers(selectedUsers)}>{$t('add')}</Button>
<Button shape="round" fullWidth onclick={() => onAddUsers(selectedUsers)}>{$t('add')}</Button>
</div>
{/if}
</div>

12
web/src/lib/components/user-settings-page/partner-settings.svelte
View file

@ -1,4 +1,7 @@
<script lang="ts">
import { dialogController } from '$lib/components/shared-components/dialog/dialog';
import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
import UserAvatar from '$lib/components/shared-components/user-avatar.svelte';
import {
createPartner,
getPartners,
@ -8,17 +11,14 @@
type PartnerResponseDto,
type UserResponseDto,
} from '@immich/sdk';
import { Button } from '@immich/ui';
import { mdiCheck, mdiClose } from '@mdi/js';
import { onMount } from 'svelte';
import { t } from 'svelte-i18n';
import { handleError } from '../../utils/handle-error';
import Button from '../elements/buttons/button.svelte';
import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
import Icon from '../elements/icon.svelte';
import UserAvatar from '$lib/components/shared-components/user-avatar.svelte';
import PartnerSelectionModal from './partner-selection-modal.svelte';
import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
import { dialogController } from '$lib/components/shared-components/dialog/dialog';
import { t } from 'svelte-i18n';
interface PartnerSharing {
user: UserResponseDto;
@ -189,7 +189,7 @@
{/if}
<div class="flex justify-end mt-5">
<Button size="sm" onclick={() => (createPartnerFlag = true)}>{$t('add_partner')}</Button>
<Button shape="round" size="small" onclick={() => (createPartnerFlag = true)}>{$t('add_partner')}</Button>
</div>
</section>

12
web/src/lib/components/user-settings-page/user-api-key-list.svelte
View file

@ -1,4 +1,6 @@
<script lang="ts">
import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
import { dialogController } from '$lib/components/shared-components/dialog/dialog';
import { locale } from '$lib/stores/preferences.store';
import {
createApiKey,
@ -8,16 +10,14 @@
updateApiKey,
type ApiKeyResponseDto,
} from '@immich/sdk';
import { Button } from '@immich/ui';
import { mdiPencilOutline, mdiTrashCanOutline } from '@mdi/js';
import { t } from 'svelte-i18n';
import { fade } from 'svelte/transition';
import { handleError } from '../../utils/handle-error';
import Button from '../elements/buttons/button.svelte';
import APIKeyForm from '../forms/api-key-form.svelte';
import APIKeySecret from '../forms/api-key-secret.svelte';
import { NotificationType, notificationController } from '../shared-components/notification/notification';
import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
import { dialogController } from '$lib/components/shared-components/dialog/dialog';
import { t } from 'svelte-i18n';
import { notificationController, NotificationType } from '../shared-components/notification/notification';
interface Props {
keys: ApiKeyResponseDto[];
@ -122,7 +122,7 @@
<section class="my-4">
<div class="flex flex-col gap-2" in:fade={{ duration: 500 }}>
<div class="mb-2 flex justify-end">
<Button size="sm" onclick={() => (newKey = { name: $t('api_key') })}>{$t('new_api_key')}</Button>
<Button shape="round" size="small" onclick={() => (newKey = { name: $t('api_key') })}>{$t('new_api_key')}</Button>
</div>
{#if keys.length > 0}

13
web/src/lib/components/user-settings-page/user-profile-settings.svelte
View file

@ -1,22 +1,21 @@
<script lang="ts">
import { createBubbler, preventDefault } from 'svelte/legacy';
const bubble = createBubbler();
import {
notificationController,
NotificationType,
} from '$lib/components/shared-components/notification/notification';
import SettingInputField from '$lib/components/shared-components/settings/setting-input-field.svelte';
import { SettingInputFieldType } from '$lib/constants';
import { user } from '$lib/stores/user.store';
import { updateMyUser } from '@immich/sdk';
import { Button } from '@immich/ui';
import { cloneDeep } from 'lodash-es';
import { t } from 'svelte-i18n';
import { createBubbler, preventDefault } from 'svelte/legacy';
import { fade } from 'svelte/transition';
import { handleError } from '../../utils/handle-error';
import Button from '../elements/buttons/button.svelte';
import { t } from 'svelte-i18n';
import { SettingInputFieldType } from '$lib/constants';
let editedUser = $state(cloneDeep($user));
const bubble = createBubbler();
const handleSaveProfile = async () => {
try {
@ -69,7 +68,7 @@
/>
<div class="flex justify-end">
<Button type="submit" size="sm" onclick={() => handleSaveProfile()}>{$t('save')}</Button>
<Button shape="round" type="submit" size="small" onclick={() => handleSaveProfile()}>{$t('save')}</Button>
</div>
</div>
</form>

10
web/src/lib/components/user-settings-page/user-purchase-settings.svelte
View file

@ -15,13 +15,13 @@
} from '@immich/sdk';
import Icon from '$lib/components/elements/icon.svelte';
import { mdiKey } from '@mdi/js';
import Button from '$lib/components/elements/buttons/button.svelte';
import { dialogController } from '$lib/components/shared-components/dialog/dialog';
import { handleError } from '$lib/utils/handle-error';
import PurchaseContent from '$lib/components/shared-components/purchasing/purchase-content.svelte';
import { t } from 'svelte-i18n';
import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
import { setSupportBadgeVisibility } from '$lib/utils/purchase-utils';
import { Button } from '@immich/ui';
const { isPurchased } = purchaseStore;
let isServerProduct = $state(false);
@ -145,7 +145,9 @@
{#if $user.isAdmin}
<div class="text-right mt-4">
<Button size="sm" color="red" onclick={removeServerProductKey}>{$t('purchase_button_remove_key')}</Button>
<Button shape="round" size="small" color="danger" onclick={removeServerProductKey}
>{$t('purchase_button_remove_key')}</Button
>
</div>
{/if}
{:else}
@ -169,7 +171,9 @@
</div>
<div class="text-right mt-4">
<Button size="sm" color="red" onclick={removeIndividualProductKey}>{$t('purchase_button_remove_key')}</Button>
<Button shape="round" size="small" color="danger" onclick={removeIndividualProductKey}
>{$t('purchase_button_remove_key')}</Button
>
</div>
{/if}
{:else}