Skip to content

feat: profile menu on click #79

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Aug 22, 2022
Merged

feat: profile menu on click #79

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a3ffaed
feat: profile menu on click
hinzzx Aug 16, 2022
cbf32c3
fix: lint fixes
hinzzx Aug 16, 2022
02c8c8f
chore: updated header-text for help dialog
hinzzx Aug 22, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 3 additions & 0 deletions src/app/app.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
9 changes: 9 additions & 0 deletions src/app/app.module.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: [
Expand Down
67 changes: 67 additions & 0 deletions src/app/header/header.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
82 changes: 79 additions & 3 deletions src/app/header/header.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
<header className="app-header">
<header class="app-header">
<ui5-shellbar primary-title="UI5 Web Components Angular Sample Application"
show-notifications
notifications-count="2">
notifications-count="2"
(profileClick)="handleProfileClick($event)">
<img src="./assets/images/logo.png" slot="logo">
<ui5-shellbar-item icon="palette" text="Theme" ref="themeChangeItem" (click)="handleThemeSettingsToggle($event)"></ui5-shellbar-item>
<ui5-avatar slot="profile" size="XS" initials="JD"></ui5-avatar>
Expand All @@ -17,7 +18,7 @@
horizontal-align="Right"
header-text="Theme"
>
<ui5-list #themeSelect mode="SingleSelect"(selectionChange)="handleThemeChange($event)">
<ui5-list #themeSelect mode="SingleSelect" (selectionChange)="handleThemeChange($event)">
<ui5-li icon="palette" data-theme="sap_horizon" selected>SAP Horizon Morning</ui5-li>
<ui5-li icon="palette" data-theme="sap_horizon_dark">SAP Horizon Evening</ui5-li>
<ui5-li icon="palette" data-theme="sap_horizon_hcb">SAP Horizon HCB</ui5-li>
Expand All @@ -28,4 +29,79 @@
<ui5-li icon="palette" data-theme="sap_fiori_3_hcw">SAP Quartz HCW</ui5-li>
</ui5-list>
</ui5-popover>

<ui5-popover #profileSettingsPopover
id="profile-pop"
class="app-bar-profile-popover"
placement-type="Bottom"
horizontal-align="Right"
>
<div class="profile-settings">
<ui5-avatar size="M" initials="JD"></ui5-avatar>
<div class="profile-text">
<ui5-title level="H3">John Doe</ui5-title>
<ui5-label>Angular Developer</ui5-label>
</div>
</div>

<div class="profile-settings-list">
<ui5-list mode="SingleSelect" separators="None" (itemClick)="handleProfileSettingsSelect($event)">
<ui5-li icon="settings" data-key="settings">Settings</ui5-li>
<ui5-li icon="sys-help" data-key="help">Help</ui5-li>
<ui5-li icon="log" data-key="sign-out">Sign out</ui5-li>
</ui5-list>
</div>
</ui5-popover>

<ui5-dialog id="settings-dialog" header-text="Profile Settings" draggable>
<div>
<div class="profile-rtl-switch centered">
<div class="profile-rtl-switch-title">
<ui5-label class="profile-rtl-switch-text">RTL</ui5-label>
</div>
<ui5-switch (change)="handleRtlSwitchChange($event)"></ui5-switch>
</div>
</div>

<div class="profile-rtl-switch centered">
<div class="profile-rtl-switch-title">
<ui5-label class="profile-rtl-switch-text">Compact</ui5-label>
</div>
<ui5-switch (change)="handleContentDensitySwitchChange($event)"></ui5-switch>
</div>

<div class="dialog-button">
<ui5-button (click)="handleSettingsDialogCloseButtonClick($event)" design="Emphasized" >Close</ui5-button>
</div>
</ui5-dialog>

<ui5-dialog id="help-dialog">

<div slot="header" class="help-header" id="header-title-align">
<ui5-icon name="sys-help"></ui5-icon>
Help
</div>

<div class="help-header" id="header-logo-align">
<img class="app-header-logo" alt="logo" slot="logo" src="../../assets/images/logo.png" />
<ui5-title level="H5">UI5 Web Components Angular Sample App</ui5-title>
</div>

<p class="help-dialog-text">
<b>Release</b>: b225.20220729335 <br>
<b>Server</b>: 31pc212x3132 <br>
<b>Timestamp</b>: 2022-07-28T10:29:03.159+0200 <br>
<b>Company ID</b>: SAP <br>
<b>UI version</b>: SAP Fiori <br>
<b>Edition</b>: Enterprise <br>
<b>Admin version</b>: Angular Admin <br>
<hr />
<span class="help-dialog-text">For more information, please visit our <a href="https://github.com/SAP-samples/ui5-webcomponents-sample-angular" target="_blank">documentation</a>.</span>
<p>

<div class="dialog-button">
<ui5-button design="Emphasized" (click)="handleHelpDialogCloseButtonClick($event)">Close</ui5-button>
</div>

</ui5-dialog>
</header>
33 changes: 33 additions & 0 deletions src/app/header/header.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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() { }

Expand All @@ -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();
}
}