diff --git a/frontend/src/components/ContextMenu.vue b/frontend/src/components/ContextMenu.vue new file mode 100644 index 00000000..14663fd9 --- /dev/null +++ b/frontend/src/components/ContextMenu.vue @@ -0,0 +1,47 @@ + + + diff --git a/frontend/src/components/files/ListingItem.vue b/frontend/src/components/files/ListingItem.vue index 75326f4c..932bc4b1 100644 --- a/frontend/src/components/files/ListingItem.vue +++ b/frontend/src/components/files/ListingItem.vue @@ -8,6 +8,7 @@ @dragover="dragOver" @drop="drop" @click="itemClick" + @contextmenu="contextMenu" :data-dir="isDir" :data-type="type" :aria-label="name" @@ -220,6 +221,17 @@ const itemClick = (event: Event | KeyboardEvent) => { else click(event); }; +const contextMenu = (event: MouseEvent) => { + event.preventDefault(); + if ( + fileStore.selected.length === 0 || + event.ctrlKey || + fileStore.selected.indexOf(props.index) === -1 + ) { + click(event); + } +}; + const click = (event: Event | KeyboardEvent) => { if (!singleClick.value && fileStore.selectedCount !== 0) event.preventDefault(); diff --git a/frontend/src/components/prompts/Move.vue b/frontend/src/components/prompts/Move.vue index 6591d09d..0cb0d599 100644 --- a/frontend/src/components/prompts/Move.vue +++ b/frontend/src/components/prompts/Move.vue @@ -5,6 +5,7 @@
+

{{ $t("prompts.moveMessage") }}

{{ t("files.folders") }} -
+
-

{{ t("files.files") }}

-
+

+ {{ t("files.files") }} +

+
+ + + + + + + + + (280); const dragCounter = ref(0); const width = ref(window.innerWidth); const itemWeight = ref(0); +const isContextMenuVisible = ref(false); +const contextMenuPos = ref<{ x: number; y: number }>({ x: 0, y: 0 }); const $showError = inject("$showError")!; @@ -444,7 +502,7 @@ watch(req, () => { onMounted(() => { // Check the columns size for the first time. - colunmsResize(); + columnsResize(); // How much every listing item affects the window height setItemWeight(); @@ -638,7 +696,7 @@ const paste = (event: Event) => { action(overwrite, rename); }; -const colunmsResize = () => { +const columnsResize = () => { // Update the columns size based on the window width. const items_ = css(["#listing.mosaic .item", ".mosaic#listing .item"]); if (items_ === null) return; @@ -841,7 +899,7 @@ const toggleMultipleSelection = () => { }; const windowsResize = throttle(() => { - colunmsResize(); + columnsResize(); width.value = window.innerWidth; // Listing element is not displayed @@ -951,4 +1009,17 @@ const fillWindow = (fit = false) => { // Set the number of displayed items showLimit.value = showQuantity > totalItems ? totalItems : showQuantity; }; + +const showContextMenu = (event: MouseEvent) => { + event.preventDefault(); + isContextMenuVisible.value = true; + contextMenuPos.value = { + x: event.clientX + 8, + y: event.clientY + Math.floor(window.scrollY), + }; +}; + +const hideContextMenu = () => { + isContextMenuVisible.value = false; +};