diff --git a/package-lock.json b/package-lock.json index 42087a4..41a0a19 100644 --- a/package-lock.json +++ b/package-lock.json @@ -35639,4 +35639,4 @@ } } } -} +} \ No newline at end of file diff --git a/src/app/app.component.css b/src/app/app.component.css index c3c63f3..4327bf0 100644 --- a/src/app/app.component.css +++ b/src/app/app.component.css @@ -3,6 +3,9 @@ html, body { margin: 0; height: 100%; background: var(--sapBackgroundColor); + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", + "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", + sans-serif; } .app-content { diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 2b295de..160b265 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -18,14 +18,23 @@ import '@ui5/webcomponents/dist/CustomListItem'; import '@ui5/webcomponents/dist/Panel'; import '@ui5/webcomponents/dist/Dialog'; import '@ui5/webcomponents/dist/Label'; +import '@ui5/webcomponents/dist/Popover'; import '@ui5/webcomponents/dist/TextArea'; import '@ui5/webcomponents/dist/StandardListItem'; import '@ui5/webcomponents/dist/Tab'; import '@ui5/webcomponents/dist/TabContainer'; import '@ui5/webcomponents-fiori/dist/ShellBar'; import '@ui5/webcomponents-fiori/dist/ShellBarItem'; +import '@ui5/webcomponents/dist/Switch'; import '@ui5/webcomponents-icons/dist/palette.js'; import '@ui5/webcomponents-fiori/dist/Assets'; +import '@ui5/webcomponents-icons/dist/settings.js'; +import '@ui5/webcomponents-icons/dist/sys-help.js'; +import '@ui5/webcomponents-icons/dist/log.js'; +import '@ui5/webcomponents-icons/dist/account.js'; +import '@ui5/webcomponents-icons/dist/private.js'; +import '@ui5/webcomponents-icons/dist/loan.js'; +import '@ui5/webcomponents-icons/dist/globe.js'; setTheme('sap_horizon'); @NgModule({ declarations: [ diff --git a/src/app/header/header.component.css b/src/app/header/header.component.css index 4c1f829..dd2d3ae 100644 --- a/src/app/header/header.component.css +++ b/src/app/header/header.component.css @@ -13,4 +13,71 @@ height: 2rem; margin-right: 1rem; margin-left: 2rem; +} + +.app-bar-profile-popover { + width: 250px; +} + +#settings-dialog { + max-width: 300px; +} + +.dialog-button { + display: flex; + justify-content: flex-end; + margin-top: 0.625rem; + margin-bottom: -0.425rem; +} + +.profile-settings, .help-header { + display: flex; + flex-direction: row; + justify-content: flex-start; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + -webkit-box-pack: start; + -ms-flex-pack: start; +} + +.profile-text { + display: flex; + flex-direction: column; + justify-content: center; + margin-left: 1rem; +} + +.app-header-logo { + height: 2rem; +} + +.profile-settings-list { + margin-top: 1.25rem; +} + +.help-dialog-text { + font-size: 0.875rem; +} + +.profile-rtl-switch { + width: 100%; + display: flex; + align-items: center; + justify-content: space-between; +} + +#header-title-align{ + margin: 1rem 0; + gap: 0.225rem; +} + +#header-logo-align { + margin: 0.225rem 3.225rem 0.225rem 0; + align-items: center; + gap: 0.435rem; +} + +#help-dialog::part(header){ + justify-content: flex-start; } \ No newline at end of file diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html index 6039ef3..e8d7464 100644 --- a/src/app/header/header.component.html +++ b/src/app/header/header.component.html @@ -1,7 +1,8 @@ -
+
+ notifications-count="2" + (profileClick)="handleProfileClick($event)"> @@ -17,7 +18,7 @@ horizontal-align="Right" header-text="Theme" > - + SAP Horizon Morning SAP Horizon Evening SAP Horizon HCB @@ -28,4 +29,79 @@ SAP Quartz HCW + + +
+ +
+ John Doe + Angular Developer +
+
+ +
+ + Settings + Help + Sign out + +
+ + + +
+
+
+ RTL +
+ +
+
+ +
+
+ Compact +
+ +
+ +
+ Close +
+ + + + +
+ + Help +
+ +
+ + UI5 Web Components Angular Sample App +
+ +

+ Release: b225.20220729335
+ Server: 31pc212x3132
+ Timestamp: 2022-07-28T10:29:03.159+0200
+ Company ID: SAP
+ UI version: SAP Fiori
+ Edition: Enterprise
+ Admin version: Angular Admin
+

+ For more information, please visit our documentation. +

+ +

+ Close +
+ +
diff --git a/src/app/header/header.component.ts b/src/app/header/header.component.ts index 652c13d..d6d6d0a 100644 --- a/src/app/header/header.component.ts +++ b/src/app/header/header.component.ts @@ -11,6 +11,7 @@ import {setTheme } from '@ui5/webcomponents-base/dist/config/Theme'; export class HeaderComponent implements OnInit { @Input() selectionChange; @ViewChild('themeSettingsPopover') themeSettingsPopover: ElementRef; + @ViewChild('profileSettingsPopover') profileSettingsPopover: ElementRef; constructor() { } @@ -26,4 +27,36 @@ export class HeaderComponent implements OnInit { this.themeSettingsPopover.nativeElement.close(); } + handleProfileClick(event) { + this.profileSettingsPopover.nativeElement.showAt(event.detail.targetRef); + } + + handleProfileSettingsSelect(event) { + const selectedKey = event.detail.item.getAttribute('data-key'); + if (selectedKey === 'settings') { + window['settings-dialog'].show(event.detail.targetRef); + } else if (selectedKey === 'help') { + window['help-dialog'].show(event.detail.targetRef); + } + } + + handleRtlSwitchChange(event) { + document.body.dir = event.target.checked ? 'rtl' : 'ltr'; + } + + handleContentDensitySwitchChange(event) { + if (event.target.checked) { + document.body.classList.add('ui5-content-density-compact'); + } else { + document.body.classList.remove('ui5-content-density-compact'); + } + } + + handleSettingsDialogCloseButtonClick(event) { + window['settings-dialog'].close(); + } + + handleHelpDialogCloseButtonClick(event) { + window['help-dialog'].close(); + } }