Skip to content

Commit 306b6c9

Browse files
hinzzxhinzzx
committed
feat: menu on profile click
1 parent 03085a1 commit 306b6c9

File tree

1 file changed

+180
-4
lines changed

1 file changed

+180
-4
lines changed

‎src/App.svelte‎

Lines changed: 180 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
// UI5 Components
33
import { setTheme } from "@ui5/webcomponents-base/dist/config/Theme";
44
import "@ui5/webcomponents-base/dist/features/F6Navigation";
5+
import applyDirection from "@ui5/webcomponents-base/dist/locale/applyDirection.js";
56
67
import "@ui5/webcomponents/dist/Button";
78
import "@ui5/webcomponents/dist/Input";
@@ -14,9 +15,16 @@
1415
import "@ui5/webcomponents/dist/TabContainer";
1516
import "@ui5/webcomponents-fiori/dist/ShellBar";
1617
import "@ui5/webcomponents-fiori/dist/ShellBarItem";
17-
import "@ui5/webcomponents-icons/dist/palette.js";
1818
import "@ui5/webcomponents-fiori/dist/Assets.js";
19-
19+
import "@ui5/webcomponents/dist/Switch";
20+
import "@ui5/webcomponents-icons/dist/palette.js";
21+
import "@ui5/webcomponents-icons/dist/settings.js";
22+
import "@ui5/webcomponents-icons/dist/sys-help.js";
23+
import "@ui5/webcomponents-icons/dist/log.js";
24+
import "@ui5/webcomponents-icons/dist/account.js";
25+
import "@ui5/webcomponents-icons/dist/private.js";
26+
import "@ui5/webcomponents-icons/dist/loan.js";
27+
import "@ui5/webcomponents-icons/dist/globe.js";
2028
import TodoList from "./lib/TodoList.svelte";
2129
import { todos, doneTodos } from "./stores/stores";
2230
import logo from "./assets/imgs/UI5-orange-pheonix-logo.png";
@@ -32,6 +40,7 @@
3240
let dialogTextArea;
3341
let dialogDatePicker;
3442
let themeSettingsPopover;
43+
let profileSettingsPopover;
3544
3645
// Create ToDo Fields
3746
let itemInputValue;
@@ -53,6 +62,40 @@
5362
themeSettingsPopover.close();
5463
};
5564
65+
const handleProfileClick = (event) => {
66+
profileSettingsPopover.showAt(event.detail.targetRef);
67+
};
68+
69+
const handleProfileSettingsSelect = (event) => {
70+
const selectedKey = event.detail.item.getAttribute("data-key");
71+
if (selectedKey === "settings") {
72+
window["settings-dialog"].show(event.detail.targetRef);
73+
} else if (selectedKey === "help") {
74+
window["help-dialog"].show(event.detail.targetRef);
75+
}
76+
};
77+
78+
const handleRtlSwitchChange = (event) => {
79+
document.body.dir = event.target.checked ? "rtl" : "ltr";
80+
applyDirection();
81+
};
82+
83+
const handleContentDensitySwitchChange = (event) => {
84+
if (event.target.checked) {
85+
document.body.classList.add("ui5-content-density-compact");
86+
} else {
87+
document.body.classList.remove("ui5-content-density-compact");
88+
}
89+
};
90+
91+
const handleSettingsDialogCloseButtonClick = (event) => {
92+
window["settings-dialog"].close();
93+
};
94+
95+
const handleHelpDialogCloseButtonClick = (event) => {
96+
window["help-dialog"].close();
97+
};
98+
5699
const handleItemInput = (event) => {
57100
itemInputValue = event.target.value;
58101
};
@@ -170,7 +213,7 @@
170213

