upstream/nextcloud
1
0
Fork 0
mirror of https://github.com/nextcloud/server.git synced 2026-05-28 04:32:30 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 25

fix(files_sharing): Return focus to trigger element on sharing details close

Browse source 
Signed-off-by: Christopher Ng <chrng8@gmail.com>
This commit is contained in:
Christopher Ng 2024-01-25 19:12:32 -08:00
parent beec3028fb
commit 22ab251cfa
3 changed files with 84 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
apps/files_sharing/src/components/SharingEntryLink.vue
View file

@ -125,7 +125,9 @@
@close="onMenuClose">
<template v-if="share">
<template v-if="share.canEdit && canReshare">
<NcActionButton :disabled="saving" @click.prevent="openSharingDetails">
<NcActionButton :disabled="saving"
:close-after-click="true"
@click.prevent="openSharingDetails">
<template #icon>
<Tune />
</template>

7
apps/files_sharing/src/components/SharingInput.vue
View file

@ -35,7 +35,7 @@
:user-select="true"
:options="options"
@search="asyncFind"
@option:selected="openSharingDetails">
@option:selected="onSelected">
<template #no-options="{ search }">
{{ search ? noResultText : t('files_sharing', 'No recommendations. Start typing.') }}
</template>
@ -155,6 +155,11 @@ export default {
},
methods: {
onSelected(option) {
this.value = null // Reset selected option
this.openSharingDetails(option)
},
async asyncFind(query) {
// save current query to check if we display
// recommendations or search results

128
apps/files_sharing/src/views/SharingTab.vue
View file

@ -28,68 +28,69 @@
<h2>{{ error }}</h2>
</div>
<template v-if="!showSharingDetailsView">
<!-- shares content -->
<div class="sharingTab__content">
<!-- shared with me information -->
<ul>
<SharingEntrySimple v-if="isSharedWithMe" v-bind="sharedWithMe" class="sharing-entry__reshare">
<template #avatar>
<NcAvatar :user="sharedWithMe.user"
:display-name="sharedWithMe.displayName"
class="sharing-entry__avatar" />
</template>
</SharingEntrySimple>
</ul>
<!-- shares content -->
<div v-show="!showSharingDetailsView"
class="sharingTab__content">
<!-- shared with me information -->
<ul>
<SharingEntrySimple v-if="isSharedWithMe" v-bind="sharedWithMe" class="sharing-entry__reshare">
<template #avatar>
<NcAvatar :user="sharedWithMe.user"
:display-name="sharedWithMe.displayName"
class="sharing-entry__avatar" />
</template>
</SharingEntrySimple>
</ul>
<!-- add new share input -->
<SharingInput v-if="!loading"
:can-reshare="canReshare"
:file-info="fileInfo"
:link-shares="linkShares"
:reshare="reshare"
:shares="shares"
@open-sharing-details="toggleShareDetailsView" />
<!-- add new share input -->
<SharingInput v-if="!loading"
:can-reshare="canReshare"
:file-info="fileInfo"
:link-shares="linkShares"
:reshare="reshare"
:shares="shares"
@open-sharing-details="toggleShareDetailsView" />
<!-- link shares list -->
<SharingLinkList v-if="!loading"
ref="linkShareList"
:can-reshare="canReshare"
:file-info="fileInfo"
:shares="linkShares"
@open-sharing-details="toggleShareDetailsView" />
<!-- link shares list -->
<SharingLinkList v-if="!loading"
ref="linkShareList"
:can-reshare="canReshare"
:file-info="fileInfo"
:shares="linkShares"
@open-sharing-details="toggleShareDetailsView" />
<!-- other shares list -->
<SharingList v-if="!loading"
ref="shareList"
:shares="shares"
:file-info="fileInfo"
@open-sharing-details="toggleShareDetailsView" />
<!-- other shares list -->
<SharingList v-if="!loading"
ref="shareList"
:shares="shares"
:file-info="fileInfo"
@open-sharing-details="toggleShareDetailsView" />
<!-- inherited shares -->
<SharingInherited v-if="canReshare && !loading" :file-info="fileInfo" />
<!-- inherited shares -->
<SharingInherited v-if="canReshare && !loading" :file-info="fileInfo" />
<!-- internal link copy -->
<SharingEntryInternal :file-info="fileInfo" />
<!-- internal link copy -->
<SharingEntryInternal :file-info="fileInfo" />
<!-- projects -->
<CollectionList v-if="projectsEnabled && fileInfo"
:id="`${fileInfo.id}`"
type="file"
:name="fileInfo.name" />
</div>
<!-- projects -->
<CollectionList v-if="projectsEnabled && fileInfo"
:id="`${fileInfo.id}`"
type="file"
:name="fileInfo.name" />
</div>
<!-- additional entries, use it with cautious -->
<div v-for="(section, index) in sections"
:ref="'section-' + index"
:key="index"
class="sharingTab__additionalContent">
<component :is="section($refs['section-'+index], fileInfo)" :file-info="fileInfo" />
</div>
</template>
<!-- additional entries, use it with cautious -->
<div v-for="(section, index) in sections"
v-show="!showSharingDetailsView"
:ref="'section-' + index"
:key="index"
class="sharingTab__additionalContent">
<component :is="section($refs['section-'+index], fileInfo)" :file-info="fileInfo" />
</div>
<!-- share details -->
<SharingDetailsTab v-else :file-info="shareDetailsData.fileInfo"
<SharingDetailsTab v-if="showSharingDetailsView"
:file-info="shareDetailsData.fileInfo"
:share="shareDetailsData.share"
@close-sharing-details="toggleShareDetailsView"
@add:share="addShare"
@ -154,6 +155,7 @@ export default {
projectsEnabled: loadState('core', 'projects_enabled', false),
showSharingDetailsView: false,
shareDetailsData: {},
returnFocusElement: null,
}
},
@ -389,11 +391,31 @@ export default {
}
})
},
toggleShareDetailsView(eventData) {
if (!this.showSharingDetailsView) {
const isAction = Array.from(document.activeElement.classList)
.some(className => className.startsWith('action-'))
if (isAction) {
const menuId = document.activeElement.closest('[role="menu"]')?.id
this.returnFocusElement = document.querySelector(`[aria-controls="${menuId}"]`)
} else {
this.returnFocusElement = document.activeElement
}
}
if (eventData) {
this.shareDetailsData = eventData
}
this.showSharingDetailsView = !this.showSharingDetailsView
if (!this.showSharingDetailsView) {
this.$nextTick(() => { // Wait for next tick as the element must be visible to be focused
this.returnFocusElement?.focus()
this.returnFocusElement = null
})
}
},
},
}