gitea_admin/Styleguide
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Replace Meldungen overlay content with sectioned form and checkbox save flow

Browse Source
This commit is contained in:
Mathias Gläser
2026-05-28 11:44:50 +02:00
parent f784bbb9ff
commit 1583c2e892
1 changed files with 59 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
patterns/vsf-list-detailseite.html
+59 -3
View File
@@ -166,10 +166,33 @@
<article class="sg-card sg-delete-confirmation-pattern__floating-card" aria-label="Meldungen anpassen" role="dialog" aria-modal="true" aria-labelledby="vsf-meldungen-overlay-title" data-overlay-dialog="meldungen" hidden>
<div class="sg-card-segment sg-card-segment--body sg-delete-confirmation-pattern__body">
<p class="sg-body sg-delete-confirmation-pattern__text" id="vsf-meldungen-overlay-title"><strong>Meldungen anpassen</strong></p>
<p class="sg-body sg-delete-confirmation-pattern__text">Passe die Anzeige und Priorisierung der Meldungen an.</p>
<p class="sg-body sg-delete-confirmation-pattern__text" id="vsf-meldungen-overlay-title"><strong>Wähle, welche Meldungen angezeigt werden sollen</strong></p>
<section class="sg-form-sections-card__chapter" aria-labelledby="vsf-meldungen-kapitel-1">
<h2 id="vsf-meldungen-kapitel-1" class="sg-strong sg-form-sections-card__chapter-title">Meldungen</h2>
<div class="sg-form-sections-card__option-group" aria-label="Meldungsarten">
<label class="sg-checkbox-field-option sg-body" data-component="checkbox-field" data-component-state="inactive-selectable">
<button class="sg-checkbox-field sg-checkbox-field--inactive-selectable" type="button" role="checkbox" aria-checked="false" aria-label="Meldungsart 1" data-vsf-meldungen-checkbox>
<span class="sg-checkbox-field__mark" aria-hidden="true">✓</span>
</button>
<span>Meldungsart 1</span>
</label>
<label class="sg-checkbox-field-option sg-body" data-component="checkbox-field" data-component-state="inactive-selectable">
<button class="sg-checkbox-field sg-checkbox-field--inactive-selectable" type="button" role="checkbox" aria-checked="false" aria-label="Meldungsart 2" data-vsf-meldungen-checkbox>
<span class="sg-checkbox-field__mark" aria-hidden="true">✓</span>
</button>
<span>Meldungsart 2</span>
</label>
<label class="sg-checkbox-field-option sg-body" data-component="checkbox-field" data-component-state="inactive-selectable">
<button class="sg-checkbox-field sg-checkbox-field--inactive-selectable" type="button" role="checkbox" aria-checked="false" aria-label="Meldungsart 3" data-vsf-meldungen-checkbox>
<span class="sg-checkbox-field__mark" aria-hidden="true">✓</span>
</button>
<span>Meldungsart 3</span>
</label>
</div>
</section>
<div class="sg-delete-confirmation-pattern__actions">
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-overlay-dialog-close>Schließen</button>
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-overlay-dialog-close>Abbrechen</button>
<button class="sg-interaction-element sg-button sg-button--process sg-button--process-inactive" type="button" disabled aria-disabled="true" data-overlay-dialog-close data-vsf-meldungen-save>Speichern</button>
</div>
</div>
</article>
@@ -425,6 +448,39 @@
});
});
const meldungenSaveButton = document.querySelector('[data-vsf-meldungen-save]');
const meldungenCheckboxes = document.querySelectorAll('[data-vsf-meldungen-checkbox]');
const updateMeldungenSaveState = () => {
if (!meldungenSaveButton) {
return;
}
const hasSelection = Array.from(meldungenCheckboxes).some((checkbox) => checkbox.getAttribute('aria-checked') === 'true');
meldungenSaveButton.disabled = !hasSelection;
meldungenSaveButton.setAttribute('aria-disabled', String(!hasSelection));
meldungenSaveButton.classList.toggle('sg-button--process-inactive', !hasSelection);
};
meldungenCheckboxes.forEach((checkbox) => {
checkbox.addEventListener('click', () => {
if (checkbox.disabled) {
return;
}
const option = checkbox.closest('[data-component="checkbox-field"]');
const nextState = checkbox.getAttribute('aria-checked') !== 'true';
checkbox.setAttribute('aria-checked', String(nextState));
checkbox.classList.toggle('sg-form-active', nextState);
checkbox.classList.toggle('sg-checkbox-field--inactive-selectable', !nextState);
if (option) {
option.setAttribute('data-component-state', nextState ? 'active' : 'inactive-selectable');
}
updateMeldungenSaveState();
});
});
updateMeldungenSaveState();
const updatePulldownSelectionState = (demo) => {
const trigger = demo.querySelector('.sg-pulldown-demo__trigger');
const selectableOptions = demo.querySelectorAll('[data-pulldown-option]');