aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorFerdinand Thiessen <opensource@fthiessen.de>2025-03-13 18:28:32 +0100
committerAndy Scherzinger <info@andy-scherzinger.de>2025-03-19 22:51:32 +0100
commitbe82a4e50210e3a6b9f243a4fbf17157527c79ca (patch)
tree22f4f70d8532012ac41ece70d5310e2f350c0e64
parenta532737e89b6f8533546245b217e67096457b463 (diff)
downloadnextcloud-server-be82a4e50210e3a6b9f243a4fbf17157527c79ca.tar.gz
nextcloud-server-be82a4e50210e3a6b9f243a4fbf17157527c79ca.zip
fix(files_sharing): ensure share status action works also in grid view
Remove some hacks from files app about the *files_sharing* status action, in general not sure why this hack was there instead of being in the correct app - but it broke the grid view. So now the sharing information is also available in grid view. Moreover the icon is fixed in size to not overflow the actions menu. Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
Diffstat
-rw-r--r--apps/files/src/components/FileEntry/FileEntryActions.vue34
-rw-r--r--apps/files_sharing/src/actions/sharingStatusAction.scss9
-rw-r--r--cypress/e2e/files_sharing/share-status-action.cy.ts (renamed from cypress/e2e/files_sharing/files-inline-action.cy.ts)95
3 files changed, 88 insertions, 50 deletions
diff --git a/apps/files/src/components/FileEntry/FileEntryActions.vue b/apps/files/src/components/FileEntry/FileEntryActions.vue
index 4927ae9f1a7..7a94d6da7f7 100644
--- a/apps/files/src/components/FileEntry/FileEntryActions.vue
+++ b/apps/files/src/components/FileEntry/FileEntryActions.vue
@@ -25,12 +25,14 @@
:open.sync="openedMenu"
@close="openedSubmenu = null">
<!-- Default actions list-->
- <NcActionButton v-for="action in enabledMenuActions"
+ <NcActionButton v-for="action, index in enabledMenuActions"
:key="action.id"
:ref="`action-${action.id}`"
+ class="files-list__row-action"
:class="{
[`files-list__row-action-${action.id}`]: true,
- [`files-list__row-action--menu`]: isMenu(action.id)
+ 'files-list__row-action--inline': index < enabledInlineActions.length,
+ 'files-list__row-action--menu': isMenu(action.id)
}"
:close-after-click="!isMenu(action.id)"
:data-cy-files-list-row-action="action.id"
@@ -40,9 +42,11 @@
@click="onActionClick(action)">
<template #icon>
<NcLoadingIcon v-if="loading === action.id" :size="18" />
- <NcIconSvgWrapper v-else :svg="action.iconSvgInline([source], currentView)" />
+ <NcIconSvgWrapper v-else
+ class="files-list__row-action-icon"
+ :svg="action.iconSvgInline([source], currentView)" />
</template>
- {{ mountType === 'shared' && action.id === 'sharing-status' ? '' : actionDisplayName(action) }}
+ {{ actionDisplayName(action) }}
</NcActionButton>
<!-- Submenu actions list-->
@@ -235,10 +239,6 @@ export default defineComponent({
getBoundariesElement() {
return document.querySelector('.app-content > .files-list')
},
-
- mountType() {
- return this.source.attributes['mount-type']
- },
},
watch: {
@@ -358,13 +358,19 @@ main.app-content[style*="mouse-pos-x"] .v-popper__popper {
}
</style>
-<style lang="scss" scoped>
-:deep(.button-vue--icon-and-text, .files-list__row-action-sharing-status) {
- .button-vue__text {
- color: var(--color-primary-element);
+<style scoped lang="scss">
+.files-list__row-action {
+ --max-icon-size: calc(var(--default-clickable-area) - 2 * var(--default-grid-baseline));
+
+ // inline icons can have clickable area size so they still fit into the row
+ &.files-list__row-action--inline {
+ --max-icon-size: var(--default-clickable-area);
}
- .button-vue__icon {
- color: var(--color-primary-element);
+
+ // Some icons exceed the default size so we need to enforce a max width and height
+ .files-list__row-action-icon :deep(svg) {
+ max-height: var(--max-icon-size) !important;
+ max-width: var(--max-icon-size) !important;
}
}
</style>
diff --git a/apps/files_sharing/src/actions/sharingStatusAction.scss b/apps/files_sharing/src/actions/sharingStatusAction.scss
index 33366c42be1..066ba4a0c8e 100644
--- a/apps/files_sharing/src/actions/sharingStatusAction.scss
+++ b/apps/files_sharing/src/actions/sharingStatusAction.scss
@@ -18,3 +18,12 @@ svg.sharing-status__avatar {
border-radius: 32px;
overflow: hidden;
}
+
+.files-list__row-action-sharing-status {
+ .button-vue__text {
+ color: var(--color-primary-element);
+ }
+ .button-vue__icon {
+ color: var(--color-primary-element);
+ }
+}
diff --git a/cypress/e2e/files_sharing/files-inline-action.cy.ts b/cypress/e2e/files_sharing/share-status-action.cy.ts
index 4d7763bd778..1b88810047a 100644
--- a/cypress/e2e/files_sharing/files-inline-action.cy.ts
+++ b/cypress/e2e/files_sharing/share-status-action.cy.ts
@@ -4,13 +4,13 @@
*/
import type { User } from '@nextcloud/cypress'
import { createShare } from './FilesSharingUtils.ts'
-import { closeSidebar, getRowForFile } from '../files/FilesUtils.ts'
+import { closeSidebar, enableGridMode, getActionButtonForFile, getRowForFile } from '../files/FilesUtils.ts'
-describe('files_sharing: Files inline status action', { testIsolation: true }, () => {
+describe('files_sharing: Sharing status action', { testIsolation: true }, () => {
/**
* Regression test of https://github.com/nextcloud/server/issues/45723
*/
- it('No "shared" tag when user ID is purely numerical', () => {
+ it('No "shared" tag when user ID is purely numerical but there are no shares', () => {
const user = {
language: 'en',
password: 'test1234',
@@ -29,76 +29,99 @@ describe('files_sharing: Files inline status action', { testIsolation: true }, (
.should('not.exist')
})
+ it('Render quick option for sharing', () => {
+ cy.createRandomUser().then((user) => {
+ cy.mkdir(user, '/folder')
+ cy.login(user)
+
+ cy.visit('/apps/files')
+ })
+
+ getRowForFile('folder')
+ .should('be.visible')
+ .find('[data-cy-files-list-row-actions]')
+ .findByRole('button', { name: /Show sharing options/ })
+ .should('be.visible')
+ .click()
+
+ // check the click opened the sidebar
+ cy.get('[data-cy-sidebar]')
+ .should('be.visible')
+ // and ensure the sharing tab is selected
+ .findByRole('tab', { name: 'Sharing', selected: true })
+ .should('exist')
+ })
+
describe('Sharing inline status action handling', () => {
let user: User
let sharee: User
- beforeEach(() => {
+ before(() => {
cy.createRandomUser().then(($user) => {
- user = $user
+ sharee = $user
})
cy.createRandomUser().then(($user) => {
- sharee = $user
+ user = $user
+ cy.mkdir(user, '/folder')
+ cy.login(user)
+
+ cy.visit('/apps/files')
+ getRowForFile('folder').should('be.visible')
+
+ createShare('folder', sharee.userId)
+ closeSidebar()
})
+ cy.logout()
})
- it('Render quick option for sharing', () => {
- cy.mkdir(user, '/folder')
+ it('Render inline status action for sharer', () => {
cy.login(user)
-
cy.visit('/apps/files')
- getRowForFile('folder')
- .should('be.visible')
getRowForFile('folder')
.should('be.visible')
.find('[data-cy-files-list-row-actions]')
- .findByRole('button', { name: /Show sharing options/ })
- .should('be.visible')
- .click()
-
- // check the click opened the sidebar
- cy.get('[data-cy-sidebar]')
+ .findByRole('button', { name: /^Shared with/i })
.should('be.visible')
- // and ensure the sharing tab is selected
- .findByRole('tab', { name: 'Sharing', selected: true })
- .should('exist')
})
- it('Render inline status action for sharer', () => {
- cy.mkdir(user, '/folder')
+ it('Render status action in gridview for sharer', () => {
cy.login(user)
-
cy.visit('/apps/files')
- getRowForFile('folder')
- .should('be.visible')
- createShare('folder', sharee.userId)
- closeSidebar()
+ enableGridMode()
getRowForFile('folder')
.should('be.visible')
- .find('[data-cy-files-list-row-actions]')
- .findByRole('button', { name: /^Shared with/i })
+ getActionButtonForFile('folder')
+ .click()
+ cy.findByRole('menu')
+ .findByRole('menuitem', { name: /shared with/i })
.should('be.visible')
})
it('Render inline status action for sharee', () => {
- cy.mkdir(user, '/folder')
- cy.login(user)
-
+ cy.login(sharee)
cy.visit('/apps/files')
+
getRowForFile('folder')
.should('be.visible')
- createShare('folder', sharee.userId)
- closeSidebar()
+ .find('[data-cy-files-list-row-actions]')
+ .findByRole('button', { name: `Shared by ${user.userId}` })
+ .should('be.visible')
+ })
+ it('Render status action in grid view for sharee', () => {
cy.login(sharee)
cy.visit('/apps/files')
+ enableGridMode()
+
getRowForFile('folder')
.should('be.visible')
- .find('[data-cy-files-list-row-actions]')
- .findByRole('button', { name: `Shared by ${user.userId}` })
+ getActionButtonForFile('folder')
+ .click()
+ cy.findByRole('menu')
+ .findByRole('menuitem', { name: `Shared by ${user.userId}` })
.should('be.visible')
})
})
generated by cgit v1.2.3 (git 2.39.1) at 2025-03-23 02:44:28 +0000