159 lines
3.1 KiB
Vue
159 lines
3.1 KiB
Vue
<template>
|
|
<div class="context-menu-overlay" @click.self="$emit('close')">
|
|
<div class="style-selector" :style="{ top: `${position.y}px`, left: `${position.x}px` }">
|
|
<div class="style-selector-header">
|
|
<span class="back-arrow" @click="$emit('back')">←</span>
|
|
<h3>Verfügbare Stile</h3>
|
|
</div>
|
|
<div class="styles-list">
|
|
<div
|
|
v-for="style in styles"
|
|
:key="style.id"
|
|
class="style-item"
|
|
@click="selectStyle(style)"
|
|
>
|
|
<img :src="'/storage/' + style.preview_image" :alt="style.title" class="style-thumbnail" />
|
|
<div class="style-details">
|
|
<h4>{{ style.title }}</h4>
|
|
<p>{{ style.description }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import axios from 'axios';
|
|
import { ref, onMounted } from 'vue';
|
|
|
|
const styles = ref([]);
|
|
|
|
const props = defineProps({
|
|
position: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
image_id: {
|
|
type: Number,
|
|
required: true,
|
|
},
|
|
});
|
|
|
|
const emits = defineEmits(['styleSelected', 'back', 'close']);
|
|
|
|
const fetchStyles = () => {
|
|
axios.get('/api/styles')
|
|
.then(response => {
|
|
styles.value = response.data;
|
|
})
|
|
.catch(error => {
|
|
console.error('Error fetching styles:', error);
|
|
});
|
|
};
|
|
|
|
const selectStyle = (style) => {
|
|
console.log('StyleSelector.vue: emitting styleSelected with image_id:', props.image_id);
|
|
emits('styleSelected', style, props.image_id);
|
|
};
|
|
|
|
onMounted(() => {
|
|
fetchStyles();
|
|
});
|
|
</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;
|
|
}
|
|
|
|
.style-selector {
|
|
background: white;
|
|
border: 1px solid #ccc;
|
|
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
|
|
z-index: 1000;
|
|
display: flex;
|
|
flex-direction: column;
|
|
max-width: 80%;
|
|
max-height: 80%;
|
|
overflow: hidden;
|
|
position: absolute; /* Positionierung innerhalb des Overlays */
|
|
}
|
|
|
|
.style-selector-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
margin-bottom: 20px;
|
|
padding: 10px;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
|
|
.style-selector-header h3 {
|
|
margin: 0;
|
|
color: #333;
|
|
}
|
|
|
|
.back-arrow {
|
|
position: absolute;
|
|
left: 10px;
|
|
font-size: 1.5em;
|
|
cursor: pointer;
|
|
padding: 5px;
|
|
}
|
|
|
|
.back-arrow:hover {
|
|
color: #007bff;
|
|
}
|
|
|
|
.styles-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 15px;
|
|
padding: 10px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.style-item {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 10px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
transition: background-color 0.3s ease;
|
|
}
|
|
|
|
.style-item:hover {
|
|
background-color: #eef;
|
|
}
|
|
|
|
.style-thumbnail {
|
|
width: 80px;
|
|
height: 80px;
|
|
object-fit: cover;
|
|
border-radius: 4px;
|
|
margin-right: 15px;
|
|
}
|
|
|
|
.style-details h4 {
|
|
margin: 0;
|
|
color: #007bff;
|
|
}
|
|
|
|
.style-details p {
|
|
margin: 5px 0 0;
|
|
font-size: 0.9em;
|
|
color: #666;
|
|
}
|
|
</style> |