[stable33] feat(files): render file list filters in top bar and allow to collapse into overflow menu

apps/files/src/components/BreadCrumbs.vue

@@ -16,17 +16,38 @@
 			v-bind="section"
 			dir="auto"
 			:to="section.to"
-			:force-icon-text="index === 0 && fileListWidth >= 486"
+			:force-icon-text="index === 0 && !isNarrow"
+			force-menu
+			:open.sync="isMenuOpen"
 			:title="titleForSection(index, section)"
 			:aria-description="ariaForSection(section)"
-			@click.native="onClick(section.to)"
 			@dragover.native="onDragOver($event, section.dir)"
 			@drop="onDrop($event, section.dir)">
 			<template v-if="index === 0" #icon>
 				<NcIconSvgWrapper
 					:size="20"
 					:svg="viewIcon" />
 			</template>
+			<template v-if="index === sections.length - 1" #menu-icon>
+				<NcIconSvgWrapper :path="isMenuOpen ? mdiChevronUp : mdiChevronDown" />
+			</template>
+			<template v-if="index === sections.length - 1" #default>
+				<!-- Sharing button -->
+				<NcActionButton v-if="canShare" close-after-click @click="openSharingSidebar">
+					<template #icon>
+						<NcIconSvgWrapper :path="mdiAccountPlus" />
+					</template>
+					{{ t('files', 'Share') }}
+				</NcActionButton>
+
+				<!-- Reload button -->
+				<NcActionButton close-after-click @click="$emit('reload')">
+					<template #icon>
+						<NcIconSvgWrapper :path="mdiReload" />
+					</template>
+					{{ t('files', 'Reload content') }}
+				</NcActionButton>
+			</template>
 		</NcBreadcrumb>
 
 		<!-- Forward the actions slot -->
@@ -40,12 +61,16 @@
 import type { Node } from '@nextcloud/files'
 import type { FileSource } from '../types.ts'
 
+import { mdiAccountPlus, mdiChevronDown, mdiChevronUp, mdiReload } from '@mdi/js'
 import HomeSvg from '@mdi/svg/svg/home.svg?raw'
+import { getCapabilities } from '@nextcloud/capabilities'
 import { showError } from '@nextcloud/dialogs'
-import { Permission } from '@nextcloud/files'
-import { translate as t } from '@nextcloud/l10n'
+import { getSidebar, Permission } from '@nextcloud/files'
+import { t } from '@nextcloud/l10n'
+import { isPublicShare } from '@nextcloud/sharing/public'
 import { basename } from 'path'
-import { defineComponent } from 'vue'
+import { computed, defineComponent, ref, watch } from 'vue'
+import NcActionButton from '@nextcloud/vue/components/NcActionButton'
 import NcBreadcrumb from '@nextcloud/vue/components/NcBreadcrumb'
 import NcBreadcrumbs from '@nextcloud/vue/components/NcBreadcrumbs'
 import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
