soeren/ai-stylegallery
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

language files combined, settings fixed, "new" badge integrated

Browse Source
This commit is contained in:
SEB Fotografie - soeren
2025-08-01 23:34:41 +02:00
parent b2968f203d
commit 80873877c1
44 changed files with 1319 additions and 358 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
resources/js/Components/StyleSelector.vue
View File

@@ -1,22 +1,24 @@
<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')">&larr;</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 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>
@@ -30,10 +32,6 @@ import { ref, onMounted } from 'vue';
const styles = ref([]);
const props = defineProps({
position: {
type: Object,
required: true,
},
image_id: {
type: Number,
required: true,
@@ -63,19 +61,6 @@ onMounted(() => {
</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;
@@ -83,10 +68,9 @@ onMounted(() => {
z-index: 1000;
display: flex;
flex-direction: column;
max-width: 80%;
max-height: 80%;
max-width: 100%; /* Adjusted to fit parent */
max-height: 100%; /* Adjusted to fit parent */
overflow: hidden;
position: absolute; /* Positionierung innerhalb des Overlays */
}
.style-selector-header {
@@ -106,14 +90,16 @@ onMounted(() => {
.back-arrow {
position: absolute;
left: 10px;
font-size: 1.5em;
left: 5px; /* Adjusted position */
font-size: 2em; /* Slightly larger */
cursor: pointer;
padding: 5px;
padding: 10px; /* Larger clickable area */
color: var(--color-text); /* Adapt to theme */
}
.back-arrow:hover {
color: #007bff;
color: var(--color-background); /* Adjust hover color for dark mode */
background: var(--color-text); /* Adjust hover background for dark mode */
}
.styles-list {