sample-webcomponents-angular/src/app/header/header.component.html at 99cb5189f6ba355f51de000dcb41555a073deb30 · UI5/sample-webcomponents-angular · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<header class="app-header">
	<ui5-shellbar primary-title="UI5 Web Components Angular Sample Application"
		show-notifications
		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>
	</ui5-shellbar>

	<ui5-tabcontainer fixed collapsed>
		<ui5-tab text="My Todos"></ui5-tab>
	</ui5-tabcontainer>

	<ui5-popover #themeSettingsPopover
		class="app-bar-theming-popover"
		placement-type="Bottom"
		horizontal-align="Right"
		header-text="Theme"
	>
		<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>
			<ui5-li icon="palette" data-theme="sap_horizon_hcw">SAP Horizon HCW</ui5-li>
			<ui5-li icon="palette" data-theme="sap_fiori_3">SAP Quartz Light</ui5-li>
			<ui5-li icon="palette" data-theme="sap_fiori_3_dark">SAP Quartz Dark</ui5-li>
			<ui5-li icon="palette" data-theme="sap_fiori_3_hcb">SAP Quartz HCB</ui5-li>
			<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/UI5/sample-webcomponents-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>