From a3024428daab135105284b979bd51aa5f4848a23 Mon Sep 17 00:00:00 2001 From: Diana Pazheva Date: Tue, 14 Nov 2023 16:41:54 +0200 Subject: [PATCH 1/3] feat(ui5-dynamic-page): add responsive paddings --- packages/fiori/src/DynamicPage.ts | 31 +++++++++++++++++++++++ packages/fiori/src/themes/DynamicPage.css | 19 ++++++++++++++ 2 files changed, 50 insertions(+) diff --git a/packages/fiori/src/DynamicPage.ts b/packages/fiori/src/DynamicPage.ts index 5030397419cf..07099cbc0cd0 100644 --- 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[]; @@ -71,6 +89,15 @@ class DynamicPage extends UI5Element { iPreviousScrollAmount = 0; _debounceInterval?: Timeout | null; showHeaderInStickArea = false; + _updateMediaRange: ResizeObserverCallback; + + onEnterDOM() { + ResizeHandler.register(this, this._updateMediaRange); + } + + onExitDOM() { + ResizeHandler.deregister(this, this._updateMediaRange); + } get classes() { return { @@ -167,6 +194,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 index 2246981aa3af..0d1124e09f2a 100644 --- a/packages/fiori/src/themes/DynamicPage.css +++ b/packages/fiori/src/themes/DynamicPage.css @@ -72,4 +72,23 @@ transform: translateY(100%); opacity: 0; } +} + +/*** 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; } \ No newline at end of file From 637e14d60bb0876cd50178a4be4b66f5e13d9945 Mon Sep 17 00:00:00 2001 From: Diana Pazheva Date: Mon, 20 Nov 2023 10:21:03 +0200 Subject: [PATCH 2/3] feat(ui5-dynamic-page): merge with footer changes --- packages/fiori/src/themes/DynamicPage.css | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/fiori/src/themes/DynamicPage.css b/packages/fiori/src/themes/DynamicPage.css index 0d1124e09f2a..590884cc7dad 100644 --- a/packages/fiori/src/themes/DynamicPage.css +++ b/packages/fiori/src/themes/DynamicPage.css @@ -30,7 +30,6 @@ box-sizing: border-box; z-index: 1; opacity: 1; - padding: 0 1rem; } :host([show-footer]) .ui5-dynamic-page-content { @@ -74,7 +73,7 @@ } } -/*** Responsive paddings ***/ +/* Responsive paddings */ :host([media-range="S"]) .ui5-dynamic-page-root { padding: 0 1rem; From c143204fa8fad4d1ccad82d8ecabd73428648e6d Mon Sep 17 00:00:00 2001 From: Diana Pazheva Date: Mon, 27 Nov 2023 00:00:20 +0200 Subject: [PATCH 3/3] feat(ui5-dynamic-page): apply paddings to individual elements --- packages/fiori/src/DynamicPage.hbs | 16 +++++----- packages/fiori/src/themes/DynamicPage.css | 29 +++++++++++++++---- .../fiori/src/themes/DynamicPageHeader.css | 3 -- .../base/DynamicPageHeader-parameters.css | 4 --- .../themes/sap_belize/parameters-bundle.css | 1 - .../sap_belize_hcb/parameters-bundle.css | 1 - .../sap_belize_hcw/parameters-bundle.css | 1 - .../themes/sap_fiori_3/parameters-bundle.css | 1 - .../sap_fiori_3_dark/parameters-bundle.css | 1 - .../sap_fiori_3_hcb/parameters-bundle.css | 1 - .../sap_fiori_3_hcw/parameters-bundle.css | 1 - .../themes/sap_horizon/parameters-bundle.css | 1 - .../sap_horizon_dark/parameters-bundle.css | 1 - .../parameters-bundle.css | 1 - .../sap_horizon_exp/parameters-bundle.css | 1 - .../sap_horizon_hcb/parameters-bundle.css | 1 - .../sap_horizon_hcb_exp/parameters-bundle.css | 1 - .../sap_horizon_hcw/parameters-bundle.css | 1 - .../sap_horizon_hcw_exp/parameters-bundle.css | 1 - 19 files changed, 32 insertions(+), 35 deletions(-) delete mode 100644 packages/fiori/src/themes/base/DynamicPageHeader-parameters.css diff --git a/packages/fiori/src/DynamicPage.hbs b/packages/fiori/src/DynamicPage.hbs index f04d9d52d134..eb3dd1e43fe2 100644 --- a/packages/fiori/src/DynamicPage.hbs +++ b/packages/fiori/src/DynamicPage.hbs @@ -18,11 +18,11 @@ -
- {{#if headerInContent}} - - {{/if}} + {{#if headerInContent}} + + {{/if}} +
{{#unless actionsInTitle}}
-
- -
-
\ No newline at end of file +
+ +
+ diff --git a/packages/fiori/src/themes/DynamicPage.css b/packages/fiori/src/themes/DynamicPage.css index 590884cc7dad..15aca60d77e7 100644 --- a/packages/fiori/src/themes/DynamicPage.css +++ b/packages/fiori/src/themes/DynamicPage.css @@ -49,6 +49,9 @@ border: 1px solid; border-radius: 0.25rem; background-color: #fff; + box-sizing: border-box; + width: auto; + margin: 0 0.5rem 0.5rem 0.5rem; } /* Footer animation */ @@ -73,21 +76,37 @@ } } +::slotted([slot="titleArea"]) { + width: auto; +} + +::slotted([slot="headerArea"]) { + display: block; +} + /* Responsive paddings */ -:host([media-range="S"]) .ui5-dynamic-page-root { +:host([media-range="S"]) .ui5-dynamic-page-content, +:host([media-range="S"]) ::slotted([slot="titleArea"]), +:host([media-range="S"]) ::slotted([slot="headerArea"]) { padding: 0 1rem; } -:host([media-range="S"]) ::slotted([ui5-dynamic-page-header][slot="headerArea"]) { +:host([media-range="S"]) ::slotted([slot="headerArea"]) { padding-top: 0.5rem; } -:host([media-range="M"]) .ui5-dynamic-page-root, -:host([media-range="L"]) .ui5-dynamic-page-root { +:host([media-range="M"]) .ui5-dynamic-page-content, +:host([media-range="M"]) ::slotted([slot="titleArea"]), +:host([media-range="M"]) ::slotted([slot="headerArea"]), +:host([media-range="L"]) .ui5-dynamic-page-content, +:host([media-range="L"]) ::slotted([slot="titleArea"]), +:host([media-range="L"]) ::slotted([slot="headerArea"]) { padding: 0 2rem; } -:host([media-range="XL"]) .ui5-dynamic-page-root { +:host([media-range="XL"]) .ui5-dynamic-page-content, +:host([media-range="XL"]) ::slotted([slot="titleArea"]), +:host([media-range="XL"]) ::slotted([slot="headerArea"]) { padding: 0 3rem; } \ No newline at end of file diff --git a/packages/fiori/src/themes/DynamicPageHeader.css b/packages/fiori/src/themes/DynamicPageHeader.css index e8e240f5d698..06263867c5a1 100644 --- a/packages/fiori/src/themes/DynamicPageHeader.css +++ b/packages/fiori/src/themes/DynamicPageHeader.css @@ -1,8 +1,5 @@ :host { background: #fff; - padding-top: var(--_ui5_dynamic_page_header_padding_top); - padding-bottom: var(--_ui5_dynamic_page_header_padding_bottom); - display: block; } .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 deleted file mode 100644 index e930737f274e..000000000000 --- a/packages/fiori/src/themes/base/DynamicPageHeader-parameters.css +++ /dev/null @@ -1,4 +0,0 @@ -:root { - --_ui5_dynamic_page_header_padding_top: 1rem; - --_ui5_dynamic_page_header_padding_bottom: 1rem; -} \ No newline at end of file diff --git a/packages/fiori/src/themes/sap_belize/parameters-bundle.css b/packages/fiori/src/themes/sap_belize/parameters-bundle.css index 617e604eae32..9da626b9315c 100644 --- a/packages/fiori/src/themes/sap_belize/parameters-bundle.css +++ b/packages/fiori/src/themes/sap_belize/parameters-bundle.css @@ -1,7 +1,6 @@ @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 index 7a6127a914b3..6041c4fca78f 100644 --- a/packages/fiori/src/themes/sap_belize_hcb/parameters-bundle.css +++ b/packages/fiori/src/themes/sap_belize_hcb/parameters-bundle.css @@ -1,7 +1,6 @@ @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 index 7a6127a914b3..6041c4fca78f 100644 --- a/packages/fiori/src/themes/sap_belize_hcw/parameters-bundle.css +++ b/packages/fiori/src/themes/sap_belize_hcw/parameters-bundle.css @@ -1,7 +1,6 @@ @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 index 67ebf4269608..f9c94ef8e13c 100644 --- a/packages/fiori/src/themes/sap_fiori_3/parameters-bundle.css +++ b/packages/fiori/src/themes/sap_fiori_3/parameters-bundle.css @@ -1,7 +1,6 @@ @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 index 67ebf4269608..f9c94ef8e13c 100644 --- 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,7 +1,6 @@ @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 index 7a6127a914b3..6041c4fca78f 100644 --- 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,7 +1,6 @@ @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 index 7a6127a914b3..6041c4fca78f 100644 --- 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,7 +1,6 @@ @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 index a682ab7f37a0..12ea4aa5e086 100644 --- a/packages/fiori/src/themes/sap_horizon/parameters-bundle.css +++ b/packages/fiori/src/themes/sap_horizon/parameters-bundle.css @@ -1,7 +1,6 @@ @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 index a682ab7f37a0..12ea4aa5e086 100644 --- a/packages/fiori/src/themes/sap_horizon_dark/parameters-bundle.css +++ b/packages/fiori/src/themes/sap_horizon_dark/parameters-bundle.css @@ -1,7 +1,6 @@ @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 index 9b2d12fa832d..806494fc6f9b 100644 --- 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,7 +1,6 @@ @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 index 9b2d12fa832d..806494fc6f9b 100644 --- a/packages/fiori/src/themes/sap_horizon_exp/parameters-bundle.css +++ b/packages/fiori/src/themes/sap_horizon_exp/parameters-bundle.css @@ -1,7 +1,6 @@ @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 index 94e705a03bb1..f1359bb15083 100644 --- a/packages/fiori/src/themes/sap_horizon_hcb/parameters-bundle.css +++ b/packages/fiori/src/themes/sap_horizon_hcb/parameters-bundle.css @@ -1,7 +1,6 @@ @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 index 94e705a03bb1..f1359bb15083 100644 --- 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,7 +1,6 @@ @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 index 60b43b5e0f3d..a91b63b97c20 100644 --- a/packages/fiori/src/themes/sap_horizon_hcw/parameters-bundle.css +++ b/packages/fiori/src/themes/sap_horizon_hcw/parameters-bundle.css @@ -1,7 +1,6 @@ @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 index 60b43b5e0f3d..a91b63b97c20 100644 --- 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,7 +1,6 @@ @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";