Merge pull request #39229 from nextcloud/fix/default-empty-content-files

apps/files/src/components/FilesListVirtual.vue

@@ -45,7 +45,7 @@
 		<template #before>
 			<!-- Accessibility description -->
 			<caption class="hidden-visually">
-				{{ currentView.caption || '' }}
+				{{ currentView.caption || t('files', 'List of files and folders.') }}
 				{{ t('files', 'This list is not fully rendered for performances reasons. The files will be rendered as you navigate through the list.') }}
 			</caption>
 

apps/files/src/services/Navigation.ts

@@ -51,8 +51,14 @@ export interface Navigation {
 	id: string
 	/** Translated view name */
 	name: string
-	/** Translated view accessible description */
+	/** Translated accessible description of the view */
 	caption?: string
+
+	/** Translated title of the empty view */
+	emptyTitle?: string
+	/** Translated description of the empty view */
+	emptyCaption?: string
+
 	/**
 	 * Method return the content of the  provided path
 	 * This ideally should be a cancellable promise.

apps/files/src/views/FilesList.vue

@@ -39,8 +39,8 @@
 
 		<!-- Empty content placeholder -->
 		<NcEmptyContent v-else-if="!loading && isEmptyDir"
-			:title="t('files', 'No files in here')"
-			:description="t('files', 'No files or folders have been deleted yet')"
+			:title="currentView?.emptyTitle || t('files', 'No files in here')"
+			:description="currentView?.emptyCaption || t('files', 'Upload some content or sync with your devices!')"
 			data-cy-files-content-empty>
 			<template #action>
 				<NcButton v-if="dir !== '/'"
@@ -51,7 +51,7 @@
 				</NcButton>
 			</template>
 			<template #icon>
-				<TrashCan />
+				<NcIconSvgWrapper :svg="currentView.icon" />
 			</template>
 		</NcEmptyContent>
 
@@ -72,7 +72,6 @@ import NcAppContent from '@nextcloud/vue/dist/Components/NcAppContent.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 TrashCan from 'vue-material-design-icons/TrashCan.vue'
 import Vue from 'vue'
 
 import { useFilesStore } from '../store/files.ts'
@@ -85,6 +84,7 @@ import FilesListVirtual from '../components/FilesListVirtual.vue'
 import filesSortingMixin from '../mixins/filesSorting.ts'
 import logger from '../logger.js'
 import Navigation, { ContentsWithRoot } from '../services/Navigation.ts'
+import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js'
 
 export default Vue.extend({
 	name: 'FilesList',
@@ -95,8 +95,8 @@ export default Vue.extend({
 		NcAppContent,
 		NcButton,
 		NcEmptyContent,
+		NcIconSvgWrapper,
 		NcLoadingIcon,
-		TrashCan,
 	},
 
 	mixins: [

apps/files/src/views/favorites.spec.ts

@@ -68,7 +68,7 @@ describe('Favorites view definition', () => {
 
 		expect(favoritesView?.id).toBe('favorites')
 		expect(favoritesView?.name).toBe('Favorites')
-		expect(favoritesView?.caption).toBe('List of favorites files and folders.')
+		expect(favoritesView?.caption).toBeDefined()
 		expect(favoritesView?.icon).toBe('<svg>SvgMock</svg>')
 		expect(favoritesView?.order).toBe(5)
 		expect(favoritesView?.columns).toStrictEqual([])

apps/files/src/views/favorites.ts

@@ -68,6 +68,9 @@ export default () => {
 		name: t('files', 'Favorites'),
 		caption: t('files', 'List of favorites files and folders.'),
 
+		emptyTitle: t('files', 'No favorites yet'),
+		emptyCaption: t('files', 'Files and folders you mark as favorite will show up here'),
+
 		icon: StarSvg,
 		order: 5,
 

apps/files_sharing/src/views/shares.spec.ts

@@ -67,18 +67,20 @@ describe('Sharing views definition', () => {
 		expect(shareOverviewView?.getContents).toBeDefined()
 
 		const dataProvider = [
-			{ id: 'sharingin', name: 'Shared with you', caption: 'List of files that are shared with you.' },
-			{ id: 'sharingout', name: 'Shared with others', caption: 'List of files that you shared with others.' },
-			{ id: 'sharinglinks', name: 'Shared by link', caption: 'List of files that are shared by link.' },
-			{ id: 'deletedshares', name: 'Deleted shares', caption: 'List of shares that you removed yourself from.' },
-			{ id: 'pendingshares', name: 'Pending shares', caption: 'List of unapproved shares.' },
+			{ id: 'sharingin', name: 'Shared with you' },
+			{ id: 'sharingout', name: 'Shared with others' },
+			{ id: 'sharinglinks', name: 'Shared by link' },
+			{ id: 'deletedshares', name: 'Deleted shares' },
+			{ id: 'pendingshares', name: 'Pending shares' },
 		]
 
 		sharesChildViews.forEach((view, index) => {
 			expect(view?.id).toBe(dataProvider[index].id)
 			expect(view?.parent).toBe('shareoverview')
 			expect(view?.name).toBe(dataProvider[index].name)
-			expect(view?.caption).toBe(dataProvider[index].caption)
+			expect(view?.caption).toBeDefined()
+			expect(view?.emptyTitle).toBeDefined()
+			expect(view?.emptyCaption).toBeDefined()
 			expect(view?.icon).toBe('<svg>SvgMock</svg>')
 			expect(view?.order).toBe(index + 1)
 			expect(view?.columns).toStrictEqual([])

apps/files_sharing/src/views/shares.ts

@@ -46,6 +46,9 @@ export default () => {
 		name: t('files_sharing', 'Shares'),
 		caption: t('files_sharing', 'Overview of shared files.'),
 
+		emptyTitle: t('files_sharing', 'No shares'),
+		emptyCaption: t('files_sharing', 'Files and folders you shared or have been shared with you will show up here'),
+
 		icon: ShareVariantSvg,
 		order: 20,
 
@@ -59,6 +62,9 @@ export default () => {
 		name: t('files_sharing', 'Shared with you'),
 		caption: t('files_sharing', 'List of files that are shared with you.'),
 
+		emptyTitle: t('files_sharing', 'Nothing shared with you yet'),
+		emptyCaption: t('files_sharing', 'Files and folders others shared with you will show up here'),
+
 		icon: AccountSvg,
 		order: 1,
 		parent: sharesViewId,
@@ -73,6 +79,9 @@ export default () => {
 		name: t('files_sharing', 'Shared with others'),
 		caption: t('files_sharing', 'List of files that you shared with others.'),
 
+		emptyTitle: t('files_sharing', 'Nothing shared yet'),
+		emptyCaption: t('files_sharing', 'Files and folders you shared will show up here'),
+
 		icon: AccountGroupSvg,
 		order: 2,
 		parent: sharesViewId,
@@ -87,6 +96,9 @@ export default () => {
 		name: t('files_sharing', 'Shared by link'),
 		caption: t('files_sharing', 'List of files that are shared by link.'),
 
+		emptyTitle: t('files_sharing', 'No shared links'),
+		emptyCaption: t('files_sharing', 'Files and folders you shared by link will show up here'),
+
 		icon: LinkSvg,
 		order: 3,
 		parent: sharesViewId,
@@ -99,7 +111,10 @@ export default () => {
 	Navigation.register({
 		id: deletedSharesViewId,
 		name: t('files_sharing', 'Deleted shares'),
-		caption: t('files_sharing', 'List of shares that you removed yourself from.'),
+		caption: t('files_sharing', 'List of shares you left.'),
+
+		emptyTitle: t('files_sharing', 'No deleted shares'),
+		emptyCaption: t('files_sharing', 'Shares you have left will show up here'),
 
 		icon: DeleteSvg,
 		order: 4,
@@ -115,6 +130,9 @@ export default () => {
 		name: t('files_sharing', 'Pending shares'),
 		caption: t('files_sharing', 'List of unapproved shares.'),
 
+		emptyTitle: t('files_sharing', 'No pending shares'),
+		emptyCaption: t('files_sharing', 'Shares you have received but not approved will show up here'),
+
 		icon: AccountClockSvg,
 		order: 5,
 		parent: sharesViewId,

apps/files_trashbin/src/main.ts

@@ -37,6 +37,9 @@ Navigation.register({
 	name: t('files_trashbin', 'Deleted files'),
 	caption: t('files_trashbin', 'List of files that have been deleted.'),
 
+	emptyTitle: t('files_trashbin', 'No deleted files'),
+	emptyCaption: t('files_trashbin', 'Files and folders you have deleted will show up here'),
+
 	icon: DeleteSvg,
 	order: 50,
 	sticky: true,

dist/comments-comments-app.js.LICENSE.txt

@@ -1,3 +1,5 @@
+/*! For license information please see richEditor.js.LICENSE.txt */
+
 /*! https://mths.be/base64 v1.0.0 by @mathias | MIT license */
 
 /*! https://mths.be/he v1.2.0 by @mathias | MIT license */

dist/core-main.js.LICENSE.txt

@@ -170,6 +170,8 @@
  * http://jquery.org/license
  */
 
+/*! For license information please see NcHeaderMenu.js.LICENSE.txt */
+
 /*! jQuery Migrate v3.4.1 | (c) OpenJS Foundation and other contributors | jquery.org/license */
 
 /*! jQuery UI - v1.13.2 - 2022-07-14

dist/core-unified-search.js.LICENSE.txt

@@ -1,3 +1,5 @@
+/*! For license information please see NcHeaderMenu.js.LICENSE.txt */
+
 /**
  * @copyright 2020, John Molakvoæ <skjnldsv@protonmail.com>
  *

dist/files-main.js.LICENSE.txt

@@ -34,10 +34,14 @@
 
 /*! For license information please see NcAppSettingsDialog.js.LICENSE.txt */
 
+/*! For license information please see NcAppSettingsSection.js.LICENSE.txt */
+
 /*! For license information please see NcBreadcrumb.js.LICENSE.txt */
 
 /*! For license information please see NcBreadcrumbs.js.LICENSE.txt */
 
+/*! For license information please see NcIconSvgWrapper.js.LICENSE.txt */
+
 /*! For license information please see NcInputField.js.LICENSE.txt */
 
 /*! https://mths.be/punycode v1.4.1 by @mathias */

dist/settings-users-8351.js.LICENSE.txt

@@ -5,3 +5,5 @@
 /*! For license information please see NcAppNavigationNewItem.js.LICENSE.txt */
 
 /*! For license information please see NcAppNavigationSettings.js.LICENSE.txt */
+
+/*! For license information please see NcIconSvgWrapper.js.LICENSE.txt */

package-lock.json

@@ -28,7 +28,7 @@
         "@nextcloud/paths": "^2.1.0",
         "@nextcloud/router": "^2.1.2",
         "@nextcloud/sharing": "^0.1.0",
-        "@nextcloud/vue": "^7.12.0",
+        "@nextcloud/vue": "^7.12.1",
         "@nextcloud/vue-dashboard": "^2.0.1",
         "@skjnldsv/sanitize-svg": "^1.0.2",
         "@vueuse/components": "^10.2.0",
@@ -3873,9 +3873,9 @@
       }
     },
     "node_modules/@nextcloud/vue": {
-      "version": "7.12.0",
-      "resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-7.12.0.tgz",
-      "integrity": "sha512-f7x3YFBzc/mt27F7AU+ITLmGCwRpVM0aVTF+DxjaOdelQNTYZBuFJCCOk6nC+x+gg/KWLIxeWm/NWDxToCstbQ==",
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-7.12.1.tgz",
+      "integrity": "sha512-j3wWgUkGEbq6cEdgdiG8VWWgqEd8YvKhK64o1eKbLP3OlVkcrqXfiRmPm1SafPVureGr/Yp/Ty/zIZnHBjxlNg==",
       "dependencies": {
         "@floating-ui/dom": "^1.1.0",
         "@nextcloud/auth": "^2.0.0",
@@ -3897,7 +3897,7 @@
         "emoji-mart-vue-fast": "^12.0.1",
         "escape-html": "^1.0.3",
         "floating-vue": "^1.0.0-beta.19",
-        "focus-trap": "^7.1.0",
+        "focus-trap": "^7.4.3",
         "hammerjs": "^2.0.8",
         "linkify-string": "^4.0.0",
         "md5": "^2.3.0",
@@ -30005,9 +30005,9 @@
       }
     },
     "@nextcloud/vue": {
-      "version": "7.12.0",
-      "resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-7.12.0.tgz",
-      "integrity": "sha512-f7x3YFBzc/mt27F7AU+ITLmGCwRpVM0aVTF+DxjaOdelQNTYZBuFJCCOk6nC+x+gg/KWLIxeWm/NWDxToCstbQ==",
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-7.12.1.tgz",
+      "integrity": "sha512-j3wWgUkGEbq6cEdgdiG8VWWgqEd8YvKhK64o1eKbLP3OlVkcrqXfiRmPm1SafPVureGr/Yp/Ty/zIZnHBjxlNg==",
       "requires": {
         "@floating-ui/dom": "^1.1.0",
         "@nextcloud/auth": "^2.0.0",
@@ -30029,7 +30029,7 @@
         "emoji-mart-vue-fast": "^12.0.1",
         "escape-html": "^1.0.3",
         "floating-vue": "^1.0.0-beta.19",
-        "focus-trap": "^7.1.0",
+        "focus-trap": "^7.4.3",
         "hammerjs": "^2.0.8",
         "linkify-string": "^4.0.0",
         "md5": "^2.3.0",

package.json

@@ -54,7 +54,7 @@
     "@nextcloud/paths": "^2.1.0",
     "@nextcloud/router": "^2.1.2",
     "@nextcloud/sharing": "^0.1.0",
-    "@nextcloud/vue": "^7.12.0",
+    "@nextcloud/vue": "^7.12.1",
     "@nextcloud/vue-dashboard": "^2.0.1",
     "@skjnldsv/sanitize-svg": "^1.0.2",
     "@vueuse/components": "^10.2.0",