github
/
filebrowser
mirror of https://github.com/filebrowser/filebrowser
1
0
Fork 0
Code Issues Releases Wiki Activity

fix: update menu to match requirements

pull/3343/head
Omar Hussein 2025-02-27 00:41:33 -05:00
parent 3f21a64b4f
commit e65df8b244
4 changed files with 97 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/src/components/ContextMenu.vue
View File

@ -4,7 +4,7 @@
ref="contextMenu"
v-show="show"
:style="{
top: `${top}px`,
top: `${props.pos.y}px`,
left: `${left}px`,
}"
>
@ -19,13 +19,6 @@ const emit = defineEmits(["hide"]);
const props = defineProps<{ show: boolean; pos: { x: number; y: number } }>();
const contextMenu = ref<HTMLElement | null>(null);
const top = computed(() => {
return Math.min(
props.pos.y,
window.innerHeight - (contextMenu.value?.clientHeight ?? 0)
);
});
const left = computed(() => {
return Math.min(
props.pos.x,

11
frontend/src/components/files/ListingItem.vue
View File

@ -222,21 +222,12 @@ const itemClick = (event: Event | KeyboardEvent) => {
};
const contextMenu = (event: MouseEvent) => {
const to = setTimeout(() => {
touches.value = 0;
}, 300);
touches.value++;
if (touches.value > 1) return;
event.preventDefault();
if (
fileStore.selected.length < 2 ||
fileStore.selected.length === 0 ||
event.ctrlKey ||
fileStore.selected.indexOf(props.index) === -1
) {
touches.value--;
clearTimeout(to);
click(event);
}
};

5
frontend/src/css/context-menu.css
View File

@ -1,10 +1,11 @@
.context-menu {
position: fixed;
position: absolute;
background: var(--surfacePrimary);
min-width: 180px;
max-width: 220px;
border: 1px solid var(--borderSecondary);
box-shadow: 0 2px 4px var(--borderPrimary);
z-index: 1000;
z-index: 999;
}
.context-menu .action {

179
frontend/src/views/files/FileListing.vue
View File

@ -205,92 +205,96 @@
</div>
</div>
<span @contextmenu="showContextMenu">
<h2 v-if="fileStore.req?.numDirs ?? false">
{{ t("files.folders") }}
</h2>
<div v-if="fileStore.req?.numDirs ?? false">
<item
v-for="item in dirs"
:key="base64(item.name)"
v-bind:index="item.index"
v-bind:name="item.name"
v-bind:isDir="item.isDir"
v-bind:url="item.url"
v-bind:modified="item.modified"
v-bind:type="item.type"
v-bind:size="item.size"
v-bind:path="item.path"
>
</item>
</div>
<h2 v-if="fileStore.req?.numFiles ?? false">
{{ t("files.files") }}
</h2>
<div v-if="fileStore.req?.numFiles ?? false">
<item
v-for="item in files"
:key="base64(item.name)"
v-bind:index="item.index"
v-bind:name="item.name"
v-bind:isDir="item.isDir"
v-bind:url="item.url"
v-bind:modified="item.modified"
v-bind:type="item.type"
v-bind:size="item.size"
v-bind:path="item.path"
>
</item>
</div>
<context-menu
:show="isContextMenuVisible"
:pos="contextMenuPos"
@hide="hideContextMenu"
<h2 v-if="fileStore.req?.numDirs ?? false">
{{ t("files.folders") }}
</h2>
<div
v-if="fileStore.req?.numDirs ?? false"
@contextmenu="showContextMenu"
>
<item
v-for="item in dirs"
:key="base64(item.name)"
v-bind:index="item.index"
v-bind:name="item.name"
v-bind:isDir="item.isDir"
v-bind:url="item.url"
v-bind:modified="item.modified"
v-bind:type="item.type"
v-bind:size="item.size"
v-bind:path="item.path"
>
<action
v-if="headerButtons.share"
icon="share"
:label="$t('buttons.share')"
show="share"
/>
<action
v-if="headerButtons.rename"
icon="mode_edit"
:label="$t('buttons.rename')"
show="rename"
/>
<action
v-if="headerButtons.copy"
id="copy-button"
icon="content_copy"
:label="$t('buttons.copyFile')"
show="copy"
/>
<action
v-if="headerButtons.move"
id="move-button"
icon="forward"
:label="$t('buttons.moveFile')"
show="move"
/>
<action
v-if="headerButtons.delete"
id="delete-button"
icon="delete"
:label="$t('buttons.delete')"
show="delete"
/>
<action
v-if="headerButtons.download"
icon="file_download"
:label="$t('buttons.download')"
@action="download"
:counter="fileStore.selectedCount"
/>
<action icon="info" :label="$t('buttons.info')" show="info" />
</context-menu>
</span>
</item>
</div>
<h2 v-if="fileStore.req?.numFiles ?? false">
{{ t("files.files") }}
</h2>
<div
v-if="fileStore.req?.numFiles ?? false"
@contextmenu="showContextMenu"
>
<item
v-for="item in files"
:key="base64(item.name)"
v-bind:index="item.index"
v-bind:name="item.name"
v-bind:isDir="item.isDir"
v-bind:url="item.url"
v-bind:modified="item.modified"
v-bind:type="item.type"
v-bind:size="item.size"
v-bind:path="item.path"
>
</item>
</div>
<context-menu
:show="isContextMenuVisible"
:pos="contextMenuPos"
@hide="hideContextMenu"
>
<action
v-if="headerButtons.share"
icon="share"
:label="t('buttons.share')"
show="share"
/>
<action
v-if="headerButtons.rename"
icon="mode_edit"
:label="t('buttons.rename')"
show="rename"
/>
<action
v-if="headerButtons.copy"
id="copy-button"
icon="content_copy"
:label="t('buttons.copyFile')"
show="copy"
/>
<action
v-if="headerButtons.move"
id="move-button"
icon="forward"
:label="t('buttons.moveFile')"
show="move"
/>
<action
v-if="headerButtons.delete"
id="delete-button"
icon="delete"
:label="t('buttons.delete')"
show="delete"
/>
<action
v-if="headerButtons.download"
icon="file_download"
:label="t('buttons.download')"
@action="download"
:counter="fileStore.selectedCount"
/>
<action icon="info" :label="t('buttons.info')" show="info" />
</context-menu>
<input
style="display: none"
@ -1007,10 +1011,11 @@ const fillWindow = (fit = false) => {
};
const showContextMenu = (event: MouseEvent) => {
event.preventDefault();
isContextMenuVisible.value = true;
contextMenuPos.value = {
x: event.clientX,
y: event.clientY,
x: event.clientX + 8,
y: event.clientY + Math.floor(window.scrollY),
};
};