Skip to content

Commit 6ba670d

Browse files
perryd01perryd01
committed
refactor: extract header related components and event handlers
1 parent cc59976 commit 6ba670d

File tree

2 files changed

+253
-228
lines changed

2 files changed

+253
-228
lines changed

‎src/App.svelte‎

Lines changed: 3 additions & 228 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
<script lang="ts">
22
// UI5 Components
3-
import { setTheme } from "@ui5/webcomponents-base/dist/config/Theme";
3+
import { setTheme } from "@ui5/webcomponents-base/dist/config/Theme.js";
44
import "@ui5/webcomponents-base/dist/features/F6Navigation";
5-
import applyDirection from "@ui5/webcomponents-base/dist/locale/applyDirection.js";
65
76
import "@ui5/webcomponents/dist/Button";
87
import "@ui5/webcomponents/dist/Input";
@@ -13,8 +12,6 @@
1312
import "@ui5/webcomponents/dist/Popover";
1413
import "@ui5/webcomponents/dist/Tab";
1514
import "@ui5/webcomponents/dist/TabContainer";
16-
import "@ui5/webcomponents-fiori/dist/ShellBar";
17-
import "@ui5/webcomponents-fiori/dist/ShellBarItem";
1815
import "@ui5/webcomponents-fiori/dist/Assets.js";
1916
import "@ui5/webcomponents/dist/Switch";
2017
import "@ui5/webcomponents-icons/dist/palette.js";
@@ -27,23 +24,18 @@
2724
import "@ui5/webcomponents-icons/dist/globe.js";
2825
import TodoList from "./lib/TodoList.svelte";
2926
import { todos, doneTodos } from "./stores/stores";
30-
import logo from "./assets/imgs/UI5-orange-pheonix-logo.png";
3127
import type { TodoItemT } from "./types/TodoItem.type";
32-
import { references } from "./stores/stores.svelte";
3328
import Dialog from "@ui5/webcomponents/dist/Dialog.js";
34-
import Popover from "@ui5/webcomponents/dist/Popover.js";
29+
import Header from "./lib/Header.svelte";
3530
3631
setTheme("sap_horizon");
3732
38-
const shellBarTitle: string = "UI5 Web Components Svelte Sample Application";
3933
const dialogHeaderText: string = "Edit Todo";
4034
4135
// Elements
4236
let dialog = $state<Dialog | null>();
4337
let dialogTextArea = $state();
4438
let dialogDatePicker = $state();
45-
let themeSettingsPopover = $state<Popover | null>(null);
46-
let profileSettingsPopover = $state<Popover | null>(null);
4739
4840
// Create ToDo Fields
4941
let itemInputValue;
@@ -56,65 +48,6 @@
5648
5749
// Event Handlers
5850
59-
const handleThemeSettingsToggle = (event) => {
60-
if (themeSettingsPopover) {
61-
themeSettingsPopover.opener = event.detail.targetRef;
62-
themeSettingsPopover.open = !themeSettingsPopover.open;
63-
}
64-
};
65-
66-
const handleThemeChange = (event) => {
67-
setTheme(event.detail.selectedItems[0].getAttribute("data-theme"));
68-
if (themeSettingsPopover) {
69-
themeSettingsPopover.open = false;
70-
}
71-
};
72-
73-
const handleProfileClick = (event) => {
74-
if (profileSettingsPopover) {
75-
profileSettingsPopover.opener = event.detail.targetRef;
76-
profileSettingsPopover.open = !profileSettingsPopover.open;
77-
}
78-
};
79-
80-
const handleProfileSettingsSelect = (event) => {
81-
const selectedKey = event.detail.item.getAttribute("data-key");
82-
if (selectedKey === "settings") {
83-
if (references.dialog.settings) {
84-
references.dialog.settings.open = true;
85-
}
86-
} else if (selectedKey === "help") {
87-
if (references.dialog.help) {
88-
references.dialog.help.open = true;
89-
}
90-
}
91-
};
92-
93-
const handleRtlSwitchChange = (event) => {
94-
document.body.dir = event.target.checked ? "rtl" : "ltr";
95-
applyDirection();
96-
};
97-
98-
const handleContentDensitySwitchChange = (event) => {
99-
if (event.target.checked) {
100-
document.body.classList.add("ui5-content-density-compact");
101-
} else {
102-
document.body.classList.remove("ui5-content-density-compact");
103-
}
104-
};
105-
106-
const handleSettingsDialogCloseButtonClick = () => {
107-
if (references.dialog.settings) {
108-
references.dialog.settings.open = false;
109-
}
110-
};
111-
112-
const handleHelpDialogCloseButtonClick = () => {
113-
if (references.dialog.help) {
114-
references.dialog.help.open = false;
115-
}
116-
};
117-
11851
const handleItemInput = (event) => {
11952
itemInputValue = event.target.value;
12053
};
@@ -237,13 +170,7 @@
237170
</script>
238171

