From 4c9da5fa9c0fce8fda3c0ccf176f0091e9d81036 Mon Sep 17 00:00:00 2001 From: Nayden Naydenov Date: Thu, 17 Jun 2021 18:20:37 +0300 Subject: [PATCH 1/3] fix(ui5-flexible-column-layout): correct columns display --- packages/fiori/src/FlexibleColumnLayout.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/packages/fiori/src/FlexibleColumnLayout.js b/packages/fiori/src/FlexibleColumnLayout.js index b95ca89e712c..b08e01e8f5b4 100644 --- a/packages/fiori/src/FlexibleColumnLayout.js +++ b/packages/fiori/src/FlexibleColumnLayout.js @@ -407,20 +407,23 @@ class FlexibleColumnLayout extends UI5Element { columnDOM.style.width = columnWidth; // hide column with delay to allow the animation runs entirely - setTimeout(() => { - columnDOM.classList.add("ui5-fcl-column--hidden"); - }, FlexibleColumnLayout.ANIMATION_DURATION); + columnDOM.addEventListener("transitionend", this.columnResizeHandler); return; } // show column: from 0 to 33%, from 0 to 25%, etc. if (previouslyHidden) { + columnDOM.removeEventListener("transitionend", this.columnResizeHandler); columnDOM.classList.remove("ui5-fcl-column--hidden"); columnDOM.style.width = columnWidth; } } + columnResizeHandler(event) { + event.target.classList.add("ui5-fcl-column--hidden"); + } + nextLayout(layout, arrowsInfo = {}) { if (arrowsInfo.start) { return getNextLayoutByStartArrow()[layout]; From cee387fb7adf7e0080d900ad8d49151878cbf465 Mon Sep 17 00:00:00 2001 From: Nayden Naydenov Date: Fri, 18 Jun 2021 12:10:24 +0300 Subject: [PATCH 2/3] remove event listener onExitDom --- packages/fiori/src/FlexibleColumnLayout.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/fiori/src/FlexibleColumnLayout.js b/packages/fiori/src/FlexibleColumnLayout.js index b08e01e8f5b4..a3d2d1868057 100644 --- a/packages/fiori/src/FlexibleColumnLayout.js +++ b/packages/fiori/src/FlexibleColumnLayout.js @@ -311,6 +311,10 @@ class FlexibleColumnLayout extends UI5Element { onExitDOM() { ResizeHandler.deregister(this, this._handleResize); + + ["start", "mid", "end"].forEach(column => { + this[`${column}ColumnDOM`].removeEventListener("transitionend", this.columnResizeHandler); + }) } onAfterRendering() { From c68d0733299654b8e55ddb73b29d6c630f89bb61 Mon Sep 17 00:00:00 2001 From: Nayden Naydenov Date: Fri, 18 Jun 2021 13:08:37 +0300 Subject: [PATCH 3/3] lint --- packages/fiori/src/FlexibleColumnLayout.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/fiori/src/FlexibleColumnLayout.js b/packages/fiori/src/FlexibleColumnLayout.js index a3d2d1868057..7a1def27eafe 100644 --- a/packages/fiori/src/FlexibleColumnLayout.js +++ b/packages/fiori/src/FlexibleColumnLayout.js @@ -314,7 +314,7 @@ class FlexibleColumnLayout extends UI5Element { ["start", "mid", "end"].forEach(column => { this[`${column}ColumnDOM`].removeEventListener("transitionend", this.columnResizeHandler); - }) + }); } onAfterRendering() {