marek/creator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
team3
2026-06-18 16:51:38 +02:00
parent d067cb8b54
commit ed006976d9
2 changed files with 63 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
frontend/src/components/TopicSidebar.vue
View File

@@ -24,7 +24,7 @@ const props = defineProps({
ansichtModus: { type: String, default: 'kompakt' }, // kompakt | erklärend
})
const emit = defineEmits(['select', 'create', 'createThema', 'updateQuelle', 'formatClick', 'bausteineClick', 'cancelBausteine', 'resetBausteine', 'deleteTopic', 'cancelGuide', 'deleteGuide', 'dismissError', 'dismissUiError', 'preview', 'openBausteineView', 'openElements', 'togglePin', 'sidebarLeave', 'toggleDark', 'toggleAnsicht', 'setProvider'])
const emit = defineEmits(['select', 'create', 'createThema', 'updateQuelle', 'formatClick', 'bausteineClick', 'cancelBausteine', 'resetBausteine', 'deleteTopic', 'cancelGuide', 'deleteGuide', 'dismissError', 'dismissUiError', 'preview', 'openBausteineView', 'openElements', 'togglePin', 'sidebarLeave', 'toggleDark', 'setAnsicht', 'setProvider'])
// Accordion: höchstens ein Panel offen. IDs: 'bausteine', 'fmt-<Format>', 'topic-<Name>'.
const openPanel = ref(null)
@@ -222,7 +222,7 @@ function confirmDeleteTopic(topic) {
armOrRun('topic-' + topic, () => emit('deleteTopic', topic))
}
// --- Thema-Edit: Klick auf ein Thema wählt es UND klappt die Quellen-Form auf ---
// --- Thema-Edit: Name-Klick wählt nur; das Chevron klappt die Quellen-Form auf/zu (Default zu) ---
const editTopic = ref(null)
const editForm = ref({ type: 'thema', ort: '', spec: '' })
const editLoading = ref(false)
@@ -231,7 +231,7 @@ const canSave = computed(() => {
return true
})
async function onTopicClick(t) {
async function toggleTopicPanel(t) {
emit('select', t)
if (openPanel.value === 'topic-' + t) { openPanel.value = null; return }
openPanel.value = 'topic-' + t
@@ -283,13 +283,22 @@ function saveQuelle() {
:title="dark ? 'Hellmodus' : 'Dunkelmodus'"
@click="emit('toggleDark')"
>{{ dark ? '☀' : '🌙' }}</button>
<button
v-if="selectedTopic"
class="theme-btn ansicht-btn"
:class="{ erkl: ansichtModus === 'erklärend' }"
:title="ansichtModus === 'kompakt' ? 'Ansicht: kompakt — klicken für erklärend' : 'Ansicht: erklärend — klicken für kompakt'"
@click="emit('toggleAnsicht')"
>{{ ansichtModus === 'kompakt' ? 'K' : 'E' }}</button>
<div v-if="selectedTopic" class="ansicht-toggle">
<button :class="{ active: ansichtModus === 'kompakt' }" title="Kurzer Text" @click="emit('setAnsicht', 'kompakt')">
<svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true">
<rect x="2" y="5" width="12" height="1.6" rx="0.8" />
<rect x="2" y="9" width="7" height="1.6" rx="0.8" />
</svg>
</button>
<button :class="{ active: ansichtModus === 'erklärend' }" title="Langer Text" @click="emit('setAnsicht', 'erklärend')">
<svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true">
<rect x="2" y="3" width="12" height="1.4" rx="0.7" />
<rect x="2" y="6.3" width="12" height="1.4" rx="0.7" />
<rect x="2" y="9.6" width="12" height="1.4" rx="0.7" />
<rect x="2" y="12.9" width="8" height="1.4" rx="0.7" />
</svg>
</button>
</div>
<button class="new-topic-toggle" :class="{ active: dlg }" title="Thema erstellen" @click="toggleErstellen">+</button>
</div>
@@ -446,9 +455,9 @@ function saveQuelle() {
:key="t"
:class="{ active: t === selectedTopic, 'li-open': isOpen('topic-' + t) }"
>
<div class="topic-row" @click="onTopicClick(t)">
<span class="topic-name">{{ t }}</span>
<span class="panel-toggle" :class="{ open: isOpen('topic-' + t) }">▾</span>
<div class="topic-row">
<span class="topic-name" @click="emit('select', t)">{{ t }}</span>
<button class="panel-toggle" :class="{ open: isOpen('topic-' + t) }" title="Optionen" @click.stop="toggleTopicPanel(t)">▾</button>
</div>
<div v-if="isOpen('topic-' + t)" class="thema-panel edit-panel" @click.stop>
<p v-if="editLoading" class="dlg-hint">Lade…</p>
@@ -563,8 +572,21 @@ function saveQuelle() {
border-color: var(--accent-border);
}
.new-topic .ansicht-btn { font-weight: 700; }
.new-topic .ansicht-btn.erkl { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
/* Ansicht-Umschalter: zwei Icon-Buttons (kurzer / langer Text) */
.ansicht-toggle { display: inline-flex; }
.new-topic .ansicht-toggle button {
padding: 4px 7px;
background: var(--bg);
color: var(--text-muted);
border: 1px solid var(--border-strong);
display: inline-flex;
align-items: center;
}
.new-topic .ansicht-toggle button:first-child { border-radius: 6px 0 0 6px; }
.new-topic .ansicht-toggle button:last-child { border-radius: 0 6px 6px 0; border-left: none; }
.new-topic .ansicht-toggle button:hover { color: var(--accent-hover); }
.new-topic .ansicht-toggle button.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.ansicht-toggle svg { fill: currentColor; display: block; }
.stats-bar {
display: flex;
@@ -574,12 +596,12 @@ function saveQuelle() {
}
.stat {
position: relative;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 1px;
padding: 4px 2px;
justify-content: center;
padding: 7px 2px 4px;
background: var(--panel-soft);
border: 1px solid var(--border);
border-radius: 6px;
@@ -592,11 +614,18 @@ function saveQuelle() {
color: var(--text);
}
/* Mini-Titel sitzt auf der oberen Kante des Badges (Legenden-Look) */
.stat-label {
font-size: 0.58rem;
position: absolute;
top: -0.42rem;
left: 50%;
transform: translateX(-50%);
padding: 0 3px;
font-size: 0.5rem;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--text-faint);
background: var(--panel);
white-space: nowrap;
}
@@ -688,13 +717,13 @@ function saveQuelle() {
.step-dots {
display: inline-flex;
gap: 5px;
gap: 4px;
flex: 1;
}
.step-dot {
width: 10px;
height: 10px;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--border-strong);
flex-shrink: 0;
@@ -991,8 +1020,8 @@ function saveQuelle() {
/* Erstellen — inline aufklappbar (kein Modal) */
.new-topic-toggle {
flex: 1;
padding: 6px 8px;
margin-left: auto; /* rechtsbündig statt volle Breite */
padding: 6px 12px;
border: 1px solid transparent;
border-radius: 6px;
background: var(--accent);
@@ -1053,8 +1082,15 @@ function saveQuelle() {
.dlg-create { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.dlg-create:disabled { opacity: 0.45; cursor: default; }
/* Thema-Edit-Panel innerhalb der Themen-Liste */
.edit-panel { margin: 0 0.75rem 0.5rem; }
/* Thema-Edit-Panel: dezent in die Liste eingefügt — keine Box, nur ein linker Akzent */
.edit-panel {
margin: 0;
padding: 0.5rem 1rem 0.7rem 1.25rem;
background: var(--accent-soft);
border: none;
border-left: 3px solid var(--accent-border);
border-radius: 0;
}
.dlg-delete { margin-right: auto; color: var(--danger); }
.dlg-delete.armed { background: var(--danger); border-color: var(--danger); color: #fff; font-weight: 700; }
select.dlg-input { cursor: pointer; }