From de91969b14298389d55c0f4eccd87dbb1b3168e7 Mon Sep 17 00:00:00 2001
From: Alan Ren <alanren@microsoft.com>
Date: Wed, 17 Mar 2021 15:32:47 -0700
Subject: [PATCH] declarative table color (#14775)

---
 .../declarativeTable.component.html           |  2 +-
 .../declarativeTable.component.ts             | 28 +++++++++++++------
 .../media/declarativeTable.css                |  4 ---
 3 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/src/sql/workbench/browser/modelComponents/declarativeTable.component.html b/src/sql/workbench/browser/modelComponents/declarativeTable.component.html
index a2db933823..e5e49e11e4 100644
--- a/src/sql/workbench/browser/modelComponents/declarativeTable.component.html
+++ b/src/sql/workbench/browser/modelComponents/declarativeTable.component.html
@@ -16,7 +16,7 @@
 	<tbody role="rowgroup">
 		<ng-container *ngIf="data.length > 0">
 			<ng-container *ngFor="let row of data;let r = index;">
-				<tr [style.display]="isFiltered(r) ? 'none' : ''" class="declarative-table-row" [class.selected]="isRowSelected(r)" role="row">
+				<tr [style.display]="isFiltered(r) ? 'none' : ''" class="declarative-table-row" [ngStyle]="getRowStyle(r)" role="row">
 					<ng-container *ngFor="let cellData of row;let c = index;trackBy:trackByFnCols">
 						<td class="declarative-table-cell" [style.width]="getColumnWidth(c)"
 							[attr.aria-label]="getAriaLabel(r, c)"
diff --git a/src/sql/workbench/browser/modelComponents/declarativeTable.component.ts b/src/sql/workbench/browser/modelComponents/declarativeTable.component.ts
index ae5e223a84..dfe7298770 100644
--- a/src/sql/workbench/browser/modelComponents/declarativeTable.component.ts
+++ b/src/sql/workbench/browser/modelComponents/declarativeTable.component.ts
@@ -4,20 +4,17 @@
  *--------------------------------------------------------------------------------------------*/
 
 import 'vs/css!./media/declarativeTable';
-
-import {
-	Component, Input, Inject, ChangeDetectorRef, forwardRef, ElementRef, OnDestroy, AfterViewInit
-} from '@angular/core';
-
+import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, forwardRef, Inject, Input, OnDestroy } from '@angular/core';
 import * as azdata from 'azdata';
-
+import { convertSize } from 'sql/base/browser/dom';
+import { ComponentEventType, IComponent, IComponentDescriptor, IModelStore, ModelViewAction } from 'sql/platform/dashboard/browser/interfaces';
 import { ContainerBase } from 'sql/workbench/browser/modelComponents/componentBase';
 import { ISelectData } from 'vs/base/browser/ui/selectBox/selectBox';
 import { equals as arrayEquals } from 'vs/base/common/arrays';
 import { localize } from 'vs/nls';
-import { IComponent, IComponentDescriptor, IModelStore, ComponentEventType, ModelViewAction } from 'sql/platform/dashboard/browser/interfaces';
-import { convertSize } from 'sql/base/browser/dom';
 import { ILogService } from 'vs/platform/log/common/log';
+import * as colorRegistry from 'vs/platform/theme/common/colorRegistry';
+import { IColorTheme, IThemeService } from 'vs/platform/theme/common/themeService';
 
 export enum DeclarativeDataType {
 	string = 'string',
@@ -39,13 +36,19 @@ export default class DeclarativeTableComponent extends ContainerBase<any, azdata
 	private _filteredRowIndexes: number[] | undefined = undefined;
 	private columns: azdata.DeclarativeTableColumn[] = [];
 	private _selectedRow: number;
+	private _colorTheme: IColorTheme;
 
 	constructor(
 		@Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef,
 		@Inject(forwardRef(() => ElementRef)) el: ElementRef,
-		@Inject(ILogService) logService: ILogService
+		@Inject(ILogService) logService: ILogService,
+		@Inject(IThemeService) themeService: IThemeService
 	) {
 		super(changeRef, el, logService);
+		this._colorTheme = themeService.getColorTheme();
+		this._register(themeService.onDidColorThemeChange((colorTheme) => {
+			this._colorTheme = colorTheme;
+		}));
 	}
 
 	ngAfterViewInit(): void {
@@ -337,4 +340,11 @@ export default class DeclarativeTableComponent extends ContainerBase<any, azdata
 		});
 
 	}
+
+	public getRowStyle(rowIndex: number): azdata.CssStyles {
+		return this.isRowSelected(rowIndex) ? {
+			'background-color': this._colorTheme.getColor(colorRegistry.listActiveSelectionBackground).toString(),
+			'color': this._colorTheme.getColor(colorRegistry.listActiveSelectionForeground).toString()
+		} : {};
+	}
 }
diff --git a/src/sql/workbench/browser/modelComponents/media/declarativeTable.css b/src/sql/workbench/browser/modelComponents/media/declarativeTable.css
index 0be2c7ec1c..9eba631d91 100644
--- a/src/sql/workbench/browser/modelComponents/media/declarativeTable.css
+++ b/src/sql/workbench/browser/modelComponents/media/declarativeTable.css
@@ -26,7 +26,3 @@
 	width: 100%;
 	text-align: center;
 }
-
-.declarative-table-row.selected {
-	background-color: rgb(0, 120, 215);
-}