Skip to content

Commit

Permalink
Merge pull request #2297 from nextcloud/enh/a11y/modal-to-dialog
Browse files Browse the repository at this point in the history
enh(a11y): Fix modal close button overlapping content
  • Loading branch information
Pytal authored Feb 1, 2024
2 parents 60da94d + 6976a88 commit 1c0bf8f
Show file tree
Hide file tree
Showing 14 changed files with 52 additions and 38 deletions.
4 changes: 2 additions & 2 deletions js/photos-main.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion js/photos-main.js.map

Large diffs are not rendered by default.

Large diffs are not rendered by default.

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions js/photos-public.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion js/photos-public.js.map

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions js/photos-src_views_AlbumContent_vue.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion js/photos-src_views_AlbumContent_vue.js.map

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions js/photos-src_views_FaceContent_vue.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion js/photos-src_views_FaceContent_vue.js.map

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions src/mixins/FaceContent.scss
Original file line number Diff line number Diff line change
Expand Up @@ -106,6 +106,6 @@
padding: 16px;

input {
width: 80%;
width: 100%;
}
}
}
11 changes: 7 additions & 4 deletions src/views/AlbumContent.vue
Original file line number Diff line number Diff line change
Expand Up @@ -156,11 +156,13 @@
</CollaboratorsSelectionForm>
</NcModal>

<NcModal v-if="showEditAlbumForm"
<NcDialog v-if="showEditAlbumForm"
:name="t('photos', 'Edit album details')"
@close="showEditAlbumForm = false">
close-on-click-outside
size="normal"
@closing="showEditAlbumForm = false">
<AlbumForm :album="album" @done="redirectToNewName" />
</NcModal>
</NcDialog>
</div>
</template>

Expand All @@ -169,7 +171,7 @@ import { mapActions } from 'vuex'

import { Folder, addNewFileMenuEntry, removeNewFileMenuEntry } from '@nextcloud/files'
import { getCurrentUser } from '@nextcloud/auth'
import { NcActions, NcActionButton, NcButton, NcModal, NcEmptyContent, NcActionSeparator, NcLoadingIcon, isMobile } from '@nextcloud/vue'
import { NcActions, NcActionButton, NcButton, NcDialog, NcModal, NcEmptyContent, NcActionSeparator, NcLoadingIcon, isMobile } from '@nextcloud/vue'
import { UploadPicker, getUploader } from '@nextcloud/upload'
import { translate } from '@nextcloud/l10n'
import debounce from 'debounce'
Expand Down Expand Up @@ -220,6 +222,7 @@ export default {
NcActions,
NcActionSeparator,
NcButton,
NcDialog,
NcEmptyContent,
NcLoadingIcon,
NcModal,
Expand Down
33 changes: 21 additions & 12 deletions src/views/FaceContent.vue
Original file line number Diff line number Diff line change
Expand Up @@ -136,9 +136,11 @@
@select-toggled="onFileSelectToggle" />
</FilesListViewer>

<NcModal v-if="showRenameModal"
<NcDialog v-if="showRenameModal"
:name="t('photos', 'Rename person')"
@close="showRenameModal = false">
close-on-click-outside
size="small"
@closing="showRenameModal = false">
<div class="rename-form">
<input ref="nameInput"
v-focus
Expand All @@ -148,6 +150,8 @@
required
:placeholder="t('photos', 'Name of this person')"
@keydown.enter="handleRenameFace($refs.nameInput.value)">
</div>
<template #actions>
<NcButton :aria-label="t('photos', 'Save.')"
type="primary"
:disabled="$refs.nameInput && $refs.nameInput.value.trim() === ''"
Expand All @@ -158,19 +162,24 @@
</template>
{{ t('photos', 'Save') }}
</NcButton>
</div>
</NcModal>
</template>
</NcDialog>

<NcModal v-if="showMergeModal"
<NcDialog v-if="showMergeModal"
:name="t('photos', 'Merge person')"
@close="showMergeModal = false">
close-on-click-outside
size="normal"
@closing="showMergeModal = false">
<FaceMergeForm :first-face="faceName" @select="handleMerge($event)" />
</NcModal>
<NcModal v-if="showMoveModal"
</NcDialog>

<NcDialog v-if="showMoveModal"
:name="t('photos', 'Move to different person')"
@close="showMoveModal = false">
close-on-click-outside
size="normal"
@closing="showMoveModal = false">
<FaceMergeForm :first-face="faceName" @select="handleMove($event, selectedFileIds)" />
</NcModal>
</NcDialog>
</div>
</template>

Expand All @@ -187,7 +196,7 @@ import ArrowLeft from 'vue-material-design-icons/ArrowLeft.vue'
import AccountSwitch from 'vue-material-design-icons/AccountSwitch.vue'
import AccountBoxMultipleOutline from 'vue-material-design-icons/AccountBoxMultipleOutline.vue'

import { NcActions, NcActionButton, NcModal, NcEmptyContent, NcButton, NcLoadingIcon } from '@nextcloud/vue'
import { NcActions, NcActionButton, NcDialog, NcEmptyContent, NcButton, NcLoadingIcon } from '@nextcloud/vue'

import FetchFilesMixin from '../mixins/FetchFilesMixin.js'
import FilesSelectionMixin from '../mixins/FilesSelectionMixin.js'
Expand Down Expand Up @@ -217,7 +226,7 @@ export default {
NcEmptyContent,
NcActions,
NcActionButton,
NcModal,
NcDialog,
NcButton,
AccountSwitch,
},
Expand Down
12 changes: 7 additions & 5 deletions src/views/UnassignedFaces.vue
Original file line number Diff line number Diff line change
Expand Up @@ -96,11 +96,13 @@
@select-toggled="onFileSelectToggle" />
</FilesListViewer>

<NcModal v-if="showMoveModal"
<NcDialog v-if="showMoveModal"
:name="t('photos', 'Move to different person')"
@close="showMoveModal = false">
close-on-click-outside
size="normal"
@closing="showMoveModal = false">
<FaceMergeForm :first-face="'-1'" @select="handleMove($event, selectedFileIds)" />
</NcModal>
</NcDialog>
</div>
</template>

Expand All @@ -112,7 +114,7 @@ import Download from 'vue-material-design-icons/Download.vue'
import ArrowLeft from 'vue-material-design-icons/ArrowLeft.vue'
import AccountSwitch from 'vue-material-design-icons/AccountSwitch.vue'

import { NcActions, NcActionButton, NcModal, NcEmptyContent, NcLoadingIcon } from '@nextcloud/vue'
import { NcActions, NcActionButton, NcDialog, NcEmptyContent, NcLoadingIcon } from '@nextcloud/vue'

import FetchFilesMixin from '../mixins/FetchFilesMixin.js'
import FilesSelectionMixin from '../mixins/FilesSelectionMixin.js'
Expand All @@ -137,7 +139,7 @@ export default {
NcEmptyContent,
NcActions,
NcActionButton,
NcModal,
NcDialog,
AccountSwitch,
},

Expand Down

0 comments on commit 1c0bf8f

Please sign in to comment.