fix all modals after vue 5.0

Signed-off-by: szaimen <szaimen@e.mail.de>
nextcloud · Feb 22, 2022 · b5d68a0 · b5d68a0
1 parent a6bc871
commit b5d68a0
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 22 deletions.
diff --git a/apps/dashboard/src/App.vue b/apps/dashboard/src/App.vue
@@ -34,7 +34,7 @@
 				@keyup.space="showModal">{{ t('dashboard', 'Customize') }}</a>
 		</div>
 
-		<Modal v-if="modal" @close="closeModal">
+		<Modal v-if="modal" size="normal" @close="closeModal">
 			<div class="modal__content">
 				<h3>{{ t('dashboard', 'Edit widgets') }}</h3>
 				<ol class="panels">
@@ -553,9 +553,7 @@ export default {
 
 .modal__content {
 	padding: 32px 16px;
-	max-height: 70vh;
 	text-align: center;
-	overflow: auto;
 
 	ol {
 		display: flex;

diff --git a/apps/files/src/views/TemplatePicker.vue b/apps/files/src/views/TemplatePicker.vue
@@ -24,7 +24,7 @@
 	<Modal v-if="opened"
 		:clear-view-delay="-1"
 		class="templates-picker"
-		size="large"
+		size="normal"
 		@close="close">
 		<form class="templates-picker__form"
 			:style="style"
@@ -44,19 +44,19 @@
 					:ratio="provider.ratio"
 					@check="onCheck" />
 			</ul>
-
-			<!-- Cancel and submit -->
-			<div class="templates-picker__buttons">
-				<button @click="close">
-					{{ t('files', 'Cancel') }}
-				</button>
-				<input type="submit"
-					class="primary"
-					:value="t('files', 'Create')"
-					:aria-label="t('files', 'Create a new file with the selected template')">
-			</div>
 		</form>
 
+		<!-- Cancel and submit -->
+		<div class="templates-picker__buttons">
+			<button @click="close">
+				{{ t('files', 'Cancel') }}
+			</button>
+			<input type="submit"
+				class="primary"
+				:value="t('files', 'Create')"
+				:aria-label="t('files', 'Create a new file with the selected template')">
+		</div>
+
 		<EmptyContent v-if="loading" class="templates-picker__loading" icon="icon-loading">
 			{{ t('files', 'Creating file') }}
 		</EmptyContent>
@@ -249,6 +249,7 @@ export default {
 		padding: calc(var(--margin) * 2);
 		// Will be handled by the buttons
 		padding-bottom: 0;
+		min-height: calc(100% - 80px);
 
 		h2 {
 			text-align: center;
@@ -274,6 +275,8 @@ export default {
 		display: flex;
 		justify-content: space-between;
 		padding: calc(var(--margin) * 2) var(--margin);
+		padding-left: var(--margin);
+		padding-right: var(--margin);
 		position: sticky;
 		bottom: 0;
 		background-image: linear-gradient(0, var(--gradient-main-background));
@@ -286,7 +289,7 @@ export default {
 	// Make sure we're relative for the loading emptycontent on top
 	::v-deep .modal-container {
 		position: relative;
-		overflow-y: auto !important;
+
 	}
 
 	&__loading {

diff --git a/apps/settings/src/components/UserList.vue b/apps/settings/src/components/UserList.vue
@@ -22,7 +22,7 @@
 
 <template>
 	<div id="app-content" class="user-list-grid" @scroll.passive="onScroll">
-		<Modal v-if="showConfig.showNewUserForm" @close="closeModal">
+		<Modal v-if="showConfig.showNewUserForm" size="small" @close="closeModal">
 			<form id="new-user"
 				:disabled="loading.all"
 				class="modal__content"
@@ -598,7 +598,6 @@ export default {
 		flex-direction: column;
 		align-items: center;
 		text-align: center;
-		overflow: auto;
 	}
 	.modal__item {
 		margin-bottom: 16px;

diff --git a/apps/user_status/src/components/SetStatusModal.vue b/apps/user_status/src/components/SetStatusModal.vue
@@ -251,11 +251,7 @@ export default {
 }
 
 .set-status-modal {
-	min-height: 200px;
 	padding: 8px 20px 20px 20px;
-	// Enable scrollbar for too long content, same way as in Dashboard customize
-	max-height: 95vh;
-	overflow: auto;
 
 	&__header {
 		text-align: center;