diff --git a/packages/fiori/test/pages/UserSettingsDialog.html b/packages/fiori/test/pages/UserSettingsDialog.html index 07b21676955a..d31175449beb 100644 --- a/packages/fiori/test/pages/UserSettingsDialog.html +++ b/packages/fiori/test/pages/UserSettingsDialog.html @@ -79,41 +79,117 @@ - + -
-
- Language and Region: - - - - - - +
+ Display Language: + + + + + + + + + + + + + + + Region: + + + + + + + + + + + + + + Date Format: + + + + + + + + + + + + Time Format: + + + + + + + + Time Zone: + + + + + + + + + + + + + + + + + + + + + + + + + + + Currency: + + + + + + + + + + + + + + + + + + + + + + + Number Format: + + + + + +
-
- Date Format: - MMM d, y -
-
- - - The time zone will not be applied in UI5 apps. - If you don't know the type of an app, you can check it in the "About" dialog in the "ID of the Application Framework” field. - - -
-
- Time Format: - - -
- - - After you save your settings, the browser will refresh for the new settings to take effect. - - @@ -391,6 +467,22 @@ + + Changing the display language to [New Language] will update the language across the user interface. + + + + + + + + Text Direction diff --git a/packages/website/docs/_samples/patterns/UXCIntegration/Basic/main.css b/packages/website/docs/_samples/patterns/UXCIntegration/Basic/main.css index 636903a65edd..22c0e6bc97bb 100644 --- a/packages/website/docs/_samples/patterns/UXCIntegration/Basic/main.css +++ b/packages/website/docs/_samples/patterns/UXCIntegration/Basic/main.css @@ -77,4 +77,24 @@ align-items: center; margin: 0 1rem 0 1rem; } + +.language-region-container{ + display: flex; + min-height: 2.5rem; + align-item:flex-start; + flex-direction: column; + gap: 0.563rem; +} + +.language-region-label{ + display: flex; + flex: 1 0 0; + width: 100%; +} + +.language-region-control{ + display: flex; + gap: 0.188rem; + width: 100%; +} /* End User Settings Dialog */ \ No newline at end of file diff --git a/packages/website/docs/_samples/patterns/UXCIntegration/Basic/main.js b/packages/website/docs/_samples/patterns/UXCIntegration/Basic/main.js index ebcbe93f0239..46eb7fef6e0d 100644 --- a/packages/website/docs/_samples/patterns/UXCIntegration/Basic/main.js +++ b/packages/website/docs/_samples/patterns/UXCIntegration/Basic/main.js @@ -274,12 +274,18 @@ userMenu.addEventListener("sign-out-click", function (event) { /* User Settings Dialog */ const settingsDialog = document.getElementById("settings"); const settingsDialogItems = [...document.getElementsByTagName("ui5-user-settings-item")]; + +//Language and Region +const languageRegion = document.getElementById("language-region-container"); +const language = document.getElementById("language"); +const regionSettings = [...languageRegion.querySelectorAll(".language-region-control")]; +const additionalDialog = document.getElementById("additionalDialog"); +const additionalDialogClosers = [...additionalDialog.querySelectorAll(".dialogCloser")]; + const mobileSecondPage = document.getElementById("mobile-second-page"); const mobile1Button = document.getElementById("mobile1-button"); const mobile2Button = document.getElementById("mobile2-button"); const resetAllButton = document.getElementById("reset-all-button"); -const additionalDialog = document.getElementById("additionalDialog"); -const additionalDialogClosers = [...additionalDialog.querySelectorAll(".dialogCloser")]; const resetAll = document.getElementById("resetAll"); const resetPersonalization = document.getElementById("resetPersonalization"); const toast = document.getElementById("toastThemeSave"); @@ -287,6 +293,24 @@ const toastReset = document.getElementById("toastReset"); const toastResetAll = document.getElementById("toastResetAll"); const themeSave =document.getElementById("themeSave"); + +//Language and Region +language.addEventListener("selection-change", function (event) { + additionalDialog.open = true; +}); + +additionalDialogClosers.forEach(btn => { + btn.addEventListener("click", () => { + additionalDialog.open = false; + }); +}); + +regionSettings.forEach((settingsItem) => { + settingsItem.addEventListener("selection-change", function (event) { + console.log(`Selection change: ${event?.detail.item?.text}`, event.detail); + }); +}); + mobile1Button.addEventListener("click", function () { mobileSecondPage.selected = true; mobileSecondPage.text = "iOS"; @@ -301,12 +325,6 @@ resetAllButton.addEventListener("click", function () { additionalDialog.open = true; }); -additionalDialogClosers.forEach(btn => { - btn.addEventListener("click", () => { - additionalDialog.open = false; - }); -}) - themeSave.addEventListener("click", function () { toast.open = true; }); @@ -321,12 +339,12 @@ resetAll.addEventListener("click", function () { settingsDialog.addEventListener("selection-change", function (event) { console.log(`Selection change: ${event.detail.item?.text}`, event.detail); - if(event.detail.item?.text ==="Language & Region"){ + if(event.detail.item?.text ==="Language and Region"){ event.detail.item.loading=true; event.detail.item.loadingReason="Language & Region loading data..."; setTimeout(function(){ event.detail.item.loading=false; - }, 1000); + }, 500); } }); diff --git a/packages/website/docs/_samples/patterns/UXCIntegration/Basic/sample.html b/packages/website/docs/_samples/patterns/UXCIntegration/Basic/sample.html index d49910d5bc51..7b2b65588f17 100644 --- a/packages/website/docs/_samples/patterns/UXCIntegration/Basic/sample.html +++ b/packages/website/docs/_samples/patterns/UXCIntegration/Basic/sample.html @@ -309,44 +309,121 @@ - + -
-
- Language and Region: - - - - - - - -
-
- Date Format: - MMM d, y -
+
+ Display Language: + + + + + + + + + + + + + + + Region: + + + + + + + + + + + + + + Date Format: + + + + + + + + + + + + Time Format: + + + + + + + + Time Zone: + + + + + + + + + + + + + + + + + + + + + + + + + + + Currency: + + + + + + + + + + + + + + + + + + + + + + + Number Format: + + + + + + +
- - - The time zone will not be applied in UI5 apps. - If you don't know the type of an app, you can check it in the "About" dialog in the "ID of the Application Framework” field. - - -
-
- Time Format: - - -
- - - After you save your settings, the browser will refresh for the new settings to take effect. - - + iOS @@ -379,21 +456,18 @@ - - Clicking on reset will delete your personalization settings for the launchpad (e.g. theme, language, user activities, and home page content) and for apps using the launchpad personalization features (e.g. filter settings, table columns). - This action is irreversible. - Further changes in the dialog will not be applied. - Are you sure you want to proceed with the reset? + + Changing the display language to [New Language] will update the language across the user interface. + class="dialogCloser" + design="Emphasized" + text="Change Language"> + class="dialogCloser" + design="Transparent" + text="Cancel">