feat(ui5-dynamic-page): add responsive margins

SAP · Nov 14, 2023 · 82e51fd · 82e51fd
1 parent 0b42d7d
commit 82e51fd
Show file tree

Hide file tree

Showing 19 changed files with 73 additions and 0 deletions.
diff --git a/packages/fiori/src/DynamicPage.ts b/packages/fiori/src/DynamicPage.ts
@@ -3,6 +3,9 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import MediaRange from "@ui5/webcomponents-base/dist/MediaRange.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import type { Timeout } from "@ui5/webcomponents-base/dist/types.js";
@@ -42,6 +45,12 @@ const SCROLL_DEBOUNCE_RATE = 0; // ms
 class DynamicPage extends UI5Element {
 	static i18nBundle: I18nBundle;
 
+	constructor() {
+		super();
+
+		this._updateMediaRange = this.updateMediaRange.bind(this);
+	}
+
 	static async onDefine() {
 		DynamicPage.i18nBundle = await getI18nBundle("INIT_PACKAGE_VAR_NAME");
 	}
@@ -55,6 +64,15 @@ class DynamicPage extends UI5Element {
 	@property({ type: Boolean })
 	showFooter!: boolean;
 
+	/**
+	 * Defines the current media query size.
+	 *
+	 * @type {string}
+	 * @private
+	 */
+	@property()
+	mediaRange!: string;
+
 	@slot({ "default": true, type: HTMLElement })
 	content!: HTMLElement[];
 
@@ -70,6 +88,15 @@ class DynamicPage extends UI5Element {
 	isExpanding = false;
 	iPreviousScrollAmount = 0;
 	_debounceInterval?: Timeout | null;
+	_updateMediaRange: ResizeObserverCallback;
+
+	onEnterDOM() {
+		ResizeHandler.register(this, this._updateMediaRange);
+	}
+
+	onExitDOM() {
+		ResizeHandler.deregister(this, this._updateMediaRange);
+	}
 
 	onAfterRendering() {
 		this.addEventListener("scroll", this.snapOnScroll.bind(this));
@@ -147,6 +174,10 @@ class DynamicPage extends UI5Element {
 			fn();
 		}, delay);
 	}
+
+	updateMediaRange() {
+		this.mediaRange = MediaRange.getCurrentRange(MediaRange.RANGESETS.RANGE_4STEPS, this.getDomRef()!.offsetWidth);
+	}
 }
 
 DynamicPage.define();

diff --git a/packages/fiori/src/themes/DynamicPage.css b/packages/fiori/src/themes/DynamicPage.css
@@ -25,4 +25,23 @@
     border: 1px solid;
     border-radius: 0.25rem;
     background-color: #fff;
+}
+
+/*** Responsive paddings ***/
+
+:host([media-range="S"]) .ui5-dynamic-page-root {
+    padding: 0 1rem;
+}
+
+:host([media-range="S"]) ::slotted([ui5-dynamic-page-header][slot="headerArea"]) {
+    padding-top: 0.5rem;
+}
+
+:host([media-range="M"]) .ui5-dynamic-page-root,
+:host([media-range="L"]) .ui5-dynamic-page-root {
+    padding: 0 2rem;
+}
+
+:host([media-range="XL"]) .ui5-dynamic-page-root {
+    padding: 0 3rem;
 }
