Skip to content

Commit 22a9e78

Browse files
susnuxsusnux
committed
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>
1 parent 0446b1b commit 22a9e78

File tree

3 files changed

+88
-50
lines changed

3 files changed

+88
-50
lines changed

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

Lines changed: 20 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -25,12 +25,14 @@
2525
:open.sync="openedMenu"
2626
@close="openedSubmenu = null">
2727
<!-- Default actions list-->
28-
<NcActionButton v-for="action in enabledMenuActions"
28+
<NcActionButton v-for="action, index in enabledMenuActions"
2929
:key="action.id"
3030
:ref="`action-${action.id}`"
31+
class="files-list__row-action"
3132
:class="{
3233
[`files-list__row-action-${action.id}`]: true,
33-
[`files-list__row-action--menu`]: isMenu(action.id)
34+
'files-list__row-action--inline': index < enabledInlineActions.length,
35+
'files-list__row-action--menu': isMenu(action.id)
3436
}"
3537
:close-after-click="!isMenu(action.id)"
3638
:data-cy-files-list-row-action="action.id"
@@ -40,9 +42,11 @@
4042
@click="onActionClick(action)">
4143
<template #icon>
4244
<NcLoadingIcon v-if="loading === action.id" :size="18" />
43-
<NcIconSvgWrapper v-else :svg="action.iconSvgInline([source], currentView)" />
45+
<NcIconSvgWrapper v-else
46+
class="files-list__row-action-icon"
47+
:svg="action.iconSvgInline([source], currentView)" />
4448
</template>
45-
{{ mountType === 'shared' && action.id === 'sharing-status' ? '' : actionDisplayName(action) }}
49+
{{ actionDisplayName(action) }}
4650
</NcActionButton>
4751

