From b91cdf4bd8fda02cd08d5a30921d8b2c00be37d6 Mon Sep 17 00:00:00 2001 From: Vladislav Tasev Date: Wed, 3 Jun 2020 12:32:35 +0300 Subject: [PATCH] ui5-table: design implemented for popped-in columns --- packages/main/src/TableRow.hbs | 2 +- packages/main/src/TableRow.js | 7 ++ packages/main/src/themes/TableRow.css | 8 +++ packages/main/test/pages/TableAllPopin.html | 80 +++++++++++++++++++++ 4 files changed, 96 insertions(+), 1 deletion(-) create mode 100644 packages/main/test/pages/TableAllPopin.html diff --git a/packages/main/src/TableRow.hbs b/packages/main/src/TableRow.hbs index bbcd3989887c..293fee54daa6 100644 --- a/packages/main/src/TableRow.hbs +++ b/packages/main/src/TableRow.hbs @@ -19,7 +19,7 @@ {{#if shouldPopin}} {{#each popinCells}} - + {{#if this.popinText}} {{this.popinText}}: diff --git a/packages/main/src/TableRow.js b/packages/main/src/TableRow.js index 206e88887060..b352c45d45cd 100644 --- a/packages/main/src/TableRow.js +++ b/packages/main/src/TableRow.js @@ -104,6 +104,10 @@ class TableRow extends UI5Element { }).length; } + get allColumnsPoppedIn() { + return this._columnsInfo.every(el => el.demandPopin && !el.visible); + } + onBeforeRendering() { if (!this.shouldPopin) { return; @@ -116,6 +120,7 @@ class TableRow extends UI5Element { return; } + const allColumnsPoppedInClass = this.allColumnsPoppedIn ? "all-columns-popped-in" : ""; this._columnsInfo.forEach((info, index) => { const cell = this.cells[index]; @@ -128,9 +133,11 @@ class TableRow extends UI5Element { cell.firstInRow = (index === 0); cell.popined = false; } else if (info.demandPopin) { + const popinHeaderClass = this.popinCells.length === 0 ? "popin-header" : ""; this.popinCells.push({ cell, popinText: info.popinText, + classes: `ui5-table-popin-row ${allColumnsPoppedInClass} ${popinHeaderClass}`, }); cell.popined = true; diff --git a/packages/main/src/themes/TableRow.css b/packages/main/src/themes/TableRow.css index 441b609d1e0b..1e2a1c44c4b1 100644 --- a/packages/main/src/themes/TableRow.css +++ b/packages/main/src/themes/TableRow.css @@ -12,6 +12,14 @@ outline-offset: -0.125rem; } +.ui5-table-popin-row { + background-color: var(--sapList_Background); +} + +.ui5-table-popin-row.all-columns-popped-in.popin-header { + border-top: 1px solid var(--sapList_BorderColor); +} + .ui5-table-popin-row td { padding: .25rem; padding-left: 1rem; diff --git a/packages/main/test/pages/TableAllPopin.html b/packages/main/test/pages/TableAllPopin.html new file mode 100644 index 000000000000..8689a861720e --- /dev/null +++ b/packages/main/test/pages/TableAllPopin.html @@ -0,0 +1,80 @@ + + + + + + + Web components Table + + + + + + + + + + + + + + + + + Product + + + + Supplier + + + +
+ Dimensions +
+ + + + Weight + + + + Price + + + + + Notebook Basic 15 + Very Best Screens + 30 x 18 x 3 cm + 4.2 KG + 956 EUR + + + + Notebook Basic 17 + Very Best Screens + 40 x 18 x 3 cm + 4.6 KG + 1956 EUR + + + + Notebook Basic 19 + Very Best Screens + 50 x 18 x 3 cm + 4.9 KG + 2956 EUR + + + + + + +