From 7b5b94607b2956ab81d05c34fbb4c2e2fc615ab7 Mon Sep 17 00:00:00 2001 From: Patrick O'Carroll Date: Tue, 31 Jul 2018 12:51:07 +0200 Subject: [PATCH 1/6] fixed color for links in colored cells by adding a new variable that sets color: white when cell or row has background-color --- public/app/plugins/panel/table/renderer.ts | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/public/app/plugins/panel/table/renderer.ts b/public/app/plugins/panel/table/renderer.ts index f6950dada52..456dadf6241 100644 --- a/public/app/plugins/panel/table/renderer.ts +++ b/public/app/plugins/panel/table/renderer.ts @@ -214,15 +214,20 @@ export class TableRenderer { var style = ''; var cellClasses = []; var cellClass = ''; + var linkStyle = ''; + + if (this.colorState.row) { + linkStyle = ' style="color: white"'; + } if (this.colorState.cell) { style = ' style="background-color:' + this.colorState.cell + ';color: white"'; + linkStyle = ' style="color: white;"'; this.colorState.cell = null; } else if (this.colorState.value) { style = ' style="color:' + this.colorState.value + '"'; this.colorState.value = null; } - // because of the fixed table headers css only solution // there is an issue if header cell is wider the cell // this hack adds header content to cell (not visible) @@ -253,7 +258,7 @@ export class TableRenderer { cellClasses.push('table-panel-cell-link'); columnHtml += ` - + ${value} `; From 4b8ec4e32330b9fd606acc39604a8b9de7229ac3 Mon Sep 17 00:00:00 2001 From: Patrick O'Carroll Date: Tue, 31 Jul 2018 13:07:43 +0200 Subject: [PATCH 2/6] removed a blank space in div --- public/app/plugins/panel/table/renderer.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/app/plugins/panel/table/renderer.ts b/public/app/plugins/panel/table/renderer.ts index 456dadf6241..c1e4e6243f9 100644 --- a/public/app/plugins/panel/table/renderer.ts +++ b/public/app/plugins/panel/table/renderer.ts @@ -258,7 +258,7 @@ export class TableRenderer { cellClasses.push('table-panel-cell-link'); columnHtml += ` - + ${value} `; From d4d896ade829300fa306bac82798d746a85e9693 Mon Sep 17 00:00:00 2001 From: Patrick O'Carroll Date: Wed, 1 Aug 2018 09:08:17 +0200 Subject: [PATCH 3/6] replaced style with class for links --- public/app/plugins/panel/table/renderer.ts | 13 +++++++++---- .../app/plugins/panel/table/specs/renderer.jest.ts | 2 +- public/sass/components/_panel_table.scss | 4 ++++ 3 files changed, 14 insertions(+), 5 deletions(-) diff --git a/public/app/plugins/panel/table/renderer.ts b/public/app/plugins/panel/table/renderer.ts index c1e4e6243f9..474e9c89493 100644 --- a/public/app/plugins/panel/table/renderer.ts +++ b/public/app/plugins/panel/table/renderer.ts @@ -214,15 +214,15 @@ export class TableRenderer { var style = ''; var cellClasses = []; var cellClass = ''; - var linkStyle = ''; + var linkClass = ''; if (this.colorState.row) { - linkStyle = ' style="color: white"'; + linkClass = 'table-panel-link'; } if (this.colorState.cell) { style = ' style="background-color:' + this.colorState.cell + ';color: white"'; - linkStyle = ' style="color: white;"'; + linkClass = 'table-panel-link'; this.colorState.cell = null; } else if (this.colorState.value) { style = ' style="color:' + this.colorState.value + '"'; @@ -258,7 +258,12 @@ export class TableRenderer { cellClasses.push('table-panel-cell-link'); columnHtml += ` - + ${value} `; diff --git a/public/app/plugins/panel/table/specs/renderer.jest.ts b/public/app/plugins/panel/table/specs/renderer.jest.ts index 22957d1aa66..f1a686fb739 100644 --- a/public/app/plugins/panel/table/specs/renderer.jest.ts +++ b/public/app/plugins/panel/table/specs/renderer.jest.ts @@ -268,7 +268,7 @@ describe('when rendering table', () => { var expectedHtml = ` + target="_blank" data-link-tooltip data-original-title="host1 1230 my.host.com" data-placement="right" class=""> host1 diff --git a/public/sass/components/_panel_table.scss b/public/sass/components/_panel_table.scss index 8e0ecf15896..99e91f8ff67 100644 --- a/public/sass/components/_panel_table.scss +++ b/public/sass/components/_panel_table.scss @@ -133,3 +133,7 @@ height: 0px; line-height: 0px; } + +.table-panel-link { + color: white; +} From 36d981597ed1e6b22ada8c49884f99b7d02444d0 Mon Sep 17 00:00:00 2001 From: Patrick O'Carroll Date: Thu, 2 Aug 2018 11:18:21 +0200 Subject: [PATCH 4/6] removed table-panel-link class and add a class white to modify table-panel-cell-link class --- public/app/plugins/panel/table/renderer.ts | 18 ++++++------------ .../plugins/panel/table/specs/renderer.jest.ts | 2 +- public/sass/components/_panel_table.scss | 6 ++++++ 3 files changed, 13 insertions(+), 13 deletions(-) diff --git a/public/app/plugins/panel/table/renderer.ts b/public/app/plugins/panel/table/renderer.ts index 474e9c89493..e4d3626c3b9 100644 --- a/public/app/plugins/panel/table/renderer.ts +++ b/public/app/plugins/panel/table/renderer.ts @@ -214,15 +214,10 @@ export class TableRenderer { var style = ''; var cellClasses = []; var cellClass = ''; - var linkClass = ''; - - if (this.colorState.row) { - linkClass = 'table-panel-link'; - } if (this.colorState.cell) { style = ' style="background-color:' + this.colorState.cell + ';color: white"'; - linkClass = 'table-panel-link'; + cellClasses.push('white'); this.colorState.cell = null; } else if (this.colorState.value) { style = ' style="color:' + this.colorState.value + '"'; @@ -257,13 +252,12 @@ export class TableRenderer { var cellTarget = column.style.linkTargetBlank ? '_blank' : ''; cellClasses.push('table-panel-cell-link'); + + if (this.colorState.row) { + cellClasses.push('white'); + } columnHtml += ` - + ${value} `; diff --git a/public/app/plugins/panel/table/specs/renderer.jest.ts b/public/app/plugins/panel/table/specs/renderer.jest.ts index f1a686fb739..22957d1aa66 100644 --- a/public/app/plugins/panel/table/specs/renderer.jest.ts +++ b/public/app/plugins/panel/table/specs/renderer.jest.ts @@ -268,7 +268,7 @@ describe('when rendering table', () => { var expectedHtml = ` + target="_blank" data-link-tooltip data-original-title="host1 1230 my.host.com" data-placement="right"> host1 diff --git a/public/sass/components/_panel_table.scss b/public/sass/components/_panel_table.scss index 99e91f8ff67..c793cd408b6 100644 --- a/public/sass/components/_panel_table.scss +++ b/public/sass/components/_panel_table.scss @@ -87,6 +87,12 @@ height: 100%; display: inline-block; } + + &.white { + a { + color: white; + } + } } &.cell-highlighted:hover { From b03e3242e3ee4092ad7cc81219d35a39a2cd6c40 Mon Sep 17 00:00:00 2001 From: Patrick O'Carroll Date: Thu, 2 Aug 2018 11:21:17 +0200 Subject: [PATCH 5/6] removed table-panel-link class --- public/sass/components/_panel_table.scss | 4 ---- 1 file changed, 4 deletions(-) diff --git a/public/sass/components/_panel_table.scss b/public/sass/components/_panel_table.scss index c793cd408b6..fc14236c2b7 100644 --- a/public/sass/components/_panel_table.scss +++ b/public/sass/components/_panel_table.scss @@ -139,7 +139,3 @@ height: 0px; line-height: 0px; } - -.table-panel-link { - color: white; -} From ff0ca6b7e214d0ca9b107058f2942ed289b5e615 Mon Sep 17 00:00:00 2001 From: Patrick O'Carroll Date: Thu, 2 Aug 2018 15:25:48 +0200 Subject: [PATCH 6/6] added two new classes for color, fixed so link has value color --- public/app/plugins/panel/table/renderer.ts | 20 ++++++++++++-------- public/sass/components/_panel_table.scss | 20 ++++++++++++++------ 2 files changed, 26 insertions(+), 14 deletions(-) diff --git a/public/app/plugins/panel/table/renderer.ts b/public/app/plugins/panel/table/renderer.ts index e4d3626c3b9..95f54a64904 100644 --- a/public/app/plugins/panel/table/renderer.ts +++ b/public/app/plugins/panel/table/renderer.ts @@ -216,8 +216,8 @@ export class TableRenderer { var cellClass = ''; if (this.colorState.cell) { - style = ' style="background-color:' + this.colorState.cell + ';color: white"'; - cellClasses.push('white'); + style = ' style="background-color:' + this.colorState.cell + '"'; + cellClasses.push('table-panel-color-cell'); this.colorState.cell = null; } else if (this.colorState.value) { style = ' style="color:' + this.colorState.value + '"'; @@ -253,11 +253,8 @@ export class TableRenderer { cellClasses.push('table-panel-cell-link'); - if (this.colorState.row) { - cellClasses.push('white'); - } columnHtml += ` - + ${value} `; @@ -291,6 +288,8 @@ export class TableRenderer { let startPos = page * pageSize; let endPos = Math.min(startPos + pageSize, this.table.rows.length); var html = ''; + let rowClasses = []; + let rowClass = ''; for (var y = startPos; y < endPos; y++) { let row = this.table.rows[y]; @@ -301,11 +300,16 @@ export class TableRenderer { } if (this.colorState.row) { - rowStyle = ' style="background-color:' + this.colorState.row + ';color: white"'; + rowStyle = ' style="background-color:' + this.colorState.row + '"'; + rowClasses.push('table-panel-color-row'); this.colorState.row = null; } - html += '' + cellHtml + ''; + if (rowClasses.length) { + rowClass = ' class="' + rowClasses.join(' ') + '"'; + } + + html += '' + cellHtml + ''; } return html; diff --git a/public/sass/components/_panel_table.scss b/public/sass/components/_panel_table.scss index fc14236c2b7..225238b102c 100644 --- a/public/sass/components/_panel_table.scss +++ b/public/sass/components/_panel_table.scss @@ -87,12 +87,6 @@ height: 100%; display: inline-block; } - - &.white { - a { - color: white; - } - } } &.cell-highlighted:hover { @@ -139,3 +133,17 @@ height: 0px; line-height: 0px; } + +.table-panel-color-cell { + color: white; + a { + color: white; + } +} + +.table-panel-color-row { + color: white; + a { + color: white; + } +}