4852
<!-- Submenu actions list-->
@@ -235,10 +239,6 @@ export default defineComponent({
235239
getBoundariesElement() {
236240
return document.querySelector('.app-content > .files-list')
237241
},
238-
239-
mountType() {
240-
return this.source.attributes['mount-type']
241-
},
242242
},
243243
244244
watch: {
@@ -358,13 +358,19 @@ main.app-content[style*="mouse-pos-x"] .v-popper__popper {
358358
}
359359
</style>
360360

361-
<style lang="scss" scoped>
362-
:deep(.button-vue--icon-and-text, .files-list__row-action-sharing-status) {
363-
.button-vue__text {
364-
color: var(--color-primary-element);
361+
<style scoped lang="scss">
362+
.files-list__row-action {
363+
--max-icon-size: calc(var(--default-clickable-area) - 2 * var(--default-grid-baseline));
364+
365+
// inline icons can have clickable area size so they still fit into the row
366+
&.files-list__row-action--inline {
367+
--max-icon-size: var(--default-clickable-area);
365368
}
366-
.button-vue__icon {
367-
color: var(--color-primary-element);
369+
370+
// Some icons exceed the default size so we need to enforce a max width and height
371+
.files-list__row-action-icon :deep(svg) {
372+
max-height: var(--max-icon-size) !important;
373+
max-width: var(--max-icon-size) !important;
368374
}
369375
}
370376
</style>

‎apps/files_sharing/src/actions/sharingStatusAction.scss‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,3 +18,12 @@ svg.sharing-status__avatar {
1818
border-radius: 32px;
1919
overflow: hidden;
2020
}
21+
22+
.files-list__row-action-sharing-status {
23+
.button-vue__text {
24+
color: var(--color-primary-element);
25+
}
26+
.button-vue__icon {
27+
color: var(--color-primary-element);
28+
}
29+
}

cypress/e2e/files_sharing/files-inline-action.cy.ts renamed to cypress/e2e/files_sharing/share-status-action.cy.ts

Lines changed: 59 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,13 @@
44
*/
55
import type { User } from '@nextcloud/cypress'
66
import { createShare } from './FilesSharingUtils.ts'
7-
import { closeSidebar, getRowForFile } from '../files/FilesUtils.ts'
7+
import { closeSidebar, enableGridMode, getActionButtonForFile, getRowForFile } from '../files/FilesUtils.ts'
88

9-
describe('files_sharing: Files inline status action', { testIsolation: true }, () => {
9+
describe('files_sharing: Sharing status action', { testIsolation: true }, () => {
1010
/**
1111
* Regression test of https://github.com/nextcloud/server/issues/45723
1212
*/
13-
it('No "shared" tag when user ID is purely numerical', () => {
13+
it('No "shared" tag when user ID is purely numerical but there are no shares', () => {
1414
const user = {
1515
language: 'en',
1616
password: 'test1234',
@@ -29,76 +29,99 @@ describe('files_sharing: Files inline status action', { testIsolation: true }, (
2929
.should('not.exist')
3030
})
3131

32+
it('Render quick option for sharing', () => {
33+
cy.createRandomUser().then((user) => {
34+
cy.mkdir(user, '/folder')
35+
cy.login(user)
36+
37+
cy.visit('/apps/files')
38+
})
39+
40+
getRowForFile('folder')
41+
.should('be.visible')
42+
.find('[data-cy-files-list-row-actions]')
43+
.findByRole('button', { name: /Show sharing options/ })
44+
.should('be.visible')
45+
.click()
46+
47+
// check the click opened the sidebar
48+
cy.get('[data-cy-sidebar]')
49+
.should('be.visible')
50+
// and ensure the sharing tab is selected
51+
.findByRole('tab', { name: 'Sharing', selected: true })
52+
.should('exist')
53+
})
54+
3255
describe('Sharing inline status action handling', () => {
3356
let user: User
3457
let sharee: User
3558

36-
beforeEach(() => {
59+
before(() => {
3760
cy.createRandomUser().then(($user) => {
38-
user = $user
61+
sharee = $user
3962
})
4063
cy.createRandomUser().then(($user) => {
41-
sharee = $user
64+
user = $user
65+
cy.mkdir(user, '/folder')
66+
cy.login(user)
67+
68+
cy.visit('/apps/files')
69+
getRowForFile('folder').should('be.visible')
70+
71+
createShare('folder', sharee.userId)
72+
closeSidebar()
4273
})
74+
cy.logout()
4375
})
4476

45-
it('Render quick option for sharing', () => {
46-
cy.mkdir(user, '/folder')
77+
it('Render inline status action for sharer', () => {
4778
cy.login(user)
48-
4979
cy.visit('/apps/files')
50-
getRowForFile('folder')
51-
.should('be.visible')
5280

5381
getRowForFile('folder')
5482
.should('be.visible')
5583
.find('[data-cy-files-list-row-actions]')
56-
.findByRole('button', { name: /Show sharing options/ })
57-
.should('be.visible')
58-
.click()
59-
60-
// check the click opened the sidebar
61-
cy.get('[data-cy-sidebar]')
84+
.findByRole('button', { name: /^Shared with/i })
6285
.should('be.visible')
63-
// and ensure the sharing tab is selected
64-
.findByRole('tab', { name: 'Sharing', selected: true })
65-
.should('exist')
6686
})
6787

68-
it('Render inline status action for sharer', () => {
69-
cy.mkdir(user, '/folder')
88+
it('Render status action in gridview for sharer', () => {
7089
cy.login(user)
71-
7290
cy.visit('/apps/files')
73-
getRowForFile('folder')
74-
.should('be.visible')
75-
createShare('folder', sharee.userId)
76-
closeSidebar()
91+
enableGridMode()
7792

7893
getRowForFile('folder')
7994
.should('be.visible')
80-
.find('[data-cy-files-list-row-actions]')
81-
.findByRole('button', { name: /^Shared with/i })
95+
getActionButtonForFile('folder')
96+
.click()
97+
cy.findByRole('menu')
98+
.findByRole('menuitem', { name: /shared with/i })
8299
.should('be.visible')
83100
})
84101

85102
it('Render inline status action for sharee', () => {
86-
cy.mkdir(user, '/folder')
87-
cy.login(user)
88-
103+
cy.login(sharee)
89104
cy.visit('/apps/files')
105+
90106
getRowForFile('folder')
91107
.should('be.visible')
92-
createShare('folder', sharee.userId)
93-
closeSidebar()
108+
.find('[data-cy-files-list-row-actions]')
109+
.findByRole('button', { name: `Shared by ${user.userId}` })
110+
.should('be.visible')
111+
})
94112

113+
it('Render status action in grid view for sharee', () => {
95114
cy.login(sharee)
96115
cy.visit('/apps/files')
97116

117+
enableGridMode()
118+
98119
getRowForFile('folder')
99120
.should('be.visible')
100-
.find('[data-cy-files-list-row-actions]')
101-
.findByRole('button', { name: `Shared by ${user.userId}` })
121+
getActionButtonForFile('folder')
122+
.click()
123+
cy.findByRole('menu')
124+
.findByRole('menuitem', { name: `Shared by ${user.userId}` })
102125
.should('be.visible')
103126
})
104127
})

0 commit comments

Comments
 (0)