Skip to content

Commit bbd5f11

Browse files
vladitasevvladitasev
committed
refactor(ui5-flexlible-column-layout): Custom layouts configuration (#1987)
1 parent 48dfd34 commit bbd5f11

File tree

2 files changed

+346
-2
lines changed

2 files changed

+346
-2
lines changed

‎packages/fiori/src/FlexibleColumnLayout.js‎

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -112,6 +112,18 @@ const metadata = {
112112
type: Integer,
113113
defaultValue: 0,
114114
},
115+
116+
/**
117+
* Allows the user to replace the whole layouts configuration
118+
*
119+
* @type {Object}
120+
* @private
121+
* @sap-restricted
122+
*/
123+
_layoutsConfiguration: {
124+
type: Object,
125+
defaultValue: undefined,
126+
},
115127
},
116128
slots: /** @lends sap.ui.webcomponents.fiori.FlexibleColumnLayout.prototype */ {
117129
/**
@@ -383,7 +395,7 @@ class FlexibleColumnLayout extends UI5Element {
383395
}
384396

385397
nextColumnLayout(layout) {
386-
return getLayoutsByMedia()[this.media][layout].layout;
398+
return this._effectiveLayoutsByMedia[this.media][layout].layout;
387399
}
388400

389401
calcVisibleColumns(colLayot) {
@@ -559,7 +571,7 @@ class FlexibleColumnLayout extends UI5Element {
559571
}
560572

561573
get effectiveArrowsInfo() {
562-
return getLayoutsByMedia()[this.media][this.layout].arrows;
574+
return this._effectiveLayoutsByMedia[this.media][this.layout].arrows;
563575
}
564576

565577
get media() {
@@ -601,6 +613,10 @@ class FlexibleColumnLayout extends UI5Element {
601613
get accEndColumnText() {
602614
return this.i18nBundle.getText(FCL_END_COLUMN_TXT);
603615
}
616+
617+
get _effectiveLayoutsByMedia() {
618+
return this._layoutsConfiguration || getLayoutsByMedia();
619+
}
604620
}
605621

606622
FlexibleColumnLayout.define();

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

Lines changed: 328 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,328 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
6+
<meta charset="utf-8">
7+
8+
<title>Flexible Column Layout</title>
9+
10+
<script>delete Document.prototype.adoptedStyleSheets</script>
11+
<script src="../../webcomponentsjs/webcomponents-loader.js"></script>
12+
<script src="../../resources/bundle.esm.js" type="module"></script>
13+
<script nomodule src="../../resources/bundle.es5.js"></script>
14+
15+
<style>
16+
html, body {
17+
padding: 0;
18+
margin: 0;
19+
}
20+
21+
.sectionTitle, ui5-input, .testButton {
22+
margin-left: 1rem;
23+
}
24+
25+
.col {
26+
height: 100%;
27+
}
28+
29+
.colHeader {
30+
display: flex;
31+
align-items: center;
32+
justify-content: space-between;
33+
height: 2.75rem;
34+
padding: 0.25rem 1rem 0.25rem 1rem;
35+
background: var(--sapList_Background);
36+
box-sizing: border-box;
37+
}
38+
39+
.colSubHeader {
40+
display: flex;
41+
align-items: center;
42+
box-sizing: border-box;
43+
}
44+
45+
.productInfo {
46+
display:flex;
47+
flex-direction: row;
48+
align-items: center;
49+
flex-wrap: wrap;
50+
}
51+
</style>
52+
</head>
53+
54+
<body style="background-color: var(--sapBackgroundColor);">
55+
56+
<ui5-flexible-column-layout id="fcl3" layout="ThreeColumnsMidExpanded">
57+
<!-- start column -->
58+
<div style="box-sizing: border-box;" slot="startColumn">
59+
<div style="padding: 1rem">
60+
<ui5-title>Column 1</ui5-title>
61+
</div>
62+
<ui5-list>
63+
<ui5-li>Hello worild!</ui5-li>
64+
<ui5-li>Hello worild!</ui5-li>
65+
<ui5-li>Hello worild!</ui5-li>
66+
<ui5-li>Hello worild!</ui5-li>
67+
<ui5-li>Hello worild!</ui5-li>
68+
<ui5-li>Hello worild!</ui5-li>
69+
<ui5-li>Hello worild!</ui5-li>
70+
<ui5-li>Hello worild!</ui5-li>
71+
</ui5-list>
72+
</div>
73+
74+
<!-- mid column -->
75+
<div style="box-sizing: border-box;" slot="midColumn">
76+
<div style="padding: 1rem">
77+
<ui5-title>Column 2</ui5-title>
78+
</div>
79+
<ui5-list>
80+
<ui5-li>Hello worild!</ui5-li>
81+
<ui5-li>Hello worild!</ui5-li>
82+
<ui5-li>Hello worild!</ui5-li>
83+
<ui5-li>Hello worild!</ui5-li>
84+
<ui5-li>Hello worild!</ui5-li>
85+
<ui5-li>Hello worild!</ui5-li>
86+
<ui5-li>Hello worild!</ui5-li>
87+
<ui5-li>Hello worild!</ui5-li>
88+
</ui5-list>
89+
</div>
90+
91+
<!-- end column -->
92+
<div style="box-sizing: border-box;" slot="endColumn">
93+
<div style="padding: 1rem">
94+
<ui5-title>Column 3</ui5-title>
95+
</div>
96+
97+
<ui5-list>
98+
<ui5-li>Hello worild!</ui5-li>
99+
<ui5-li>Hello worild!</ui5-li>
100+
<ui5-li>Hello worild!</ui5-li>
101+
</ui5-list>
102+
</div>
103+
</ui5-flexible-column-layout>
104+
105+
<script>
106+
var fcl = document.getElementById("fcl3");
107+
fcl._layoutsConfiguration = {
108+
desktop: {
109+
"OneColumn": {
110+
layout: ["100%", 0, 0],
111+
arrows: [
112+
{ visible: false, dir: null },
113+
{ visible: false, dir: null },
114+
],
115+
},
116+
"TwoColumnsStartExpanded": {
117+
layout: ["90%", "10%", 0],
118+
arrows: [
119+
{ visible: true, dir: "mirror" },
120+
{ visible: false, dir: null },
121+
],
122+
},
123+
"TwoColumnsMidExpanded": {
124+
layout: ["10%", "90%", 0],
125+
arrows: [
126+
{ visible: true, dir: null },
127+
{ visible: false, dir: null },
128+
],
129+
},
130+
"ThreeColumnsStartExpanded": {
131+
layout: ["15%", "70%", "15%"],
132+
arrows: [
133+
{ visible: true, dir: null },
134+
{ visible: true, dir: null },
135+
],
136+
},
137+
"ThreeColumnsMidExpanded": {
138+
layout: ["15%", "70%", "15%"],
139+
arrows: [
140+
{ visible: true, dir: null },
141+
{ visible: true, dir: null },
142+
],
143+
},
144+
"ThreeColumnsEndExpanded": {
145+
layout: ["15%", "15%", "70%"],
146+
arrows: [
147+
{ visible: false, dir: null, separator: true },
148+
{ visible: true, dir: "mirror" },
149+
],
150+
},
151+
"ThreeColumnsStartExpandedEndHidden": {
152+
layout: ["90%", "10%", 0],
153+
arrows: [
154+
{ visible: true, dir: "mirror" },
155+
{ visible: false, dir: null },
156+
],
157+
},
158+
"ThreeColumnsMidExpandedEndHidden": {
159+
layout: ["10%", "90%", 0],
160+
arrows: [
161+
{ visible: true, dir: null },
162+
{ visible: true, dir: null },
163+
],
164+
},
165+
"MidColumnFullScreen": {
166+
layout: [0, "100%", 0],
167+
arrows: [
168+
{ visible: false, dir: null },
169+
{ visible: false, dir: null },
170+
],
171+
},
172+
"EndColumnFullScreen": {
173+
layout: [0, 0, "100%"],
174+
arrows: [
175+
{ visible: false, dir: null },
176+
{ visible: false, dir: null },
177+
],
178+
},
179+
},
180+
tablet: {
181+
"OneColumn": {
182+
layout: ["100%", 0, 0],
183+
arrows: [
184+
{ visible: false, dir: null },
185+
{ visible: false, dir: null },
186+
],
187+
},
188+
"TwoColumnsStartExpanded": {
189+
layout: ["90%", "10%", 0],
190+
arrows: [
191+
{ visible: true, dir: "mirror" },
192+
{ visible: false, dir: null },
193+
],
194+
},
195+
"TwoColumnsMidExpanded": {
196+
layout: ["10%", "90%", 0],
197+
arrows: [
198+
{ visible: true, dir: null },
199+
{ visible: false, dir: null },
200+
],
201+
},
202+
"ThreeColumnsStartExpanded": {
203+
layout: ["90%", "10%", 0],
204+
arrows: [
205+
{ visible: true, dir: "mirror" },
206+
{ visible: false, dir: null },
207+
],
208+
},
209+
"ThreeColumnsMidExpanded": {
210+
layout: [0, "90%", "10%"],
211+
arrows: [
212+
{ visible: true, dir: null },
213+
{ visible: true, dir: null },
214+
],
215+
},
216+
"ThreeColumnsEndExpanded": {
217+
layout: [0, "10%", "90%"],
218+
arrows: [
219+
{ visible: false, dir: null },
220+
{ visible: true, dir: "mirror" },
221+
],
222+
},
223+
"ThreeColumnsStartExpandedEndHidden": {
224+
layout: ["90%", "10%", 0],
225+
arrows: [
226+
{ visible: true, dir: "mirror" },
227+
{ visible: false, dir: null },
228+
],
229+
},
230+
"ThreeColumnsMidExpandedEndHidden": {
231+
layout: ["10%", "90%", 0],
232+
arrows: [
233+
{ visible: true, dir: null },
234+
{ visible: true, dir: null },
235+
],
236+
},
237+
"MidColumnFullScreen": {
238+
layout: [0, "100%", 0],
239+
arrows: [
240+
{ visible: false, dir: null },
241+
{ visible: false, dir: null },
242+
],
243+
},
244+
"EndColumnFullScreen": {
245+
layout: [0, 0, "100%"],
246+
arrows: [
247+
{ visible: false, dir: null },
248+
{ visible: false, dir: null },
249+
],
250+
},
251+
},
252+
phone: {
253+
"OneColumn": {
254+
layout: ["100%", 0, 0],
255+
arrows: [
256+
{ visible: false, dir: null },
257+
{ visible: false, dir: null },
258+
],
259+
},
260+
"TwoColumnsStartExpanded": {
261+
layout: [0, "100%", 0],
262+
arrows: [
263+
{ visible: false, dir: null },
264+
{ visible: false, dir: null },
265+
],
266+
},
267+
"TwoColumnsMidExpanded": {
268+
layout: [0, "100%", 0],
269+
arrows: [
270+
{ visible: false, dir: null },
271+
{ visible: false, dir: null },
272+
],
273+
},
274+
"ThreeColumnsStartExpanded": {
275+
layout: [0, 0, "100%"],
276+
arrows: [
277+
{ visible: false, dir: null },
278+
{ visible: false, dir: null },
279+
],
280+
},
281+
"ThreeColumnsMidExpanded": {
282+
layout: [0, 0, "100%"],
283+
arrows: [
284+
{ visible: false, dir: null },
285+
{ visible: false, dir: null },
286+
],
287+
},
288+
"ThreeColumnsEndExpanded": {
289+
layout: [0, 0, "100%"],
290+
arrows: [
291+
{ visible: false, dir: null },
292+
{ visible: false, dir: null },
293+
],
294+
},
295+
"ThreeColumnsStartExpandedEndHidden": {
296+
layout: [0, 0, "100%"],
297+
arrows: [
298+
{ visible: false, dir: null },
299+
{ visible: false, dir: null },
300+
],
301+
},
302+
"ThreeColumnsMidExpandedEndHidden": {
303+
layout: [0, 0, "100%"],
304+
arrows: [
305+
{ visible: false, dir: null },
306+
{ visible: false, dir: null },
307+
],
308+
},
309+
"MidColumnFullScreen": {
310+
layout: [0, "100%", 0],
311+
arrows: [
312+
{ visible: false, dir: null },
313+
{ visible: false, dir: null },
314+
],
315+
},
316+
"EndColumnFullScreen": {
317+
layout: [0, 0, "100%"],
318+
arrows: [
319+
{ visible: false, dir: null },
320+
{ visible: false, dir: null },
321+
],
322+
},
323+
},
324+
};
325+
</script>
326+
327+
</body>
328+
</html>

0 commit comments

Comments
 (0)