Skip to content

Commit ec5a3dd

Browse files
Lukas742Lukas742
committed
before cleanup
1 parent 36d5cf3 commit ec5a3dd

File tree

15 files changed

+1008
-77
lines changed

15 files changed

+1008
-77
lines changed

‎packages/main/src/components/MessageBox/index.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@ export interface MessageBoxPropTypes
4949
* Flag whether the Message Box should be opened or closed
5050
*/
5151
open?: DialogPropTypes['open'];
52+
// todo: add headerText prop and deprecate `titleText`
5253
/**
5354
* A custom title for the MessageBox. If not present, it will be derived from the `MessageBox` type.
5455
*/

‎patterns/navigation-layout/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
5-
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
5+
<link rel="icon" type="image/svg+xml" href="/sap-logo.svg" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
77
<title>UI5 Web Components React - Navigation Layout Page</title>
88
<script data-ui5-config type="application/json">
@@ -11,7 +11,7 @@
1111
}
1212
</script>
1313
</head>
14-
<body>
14+
<body class="ui5-content-density-compact">
1515
<div id="root"></div>
1616
<script type="module" src="/src/main.tsx"></script>
1717
</body>

‎patterns/navigation-layout/public/avatar.png‎

106 KB
Loading

‎patterns/navigation-layout/public/sap-logo.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎patterns/navigation-layout/public/vite.svg‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎patterns/navigation-layout/src/App.tsx‎

