nicoeri/filebrowser
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: update menu to match requirements

Browse Source
This commit is contained in:
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" ref="contextMenu"
v-show="show" v-show="show"
:style="{ :style="{
top: `${top}px`, top: `${props.pos.y}px`,
left: `${left}px`, left: `${left}px`,
}" }"
> >
@ -19,13 +19,6 @@ const emit = defineEmits(["hide"]);
const props = defineProps<{ show: boolean; pos: { x: number; y: number } }>(); const props = defineProps<{ show: boolean; pos: { x: number; y: number } }>();
const contextMenu = ref<HTMLElement | null>(null); const contextMenu = ref<HTMLElement | null>(null);
const top = computed(() => {
return Math.min(
props.pos.y,
window.innerHeight - (contextMenu.value?.clientHeight ?? 0)
);
});
const left = computed(() => { const left = computed(() => {
return Math.min( return Math.min(
props.pos.x, 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 contextMenu = (event: MouseEvent) => {
const to = setTimeout(() => {
touches.value = 0;
}, 300);
touches.value++;
if (touches.value > 1) return;
event.preventDefault(); event.preventDefault();
if ( if (
fileStore.selected.length < 2 || fileStore.selected.length === 0 ||
event.ctrlKey || event.ctrlKey ||
fileStore.selected.indexOf(props.index) === -1 fileStore.selected.indexOf(props.index) === -1
) { ) {
touches.value--;
clearTimeout(to);
click(event); click(event);
} }
}; };

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

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

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

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