update modal sizes after vue 5.1 (#1937)

Signed-off-by: szaimen <szaimen@e.mail.de>

3 files changed, 75 insertions, 75 deletions

diff --git a/src/components/AppNavigation/Trashbin.vue b/src/components/AppNavigation/Trashbin.vue
index e8b1048f..318eb0a9 100644
--- a/src/components/AppNavigation/Trashbin.vue
+++ b/src/components/AppNavigation/Trashbin.vue
@@ -29,6 +29,7 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 		</template>
 		<template #extra>
 			<Modal v-if="showModal"
+				size="large"
 				@close="showModal = false">
 				<div class="modal__content">
 					<EmptyContent v-if="loading" icon="icon-loading">
@@ -289,16 +290,11 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-::v-deep .modal-container {
-	height: 80%;
-}
 
 .modal__content {
 	display: flex;
 	flex-direction: column;
 	margin: 2vw;
-	height: calc(100% - 4vw);
-	max-height: calc(100% - 4vw);
 }
 
 .table {
diff --git a/src/components/DeleteCompletedModal.vue b/src/components/DeleteCompletedModal.vue
index 3208c4a4..c82fb8a8 100644
--- a/src/components/DeleteCompletedModal.vue
+++ b/src/components/DeleteCompletedModal.vue
@@ -25,22 +25,24 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 			{{ t('tasks', 'Delete all completed tasks.') }}
 		</span>
 		<Modal v-if="modalOpen"
+			size="normal"
 			:out-transition="true"
 			@close="closeModal">
-			<div class="emptycontent delete-completed">
-				<p class="icon-delete" />
-				<div v-if="completedTasksCount">
-					<h3 class="delete-completed__header">
+			<div class="delete-completed">
+				<Delete :size="64" />
+				<div v-if="completedTasksCount" class="delete-completed__header">
+					<h3>
 						{{ n('tasks', 'This will delete {taskCount} completed task and its subtasks from calendar "{calendar}".', 'This will delete {taskCount} completed tasks and their subtasks from calendar "{calendar}".', initialCompletedRootTasksCount, {taskCount: initialCompletedRootTasksCount, calendar: calendar.displayName}, { sanitize: false, escape: false }) }}
 					</h3>
-					<button class="delete-completed__button icon-delete"
+					<button class="delete-completed__button"
 						type="button"
 						@click="deleteCompletedTasks">
+						<Delete :size="20" />
 						{{ t('tasks', 'Delete completed tasks.') }}
 					</button>
 				</div>
 				<div v-else>
-					<h3 class="delete-completed__header">
+					<h3>
 						{{ t('tasks', 'Deleted all completed tasks from calendar "{calendar}".', { calendar: calendar.displayName }, undefined, { sanitize: false, escape: false }) }}
 					</h3>
 				</div>
@@ -65,10 +67,13 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 import { translate as t, translatePlural as n } from '@nextcloud/l10n'
 import Modal from '@nextcloud/vue/dist/Components/Modal'
 
+import Delete from 'vue-material-design-icons/Delete'
+
 import { mapGetters, mapActions } from 'vuex'
 
 export default {
 	components: {
+		Delete,
 		Modal,
 	},
 	props: {
@@ -162,10 +167,11 @@ export default {
 }
 
 .delete-completed {
-	margin: 50px;
+	padding: 20px;
 	width: auto;
 	min-width: 30vw;
 	&__button {
+		position: relative;
 		display: inline-block;
 		padding: 10px;
 		padding-left: 34px;
@@ -175,8 +181,18 @@ export default {
 		width: unset !important;
 		height: unset !important;
 		background-size: unset !important;
+
+		.material-design-icon {
+			position: absolute;
+			top: 7px;
+			left: 8px;
+		}
 	}
 	&__header {
+		text-align: center;
+		margin-bottom: 20px;
+	}
+	h3 {
 		padding-top: 20px;
 		max-width: 80%;
 		margin: 12px auto;
diff --git a/src/components/TaskCreateDialog.vue b/src/components/TaskCreateDialog.vue
index cb04bd38..2b1c3a10 100644
--- a/src/components/TaskCreateDialog.vue
+++ b/src/components/TaskCreateDialog.vue
@@ -26,57 +26,55 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-	<Modal class="task-selector" @close="close">
-		<div class="modal-scroller">
-			<div v-if="!creating && !created" id="modal-inner" :class="{ 'icon-loading': loading }">
-				<h3>{{ t('tasks', 'Create a new task') }}</h3>
-
-				<CalendarPickerItem :disabled="loading"
-					:calendar="pendingCalendar"
-					:calendars="writableCalendars"
-					@change-calendar="changeCalendar" />
-
-				<div class="property property__summary">
-					<ViewHeadline :size="20" />
-					<input v-model="pendingTitle"
-						type="text"
-						:placeholder="t('tasks', 'Task summary')"
-						:disabled="loading">
-				</div>
-
-				<div class="property property__notes">
-					<TextBoxOutline :size="20" />
-					<textarea v-model="pendingDescription"
-						:disabled="loading" />
-					<div class="modal-buttons">
-						<button @click="close">
-							{{ t('tasks', 'Cancel') }}
-						</button>
-						<button :disabled="loading"
-							class="primary"
-							@click="addTask">
-							{{ t('tasks', 'Create task') }}
-						</button>
-					</div>
-				</div>
+	<Modal class="task-selector" size="small" @close="close">
+		<div v-if="!creating && !created" id="modal-inner" :class="{ 'icon-loading': loading }">
+			<h3>{{ t('tasks', 'Create a new task') }}</h3>
+
+			<CalendarPickerItem :disabled="loading"
+				:calendar="pendingCalendar"
+				:calendars="writableCalendars"
+				@change-calendar="changeCalendar" />
+
+			<div class="property property__summary">
+				<ViewHeadline :size="20" />
+				<input v-model="pendingTitle"
+					type="text"
+					:placeholder="t('tasks', 'Task summary')"
+					:disabled="loading">
 			</div>
-			<div v-else id="modal-inner">
-				<EmptyContent v-if="creating" icon="icon-loading">
-					{{ t('tasks', 'Creating the new task…') }}
-				</EmptyContent>
-				<EmptyContent v-else-if="created" icon="icon-checkmark">
-					{{ t('tasks', '"{task}" was added to "{calendar}"', { task: pendingTitle, calendar: pendingCalendar.displayName }, undefined, { sanitize: false, escape: false }) }}
-					<template #desc>
-						<button class="primary" @click="openNewTask">
-							{{ t('tasks', 'Open task') }}
-						</button>
-						<button @click="close">
-							{{ t('tasks', 'Close') }}
-						</button>
-					</template>
-				</EmptyContent>
+
+			<div class="property property__notes">
+				<TextBoxOutline :size="20" />
+				<textarea v-model="pendingDescription"
+					:disabled="loading" />
+			</div>
+			<div class="modal-buttons">
+				<button @click="close">
+					{{ t('tasks', 'Cancel') }}
+				</button>
+				<button :disabled="loading"
+					class="primary"
+					@click="addTask">
+					{{ t('tasks', 'Create task') }}
+				</button>
 			</div>
 		</div>
+		<div v-else id="modal-inner">
+			<EmptyContent v-if="creating" icon="icon-loading">
+				{{ t('tasks', 'Creating the new task…') }}
+			</EmptyContent>
+			<EmptyContent v-else-if="created" icon="icon-checkmark">
+				{{ t('tasks', '"{task}" was added to "{calendar}"', { task: pendingTitle, calendar: pendingCalendar.displayName }, undefined, { sanitize: false, escape: false }) }}
+				<template #desc>
+					<button class="primary" @click="openNewTask">
+						{{ t('tasks', 'Open task') }}
+					</button>
+					<button @click="close">
+						{{ t('tasks', 'Close') }}
+					</button>
+				</template>
+			</EmptyContent>
+		</div>
 	</Modal>
 </template>
 
@@ -188,17 +186,11 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-	.modal-scroller {
-		overflow: scroll;
-		max-height: calc(80vh - 40px);
-		margin: 10px;
-	}
 
 	#modal-inner {
-		width: 90vw;
-		max-width: 400px;
-		padding: 10px;
-		min-height: 200px;
+		display: flex;
+		flex-direction: column;
+		padding: 20px;
 	}
 
 	.property__item {
@@ -216,8 +208,8 @@ export default {
 
 		.material-design-icon {
 			position: absolute;
-			top: 10px;
-			left: 10px;
+			top: 12px;
+			left: 12px;
 		}
 
 		input,
@@ -244,10 +236,6 @@ export default {
 		justify-content: flex-end;
 	}
 
-	.task-selector::v-deep .modal-container {
-		overflow: visible !important;
-	}
-
 	::v-deep {
 		.calendar-picker-option__label,
 		.property__item .multiselect__tags input.multiselect__input {