From a39f13e94e3b943f2b073e0aa2dfd9d4e3b5f6b8 Mon Sep 17 00:00:00 2001 From: Ferdinand Thiessen Date: Fri, 26 Jul 2024 01:42:31 +0200 Subject: fix(files): Provide file actions from list entry to make it reactive This fixes non reactive default action text of the name component. Also use download action as default action so that only one place is needed to define how to download a file. Signed-off-by: Ferdinand Thiessen --- apps/files/src/actions/downloadAction.spec.ts | 4 +- apps/files/src/actions/downloadAction.ts | 6 ++- .../src/components/FileEntry/FileEntryActions.vue | 41 ++++------------ .../src/components/FileEntry/FileEntryName.vue | 54 +++++++++++++--------- apps/files/src/components/FileEntryMixin.ts | 42 +++++++++++++++-- apps/files/src/components/FilesListVirtual.vue | 16 +++---- 6 files changed, 89 insertions(+), 74 deletions(-) (limited to 'apps/files/src') diff --git a/apps/files/src/actions/downloadAction.spec.ts b/apps/files/src/actions/downloadAction.spec.ts index 8aca20eb4d4..59e533441be 100644 --- a/apps/files/src/actions/downloadAction.spec.ts +++ b/apps/files/src/actions/downloadAction.spec.ts @@ -4,7 +4,7 @@ */ import { action } from './downloadAction' import { expect } from '@jest/globals' -import { File, Folder, Permission, View, FileAction } from '@nextcloud/files' +import { File, Folder, Permission, View, FileAction, DefaultType } from '@nextcloud/files' const view = { id: 'files', @@ -23,7 +23,7 @@ describe('Download action conditions tests', () => { expect(action.id).toBe('download') expect(action.displayName([], view)).toBe('Download') expect(action.iconSvgInline([], view)).toBe('SvgMock') - expect(action.default).toBeUndefined() + expect(action.default).toBe(DefaultType.DEFAULT) expect(action.order).toBe(30) }) }) diff --git a/apps/files/src/actions/downloadAction.ts b/apps/files/src/actions/downloadAction.ts index 3ba4e23f0cf..cce1e48579a 100644 --- a/apps/files/src/actions/downloadAction.ts +++ b/apps/files/src/actions/downloadAction.ts @@ -4,9 +4,9 @@ */ import type { ShareAttribute } from '../../../files_sharing/src/sharing' -import { FileAction, Permission, Node, FileType, View } from '@nextcloud/files' +import { FileAction, Permission, Node, FileType, View, DefaultType } from '@nextcloud/files' +import { t } from '@nextcloud/l10n' import { generateUrl } from '@nextcloud/router' -import { translate as t } from '@nextcloud/l10n' import ArrowDownSvg from '@mdi/svg/svg/arrow-down.svg?raw' @@ -46,6 +46,8 @@ const isDownloadable = function(node: Node) { export const action = new FileAction({ id: 'download', + default: DefaultType.DEFAULT, + displayName: () => t('files', 'Download'), iconSvgInline: () => ArrowDownSvg, diff --git a/apps/files/src/components/FileEntry/FileEntryActions.vue b/apps/files/src/components/FileEntry/FileEntryActions.vue index 3df4289b1a0..f886d4be3ec 100644 --- a/apps/files/src/components/FileEntry/FileEntryActions.vue +++ b/apps/files/src/components/FileEntry/FileEntryActions.vue @@ -79,10 +79,10 @@ import type { PropType, ShallowRef } from 'vue' import type { FileAction, Node, View } from '@nextcloud/files' -import { DefaultType, NodeStatus, getFileActions } from '@nextcloud/files' +import { DefaultType, NodeStatus } from '@nextcloud/files' import { showError, showSuccess } from '@nextcloud/dialogs' import { translate as t } from '@nextcloud/l10n' -import { defineComponent } from 'vue' +import { defineComponent, inject } from 'vue' import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js' import NcActions from '@nextcloud/vue/dist/Components/NcActions.js' @@ -95,9 +95,6 @@ import CustomElementRender from '../CustomElementRender.vue' import { useNavigation } from '../../composables/useNavigation' import logger from '../../logger.js' -// The registered actions list -const actions = getFileActions() - export default defineComponent({ name: 'FileEntryActions', @@ -136,10 +133,12 @@ export default defineComponent({ setup() { const { currentView } = useNavigation() + const enabledFileActions = inject('enabledFileActions', []) return { // The file list is guaranteed to be only shown with active view currentView: currentView as ShallowRef, + enabledFileActions, } }, @@ -158,23 +157,12 @@ export default defineComponent({ return this.source.status === NodeStatus.LOADING }, - // Sorted actions that are enabled for this node - enabledActions() { - if (this.source.status === NodeStatus.FAILED) { - return [] - } - - return actions - .filter(action => !action.enabled || action.enabled([this.source], this.currentView)) - .sort((a, b) => (a.order || 0) - (b.order || 0)) - }, - // Enabled action that are displayed inline enabledInlineActions() { if (this.filesListWidth < 768 || this.gridMode) { return [] } - return this.enabledActions.filter(action => action?.inline?.(this.source, this.currentView)) + return this.enabledFileActions.filter(action => action?.inline?.(this.source, this.currentView)) }, // Enabled action that are displayed inline with a custom render function @@ -182,12 +170,7 @@ export default defineComponent({ if (this.gridMode) { return [] } - return this.enabledActions.filter(action => typeof action.renderInline === 'function') - }, - - // Default actions - enabledDefaultActions() { - return this.enabledActions.filter(action => !!action?.default) + return this.enabledFileActions.filter(action => typeof action.renderInline === 'function') }, // Actions shown in the menu @@ -202,7 +185,7 @@ export default defineComponent({ // Showing inline first for the NcActions inline prop ...this.enabledInlineActions, // Then the rest - ...this.enabledActions.filter(action => action.default !== DefaultType.HIDDEN && typeof action.renderInline !== 'function'), + ...this.enabledFileActions.filter(action => action.default !== DefaultType.HIDDEN && typeof action.renderInline !== 'function'), ].filter((value, index, self) => { // Then we filter duplicates to prevent inline actions to be shown twice return index === self.findIndex(action => action.id === value.id) @@ -216,7 +199,7 @@ export default defineComponent({ }, enabledSubmenuActions() { - return this.enabledActions + return this.enabledFileActions .filter(action => action.parent) .reduce((arr, action) => { if (!arr[action.parent!]) { @@ -305,14 +288,6 @@ export default defineComponent({ } } }, - execDefaultAction(event) { - if (this.enabledDefaultActions.length > 0) { - event.preventDefault() - event.stopPropagation() - // Execute the first default action if any - this.enabledDefaultActions[0].exec(this.source, this.currentView, this.currentDir) - } - }, isMenu(id: string) { return this.enabledSubmenuActions[id]?.length > 0 diff --git a/apps/files/src/components/FileEntry/FileEntryName.vue b/apps/files/src/components/FileEntry/FileEntryName.vue index 7a6ad2a1051..329ec7fdf19 100644 --- a/apps/files/src/components/FileEntry/FileEntryName.vue +++ b/apps/files/src/components/FileEntry/FileEntryName.vue @@ -37,19 +37,20 @@ + + diff --git a/apps/files/src/components/FileEntryMixin.ts b/apps/files/src/components/FileEntryMixin.ts index d9117053dd8..e18841e159e 100644 --- a/apps/files/src/components/FileEntryMixin.ts +++ b/apps/files/src/components/FileEntryMixin.ts @@ -3,11 +3,11 @@ * SPDX-License-Identifier: AGPL-3.0-or-later */ -import type { ComponentPublicInstance, PropType } from 'vue' +import type { PropType } from 'vue' import type { FileSource } from '../types.ts' import { showError } from '@nextcloud/dialogs' -import { FileType, Permission, Folder, File as NcFile, NodeStatus, Node } from '@nextcloud/files' +import { FileType, Permission, Folder, File as NcFile, NodeStatus, Node, getFileActions } from '@nextcloud/files' import { translate as t } from '@nextcloud/l10n' import { generateUrl } from '@nextcloud/router' import { vOnClickOutside } from '@vueuse/components' @@ -19,10 +19,11 @@ import { getDragAndDropPreview } from '../utils/dragUtils.ts' import { hashCode } from '../utils/hashUtils.ts' import { dataTransferToFileTree, onDropExternalFiles, onDropInternalFiles } from '../services/DropService.ts' import logger from '../logger.js' -import FileEntryActions from '../components/FileEntry/FileEntryActions.vue' Vue.directive('onClickOutside', vOnClickOutside) +const actions = getFileActions() + export default defineComponent({ props: { source: { @@ -47,6 +48,13 @@ export default defineComponent({ }, }, + provide() { + return { + defaultFileAction: this.defaultFileAction, + enabledFileActions: this.enabledFileActions, + } + }, + data() { return { loading: '', @@ -178,6 +186,23 @@ export default defineComponent({ color: `color-mix(in srgb, var(--color-main-text) ${ratio}%, var(--color-text-maxcontrast))`, } }, + + /** + * Sorted actions that are enabled for this node + */ + enabledFileActions() { + if (this.source.status === NodeStatus.FAILED) { + return [] + } + + return actions + .filter(action => !action.enabled || action.enabled([this.source], this.currentView)) + .sort((a, b) => (a.order || 0) - (b.order || 0)) + }, + + defaultFileAction() { + return this.enabledFileActions.find((action) => action.default !== undefined) + }, }, watch: { @@ -261,8 +286,15 @@ export default defineComponent({ return false } - const actions = this.$refs.actions as ComponentPublicInstance - actions.execDefaultAction(event) + if (this.defaultFileAction) { + event.preventDefault() + event.stopPropagation() + // Execute the first default action if any + this.defaultFileAction.exec(this.source, this.currentView, this.currentDir) + } else { + // fallback to open in current tab + window.open(generateUrl('/f/{fileId}', { fileId: this.fileid }), '_self') + } }, openDetailsIfAvailable(event) { diff --git a/apps/files/src/components/FilesListVirtual.vue b/apps/files/src/components/FilesListVirtual.vue index 1b9475333ab..37638aeabe6 100644 --- a/apps/files/src/components/FilesListVirtual.vue +++ b/apps/files/src/components/FilesListVirtual.vue @@ -600,24 +600,26 @@ export default defineComponent({ // Take as much space as possible flex: 1 1 auto; - a { + button.files-list__row-name-link { display: flex; align-items: center; + text-align: start; // Fill cell height and width width: 100%; height: 100%; // Necessary for flex grow to work min-width: 0; + margin: 0; // Already added to the inner text, see rule below &:focus-visible { - outline: none; + outline: none !important; } // Keyboard indicator a11y &:focus .files-list__row-name-text { - outline: 2px solid var(--color-main-text) !important; - border-radius: 20px; + outline: var(--border-width-input-focused) solid var(--color-main-text) !important; + border-radius: var(--border-radius-element); } &:focus:not(:focus-visible) .files-list__row-name-text { outline: none !important; @@ -627,7 +629,7 @@ export default defineComponent({ .files-list__row-name-text { color: var(--color-main-text); // Make some space for the outline - padding: 5px 10px; + padding: var(--default-grid-baseline) calc(2 * var(--default-grid-baseline)); margin-left: -10px; // Align two name and ext display: inline-flex; @@ -791,10 +793,6 @@ tbody.files-list__tbody.files-list__tbody--grid { height: var(--icon-preview-size); } - a.files-list__row-name-link { - height: var(--name-height); - } - .files-list__row-name-text { margin: 0; // Ensure that the outline is not too close to the text. -- cgit v1.2.3