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

Sync styleguide 2026.05.18.1

Browse Source
This commit is contained in:
Mathias Gläser
2026-06-16 07:05:19 +02:00
parent e91e4bcbf3
commit 68449f1d0f
5 changed files with 159 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/styleguide/patterns/delete-confirmation-overlay.html
+127 -62
View File
@@ -83,16 +83,13 @@
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header">
<div class="sg-strong">Alcon Inc.</div>
<div class="sg-sandwich-menu-wrap" data-open="false" data-align="right" data-component="sandwich-menu" data-component-size="small">
<button class="sg-interaction-element sg-sandwich-button sg-sandwich-button--small" type="button" aria-expanded="false" aria-label="Menü öffnen" data-component-part="sandwich-trigger">
<button class="sg-interaction-element sg-sandwich-button sg-sandwich-button--small" type="button" aria-expanded="false" aria-label="Zur Liste hinzufügen" data-component-part="sandwich-trigger" data-overlay-open-dialog="add-to-list">
<span class="sg-sandwich-button__icon" aria-hidden="true">
<span class="sg-sandwich-button__line"></span>
<span class="sg-sandwich-button__line"></span>
<span class="sg-sandwich-button__line"></span>
</span>
</button>
<div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel">
<a class="sg-sandwich-menu-link" href="#!" data-overlay-open-dialog="add-to-list">Zur Liste hinzufügen</a>
</div>
</div>
</header>
<div class="sg-card-segment sg-card-segment--body sg-object-card__content">
@@ -146,8 +143,7 @@
</ul>
<div class="sg-delete-confirmation-pattern__actions">
<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--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 sg-delete-confirmation-pattern__create-list-toggle" type="button" data-create-list-form-toggle aria-expanded="false">Neue Liste anlegen</button>
</div>
</div>
@@ -184,14 +180,16 @@
</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--process sg-button--process-inactive sg-form-sections-card__action" type="submit" disabled aria-disabled="true">Liste anlegen</button>
</div>
</footer>
</form>
</div>
</div>
<footer class="sg-card-segment sg-card-segment--body sg-delete-confirmation-pattern__actions-segment">
<div class="sg-delete-confirmation-pattern__actions sg-delete-confirmation-pattern__actions--footer">
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-overlay-dialog-cancel>Abbrechen</button>
<button class="sg-interaction-element sg-button sg-button--process" type="button" data-overlay-dialog-save>Speichern</button>
</div>
</footer>
</article>
</div>
</section>
@@ -202,33 +200,29 @@
const confirmationSubmitButton = stage.querySelector('[data-overlay-confirmation-submit]');
const expectedConfirmationValue = stage.dataset.overlayConfirmationValue ?? '';
const overlayListButtons = Array.from(stage.querySelectorAll('[data-overlay-list-toggle]'));
const overlayList = stage.querySelector('.sg-delete-confirmation-pattern__list');
const createListForm = stage.querySelector('[data-create-list-form]');
const createListFormToggle = stage.querySelector('[data-create-list-form-toggle]');
const createListTitle = stage.querySelector('[data-create-list-title]');
const createListSegment = stage.querySelector('[data-create-list-form]');
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 createListSubmitButton = stage.querySelector('[data-create-list-form] button[type="submit"]');
const selectedListIds = new Set(
const isAddToListOverlay = stage.dataset.pattern === 'add-to-list-overlay';
const committedListIds = new Set(
(stage.dataset.overlaySelectedLists ?? '')
.split(',')
.map((value) => value.trim())
.filter(Boolean)
);
let draftListIds = new Set(committedListIds);
let resetAddToListDraftState = () => {};
const closeStageDialogs = () => {
const closeStageDialogs = ({ resetAddToListDraft = false } = {}) => {
stage.querySelectorAll('[data-overlay-dialog]').forEach((dialog) => {
dialog.hidden = true;
});
if (createListSegment) {
createListSegment.hidden = true;
}
if (createListFormToggle) {
createListFormToggle.disabled = false;
createListFormToggle.setAttribute('aria-disabled', 'false');
createListFormToggle.setAttribute('aria-expanded', 'false');
createListFormToggle.classList.remove('sg-button--inactive');
createListFormToggle.classList.add('sg-button--active');
if (isAddToListOverlay && resetAddToListDraft) {
resetAddToListDraftState();
}
stage.dataset.dialogOpen = 'false';
};
@@ -236,12 +230,63 @@
const syncOverlayListState = () => {
overlayListButtons.forEach((button) => {
const listId = button.dataset.overlayListId;
const isSelected = Boolean(listId && selectedListIds.has(listId));
const isSelected = Boolean(listId && draftListIds.has(listId));
button.dataset.selected = String(isSelected);
button.setAttribute('aria-pressed', String(isSelected));
});
};
stage.dataset.overlaySelectedLists = Array.from(selectedListIds).join(',');
const bindOverlayListButton = (button) => {
button.addEventListener('click', (event) => {
event.preventDefault();
const listId = button.dataset.overlayListId;
if (!listId) {
return;
}
if (draftListIds.has(listId)) {
draftListIds.delete(listId);
} else {
draftListIds.add(listId);
}
syncOverlayListState();
});
};
const appendCreatedListButton = (title) => {
if (!overlayList) {
return null;
}
const listId = `created-${Date.now()}`;
const listItem = document.createElement('li');
listItem.className = 'sg-delete-confirmation-pattern__list-item';
const button = document.createElement('button');
button.type = 'button';
button.className = 'sg-interaction-element sg-button sg-delete-confirmation-pattern__list-button';
button.dataset.overlayListToggle = '';
button.dataset.overlayListId = listId;
button.dataset.selected = 'true';
button.setAttribute('aria-pressed', 'true');
const icon = document.createElement('span');
icon.className = 'sg-delete-confirmation-pattern__list-icon';
icon.setAttribute('aria-hidden', 'true');
const label = document.createElement('span');
label.className = 'sg-delete-confirmation-pattern__list-label';
label.textContent = title;
button.append(icon, label);
listItem.appendChild(button);
overlayList.appendChild(listItem);
overlayListButtons.push(button);
bindOverlayListButton(button);
return listId;
};
if (confirmationInput && confirmationSubmitButton) {
@@ -259,46 +304,31 @@
if (overlayListButtons.length > 0) {
syncOverlayListState();
overlayListButtons.forEach((button) => {
button.addEventListener('click', (event) => {
event.preventDefault();
const listId = button.dataset.overlayListId;
if (!listId) {
return;
}
if (selectedListIds.has(listId)) {
selectedListIds.delete(listId);
} else {
selectedListIds.add(listId);
}
syncOverlayListState();
});
});
}
if (createListForm && createListFormToggle) {
const updateCreateListButtonState = () => {
if (!createListSubmitButton) {
return;
resetAddToListDraftState = () => {
draftListIds = new Set(committedListIds);
syncOverlayListState();
if (createListSegment) {
createListSegment.hidden = true;
}
if (createListFormToggle) {
createListFormToggle.disabled = false;
createListFormToggle.setAttribute('aria-disabled', 'false');
createListFormToggle.setAttribute('aria-expanded', 'false');
createListFormToggle.classList.remove('sg-button--inactive');
createListFormToggle.classList.add('sg-button--active');
}
if (createListNameInput) {
createListNameInput.value = '';
}
if (createListDescriptionInput) {
createListDescriptionInput.value = '';
}
const hasName = Boolean(createListNameInput?.value.trim());
const hasDescription = Boolean(createListDescriptionInput?.value.trim());
const isActive = hasName || hasDescription;
createListSubmitButton.disabled = !isActive;
createListSubmitButton.setAttribute('aria-disabled', String(!isActive));
createListSubmitButton.classList.toggle('sg-button--process-inactive', !isActive);
};
createListNameInput?.addEventListener('input', updateCreateListButtonState);
createListDescriptionInput?.addEventListener('input', updateCreateListButtonState);
updateCreateListButtonState();
createListFormToggle.addEventListener('click', (event) => {
event.preventDefault();
if (createListSegment) {
@@ -309,11 +339,14 @@
createListFormToggle.classList.add('sg-button--inactive');
createListFormToggle.disabled = true;
createListFormToggle.setAttribute('aria-disabled', 'true');
updateCreateListButtonState();
});
}
closeStageDialogs();
if (isAddToListOverlay) {
resetAddToListDraftState();
}
closeStageDialogs({ resetAddToListDraft: false });
stage.querySelectorAll('[data-overlay-open-dialog]').forEach((link) => {
link.addEventListener('click', (event) => {
@@ -326,7 +359,7 @@
return;
}
closeStageDialogs();
closeStageDialogs({ resetAddToListDraft: target === 'add-to-list' });
dialog.hidden = false;
stage.dataset.dialogOpen = 'true';
@@ -348,6 +381,34 @@
});
});
stage.querySelectorAll('[data-overlay-dialog-cancel]').forEach((button) => {
button.addEventListener('click', (event) => {
event.preventDefault();
closeStageDialogs({ resetAddToListDraft: true });
});
});
stage.querySelectorAll('[data-overlay-dialog-save]').forEach((button) => {
button.addEventListener('click', (event) => {
event.preventDefault();
if (isAddToListOverlay) {
const createdListTitle = createListNameInput?.value.trim() ?? '';
if (createdListTitle) {
const createdListId = appendCreatedListButton(createdListTitle);
if (createdListId) {
draftListIds.add(createdListId);
committedListIds.add(createdListId);
}
}
committedListIds.clear();
draftListIds.forEach((value) => committedListIds.add(value));
stage.dataset.overlaySelectedLists = Array.from(committedListIds).join(',');
}
closeStageDialogs({ resetAddToListDraft: true });
});
});
stage.querySelectorAll('.sg-sandwich-menu-wrap').forEach((wrap) => {
const button = wrap.querySelector('.sg-sandwich-button');
const panel = wrap.querySelector('.sg-sandwich-menu-panel');
@@ -356,6 +417,10 @@
return;
}
if (button.hasAttribute('data-overlay-open-dialog')) {
return;
}
button.addEventListener('click', (event) => {
event.stopPropagation();
const nextState = wrap.dataset.open !== 'true';
docs/styleguide/styles/27-patterns-delete-confirmation.css
+10 -1
View File
@@ -36,6 +36,7 @@
.sg-delete-confirmation-pattern__stage[data-dialog-open="true"] .sg-delete-confirmation-pattern__target::after {
opacity: var(--layout-delete-confirmation-target-dim-opacity);
pointer-events: auto;
}
.sg-delete-confirmation-pattern__floating-card {
@@ -63,7 +64,7 @@
background: var(--surface-delete-confirmation-overlay);
}
.sg-delete-confirmation-pattern__floating-card > .sg-delete-confirmation-pattern__body:has(+ .sg-delete-confirmation-pattern__create-list-segment[hidden]) {
.sg-delete-confirmation-pattern__actions-segment {
border-bottom-left-radius: var(--radius-card);
border-bottom-right-radius: var(--radius-card);
}
@@ -155,6 +156,14 @@
margin-top: var(--layout-delete-confirmation-actions-offset-block-start);
}
.sg-delete-confirmation-pattern__actions--footer {
margin-top: 0;
}
.sg-delete-confirmation-pattern__create-list-toggle {
width: 100%;
}
@media (max-width: 48rem) {
.sg-delete-confirmation-pattern__actions {
flex-wrap: wrap;