torsten/miriamgemeinde
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Verbessere die Benutzeroberfläche des EditPagesComponent: Füge aktive Klassen zu Schaltflächen hinzu, um den aktuellen Status der Textformatierungen anzuzeigen. Aktualisiere die Stile für aktive Schaltflächen zur besseren Sichtbarkeit.

Browse Source
This commit is contained in:
Torsten Schulz (local)
2025-10-07 17:37:16 +02:00
parent 5e4471a936
commit b18c911500
1 changed files with 22 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/content/admin/EditPagesComponent.vue
View File

@@ -8,29 +8,29 @@
</select> </select>
</div> </div>
<div class="toolbar"> <div class="toolbar">
<button @click="toggleHeading(3)">H3</button> <button @click="toggleHeading(3)" :class="{ 'is-active': editor && editor.isActive('heading', { level: 3 }) }">H3</button>
<button @click="toggleHeading(4)">H4</button> <button @click="toggleHeading(4)" :class="{ 'is-active': editor && editor.isActive('heading', { level: 4 }) }">H4</button>
<button @click="toggleHeading(5)">H5</button> <button @click="toggleHeading(5)" :class="{ 'is-active': editor && editor.isActive('heading', { level: 5 }) }">H5</button>
<button @click="toggleHeading(6)">H6</button> <button @click="toggleHeading(6)" :class="{ 'is-active': editor && editor.isActive('heading', { level: 6 }) }">H6</button>
<button @click="toggleBold()" width="24" height="24"> <button @click="toggleBold()" :class="{ 'is-active': editor && editor.isActive('bold') }" width="24" height="24">
<BoldIcon width="24" height="24" /> <BoldIcon width="24" height="24" />
</button> </button>
<button @click="toggleItalic()"> <button @click="toggleItalic()" :class="{ 'is-active': editor && editor.isActive('italic') }">
<ItalicIcon width="24" height="24" /> <ItalicIcon width="24" height="24" />
</button> </button>
<button @click="toggleUnderline()"> <button @click="toggleUnderline()" :class="{ 'is-active': editor && editor.isActive('underline') }">
<UnderlineIcon width="24" height="24" /> <UnderlineIcon width="24" height="24" />
</button> </button>
<button @click="toggleStrike()"> <button @click="toggleStrike()" :class="{ 'is-active': editor && editor.isActive('strike') }">
<StrikethroughIcon width="24" height="24" /> <StrikethroughIcon width="24" height="24" />
</button> </button>
<button @click="insertTable()"> <button @click="insertTable()">
<TableIcon width="24" height="24" /> <TableIcon width="24" height="24" />
</button> </button>
<button @click="toggleBulletList()"> <button @click="toggleBulletList()" :class="{ 'is-active': editor && editor.isActive('bulletList') }">
<ListIcon width="24" height="24" /> <ListIcon width="24" height="24" />
</button> </button>
<button @click="toggleOrderedList()"> <button @click="toggleOrderedList()" :class="{ 'is-active': editor && editor.isActive('orderedList') }">
<NumberedListLeftIcon width="24" height="24" /> <NumberedListLeftIcon width="24" height="24" />
</button> </button>
<button @click="openAddImageDialog"> <button @click="openAddImageDialog">
@@ -511,4 +511,16 @@ export default {
.align-top { .align-top {
vertical-align: top; vertical-align: top;
} }
.toolbar button.is-active,
.table-toolbar button.is-active {
background-color: #4CAF50;
color: white;
border: 2px solid #2E7D32;
}
.toolbar button.is-active svg,
.table-toolbar button.is-active svg {
fill: white;
}
</style> </style>