upstream/nextcloud
1
0
Fork 0
mirror of https://github.com/nextcloud/server.git synced 2026-06-14 19:20:35 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 7

fix(files_sharing): ensure share status action works also in grid view

Browse source 
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>
This commit is contained in:
Ferdinand Thiessen 2025-03-13 18:28:32 +01:00
parent 95c22db4d5
commit a7fcd2428e
No known key found for this signature in database
GPG key ID: 45FAE7268762B400
4 changed files with 161 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
apps/files/src/components/FileEntry/FileEntryActions.vue
View file

@ -42,12 +42,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"
@ -58,7 +60,7 @@
<NcLoadingIcon v-if="loading === action.id" :size="18" />
<NcIconSvgWrapper v-else :svg="action.iconSvgInline([source], currentView)" />
</template>
{{ mountType === 'shared' && action.id === 'sharing-status' ? '' : actionDisplayName(action) }}
{{ actionDisplayName(action) }}
</NcActionButton>
<!-- Submenu actions list-->
@ -251,10 +253,6 @@ export default defineComponent({
getBoundariesElement() {
return document.querySelector('.app-content > .files-list')
},
mountType() {
return this.source.attributes['mount-type']
},
},
watch: {
@ -374,13 +372,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>

37
apps/files_sharing/src/actions/sharingStatusAction.scss
View file

@ -1,30 +1,14 @@
/**
* @copyright Copyright (c) 2023 John Molakvoæ <skjnldsv@protonmail.com>
*
* @author John Molakvoæ <skjnldsv@protonmail.com>
*
* @license AGPL-3.0-or-later
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
* SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
* SPDX-License-Identifier: AGPL-3.0-or-later
*/
// Only when rendered inline, when not enough space, this is put in the menu
.action-items > .files-list__row-action-sharing-status {
.action-items > .files-list__row-action-sharing-status {
// put icon at the end of the button
direction: rtl;
// align icons with textless inline actions
padding-right: 0 !important;
// align icons with text-less inline actions
padding-inline-end: 0 !important;
}
svg.sharing-status__avatar {
@ -35,3 +19,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);
}
}

2
cypress/e2e/files/FilesUtils.ts
View file

@ -42,7 +42,7 @@ export const getActionsForFile = (filename: string) => getRowForFile(filename).f
export const getActionButtonForFileId = (fileid: number) => getActionsForFileId(fileid).findByRole('button', { name: 'Actions' })
export const getActionButtonForFile = (filename: string) => getActionsForFile(filename).findByRole('button', { name: 'Actions' })
const searchForActionInRow = (row: JQuery<HTMLElement>, actionId: string): Cypress.Chainable<JQuery<HTMLElement>> => {
const searchForActionInRow = (row: JQuery<HTMLElement>, actionId: string): Cypress.Chainable<JQuery<HTMLElement>> => {
const action = row.find(`[data-cy-files-list-row-action="${CSS.escape(actionId)}"]`)
if (action.length > 0) {
cy.log('Found action in row')

128
cypress/e2e/files_sharing/share-status-action.cy.ts Normal file
View file

@ -0,0 +1,128 @@
/*!
* SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
* SPDX-License-Identifier: AGPL-3.0-or-later
*/
import type { User } from '@nextcloud/cypress'
import { createShare } from './filesSharingUtils.ts'
import { closeSidebar, enableGridMode, getActionButtonForFile, getRowForFile } from '../files/FilesUtils.ts'
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 but there are no shares', () => {
const user = {
language: 'en',
password: 'test1234',
userId: String(Math.floor(Math.random() * 1000)),
} as User
cy.createUser(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: 'Shared' })
.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
before(() => {
cy.createRandomUser().then(($user) => {
sharee = $user
})
cy.createRandomUser().then(($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 inline status action for sharer', () => {
cy.login(user)
cy.visit('/apps/files')
getRowForFile('folder')
.should('be.visible')
.find('[data-cy-files-list-row-actions]')
.findByRole('button', { name: /^Shared with/i })
.should('be.visible')
})
it('Render status action in gridview for sharer', () => {
cy.login(user)
cy.visit('/apps/files')
enableGridMode()
getRowForFile('folder')
.should('be.visible')
getActionButtonForFile('folder')
.click()
cy.findByRole('menu')
.findByRole('menuitem', { name: /shared with/i })
.should('be.visible')
})
it('Render inline status action for sharee', () => {
cy.login(sharee)
cy.visit('/apps/files')
getRowForFile('folder')
.should('be.visible')
.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')
getActionButtonForFile('folder')
.click()
cy.findByRole('menu')
.findByRole('menuitem', { name: `Shared by ${user.userId}` })
.should('be.visible')
})
})
})