239172
<main class="app">
240-
<header class="app-header">
241-
<ui5-shellbar primary-title={shellBarTitle} show-notifications notifications-count="2" onprofile-click={handleProfileClick}>
242-
<img class="app-header-logo" slot="logo" src={logo} alt="ui5 orange pheonix logo" />
243-
<ui5-shellbar-item icon="palette" text="Theme" onclick={handleThemeSettingsToggle}></ui5-shellbar-item>
244-
<ui5-avatar slot="profile" size="XS" initials="JD"></ui5-avatar>
245-
</ui5-shellbar>
246-
</header>
173+
<Header />
247174

248175
<ui5-tabcontainer collapsed>
249176
<ui5-tab text="My Todos"></ui5-tab>
@@ -285,87 +212,6 @@
285212
<ui5-button class="dialog-footer-btn--save" design="Emphasized" onclick={saveEdits}>Save</ui5-button>
286213
</div>
287214
</ui5-dialog>
288-
289-
<ui5-popover bind:this={themeSettingsPopover} class="app-bar-theming-popover" placement="Bottom" horizontal-align="End" header-text="Theme">
290-
<ui5-list selection-mode="Single" onselection-change={handleThemeChange}>
291-
<ui5-li icon="palette" data-theme="sap_horizon" selected>SAP Horizon Morning</ui5-li>
292-
<ui5-li icon="palette" data-theme="sap_horizon_dark">SAP Horizon Evening</ui5-li>
293-
<ui5-li icon="palette" data-theme="sap_horizon_hcb">SAP Horizon HCB</ui5-li>
294-
<ui5-li icon="palette" data-theme="sap_horizon_hcw">SAP Horizon HCW</ui5-li>
295-
<ui5-li icon="palette" data-theme="sap_fiori_3">SAP Quartz Light</ui5-li>
296-
<ui5-li icon="palette" data-theme="sap_fiori_3_dark">SAP Quartz Dark</ui5-li>
297-
<ui5-li icon="palette" data-theme="sap_fiori_3_hcb">SAP Quartz HCB</ui5-li>
298-
<ui5-li icon="palette" data-theme="sap_fiori_3_hcw">SAP Quartz HCW</ui5-li>
299-
</ui5-list>
300-
</ui5-popover>
301-
302-
<ui5-popover bind:this={profileSettingsPopover} id="profile-pop" class="app-bar-profile-popover" placement="Bottom" horizontal-align="End">
303-
<div class="profile-settings">
304-
<ui5-avatar size="M" initials="JD"></ui5-avatar>
305-
<div class="profile-text">
306-
<ui5-title level="H3">John Doe</ui5-title>
307-
<ui5-label>Svelte Developer</ui5-label>
308-
</div>
309-
</div>
310-
311-
<div class="profile-settings-list">
312-
<ui5-list selection-mode="Single" separators="None" onitem-click={handleProfileSettingsSelect} bind:this={profileSettingsPopover}>
313-
<ui5-li icon="settings" data-key="settings">Settings</ui5-li>
314-
<ui5-li icon="sys-help" data-key="help">Help</ui5-li>
315-
<ui5-li icon="log" data-key="sign-out">Sign out</ui5-li>
316-
</ui5-list>
317-
</div>
318-
</ui5-popover>
319-
320-
<ui5-dialog bind:this={references.dialog.settings} header-text="Profile Settings" draggable>
321-
<div>
322-
<div class="profile-rtl-switch centered">
323-
<div class="profile-rtl-switch-title">
324-
<ui5-label class="profile-rtl-switch-text">RTL</ui5-label>
325-
</div>
326-
<ui5-switch onchange={handleRtlSwitchChange}></ui5-switch>
327-
</div>
328-
</div>
329-
330-
<div class="profile-rtl-switch centered">
331-
<div class="profile-rtl-switch-title">
332-
<ui5-label class="profile-rtl-switch-text">Compact</ui5-label>
333-
</div>
334-
<ui5-switch onchange={handleContentDensitySwitchChange}></ui5-switch>
335-
</div>
336-
337-
<div class="dialog-button">
338-
<ui5-button onclick={handleSettingsDialogCloseButtonClick} design="Emphasized">Close</ui5-button>
339-
</div>
340-
</ui5-dialog>
341-
342-
<ui5-dialog bind:this={references.dialog.help}>
343-
<div slot="header" class="help-header" id="header-title-align">
344-
<ui5-icon name="sys-help"></ui5-icon>
345-
Help
346-
</div>
347-
348-
<div class="help-header" id="header-logo-align">
349-
<img class="app-header-logo" alt="logo" slot="logo" src={logo} />
350-
<ui5-title level="H5">UI5 Web Components Svelte Sample App</ui5-title>
351-
</div>
352-
353-
<p class="help-dialog-text">
354-
<b>Release</b>: b225.20220729335 <br />
355-
<b>Server</b>: pk21443x3132 <br />
356-
<b>Timestamp</b>: 2022-08-18T10:29:03.159+0200 <br />
357-
<b>Company ID</b>: SAP <br />
358-
<b>UI version</b>: SAP Fiori <br />
359-
<b>Edition</b>: Enterprise <br />
360-
<b>Admin version</b>: Svelte Admin <br />
361-
</p>
362-
<hr />
363-
<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>
364-
<p></p>
365-
<div class="dialog-button">
366-
<ui5-button design="Emphasized" onclick={handleHelpDialogCloseButtonClick}>Close</ui5-button>
367-
</div>
368-
</ui5-dialog>
369215
</main>
370216

