From a40a45160d4efe1e1ebb8c43ee3216a2f758558c Mon Sep 17 00:00:00 2001 From: Georgieva Date: Tue, 10 Sep 2024 15:00:43 +0300 Subject: [PATCH] feat(ui5-li-notification-group): add new features - growing and sticky header (#9783) * feat(ui5-li-notification-group): add new features - growing and sticky header According to the new design the notification groups should be able to grow by pressing "More" button. Then the "load-more" event will be fired and more notifications can be loaded. The other new feature is the sticky header, which stays on top of the popover with notifications, when the user scrolls down. When next group is reached the sticky header will be replaced with the new one corresponding to the currently visible group. JIRA: BGSOFUIRODOPI-3224 --------- Co-authored-by: Teodor Taushanov --- .../fiori/src/NotificationListGroupItem.hbs | 4 +- .../fiori/src/NotificationListGroupItem.ts | 28 ++ packages/fiori/src/NotificationListItem.ts | 3 +- .../fiori/src/themes/NotificationList.css | 4 + .../src/themes/NotificationListGroupItem.css | 33 ++- .../base/NotificationListItem-parameters.css | 1 + .../NotificationListItem-parameters.css | 3 +- .../NotificationListItem-parameters.css | 3 +- .../NotificationListItem-parameters.css | 3 +- .../NotificationListItem-parameters.css | 3 +- .../test/pages/NotificationListGroupItem.html | 240 +++++++++++++++++- .../test/pages/NotificationListItem.html | 15 ++ .../styles/NotificationListGroupItem.css | 33 +++ packages/main/src/List.hbs | 3 +- packages/main/src/List.ts | 2 + .../src/types/NotificationListGrowingMode.ts | 20 ++ .../NotificationList/InShellBar/sample.html | 2 +- 17 files changed, 390 insertions(+), 10 deletions(-) create mode 100644 packages/main/src/types/NotificationListGrowingMode.ts diff --git a/packages/fiori/src/NotificationListGroupItem.hbs b/packages/fiori/src/NotificationListGroupItem.hbs index 99baf070c552..5b4a6a10e976 100644 --- a/packages/fiori/src/NotificationListGroupItem.hbs +++ b/packages/fiori/src/NotificationListGroupItem.hbs @@ -43,7 +43,9 @@ id="{{_id}}-notificationsList" class="ui5-nli-group-items" role="list" - aria-labelledby="{{_id}}-title-text"> + aria-labelledby="{{_id}}-title-text" + growing={{growing}} + @ui5-load-more="{{_onLoadMore}}"> diff --git a/packages/fiori/src/NotificationListGroupItem.ts b/packages/fiori/src/NotificationListGroupItem.ts index 9a2b8900cce1..9a112ffa39c4 100644 --- a/packages/fiori/src/NotificationListGroupItem.ts +++ b/packages/fiori/src/NotificationListGroupItem.ts @@ -8,6 +8,7 @@ import event from "@ui5/webcomponents-base/dist/decorators/event.js"; import Button from "@ui5/webcomponents/dist/Button.js"; import BusyIndicator from "@ui5/webcomponents/dist/BusyIndicator.js"; import Icon from "@ui5/webcomponents/dist/Icon.js"; +import type NotificationListGrowingMode from "@ui5/webcomponents/dist/types/NotificationListGrowingMode.js"; import NotificationListGroupList from "./NotificationListGroupList.js"; import NotificationListItemBase from "./NotificationListItemBase.js"; import type NotificationListItem from "./NotificationListItem.js"; @@ -89,6 +90,14 @@ type NotificationListGroupItemToggleEventDetail = { */ @event("toggle") +/** + * Fired when additional items are requested. + * + * @public + * @since 2.2.0 + */ +@event("load-more") + class NotificationListGroupItem extends NotificationListItemBase { /** * Defines if the group is collapsed or expanded. @@ -98,6 +107,16 @@ class NotificationListGroupItem extends NotificationListItemBase { @property({ type: Boolean }) collapsed = false; + /** + * Defines whether the component will have growing capability by pressing a `More` button. + * When button is pressed `load-more` event will be fired. + * @default false + * @public + * @since 2.2.0 + */ + @property() + growing: `${NotificationListGrowingMode}` = "None"; + /** * Defines the items of the `ui5-li-notification-group`, * usually `ui5-li-notification` items. @@ -190,6 +209,15 @@ class NotificationListGroupItem extends NotificationListItemBase { this.toggleCollapsed(); } + _onLoadMore() { + this.fireEvent("load-more"); + } + + get loadMoreButton() { + const innerList = this.getDomRef()?.querySelector("[ui5-notification-group-list]") as NotificationListGroupList; + return innerList.getDomRef()?.querySelector("[growing-button-inner]") as HTMLElement; + } + async _onkeydown(e: KeyboardEvent) { const isFocused = this.matches(":focus"); if (!isFocused) { diff --git a/packages/fiori/src/NotificationListItem.ts b/packages/fiori/src/NotificationListItem.ts index 5972a6812ac8..3485deb783e6 100644 --- a/packages/fiori/src/NotificationListItem.ts +++ b/packages/fiori/src/NotificationListItem.ts @@ -17,6 +17,7 @@ import Icon from "@ui5/webcomponents/dist/Icon.js"; import WrappingType from "@ui5/webcomponents/dist/types/WrappingType.js"; import type Menu from "@ui5/webcomponents/dist/Menu.js"; import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js"; +import willShowContent from "@ui5/webcomponents-base/dist/util/willShowContent.js"; import NotificationListItemImportance from "./types/NotificationListItemImportance.js"; import NotificationListItemBase from "./NotificationListItemBase.js"; import type NotificationList from "./NotificationList.js"; @@ -300,7 +301,7 @@ class NotificationListItem extends NotificationListItemBase { } get hasDesc() { - return !!this.description.length; + return willShowContent(this.description); } get hasImportance() { diff --git a/packages/fiori/src/themes/NotificationList.css b/packages/fiori/src/themes/NotificationList.css index d6dbccfe15e0..7c2de8ff9fdf 100644 --- a/packages/fiori/src/themes/NotificationList.css +++ b/packages/fiori/src/themes/NotificationList.css @@ -1,3 +1,7 @@ :host(:not([hidden])) { display: block; +} + +[ui5-notification-list-internal] { + height: 100%; } \ No newline at end of file diff --git a/packages/fiori/src/themes/NotificationListGroupItem.css b/packages/fiori/src/themes/NotificationListGroupItem.css index 549b7201c142..3f5c2064a482 100644 --- a/packages/fiori/src/themes/NotificationListGroupItem.css +++ b/packages/fiori/src/themes/NotificationListGroupItem.css @@ -27,7 +27,9 @@ .ui5-nli-group-header { height: 2.75rem; - position: relative; + position: sticky; + top: 0; + z-index: 90; /* the z-index of the busy-indicator is 99 and the header shouldn't be over it */ background: var(--sapList_GroupHeaderBackground); display: flex; align-items: center; @@ -79,3 +81,32 @@ :host([ui5-li-notification-group]) { -webkit-tap-highlight-color: transparent; } + +/* "More" button overrides follows */ +[ui5-notification-group-list]::part(growing-button) { + border: none; +} + +[ui5-notification-group-list]::part(growing-button-inner) { + margin: var(--_ui5-notification_item-margin); + border: var(--_ui5-notification_item-border-top-left-right); + border-radius: var(--_ui5-notification_item-border-radius); +} + +[ui5-notification-group-list]::part(growing-button-inner) { + border-radius: var(--_ui5-notification_item-border-radius); +} + +[ui5-notification-group-list]::part(growing-button-inner):focus, +[ui5-notification-group-list]::part(growing-button-inner):focus-visible { + outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);; + outline-offset: var(--_ui5-notification_item-outline-offset); +} + +[ui5-notification-group-list]::part(growing-button-inner):focus:active, +[ui5-notification-group-list]::part(growing-button-inner):focus-visible:active { + background-color: var(--_ui5-notification_item-background-color-active); + border-radius: var(--_ui5-notification_item-border-radius); + border: var(--_ui5-notification_item-border-active); +} + diff --git a/packages/fiori/src/themes/base/NotificationListItem-parameters.css b/packages/fiori/src/themes/base/NotificationListItem-parameters.css index 55ad7aed037f..d62423f663a0 100644 --- a/packages/fiori/src/themes/base/NotificationListItem-parameters.css +++ b/packages/fiori/src/themes/base/NotificationListItem-parameters.css @@ -18,6 +18,7 @@ --_ui5-notification_item-description-margin-top: 0.75rem; --_ui5-notification_item-footer-margin-top: 0.75rem; --_ui5-notification_item-focus-offset: 0; + --_ui5-notification_item-outline-offset: 0; } [data-ui5-compact-size], diff --git a/packages/fiori/src/themes/sap_horizon/NotificationListItem-parameters.css b/packages/fiori/src/themes/sap_horizon/NotificationListItem-parameters.css index 6ddf860508d8..190a152ea514 100644 --- a/packages/fiori/src/themes/sap_horizon/NotificationListItem-parameters.css +++ b/packages/fiori/src/themes/sap_horizon/NotificationListItem-parameters.css @@ -3,7 +3,7 @@ :root { --_ui5-notification_item-border-radius: var(--sapTile_BorderCornerRadius); --_ui5-notification_group_header-border-bottom-width: 0; - --_ui5-notification_group_header-margin: 0.75rem 0.5rem; + --_ui5-notification_group_header-margin: 0.75rem; --_ui5-notification_group_header-padding: 0.5rem; --_ui5-notification_item-state-icon-padding: 0.25rem; --_ui5-notification_item-border-bottom: var(--sapList_BorderWidth) solid var(--sapList_BorderColor); @@ -16,4 +16,5 @@ --_ui5-notification_item-content-padding: 0.75rem 0; --_ui5-notification_item-title-margin-bottom: 0; --_ui5-notification_item-focus-offset: 0.1875rem; + --_ui5-notification_item-outline-offset: -0.375rem; /*2 x --_ui5-notification_item-focus-offset*/ } \ No newline at end of file diff --git a/packages/fiori/src/themes/sap_horizon_dark/NotificationListItem-parameters.css b/packages/fiori/src/themes/sap_horizon_dark/NotificationListItem-parameters.css index 6ddf860508d8..190a152ea514 100644 --- a/packages/fiori/src/themes/sap_horizon_dark/NotificationListItem-parameters.css +++ b/packages/fiori/src/themes/sap_horizon_dark/NotificationListItem-parameters.css @@ -3,7 +3,7 @@ :root { --_ui5-notification_item-border-radius: var(--sapTile_BorderCornerRadius); --_ui5-notification_group_header-border-bottom-width: 0; - --_ui5-notification_group_header-margin: 0.75rem 0.5rem; + --_ui5-notification_group_header-margin: 0.75rem; --_ui5-notification_group_header-padding: 0.5rem; --_ui5-notification_item-state-icon-padding: 0.25rem; --_ui5-notification_item-border-bottom: var(--sapList_BorderWidth) solid var(--sapList_BorderColor); @@ -16,4 +16,5 @@ --_ui5-notification_item-content-padding: 0.75rem 0; --_ui5-notification_item-title-margin-bottom: 0; --_ui5-notification_item-focus-offset: 0.1875rem; + --_ui5-notification_item-outline-offset: -0.375rem; /*2 x --_ui5-notification_item-focus-offset*/ } \ No newline at end of file diff --git a/packages/fiori/src/themes/sap_horizon_hcb/NotificationListItem-parameters.css b/packages/fiori/src/themes/sap_horizon_hcb/NotificationListItem-parameters.css index 251e30ff77b3..abec6e1be6bd 100644 --- a/packages/fiori/src/themes/sap_horizon_hcb/NotificationListItem-parameters.css +++ b/packages/fiori/src/themes/sap_horizon_hcb/NotificationListItem-parameters.css @@ -3,7 +3,7 @@ :root { --_ui5-notification_item-border-radius: var(--sapTile_BorderCornerRadius); --_ui5-notification_group_header-border-bottom-width: 0; - --_ui5-notification_group_header-margin: 0.75rem 0.5rem; + --_ui5-notification_group_header-margin: 0.75rem; --_ui5-notification_group_header-padding: 0.5rem; --_ui5-notification_item-state-icon-padding: 0.25rem; --_ui5-notification_item-border-bottom: var(--sapList_BorderWidth) solid var(--sapList_BorderColor); @@ -18,4 +18,5 @@ --_ui5-notification_item-title-padding-end-two-buttons: 4.875rem; --_ui5-notification_item-title-padding-end-one-button: 2.375rem; --_ui5-notification_item-focus-offset: 0.1875rem; + --_ui5-notification_item-outline-offset: -0.375rem; /*2 x --_ui5-notification_item-focus-offset*/ } \ No newline at end of file diff --git a/packages/fiori/src/themes/sap_horizon_hcw/NotificationListItem-parameters.css b/packages/fiori/src/themes/sap_horizon_hcw/NotificationListItem-parameters.css index 251e30ff77b3..abec6e1be6bd 100644 --- a/packages/fiori/src/themes/sap_horizon_hcw/NotificationListItem-parameters.css +++ b/packages/fiori/src/themes/sap_horizon_hcw/NotificationListItem-parameters.css @@ -3,7 +3,7 @@ :root { --_ui5-notification_item-border-radius: var(--sapTile_BorderCornerRadius); --_ui5-notification_group_header-border-bottom-width: 0; - --_ui5-notification_group_header-margin: 0.75rem 0.5rem; + --_ui5-notification_group_header-margin: 0.75rem; --_ui5-notification_group_header-padding: 0.5rem; --_ui5-notification_item-state-icon-padding: 0.25rem; --_ui5-notification_item-border-bottom: var(--sapList_BorderWidth) solid var(--sapList_BorderColor); @@ -18,4 +18,5 @@ --_ui5-notification_item-title-padding-end-two-buttons: 4.875rem; --_ui5-notification_item-title-padding-end-one-button: 2.375rem; --_ui5-notification_item-focus-offset: 0.1875rem; + --_ui5-notification_item-outline-offset: -0.375rem; /*2 x --_ui5-notification_item-focus-offset*/ } \ No newline at end of file diff --git a/packages/fiori/test/pages/NotificationListGroupItem.html b/packages/fiori/test/pages/NotificationListGroupItem.html index 40d92b5bb07f..f23604c487b9 100644 --- a/packages/fiori/test/pages/NotificationListGroupItem.html +++ b/packages/fiori/test/pages/NotificationListGroupItem.html @@ -18,6 +18,194 @@ Toggle sapUiSizeCompact + + +
+ + Notifications + Show M. Strip + Clear All + + + + Something went wrong. + + + + + Office Notifications + 3 Days + + + + + And with a very long description and long labels of the action buttons - Lorem ipsum dolor sit amet, + consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula + dolor, + nec elementum lectus turpis at nunc. + + + + + Office Notifications + 3 Days + + + + + Office Notifications + 3 Days + + + + + Office Notifications + 3 Days + + + + + Office Notifications + 3 Days + + + + + Office Notifications + 3 Days + + + + + Office Notifications + 3 Days + + + + + And with a very long description and long labels of the action buttons - Lorem ipsum dolor sit amet, + consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula + dolor, + nec elementum lectus turpis at nunc. + + + + + + Office Notifications + 3 Days + + + + And with a very long description - Lorem ipsum dolor sit amet, + consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula + dolor, + nec elementum lectus turpis at nunc. + + + + + Office Notifications + 3 Days + + + + And with a very long description - Lorem ipsum dolor sit amet, + consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula + dolor, + nec elementum lectus turpis at nunc. + + + + + + + Office Notifications + 3 Days + And with a very long description - Lorem ipsum dolor sit amet, + consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula + dolor, + nec elementum lectus turpis at nunc. + + + + + Office Notifications + 3 Days + And with a very long description - Lorem ipsum dolor sit amet, + consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula + dolor, + nec elementum lectus turpis at nunc. + + + + + Office Notifications + 3 Days + And with a very long description - Lorem ipsum dolor sit amet, + consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula + dolor, + nec elementum lectus turpis at nunc. + + + + + Office Notifications + 3 Days + And with a very long description - Lorem ipsum dolor sit amet, + consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula + dolor, + nec elementum lectus turpis at nunc. + + + + + Office Notifications + 3 Days + And with a very long description - Lorem ipsum dolor sit amet, + consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula + dolor, + nec elementum lectus turpis at nunc. + + + + + Office Notifications + 3 Days + And with a very long description - Lorem ipsum dolor sit amet, + consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula + dolor, + nec elementum lectus turpis at nunc. + + + +
+ + - + Notifications Clear All @@ -432,6 +621,55 @@ btnCompact.addEventListener("click", function() { document.getElementsByTagName("body")[0].classList.toggle("sapUiSizeCompact"); }); + + // Growing and Sticky interaction features + var notificationsPopoverGrowingAndSticky = document.querySelector("#popover-with-notifications"); + var notificationsPopoverMessageStrip = document.querySelector("#message-strip-error"); + + var btnShowMessageStrip = document.querySelector("#show-message-strip"); + + shellbarGrowingAndSticky.addEventListener("notifications-click", e => { + e.preventDefault(); + notificationsPopoverGrowingAndSticky.opener = e.detail.targetRef; + notificationsPopoverGrowingAndSticky.open = true; + }); + + let itemsLoaded = 0; + const itemToLoad = 5; + const notificationsListGroupGrowing = document.querySelector("#notificationsListGroupGrowing"); + const notificationListItemTemplate = (index) => { + var notificationLi = document.createElement("ui5-li-notification"); + notificationLi.titleText = "New notification"; + notificationLi.state = "Critical"; + + return notificationLi; + } + + const insertItems = (list) => { + for (var i = itemsLoaded; i < itemsLoaded + itemToLoad; i++) { + list.appendChild(notificationListItemTemplate(i)); + } + + itemsLoaded += itemToLoad; + }; + + notificationsListGroupGrowing.addEventListener("load-more", (e) => { + const focusIndex = notificationsListGroupGrowing.items.length; + + notificationsListGroupGrowing.loading = true; // as in the ui5-list (the whole list gets 'busy') + setTimeout(() => { + insertItems(notificationsListGroupGrowing); + notificationsListGroupGrowing.loading = false; + + setTimeout(() => { + notificationsListGroupGrowing.items[focusIndex].focus(); + }, 500); + }, 500); + }); + + btnShowMessageStrip.addEventListener("click", function() { + notificationsPopoverMessageStrip.style.display = "inline-block"; + }); diff --git a/packages/fiori/test/pages/NotificationListItem.html b/packages/fiori/test/pages/NotificationListItem.html index 8a59a1af5d9e..3e6a2cdb08ea 100644 --- a/packages/fiori/test/pages/NotificationListItem.html +++ b/packages/fiori/test/pages/NotificationListItem.html @@ -109,6 +109,21 @@

Notification List with Menu

Notification List

+ + + + Office Notifications + 3 Days + + + + + + +
- + Office Notifications 3 Days