Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(ui5-page): replace resize observer with container query #9576

Merged
merged 2 commits into from
Aug 1, 2024
Merged

fix(ui5-page): replace resize observer with container query #9576

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7ff84da
fix(ui5-page): replace resize observer with container query
MapTo0 Jul 29, 2024
695ab14
fix: change container-type to size
MapTo0 Jul 31, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 0 additions & 31 deletions packages/fiori/src/Page.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,6 @@ 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 browserScrollbarCSS from "@ui5/webcomponents/dist/generated/themes/BrowserScrollbar.css.js";
import type PageBackgroundDesign from "./types/PageBackgroundDesign.js";

Expand Down Expand Up @@ -92,14 +89,6 @@ class Page extends UI5Element {
@property({ type: Boolean })
hideFooter = false;

/**
* Defines the current media query size.
* @private
* @since 1.0.0-rc.15
*/
@property()
mediaRange = "S";

/**
* Defines the header HTML Element.
* @public
Expand All @@ -121,26 +110,6 @@ class Page extends UI5Element {
@slot()
footer!: Array<HTMLElement>;

_updateMediaRange: ResizeObserverCallback;

constructor() {
super();

this._updateMediaRange = this.updateMediaRange.bind(this);
}

onEnterDOM() {
ResizeHandler.register(this, this._updateMediaRange);
}

onExitDOM() {
ResizeHandler.deregister(this, this._updateMediaRange);
}

updateMediaRange() {
this.mediaRange = MediaRange.getCurrentRange(MediaRange.RANGESETS.RANGE_4STEPS, this.getDomRef()!.offsetWidth);
}

get _contentBottom() {
return this.fixedFooter && !this.hideFooter ? "2.75rem" : "0";
}
Expand Down
202 changes: 105 additions & 97 deletions packages/fiori/src/themes/Page.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,147 +1,155 @@

:host(:not([hidden])) {
width: 100%;
height: 100%;
display: block;
width: 100%;
height: 100%;
display: block;
container-type: size;
}

.ui5-page-root {
height: inherit;
overflow: hidden;
position: relative;
z-index: 0;
box-sizing: border-box;
background-color: inherit;
height: inherit;
overflow: hidden;
position: relative;
z-index: 0;
box-sizing: border-box;
background-color: inherit;
}

.ui5-page-header-root {
z-index: 1;
z-index: 1;
}

.ui5-page-content-root {
overflow: hidden auto;
position: absolute;
will-change: scroll-position;
width: 100%;
top: 2.75rem;
bottom: 0;
box-sizing: border-box;
font-size: var(--sapFontSize);
color: var(--sapTextColor);
overflow: hidden auto;
position: absolute;
will-change: scroll-position;
width: 100%;
top: 2.75rem;
bottom: 0;
box-sizing: border-box;
font-size: var(--sapFontSize);
color: var(--sapTextColor);
}

.ui5-page-footer-root {
width: 100%;
box-sizing: border-box;
position: absolute;
bottom: 0;
left: 0;
z-index: 2;
width: 100%;
width: 100%;
box-sizing: border-box;
position: absolute;
bottom: 0;
left: 0;
z-index: 2;
width: 100%;
}

:host(:not([fixed-footer])) .ui5-page-footer-root {
opacity: 1;
bottom: 0.5rem;
opacity: 1;
bottom: 0.5rem;
}
/*** Responsive paddings ***/

:host([media-range="S"]) .ui5-page-content-root,
:host([media-range="S"]:not([fixed-footer])) .ui5-page-footer-root {
padding: 0 1rem;
}

:host([media-range="S"]) ::slotted([ui5-bar][slot="header"]) {
box-sizing: border-box;
padding: 0 .25rem;
}

:host([media-range="S"]) ::slotted([ui5-bar][design="Footer"]) {
box-sizing: border-box;
padding: 0 .25rem;
}

:host([media-range="M"]) .ui5-page-content-root,
:host([media-range="L"]) .ui5-page-content-root,
:host([media-range="M"]:not([fixed-footer])) .ui5-page-footer-root,
:host([media-range="L"]:not([fixed-footer])) .ui5-page-footer-root {
padding: 0 2rem;
}

:host([media-range="M"]) ::slotted([ui5-bar][slot="header"]),
:host([media-range="L"]) ::slotted([ui5-bar][slot="header"]) {
box-sizing: border-box;
padding: 0 1.25rem;
}

:host([media-range="M"]) ::slotted([ui5-bar][design="Footer"]),
:host([media-range="L"]) ::slotted([ui5-bar][design="Footer"]) {
box-sizing: border-box;
padding: 0 1.25rem;
}

:host([media-range="XL"]) .ui5-page-content-root,
:host([media-range="XL"]:not([fixed-footer])) .ui5-page-footer-root {
padding: 0 3rem;
}

:host([media-range="XL"]) ::slotted([ui5-bar][slot="header"]) {
box-sizing: border-box;
padding: 0 2.25rem;
}

:host([media-range="XL"]) ::slotted([ui5-bar][design="Footer"]) {
box-sizing: border-box;
padding: 0 2.25rem;
/* S Size */
@container (max-width: 599px) {
:host([floating-footer]) .ui5-page-footer-root,
.ui5-page-content-root {
padding: 0 1rem;
}

::slotted([ui5-bar][slot="header"]),
::slotted([ui5-bar][design="Footer"]) {
box-sizing: border-box;
padding: 0 .25rem;
}
}

/* M Size */
@container (min-width: 600px) and (max-width: 1023px) {
:host([floating-footer]) .ui5-page-footer-root,
.ui5-page-content-root {
padding: 0 2rem;
}

::slotted([ui5-bar][slot="header"]),
::slotted([ui5-bar][slot="footer"]) {
box-sizing: border-box;
padding: 0 1.25rem;
}
}

/* L Size */
@container (min-width: 1024px) and (max-width: 1439px) {
:host([floating-footer]) .ui5-page-footer-root,
.ui5-page-content-root {
padding: 0 2rem;
}

::slotted([ui5-bar][slot="header"]),
::slotted([ui5-bar][slot="footer"]) {
box-sizing: border-box;
padding: 0 1.25rem;
}
}

/* XL Size */
@container (min-width: 1440px) {
:host([floating-footer]) .ui5-page-footer-root,
.ui5-page-content-root {
padding: 0 3rem;
}

::slotted([ui5-bar][slot="header"]),
::slotted([ui5-bar][slot="footer"]) {
box-sizing: border-box;
padding: 0 2.25rem;
}
}

:host([no-scrolling]) .ui5-page-content-root {
overflow: hidden;
overflow: hidden;
}

:host([hide-footer][fixed-footer]) .ui5-page-footer-root {
display: none;
display: none;
}

:host(:not([fixed-footer]):not([hide-footer])) .ui5-page-footer-root {
animation: bounceShow 0.35s forwards ease-in-out;
animation: bounceShow 0.35s forwards ease-in-out;
}

:host(:not([fixed-footer])[hide-footer]) .ui5-page-footer-root {
animation: bounceHide 0.35s forwards ease-in-out;
animation: bounceHide 0.35s forwards ease-in-out;
}

/* BackgroundDesign */
:host([background-design="Solid"]) {
background-color: var(--sapBackgroundColor);
background-color: var(--sapBackgroundColor);
}

:host([background-design="Transparent"]) {
background-color: var(--_ui5_page_transparent_bg);
background-color: var(--_ui5_page_transparent_bg);
}

:host([background-design="List"]) {
background-color: var(--_ui5_page_list_bg);
background-color: var(--_ui5_page_list_bg);
}

/* Footer animation */
@keyframes bounceShow {
0% {
transform: translateY(100%);
opacity: 0;
}
100% {
opacity: 1;
}
0% {
transform: translateY(100%);
opacity: 0;
}
100% {
opacity: 1;
}
}

@keyframes bounceHide {
0% {
transform: translateY(-5%);
opacity: 1;
}
100% {
transform: translateY(100%);
opacity: 0;
}
0% {
transform: translateY(-5%);
opacity: 1;
}
100% {
transform: translateY(100%);
opacity: 0;
}
}
26 changes: 13 additions & 13 deletions packages/fiori/test/specs/Page.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,24 +6,24 @@ describe("Page general interaction", () => {
});

it("tests initial rendering", async () => {
const page = await browser.$("#page");
const header = await page.shadow$(".ui5-page-header-root");
const content = await page.shadow$(".ui5-page-content-root");
const footer = await page.shadow$(".ui5-page-footer-root");
const page = await browser.$("#page");
const header = await page.shadow$(".ui5-page-header-root");
const content = await page.shadow$(".ui5-page-content-root");
const footer = await page.shadow$(".ui5-page-footer-root");

assert.ok(await page.isExisting(), "The component should have a shadow root.");
assert.ok(await header.isExisting(), "Header should be rendered.");
assert.ok(await content.isExisting(), "Content should be rendered.");
assert.ok(await footer.isExisting(), "Footer should be rendered.");
});
assert.ok(await page.isExisting(), "The component should have a shadow root.");
assert.ok(await header.isExisting(), "Header should be rendered.");
assert.ok(await content.isExisting(), "Content should be rendered.");
assert.ok(await footer.isExisting(), "Footer should be rendered.");
});

it("tests footer visibility", async () => {
const footer = await browser.$("#page").shadow$(".ui5-page-footer-root");
const button = await browser.$("#toggleVisibility");
const footer = await browser.$("#page").shadow$(".ui5-page-footer-root");
const button = await browser.$("#toggleVisibility");

assert.ok(await footer.isDisplayedInViewport(), "Footer should be visible.");
assert.ok(await footer.isDisplayedInViewport(), "Footer should be visible.");

await button.click();
await button.click();

await browser.waitUntil(async () => !(await footer.isDisplayedInViewport()), {
timeout: 500,
Expand Down