Fix empty content for settings dialogs

Signed-off-by: greta <gretadoci@gmail.com>

3 files changed, 61 insertions, 62 deletions

diff --git a/src/components/ProcessingScreen.vue b/src/components/ProcessingScreen.vue
index fbb635ad..1581d5ee 100644
--- a/src/components/ProcessingScreen.vue
+++ b/src/components/ProcessingScreen.vue
@@ -1,18 +1,16 @@
 <template>
-	<EmptyContent class="processing-screen__wrapper">
-		<template #icon>
-			<IconContact :size="20" />
-		</template>
-		<slot />
-		<template #desc>
-			<div class="processing-screen__progress">
-				<progress :max="total" :value="progress" />
-			</div>
-			<div class="processing-screen__desc">
-				<slot name="desc" />
-			</div>
-		</template>
-	</EmptyContent>
+	<div>
+		<EmptyContent :description="desc"
+			:title="title"
+			class="processing-screen__wrapper">
+			<template #icon>
+				<IconContact :size="20" />
+			</template>
+		</EmptyContent>
+		<div class="processing-screen__progress">
+			<progress :max="total" :value="progress" />
+		</div>
+	</div>
 </template>
 
 <script>
@@ -35,6 +33,14 @@ export default {
 			type: Number,
 			required: true,
 		},
+		desc: {
+			type: String,
+			required: true,
+		},
+		title: {
+			type: String,
+			required: true,
+		},
 	},
 }
 </script>
@@ -58,28 +64,7 @@ export default {
 	}
 
 	&__progress {
-		display: flex;
-		width: 100%;
-	}
-
-	&__desc {
-		display: inline-flex;
-		align-items: center;
-		width: 100%;
-		margin-top: 22px;
-		color: var(--color-text-maxcontrast);
-
-		&::v-deep button {
-			min-width: 100px;
-			height: 44px;
-			padding: 10px 20px;
-
-			// Put buttons at the end
-			&:first-of-type {
-				margin-left: auto;
-			}
-		}
+		padding: 0 12px;
 	}
 }
-
 </style>
diff --git a/src/views/Processing/AddToGroupView.vue b/src/views/Processing/AddToGroupView.vue
index a1965fc7..409bb706 100644
--- a/src/views/Processing/AddToGroupView.vue
+++ b/src/views/Processing/AddToGroupView.vue
@@ -21,29 +21,30 @@
   -->
 
 <template>
-	<ProcessingScreen :progress="progress" :total="total">
-		{{ total === progress
-			? finishedHeader
-			: progressHeader }}
-		<template #desc>
-			<span v-if="failed > 0">
-				{{ messageFailed }}
-			</span>
-			<button v-if="total === progress" class="primary" @click="onClose">
+	<div>
+		<ProcessingScreen :progress="progress"
+			:total="total"
+			:desc="failed > 0 ? messageFailed : ''"
+			:title="total === progress
+				? finishedHeader
+				: progressHeader" />
+		<div class="close__button">
+			<Button v-if="total === progress" class="primary" @click="onClose">
 				{{ t('contacts', 'Close') }}
-			</button>
-		</template>
-	</ProcessingScreen>
+			</Button>
+		</div>
+	</div>
 </template>
 
 <script>
 import ProcessingScreen from '../../components/ProcessingScreen'
-
+import Button from '@nextcloud/vue/dist/Components/NcButton'
 export default {
 	name: 'AddToGroupView',
 
 	components: {
 		ProcessingScreen,
+		Button,
 	},
 
 	props: {
@@ -105,3 +106,9 @@ export default {
 	},
 }
 </script>
+<style lang="scss" scoped>
+.close__button {
+	padding: 12px;
+	float: right;
+}
+</style>
diff --git a/src/views/Processing/ImportView.vue b/src/views/Processing/ImportView.vue
index 1b412ebf..4b62bafc 100644
--- a/src/views/Processing/ImportView.vue
+++ b/src/views/Processing/ImportView.vue
@@ -21,29 +21,30 @@
   -->
 
 <template>
-	<ProcessingScreen :progress="progress" :total="total">
-		{{ total === progress
-			? importedHeader
-			: importingHeader }}
-		<template #desc>
-			<span v-if="failed > 0">
-				{{ importFailed }}
-			</span>
-			<button v-if="total === progress" class="primary" @click="onClose">
+	<div>
+		<ProcessingScreen :progress="progress"
+			:total="total"
+			:desc="failed > 0 ? importFailed : ''"
+			:title="total === progress
+				? importedHeader
+				: importingHeader" />
+		<div class="close__button">
+			<Button v-if="total === progress" class="primary" @click="onClose">
 				{{ t('contacts', 'Close') }}
-			</button>
-		</template>
-	</ProcessingScreen>
+			</Button>
+		</div>
+	</div>
 </template>
 
 <script>
 import ProcessingScreen from '../../components/ProcessingScreen'
-
+import Button from '@nextcloud/vue/dist/Components/NcButton'
 export default {
 	name: 'ImportView',
 
 	components: {
 		ProcessingScreen,
+		Button,
 	},
 
 	computed: {
@@ -105,3 +106,9 @@ export default {
 	},
 }
 </script>
+<style lang="scss" scoped>
+.close__button {
+	padding: 12px;
+	float: right;
+}
+</style>