From 0179b99f242c09825507b1f39ac913516c0b83cc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Mon, 27 Mar 2023 10:28:49 +0200
Subject: [PATCH] fix: Adapt NcEmptyContent usages to new slots
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 src/CardCreateDialog.vue       | 26 ++++++++++++++++++++------
 src/components/board/Board.vue | 13 ++++++++++---
 2 files changed, 30 insertions(+), 9 deletions(-)

diff --git a/src/CardCreateDialog.vue b/src/CardCreateDialog.vue
index 0e0a9c17e..18db5d903 100644
--- a/src/CardCreateDialog.vue
+++ b/src/CardCreateDialog.vue
@@ -71,12 +71,22 @@
 				</div>
 			</div>
 			<div v-else id="modal-inner">
-				<NcEmptyContent v-if="creating" icon="icon-loading">
-					{{ t('deck', 'Creating the new card …') }}
+				<NcEmptyContent v-if="creating">
+					<template #icon>
+						<NcLoadingIcon />
+					</template>
+					<template #title>
+						{{ t('deck', 'Creating the new card …') }}
+					</template>
 				</NcEmptyContent>
-				<NcEmptyContent v-else-if="created" icon="icon-checkmark">
-					{{ t('deck', 'Card "{card}" was added to "{board}"', { card: pendingTitle, board: selectedBoard.title }) }}
-					<template #desc>
+				<NcEmptyContent v-else-if="created">
+					<template #icon>
+						<CardPlusOutline />
+					</template>
+					<template #title>
+						{{ t('deck', 'Card "{card}" was added to "{board}"', { card: pendingTitle, board: selectedBoard.title }) }}
+					</template>
+					<template #action>
 						<button class="primary" @click="openNewCard">
 							{{ t('deck', 'Open card') }}
 						</button>
@@ -92,7 +102,8 @@
 
 <script>
 import { generateUrl } from '@nextcloud/router'
-import { NcModal, NcMultiselect, NcEmptyContent } from '@nextcloud/vue'
+import { NcModal, NcMultiselect, NcEmptyContent, NcLoadingIcon } from '@nextcloud/vue'
+import CardPlusOutline from 'vue-material-design-icons/CardPlusOutline.vue'
 import axios from '@nextcloud/axios'
 import { CardApi } from './services/CardApi.js'
 
@@ -104,6 +115,8 @@ export default {
 		NcEmptyContent,
 		NcModal,
 		NcMultiselect,
+		NcLoadingIcon,
+		CardPlusOutline,
 	},
 	props: {
 		title: {
@@ -203,6 +216,7 @@ export default {
 		max-width: 400px;
 		padding: 10px;
 		min-height: 200px;
+		margin: auto;
 	}
 
 	.multiselect-board, .multiselect-list, input, textarea {
diff --git a/src/components/board/Board.vue b/src/components/board/Board.vue
index 145b3e11c..56a0afe18 100644
--- a/src/components/board/Board.vue
+++ b/src/components/board/Board.vue
@@ -30,9 +30,14 @@
 				<h2>{{ t('deck', 'Loading board') }}</h2>
 				<p />
 			</div>
-			<NcEmptyContent v-else-if="isEmpty" key="empty" icon="icon-deck">
-				{{ t('deck', 'No lists available') }}
-				<template v-if="canManage" #desc>
+			<NcEmptyContent v-else-if="isEmpty" key="empty">
+				<template #icon>
+					<DeckIcon />
+				</template>
+				<template #title>
+					{{ t('deck', 'No lists available') }}
+				</template>
+				<template v-if="canManage" #action>
 					{{ t('deck', 'Create a new list to add cards to this board') }}
 					<form @submit.prevent="addNewStack()">
 						<input id="new-stack-input-main"
@@ -74,6 +79,7 @@
 import { Container, Draggable } from 'vue-smooth-dnd'
 import { mapState, mapGetters } from 'vuex'
 import Controls from '../Controls.vue'
+import DeckIcon from '../icons/DeckIcon.vue'
 import Stack from './Stack.vue'
 import { NcEmptyContent } from '@nextcloud/vue'
 import GlobalSearchResults from '../search/GlobalSearchResults.vue'
@@ -85,6 +91,7 @@ export default {
 		GlobalSearchResults,
 		Controls,
 		Container,
+		DeckIcon,
 		Draggable,
 		Stack,
 		NcEmptyContent,