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 14d897cf..5db88aba 100644 --- a/frontend/src/components/files/ListingItem.vue +++ b/frontend/src/components/files/ListingItem.vue @@ -20,6 +20,7 @@ :aria-label="name" :aria-selected="isSelected" :data-ext="getExtension(name).toLowerCase()" + @contextmenu="contextMenu" >
{ 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 d30aca7b..d92e4b6e 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")!; @@ -438,7 +496,7 @@ watch(req, () => { onMounted(() => { // Check the columns size for the first time. - colunmsResize(); + columnsResize(); // How much every listing item affects the window height setItemWeight(); @@ -642,7 +700,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; @@ -850,7 +908,7 @@ const toggleMultipleSelection = () => { }; const windowsResize = throttle(() => { - colunmsResize(); + columnsResize(); width.value = window.innerWidth; // Listing element is not displayed @@ -977,4 +1035,17 @@ const revealPreviousItem = () => { return true; }; + +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; +};