gorb/frontend
4
0
Fork 1
Code Issues 14 Pull requests 3 Projects Releases Packages 1 Wiki Activity Actions

feat: replace context menu items splicing with implementation of context menu item sections
All checks were successful
ci/woodpecker/push/build-and-publish Pipeline was successful
Details
ci/woodpecker/pr/build-and-publish Pipeline was successful
Details

Browse source
This commit is contained in:
SauceyRed 2025-08-16 14:25:11 +02:00
commit 0f02142eb1
Signed by: sauceyred
GPG key ID: 2BF92EB6D8A5CCA7
9 changed files with 85 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

26
components/UserInterface/ContextMenu.vue
View file

@ -1,17 +1,23 @@
<template>
<div id="context-menu">
<button v-for="item of props.menuItems" class="context-menu-item"
:class="'context-menu-item-' + item.type"
@click="runCallback(item)">
{{ item.name }} <Icon v-if="item.icon" :name="item.icon" />
</button>
<template v-for="(section, index) of props.menuSections">
<div class="context-menu-section">
<button v-for="item of section.items" class="context-menu-item"
:class="'context-menu-item-' + item.type"
@click="runCallback(item)">
{{ item.name }} <Icon v-if="item.icon" :name="item.icon" />
</button>
</div>
<VerticalSpacer v-if="index < props.menuSections.length - 1" class="context-menu-section-spacer" />
</template>
</div>
</template>
<script lang="ts" setup>
import type { ContextMenuInterface, ContextMenuItem } from '~/types/interfaces';
import type { ContextMenuInterface, ContextMenuItem, ContextMenuSection } from '~/types/interfaces';
import VerticalSpacer from './VerticalSpacer.vue';
const props = defineProps<{ menuItems: ContextMenuItem[], pointerX: number, pointerY: number }>();
const props = defineProps<{ menuSections: ContextMenuSection[], pointerX: number, pointerY: number }>();
onMounted(() => {
const contextMenu = document.getElementById("context-menu");
@ -42,7 +48,7 @@ function runCallback(item: ContextMenuItem) {
flex-direction: column;
width: 10rem;
border: .1rem solid var(--reply-text-color);
background-color: var(--sidebar-highlighted-background-color);
background-color: var(--popup-background-color);
text-align: left;
z-index: 100;
}
@ -69,4 +75,8 @@ function runCallback(item: ContextMenuItem) {
color: var(--danger-text-color);
}
.context-menu-section-spacer {
margin: 0 !important;
}
</style>