371217
<style scoped>
@@ -400,15 +246,6 @@
400246
width: calc(100% - 2rem);
401247
}
402248
403-
.app-header-logo {
404-
height: 2rem;
405-
max-height: 2rem;
406-
}
407-
408-
.app-bar-theming-popover {
409-
width: 250px;
410-
}
411-
412249
.create-todo-wrapper {
413250
display: flex;
414251
align-items: center;
@@ -490,66 +327,4 @@
490327
width: 100%;
491328
}
492329
}
493-
.app-bar-profile-popover {
494-
width: 250px;
495-
}
496-
497-
#settings-dialog {
498-
max-width: 300px;
499-
}
500-
501-
.dialog-button {
502-
display: flex;
503-
justify-content: flex-end;
504-
margin-top: 0.625rem;
505-
margin-bottom: -0.425rem;
506-
}
507-
508-
.profile-settings,
509-
.help-header {
510-
display: flex;
511-
flex-direction: row;
512-
justify-content: flex-start;
513-
}
514-
515-
.profile-text {
516-
display: flex;
517-
flex-direction: column;
518-
justify-content: center;
519-
margin-inline-start: 1rem;
520-
}
521-
522-
.app-header-logo {
523-
height: 2rem;
524-
}
525-
526-
.profile-settings-list {
527-
margin-top: 1.25rem;
528-
}
529-
530-
.help-dialog-text {
531-
font-size: 0.875rem;
532-
}
533-
534-
.profile-rtl-switch {
535-
width: 100%;
536-
display: flex;
537-
align-items: center;
538-
justify-content: space-between;
539-
}
540-
541-
#header-title-align {
542-
margin: 1rem 0;
543-
gap: 0.225rem;
544-
}
545-
546-
#header-logo-align {
547-
margin: 0.225rem 3.225rem 0.225rem 0;
548-
align-items: center;
549-
gap: 0.435rem;
550-
}
551-
552-
#help-dialog::part(header) {
553-
justify-content: flex-start;
554-
}
555330
</style>

0 commit comments

Comments
 (0)