Adjust to changed behaviour of NcEmptyContent

Signed-off-by: Raimund Schlüßler <[email protected]>
nextcloud · Oct 13, 2022 · 5666eb6 · 5666eb6
1 parent b0ba414
commit 5666eb6
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 16 deletions.
diff --git a/src/components/AppNavigation/Trashbin.vue b/src/components/AppNavigation/Trashbin.vue
@@ -32,14 +32,15 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 				size="large"
 				@close="showModal = false">
 				<div class="modal__content">
-					<NcEmptyContent v-if="loading" icon="icon-loading">
-						{{ t('tasks', 'Loading deleted calendars, tasks and events.') }}
+					<NcEmptyContent v-if="loading" :description="t('tasks', 'Loading deleted calendars, tasks and events.')">
+						<template #icon>
+							<NcLoadingIcon :size="64" />
+						</template>
 					</NcEmptyContent>
-					<NcEmptyContent v-else-if="!items.length">
+					<NcEmptyContent v-else-if="!items.length" :description="t('tasks', 'You do not have any deleted calendars, tasks or events.')">
 						<template #icon>
 							<Delete :size="64" />
 						</template>
-						{{ t('tasks', 'You do not have any deleted calendars, tasks or events.') }}
 					</NcEmptyContent>
 					<template v-else>
 						<h2>{{ t('tasks', 'Trash bin') }}</h2>
@@ -118,6 +119,7 @@ import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
+import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
 import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
 
 import Delete from 'vue-material-design-icons/Delete.vue'
@@ -132,6 +134,7 @@ export default {
 		NcAppNavigationItem,
 		Delete,
 		NcEmptyContent,
+		NcLoadingIcon,
 		NcModal,
 		Moment,
 		NcActions,

diff --git a/src/components/TaskCreateDialog.vue b/src/components/TaskCreateDialog.vue
@@ -63,19 +63,16 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 			</div>
 		</div>
 		<div v-else id="modal-inner">
-			<NcEmptyContent v-if="creating" key="creating">
-				{{ t('tasks', 'Creating the new task…') }}
+			<NcEmptyContent v-if="creating" key="creating" :description="t('tasks', 'Creating the new task…')">
 				<template #icon>
 					<NcLoadingIcon />
 				</template>
 			</NcEmptyContent>
-			<NcEmptyContent v-else-if="created" key="created">
-				{{ t('tasks', '"{task}" was added to "{calendar}"', { task: pendingTitle, calendar: pendingCalendar.displayName }, undefined, { sanitize: false, escape: false }) }}
+			<NcEmptyContent v-else-if="created" key="created" :description="createdMessage">
 				<template #icon>
 					<Check />
 				</template>
-				<template #desc>
-&nbsp;
+				<template #action>
 					<NcButton @click="close">
 						{{ t('tasks', 'Close') }}
 					</NcButton>
@@ -146,6 +143,9 @@ export default {
 			writableCalendars: 'getSortedWritableCalendars',
 			defaultCalendar: 'getDefaultCalendar',
 		}),
+		createdMessage() {
+			return t('tasks', '"{task}" was added to "{calendar}"', { task: this.pendingTitle, calendar: this.pendingCalendar.displayName }, undefined, { sanitize: false, escape: false })
+		},
 	},
 
 	beforeMount() {

diff --git a/src/views/AppSidebar.vue b/src/views/AppSidebar.vue
@@ -192,9 +192,11 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 					@set-tags="updateTags" />
 			</div>
 		</NcAppSidebarTab>
-		<NcEmptyContent v-else
-			:icon="taskStatusIcon">
-			{{ taskStatusLabel }}
+		<NcEmptyContent v-else :description="taskStatusLabel">
+			<template #icon>
+				<NcLoadingIcon v-if="loading" />
+				<Magnify v-else />
+			</template>
 		</NcEmptyContent>
 		<NcAppSidebarTab v-if="task && (!readOnly || task.note)"
 			id="app-sidebar-tab-notes"
@@ -249,6 +251,7 @@ import NcActionLink from '@nextcloud/vue/dist/Components/NcActionLink.js'
 import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
 import NcAppSidebar from '@nextcloud/vue/dist/Components/NcAppSidebar.js'
 import NcAppSidebarTab from '@nextcloud/vue/dist/Components/NcAppSidebarTab.js'
+import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
 import { generateUrl } from '@nextcloud/router'
 
 import Calendar from 'vue-material-design-icons/Calendar.vue'
@@ -257,6 +260,7 @@ import CalendarStart from 'vue-material-design-icons/CalendarStart.vue'
 import Delete from 'vue-material-design-icons/Delete.vue'
 import Download from 'vue-material-design-icons/Download.vue'
 import InformationOutline from 'vue-material-design-icons/InformationOutline.vue'
+import Magnify from 'vue-material-design-icons/Magnify.vue'
 import Pencil from 'vue-material-design-icons/Pencil.vue'
 import Percent from 'vue-material-design-icons/Percent.vue'
 import Pin from 'vue-material-design-icons/Pin.vue'
@@ -273,6 +277,7 @@ export default {
 		NcAppSidebarTab,
 		NcActionButton,
 		NcActionLink,
+		NcLoadingIcon,
 		CheckboxItem,
 		DatetimePickerItem,
 		Calendar,
@@ -281,6 +286,7 @@ export default {
 		Delete,
 		Download,
 		InformationOutline,
+		Magnify,
 		Pencil,
 		Percent,
 		Pin,
@@ -501,9 +507,6 @@ export default {
 		taskStatusLabel() {
 			return this.loading ? t('tasks', 'Loading task from server.') : t('tasks', 'Task not found!')
 		},
-		taskStatusIcon() {
-			return this.loading ? 'icon-loading' : 'icon-search'
-		},
 		/**
 		 * Whether we treat the task as read-only.
 		 * We also treat tasks in shared calendars with an access class other than 'PUBLIC'