Lines changed: 0 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -90,37 +90,6 @@ function App() {
9090
sideContent={<NLSideNavigation setContentTitle={setContentTitle} />}
9191
mode={mode}
9292
>
93-
<UserMenu id="userMenu" showManageAccount showOtherAccounts showEditAccounts showEditButton>
94-
<UserMenuAccount
95-
slot="accounts"
96-
avatarSrc="../assets/images/avatars/man_avatar_3.png"
97-
titleText="Alain Chevalier 1"
98-
subtitleText="[email protected]"
99-
description="Delivery Manager, SAP SE"
100-
selected
101-
/>
102-
<UserMenuAccount
103-
slot="accounts"
104-
avatarInitials="SD"
105-
titleText="John Walker"
106-
subtitleText="[email protected]"
107-
description="Project Manager"
108-
/>
109-
<UserMenuAccount
110-
slot="accounts"
111-
avatarInitials="DS"
112-
titleText="David Wilson"
113-
subtitleText="[email protected]"
114-
description="Project Manager"
115-
/>
116-
<UserMenuItem icon={actionSettingsIcon} text="Setting" data-id="setting" />
117-
<UserMenuItem icon={officialServiceIcon} text="Legal Information">
118-
<UserMenuItem text="Terms of Use" data-id="terms-of-use" />
119-
<UserMenuItem text="Private Policy" data-id="privacy-policy" />
120-
</UserMenuItem>
121-
<UserMenuItem icon={messageInformationIcon} text="About" data-id="about" />
122-
</UserMenu>
123-
12493
<div className="mainContent">
12594
<Title>{contentTitle}</Title>
12695
<br />

‎patterns/navigation-layout/src/NLShellBar.tsx‎

Lines changed: 47 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,29 @@
1+
import NavigationLayoutMode from '@ui5/webcomponents-fiori/dist/types/NavigationLayoutMode.js';
2+
import da2Icon from '@ui5/webcomponents-icons/dist/da-2.js';
3+
import daIcon from '@ui5/webcomponents-icons/dist/da.js';
4+
import menu2Icon from '@ui5/webcomponents-icons/dist/menu2.js';
5+
import sysHelpIcon from '@ui5/webcomponents-icons/dist/sys-help.js';
16
import {
27
Avatar,
38
Button,
49
NavigationLayoutDomRef,
510
ResponsivePopoverDomRef,
11+
SearchItem,
612
SearchScope,
713
ShellBar,
814
ShellBarItem,
915
ShellBarPropTypes,
1016
ShellBarSearch,
17+
ShellBarSearchPropTypes,
1118
ShellBarSpacer,
1219
Tag,
1320
Text,
1421
ToggleButton,
1522
ToggleButtonPropTypes,
23+
UserMenuDomRef,
1624
} from '@ui5/webcomponents-react';
17-
import globeIcon from '@ui5/webcomponents-icons/dist/globe.js';
18-
import collaborateIcon from '@ui5/webcomponents-icons/dist/collaborate.js';
19-
import officialServiceIcon from '@ui5/webcomponents-icons/dist/official-service.js';
20-
import privateIcon from '@ui5/webcomponents-icons/dist/private.js';
21-
import acceleratedIcon from '@ui5/webcomponents-icons/dist/accelerated.js';
22-
import daIcon from '@ui5/webcomponents-icons/dist/da.js';
23-
import da2Icon from '@ui5/webcomponents-icons/dist/da-2.js';
24-
import menu2Icon from '@ui5/webcomponents-icons/dist/menu2.js';
25-
import settingsIcon from '@ui5/webcomponents-icons/dist/settings.js';
26-
import sysHelpIcon from '@ui5/webcomponents-icons/dist/sys-help.js';
27-
import homeIcon from '@ui5/webcomponents-icons/dist/home.js';
28-
import favoriteListIcon from '@ui5/webcomponents-icons/dist/favorite-list.js';
29-
import accountIcon from '@ui5/webcomponents-icons/dist/account.js';
30-
import businessByDesignIcon from '@ui5/webcomponents-icons/dist/business-by-design.js';
31-
import crmSalesIcon from '@ui5/webcomponents-icons/dist/crm-sales.js';
32-
import s4hanaIcon from '@ui5/webcomponents-icons/dist/s4hana.js';
33-
import addIcon from '@ui5/webcomponents-icons/dist/add.js';
34-
import managerInsightIcon from '@ui5/webcomponents-icons/dist/manager-insight.js';
35-
import actionSettingsIcon from '@ui5/webcomponents-icons/dist/action-settings.js';
36-
import sortIcon from '@ui5/webcomponents-icons/dist/sort.js';
37-
import messageInformationIcon from '@ui5/webcomponents-icons/dist/message-information.js';
38-
import expenseReportIcon from '@ui5/webcomponents-icons/dist/expense-report.js';
39-
import userSettingsIcon from '@ui5/webcomponents-icons/dist/user-settings.js';
40-
import personPlaceholderIcon from '@ui5/webcomponents-icons/dist/person-placeholder.js';
41-
import paletteIcon from '@ui5/webcomponents-icons/dist/palette.js';
42-
import iphoneIcon from '@ui5/webcomponents-icons/dist/iphone.js';
43-
import qrCodeIcon from '@ui5/webcomponents-icons/dist/qr-code.js';
44-
import bellIcon from '@ui5/webcomponents-icons/dist/bell.js';
45-
import resetIcon from '@ui5/webcomponents-icons/dist/reset.js';
4625
import { Dispatch, SetStateAction, useRef, useState } from 'react';
47-
import NavigationLayoutMode from '@ui5/webcomponents-fiori/dist/types/NavigationLayoutMode.js';
26+
import { NLUserMenu } from './NLUserMenu.tsx';
4827
import { NotificationsPopover } from './NotificationsPopover.tsx';
4928

5029
interface NLShellBarProps extends ShellBarPropTypes {
@@ -54,8 +33,10 @@ interface NLShellBarProps extends ShellBarPropTypes {
5433
export function NLShellBar(props: NLShellBarProps) {
5534
const { setMode, ...rest } = props;
5635
const notificationsPopoverRef = useRef<ResponsivePopoverDomRef>(null);
36+
const userMenuRef = useRef<UserMenuDomRef>(null);
5737
const [assistantBtnPressed, setAssistantBtnPressed] = useState(false);
5838
const [notificationsPopoverOpen, setNotificationsPopoverOpen] = useState(false);
39+
const [userMenuOpen, setUserMenuOpen] = useState(false);
5940

6041
const handleAssistantClick: ToggleButtonPropTypes['onClick'] = (e) => {
6142
setAssistantBtnPressed(e.currentTarget!.pressed);
@@ -78,6 +59,13 @@ export function NLShellBar(props: NLShellBarProps) {
7859
setNotificationsPopoverOpen(false);
7960
};
8061

62+
const handleProfileClick: ShellBarPropTypes['onProfileClick'] = (e) => {
63+
userMenuRef.current!.opener = e.detail.targetRef;
64+
setUserMenuOpen(true);
65+
};
66+
67+
const handleSearchScopeChange: ShellBarSearchPropTypes['onScopeChange'] = (e) => {};
68+
8169
return (
8270
<>
8371
<ShellBar
@@ -88,6 +76,7 @@ export function NLShellBar(props: NLShellBarProps) {
8876
showNotifications
8977
showProductSwitch
9078
onNotificationsClick={handleNotificationsClick}
79+
onProfileClick={handleProfileClick}
9180
startButton={
9281
<Button
9382
id="menu-button"
@@ -97,13 +86,7 @@ export function NLShellBar(props: NLShellBarProps) {
9786
onClick={handleMenuBtnClick}
9887
/>
9988
}
100-
logo={
101-
<img
102-
//todo: sap logo
103-
src="https://raw.githubusercontent.com/SAP/ui5-webcomponents-react/main/assets/ui5-logo.svg"
104-
alt="SAP Logo"
105-
/>
106-
}
89+
logo={<img src="sap-logo.svg" alt="SAP Logo" />}
10790
content={
10891
<>
10992
<Tag design="Set2" colorScheme="7" data-hide-order="2">
@@ -123,16 +106,27 @@ export function NLShellBar(props: NLShellBarProps) {
123106
/>
124107
}
125108
searchField={
126-
<ShellBarSearch id="search-scope" showClearIcon placeholder="Search Apps, Products">
127-
<SearchScope text="All" selected />
128-
<SearchScope text="Apps" />
129-
<SearchScope text="Products" />
109+
<ShellBarSearch
110+
id="search-scope"
111+
showClearIcon
112+
placeholder="Search Apps, Products"
113+
onScopeChange={handleSearchScopeChange}
114+
scopes={
115+
<>
116+
<SearchScope text="All" selected />
117+
<SearchScope text="Apps" />
118+
<SearchScope text="Products" />
119+
</>
120+
}
121+
>
122+
{scopeData.map((item) => (
123+
<SearchItem key={item.name} text={item.name} scopeName={item.scope} />
124+
))}
130125
</ShellBarSearch>
131126
}
132127
profile={
133128
<Avatar>
134-
{/*todo person placeholder*/}
135-
<img src="../assets/images/avatars/man_avatar_3.png" alt="User Avatar" />
129+
<img src="avatar.png" alt="User Avatar" />
136130
</Avatar>
137131
}
138132
>
@@ -144,8 +138,18 @@ export function NLShellBar(props: NLShellBarProps) {
144138
ref={notificationsPopoverRef}
145139
closeNotificationsPopover={closeNotificationsPopover}
146140
/>
141+
<NLUserMenu open={userMenuOpen} ref={userMenuRef} setOpen={setUserMenuOpen} />
147142
</>
148143
);
149144
}
150145

151146
NLShellBar.displayName = 'NLShellBar';
147+
148+
const scopeData = [
149+
{ name: 'Laptop', scope: 'products' },
150+
{ name: 'Leave Requests', scope: 'apps' },
151+
{ name: 'Log work', scope: 'apps' },
152+
{ name: 'Manage Products', scope: 'apps' },
153+
{ name: 'Mobile Phones', scope: 'products' },
154+
{ name: 'Tablet', scope: 'products' },
155+
];

‎patterns/navigation-layout/src/NLUserMenu.tsx‎

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
import actionSettingsIcon from '@ui5/webcomponents-icons/dist/action-settings.js';
2+
import messageInformationIcon from '@ui5/webcomponents-icons/dist/message-information.js';
3+
import officialServiceIcon from '@ui5/webcomponents-icons/dist/official-service.js';
4+
import { MessageBox, MessageBoxPropTypes, UserMenuDomRef, UserMenuPropTypes } from '@ui5/webcomponents-react';
5+
import { UserMenu, UserMenuAccount, UserMenuItem, Text } from '@ui5/webcomponents-react';
6+
import { Dispatch, forwardRef, SetStateAction, useState } from 'react';
7+
import { NLUserSettingsDialog } from './UserSettingsDialog/NLUserSettingsDialog.tsx';
8+
9+
interface NLUserMenuProps extends Pick<UserMenuPropTypes, 'open'> {
10+
setOpen: Dispatch<SetStateAction<boolean>>;
11+
}
12+
13+
export const NLUserMenu = forwardRef<UserMenuDomRef, NLUserMenuProps>((props, ref) => {
14+
const { open, setOpen } = props;
15+
const [accountsLoading, setAccountsLoading] = useState(false);
16+
const [selectedAccount, setSelectedAccount] = useState('0');
17+
const [messageBoxOpen, setMessageBoxOpen] = useState(false);
18+
const [userSettingsOpen, setUserSettingsOpen] = useState(false);
19+
20+
const handleChangeAccount: UserMenuPropTypes['onChangeAccount'] = (e) => {
21+
setAccountsLoading(true);
22+
setTimeout(() => {
23+
setSelectedAccount(e.detail.selectedAccount.dataset.key!);
24+
setAccountsLoading(false);
25+
}, 1000);
26+
};
27+
28+
const handleSignOutClick: UserMenuPropTypes['onSignOutClick'] = (e) => {
29+
e.preventDefault();
30+
setMessageBoxOpen(true);
31+
};
32+
33+
const handleMessageBoxClose: MessageBoxPropTypes['onClose'] = (e) => {
34+
if (e === 'OK') {
35+
console.log('Signed out!');
36+
setOpen(false);
37+
}
38+
setMessageBoxOpen(false);
39+
};
40+
41+
const handleSettingsClick = () => {
42+
setUserSettingsOpen(true);
43+
};
44+
45+
return (
46+
<>
47+
<UserMenu
48+
ref={ref}
49+
open={open}
50+
showManageAccount
51+
showOtherAccounts
52+
showEditAccounts
53+
showEditButton
54+
onClose={() => {
55+
setOpen(false);
56+
}}
57+
onAvatarClick={() => {
58+
console.log('Avatar clicked!');
59+
}}
60+
onManageAccountClick={() => {
61+
console.log('Manage Account clicked!');
62+
}}
63+
onEditAccountsClick={() => {
64+
console.log('Edit Account clicked!');
65+
}}
66+
onChangeAccount={handleChangeAccount}
67+
onSignOutClick={handleSignOutClick}
68+
accounts={
69+
<>
70+
<UserMenuAccount
71+
loading={accountsLoading}
72+
avatarSrc="avatar.png"
73+
titleText="Alain Chevalier 1"
74+
subtitleText="[email protected]"
75+
description="Delivery Manager, SAP SE"
76+
data-key="0"
77+
selected={selectedAccount === '0'}
78+
/>
79+
<UserMenuAccount
80+
loading={accountsLoading}
81+
avatarInitials="JW"
82+
titleText="John Walker"
83+
subtitleText="[email protected]"
84+
description="Project Manager"
85+
data-key="1"
86+
selected={selectedAccount === '1'}
87+
/>
88+
<UserMenuAccount
89+
loading={accountsLoading}
90+
avatarInitials="DS"
91+
titleText="David Wilson"
92+
subtitleText="[email protected]"
93+
description="Project Manager"
94+
data-key="2"
95+
selected={selectedAccount === '2'}
96+
/>
97+
</>
98+
}
99+
>
100+
<UserMenuItem icon={actionSettingsIcon} text="Setting" data-id="setting" onClick={handleSettingsClick} />
101+
<UserMenuItem icon={officialServiceIcon} text="Legal Information">
102+
<UserMenuItem text="Terms of Use" data-id="terms-of-use" />
103+
<UserMenuItem text="Private Policy" data-id="privacy-policy" />
104+
</UserMenuItem>
105+
<UserMenuItem icon={messageInformationIcon} text="About" data-id="about" />
106+
</UserMenu>
107+
<MessageBox open={messageBoxOpen} titleText="Sign Out" onClose={handleMessageBoxClose}>
108+
<Text>Are you sure you want to sign out?</Text>
109+
</MessageBox>
110+
{/* conditionally rendered as the dialog could have a lot of content*/}
111+
{userSettingsOpen && <NLUserSettingsDialog open setOpen={setUserSettingsOpen} />}
112+
</>
113+
);
114+
});
115+
116+
NLUserMenu.displayName = 'NLUserMenu';

0 commit comments

Comments
 (0)