Skip to content

Commit 7ad0514

Browse files
SvilenDarvenyashkiSvilenDarvenyashki
committed
chore(ui5-user-settings): resolve comments
1 parent 945a3a6 commit 7ad0514

4 files changed

Lines changed: 57 additions & 38 deletions

File tree

‎packages/website/docs/_samples/fiori/UserSettingsDialog/Basic/main.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
11
import "@ui5/webcomponents-fiori/dist/UserSettingsAccountView.js";
2+
import "@ui5/webcomponents-fiori/dist/UserSettingsAppearanceView.js";
3+
import "@ui5/webcomponents-fiori/dist/UserSettingsAppearanceViewItem.js";
4+
import "@ui5/webcomponents-fiori/dist/UserSettingsAppearanceViewGroup.js";
25
import "@ui5/webcomponents-fiori/dist/UserSettingsView.js";
36
import "@ui5/webcomponents-fiori/dist/UserSettingsItem.js";
47
import "@ui5/webcomponents-fiori/dist/UserSettingsDialog.js";
@@ -38,6 +41,8 @@ const settingsDialog = document.getElementById("settings");
3841
const settingsDialogItems = [...document.getElementsByTagName("ui5-user-settings-item")];
3942
const account = document.getElementById("account");
4043
const resetAllButton = document.getElementById("reset-all-button");
44+
// Theme change
45+
const appearanceView = document.getElementById("appearanceView");
4146
//Language and Region
4247
const languageRegion = document.getElementById("language-region-container");
4348
const language = document.getElementById("language");
@@ -94,6 +99,15 @@ language.addEventListener("selection-change", function (event) {
9499
additionalDialog.open = true;
95100
});
96101

