tmdinosaurcenter
/
tainacan
mirror of https://github.com/tainacan/tainacan
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fix error where context menu appears with wrong offset when right clicking items list.

This commit is contained in:
mateuswetah 2024-08-20 09:22:46 -03:00
parent ff557baaa9
commit fdf52eafd4
3 changed files with 26 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/views/admin/components/lists/items-list.vue
View File

@ -110,7 +110,9 @@
</div>
</div>
<div class="table-wrapper">
<div
ref="tainacan-admin-items-list-wrapper"
class="table-wrapper">
<!-- Context menu for right click selection -->
<div
@ -2744,11 +2746,27 @@ export default {
}
},
onRightClickItem($event, item) {
if (!this.$adminOptions.itemsSearchSelectionMode) {
if ( !this.$adminOptions.itemsSearchSelectionMode ) {
$event.preventDefault();
this.cursorPosX = $event.clientX;
this.cursorPosY = $event.clientY;
let wrapperOffsetX = 0;
let wrapperOffsetY = 0;
// These elements have 'container-type: inline-size;', thus they need to be positioned relative to parent
if (
( this.viewMode == 'masonry' || this.viewMode == 'records' ) &&
this.$refs &&
this.$refs['tainacan-admin-items-list-wrapper']
) {
const wrapperOffsets = this.$refs['tainacan-admin-items-list-wrapper'].getClientRects();
if ( wrapperOffsets.length && wrapperOffsets[0].top && wrapperOffsets[0].left ) {
wrapperOffsetX = wrapperOffsets[0].left;
wrapperOffsetY = wrapperOffsets[0].top;
}
}
this.cursorPosX = $event.clientX - wrapperOffsetX;
this.cursorPosY = $event.clientY - wrapperOffsetY;
this.contextMenuItem = item;
}
},

3
src/views/admin/scss/_view-mode-masonry.scss
View File

@ -5,7 +5,8 @@
min-height: 50vh;
}
}
.table-wrapper {
.table-wrapper:has(.tainacan-masonry-container),
.table-wrapper:has(.tainacan-masonry-container--skeleton) {
@supports (contain: inline-size) {
container-type: inline-size;
container-name: tablewrapper;

3
src/views/admin/scss/_view-mode-records.scss
View File

@ -5,7 +5,8 @@
min-height: 50vh;
}
}
.table-wrapper {
.table-wrapper:has(.tainacan-records-container)
.table-wrapper:has(.tainacan-records-container--skeleton) {
@supports (contain: inline-size) {
container-type: inline-size;
container-name: tablewrapper;