From 7459646b50f227b41be7b954e78782d064b689ac Mon Sep 17 00:00:00 2001 From: Serge Date: Tue, 19 Nov 2024 12:51:40 +0100 Subject: [PATCH 01/12] Update step-36-content-density-d935dbf.md Describe default values for compact/cozy content density more specifically --- docs/03_Get-Started/step-36-content-density-d935dbf.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/03_Get-Started/step-36-content-density-d935dbf.md b/docs/03_Get-Started/step-36-content-density-d935dbf.md index 71858652..cb82e9c1 100644 --- a/docs/03_Get-Started/step-36-content-density-d935dbf.md +++ b/docs/03_Get-Started/step-36-content-density-d935dbf.md @@ -10,7 +10,7 @@ In this step of our Walkthrough tutorial, we adjust the content density based on -**The content density is compact on desktop devices and cozy on touch-enabled devices** +**The default content density is compact on desktop devices and cozy on touch-enabled devices. That may be overriden by the application manifest or a user preference, if the shell like Fiori Launchpad allows it.** ![The graphic has an explanatory text.](images/UI5_Walkthrough_Step_36_f216b13.png "The content density is compact on desktop devices and cozy on touch-enabled devices") From ae2274f4bbded9c0ce8c7757cc2a5fe00ea66bd4 Mon Sep 17 00:00:00 2001 From: Serge Date: Tue, 19 Nov 2024 13:44:02 +0100 Subject: [PATCH 02/12] FLP allows user to select cozy/compact on all desktop devices --- docs/04_Essentials/how-to-use-densities-for-controls-13e6f3b.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/04_Essentials/how-to-use-densities-for-controls-13e6f3b.md b/docs/04_Essentials/how-to-use-densities-for-controls-13e6f3b.md index 9cd914cb..dc482334 100644 --- a/docs/04_Essentials/how-to-use-densities-for-controls-13e6f3b.md +++ b/docs/04_Essentials/how-to-use-densities-for-controls-13e6f3b.md @@ -151,7 +151,7 @@ var btn = new Button({ ## Using Density Classes in the SAP Fiori launchpad -The SAP Fiori launchpad \(FLP\) optionally reads the supported content densities from the app descriptor \(`manifest.json`\) and - if available - sets the appropriate content density class on the `` tag. On devices with mouse and touch support, the FLP also allows the desired content density to be configured by the user. To avoid situations where an application and the FLP write different content density classes, we recommend using the following logic within all applications that are intended to be used inside the FLP: +The SAP Fiori launchpad \(FLP\) optionally reads the supported content densities from the app descriptor \(`manifest.json`\) and - if available - sets the appropriate content density class on the `` tag. On desktop devices, the FLP also allows the desired content density to be configured by the user. To avoid situations where an application and the FLP write different content density classes, we recommend using the following logic within all applications that are intended to be used inside the FLP: ```js From 5b3f614c8edc63adf1823e827e09e9d86475873f Mon Sep 17 00:00:00 2001 From: Serge Date: Tue, 19 Nov 2024 14:33:31 +0100 Subject: [PATCH 03/12] Update TS example of setting content density --- .../step-36-content-density-typescript-667aa4a.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/docs/03_Get-Started/step-36-content-density-typescript-667aa4a.md b/docs/03_Get-Started/step-36-content-density-typescript-667aa4a.md index 341b2fdd..a3c0e94d 100644 --- a/docs/03_Get-Started/step-36-content-density-typescript-667aa4a.md +++ b/docs/03_Get-Started/step-36-content-density-typescript-667aa4a.md @@ -47,6 +47,12 @@ export default class Component extends UIComponent { ... }; getContentDensityClass(): string { + // if the Fiori Launchpad has already set the content density class according to its logic, don't override it + const classList = document.body.classList; + if (classList.contains("sapUiSizeCozy") || classList.contains("sapUiSizeCompact")) { + return ""; + } + // if the application runs standalone, use cozy on touch devices return Device.support.touch ? "sapUiSizeCozy" : "sapUiSizeCompact"; } }; From be390c228cbcf2d271fa5c34f7d7b787f496171a Mon Sep 17 00:00:00 2001 From: Serge Date: Tue, 19 Nov 2024 14:37:46 +0100 Subject: [PATCH 04/12] Update description in step-36-content-density --- .../step-36-content-density-typescript-667aa4a.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/03_Get-Started/step-36-content-density-typescript-667aa4a.md b/docs/03_Get-Started/step-36-content-density-typescript-667aa4a.md index a3c0e94d..333397cc 100644 --- a/docs/03_Get-Started/step-36-content-density-typescript-667aa4a.md +++ b/docs/03_Get-Started/step-36-content-density-typescript-667aa4a.md @@ -27,7 +27,7 @@ You can view all files at [OpenUI5 TypeScript Walkthrough - Step 36: Content Den To prepare the content density feature we add a helper method `getContentDensityClass` to the app component. SAPUI5 controls can be displayed in multiple sizes, for example in a `compact` size that is optimized for desktop and non-touch devices, and in a `cozy` mode that is optimized for touch interaction. The controls look for a specific CSS class in the HTML structure of the application to adjust their size. -This helper method queries the `Device` API directly for touch support of the client and returns the CSS class `sapUiSizeCompact` if touch interaction is not supported and `sapUiSizeCozy` for all other cases. We will use it throughout the application coding to set the proper content density CSS class. +This helper method checks if the content density is already set by the shell. If not, it queries the `Device` API directly for touch support of the client and returns the CSS class `sapUiSizeCompact` if touch interaction is not supported and `sapUiSizeCozy` for all other cases. We will use it throughout the application coding to set the proper content density CSS class. ```js import UIComponent from "sap/ui/core/UIComponent"; From 6eb80ce0fedc1c2de3afb002b714ab4236f393ed Mon Sep 17 00:00:00 2001 From: Serge Date: Tue, 19 Nov 2024 14:56:22 +0100 Subject: [PATCH 05/12] Update description of the default content density --- docs/03_Get-Started/step-36-content-density-d935dbf.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/03_Get-Started/step-36-content-density-d935dbf.md b/docs/03_Get-Started/step-36-content-density-d935dbf.md index cb82e9c1..66378326 100644 --- a/docs/03_Get-Started/step-36-content-density-d935dbf.md +++ b/docs/03_Get-Started/step-36-content-density-d935dbf.md @@ -10,7 +10,7 @@ In this step of our Walkthrough tutorial, we adjust the content density based on -**The default content density is compact on desktop devices and cozy on touch-enabled devices. That may be overriden by the application manifest or a user preference, if the shell like Fiori Launchpad allows it.** +**The default content density is compact on desktop devices and cozy on touch-enabled devices. However, a shell like Fiori Launchpad may override it, for example, when the application manifest does not support it or the user prefers another density.** ![The graphic has an explanatory text.](images/UI5_Walkthrough_Step_36_f216b13.png "The content density is compact on desktop devices and cozy on touch-enabled devices") From bdfa06c524cb72b9fc922e9e94c2e79a1050bf2b Mon Sep 17 00:00:00 2001 From: Serge Date: Tue, 19 Nov 2024 15:18:06 +0100 Subject: [PATCH 06/12] Clarify the deafult content density on different devices --- docs/03_Get-Started/step-36-content-density-d935dbf.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/03_Get-Started/step-36-content-density-d935dbf.md b/docs/03_Get-Started/step-36-content-density-d935dbf.md index 66378326..82b3a6d5 100644 --- a/docs/03_Get-Started/step-36-content-density-d935dbf.md +++ b/docs/03_Get-Started/step-36-content-density-d935dbf.md @@ -10,7 +10,7 @@ In this step of our Walkthrough tutorial, we adjust the content density based on -**The default content density is compact on desktop devices and cozy on touch-enabled devices. However, a shell like Fiori Launchpad may override it, for example, when the application manifest does not support it or the user prefers another density.** +**The default content density is cozy on touch devices (smartphones, tablets and computers with a touch screen) and compact on devices without a touch screen. Note that Fiori Launchpad sets cozy content density on phones and tablets as mandatory and may override it on other computers according to the application manifest and the user preference.** ![The graphic has an explanatory text.](images/UI5_Walkthrough_Step_36_f216b13.png "The content density is compact on desktop devices and cozy on touch-enabled devices") From f0641a2c3bc6f806607ca801596ee8816bc45c49 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?G=C3=BCnter=20Klatt?= <57760635+KlattG@users.noreply.github.com> Date: Thu, 19 Dec 2024 16:11:15 +0100 Subject: [PATCH 07/12] Update how-to-use-densities-for-controls-13e6f3b.md --- ...ow-to-use-densities-for-controls-13e6f3b.md | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) diff --git a/docs/04_Essentials/how-to-use-densities-for-controls-13e6f3b.md b/docs/04_Essentials/how-to-use-densities-for-controls-13e6f3b.md index dc482334..8087d048 100644 --- a/docs/04_Essentials/how-to-use-densities-for-controls-13e6f3b.md +++ b/docs/04_Essentials/how-to-use-densities-for-controls-13e6f3b.md @@ -156,16 +156,14 @@ The SAP Fiori launchpad \(FLP\) optionally reads the supported content densities ```js getContentDensityClass : function() { - if (this._sContentDensityClass === undefined) { - // check whether FLP has already set the content density class; do nothing in this case - if (jQuery(document.body).hasClass("sapUiSizeCozy") || jQuery(document.body).hasClass("sapUiSizeCompact")) { - this._sContentDensityClass = ""; - } else { - // Store "sapUiSizeCompact" or "sapUiSizeCozy" in this._sContentDensityClass, depending on which modes are supported by the app. - // E.g. the “cozy” class in case sap.ui.Device.support.touch is “true” and “compact” otherwise. - } - } - return this._sContentDensityClass; + // if the Fiori Launchpad has already set the content density class according to its logic, don't override it + const classList = document.body.classList; + if (classList.contains("sapUiSizeCozy") || classList.contains("sapUiSizeCompact")) { + return ""; + } + // if the application runs standalone, use cozy on touch devices + return Device.support.touch ? "sapUiSizeCozy" : "sapUiSizeCompact"; + } } ``` From cf059f67a797a9ac56404cfb468b2f6a7c8eea1f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?G=C3=BCnter=20Klatt?= <57760635+KlattG@users.noreply.github.com> Date: Thu, 19 Dec 2024 16:19:11 +0100 Subject: [PATCH 08/12] Adapted JavaScript Step in analogy to TypeScript step --- docs/03_Get-Started/step-36-content-density-d935dbf.md | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/docs/03_Get-Started/step-36-content-density-d935dbf.md b/docs/03_Get-Started/step-36-content-density-d935dbf.md index 82b3a6d5..8497dce8 100644 --- a/docs/03_Get-Started/step-36-content-density-d935dbf.md +++ b/docs/03_Get-Started/step-36-content-density-d935dbf.md @@ -29,7 +29,13 @@ You can view and download all files at [Walkthrough - Step 36](https://ui5.sap.c ... getContentDensityClass() { - return Device.support.touch ? "sapUiSizeCozy" : "sapUiSizeCompact"; + // if the Fiori Launchpad has already set the content density class according to its logic, don't override it + const classList = document.body.classList; + if (classList.contains("sapUiSizeCozy") || classList.contains("sapUiSizeCompact")) { + return ""; + } + // if the application runs standalone, use cozy on touch devices + return Device.support.touch ? "sapUiSizeCozy" : "sapUiSizeCompact"; } }); }); @@ -37,7 +43,7 @@ You can view and download all files at [Walkthrough - Step 36](https://ui5.sap.c To prepare the content density feature we will also add a helper method `getContentDensityClass`. SAPUI5 controls can be displayed in multiple sizes, for example in a `compact` size that is optimized for desktop and non-touch devices, and in a `cozy` mode that is optimized for touch interaction. The controls look for a specific CSS class in the HTML structure of the application to adjust their size. -This helper method queries the `Device` API directly for touch support of the client and returns the CSS class `sapUiSizeCompact` if touch interaction is not supported and `sapUiSizeCozy` for all other cases. We will use it throughout the application coding to set the proper content density CSS class. +This helper method checks if the content density is already set by the shell. If not, it queries the `Device` API directly for touch support of the client and returns the CSS class `sapUiSizeCompact` if touch interaction is not supported and `sapUiSizeCozy` for all other cases. We will use it throughout the application coding to set the proper content density CSS class. From 3cdb7527e29bfe5f813e78114286a1efcb708062 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?G=C3=BCnter=20Klatt?= <57760635+KlattG@users.noreply.github.com> Date: Thu, 19 Dec 2024 16:24:52 +0100 Subject: [PATCH 09/12] Update step-36-content-density-d935dbf.md --- docs/03_Get-Started/step-36-content-density-d935dbf.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/03_Get-Started/step-36-content-density-d935dbf.md b/docs/03_Get-Started/step-36-content-density-d935dbf.md index 8497dce8..6be11d7e 100644 --- a/docs/03_Get-Started/step-36-content-density-d935dbf.md +++ b/docs/03_Get-Started/step-36-content-density-d935dbf.md @@ -29,7 +29,7 @@ You can view and download all files at [Walkthrough - Step 36](https://ui5.sap.c ... getContentDensityClass() { - // if the Fiori Launchpad has already set the content density class according to its logic, don't override it + // if the content density has already been set, don't override it const classList = document.body.classList; if (classList.contains("sapUiSizeCozy") || classList.contains("sapUiSizeCompact")) { return ""; From 87936dc373d70af6505e338b02b695ec832d45b5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?G=C3=BCnter=20Klatt?= <57760635+KlattG@users.noreply.github.com> Date: Thu, 19 Dec 2024 16:26:02 +0100 Subject: [PATCH 10/12] Update step-36-content-density-typescript-667aa4a.md --- .../step-36-content-density-typescript-667aa4a.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/03_Get-Started/step-36-content-density-typescript-667aa4a.md b/docs/03_Get-Started/step-36-content-density-typescript-667aa4a.md index 333397cc..3ebe861a 100644 --- a/docs/03_Get-Started/step-36-content-density-typescript-667aa4a.md +++ b/docs/03_Get-Started/step-36-content-density-typescript-667aa4a.md @@ -47,7 +47,7 @@ export default class Component extends UIComponent { ... }; getContentDensityClass(): string { - // if the Fiori Launchpad has already set the content density class according to its logic, don't override it + // if the content density has already been set, don't override it const classList = document.body.classList; if (classList.contains("sapUiSizeCozy") || classList.contains("sapUiSizeCompact")) { return ""; From c3ba592afabb3d1abdaae9bd018bda46cf0bf023 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?G=C3=BCnter=20Klatt?= <57760635+KlattG@users.noreply.github.com> Date: Thu, 19 Dec 2024 16:32:58 +0100 Subject: [PATCH 11/12] Feedback from SME review --- .../step-36-content-density-typescript-667aa4a.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/03_Get-Started/step-36-content-density-typescript-667aa4a.md b/docs/03_Get-Started/step-36-content-density-typescript-667aa4a.md index 3ebe861a..32411728 100644 --- a/docs/03_Get-Started/step-36-content-density-typescript-667aa4a.md +++ b/docs/03_Get-Started/step-36-content-density-typescript-667aa4a.md @@ -27,7 +27,7 @@ You can view all files at [OpenUI5 TypeScript Walkthrough - Step 36: Content Den To prepare the content density feature we add a helper method `getContentDensityClass` to the app component. SAPUI5 controls can be displayed in multiple sizes, for example in a `compact` size that is optimized for desktop and non-touch devices, and in a `cozy` mode that is optimized for touch interaction. The controls look for a specific CSS class in the HTML structure of the application to adjust their size. -This helper method checks if the content density is already set by the shell. If not, it queries the `Device` API directly for touch support of the client and returns the CSS class `sapUiSizeCompact` if touch interaction is not supported and `sapUiSizeCozy` for all other cases. We will use it throughout the application coding to set the proper content density CSS class. +This helper method checks if the classes for the cozy or compact mode have been applied elsewhere already. If this is the case, the application will not apply it again. If not, it queries the `Device` API directly for touch support of the client and returns the CSS class `sapUiSizeCompact` if touch interaction is not supported and `sapUiSizeCozy` for all other cases. We will use it throughout the application coding to set the proper content density CSS class. ```js import UIComponent from "sap/ui/core/UIComponent"; From 7d7ebc32631e3ae8f69fdec321ec257df36e94ce Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?G=C3=BCnter=20Klatt?= <57760635+KlattG@users.noreply.github.com> Date: Thu, 19 Dec 2024 16:34:15 +0100 Subject: [PATCH 12/12] Feedback from developer review --- docs/03_Get-Started/step-36-content-density-d935dbf.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/03_Get-Started/step-36-content-density-d935dbf.md b/docs/03_Get-Started/step-36-content-density-d935dbf.md index 6be11d7e..e05cb8e9 100644 --- a/docs/03_Get-Started/step-36-content-density-d935dbf.md +++ b/docs/03_Get-Started/step-36-content-density-d935dbf.md @@ -43,7 +43,7 @@ You can view and download all files at [Walkthrough - Step 36](https://ui5.sap.c To prepare the content density feature we will also add a helper method `getContentDensityClass`. SAPUI5 controls can be displayed in multiple sizes, for example in a `compact` size that is optimized for desktop and non-touch devices, and in a `cozy` mode that is optimized for touch interaction. The controls look for a specific CSS class in the HTML structure of the application to adjust their size. -This helper method checks if the content density is already set by the shell. If not, it queries the `Device` API directly for touch support of the client and returns the CSS class `sapUiSizeCompact` if touch interaction is not supported and `sapUiSizeCozy` for all other cases. We will use it throughout the application coding to set the proper content density CSS class. +This helper method checks if the classes for the cozy or compact mode have been applied elsewhere already. If this is the case, the application will not apply it again. If not, it queries the `Device` API directly for touch support of the client and returns the CSS class `sapUiSizeCompact` if touch interaction is not supported and `sapUiSizeCozy` for all other cases. We will use it throughout the application coding to set the proper content density CSS class.