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

Implement add-to-list overlay list state

Browse Source
This commit is contained in:
Mathias Gläser
2026-06-15 10:48:46 +02:00
parent 87425b693d
commit abd8864aa9
3 changed files with 125 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/icons/star-outline.svg
+3
View File
@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true">
<path d="m12 2.8 2.89 5.85 6.46.94-4.68 4.56 1.1 6.44L12 17.53 6.23 20.59l1.1-6.44L2.65 9.59l6.46-.94L12 2.8Z" fill="none" stroke="#000000" stroke-width="1.6" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 285 B

patterns/delete-confirmation-overlay.html
+75 -23
View File
@@ -78,7 +78,7 @@
<section id="pattern-add-to-list-overlay" class="sg-delete-confirmation-pattern">
<p class="sg-preview-label">Pattern: Add to List Overlay</p>
<div class="sg-delete-confirmation-pattern__stage sg-delete-confirmation-pattern__host sg-object-card" data-pattern="add-to-list-overlay" data-dialog-open="false" data-overlay-confirmation-value="ADD">
<div class="sg-delete-confirmation-pattern__stage sg-delete-confirmation-pattern__host sg-object-card" data-pattern="add-to-list-overlay" data-dialog-open="false" data-overlay-selected-lists="1,2">
<article class="sg-card sg-object-card sg-delete-confirmation-pattern__target" aria-label="Zu einer Liste hinzuzufügendes Objekt">
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header">
<div class="sg-strong">Alcon Inc.</div>
@@ -108,32 +108,43 @@
<article class="sg-card sg-card--overlay-host sg-delete-confirmation-pattern__floating-card" aria-label="Zur Liste hinzufügen" role="dialog" aria-modal="true" aria-labelledby="add-to-list-title" data-overlay-dialog="add-to-list" 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="add-to-list-title"><strong>Möchtest du Alcon Inc. zu einer Liste hinzufügen?</strong></p>
<p class="sg-body sg-delete-confirmation-pattern__text">Bestätige durch Eingabe von <span class="sg-delete-confirmation-pattern__code">ADD</span>.</p>
<p class="sg-body sg-delete-confirmation-pattern__text" id="add-to-list-title"><strong>Füge dieses Unternehmen einer Liste hinzu</strong></p>
<label class="sg-labeled-input-row sg-delete-confirmation-pattern__input-row">
<span class="sg-label">Bestätigung</span>
<input
class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable"
type="text"
placeholder="ADD"
aria-label="Bestätigung durch ADD"
data-overlay-confirmation-input
>
</label>
<ul class="sg-delete-confirmation-pattern__list" aria-label="Listen">
<li class="sg-delete-confirmation-pattern__list-item">
<button class="sg-interaction-element sg-button sg-delete-confirmation-pattern__list-button" type="button" data-overlay-list-toggle data-overlay-list-id="1" aria-pressed="true">
<span class="sg-delete-confirmation-pattern__list-icon" aria-hidden="true"></span>
<span class="sg-delete-confirmation-pattern__list-label">Liste 1</span>
</button>
</li>
<li class="sg-delete-confirmation-pattern__list-item">
<button class="sg-interaction-element sg-button sg-delete-confirmation-pattern__list-button" type="button" data-overlay-list-toggle data-overlay-list-id="2" aria-pressed="true">
<span class="sg-delete-confirmation-pattern__list-icon" aria-hidden="true"></span>
<span class="sg-delete-confirmation-pattern__list-label">Liste 2</span>
</button>
</li>
<li class="sg-delete-confirmation-pattern__list-item">
<button class="sg-interaction-element sg-button sg-delete-confirmation-pattern__list-button" type="button" data-overlay-list-toggle data-overlay-list-id="3" aria-pressed="false">
<span class="sg-delete-confirmation-pattern__list-icon" aria-hidden="true"></span>
<span class="sg-delete-confirmation-pattern__list-label">Liste 3</span>
</button>
</li>
<li class="sg-delete-confirmation-pattern__list-item">
<button class="sg-interaction-element sg-button sg-delete-confirmation-pattern__list-button" type="button" data-overlay-list-toggle data-overlay-list-id="4" aria-pressed="false">
<span class="sg-delete-confirmation-pattern__list-icon" aria-hidden="true"></span>
<span class="sg-delete-confirmation-pattern__list-label">Liste 4</span>
</button>
</li>
<li class="sg-delete-confirmation-pattern__list-item">
<button class="sg-interaction-element sg-button sg-delete-confirmation-pattern__list-button" type="button" data-overlay-list-toggle data-overlay-list-id="5" aria-pressed="false">
<span class="sg-delete-confirmation-pattern__list-icon" aria-hidden="true"></span>
<span class="sg-delete-confirmation-pattern__list-label">Liste 5</span>
</button>
</li>
</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--process sg-button--process-inactive"
type="button"
disabled
aria-disabled="true"
data-overlay-confirmation-submit
data-overlay-dialog-close
>
Hinzufügen
</button>
</div>
</div>
</article>
@@ -145,6 +156,13 @@
const confirmationInput = stage.querySelector('[data-overlay-confirmation-input]');
const confirmationSubmitButton = stage.querySelector('[data-overlay-confirmation-submit]');
const expectedConfirmationValue = stage.dataset.overlayConfirmationValue ?? '';
const overlayListButtons = Array.from(stage.querySelectorAll('[data-overlay-list-toggle]'));
const selectedListIds = new Set(
(stage.dataset.overlaySelectedLists ?? '')
.split(',')
.map((value) => value.trim())
.filter(Boolean)
);
const closeStageDialogs = () => {
stage.querySelectorAll('[data-overlay-dialog]').forEach((dialog) => {
@@ -153,6 +171,17 @@
stage.dataset.dialogOpen = 'false';
};
const syncOverlayListState = () => {
overlayListButtons.forEach((button) => {
const listId = button.dataset.overlayListId;
const isSelected = Boolean(listId && selectedListIds.has(listId));
button.dataset.selected = String(isSelected);
button.setAttribute('aria-pressed', String(isSelected));
});
stage.dataset.overlaySelectedLists = Array.from(selectedListIds).join(',');
};
if (confirmationInput && confirmationSubmitButton) {
const updateConfirmationState = () => {
const isValid = confirmationInput.value === expectedConfirmationValue;
@@ -166,6 +195,29 @@
updateConfirmationState();
}
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();
});
});
}
closeStageDialogs();
stage.querySelectorAll('[data-overlay-open-dialog]').forEach((link) => {
styles/27-patterns-delete-confirmation.css
+47
View File
@@ -64,6 +64,53 @@
background: var(--surface-delete-confirmation-overlay);
}
.sg-delete-confirmation-pattern__list {
display: grid;
gap: var(--spacing-small);
margin: 0;
padding: 0;
list-style: none;
}
.sg-delete-confirmation-pattern__list-item {
margin: 0;
}
.sg-delete-confirmation-pattern__list-button {
display: inline-flex;
width: 100%;
justify-content: flex-start;
gap: var(--spacing-small);
color: var(--text-delete-confirmation-overlay);
background: var(--surface-control-inactive);
}
.sg-delete-confirmation-pattern__list-button[data-selected="true"] {
background: var(--surface-control-active);
}
.sg-delete-confirmation-pattern__list-button[data-selected="false"] {
background: var(--surface-control-inactive);
}
.sg-delete-confirmation-pattern__list-icon {
display: block;
flex: 0 0 auto;
width: 1rem;
height: 1rem;
background-color: currentColor;
}
.sg-delete-confirmation-pattern__list-button[data-selected="true"] .sg-delete-confirmation-pattern__list-icon {
-webkit-mask: url("../assets/icons/star-filled.svg") no-repeat center / contain;
mask: url("../assets/icons/star-filled.svg") no-repeat center / contain;
}
.sg-delete-confirmation-pattern__list-button[data-selected="false"] .sg-delete-confirmation-pattern__list-icon {
-webkit-mask: url("../assets/icons/star-outline.svg") no-repeat center / contain;
mask: url("../assets/icons/star-outline.svg") no-repeat center / contain;
}
.sg-delete-confirmation-pattern__text {
margin: 0;
color: var(--text-delete-confirmation-overlay);