diff --git a/packages/fiori/src/themes/DynamicPageHeader.css b/packages/fiori/src/themes/DynamicPageHeader.css
@@ -1,5 +1,9 @@
 :host {
     background: #fff;
+    padding-top: var(--_ui5_dynamic_page_header_padding_top);
+    padding-bottom: var(--_ui5_dynamic_page_header_padding_bottom);
+    display: flex;
+    flex-direction: column;
 }
 
 .ui5-dynamic-page-header-root {

diff --git a/packages/fiori/src/themes/base/DynamicPageHeader-parameters.css b/packages/fiori/src/themes/base/DynamicPageHeader-parameters.css
@@ -0,0 +1,4 @@
+:root {
+	--_ui5_dynamic_page_header_padding_top: 1rem;
+    --_ui5_dynamic_page_header_padding_bottom: 1rem;
+}
diff --git a/packages/fiori/src/themes/sap_belize/parameters-bundle.css b/packages/fiori/src/themes/sap_belize/parameters-bundle.css
@@ -1,6 +1,7 @@
 @import "../base/sizes-parameters.css";
 @import "../base/DynamicPage-parameters.css";
 @import "../base/DynamicPageTitle-parameters.css";
+@import "../base/DynamicPageHeader-parameters.css";
 @import "../base/Bar-parameters.css";
 @import "../base/FlexibleColumnLayout-parameters.css";
 @import "../base/MediaGallery-parameters.css";

diff --git a/packages/fiori/src/themes/sap_belize_hcb/parameters-bundle.css b/packages/fiori/src/themes/sap_belize_hcb/parameters-bundle.css
@@ -1,6 +1,7 @@
 @import "../base/sizes-parameters.css";
 @import "../base/DynamicPage-parameters.css";
 @import "../base/DynamicPageTitle-parameters.css";
+@import "../base/DynamicPageHeader-parameters.css";
 @import "../base/Bar-parameters.css";
 @import "./FlexibleColumnLayout-parameters.css";
 @import "../base/IllustratedMessage-parameters.css";

diff --git a/packages/fiori/src/themes/sap_belize_hcw/parameters-bundle.css b/packages/fiori/src/themes/sap_belize_hcw/parameters-bundle.css
@@ -1,6 +1,7 @@
 @import "../base/sizes-parameters.css";
 @import "../base/DynamicPage-parameters.css";
 @import "../base/DynamicPageTitle-parameters.css";
+@import "../base/DynamicPageHeader-parameters.css";
 @import "../base/Bar-parameters.css";
 @import "./FlexibleColumnLayout-parameters.css";
 @import "../base/IllustratedMessage-parameters.css";

diff --git a/packages/fiori/src/themes/sap_fiori_3/parameters-bundle.css b/packages/fiori/src/themes/sap_fiori_3/parameters-bundle.css
@@ -1,6 +1,7 @@
 @import "../base/sizes-parameters.css";
 @import "../base/DynamicPage-parameters.css";
 @import "../base/DynamicPageTitle-parameters.css";
+@import "../base/DynamicPageHeader-parameters.css";
 @import "../base/Bar-parameters.css";
 @import "../base/FlexibleColumnLayout-parameters.css";
 @import "../base/IllustratedMessage-parameters.css";

diff --git a/packages/fiori/src/themes/sap_fiori_3_dark/parameters-bundle.css b/packages/fiori/src/themes/sap_fiori_3_dark/parameters-bundle.css
@@ -1,6 +1,7 @@
 @import "../base/sizes-parameters.css";
 @import "../base/DynamicPage-parameters.css";
 @import "../base/DynamicPageTitle-parameters.css";
+@import "../base/DynamicPageHeader-parameters.css";
 @import "../base/Bar-parameters.css";
 @import "../base/FlexibleColumnLayout-parameters.css";
 @import "../base/IllustratedMessage-parameters.css";

diff --git a/packages/fiori/src/themes/sap_fiori_3_hcb/parameters-bundle.css b/packages/fiori/src/themes/sap_fiori_3_hcb/parameters-bundle.css
@@ -1,6 +1,7 @@
 @import "../base/sizes-parameters.css";
 @import "../base/DynamicPage-parameters.css";
 @import "../base/DynamicPageTitle-parameters.css";
+@import "../base/DynamicPageHeader-parameters.css";
 @import "../base/Bar-parameters.css";
 @import "./FlexibleColumnLayout-parameters.css";
 @import "../base/IllustratedMessage-parameters.css";

diff --git a/packages/fiori/src/themes/sap_fiori_3_hcw/parameters-bundle.css b/packages/fiori/src/themes/sap_fiori_3_hcw/parameters-bundle.css
@@ -1,6 +1,7 @@
 @import "../base/sizes-parameters.css";
 @import "../base/DynamicPage-parameters.css";
 @import "../base/DynamicPageTitle-parameters.css";
+@import "../base/DynamicPageHeader-parameters.css";
 @import "../base/Bar-parameters.css";
 @import "./FlexibleColumnLayout-parameters.css";
 @import "../base/IllustratedMessage-parameters.css";

diff --git a/packages/fiori/src/themes/sap_horizon/parameters-bundle.css b/packages/fiori/src/themes/sap_horizon/parameters-bundle.css
@@ -1,6 +1,7 @@
 @import "../base/sizes-parameters.css";
 @import "../base/DynamicPage-parameters.css";
 @import "../base/DynamicPageTitle-parameters.css";
+@import "../base/DynamicPageHeader-parameters.css";
 @import "../base/Bar-parameters.css";
 @import "../base/FlexibleColumnLayout-parameters.css";
 @import "../base/IllustratedMessage-parameters.css";

diff --git a/packages/fiori/src/themes/sap_horizon_dark/parameters-bundle.css b/packages/fiori/src/themes/sap_horizon_dark/parameters-bundle.css
@@ -1,6 +1,7 @@
 @import "../base/sizes-parameters.css";
 @import "../base/DynamicPage-parameters.css";
 @import "../base/DynamicPageTitle-parameters.css";
+@import "../base/DynamicPageHeader-parameters.css";
 @import "../base/Bar-parameters.css";
 @import "../base/FlexibleColumnLayout-parameters.css";
 @import "../base/IllustratedMessage-parameters.css";

diff --git a/packages/fiori/src/themes/sap_horizon_dark_exp/parameters-bundle.css b/packages/fiori/src/themes/sap_horizon_dark_exp/parameters-bundle.css
@@ -1,6 +1,7 @@
 @import "../base/sizes-parameters.css";
 @import "../base/DynamicPage-parameters.css";
 @import "../base/DynamicPageTitle-parameters.css";
+@import "../base/DynamicPageHeader-parameters.css";
 @import "../base/Bar-parameters.css";
 @import "../base/FlexibleColumnLayout-parameters.css";
 @import "../base/IllustratedMessage-parameters.css";

diff --git a/packages/fiori/src/themes/sap_horizon_exp/parameters-bundle.css b/packages/fiori/src/themes/sap_horizon_exp/parameters-bundle.css
@@ -1,6 +1,7 @@
 @import "../base/sizes-parameters.css";
 @import "../base/DynamicPage-parameters.css";
 @import "../base/DynamicPageTitle-parameters.css";
+@import "../base/DynamicPageHeader-parameters.css";
 @import "../base/Bar-parameters.css";
 @import "../base/FlexibleColumnLayout-parameters.css";
 @import "../base/IllustratedMessage-parameters.css";

diff --git a/packages/fiori/src/themes/sap_horizon_hcb/parameters-bundle.css b/packages/fiori/src/themes/sap_horizon_hcb/parameters-bundle.css
@@ -1,6 +1,7 @@
 @import "../base/sizes-parameters.css";
 @import "../base/DynamicPage-parameters.css";
 @import "../base/DynamicPageTitle-parameters.css";
+@import "../base/DynamicPageHeader-parameters.css";
 @import "../base/Bar-parameters.css";
 @import "./FlexibleColumnLayout-parameters.css";
 @import "../base/IllustratedMessage-parameters.css";

diff --git a/packages/fiori/src/themes/sap_horizon_hcb_exp/parameters-bundle.css b/packages/fiori/src/themes/sap_horizon_hcb_exp/parameters-bundle.css
@@ -1,6 +1,7 @@
 @import "../base/sizes-parameters.css";
 @import "../base/DynamicPage-parameters.css";
 @import "../base/DynamicPageTitle-parameters.css";
+@import "../base/DynamicPageHeader-parameters.css";
 @import "../base/Bar-parameters.css";
 @import "./FlexibleColumnLayout-parameters.css";
 @import "../base/IllustratedMessage-parameters.css";

diff --git a/packages/fiori/src/themes/sap_horizon_hcw/parameters-bundle.css b/packages/fiori/src/themes/sap_horizon_hcw/parameters-bundle.css
@@ -1,6 +1,7 @@
 @import "../base/sizes-parameters.css";
 @import "../base/DynamicPage-parameters.css";
 @import "../base/DynamicPageTitle-parameters.css";
+@import "../base/DynamicPageHeader-parameters.css";
 @import "../base/Bar-parameters.css";
 @import "./FlexibleColumnLayout-parameters.css";
 @import "../base/IllustratedMessage-parameters.css";

diff --git a/packages/fiori/src/themes/sap_horizon_hcw_exp/parameters-bundle.css b/packages/fiori/src/themes/sap_horizon_hcw_exp/parameters-bundle.css
@@ -1,6 +1,7 @@
 @import "../base/sizes-parameters.css";
 @import "../base/DynamicPage-parameters.css";
 @import "../base/DynamicPageTitle-parameters.css";
+@import "../base/DynamicPageHeader-parameters.css";
 @import "../base/Bar-parameters.css";
 @import "./FlexibleColumnLayout-parameters.css";
 @import "../base/IllustratedMessage-parameters.css";