Skip to content

Commit

Permalink
feat: menu on profile click
Browse files Browse the repository at this point in the history
  • Loading branch information
ilhan007 authored Aug 23, 2022
2 parents 4bb2719 + 306b6c9 commit 57f3509
Showing 1 changed file with 180 additions and 4 deletions.
184 changes: 180 additions & 4 deletions src/App.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
// UI5 Components
import { setTheme } from "@ui5/webcomponents-base/dist/config/Theme";
import "@ui5/webcomponents-base/dist/features/F6Navigation";
import applyDirection from "@ui5/webcomponents-base/dist/locale/applyDirection.js";
import "@ui5/webcomponents/dist/Button";
import "@ui5/webcomponents/dist/Input";
Expand All @@ -14,9 +15,16 @@
import "@ui5/webcomponents/dist/TabContainer";
import "@ui5/webcomponents-fiori/dist/ShellBar";
import "@ui5/webcomponents-fiori/dist/ShellBarItem";
import "@ui5/webcomponents-icons/dist/palette.js";
import "@ui5/webcomponents-fiori/dist/Assets.js";
import "@ui5/webcomponents/dist/Switch";
import "@ui5/webcomponents-icons/dist/palette.js";
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";
import TodoList from "./lib/TodoList.svelte";
import { todos, doneTodos } from "./stores/stores";
import logo from "./assets/imgs/UI5-orange-pheonix-logo.png";
Expand All @@ -32,6 +40,7 @@
let dialogTextArea;
let dialogDatePicker;
let themeSettingsPopover;
let profileSettingsPopover;
// Create ToDo Fields
let itemInputValue;
Expand All @@ -53,6 +62,40 @@
themeSettingsPopover.close();
};
const handleProfileClick = (event) => {
profileSettingsPopover.showAt(event.detail.targetRef);
};
const 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);
}
};
const handleRtlSwitchChange = (event) => {
document.body.dir = event.target.checked ? "rtl" : "ltr";
applyDirection();
};
const handleContentDensitySwitchChange = (event) => {
if (event.target.checked) {
document.body.classList.add("ui5-content-density-compact");
} else {
document.body.classList.remove("ui5-content-density-compact");
}
};
const handleSettingsDialogCloseButtonClick = (event) => {
window["settings-dialog"].close();
};
const handleHelpDialogCloseButtonClick = (event) => {
window["help-dialog"].close();
};
const handleItemInput = (event) => {
itemInputValue = event.target.value;
};
Expand Down Expand Up @@ -170,7 +213,7 @@

<main class="app">
<header class="app-header">
<ui5-shellbar primary-title={shellBarTitle} show-notifications notifications-count="2">
<ui5-shellbar primary-title={shellBarTitle} show-notifications notifications-count="2" on:profile-click={handleProfileClick}>
<img class="app-header-logo" slot="logo" src={logo} alt="ui5 orange pheonix logo" />
<ui5-shellbar-item icon="palette" text="Theme" on:click={handleThemeSettingsToggle} />
<ui5-avatar slot="profile" size="XS" initials="JD" />
Expand Down Expand Up @@ -230,6 +273,74 @@
<ui5-li icon="palette" data-theme="sap_fiori_3_hcw">SAP Quartz HCW</ui5-li>
</ui5-list>
</ui5-popover>

<ui5-popover bind:this={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" />
<div class="profile-text">
<ui5-title level="H3">John Doe</ui5-title>
<ui5-label>Svelte Developer</ui5-label>
</div>
</div>

<div class="profile-settings-list">
<ui5-list mode="SingleSelect" separators="None" on:item-click={handleProfileSettingsSelect} bind:this={profileSettingsPopover}>
<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 on:change={handleRtlSwitchChange} />
</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 on:change={handleContentDensitySwitchChange} />
</div>

<div class="dialog-button">
<ui5-button on:click={handleSettingsDialogCloseButtonClick} 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" />
Help
</div>

<div class="help-header" id="header-logo-align">
<img class="app-header-logo" alt="logo" slot="logo" src={logo} />
<ui5-title level="H5">UI5 Web Components Svelte Sample App</ui5-title>
</div>

<p class="help-dialog-text">
<b>Release</b>: b225.20220729335 <br />
<b>Server</b>: pk21443x3132 <br />
<b>Timestamp</b>: 2022-08-18T10: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>: Svelte Admin <br />
</p>
<hr />
<span class="help-dialog-text">For more information, please visit our <a href="https://github.com/SAP-samples/ui5-webcomponents-sample-svelte" target="_blank">documentation</a>.</span>
<p />
<div class="dialog-button">
<ui5-button design="Emphasized" on:click={handleHelpDialogCloseButtonClick}>Close</ui5-button>
</div>
</ui5-dialog>
</main>

<style scoped>
Expand All @@ -245,6 +356,9 @@
margin: 0;
height: 100%;
background-color: var(--sapBackgroundColor);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
*:not(:defined) {
Expand Down Expand Up @@ -337,7 +451,7 @@
#add-input,
#date-picker {
margin-bottom: 1rem;
margin-bottom: 0.5rem;
transition: ease-in-out 0.6s;
}
Expand All @@ -351,4 +465,66 @@
width: 100%;
}
}
.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;
}
.profile-text {
display: flex;
flex-direction: column;
justify-content: center;
margin-inline-start: 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;
}
</style>

0 comments on commit 57f3509

Please sign in to comment.