Cutlery/immich
1
0
Fork 1
mirror of https://github.com/immich-app/immich.git synced 2025-07-07 18:24:10 -04:00
Code Issues Packages Projects Releases Wiki Activity

chore: consistent modal footer spacing (#19377)

Browse Source
This commit is contained in:
Daniel Dietzler 2025-06-20 20:05:39 +02:00 committed by GitHub
parent 1dc8fa2979
commit a5d84ba552
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
22 changed files with 69 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
web/package-lock.json generated
View File

@ -11,7 +11,7 @@
"dependencies": {
"@formatjs/icu-messageformat-parser": "^2.9.8",
"@immich/sdk": "file:../open-api/typescript-sdk",
"@immich/ui": "^0.22.7",
"@immich/ui": "^0.22.8",
"@mapbox/mapbox-gl-rtl-text": "0.2.3",
"@mdi/js": "^7.4.47",
"@photo-sphere-viewer/core": "^5.11.5",
@ -1333,9 +1333,9 @@
"link": true
},
"node_modules/@immich/ui": {
"version": "0.22.7",
"resolved": "https://registry.npmjs.org/@immich/ui/-/ui-0.22.7.tgz",
"integrity": "sha512-FdA0RDSOO1IDSTQmCbW9u5yXFl59EHu++tYonDR/FEZUKrMwfmQEanePSW5g5KofdumKEuxBN1fWFym3NbB0jQ==",
"version": "0.22.8",
"resolved": "https://registry.npmjs.org/@immich/ui/-/ui-0.22.8.tgz",
"integrity": "sha512-DVhDgz6drx7vfNhAssX4yYgOC3JpLm8uovLvz3n36skCNU6pm8GoSgH6gMGTM36sx5go3fvhHw5N3KR+A/7bjg==",
"license": "GNU Affero General Public License version 3",
"dependencies": {
"@mdi/js": "^7.4.47",

2
web/package.json
View File

@ -28,7 +28,7 @@
"dependencies": {
"@formatjs/icu-messageformat-parser": "^2.9.8",
"@immich/sdk": "file:../open-api/typescript-sdk",
"@immich/ui": "^0.22.7",
"@immich/ui": "^0.22.8",
"@mapbox/mapbox-gl-rtl-text": "0.2.3",
"@mdi/js": "^7.4.47",
"@photo-sphere-viewer/core": "^5.11.5",

6
web/src/lib/modals/AlbumEditModal.svelte
View File

@ -2,7 +2,7 @@
import AlbumCover from '$lib/components/album-page/album-cover.svelte';
import { handleError } from '$lib/utils/handle-error';
import { updateAlbumInfo, type AlbumResponseDto } from '@immich/sdk';
import { Button, Modal, ModalBody, ModalFooter } from '@immich/ui';
import { Button, HStack, Modal, ModalBody, ModalFooter } from '@immich/ui';
import { mdiRenameOutline } from '@mdi/js';
import { t } from 'svelte-i18n';
@ -68,9 +68,9 @@
</ModalBody>
<ModalFooter>
<div class="flex gap-2 w-full">
<HStack fullWidth>
<Button shape="round" color="secondary" fullWidth onclick={() => onClose()}>{$t('cancel')}</Button>
<Button shape="round" type="submit" fullWidth disabled={isSubmitting} form="edit-album-form">{$t('save')}</Button>
</div>
</HStack>
</ModalFooter>
</Modal>

6
web/src/lib/modals/ApiKeyModal.svelte
View File

@ -5,7 +5,7 @@
} from '$lib/components/shared-components/notification/notification';
import ApiKeyGrid from '$lib/components/user-settings-page/user-api-key-grid.svelte';
import { Permission } from '@immich/sdk';
import { Button, Checkbox, Label, Modal, ModalBody, ModalFooter } from '@immich/ui';
import { Button, Checkbox, HStack, Label, Modal, ModalBody, ModalFooter } from '@immich/ui';
import { mdiKeyVariant } from '@mdi/js';
import { onMount } from 'svelte';
import { t } from 'svelte-i18n';
@ -219,9 +219,9 @@
</ModalBody>
<ModalFooter>
<div class="flex gap-3 w-full">
<HStack fullWidth>
<Button shape="round" color="secondary" fullWidth onclick={() => onClose()}>{cancelText}</Button>
<Button shape="round" type="submit" fullWidth form="api-key-form">{submitText}</Button>
</div>
</HStack>
</ModalFooter>
</Modal>

6
web/src/lib/modals/ApiKeySecretModal.svelte
View File

@ -1,6 +1,6 @@
<script lang="ts">
import { copyToClipboard } from '$lib/utils';
import { Button, Modal, ModalBody, ModalFooter } from '@immich/ui';
import { Button, HStack, Modal, ModalBody, ModalFooter } from '@immich/ui';
import { mdiKeyVariant } from '@mdi/js';
import { t } from 'svelte-i18n';
@ -27,9 +27,9 @@
</ModalBody>
<ModalFooter>
<div class="flex gap-3 w-full">
<HStack fullWidth>
<Button shape="round" onclick={() => copyToClipboard(secret)} fullWidth>{$t('copy_to_clipboard')}</Button>
<Button shape="round" onclick={onClose} fullWidth>{$t('done')}</Button>
</div>
</HStack>
</ModalFooter>
</Modal>

6
web/src/lib/modals/AssetTagModal.svelte
View File

@ -2,7 +2,7 @@
import Icon from '$lib/components/elements/icon.svelte';
import { tagAssets } from '$lib/utils/asset-utils';
import { getAllTags, upsertTags, type TagResponseDto } from '@immich/sdk';
import { Button, Modal, ModalBody, ModalFooter } from '@immich/ui';
import { Button, HStack, Modal, ModalBody, ModalFooter } from '@immich/ui';
import { mdiClose, mdiTag } from '@mdi/js';
import { onMount } from 'svelte';
import { t } from 'svelte-i18n';
@ -99,9 +99,9 @@
</ModalBody>
<ModalFooter>
<div class="flex w-full gap-2">
<HStack fullWidth>
<Button shape="round" fullWidth color="secondary" onclick={() => onClose()}>{$t('cancel')}</Button>
<Button type="submit" shape="round" fullWidth form="create-tag-form" {disabled}>{$t('tag_assets')}</Button>
</div>
</HStack>
</ModalFooter>
</Modal>

6
web/src/lib/modals/AuthDisableLoginConfirmModal.svelte
View File

@ -1,6 +1,6 @@
<script lang="ts">
import FormatMessage from '$lib/components/i18n/format-message.svelte';
import { Button, Modal, ModalBody, ModalFooter } from '@immich/ui';
import { Button, HStack, Modal, ModalBody, ModalFooter } from '@immich/ui';
import { mdiCancel } from '@mdi/js';
import { t } from 'svelte-i18n';
@ -32,13 +32,13 @@
</div>
</ModalBody>
<ModalFooter>
<div class="flex gap-3 w-full">
<HStack fullWidth>
<Button shape="round" color="secondary" fullWidth onclick={() => onClose(false)}>
{$t('cancel')}
</Button>
<Button shape="round" color="danger" fullWidth onclick={() => onClose(true)}>
{$t('confirm')}
</Button>
</div>
</HStack>
</ModalFooter>
</Modal>

6
web/src/lib/modals/ConfirmModal.svelte
View File

@ -1,5 +1,5 @@
<script lang="ts">
import { Button, Modal, ModalBody, ModalFooter, type Color } from '@immich/ui';
import { Button, HStack, Modal, ModalBody, ModalFooter, type Color } from '@immich/ui';
import type { Snippet } from 'svelte';
import { t } from 'svelte-i18n';
@ -38,13 +38,13 @@
</ModalBody>
<ModalFooter>
<div class="flex gap-3 w-full">
<HStack fullWidth>
<Button shape="round" color="secondary" fullWidth onclick={() => onClose(false)}>
{$t('cancel')}
</Button>
<Button shape="round" color={confirmColor} fullWidth onclick={handleConfirm} {disabled}>
{confirmText}
</Button>
</div>
</HStack>
</ModalFooter>
</Modal>

6
web/src/lib/modals/LibraryExclusionPatternModal.svelte
View File

@ -1,5 +1,5 @@
<script lang="ts">
import { Button, Modal, ModalBody, ModalFooter } from '@immich/ui';
import { Button, HStack, Modal, ModalBody, ModalFooter } from '@immich/ui';
import { mdiFolderRemove } from '@mdi/js';
import { onMount } from 'svelte';
import { t } from 'svelte-i18n';
@ -63,7 +63,7 @@
</form>
</ModalBody>
<ModalFooter>
<div class="flex gap-2 w-full">
<HStack fullWidth>
<Button shape="round" color="secondary" fullWidth onclick={() => onClose()}>{$t('cancel')}</Button>
{#if isEditing}
<Button shape="round" color="danger" fullWidth onclick={() => onClose({ action: 'delete' })}
@ -73,6 +73,6 @@
<Button shape="round" type="submit" disabled={!canSubmit} fullWidth form="add-exclusion-pattern-form">
{submitText}
</Button>
</div>
</HStack>
</ModalFooter>
</Modal>

6
web/src/lib/modals/LibraryImportPathModal.svelte
View File

@ -1,5 +1,5 @@
<script lang="ts">
import { Button, Modal, ModalBody, ModalFooter } from '@immich/ui';
import { Button, HStack, Modal, ModalBody, ModalFooter } from '@immich/ui';
import { mdiFolderSync } from '@mdi/js';
import { onMount } from 'svelte';
import { t } from 'svelte-i18n';
@ -60,7 +60,7 @@
</ModalBody>
<ModalFooter>
<div class="flex gap-2 w-full">
<HStack fullWidth>
<Button shape="round" color="secondary" fullWidth onclick={() => onClose()}>{cancelText}</Button>
{#if isEditing}
<Button shape="round" color="danger" fullWidth onclick={() => onClose({ action: 'delete' })}>
@ -70,6 +70,6 @@
<Button shape="round" type="submit" disabled={!canSubmit} fullWidth form="library-import-path-form">
{submitText}
</Button>
</div>
</HStack>
</ModalFooter>
</Modal>

6
web/src/lib/modals/LibraryRenameModal.svelte
View File

@ -1,6 +1,6 @@
<script lang="ts">
import type { LibraryResponseDto } from '@immich/sdk';
import { Button, Field, Input, Modal, ModalBody, ModalFooter } from '@immich/ui';
import { Button, Field, HStack, Input, Modal, ModalBody, ModalFooter } from '@immich/ui';
import { mdiRenameOutline } from '@mdi/js';
import { t } from 'svelte-i18n';
@ -29,9 +29,9 @@
</ModalBody>
<ModalFooter>
<div class="flex gap-2 w-full">
<HStack fullWidth>
<Button shape="round" fullWidth color="secondary" onclick={() => onClose()}>{$t('cancel')}</Button>
<Button shape="round" fullWidth type="submit" form="rename-library-form">{$t('save')}</Button>
</div>
</HStack>
</ModalFooter>
</Modal>

6
web/src/lib/modals/LibraryUserPickerModal.svelte
View File

@ -2,7 +2,7 @@
import SettingSelect from '$lib/components/shared-components/settings/setting-select.svelte';
import { user } from '$lib/stores/user.store';
import { searchUsersAdmin } from '@immich/sdk';
import { Button, Modal, ModalBody, ModalFooter } from '@immich/ui';
import { Button, HStack, Modal, ModalBody, ModalFooter } from '@immich/ui';
import { mdiFolderSync } from '@mdi/js';
import { onMount } from 'svelte';
import { t } from 'svelte-i18n';
@ -38,9 +38,9 @@
</ModalBody>
<ModalFooter>
<div class="flex gap-2 w-full">
<HStack fullWidth>
<Button shape="round" color="secondary" fullWidth onclick={() => onClose()}>{$t('cancel')}</Button>
<Button shape="round" type="submit" fullWidth form="select-library-owner-form">{$t('create')}</Button>
</div>
</HStack>
</ModalFooter>
</Modal>

6
web/src/lib/modals/MapSettingsModal.svelte
View File

@ -1,7 +1,7 @@
<script lang="ts">
import SettingSelect from '$lib/components/shared-components/settings/setting-select.svelte';
import type { MapSettings } from '$lib/stores/preferences.store';
import { Button, Field, Modal, ModalBody, ModalFooter, Stack, Switch } from '@immich/ui';
import { Button, Field, HStack, Modal, ModalBody, ModalFooter, Stack, Switch } from '@immich/ui';
import { Duration } from 'luxon';
import { t } from 'svelte-i18n';
import { fly } from 'svelte/transition';
@ -127,9 +127,9 @@
</ModalBody>
<ModalFooter>
<div class="flex gap-3 w-full">
<HStack fullWidth>
<Button color="secondary" shape="round" fullWidth onclick={() => onClose()}>{$t('cancel')}</Button>
<Button type="submit" shape="round" fullWidth form="map-settings-form">{$t('save')}</Button>
</div>
</HStack>
</ModalFooter>
</Modal>

6
web/src/lib/modals/PasswordResetSuccessModal.svelte
View File

@ -1,6 +1,6 @@
<script lang="ts">
import { copyToClipboard } from '$lib/utils';
import { Button, Code, IconButton, Modal, ModalBody, ModalFooter, Text } from '@immich/ui';
import { Button, Code, HStack, IconButton, Modal, ModalBody, ModalFooter, Text } from '@immich/ui';
import { mdiCheck, mdiContentCopy } from '@mdi/js';
import { t } from 'svelte-i18n';
@ -35,10 +35,10 @@
</ModalBody>
<ModalFooter>
<div class="flex gap-3 w-full">
<HStack fullWidth>
<Button shape="round" color="primary" fullWidth onclick={() => onClose()}>
{$t('done')}
</Button>
</div>
</HStack>
</ModalFooter>
</Modal>

6
web/src/lib/modals/PersonEditBirthDateModal.svelte
View File

@ -5,7 +5,7 @@
} from '$lib/components/shared-components/notification/notification';
import { handleError } from '$lib/utils/handle-error';
import { updatePerson, type PersonResponseDto } from '@immich/sdk';
import { Button, Modal, ModalBody, ModalFooter } from '@immich/ui';
import { Button, HStack, Modal, ModalBody, ModalFooter } from '@immich/ui';
import { mdiCake } from '@mdi/js';
import { t } from 'svelte-i18n';
import DateInput from '../components/elements/date-input.svelte';
@ -65,13 +65,13 @@
</ModalBody>
<ModalFooter>
<div class="flex gap-3 w-full">
<HStack fullWidth>
<Button shape="round" color="secondary" fullWidth onclick={() => onClose()}>
{$t('cancel')}
</Button>
<Button type="submit" shape="round" color="primary" fullWidth form="set-birth-date-form">
{$t('save')}
</Button>
</div>
</HStack>
</ModalFooter>
</Modal>

6
web/src/lib/modals/PersonMergeSuggestionModal.svelte
View File

@ -7,7 +7,7 @@
import { getPeopleThumbnailUrl } from '$lib/utils';
import { handleError } from '$lib/utils/handle-error';
import { mergePerson, type PersonResponseDto } from '@immich/sdk';
import { Button, IconButton, Modal, ModalBody, ModalFooter } from '@immich/ui';
import { Button, HStack, IconButton, Modal, ModalBody, ModalFooter } from '@immich/ui';
import { mdiArrowLeft, mdiMerge } from '@mdi/js';
import { onMount, tick } from 'svelte';
import { t } from 'svelte-i18n';
@ -139,11 +139,11 @@
</ModalBody>
<ModalFooter>
<div class="flex gap-3 w-full">
<HStack fullWidth>
<Button fullWidth shape="round" color="secondary" onclick={() => onClose()}>{$t('no')}</Button>
<Button id="merge-confirm-button" fullWidth shape="round" onclick={handleMergePerson}>
{$t('yes')}
</Button>
</div>
</HStack>
</ModalFooter>
</Modal>

6
web/src/lib/modals/SearchFilterModal.svelte
View File

@ -34,7 +34,7 @@
import { parseUtcDate } from '$lib/utils/date-time';
import { generateId } from '$lib/utils/generate-id';
import { AssetTypeEnum, AssetVisibility, type MetadataSearchDto, type SmartSearchDto } from '@immich/sdk';
import { Button, Modal, ModalBody, ModalFooter } from '@immich/ui';
import { Button, HStack, Modal, ModalBody, ModalFooter } from '@immich/ui';
import { mdiTune } from '@mdi/js';
import { t } from 'svelte-i18n';
import { SvelteSet } from 'svelte/reactivity';
@ -204,11 +204,11 @@
</ModalBody>
<ModalFooter>
<div class="flex gap-3 w-full">
<HStack fullWidth>
<Button shape="round" size="large" type="reset" color="secondary" fullWidth form={formId}
>{$t('clear_all')}</Button
>
<Button shape="round" size="large" type="submit" fullWidth form={formId}>{$t('search')}</Button>
</div>
</HStack>
</ModalFooter>
</Modal>

6
web/src/lib/modals/SlideshowSettingsModal.svelte
View File

@ -2,7 +2,7 @@
import SettingInputField from '$lib/components/shared-components/settings/setting-input-field.svelte';
import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
import { SettingInputFieldType } from '$lib/constants';
import { Button, Modal, ModalBody, ModalFooter } from '@immich/ui';
import { Button, HStack, Modal, ModalBody, ModalFooter } from '@immich/ui';
import {
mdiArrowDownThin,
mdiArrowUpThin,
@ -105,9 +105,9 @@
</div>
</ModalBody>
<ModalFooter>
<div class="flex gap-2 w-full">
<HStack fullWidth>
<Button color="secondary" shape="round" fullWidth onclick={() => onClose()}>{$t('cancel')}</Button>
<Button fullWidth color="primary" shape="round" onclick={applyChanges}>{$t('confirm')}</Button>
</div>
</HStack>
</ModalFooter>
</Modal>

10
web/src/lib/modals/UserCreateModal.svelte
View File

@ -9,6 +9,7 @@
Button,
Field,
HelperText,
HStack,
Input,
Modal,
ModalBody,
@ -131,10 +132,11 @@
</ModalBody>
<ModalFooter>
<div class="flex gap-3 w-full">
<HStack fullWidth>
<Button color="secondary" fullWidth onclick={() => onClose()} shape="round">{$t('cancel')}</Button>
<Button type="submit" disabled={!valid} fullWidth shape="round" form="create-new-user-form">{$t('create')}</Button
>
</div>
<Button type="submit" disabled={!valid} fullWidth shape="round" form="create-new-user-form"
>{$t('create')}
</Button>
</HStack>
</ModalFooter>
</Modal>

6
web/src/lib/modals/UserEditModal.svelte
View File

@ -5,7 +5,7 @@
import { ByteUnit, convertFromBytes, convertToBytes } from '$lib/utils/byte-units';
import { handleError } from '$lib/utils/handle-error';
import { updateUserAdmin, type UserAdminResponseDto } from '@immich/sdk';
import { Button, Field, Modal, ModalBody, ModalFooter, Switch } from '@immich/ui';
import { Button, Field, HStack, Modal, ModalBody, ModalFooter, Switch } from '@immich/ui';
import { mdiAccountEditOutline } from '@mdi/js';
import { t } from 'svelte-i18n';
@ -115,11 +115,11 @@
</ModalBody>
<ModalFooter>
<div class="flex gap-3 w-full">
<HStack fullWidth>
<Button shape="round" color="secondary" fullWidth form="edit-user-form" onclick={() => onClose()}
>{$t('cancel')}</Button
>
<Button type="submit" shape="round" fullWidth form="edit-user-form">{$t('confirm')}</Button>
</div>
</HStack>
</ModalFooter>
</Modal>

6
web/src/lib/modals/UserRestoreConfirmModal.svelte
View File

@ -2,7 +2,7 @@
import FormatMessage from '$lib/components/i18n/format-message.svelte';
import { handleError } from '$lib/utils/handle-error';
import { restoreUserAdmin, type UserAdminResponseDto, type UserResponseDto } from '@immich/sdk';
import { Button, Modal, ModalBody, ModalFooter } from '@immich/ui';
import { Button, HStack, Modal, ModalBody, ModalFooter } from '@immich/ui';
import { mdiDeleteRestore } from '@mdi/js';
import { t } from 'svelte-i18n';
@ -35,13 +35,13 @@
</ModalBody>
<ModalFooter>
<div class="flex gap-3 w-full">
<HStack fullWidth>
<Button shape="round" color="secondary" fullWidth onclick={() => onClose()}>
{$t('cancel')}
</Button>
<Button shape="round" color="primary" fullWidth onclick={() => handleRestoreUser()}>
{$t('restore')}
</Button>
</div>
</HStack>
</ModalFooter>
</Modal>

8
web/src/routes/(user)/tags/[[photos=photos]]/[[assetId=id]]/+page.svelte
View File

@ -191,10 +191,10 @@
</ModalBody>
<ModalFooter>
<div class="flex w-full gap-2">
<HStack fullWidth>
<Button color="secondary" fullWidth shape="round" onclick={() => handleCancel()}>{$t('cancel')}</Button>
<Button type="submit" fullWidth shape="round" form="create-tag-form">{$t('create')}</Button>
</div>
</HStack>
</ModalFooter>
</Modal>
{/if}
@ -214,10 +214,10 @@
</ModalBody>
<ModalFooter>
<div class="flex w-full gap-2">
<HStack fullWidth>
<Button color="secondary" fullWidth shape="round" onclick={() => handleCancel()}>{$t('cancel')}</Button>
<Button type="submit" fullWidth shape="round" form="edit-tag-form">{$t('save')}</Button>
</div>
</HStack>
</ModalFooter>
</Modal>
{/if}