enh(a11y): Fix modal close button overlapping content

Signed-off-by: Christopher Ng <[email protected]>
nextcloud · Jan 31, 2024 · c11d798 · c11d798
1 parent 901627f
commit c11d798
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 23 deletions.
diff --git a/src/mixins/FaceContent.scss b/src/mixins/FaceContent.scss
@@ -106,6 +106,6 @@
 	padding: 16px;
 
 	input {
-		width: 80%;
+		width: 100%;
 	}
-}
+}
diff --git a/src/views/AlbumContent.vue b/src/views/AlbumContent.vue
@@ -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>
 
@@ -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'
@@ -220,6 +222,7 @@ export default {
 		NcActions,
 		NcActionSeparator,
 		NcButton,
+		NcDialog,
 		NcEmptyContent,
 		NcLoadingIcon,
 		NcModal,

diff --git a/src/views/FaceContent.vue b/src/views/FaceContent.vue
@@ -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
@@ -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() === ''"
@@ -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>
 
@@ -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'
@@ -217,7 +226,7 @@ export default {
 		NcEmptyContent,
 		NcActions,
 		NcActionButton,
-		NcModal,
+		NcDialog,
 		NcButton,
 		AccountSwitch,
 	},

diff --git a/src/views/UnassignedFaces.vue b/src/views/UnassignedFaces.vue
@@ -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>
 
@@ -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'
@@ -137,7 +139,7 @@ export default {
 		NcEmptyContent,
 		NcActions,
 		NcActionButton,
-		NcModal,
+		NcDialog,
 		AccountSwitch,
 	},