Add Meldungen overlay card with layout-scoped top offset and dialog interactions
This commit is contained in:
@@ -109,57 +109,71 @@
|
||||
|
||||
<div class="sg-vsf-list-detail-page__content">
|
||||
<aside class="sg-vsf-list-detail-page__left-column" aria-label="Benachrichtigungen">
|
||||
<div class="sg-group-card" data-component="group-card">
|
||||
<div class="sg-group-card__header-row">
|
||||
<h2 class="sg-heading-h2 sg-text-on-dark sg-group-card__heading">Meldungen</h2>
|
||||
<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="Meldungsmenü öffnen" data-component-part="sandwich-trigger">
|
||||
<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="Meldungsmenü" data-component-part="sandwich-panel">
|
||||
<a class="sg-sandwich-menu-link" href="#" data-component-part="sandwich-menu-link">Meldungen anpassen</a>
|
||||
<div class="sg-delete-confirmation-pattern sg-vsf-list-detail-page__meldungen-overlay-pattern">
|
||||
<div class="sg-delete-confirmation-pattern__stage" data-pattern="overlay-card" data-dialog-open="false">
|
||||
<div class="sg-group-card sg-delete-confirmation-pattern__target" data-component="group-card">
|
||||
<div class="sg-group-card__header-row">
|
||||
<h2 class="sg-heading-h2 sg-text-on-dark sg-group-card__heading">Meldungen</h2>
|
||||
<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="Meldungsmenü öffnen" data-component-part="sandwich-trigger">
|
||||
<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="Meldungsmenü" data-component-part="sandwich-panel">
|
||||
<a class="sg-sandwich-menu-link" href="#!" data-component-part="sandwich-menu-link" data-vsf-open-dialog="meldungen">Meldungen anpassen</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="sg-interaction-element sg-button sg-button--active sg-vsf-list-detail-page__mobile-toggle" type="button" data-toggle-target="meldungen" data-collapsed-label="Meldungen einblenden" data-expanded-label="Meldungen ausblenden" aria-expanded="true">
|
||||
Meldungen ausblenden
|
||||
</button>
|
||||
<article class="sg-card sg-vsf-list-detail-page__notification-card" data-component="notification-card" data-component-context="group-card">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-red" data-component-part="card-header">
|
||||
<p class="sg-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit posuere, posuere mauris eu, tincidunt lorem. Proin gravida sapien in mattis molestie. Sed non risus augue. Fusce sed odio vitae purus porta efficitur. Integer tempor congue sem, a convallis lorem ornare eget. Nam. Aenean.
|
||||
</p>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-red" data-component-part="card-body">
|
||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">Details</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="sg-card sg-vsf-list-detail-page__notification-card" data-component="notification-card" data-component-context="group-card">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-green" data-component-part="card-header">
|
||||
<p class="sg-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit posuere, posuere mauris eu, tincidunt lorem. Proin gravida sapien in mattis molestie. Sed non risus augue. Fusce sed odio vitae purus porta efficitur. Integer tempor congue sem, a convallis lorem ornare eget. Nam. Aenean.
|
||||
</p>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-green" data-component-part="card-body">
|
||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">Details</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="sg-card sg-card--notification-white sg-vsf-list-detail-page__notification-card" data-component="notification-card" data-component-context="group-card">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--white" data-component-part="card-header">
|
||||
<p class="sg-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit posuere, posuere mauris eu, tincidunt lorem. Proin gravida sapien in mattis molestie. Sed non risus augue. Fusce sed odio vitae purus porta efficitur. Integer tempor congue sem, a convallis lorem ornare eget. Nam. Aenean.
|
||||
</p>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--white" data-component-part="card-body">
|
||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">Details</button>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<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-vsf-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>
|
||||
<div class="sg-delete-confirmation-pattern__actions">
|
||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-vsf-dialog-close>Schließen</button>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<button class="sg-interaction-element sg-button sg-button--active sg-vsf-list-detail-page__mobile-toggle" type="button" data-toggle-target="meldungen" data-collapsed-label="Meldungen einblenden" data-expanded-label="Meldungen ausblenden" aria-expanded="true">
|
||||
Meldungen ausblenden
|
||||
</button>
|
||||
<article class="sg-card sg-vsf-list-detail-page__notification-card" data-component="notification-card" data-component-context="group-card">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-red" data-component-part="card-header">
|
||||
<p class="sg-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit posuere, posuere mauris eu, tincidunt lorem. Proin gravida sapien in mattis molestie. Sed non risus augue. Fusce sed odio vitae purus porta efficitur. Integer tempor congue sem, a convallis lorem ornare eget. Nam. Aenean.
|
||||
</p>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-red" data-component-part="card-body">
|
||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">Details</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="sg-card sg-vsf-list-detail-page__notification-card" data-component="notification-card" data-component-context="group-card">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-green" data-component-part="card-header">
|
||||
<p class="sg-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit posuere, posuere mauris eu, tincidunt lorem. Proin gravida sapien in mattis molestie. Sed non risus augue. Fusce sed odio vitae purus porta efficitur. Integer tempor congue sem, a convallis lorem ornare eget. Nam. Aenean.
|
||||
</p>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-green" data-component-part="card-body">
|
||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">Details</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="sg-card sg-card--notification-white sg-vsf-list-detail-page__notification-card" data-component="notification-card" data-component-context="group-card">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--white" data-component-part="card-header">
|
||||
<p class="sg-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit posuere, posuere mauris eu, tincidunt lorem. Proin gravida sapien in mattis molestie. Sed non risus augue. Fusce sed odio vitae purus porta efficitur. Integer tempor congue sem, a convallis lorem ornare eget. Nam. Aenean.
|
||||
</p>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--white" data-component-part="card-body">
|
||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">Details</button>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
@@ -359,6 +373,48 @@
|
||||
});
|
||||
});
|
||||
|
||||
const closeVsfDialog = (stage) => {
|
||||
if (!stage) {
|
||||
return;
|
||||
}
|
||||
|
||||
stage.querySelectorAll('[data-vsf-dialog]').forEach((dialog) => {
|
||||
dialog.hidden = true;
|
||||
});
|
||||
stage.dataset.dialogOpen = 'false';
|
||||
};
|
||||
|
||||
document.querySelectorAll('[data-vsf-open-dialog]').forEach((link) => {
|
||||
link.addEventListener('click', (event) => {
|
||||
event.preventDefault();
|
||||
|
||||
const stage = link.closest('.sg-delete-confirmation-pattern__stage');
|
||||
if (!stage) {
|
||||
return;
|
||||
}
|
||||
|
||||
const target = link.getAttribute('data-vsf-open-dialog');
|
||||
const dialog = stage.querySelector(`[data-vsf-dialog="${target}"]`);
|
||||
if (!dialog) {
|
||||
return;
|
||||
}
|
||||
|
||||
stage.querySelectorAll('[data-vsf-dialog]').forEach((otherDialog) => {
|
||||
otherDialog.hidden = true;
|
||||
});
|
||||
|
||||
dialog.hidden = false;
|
||||
stage.dataset.dialogOpen = 'true';
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelectorAll('[data-vsf-dialog-close]').forEach((button) => {
|
||||
button.addEventListener('click', () => {
|
||||
const stage = button.closest('.sg-delete-confirmation-pattern__stage');
|
||||
closeVsfDialog(stage);
|
||||
});
|
||||
});
|
||||
|
||||
const updatePulldownSelectionState = (demo) => {
|
||||
const trigger = demo.querySelector('.sg-pulldown-demo__trigger');
|
||||
const selectableOptions = demo.querySelectorAll('[data-pulldown-option]');
|
||||
@@ -507,6 +563,14 @@
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (!event.target.closest('.sg-delete-confirmation-pattern__floating-card') && !event.target.closest('[data-vsf-open-dialog]')) {
|
||||
document.querySelectorAll('.sg-delete-confirmation-pattern__stage').forEach((stage) => {
|
||||
if (stage.dataset.dialogOpen === 'true') {
|
||||
closeVsfDialog(stage);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
window.addEventListener('load', updateObjectCardGridRowState);
|
||||
|
||||
@@ -68,6 +68,15 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sg-vsf-list-detail-page__meldungen-overlay-pattern {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.sg-vsf-list-detail-page__meldungen-overlay-pattern .sg-delete-confirmation-pattern__floating-card {
|
||||
top: calc(var(--spacing-large) * 5);
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.sg-vsf-list-detail-page__mobile-toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user