Skip to content

Commit b720393

Browse files
fifoosidfifoosid
authoredJun 16, 2021
feat(ui5-page): implement responsive paddings (#3412)
1 parent b1e2eaf commit b720393

File tree

6 files changed

+102
-31
lines changed

6 files changed

+102
-31
lines changed
 

‎packages/fiori/src/Bar.hbs

+7-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
1-
<div class="ui5-bar-root" aria-label="{{accInfo.label}}"
2-
role="toolbar">
1+
<div
2+
class="ui5-bar-root"
3+
aria-label="{{accInfo.label}}"
4+
role="toolbar"
5+
part="bar"
6+
>
37
<div class="ui5-bar-content-container ui5-bar-startcontent-container">
48
<slot name="startContent"></slot>
59
</div>
@@ -9,4 +13,4 @@
913
<div class="ui5-bar-content-container ui5-bar-endcontent-container">
1014
<slot name="endContent"></slot>
1115
</div>
12-
</div>
16+
</div>

‎packages/fiori/src/Bar.js

+9
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,15 @@ const metadata = {
8787
* The middleContent will be centered in the available space between the startContent and the endContent areas,
8888
* therefore it might not always be centered in the entire bar.
8989
*
90+
* <h3>CSS Shadow Parts</h3>
91+
*
92+
* <ui5-link target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM.
93+
* <br>
94+
* The <code>ui5-bar</code> exposes the following CSS Shadow Parts:
95+
* <ul>
96+
* <li>bar - Used to style the wrapper of the content of the component</li>
97+
* </ul>
98+
*
9099
* <h3>ES6 Module Import</h3>
91100
*
92101
* <code>import "@ui5/webcomponents-fiori/dist/Bar.js";</code>

‎packages/fiori/src/Page.js

+31
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
22
import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
3+
import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
4+
import MediaRange from "@ui5/webcomponents-base/dist/MediaRange.js";
35
import PageBackgroundDesign from "./types/PageBackgroundDesign.js";
46

57
// Template
@@ -71,6 +73,17 @@ const metadata = {
7173
hideFooter: {
7274
type: Boolean,
7375
},
76+
77+
/**
78+
* Defines the current media query size.
79+
*
80+
* @type {string}
81+
* @private
82+
* @since 1.0.0-rc.15
83+
*/
84+
mediaRange: {
85+
type: String,
86+
},
7487
},
7588

7689
slots: /** @lends sap.ui.webcomponents.fiori.Page.prototype */ {
@@ -163,6 +176,24 @@ class Page extends UI5Element {
163176
return PageTemplate;
164177
}
165178

179+
constructor() {
180+
super();
181+
182+
this._updateMediaRange = this.updateMediaRange.bind(this);
183+
}
184+
185+
onEnterDOM() {
186+
ResizeHandler.register(this, this._updateMediaRange);
187+
}
188+
189+
onExitDOM() {
190+
ResizeHandler.deregister(this, this._updateMediaRange);
191+
}
192+
193+
updateMediaRange() {
194+
this.mediaRange = MediaRange.getCurrentRange(MediaRange.RANGESETS.RANGE_4STEPS, this.getDomRef().offsetWidth);
195+
}
196+
166197
get _contentBottom() {
167198
return !this.floatingFooter && !this.hideFooter ? "2.75rem" : "0";
168199
}

‎packages/fiori/src/themes/Page.css

+40-7
Original file line numberDiff line numberDiff line change
@@ -29,24 +29,57 @@
2929
}
3030

3131
.ui5-page-footer-root {
32+
width: 100%;
33+
box-sizing: border-box;
3234
position: absolute;
3335
bottom: 0;
3436
left: 0;
3537
z-index: 2;
3638
width: 100%;
3739
}
3840

39-
:host([disable-scrolling]) .ui5-page-content-root {
40-
overflow: hidden;
41-
}
42-
4341
:host([floating-footer]) .ui5-page-footer-root {
44-
left: 0.5rem;
45-
right: 0.5rem;
46-
width: auto;
4742
opacity: 1;
4843
bottom: 0.5rem;
4944
}
45+
/*** Responsive paddings ***/
46+
47+
:host([media-range="S"]) .ui5-page-content-root,
48+
:host([media-range="S"][floating-footer]) .ui5-page-footer-root {
49+
padding: 0 1rem;
50+
}
51+
52+
:host([media-range="S"]) ::slotted([ui5-bar][slot="header"]) {
53+
box-sizing: border-box;
54+
padding: 0 .25rem;
55+
}
56+
57+
:host([media-range="M"]) .ui5-page-content-root,
58+
:host([media-range="L"]) .ui5-page-content-root,
59+
:host([media-range="M"][floating-footer]) .ui5-page-footer-root,
60+
:host([media-range="L"][floating-footer]) .ui5-page-footer-root {
61+
padding: 0 2rem;
62+
}
63+
64+
:host([media-range="M"]) ::slotted([ui5-bar][slot="header"]),
65+
:host([media-range="L"]) ::slotted([ui5-bar][slot="header"]) {
66+
box-sizing: border-box;
67+
padding: 0 1.25rem;
68+
}
69+
70+
:host([media-range="XL"]) .ui5-page-content-root,
71+
:host([media-range="XL"][floating-footer]) .ui5-page-footer-root {
72+
padding: 0 3rem;
73+
}
74+
75+
:host([media-range="XL"]) ::slotted([ui5-bar][slot="header"]) {
76+
box-sizing: border-box;
77+
padding: 0 2.25rem;
78+
}
79+
80+
:host([disable-scrolling]) .ui5-page-content-root {
81+
overflow: hidden;
82+
}
5083

5184
:host([hide-footer]:not([floating-footer])) .ui5-page-footer-root {
5285
display: none;

‎packages/fiori/test/pages/Page.html

+5-7
Original file line numberDiff line numberDiff line change
@@ -28,13 +28,11 @@
2828

2929
<body style="background-color: var(--sapBackgroundColor);"></body>
3030
<ui5-page id="page" background-design="List" floating-footer show-footer>
31-
<div slot="header">
32-
<ui5-bar design="Header">
33-
<ui5-button icon="home" title="Go home" slot="startContent"></ui5-button>
34-
<ui5-label slot="middleContent">Title</ui5-label>
35-
<ui5-button icon="action-settings" title="Go to settings" slot="endContent"></ui5-button>
36-
</ui5-bar>
37-
</div>
31+
<ui5-bar design="Header" slot="header">
32+
<ui5-button icon="home" title="Go home" slot="startContent"></ui5-button>
33+
<ui5-label slot="middleContent">Title</ui5-label>
34+
<ui5-button icon="action-settings" title="Go to settings" slot="endContent"></ui5-button>
35+
</ui5-bar>
3836

3937
<div>
4038
<div style="width: 100%;">

‎packages/fiori/test/samples/Page.sample.html

+10-14
Original file line numberDiff line numberDiff line change
@@ -20,13 +20,11 @@
2020
<h3>Page with floating footer</h3>
2121
<div class="snippet">
2222
<ui5-page id="page" style="height: 700px; width: 500px" background-design="List" floating-footer show-footer>
23-
<div slot="header">
24-
<ui5-bar design="Header">
25-
<ui5-button icon="home" title="Go home" slot="startContent"></ui5-button>
26-
<ui5-label slot="middleContent">Title</ui5-label>
27-
<ui5-button icon="action-settings" title="Go to settings" slot="endContent"></ui5-button>
28-
</ui5-bar>
29-
</div>
23+
<ui5-bar design="Header" slot="header">
24+
<ui5-button icon="home" title="Go home" slot="startContent"></ui5-button>
25+
<ui5-label slot="middleContent">Title</ui5-label>
26+
<ui5-button icon="action-settings" title="Go to settings" slot="endContent"></ui5-button>
27+
</ui5-bar>
3028

3129
<div>
3230
<p class="content-paragraph">
@@ -81,13 +79,11 @@ <h3>Page with floating footer</h3>
8179
</div>
8280
<pre class="prettyprint lang-html"><xmp>
8381
<ui5-page id="page" background-design="List" floating-footer show-footer>
84-
<div slot="header">
85-
<ui5-bar design="Header">
86-
<ui5-button icon="home" title="Go home" slot="startContent"></ui5-button>
87-
<ui5-label slot="middleContent">Title</ui5-label>
88-
<ui5-button icon="action-settings" title="Go to settings" slot="endContent"></ui5-button>
89-
</ui5-bar>
90-
</div>
82+
<ui5-bar design="Header" slot="header">
83+
<ui5-button icon="home" title="Go home" slot="startContent"></ui5-button>
84+
<ui5-label slot="middleContent">Title</ui5-label>
85+
<ui5-button icon="action-settings" title="Go to settings" slot="endContent"></ui5-button>
86+
</ui5-bar>
9187

9288
<div>
9389
<p>

0 commit comments

Comments
 (0)
Please sign in to comment.