102+
// Theme change
103+
appearanceView.addEventListener("selection-change", (e) => {
104+
const selectedItem = e.detail.item;
105+
106+
if (selectedItem?.itemKey) {
107+
window["sap-ui-webcomponents-bundle"].configuration.setTheme(selectedItem.itemKey);
108+
}
109+
});
110+
97111
dialogClosers.forEach(btn => {
98112
btn.addEventListener("click", () => {
99113
additionalDialog.open = false;

‎packages/website/docs/_samples/fiori/UserSettingsDialog/Basic/sample.html‎

Lines changed: 14 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -57,25 +57,20 @@
5757
</ui5-user-settings-item>
5858

5959
<ui5-user-settings-item icon="palette" text="Appearance" tooltip="Appearance" header-text="Appearance">
60-
<ui5-user-settings-view text="Themes" slot="tabs">
61-
<ui5-list separators="Inner">
62-
<ui5-li icon="palette">SAP Morning Horizon</ui5-li>
63-
<ui5-li icon="palette">SAP Evening Horizon</ui5-li>
64-
<ui5-li icon="palette">SAP High Contrast Black (SAP Horizon)</ui5-li>
65-
<ui5-li icon="palette">SAP High Contrast White (SAP Horizon)</ui5-li>
66-
</ui5-list>
67-
<ui5-button id="themeSave" class="save-btn" design="Emphasized">Save</ui5-button>
68-
<ui5-toast design="Emphasized">Changes applied.</ui5-toast>
69-
</ui5-user-settings-view>
70-
<ui5-user-settings-view text="Display settings" slot="tabs">
71-
<ui5-checkbox checked text="Optimized for Touch Input"></ui5-checkbox>
72-
<ui5-panel fixed>
73-
<ui5-label>
74-
Increases the size and spacing of controls to allow you to interact with them more easily using your fingertip.
75-
This is useful for hybrid devices that combine touch and mouse events.
76-
</ui5-label>
77-
</ui5-panel>
78-
</ui5-user-settings-view>
60+
<ui5-user-settings-appearance-view text="Themes">
61+
<ui5-user-settings-appearance-view-group header-text="SAP Horizon">
62+
<ui5-user-settings-appearance-view-item item-key="sap_horizon" text="SAP Morning Horizon"></ui5-user-settings-appearance-view-item>
63+
<ui5-user-settings-appearance-view-item item-key="sap_horizon_dark" text="SAP Evening Horizon"></ui5-user-settings-appearance-view-item>
64+
<ui5-user-settings-appearance-view-item item-key="sap_horizon_hcb" text="SAP Horizon High Contrast Black"></ui5-user-settings-appearance-view-item>
65+
<ui5-user-settings-appearance-view-item item-key="sap_horizon_hcw" text="SAP Horizon High Contrast White"></ui5-user-settings-appearance-view-item>
66+
</ui5-user-settings-appearance-view-group>
67+
<ui5-user-settings-appearance-view-group header-text="SAP Quartz">
68+
<ui5-user-settings-appearance-view-item item-key="sap_fiori_3" text="SAP Quartz Light"></ui5-user-settings-appearance-view-item>
69+
<ui5-user-settings-appearance-view-item item-key="sap_fiori_3_dark" text="SAP Quartz Dark"></ui5-user-settings-appearance-view-item>
70+
<ui5-user-settings-appearance-view-item item-key="sap_fiori_3_hcb" text="SAP Quartz High Contrast Black"></ui5-user-settings-appearance-view-item>
71+
<ui5-user-settings-appearance-view-item item-key="sap_fiori_3_hcw" text="SAP Quartz High Contrast White"></ui5-user-settings-appearance-view-item>
72+
</ui5-user-settings-appearance-view-group>
73+
</ui5-user-settings-appearance-view>
7974
</ui5-user-settings-item>
8075

8176
<ui5-user-settings-item text="Language and Region" tooltip="Language and Region" header-text="Language and Region">

‎packages/website/docs/_samples/patterns/UXCIntegration/Basic/main.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,9 @@ import "@ui5/webcomponents-fiori/dist/UserMenuAccount.js";
4646
import "@ui5/webcomponents-fiori/dist/UserMenuItem.js";
4747

4848
import "@ui5/webcomponents-fiori/dist/UserSettingsAccountView.js";
49+
import "@ui5/webcomponents-fiori/dist/UserSettingsAppearanceView.js";
50+
import "@ui5/webcomponents-fiori/dist/UserSettingsAppearanceViewItem.js";
51+
import "@ui5/webcomponents-fiori/dist/UserSettingsAppearanceViewGroup.js";
4952
import "@ui5/webcomponents-fiori/dist/UserSettingsView.js";
5053
import "@ui5/webcomponents-fiori/dist/UserSettingsItem.js";
5154
import "@ui5/webcomponents-fiori/dist/UserSettingsDialog.js";
@@ -275,6 +278,9 @@ userMenu.addEventListener("sign-out-click", function (event) {
275278
const settingsDialog = document.getElementById("settings");
276279
const settingsDialogItems = [...document.getElementsByTagName("ui5-user-settings-item")];
277280

281+
// Theme change
282+
const appearanceView = document.querySelector("ui5-user-settings-appearance-view");
283+
278284
//Language and Region
279285
const languageRegion = document.getElementById("language-region-container");
280286
const language = document.getElementById("language");
@@ -311,6 +317,15 @@ regionSettings.forEach((settingsItem) => {
311317
});
312318
});
313319

320+
// Theme change
321+
appearanceView.addEventListener("selection-change", (e) => {
322+
const selectedItem = e.detail.item;
323+
324+
if (selectedItem?.itemKey) {
325+
window["sap-ui-webcomponents-bundle"].configuration.setTheme(selectedItem.itemKey);
326+
}
327+
});
328+
314329
mobile1Button.addEventListener("click", function () {
315330
mobileSecondPage.selected = true;
316331
mobileSecondPage.text = "iOS";

‎packages/website/docs/_samples/patterns/UXCIntegration/Basic/sample.html‎

Lines changed: 14 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -288,25 +288,20 @@
288288
</ui5-user-settings-item>
289289

290290
<ui5-user-settings-item icon="palette" text="Appearance" tooltip="Appearance" header-text="Appearance">
291-
<ui5-user-settings-view text="Themes" slot="tabs">
292-
<ui5-list separators="Inner" selection-mode="Single">
293-
<ui5-li icon="palette" selected>SAP Morning Horizon</ui5-li>
294-
<ui5-li icon="palette">SAP Evening Horizon</ui5-li>
295-
<ui5-li icon="palette">SAP High Contrast Black (SAP Horizon)</ui5-li>
296-
<ui5-li icon="palette">SAP High Contrast White (SAP Horizon)</ui5-li>
297-
</ui5-list>
298-
<ui5-button id="themeSave" class="save-btn" design="Emphasized">Save</ui5-button>
299-
<ui5-toast id="toastThemeSave">Changes applied.</ui5-toast>
300-
</ui5-user-settings-view>
301-
<ui5-user-settings-view text="Display settings" slot="tabs">
302-
<ui5-checkbox checked text="Optimized for Touch Input"></ui5-checkbox>
303-
<ui5-panel fixed>
304-
<ui5-label>
305-
Increases the size and spacing of controls to allow you to interact with them more easily using your fingertip.
306-
This is useful for hybrid devices that combine touch and mouse events.
307-
</ui5-label>
308-
</ui5-panel>
309-
</ui5-user-settings-view>
291+
<ui5-user-settings-appearance-view text="Themes">
292+
<ui5-user-settings-appearance-view-group header-text="SAP Horizon">
293+
<ui5-user-settings-appearance-view-item item-key="sap_horizon" text="SAP Morning Horizon"></ui5-user-settings-appearance-view-item>
294+
<ui5-user-settings-appearance-view-item item-key="sap_horizon_dark" text="SAP Evening Horizon"></ui5-user-settings-appearance-view-item>
295+
<ui5-user-settings-appearance-view-item item-key="sap_horizon_hcb" text="SAP Horizon High Contrast Black"></ui5-user-settings-appearance-view-item>
296+
<ui5-user-settings-appearance-view-item item-key="sap_horizon_hcw" text="SAP Horizon High Contrast White"></ui5-user-settings-appearance-view-item>
297+
</ui5-user-settings-appearance-view-group>
298+
<ui5-user-settings-appearance-view-group header-text="SAP Quartz">
299+
<ui5-user-settings-appearance-view-item item-key="sap_fiori_3" text="SAP Quartz Light"></ui5-user-settings-appearance-view-item>
300+
<ui5-user-settings-appearance-view-item item-key="sap_fiori_3_dark" text="SAP Quartz Dark"></ui5-user-settings-appearance-view-item>
301+
<ui5-user-settings-appearance-view-item item-key="sap_fiori_3_hcb" text="SAP Quartz High Contrast Black"></ui5-user-settings-appearance-view-item>
302+
<ui5-user-settings-appearance-view-item item-key="sap_fiori_3_hcw" text="SAP Quartz High Contrast White"></ui5-user-settings-appearance-view-item>
303+
</ui5-user-settings-appearance-view-group>
304+
<ui5-user-settings-appearance-view text="Themes">
310305
</ui5-user-settings-item>
311306

312307
<ui5-user-settings-item text="Language and Region" tooltip="Language and Region" header-text="Language and Region">

0 commit comments

Comments
 (0)