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

Hide create-list title until form opens

Browse Source
This commit is contained in:
Mathias Gläser
2026-06-15 11:32:17 +02:00
parent 2ff332b34c
commit fab8b2c406
1 changed files with 8 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
patterns/delete-confirmation-overlay.html
+8 -1
View File
@@ -148,7 +148,7 @@
<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-create-list-form-toggle aria-expanded="false">Neue Liste anlegen</button>
</div> </div>
<p class="sg-body sg-delete-confirmation-pattern__text sg-delete-confirmation-pattern__create-list-title">Füge das Unternehmen einer neuen Liste hinzu</p> <p class="sg-body sg-delete-confirmation-pattern__text sg-delete-confirmation-pattern__create-list-title" data-create-list-title hidden>Füge das Unternehmen einer neuen Liste hinzu</p>
<div class="sg-form-sections-card-wrapper sg-delete-confirmation-pattern__create-list-form" data-create-list-form hidden aria-label="Formular mit Abschnitten"> <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"> <form class="sg-form-sections-card" action="#" method="post" aria-label="Neue Liste anlegen Formular">
@@ -201,6 +201,7 @@
const overlayListButtons = Array.from(stage.querySelectorAll('[data-overlay-list-toggle]')); const overlayListButtons = Array.from(stage.querySelectorAll('[data-overlay-list-toggle]'));
const createListForm = stage.querySelector('[data-create-list-form]'); const createListForm = stage.querySelector('[data-create-list-form]');
const createListFormToggle = stage.querySelector('[data-create-list-form-toggle]'); const createListFormToggle = stage.querySelector('[data-create-list-form-toggle]');
const createListTitle = stage.querySelector('[data-create-list-title]');
const createListNameInput = stage.querySelector('[data-create-list-form] input[aria-label="Name"]'); const createListNameInput = stage.querySelector('[data-create-list-form] input[aria-label="Name"]');
const createListDescriptionInput = stage.querySelector('[data-create-list-form] textarea[aria-label="Beschreibung"]'); const createListDescriptionInput = stage.querySelector('[data-create-list-form] textarea[aria-label="Beschreibung"]');
const createListSubmitButton = stage.querySelector('[data-create-list-form] button[type="submit"]'); const createListSubmitButton = stage.querySelector('[data-create-list-form] button[type="submit"]');
@@ -218,6 +219,9 @@
if (createListForm) { if (createListForm) {
createListForm.hidden = true; createListForm.hidden = true;
} }
if (createListTitle) {
createListTitle.hidden = true;
}
if (createListFormToggle) { if (createListFormToggle) {
createListFormToggle.disabled = false; createListFormToggle.disabled = false;
createListFormToggle.setAttribute('aria-disabled', 'false'); createListFormToggle.setAttribute('aria-disabled', 'false');
@@ -297,6 +301,9 @@
createListFormToggle.addEventListener('click', (event) => { createListFormToggle.addEventListener('click', (event) => {
event.preventDefault(); event.preventDefault();
createListForm.hidden = false; createListForm.hidden = false;
if (createListTitle) {
createListTitle.hidden = false;
}
createListFormToggle.setAttribute('aria-expanded', 'true'); createListFormToggle.setAttribute('aria-expanded', 'true');
createListFormToggle.classList.remove('sg-button--active'); createListFormToggle.classList.remove('sg-button--active');
createListFormToggle.classList.add('sg-button--inactive'); createListFormToggle.classList.add('sg-button--inactive');