Skip to content

Commit 8874d89

Browse files
dobrinyonkovdobrinyonkov
committed
docs(ui5-shellbar): adjust samples to UXC
1 parent 1d11709 commit 8874d89

File tree

2 files changed

+25
-34
lines changed

2 files changed

+25
-34
lines changed

‎packages/website/docs/_samples/fiori/ShellBar/Advanced/main.js

+8-11
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,26 @@
11
import "@ui5/webcomponents/dist/Avatar.js";
22
import "@ui5/webcomponents/dist/Button.js";
33
import "@ui5/webcomponents/dist/Input.js";
4-
import "@ui5/webcomponents/dist/ListItemStandard.js";
5-
import "@ui5/webcomponents/dist/Popover.js";
64
import "@ui5/webcomponents/dist/Title.js";
75
import "@ui5/webcomponents/dist/ToggleButton.js";
8-
import "@ui5/webcomponents/dist/List.js";
6+
import "@ui5/webcomponents-fiori/dist/UserMenu.js";
7+
import "@ui5/webcomponents-fiori/dist/UserMenuAccount.js";
8+
import "@ui5/webcomponents-fiori/dist/UserMenuItem.js";
99

1010
import "@ui5/webcomponents-fiori/dist/ShellBar.js";
1111

1212
import "@ui5/webcomponents-icons/dist/da.js";
1313
import "@ui5/webcomponents-icons/dist/da-2.js";
1414
import "@ui5/webcomponents-icons/dist/nav-back.js";
15-
import "@ui5/webcomponents-icons/dist/sys-find.js";
16-
import "@ui5/webcomponents-icons/dist/settings.js";
17-
import "@ui5/webcomponents-icons/dist/edit.js";
18-
import "@ui5/webcomponents-icons/dist/sys-help.js";
19-
import "@ui5/webcomponents-icons/dist/log.js";
15+
import "@ui5/webcomponents-icons/dist/action-settings.js";
16+
import "@ui5/webcomponents-icons/dist/official-service.js";
2017

2118
const shellbar = document.getElementById("shellbar");
22-
const actionPopover = document.getElementById("action-popover");
19+
const menu = document.getElementById("userMenu");
2320

2421
shellbar.addEventListener("ui5-profile-click", (event) => {
25-
actionPopover.opener = event.detail.targetRef;
26-
actionPopover.open = true;
22+
menu.opener = event.detail.targetRef;
23+
menu.open = true;
2724
});
2825

2926
[...document.querySelectorAll("ui5-toggle-button")].forEach(el => {

‎packages/website/docs/_samples/fiori/ShellBar/Advanced/sample.html

+17-23
Original file line numberDiff line numberDiff line change
@@ -9,39 +9,33 @@
99
<link rel="stylesheet" href="./main.css">
1010
</head>
1111

12-
<body style="background-color: var(--sapBackgroundColor);height: 400px;">
12+
<body style="background-color: var(--sapBackgroundColor);height: 500px;">
1313
<!-- playground-fold-end -->
1414

15-
<ui5-shellbar id="shellbar" primary-title="Corporate Portal" secondary-title="secondary title"
16-
notifications-count="99+" show-notifications="">
15+
<ui5-shellbar id="shellbar" primary-title="Corporate Portal" notifications-count="99+" show-notifications>
1716
<ui5-avatar slot="profile">
1817
<img src="../assets/images/avatars/woman_avatar_5.png" />
1918
</ui5-avatar>
2019
<ui5-toggle-button icon="sap-icon://da" slot="assistant"></ui5-toggle-button>
2120
<img slot="logo" src="../assets/images/sap-logo-svg.svg" />
2221
<ui5-button icon="nav-back" slot="startButton"></ui5-button>
23-
2422
<ui5-input slot="searchField"></ui5-input>
25-
<ui5-li slot="menuItems">Application 1</ui5-li>
26-
<ui5-li slot="menuItems">Application 2</ui5-li>
27-
<ui5-li slot="menuItems">Application 3</ui5-li>
28-
<ui5-li slot="menuItems">Application 4</ui5-li>
29-
<ui5-li slot="menuItems">Application 5</ui5-li>
3023
</ui5-shellbar>
31-
<ui5-popover id="action-popover" placement="Bottom">
32-
<div class="action-popover-header">
33-
<ui5-title style="padding: 0.25rem 1rem 0rem 1rem">An Kimura</ui5-title>
34-
</div>
35-
<div class="action-popover-content" style="margin-top: 1rem;">
36-
<ui5-list separators="None">
37-
<ui5-li icon="sys-find">App Finder</ui5-li>
38-
<ui5-li icon="settings">Settings</ui5-li>
39-
<ui5-li icon="edit">Edit Home Page</ui5-li>
40-
<ui5-li icon="sys-help">Help</ui5-li>
41-
<ui5-li icon="log">Sign out</ui5-li>
42-
</ui5-list>
43-
</div>
44-
</ui5-popover>
24+
<ui5-user-menu id="userMenu" opener="btnOpenUserMenu">
25+
<ui5-user-menu-account slot="accounts"
26+
avatar-src="../assets/images/avatars/man_avatar_3.png"
27+
title-text="Alaina Chevalier"
28+
subtitle-text="[email protected]"
29+
description="Delivery Manager"
30+
selected>
31+
</ui5-user-menu-account>
32+
<ui5-user-menu-item icon="action-settings" text="Setting" data-id="setting"></ui5-user-menu-item>
33+
<ui5-user-menu-item icon="official-service" text="Legal Information">
34+
<ui5-user-menu-item text="Terms of Use" data-id="terms-of-use"></ui5-user-menu-item>
35+
<ui5-user-menu-item text="Private Policy" data-id="privacy-policy"></ui5-user-menu-item>
36+
</ui5-user-menu-item>
37+
<ui5-user-menu-item icon="message-information" text="About" data-id="about"></ui5-user-menu-item>
38+
</ui5-user-menu>
4539
<!-- playground-fold -->
4640
<script type="module" src="main.js"></script>
4741
</body>

0 commit comments

Comments
 (0)