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

Merge branch 'main' into highlight-reply
All checks were successful
ci/woodpecker/push/build-and-publish Pipeline was successful
Details
ci/woodpecker/pr/build-and-publish Pipeline was successful
Details
ci/woodpecker/pull_request_closed/build-and-publish Pipeline was successful
Details

Browse source
This commit is contained in:
SauceyRed 2025-08-04 03:58:23 +02:00
commit a4aabeaa14
Signed by: sauceyred
GPG key ID: 2BF92EB6D8A5CCA7
13 changed files with 102 additions and 65 deletions
Download patch file Download diff file Expand all files Collapse all files

40
components/UserInterface/ContextMenu.vue
View file

@ -1,11 +1,15 @@
<template>
<div v-for="item of props.menuItems" class="context-menu-item" @click="runCallback(item)">
{{ item.name }}
<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>
</div>
</template>
<script lang="ts" setup>
import type { ContextMenuItem } from '~/types/interfaces';
import type { ContextMenuInterface, ContextMenuItem } from '~/types/interfaces';
const props = defineProps<{ menuItems: ContextMenuItem[], pointerX: number, pointerY: number }>();
@ -19,7 +23,8 @@ onMounted(() => {
function runCallback(item: ContextMenuItem) {
removeContextMenu();
const contextMenu = useState<ContextMenuInterface>("contextMenu");
removeContextMenu(contextMenu);
item.callback();
}
@ -31,14 +36,33 @@ function runCallback(item: ContextMenuItem) {
position: absolute;
display: flex;
flex-direction: column;
width: 10dvw;
border: .15rem solid cyan;
background-color: var(--background-color);
text-align: center;
width: 10rem;
border: .1rem solid var(--reply-text-color);
background-color: var(--sidebar-highlighted-background-color);
text-align: left;
z-index: 100;
}
.context-menu-item {
display: flex;
align-items: center;
justify-content: space-between;
height: 2rem;
width: 100%;
color: var(--text-color);
background-color: var(--sidebar-highlighted-background-color);
border: none;
text-align: left;
padding-left: 1rem;
padding-right: 1rem;
}
.context-menu-item:hover {
background-color: rgb(50, 50, 50);
}
.context-menu-item-danger {
color: var(--danger-text-color);
}
</style>

6
components/UserInterface/ResizableSidebar.vue
View file

@ -21,7 +21,7 @@
</template>
<script lang="ts" setup>
import type { ContextMenuItem } from '~/types/interfaces';
import type { ContextMenuInterface, ContextMenuItem } from '~/types/interfaces';
const props = defineProps<{ width?: string, minWidth: string, maxWidth: string, borderSides: "all" | "top" | "right" | "bottom" | "left" | ("top" | "right" | "bottom" | "left")[], localStorageName?: string }>();
@ -31,6 +31,8 @@ const resizableSidebar = ref<HTMLDivElement>();
const widthResizer = ref<HTMLDivElement>();
const storedWidth = ref<string>();
const contextMenu = useState<ContextMenuInterface>("contextMenu");
const menuItems: ContextMenuItem[] = [
{ name: "Reset", callback: () => {
const defaultWidth = props.width ?? props.minWidth;
@ -48,7 +50,7 @@ onMounted(() => {
widthResizer.value.addEventListener("pointerdown", (e) => {
e.preventDefault();
if (e.button == 2) {
createContextMenu(e, menuItems);
showContextMenu(e, contextMenu.value, menuItems);
return
};
document.body.style.cursor = "ew-resize";