171214
<main class="app">
172215
<header class="app-header">
173-
<ui5-shellbar primary-title={shellBarTitle} show-notifications notifications-count="2">
216+
<ui5-shellbar primary-title={shellBarTitle} show-notifications notifications-count="2" on:profile-click={handleProfileClick}>
174217
<img class="app-header-logo" slot="logo" src={logo} alt="ui5 orange pheonix logo" />
175218
<ui5-shellbar-item icon="palette" text="Theme" on:click={handleThemeSettingsToggle} />
176219
<ui5-avatar slot="profile" size="XS" initials="JD" />
@@ -230,6 +273,74 @@
230273
<ui5-li icon="palette" data-theme="sap_fiori_3_hcw">SAP Quartz HCW</ui5-li>
231274
</ui5-list>
232275
</ui5-popover>
276+
277+
<ui5-popover bind:this={profileSettingsPopover} id="profile-pop" class="app-bar-profile-popover" placement-type="Bottom" horizontal-align="Right">
278+
<div class="profile-settings">
279+
<ui5-avatar size="M" initials="JD" />
280+
<div class="profile-text">
281+
<ui5-title level="H3">John Doe</ui5-title>
282+
<ui5-label>Svelte Developer</ui5-label>
283+
</div>
284+
</div>
285+
286+
<div class="profile-settings-list">
287+
<ui5-list mode="SingleSelect" separators="None" on:item-click={handleProfileSettingsSelect} bind:this={profileSettingsPopover}>
288+
<ui5-li icon="settings" data-key="settings">Settings</ui5-li>
289+
<ui5-li icon="sys-help" data-key="help">Help</ui5-li>
290+
<ui5-li icon="log" data-key="sign-out">Sign out</ui5-li>
291+
</ui5-list>
292+
</div>
293+
</ui5-popover>
294+
295+
<ui5-dialog id="settings-dialog" header-text="Profile Settings" draggable>
296+
<div>
297+
<div class="profile-rtl-switch centered">
298+
<div class="profile-rtl-switch-title">
299+
<ui5-label class="profile-rtl-switch-text">RTL</ui5-label>
300+
</div>
301+
<ui5-switch on:change={handleRtlSwitchChange} />
302+
</div>
303+
</div>
304+
305+
<div class="profile-rtl-switch centered">
306+
<div class="profile-rtl-switch-title">
307+
<ui5-label class="profile-rtl-switch-text">Compact</ui5-label>
308+
</div>
309+
<ui5-switch on:change={handleContentDensitySwitchChange} />
310+
</div>
311+
312+
<div class="dialog-button">
313+
<ui5-button on:click={handleSettingsDialogCloseButtonClick} design="Emphasized">Close</ui5-button>
314+
</div>
315+
</ui5-dialog>
316+
317+
<ui5-dialog id="help-dialog">
318+
<div slot="header" class="help-header" id="header-title-align">
319+
<ui5-icon name="sys-help" />
320+
Help
321+
</div>
322+
323+
<div class="help-header" id="header-logo-align">
324+
<img class="app-header-logo" alt="logo" slot="logo" src={logo} />
325+
<ui5-title level="H5">UI5 Web Components Svelte Sample App</ui5-title>
326+
</div>
327+
328+
<p class="help-dialog-text">
329+
<b>Release</b>: b225.20220729335 <br />
330+
<b>Server</b>: pk21443x3132 <br />
331+
<b>Timestamp</b>: 2022-08-18T10:29:03.159+0200 <br />
332+
<b>Company ID</b>: SAP <br />
333+
<b>UI version</b>: SAP Fiori <br />
334+
<b>Edition</b>: Enterprise <br />
335+
<b>Admin version</b>: Svelte Admin <br />
336+
</p>
337+
<hr />
338+
<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>
339+
<p />
340+
<div class="dialog-button">
341+
<ui5-button design="Emphasized" on:click={handleHelpDialogCloseButtonClick}>Close</ui5-button>
342+
</div>
343+
</ui5-dialog>
233344
</main>
234345

235346
<style scoped>
@@ -245,6 +356,9 @@
245356
margin: 0;
246357
height: 100%;
247358
background-color: var(--sapBackgroundColor);
359+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
360+
-webkit-font-smoothing: antialiased;
361+
-moz-osx-font-smoothing: grayscale;
248362
}
249363
250364
*:not(:defined) {
@@ -337,7 +451,7 @@
337451
338452
#add-input,
339453
#date-picker {
340-
margin-bottom: 1rem;
454+
margin-bottom: 0.5rem;
341455
transition: ease-in-out 0.6s;
342456
}
343457
@@ -351,4 +465,66 @@
351465
width: 100%;
352466
}
353467
}
468+
.app-bar-profile-popover {
469+
width: 250px;
470+
}
471+
472+
#settings-dialog {
473+
max-width: 300px;
474+
}
475+
476+
.dialog-button {
477+
display: flex;
478+
justify-content: flex-end;
479+
margin-top: 0.625rem;
480+
margin-bottom: -0.425rem;
481+
}
482+
483+
.profile-settings,
484+
.help-header {
485+
display: flex;
486+
flex-direction: row;
487+
justify-content: flex-start;
488+
}
489+
490+
.profile-text {
491+
display: flex;
492+
flex-direction: column;
493+
justify-content: center;
494+
margin-inline-start: 1rem;
495+
}
496+
497+
.app-header-logo {
498+
height: 2rem;
499+
}
500+
501+
.profile-settings-list {
502+
margin-top: 1.25rem;
503+
}
504+
505+
.help-dialog-text {
506+
font-size: 0.875rem;
507+
}
508+
509+
.profile-rtl-switch {
510+
width: 100%;
511+
display: flex;
512+
align-items: center;
513+
justify-content: space-between;
514+
}
515+
516+
#header-title-align {
517+
margin: 1rem 0;
518+
gap: 0.225rem;
519+
}
520+
521+
#header-logo-align {
522+
margin: 0.225rem 3.225rem 0.225rem 0;
523+
align-items: center;
524+
gap: 0.435rem;
525+
}
526+
527+
#help-dialog::part(header) {
528+
justify-content: flex-start;
529+
}
354530
</style>

0 commit comments

Comments
 (0)