Merge pull request #4506 from nextcloud-libraries/feat/empty-content-…

…centered
nextcloud-libraries · Sep 8, 2023 · ca177c2 · ca177c2
2 parents 365cbad + a485280
commit ca177c2
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 23 deletions.
diff --git a/src/components/NcDashboardWidget/NcDashboardWidget.vue b/src/components/NcDashboardWidget/NcDashboardWidget.vue
@@ -351,11 +351,9 @@ export default {
 <style scoped lang="scss">
 .dashboard-widget :deep(.empty-content) {
 	text-align: center;
-	margin-top: 0;
 	padding-top: 5vh;
 	&.half-screen {
 		padding-top: 0;
-		margin-top: 0;
 		margin-bottom: 1vh;
 	}
 }

diff --git a/src/components/NcEmptyContent/NcEmptyContent.vue b/src/components/NcEmptyContent/NcEmptyContent.vue
@@ -168,11 +168,19 @@ export default {
 	name: 'NcEmptyContent',
 
 	props: {
+		/**
+		 * A header message about an empty content shown
+		 * @example 'No comments'
+		 */
 		name: {
 			type: String,
 			default: '',
 		},
 
+		/**
+		 * Desription of the empty content
+		 * @example 'No comments yet, start the conversation!'
+		 */
 		description: {
 			type: String,
 			default: '',
@@ -198,7 +206,9 @@ export default {
 	display: flex;
 	align-items: center;
 	flex-direction: column;
-	margin-top: 20vh;
+	justify-content: center;
+	/* In case of using in a flex container - flex in advance */
+	flex-grow: 1;
 
 	.modal-wrapper & {
 		margin-top: 5vh;

diff --git a/src/components/NcRichText/NcReferencePicker/NcProviderList.vue b/src/components/NcRichText/NcReferencePicker/NcProviderList.vue
@@ -111,11 +111,6 @@ export default {
 	display: flex;
 	flex-direction: column;
 
-	&--empty-content {
-		margin-top: auto !important;
-		margin-bottom: auto !important;
-	}
-
 	&--select {
 		width: 100%;
 

diff --git a/src/components/NcRichText/NcReferencePicker/NcRawLinkInput.vue b/src/components/NcRichText/NcReferencePicker/NcRawLinkInput.vue
@@ -137,16 +137,11 @@ export default {
 		display: flex;
 	}
 
-	&--empty-content {
-		margin-top: auto !important;
-		margin-bottom: auto !important;
-
-		.provider-icon {
-			width: 150px;
-			height: 150px;
-			object-fit: contain;
-			filter: var(--background-invert-if-dark);
-		}
+	&--empty-content .provider-icon {
+		width: 150px;
+		height: 150px;
+		object-fit: contain;
+		filter: var(--background-invert-if-dark);
 	}
 
 	&--input {

diff --git a/src/components/NcRichText/NcReferencePicker/NcSearch.vue b/src/components/NcRichText/NcReferencePicker/NcSearch.vue
@@ -293,11 +293,6 @@ export default {
 		min-height: 400px;
 	}
 
-	&--empty-content {
-		margin-top: auto !important;
-		margin-bottom: auto !important;
-	}
-
 	.provider-icon {
 		width: 150px;
 		height: 150px;