Skip to content

Commit bd09e17

Browse files
ivoplashkovivoplashkov
authored
feat(ui5-page): Initial implementation (#2685)
The component has the following features: - slots for header, content (should be put in the middle) and footer - property to make it scrollable or not scrollable - both the header and footer are visible while scrolling the content - floatingFooter - property to support "floating footer"- the footer should not take space, but the page should add more padding to the scrolling content, so that when scrolling to the very bottom of the content the content does not underlay the footer. - hideFooter FIXES: #2433
1 parent cb76cf4 commit bd09e17

21 files changed

+615
-0
lines changed

‎packages/fiori/bundle.esm.js

+1
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import ProductSwitchItem from "./dist/ProductSwitchItem.js";
1414
import SideNavigation from "./dist/SideNavigation.js";
1515
import SideNavigationItem from "./dist/SideNavigationItem.js";
1616
import SideNavigationSubItem from "./dist/SideNavigationSubItem.js";
17+
import Page from "./dist/Page.js";
1718
import ShellBar from "./dist/ShellBar.js";
1819
import ShellBarItem from "./dist/ShellBarItem.js";
1920
import Timeline from "./dist/Timeline.js";

‎packages/fiori/src/Page.hbs

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<div class="ui5-page-root">
2+
<header
3+
class="ui5-page-header-root"
4+
id="ui5-page-header">
5+
<slot name="header"></slot>
6+
</header>
7+
8+
<section class="ui5-page-content-root" style="{{styles.content}}">
9+
<slot></slot>
10+
</section>
11+
12+
<footer class="ui5-page-footer-root" style="{{styles.footer}}">
13+
<slot name="footer"></slot>
14+
</footer>
15+
</div>

‎packages/fiori/src/Page.js

+195
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,195 @@
1+
import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
2+
import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
3+
import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
4+
import PageBackgroundDesign from "./types/PageBackgroundDesign.js";
5+
6+
// Template
7+
import PageTemplate from "./generated/templates/PageTemplate.lit.js";
8+
9+
// Styles
10+
import PageCss from "./generated/themes/Page.css.js";
11+
12+
13+
/**
14+
* @public
15+
*/
16+
const metadata = {
17+
tag: "ui5-page",
18+
managedSlots: true,
19+
languageAware: true,
20+
properties: /** @lends sap.ui.webcomponents.fiori.Page.prototype */ {
21+
22+
/**
23+
* Defines the background color of the <code>ui5-page</code>.
24+
* <br><br>
25+
* <b>Note:</b> When a ui5-list is placed inside the page, we recommend using “List” to ensure better color contrast.
26+
* <br><br>
27+
* Available options are:
28+
* <ul>
29+
* <li><code>List</code></li>
30+
* <li><code>Solid</code></li>
31+
* <li><code>Standard</code></li> (default)
32+
* <li><code>Transparent</code></li>
33+
* <ul>
34+
* @type {PageBackgroundDesign}
35+
* @defaultvalue "Standard"
36+
* @public
37+
*/
38+
backgroundDesign: {
39+
type: String,
40+
defaultValue: PageBackgroundDesign.Standard,
41+
},
42+
43+
/**
44+
* Disables vertical scrolling of page content.
45+
* If set to true, there will be no vertical scrolling at all.
46+
*
47+
* @type {Boolean}
48+
* @defaultvalue false
49+
* @public
50+
*/
51+
disableScrolling: {
52+
type: Boolean,
53+
},
54+
55+
/**
56+
* Defines if the footer should float over the content.
57+
* <br><br>
58+
* <b>Note:</b> When set to true the footer floats over the content with a slight offset from the bottom, otherwise it is fixed at the very bottom of the page.
59+
* @type {Boolean}
60+
* @defaultvalue true
61+
* @public
62+
*/
63+
floatingFooter: {
64+
type: Boolean,
65+
},
66+
67+
/**
68+
* Defines the footer visibility.
69+
*
70+
* @type {Boolean}
71+
* @defaultvalue false
72+
* @public
73+
*/
74+
hideFooter: {
75+
type: Boolean,
76+
},
77+
},
78+
79+
slots: /** @lends sap.ui.webcomponents.fiori.Page.prototype */ {
80+
81+
/**
82+
* Defines the header HTML Element.
83+
*
84+
* @type {HTMLElement[]}
85+
* @slot
86+
* @public
87+
*/
88+
header: {
89+
type: HTMLElement,
90+
},
91+
92+
/**
93+
* Defines the content HTML Element.
94+
*
95+
* @type {HTMLElement[]}
96+
* @slot
97+
* @public
98+
*/
99+
"default": {
100+
propertyName: "content",
101+
type: HTMLElement,
102+
},
103+
104+
/**
105+
* Defines the footer HTML Element.
106+
*
107+
* @type {HTMLElement[]}
108+
* @slot
109+
* @public
110+
*/
111+
footer: {
112+
type: HTMLElement,
113+
},
114+
},
115+
events: /** @lends sap.ui.webcomponents.fiori.Page.prototype */ {
116+
},
117+
};
118+
119+
/**
120+
* @class
121+
*
122+
* <h3 class="comment-api-title">Overview</h3>
123+
*
124+
* The <code>ui5-page</code> is a container control that holds one whole screen of an application.
125+
* The page has three distinct areas that can hold content - a header, content area and a footer.
126+
* <h3>Structure</h3>
127+
* <h4>Header</h4>
128+
* The top most area of the page is occupied by the header. The standard header includes a navigation button and a title.
129+
* <h4>Content</h4>
130+
* The content occupies the main part of the page. Only the content area is scrollable by default.
131+
* This can be prevented by setting <code>enableScrolling</code> to <code>false</code>.
132+
* <h4>Footer</h4>
133+
* The footer is optional and occupies the fixed bottom part of the page. Alternatively, the footer can be floating above the bottom part of the content.
134+
* This is enabled with the <code>floatingFooter</code> property.
135+
*
136+
*
137+
* <h3>ES6 Module Import</h3>
138+
*
139+
* <code>import @ui5/webcomponents-fiori/dist/Page.js";</code>
140+
*
141+
* @constructor
142+
* @author SAP SE
143+
* @alias sap.ui.webcomponents.fiori.Page
144+
* @extends UI5Element
145+
* @tagname ui5-page
146+
* @since 1.0.0-rc.12
147+
* @public
148+
*/
149+
class Page extends UI5Element {
150+
constructor() {
151+
super();
152+
this.i18nBundle = getI18nBundle("@ui5/webcomponents");
153+
}
154+
155+
static get metadata() {
156+
return metadata;
157+
}
158+
159+
static get render() {
160+
return litRender;
161+
}
162+
163+
static get styles() {
164+
return PageCss;
165+
}
166+
167+
static get template() {
168+
return PageTemplate;
169+
}
170+
171+
static async onDefine() {
172+
await fetchI18nBundle("@ui5/webcomponents");
173+
}
174+
175+
get _contentBottom() {
176+
return !this.floatingFooter && !this.hideFooter ? "2.75rem" : "0";
177+
}
178+
179+
get _contentPaddingBottom() {
180+
return this.floatingFooter && !this.hideFooter ? "3.5rem" : "0";
181+
}
182+
183+
get styles() {
184+
return {
185+
content: {
186+
"padding-bottom": this.footer.length && this._contentPaddingBottom,
187+
"bottom": this.footer.length && this._contentBottom,
188+
},
189+
};
190+
}
191+
}
192+
193+
Page.define();
194+
195+
export default Page;

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

+99
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
2+
:host(:not([hidden])) {
3+
width: 100%;
4+
height: 100%;
5+
}
6+
7+
.ui5-page-root {
8+
height: inherit;
9+
overflow: hidden;
10+
position: relative;
11+
z-index: 0;
12+
box-sizing: border-box;
13+
background-color: inherit;
14+
}
15+
16+
.ui5-page-header-root {
17+
z-index: 1;
18+
}
19+
20+
.ui5-page-content-root {
21+
overflow: hidden auto;
22+
position: absolute;
23+
will-change: scroll-position;
24+
width: 100%;
25+
top: 2.75rem;
26+
bottom: 0;
27+
box-sizing: border-box;
28+
}
29+
30+
.ui5-page-footer-root {
31+
position: absolute;
32+
bottom: 0;
33+
left: 0;
34+
z-index: 2;
35+
width: 100%;
36+
}
37+
38+
:host([disable-scrolling]) .ui5-page-content-root {
39+
overflow: hidden;
40+
}
41+
42+
:host([floating-footer]) .ui5-page-footer-root {
43+
left: 0.5rem;
44+
right: 0.5rem;
45+
width: auto;
46+
opacity: 1;
47+
bottom: 0.5rem;
48+
}
49+
50+
:host([hide-footer]:not([floating-footer])) .ui5-page-footer-root {
51+
display: none;
52+
}
53+
54+
:host([floating-footer]:not([hide-footer])) .ui5-page-footer-root {
55+
animation: bounceShow 0.35s forwards ease-in-out;
56+
}
57+
58+
:host([floating-footer][hide-footer]) .ui5-page-footer-root {
59+
animation: bounceHide 0.35s forwards ease-in-out;
60+
}
61+
62+
/* BackgroundDesign */
63+
:host([backgroundDesign="Standard"]) {
64+
background-color: var(--sapBackgroundColor);
65+
}
66+
67+
:host([backgroundDesign="Solid"]) {
68+
background-color: var(--sapBackgroundColor);
69+
}
70+
71+
:host([backgroundDesign="Transparent"]) {
72+
background-color: transparent;
73+
}
74+
75+
:host([backgroundDesign="List"]) {
76+
background-color: var(--_ui5_page_list_bg);
77+
}
78+
79+
/* Footer animation */
80+
@keyframes bounceShow {
81+
0% {
82+
transform: translateY(100%);
83+
opacity: 0;
84+
}
85+
100% {
86+
opacity: 1;
87+
}
88+
}
89+
90+
@keyframes bounceHide {
91+
0% {
92+
transform: translateY(-5%);
93+
opacity: 1;
94+
}
95+
100% {
96+
transform: translateY(100%);
97+
opacity: 0;
98+
}
99+
}

‎packages/fiori/src/themes/base/Page-parameters.css

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
:root {
2+
--_ui5_page_list_bg: var(--sapGroup_ContentBackground);
3+
}

‎packages/fiori/src/themes/sap_belize/parameters-bundle.css

+1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
@import "../base/Bar-parameters.css";
22
@import "../base/FlexibleColumnLayout-parameters.css";
3+
@import "../base/Page-parameters.css";
34
@import "../base/ProductSwitchItem-parameters.css";
45
@import "../base/TimelineItem-parameters.css";
56
@import "../base/UploadCollection-parameters.css";

‎packages/fiori/src/themes/sap_belize_hcb/Page-parameters.css

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
:root {
2+
--_ui5_page_list_bg: var(--sapBackgroundColor);
3+
}

‎packages/fiori/src/themes/sap_belize_hcb/parameters-bundle.css

+1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
@import "../base/Bar-parameters.css";
22
@import "./FlexibleColumnLayout-parameters.css";
3+
@import "./Page-parameters.css";
34
@import "./ProductSwitchItem-parameters.css";
45
@import "./TimelineItem-parameters.css";
56
@import "./UploadCollection-parameters.css";

‎packages/fiori/src/themes/sap_belize_hcw/Page-parameters.css

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
:root {
2+
--_ui5_page_list_bg: var(--sapBackgroundColor);
3+
}

‎packages/fiori/src/themes/sap_belize_hcw/parameters-bundle.css

+1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
@import "../base/Bar-parameters.css";
22
@import "./FlexibleColumnLayout-parameters.css";
3+
@import "./Page-parameters.css";
34
@import "./ProductSwitchItem-parameters.css";
45
@import "./TimelineItem-parameters.css";
56
@import "./UploadCollection-parameters.css";

‎packages/fiori/src/themes/sap_fiori_3/parameters-bundle.css

+1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
@import "../base/Bar-parameters.css";
22
@import "../base/FlexibleColumnLayout-parameters.css";
3+
@import "../base/Page-parameters.css";
34
@import "../base/ProductSwitchItem-parameters.css";
45
@import "../base/TimelineItem-parameters.css";
56
@import "../base/UploadCollection-parameters.css";

‎packages/fiori/src/themes/sap_fiori_3_dark/parameters-bundle.css

+1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
@import "../base/Bar-parameters.css";
22
@import "./FlexibleColumnLayout-parameters.css";
3+
@import "../base/Page-parameters.css";
34
@import "../base/ProductSwitchItem-parameters.css";
45
@import "../base/TimelineItem-parameters.css";
56
@import "../base/UploadCollection-parameters.css";

‎packages/fiori/src/themes/sap_fiori_3_hcb/Page-parameters.css

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
:root {
2+
--_ui5_page_list_bg: var(--sapBackgroundColor);
3+
}

‎packages/fiori/src/themes/sap_fiori_3_hcb/parameters-bundle.css

+1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
@import "../base/Bar-parameters.css";
2+
@import "./Page-parameters.css";
23
@import "./ProductSwitchItem-parameters.css";
34
@import "./TimelineItem-parameters.css";
45
@import "./UploadCollection-parameters.css";

‎packages/fiori/src/themes/sap_fiori_3_hcw/Page-parameters.css

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
:root {
2+
--_ui5_page_list_bg: var(--sapBackgroundColor);
3+
}

‎packages/fiori/src/themes/sap_fiori_3_hcw/parameters-bundle.css

+1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
@import "../base/Bar-parameters.css";
2+
@import "./Page-parameters.css";
23
@import "./ProductSwitchItem-parameters.css";
34
@import "./TimelineItem-parameters.css";
45
@import "./UploadCollection-parameters.css";

0 commit comments

Comments
 (0)