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

Add create-list form reveal to overlay

Browse Source
This commit is contained in:
Mathias Gläser
2026-06-15 11:09:31 +02:00
parent 769c832076
commit e34285df39
2 changed files with 55 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
patterns/delete-confirmation-overlay.html
+51
View File
@@ -143,7 +143,47 @@
</li>
</ul>
<div class="sg-form-sections-card-wrapper sg-delete-confirmation-pattern__create-list-form" data-create-list-form hidden aria-label="Formular mit Abschnitten">
<form class="sg-form-sections-card" action="#" method="post" aria-label="Neue Liste anlegen Formular">
<div class="sg-form-sections-card__body" data-pattern-part="form-body">
<section class="sg-form-sections-card__chapter" aria-label="Neue Liste">
<div class="sg-form-sections-card__field-group">
<label class="sg-labeled-input-row">
<span class="sg-label">Name</span>
<input
class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable"
type="text"
placeholder="Name eingeben"
aria-label="Name"
maxlength="80"
>
</label>
<label class="sg-labeled-input-row">
<span class="sg-label">Beschreibung</span>
<textarea
class="sg-input-multi-line sg-form-inactive-selectable"
rows="4"
placeholder="Beschreibung eingeben"
aria-label="Beschreibung"
maxlength="350"
></textarea>
</label>
</div>
</section>
</div>
<footer class="sg-form-sections-card__actions-segment" data-pattern-part="form-actions-segment">
<div class="sg-form-sections-card__actions" data-pattern-part="form-actions">
<button class="sg-interaction-element sg-button sg-button--active sg-form-sections-card__action" type="button">Zuruecksetzen</button>
<button class="sg-interaction-element sg-button sg-button--process sg-button--process-inactive sg-form-sections-card__action" type="submit" disabled aria-disabled="true">Liste anlegen</button>
</div>
</footer>
</form>
</div>
<div class="sg-delete-confirmation-pattern__actions">
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-create-list-form-toggle aria-expanded="false">Neue Liste anlegen</button>
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-overlay-dialog-close>Abbrechen</button>
</div>
</div>
@@ -157,6 +197,8 @@
const confirmationSubmitButton = stage.querySelector('[data-overlay-confirmation-submit]');
const expectedConfirmationValue = stage.dataset.overlayConfirmationValue ?? '';
const overlayListButtons = Array.from(stage.querySelectorAll('[data-overlay-list-toggle]'));
const createListForm = stage.querySelector('[data-create-list-form]');
const createListFormToggle = stage.querySelector('[data-create-list-form-toggle]');
const selectedListIds = new Set(
(stage.dataset.overlaySelectedLists ?? '')
.split(',')
@@ -218,6 +260,15 @@
});
}
if (createListForm && createListFormToggle) {
createListFormToggle.addEventListener('click', (event) => {
event.preventDefault();
createListForm.hidden = false;
createListFormToggle.setAttribute('aria-expanded', 'true');
createListFormToggle.disabled = true;
});
}
closeStageDialogs();
stage.querySelectorAll('[data-overlay-open-dialog]').forEach((link) => {