147 lines
3.3 KiB
Vue
147 lines
3.3 KiB
Vue
<template>
|
|
<div class="style-selector">
|
|
<div class="style-selector-header">
|
|
<span class="back-arrow" @click="$emit('back')">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
|
|
<path fill-rule="evenodd" d="M11.03 4.272a.75.75 0 0 1 0 1.06L6.31 10.5H20.25a.75.75 0 0 1 0 1.5H6.31l4.72 5.168a.75.75 0 0 1-1.06 1.06l-6-6a.75.75 0 0 1 0-1.06l6-6a.75.75 0 0 1 1.06 0Z" clip-rule="evenodd" />
|
|
</svg>
|
|
</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>
|
|
</template>
|
|
|
|
<script setup>
|
|
import axios from 'axios';
|
|
import { ref, onMounted } from 'vue';
|
|
|
|
const styles = ref([]);
|
|
|
|
const props = defineProps({
|
|
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>
|
|
.style-selector {
|
|
@apply bg-white dark:bg-gray-800 !important;
|
|
@apply border border-gray-300 dark:border-gray-700;
|
|
@apply shadow-lg dark:shadow-none;
|
|
@apply text-gray-900 dark:text-white !important;
|
|
z-index: 1000;
|
|
display: flex;
|
|
flex-direction: column;
|
|
max-width: 100%; /* Adjusted to fit parent */
|
|
max-height: 100%; /* Adjusted to fit parent */
|
|
overflow: hidden;
|
|
}
|
|
|
|
.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;
|
|
@apply dark:text-white;
|
|
color: #333;
|
|
}
|
|
|
|
.back-arrow {
|
|
position: absolute;
|
|
left: 5px; /* Adjusted position */
|
|
font-size: 2em; /* Slightly larger */
|
|
cursor: pointer;
|
|
padding: 10px; /* Larger clickable area */
|
|
color: var(--color-text); /* Adapt to theme */
|
|
}
|
|
|
|
.back-arrow:hover {
|
|
color: var(--color-background); /* Adjust hover color for dark mode */
|
|
background: var(--color-text); /* Adjust hover background for dark mode */
|
|
}
|
|
|
|
.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;
|
|
@apply text-blue-600 dark:text-white;
|
|
}
|
|
|
|
.style-details p {
|
|
margin: 5px 0 0;
|
|
font-size: 0.9em;
|
|
@apply text-gray-600 dark:text-gray-400;
|
|
}
|
|
</style> |