@@ -64,6 +89,7 @@ export default defineComponent({
 	name: 'BreadCrumbs',
 
 	components: {
+		NcActionButton,
 		NcBreadcrumbs,
 		NcBreadcrumb,
 		NcIconSvgWrapper,
@@ -76,6 +102,8 @@ export default defineComponent({
 		},
 	},
 
+	emits: ['reload'],
+
 	setup() {
 		const activeStore = useActiveStore()
 		const filesStore = useFilesStore()
@@ -84,9 +112,23 @@ export default defineComponent({
 		const selectionStore = useSelectionStore()
 		const uploaderStore = useUploaderStore()
 
-		const fileListWidth = useFileListWidth()
+		const { isNarrow } = useFileListWidth()
 		const views = useViews()
 
+		const isMenuOpen = ref(false)
+		watch(() => activeStore.activeFolder, () => {
+			isMenuOpen.value = false
+		})
+
+		const isSharingEnabled = (getCapabilities() as { files_sharing?: boolean })?.files_sharing !== undefined
+		const isPublic = isPublicShare()
+		const canShare = computed(() => {
+			return isSharingEnabled
+				&& !isPublic
+				&& activeStore.activeFolder
+				&& (activeStore.activeFolder.permissions & Permission.SHARE) !== 0
+		})
+
 		return {
 			activeStore,
 			draggingStore,
@@ -95,8 +137,23 @@ export default defineComponent({
 			selectionStore,
 			uploaderStore,
 
-			fileListWidth,
+			canShare,
+			isMenuOpen,
+			isNarrow,
 			views,
+			openSharingSidebar,
+
+			mdiAccountPlus,
+			mdiChevronDown,
+			mdiChevronUp,
+			mdiReload,
+		}
+
+		/**
+		 * Open the sharing sidebar for the current folder
+		 */
+		function openSharingSidebar() {
+			getSidebar().open(activeStore.activeFolder!, 'sharing')
 		}
 	},
 
@@ -132,7 +189,7 @@ export default defineComponent({
 		wrapUploadProgressBar(): boolean {
 			// if an upload is ongoing, and on small screens / mobile, then
 			// show the progress bar for the upload below breadcrumbs
-			return this.isUploadInProgress && this.fileListWidth < 512
+			return this.isUploadInProgress && this.isNarrow
 		},
 
 		// used to show the views icon for the first breadcrumb
@@ -191,12 +248,6 @@ export default defineComponent({
 			}
 		},
 
-		onClick(to) {
-			if (to?.query?.dir === this.$route.query.dir) {
-				this.$emit('reload')
-			}
-		},
-
 		onDragOver(event: DragEvent, path: string) {
 			if (!event.dataTransfer) {
 				return
@@ -298,8 +349,7 @@ export default defineComponent({
 	flex: 1 1 100% !important;
 	width: 100%;
 	height: 100%;
-	margin-block: 0;
-	margin-inline: 10px;
+	margin: 0;
 	min-width: 0;
 
 	:deep() {

apps/files/src/components/FileEntry.vue

@@ -160,7 +160,7 @@ export default defineComponent({
 		const filesStore = useFilesStore()
 		const renamingStore = useRenamingStore()
 		const selectionStore = useSelectionStore()
-		const filesListWidth = useFileListWidth()
+		const { isNarrow } = useFileListWidth()
 		const {
 			fileId: currentRouteFileId,
 		} = useRouteParameters()
@@ -178,7 +178,7 @@ export default defineComponent({
 			activeView,
 			currentRouteFileId,
 			draggingStore,
-			filesListWidth,
+			isNarrow,
 			filesStore,
 			renamingStore,
 			selectionStore,
@@ -209,10 +209,10 @@ export default defineComponent({
 
 		columns() {
 			// Hide columns if the list is too small
-			if (this.filesListWidth < 512 || this.compact) {
+			if (this.isNarrow || this.compact) {
 				return []
 			}
-			return this.activeView.columns || []
+			return this.activeView?.columns || []
 		},
 
 		mime() {

apps/files/src/components/FileEntry/FileEntryActions.vue

@@ -173,15 +173,17 @@ export default defineComponent({
 		},
 	},
 
+	emits: ['update:opened'],
+
 	setup() {
 		// The file list is guaranteed to be  shown with active view - thus we can set the `loaded` flag
 		const activeStore = useActiveStore()
-		const filesListWidth = useFileListWidth()
+		const { isNarrow } = useFileListWidth()
 		const enabledFileActions = inject<FileAction[]>('enabledFileActions', [])
 		return {
 			activeStore,
 			enabledFileActions,
-			filesListWidth,
+			isNarrow,
 			t,
 		}
 	},
@@ -206,7 +208,7 @@ export default defineComponent({
 
 		// Enabled action that are displayed inline
 		enabledInlineActions() {
-			if (this.filesListWidth < 768 || this.gridMode) {
+			if (this.isNarrow || this.gridMode) {
 				return []
 			}
 			return this.enabledFileActions.filter((action) => {
@@ -302,7 +304,7 @@ export default defineComponent({
 	methods: {
 		actionDisplayName(action: FileAction) {
 			try {
-				if ((this.gridMode || (this.filesListWidth < 768 && action.inline)) && typeof action.title === 'function') {
+				if ((this.gridMode || (this.isNarrow && action.inline)) && typeof action.title === 'function') {
 					// if an inline action is rendered in the menu for
 					// lack of space we use the title first if defined
 					const title = action.title(this.actionContext)

apps/files/src/components/FileEntry/FileEntryName.vue

@@ -39,7 +39,7 @@
 </template>
 
 <script lang="ts">
-import type { FileAction, Node } from '@nextcloud/files'
+import type { FileAction, Node, TFileType } from '@nextcloud/files'
 import type { PropType } from 'vue'
 
 import { showError } from '@nextcloud/dialogs'
@@ -96,7 +96,7 @@ export default defineComponent({
 
 	setup() {
 		// The file list is guaranteed to be only shown with active view - thus we can set the `loaded` flag
-		const filesListWidth = useFileListWidth()
+		const { isNarrow } = useFileListWidth()
 		const renamingStore = useRenamingStore()
 		const userConfigStore = useUserConfigStore()
 		const { activeFolder, activeView } = useActiveStore()
@@ -107,7 +107,7 @@ export default defineComponent({
 			activeFolder,
 			activeView,
 			defaultFileAction,
-			filesListWidth,
+			isNarrow,
 			renamingStore,
 			userConfigStore,
 		}
@@ -119,7 +119,7 @@ export default defineComponent({
 		},
 
 		isRenamingSmallScreen() {
-			return this.isRenaming && this.filesListWidth < 512
+			return this.isRenaming && this.isNarrow
 		},
 
 		newName: {
@@ -133,7 +133,7 @@ export default defineComponent({
 		},
 
 		renameLabel() {
-			const matchLabel: Record<FileType, string> = {
+			const matchLabel: Record<TFileType, string> = {
 				[FileType.File]: t('files', 'Filename'),
 				[FileType.Folder]: t('files', 'Folder name'),
 			}

apps/files/src/components/FileEntryGrid.vue

@@ -113,7 +113,7 @@ export default defineComponent({
 		const filesStore = useFilesStore()
 		const renamingStore = useRenamingStore()
 		const selectionStore = useSelectionStore()
-		const filesListWidth = useFileListWidth()
+		const { isNarrow } = useFileListWidth()
 		const {
 			fileId: currentRouteFileId,
 		} = useRouteParameters()
@@ -131,7 +131,7 @@ export default defineComponent({
 			activeView,
 			currentRouteFileId,
 			draggingStore,
-			filesListWidth,
+			isNarrow,
 			filesStore,
 			renamingStore,
 			selectionStore,

apps/files/src/components/FileEntryMixin.ts

@@ -36,10 +36,6 @@ export default defineComponent({
 			type: Array as PropType<Node[]>,
 			required: true,
 		},
-		filesListWidth: {
-			type: Number,
-			default: 0,
-		},
 		isMtimeAvailable: {
 			type: Boolean,
 			default: false,
@@ -119,7 +115,7 @@ export default defineComponent({
 			return this.renamingStore.renamingNode === this.source
 		},
 		isRenamingSmallScreen() {
-			return this.isRenaming && this.filesListWidth < 512
+			return this.isRenaming && this.isNarrow
 		},
 
 		isActive() {