redo the table styles (#23538)

This commit is contained in:
Alan Ren
2023-06-28 22:19:40 -07:00
committed by GitHub
parent 562a0ce595
commit dec81143bc
35 changed files with 137 additions and 262 deletions

View File

@@ -4,17 +4,31 @@
*--------------------------------------------------------------------------------------------*/
import { IDisposableDataProvider } from 'sql/base/common/dataProvider';
import { IListStyles } from 'vs/base/browser/ui/list/listWidget';
import { Color } from 'vs/base/common/color';
export interface ITableMouseEvent {
anchor: HTMLElement | { x: number, y: number };
cell?: { row: number, cell: number };
}
export interface ITableStyles extends IListStyles {
tableHeaderBackground?: Color;
tableHeaderForeground?: Color;
export interface ITableStyles {
listFocusBackground: string | undefined;
listFocusForeground: string | undefined;
listActiveSelectionBackground: string | undefined;
listActiveSelectionForeground: string | undefined;
listFocusAndSelectionBackground: string | undefined;
listFocusAndSelectionForeground: string | undefined;
listInactiveFocusBackground: string | undefined;
listInactiveSelectionBackground: string | undefined;
listInactiveSelectionForeground: string | undefined;
listHoverBackground: string | undefined;
listHoverForeground: string | undefined;
listDropBackground: string | undefined;
listFocusOutline: string | undefined;
listSelectionOutline: string | undefined;
listHoverOutline: string | undefined;
listInactiveFocusOutline: string | undefined;
tableHeaderBackground: string | undefined;
tableHeaderForeground: string | undefined;
}
export interface ITableSorter<T> {

View File

@@ -23,7 +23,6 @@ import { IDisposableDataProvider } from 'sql/base/common/dataProvider';
import { IAccessibilityProvider } from 'sql/base/browser/ui/accessibility/accessibilityProvider';
import { IQuickInputProvider } from 'sql/base/browser/ui/quickInput/quickInputProvider';
import { localize } from 'vs/nls';
import { IThemable } from 'sql/platform/theme/common/vsstyler';
function getDefaultOptions<T>(): Slick.GridOptions<T> {
return <Slick.GridOptions<T>>{
@@ -33,7 +32,7 @@ function getDefaultOptions<T>(): Slick.GridOptions<T> {
};
}
export class Table<T extends Slick.SlickData> extends Widget implements IDisposable, IThemable {
export class Table<T extends Slick.SlickData> extends Widget implements IDisposable {
protected styleElement: HTMLStyleElement;
protected idPrefix: string;
@@ -73,6 +72,7 @@ export class Table<T extends Slick.SlickData> extends Widget implements IDisposa
parent: HTMLElement,
accessibilityProvider: IAccessibilityProvider,
private _quickInputProvider: IQuickInputProvider,
styles: ITableStyles,
configuration?: ITableConfiguration<T>,
options?: Slick.GridOptions<T>) {
super();
@@ -142,6 +142,7 @@ export class Table<T extends Slick.SlickData> extends Widget implements IDisposa
this.mapMouseEvent(this._grid.onHeaderClick, this._onHeaderClick);
this.mapMouseEvent(this._grid.onDblClick, this._onDoubleClick);
this._grid.onColumnsResized.subscribe(() => this._onColumnResize.fire());
this.style(styles);
}
public async resizeActiveColumn(): Promise<void> {

View File

@@ -40,8 +40,8 @@ function defaultTreeGridFilter<T extends Slick.SlickData>(data: T[], columns: Fi
* TreeGrid component displays a hierarchical table data grouped into expandable and collapsible nodes.
*/
export class TreeGrid<T extends Slick.SlickData> extends Table<T> {
constructor(parent: HTMLElement, accessibilityProvider: IAccessibilityProvider, quickInputProvider: IQuickInputProvider, configuration?: ITableConfiguration<T>, options?: Slick.GridOptions<T>) {
super(parent, accessibilityProvider, quickInputProvider, configuration, options);
constructor(parent: HTMLElement, accessibilityProvider: IAccessibilityProvider, quickInputProvider: IQuickInputProvider, styles: ITableStyles, configuration?: ITableConfiguration<T>, options?: Slick.GridOptions<T>) {
super(parent, accessibilityProvider, quickInputProvider, styles, configuration, options);
this._tableContainer.setAttribute('role', 'treegrid');
if (configuration?.dataProvider && configuration.dataProvider instanceof TableDataView) {
this._data = configuration.dataProvider;
@@ -117,6 +117,7 @@ export class TreeGrid<T extends Slick.SlickData> extends Table<T> {
}
return false;
});
this.style(styles);
}
override setData(data: Array<T>): void;