docs(ui5-notification-list): enhance sample (SAP#10540)

Jira: BGSOFUIRODOPI-3374
kineticjs · Jan 20, 2025 · ae56a42 · ae56a42
1 parent b378604
commit ae56a42
Show file tree

Hide file tree

Showing 3 changed files with 151 additions and 329 deletions.
diff --git a/packages/website/docs/_samples/fiori/NotificationList/InShellBar/main.css b/packages/website/docs/_samples/fiori/NotificationList/InShellBar/main.css
@@ -1,5 +1,5 @@
 .notificationsPopover {
-	max-width: 27rem;
+	width: 27rem;
 	max-height: 40rem;
 }
 

diff --git a/packages/website/docs/_samples/fiori/NotificationList/InShellBar/main.js b/packages/website/docs/_samples/fiori/NotificationList/InShellBar/main.js
@@ -1,32 +1,41 @@
 import "@ui5/webcomponents/dist/Avatar.js";
 import "@ui5/webcomponents/dist/List.js";
+import "@ui5/webcomponents/dist/Text.js";
 import "@ui5/webcomponents/dist/Popover.js";
 import "@ui5/webcomponents/dist/Title.js";
 import "@ui5/webcomponents/dist/Button.js";
 import "@ui5/webcomponents/dist/Menu.js";
+import "@ui5/webcomponents/dist/MenuItem.js";
 import "@ui5/webcomponents/dist/Bar.js";
 import "@ui5/webcomponents/dist/MessageStrip.js";
 import "@ui5/webcomponents-icons/dist/action-settings.js"
 import "@ui5/webcomponents-icons/dist/sort.js"
+import "@ui5/webcomponents-icons/dist/crm-sales.js";
+import "@ui5/webcomponents-icons/dist/expense-report.js";
+import "@ui5/webcomponents/dist/Link.js";
 
 import "@ui5/webcomponents-fiori/dist/ShellBar.js";
 import "@ui5/webcomponents-fiori/dist/NotificationList.js";
 import "@ui5/webcomponents-fiori/dist/NotificationListGroupItem.js";
 import "@ui5/webcomponents-fiori/dist/NotificationListItem.js";
-
-import "@ui5/webcomponents-icons/dist/employee.js";
-import "@ui5/webcomponents-icons/dist/message-error.js";
-import "@ui5/webcomponents-icons/dist/accept.js";
+import "@ui5/webcomponents-fiori/dist/IllustratedMessage.js";
+import "@ui5/webcomponents-fiori/dist/illustrations/NoNotifications.js";
 
 const shellbar = document.querySelector("ui5-shellbar");
 const notificationsPopover = document.querySelector(".notificationsPopover");
 const notificationList = document.querySelector(".notificationsPopoverList");
 const notificationsPopoverMessageStrip = document.querySelector(".notificationsMessageStrip");
 const btnShowMessageStrip = document.querySelector("#show-message-strip");
+const btnClearAll = document.querySelector("#clear-all");
+const clearAllDialog = document.querySelector("#clear-all-dialog");
+var dialogClosers = [...clearAllDialog.querySelectorAll(".dialogCloser")];
+const btnClearAllAction = document.querySelector("#clear-all-action");
 const notificationsListGroupGrowing = document.querySelector("#notificationsListGroupGrowing");
+const btnOpenMenuSort = document.getElementById("btn-sort");
+const menu = document.getElementById("sort-menu");
 
-const itemsToLoad = 5;
-let itemsLoaded = 30;
+const itemsToLoad = 10;
+let itemsLoaded = 6;
 
 notificationList.addEventListener("item-close", e => {
 	let visibleItems = 0;
@@ -55,13 +64,12 @@ shellbar.addEventListener("notifications-click", e => {
 const insertItems = (list) => {
 	for (var i = itemsLoaded + 1; i <= itemsLoaded + itemsToLoad; i++) {
 		list.insertAdjacentHTML("beforeend",
-			`<ui5-li-notification title-text="Notification Title ${i}" show-close>
-				<ui5-avatar icon="employee" size="XS" slot="avatar"></ui5-avatar>
-				<span slot="footnotes">Notification</span>
-				<span slot="footnotes">3 Days</span>
+			`<ui5-li-notification title-text="Notification Title  ${i}" show-close>
+				<ui5-avatar icon="expense-report" color-scheme="Accent1" shape="Square" size="XS" slot="avatar"></ui5-avatar>
+				<span slot="footnotes">Product Name</span>
+				<span slot="footnotes">Now</span>
 				<ui5-menu slot="menu">
-					<ui5-menu-item icon="accept" text="Accept"></ui5-menu-item>
-					<ui5-menu-item icon="message-error" text="Reject"></ui5-menu-item>
+					<ui5-menu-item text="Unsubscribe"></ui5-menu-item>
 				</ui5-menu>
 				Description ${i}
 			</ui5-li-notification>`);
@@ -88,3 +96,31 @@ notificationsListGroupGrowing.addEventListener("load-more", (e) => {
 btnShowMessageStrip.addEventListener("click", function() {
 	notificationsPopoverMessageStrip.style.display = "inline-block";
 });
+
+notificationsPopoverMessageStrip.addEventListener("close", function() {
+	notificationsPopoverMessageStrip.style.display = "none";
+});
+
+btnClearAll.accessibilityAttributes = {
+    hasPopup: "dialog",
+    controls: clearAllDialog.id,
+};
+
+btnClearAll.addEventListener("click", () => {
+    clearAllDialog.open = true;
+});
+
+dialogClosers.forEach(btn => {
+    btn.addEventListener("click", () => {
+        clearAllDialog.open = false;
+    });
+});
+
+btnClearAllAction.addEventListener("click", () => {
+	notificationList.innerHTML = `<ui5-illustrated-message name="NoNotifications"></ui5-illustrated-message>`;
+});
+
+btnOpenMenuSort.addEventListener("click", () => {
+	menu.opener = btnOpenMenuSort;
+	menu.open = true;
+});