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