declarative table color (#14775)

This commit is contained in:
Alan Ren
2021-03-17 15:32:47 -07:00
committed by GitHub
parent c7cca7e9f0
commit de91969b14
3 changed files with 20 additions and 14 deletions

View File

@@ -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)"

View File

@@ -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()
} : {};
}
}

View File

@@ -26,7 +26,3 @@
width: 100%;
text-align: center;
}
.declarative-table-row.selected {
background-color: rgb(0, 120, 215);
}