Skip to content

Commit

Permalink
refactor(ui5-flexible-column-layout): Allow more customization
Browse files Browse the repository at this point in the history
  • Loading branch information
@vladitasev
vladitasev committed Jul 23, 2020
1 parent 47b38cc commit 0035da4
Show file tree
Hide file tree
Showing 3 changed files with 94 additions and 18 deletions.
28 changes: 26 additions & 2 deletions packages/fiori/src/FlexibleColumnLayout.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,6 +112,30 @@ const metadata = {
type: Integer,
defaultValue: 0,
},

/**
* Defines how much of the total width in % the smaller column will take on two-column layouts
* For example 33 means 33/67 and 67/33, 20 means 20/80 and 80/20, etc...
*
* @type {Integer}
* @private
*/
_smallerColumnSizeTwoColumns: {
type: Integer,
defaultValue: 33,
},

/**
* Defines how much of the total width in % each of the smaller columns will take on three-column layouts
* For example, 25 means 25/50/25 and 25/25/50, 20 means 20/60/20 and 20/20/60, etc...
*
* @type {Integer}
* @private
*/
_smallerColumnSizeThreeColumns: {
type: Integer,
defaultValue: 25,
},
},
slots: /** @lends sap.ui.webcomponents.fiori.FlexibleColumnLayout.prototype */ {
/**
Expand Down Expand Up @@ -383,7 +407,7 @@ class FlexibleColumnLayout extends UI5Element {
}

nextColumnLayout(layout) {
return getLayoutsByMedia()[this.media][layout].layout;
return getLayoutsByMedia(this._smallerColumnSizeTwoColumns, this._smallerColumnSizeThreeColumns)[this.media][layout].layout;
}

calcVisibleColumns(colLayot) {
Expand Down Expand Up @@ -559,7 +583,7 @@ class FlexibleColumnLayout extends UI5Element {
}

get effectiveArrowsInfo() {
return getLayoutsByMedia()[this.media][this.layout].arrows;
return getLayoutsByMedia(this._smallerColumnSizeTwoColumns, this._smallerColumnSizeThreeColumns)[this.media][this.layout].arrows;
}

get media() {
Expand Down
33 changes: 18 additions & 15 deletions packages/fiori/src/fcl-utils/FCLLayout.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
const getLayoutsByMedia = () => {
const getLayoutsByMedia = (smallTwo = 33, smallThree = 25) => {
const bigTwo = 100 - smallTwo; // 67% by spec
const bigThree = 100 - 2 * smallThree; // 50% by spec

return {
desktop: {
"OneColumn": {
Expand All @@ -9,49 +12,49 @@ const getLayoutsByMedia = () => {
],
},
"TwoColumnsStartExpanded": {
layout: ["67%", "33%", 0],
layout: [`${bigTwo}%`, `${smallTwo}%`, 0],
arrows: [
{ visible: true, dir: "mirror" },
{ visible: false, dir: null },
],
},
"TwoColumnsMidExpanded": {
layout: ["33%", "67%", 0],
layout: [`${smallTwo}%`, `${bigTwo}%`, 0],
arrows: [
{ visible: true, dir: null },
{ visible: false, dir: null },
],
},
"ThreeColumnsStartExpanded": {
layout: ["25%", "50%", "25%"],
layout: [`${smallThree}%`, `${bigThree}%`, `${smallThree}%`],
arrows: [
{ visible: true, dir: null },
{ visible: true, dir: null },
],
},
"ThreeColumnsMidExpanded": {
layout: ["25%", "50%", "25%"],
layout: [`${smallThree}%`, `${bigThree}%`, `${smallThree}%`],
arrows: [
{ visible: true, dir: null },
{ visible: true, dir: null },
],
},
"ThreeColumnsEndExpanded": {
layout: ["25%", "25%", "50%"],
layout: [`${smallThree}%`, `${smallThree}%`, `${bigThree}%`],
arrows: [
{ visible: false, dir: null, separator: true },
{ visible: true, dir: "mirror" },
],
},
"ThreeColumnsStartExpandedEndHidden": {
layout: ["67%", "33%", 0],
layout: [`${bigTwo}%`, `${smallTwo}%`, 0],
arrows: [
{ visible: true, dir: "mirror" },
{ visible: false, dir: null },
],
},
"ThreeColumnsMidExpandedEndHidden": {
layout: ["33%", "67%", 0],
layout: [`${smallTwo}%`, `${bigTwo}%`, 0],
arrows: [
{ visible: true, dir: null },
{ visible: true, dir: null },
Expand Down Expand Up @@ -81,49 +84,49 @@ const getLayoutsByMedia = () => {
],
},
"TwoColumnsStartExpanded": {
layout: ["67%", "33%", 0],
layout: [`${bigTwo}%`, `${smallTwo}%`, 0],
arrows: [
{ visible: true, dir: "mirror" },
{ visible: false, dir: null },
],
},
"TwoColumnsMidExpanded": {
layout: ["33%", "67%", 0],
layout: [`${smallTwo}%`, `${bigTwo}%`, 0],
arrows: [
{ visible: true, dir: null },
{ visible: false, dir: null },
],
},
"ThreeColumnsStartExpanded": {
layout: ["67%", "33%", 0],
layout: [`${bigTwo}%`, `${smallTwo}%`, 0],
arrows: [
{ visible: true, dir: "mirror" },
{ visible: false, dir: null },
],
},
"ThreeColumnsMidExpanded": {
layout: [0, "67%", "33%"],
layout: [0, `${bigTwo}%`, `${smallTwo}%`],
arrows: [
{ visible: true, dir: null },
{ visible: true, dir: null },
],
},
"ThreeColumnsEndExpanded": {
layout: [0, "33%", "67%"],
layout: [0, `${smallTwo}%`, `${bigTwo}%`],
arrows: [
{ visible: false, dir: null },
{ visible: true, dir: "mirror" },
],
},
"ThreeColumnsStartExpandedEndHidden": {
layout: ["67%", "33%", 0],
layout: [`${bigTwo}%`, `${smallTwo}%`, 0],
arrows: [
{ visible: true, dir: "mirror" },
{ visible: false, dir: null },
],
},
"ThreeColumnsMidExpandedEndHidden": {
layout: ["33%", "67%", 0],
layout: [`${smallTwo}%`, `${bigTwo}%`, 0],
arrows: [
{ visible: true, dir: null },
{ visible: true, dir: null },
Expand Down
51 changes: 50 additions & 1 deletion packages/fiori/test/pages/FCL.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -573,6 +573,55 @@
</div>
</ui5-flexible-column-layout>

<ui5-flexible-column-layout id="fcl_custom" layout="ThreeColumnsMidExpanded" _smaller-column-size-two-columns="10" _smaller-column-size-three-columns="10">
<!-- start column -->
<div style="box-sizing: border-box;" slot="startColumn">
<div style="padding: 1rem">
<ui5-title>Column 1</ui5-title>
</div>
<ui5-list>
<ui5-li>Hello worild!</ui5-li>
<ui5-li>Hello worild!</ui5-li>
<ui5-li>Hello worild!</ui5-li>
<ui5-li>Hello worild!</ui5-li>
<ui5-li>Hello worild!</ui5-li>
<ui5-li>Hello worild!</ui5-li>
<ui5-li>Hello worild!</ui5-li>
<ui5-li>Hello worild!</ui5-li>
</ui5-list>
</div>

<!-- mid column -->
<div style="box-sizing: border-box;" slot="midColumn">
<div style="padding: 1rem">
<ui5-title>Column 2</ui5-title>
</div>
<ui5-list>
<ui5-li>Hello worild!</ui5-li>
<ui5-li>Hello worild!</ui5-li>
<ui5-li>Hello worild!</ui5-li>
<ui5-li>Hello worild!</ui5-li>
<ui5-li>Hello worild!</ui5-li>
<ui5-li>Hello worild!</ui5-li>
<ui5-li>Hello worild!</ui5-li>
<ui5-li>Hello worild!</ui5-li>
</ui5-list>
</div>

<!-- end column -->
<div style="box-sizing: border-box;" slot="endColumn">
<div style="padding: 1rem">
<ui5-title>Column 3</ui5-title>
</div>

<ui5-list>
<ui5-li>Hello worild!</ui5-li>
<ui5-li>Hello worild!</ui5-li>
<ui5-li>Hello worild!</ui5-li>
</ui5-list>
</div>
</ui5-flexible-column-layout>

<script>
var counter = 0;
var counter2 = 0;
Expand All @@ -586,7 +635,7 @@
layoutChangeRes4.value = ++counter;

});

fcl3.addEventListener("ui5-layout-change", function(e) {
testLayoutChange.value = ++counter2;
});
Expand Down

0 comments on commit 0035da4

Please sign in to comment.