From 8874d89f5f88e2ff320f631635742af812f27391 Mon Sep 17 00:00:00 2001 From: Dobrin Dimchev Date: Wed, 16 Apr 2025 09:00:23 +0300 Subject: [PATCH 1/2] docs(ui5-shellbar): adjust samples to UXC --- .../_samples/fiori/ShellBar/Advanced/main.js | 19 ++++----- .../fiori/ShellBar/Advanced/sample.html | 40 ++++++++----------- 2 files changed, 25 insertions(+), 34 deletions(-) diff --git a/packages/website/docs/_samples/fiori/ShellBar/Advanced/main.js b/packages/website/docs/_samples/fiori/ShellBar/Advanced/main.js index 8d30b0a5dfd6..5c899beef1e5 100644 --- a/packages/website/docs/_samples/fiori/ShellBar/Advanced/main.js +++ b/packages/website/docs/_samples/fiori/ShellBar/Advanced/main.js @@ -1,29 +1,26 @@ import "@ui5/webcomponents/dist/Avatar.js"; import "@ui5/webcomponents/dist/Button.js"; import "@ui5/webcomponents/dist/Input.js"; -import "@ui5/webcomponents/dist/ListItemStandard.js"; -import "@ui5/webcomponents/dist/Popover.js"; import "@ui5/webcomponents/dist/Title.js"; import "@ui5/webcomponents/dist/ToggleButton.js"; -import "@ui5/webcomponents/dist/List.js"; +import "@ui5/webcomponents-fiori/dist/UserMenu.js"; +import "@ui5/webcomponents-fiori/dist/UserMenuAccount.js"; +import "@ui5/webcomponents-fiori/dist/UserMenuItem.js"; import "@ui5/webcomponents-fiori/dist/ShellBar.js"; import "@ui5/webcomponents-icons/dist/da.js"; import "@ui5/webcomponents-icons/dist/da-2.js"; import "@ui5/webcomponents-icons/dist/nav-back.js"; -import "@ui5/webcomponents-icons/dist/sys-find.js"; -import "@ui5/webcomponents-icons/dist/settings.js"; -import "@ui5/webcomponents-icons/dist/edit.js"; -import "@ui5/webcomponents-icons/dist/sys-help.js"; -import "@ui5/webcomponents-icons/dist/log.js"; +import "@ui5/webcomponents-icons/dist/action-settings.js"; +import "@ui5/webcomponents-icons/dist/official-service.js"; const shellbar = document.getElementById("shellbar"); -const actionPopover = document.getElementById("action-popover"); +const menu = document.getElementById("userMenu"); shellbar.addEventListener("ui5-profile-click", (event) => { - actionPopover.opener = event.detail.targetRef; - actionPopover.open = true; + menu.opener = event.detail.targetRef; + menu.open = true; }); [...document.querySelectorAll("ui5-toggle-button")].forEach(el => { diff --git a/packages/website/docs/_samples/fiori/ShellBar/Advanced/sample.html b/packages/website/docs/_samples/fiori/ShellBar/Advanced/sample.html index ffcb43cdf418..7b54b417a1e9 100644 --- a/packages/website/docs/_samples/fiori/ShellBar/Advanced/sample.html +++ b/packages/website/docs/_samples/fiori/ShellBar/Advanced/sample.html @@ -9,39 +9,33 @@ - + - + - - Application 1 - Application 2 - Application 3 - Application 4 - Application 5 - -
- An Kimura -
-
- - App Finder - Settings - Edit Home Page - Help - Sign out - -
- + + + + + + + + + + From 86f55b5b03458966f8c9de3881465ab73d19ffe9 Mon Sep 17 00:00:00 2001 From: Dobrin Dimchev Date: Tue, 29 Apr 2025 23:40:47 +0300 Subject: [PATCH 2/2] docs: adjust samples --- .../_samples/fiori/ShellBar/Advanced/main.js | 45 ++++++++++++++++++- .../fiori/ShellBar/Advanced/sample.html | 6 ++- .../_samples/fiori/ShellBar/Basic/main.js | 1 + .../_samples/fiori/ShellBar/Basic/sample.html | 3 +- 4 files changed, 52 insertions(+), 3 deletions(-) diff --git a/packages/website/docs/_samples/fiori/ShellBar/Advanced/main.js b/packages/website/docs/_samples/fiori/ShellBar/Advanced/main.js index 5c899beef1e5..01db1cf58c92 100644 --- a/packages/website/docs/_samples/fiori/ShellBar/Advanced/main.js +++ b/packages/website/docs/_samples/fiori/ShellBar/Advanced/main.js @@ -8,6 +8,9 @@ import "@ui5/webcomponents-fiori/dist/UserMenuAccount.js"; import "@ui5/webcomponents-fiori/dist/UserMenuItem.js"; import "@ui5/webcomponents-fiori/dist/ShellBar.js"; +import "@ui5/webcomponents-fiori/dist/ShellBarSearch.js"; +import "@ui5/webcomponents-fiori/dist/SearchItem.js"; +import "@ui5/webcomponents-fiori/dist/SearchScope.js"; import "@ui5/webcomponents-icons/dist/da.js"; import "@ui5/webcomponents-icons/dist/da-2.js"; @@ -28,4 +31,44 @@ shellbar.addEventListener("ui5-profile-click", (event) => { const toggleButton = event.target; toggleButton.icon = toggleButton.pressed ? "sap-icon://da-2" : "sap-icon://da"; }); -}); \ No newline at end of file +}); + +const scopeData = [ + { name: "Laptop", scope: "products" }, + { name: "Leave Requests", scope: "apps" }, + { name: "Log work", scope: "apps" }, + { name: "Manage Products", scope: "apps" }, + { name: "Mobile Phones", scope: "products" }, + { name: "Tablet", scope: "products" }, +]; + +function createScopeItems(scope) { + let filterData = []; + + if (!scope) { + filterData = scopeData; + } else { + filterData = scopeData.filter(item => item.scope === scope); + } + + filterData.forEach(item => { + const searchItem = document.createElement("ui5-search-item"); + searchItem.text = item.name; + searchItem.scopeName = item.scope; + searchScope.appendChild(searchItem); + }); +} + +const searchScope = document.getElementById("search-scope"); + +createScopeItems(); + +searchScope.addEventListener("ui5-scope-change", (event) => { + const scope = event.detail.scope.text === "All" ? "" : event.detail.scope.text.toLowerCase(); + + searchScope.items.forEach(item => { + item.remove(); + }); + + createScopeItems(scope); +}); diff --git a/packages/website/docs/_samples/fiori/ShellBar/Advanced/sample.html b/packages/website/docs/_samples/fiori/ShellBar/Advanced/sample.html index 7b54b417a1e9..26e514fa86b6 100644 --- a/packages/website/docs/_samples/fiori/ShellBar/Advanced/sample.html +++ b/packages/website/docs/_samples/fiori/ShellBar/Advanced/sample.html @@ -19,7 +19,11 @@ - + + + + + - + +