Scille/parsec-cloud

Open contextual menu (options) with right click

Closed this issue · 1 comments

Open contextual menu (options) with right click
Max-7 commented

Surprsingly easy to do. Here a lit example with FileListItem:

diff --git a/client/src/components/files/FileListItem.vue b/client/src/components/files/FileListItem.vue
index 1cf44b0bc..72dd05bf9 100644
--- a/client/src/components/files/FileListItem.vue
+++ b/client/src/components/files/FileListItem.vue
@@ -19,6 +19,7 @@
       @dblclick="$emit('click', $event, entry)"
       @mouseenter="isHovered = true"
       @mouseleave="isHovered = false"
+      ref="itemRef"
     >
       <div class="file-list-item">
         <div class="file-selected">
@@ -132,6 +133,7 @@ defineExpose({
 });

 const currentPath: Ref<FsPath> = ref('/');
+const itemRef = ref();

 onMounted(async () => {
   if (props.entry.isFile()) {
@@ -139,6 +141,7 @@ onMounted(async () => {
   } else {
     currentPath.value = props.entry.path;
   }
+  itemRef.value.$el.addEventListener('contextmenu', onOptionsClick);
 });

 function isFileSynced(): boolean {
@@ -146,6 +149,7 @@ function isFileSynced(): boolean {
 }

 async function onOptionsClick(event: Event): Promise<void> {
+  event.preventDefault();
   menuOpened.value = true;
   emits('menuClick', event, props.entry, () => {
     menuOpened.value = false;