132 lines
5.1 KiB
Vue
132 lines
5.1 KiB
Vue
<template>
|
|
<div class="context-menu-overlay" @click.self="$emit('close')">
|
|
<div class="context-menu" :style="{ top: `${position.y}px`, left: `${position.x}px` }">
|
|
<div class="context-menu-image-preview">
|
|
<img :src="image.path" :alt="'Selected Image ' + image.name" />
|
|
</div>
|
|
<div class="context-menu-options">
|
|
<ul v-if="!showStyleSelectorView">
|
|
<li @click="$emit('print', image)">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5 inline-block align-middle mr-2">
|
|
<path fill-rule="evenodd" d="M7.875 1.5C6.839 1.5 6 2.34 6 3.375v2.25a.75.75 0 0 0 1.5 0V3.375c0-.39.315-.75.75-.75h6.75c.39 0 .75.36.75.75v2.25a.75.75 0 0 0 1.5 0V3.375c0-1.036-.84-1.875-1.875-1.875H7.875Z" clip-rule="evenodd" />
|
|
<path fill-rule="evenodd" d="M19.875 9a.75.75 0 0 0-.75-.75H4.875a.75.75 0 0 0-.75.75v6.75c0 1.036.84 1.875 1.875 1.875h11.25c1.036 0 1.875-.84 1.875-1.875V9ZM12 12.75a.75.75 0 0 0 0 1.5h.007a.75.75 0 0 0 0-1.5H12Z" clip-rule="evenodd" />
|
|
<path d="M2.25 17.75a.75.75 0 0 0 0 1.5h19.5a.75.75 0 0 0 0-1.5H2.25Z" />
|
|
</svg>
|
|
Drucken
|
|
</li>
|
|
<li @click="showStyleSelectorView = true">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5 inline-block align-middle mr-2">
|
|
<path fill-rule="evenodd" d="M10.788 3.212a.75.75 0 0 0-1.06 0L7.212 5.788a.75.75 0 0 0 0 1.06l1.59 1.59a.75.75 0 0 0 1.06 0l2.576-2.576a.75.75 0 0 0 0-1.06L10.788 3.212ZM15.75 10.5a.75.75 0 0 1 .75-.75h.75a.75.75 0 0 1 0 1.5h-.75a.75.75 0 0 1-.75-.75ZM12 12a.75.75 0 0 1 .75-.75h.75a.75.75 0 0 1 0 1.5H12a.75.75 0 0 1-.75-.75ZM18.75 10.5a.75.75 0 0 1 .75-.75h.75a.75.75 0 0 1 0 1.5h-.75a.75.75 0 0 1-.75-.75ZM12 15a.75.75 0 0 1 .75-.75h.75a.75.75 0 0 1 0 1.5H12a.75.75 0 0 1-.75-.75ZM15.75 15a.75.75 0 0 1 .75-.75h.75a.75.75 0 0 1 0 1.5h-.75a.75.75 0 0 1-.75-.75ZM18.75 15a.75.75 0 0 1 .75-.75h.75a.75.75 0 0 1 0 1.5h-.75a.75.75 0 0 1-.75-.75ZM12 18a.75.75 0 0 1 .75-.75h.75a.75.75 0 0 1 0 1.5H12a.75.75 0 0 1-.75-.75ZM15.75 18a.75.75 0 0 1 .75-.75h.75a.75.75 0 0 1 0 1.5h-.75a.75.75 0 0 1-.75-.75ZM18.75 18a.75.75 0 0 1 .75-.75h.75a.75.75 0 0 1 0 1.5h-.75a.75.75 0 0 1-.75-.75ZM12 21a.75.75 0 0 1 .75-.75h.75a.75.75 0 0 1 0 1.5H12a.75.75 0 0 1-.75-.75Z" clip-rule="evenodd" />
|
|
</svg>
|
|
Stil ändern
|
|
</li>
|
|
<li @click="$emit('close')">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5 inline-block align-middle mr-2">
|
|
<path fill-rule="evenodd" d="M5.47 5.47a.75.75 0 0 1 1.06 0L12 10.94l5.47-5.47a.75.75 0 1 1 1.06 1.06L13.06 12l5.47 5.47a.75.75 0 1 1-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 0 1-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" />
|
|
</svg>
|
|
Schließen
|
|
</li>
|
|
</ul>
|
|
<StyleSelector
|
|
v-else
|
|
:image_id="image.image_id"
|
|
@styleSelected="(style, imageId) => $emit('styleSelected', style, imageId)"
|
|
@back="showStyleSelectorView = false"
|
|
@close="$emit('close')"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue';
|
|
import StyleSelector from './StyleSelector.vue';
|
|
|
|
const props = defineProps({
|
|
position: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
image: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
});
|
|
|
|
const emits = defineEmits(['close', 'print', 'changeStyle', 'styleSelected']);
|
|
|
|
const showStyleSelectorView = ref(false);
|
|
</script>
|
|
|
|
<style scoped>
|
|
.context-menu-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0, 0, 0, 0.5); /* Halbdurchsichtiger Hintergrund */
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
z-index: 999;
|
|
}
|
|
|
|
.context-menu {
|
|
background: var(--color-background);
|
|
border: 1px solid var(--color-text);
|
|
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
|
|
z-index: 1000;
|
|
display: flex;
|
|
flex-direction: row; /* Bild und Menü nebeneinander */
|
|
max-width: 90%;
|
|
height: 80vh; /* 80% of viewport height */
|
|
overflow: hidden;
|
|
}
|
|
|
|
.context-menu-image-preview {
|
|
flex: 6; /* Takes 60% of the space (6 out of 10 parts) */
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 10px;
|
|
}
|
|
|
|
.context-menu-image-preview img {
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
width: 80%; /* 80% width of its container */
|
|
object-fit: contain;
|
|
}
|
|
|
|
.context-menu-options {
|
|
flex: 4; /* Takes 40% of the space (4 out of 10 parts) */
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.context-menu ul {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
border-left: 1px solid var(--color-text); /* Trennlinie zwischen Bild und Menü */
|
|
min-width: 150px; /* Mindestbreite für das Menü */
|
|
}
|
|
|
|
.context-menu li {
|
|
padding: 15px;
|
|
cursor: pointer;
|
|
font-size: 1.1em;
|
|
border-bottom: 1px solid var(--color-text);
|
|
}
|
|
|
|
.context-menu li:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.context-menu li:hover {
|
|
@apply hover:bg-gray-100 dark:hover:bg-gray-700;
|
|
@apply dark:hover:text-gray-400;
|
|
}
|
|
</style> |