ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-02-16 10:58:30 -05:00
Code Issues Packages Projects Releases Wiki Activity

declarative table color (#14775)

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

2
src/sql/workbench/browser/modelComponents/declarativeTable.component.html
View File

@@ -16,7 +16,7 @@
<tbody role="rowgroup"> <tbody role="rowgroup">
<ng-container *ngIf="data.length > 0"> <ng-container *ngIf="data.length > 0">
<ng-container *ngFor="let row of data;let r = index;"> <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"> <ng-container *ngFor="let cellData of row;let c = index;trackBy:trackByFnCols">
<td class="declarative-table-cell" [style.width]="getColumnWidth(c)" <td class="declarative-table-cell" [style.width]="getColumnWidth(c)"
[attr.aria-label]="getAriaLabel(r, c)" [attr.aria-label]="getAriaLabel(r, c)"

28
src/sql/workbench/browser/modelComponents/declarativeTable.component.ts
View File

@@ -4,20 +4,17 @@
*--------------------------------------------------------------------------------------------*/ *--------------------------------------------------------------------------------------------*/
import 'vs/css!./media/declarativeTable'; import 'vs/css!./media/declarativeTable';
import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, forwardRef, Inject, Input, OnDestroy } from '@angular/core';
import {
Component, Input, Inject, ChangeDetectorRef, forwardRef, ElementRef, OnDestroy, AfterViewInit
} from '@angular/core';
import * as azdata from 'azdata'; 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 { ContainerBase } from 'sql/workbench/browser/modelComponents/componentBase';
import { ISelectData } from 'vs/base/browser/ui/selectBox/selectBox'; import { ISelectData } from 'vs/base/browser/ui/selectBox/selectBox';
import { equals as arrayEquals } from 'vs/base/common/arrays'; import { equals as arrayEquals } from 'vs/base/common/arrays';
import { localize } from 'vs/nls'; 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 { 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 { export enum DeclarativeDataType {
string = 'string', string = 'string',
@@ -39,13 +36,19 @@ export default class DeclarativeTableComponent extends ContainerBase<any, azdata
private _filteredRowIndexes: number[] | undefined = undefined; private _filteredRowIndexes: number[] | undefined = undefined;
private columns: azdata.DeclarativeTableColumn[] = []; private columns: azdata.DeclarativeTableColumn[] = [];
private _selectedRow: number; private _selectedRow: number;
private _colorTheme: IColorTheme;
constructor( constructor(
@Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef, @Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef,
@Inject(forwardRef(() => ElementRef)) el: ElementRef, @Inject(forwardRef(() => ElementRef)) el: ElementRef,
@Inject(ILogService) logService: ILogService @Inject(ILogService) logService: ILogService,
@Inject(IThemeService) themeService: IThemeService
) { ) {
super(changeRef, el, logService); super(changeRef, el, logService);
this._colorTheme = themeService.getColorTheme();
this._register(themeService.onDidColorThemeChange((colorTheme) => {
this._colorTheme = colorTheme;
}));
} }
ngAfterViewInit(): void { 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()
} : {};
}
} }

4
src/sql/workbench/browser/modelComponents/media/declarativeTable.css
View File

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