Merge pull request #4561 from nextcloud/bugfix/4523

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 {

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"
@@ -80,6 +85,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'
@@ -92,6 +98,7 @@ export default {
 		GlobalSearchResults,
 		Controls,
 		Container,
+		DeckIcon,
 		Draggable,
 		Stack,
 		NcEmptyContent,