Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

redo the table styles #23538

Merged
merged 9 commits into from
Jun 29, 2023
Merged

redo the table styles #23538

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
2a4b0f1
listbox
alanrenmsft Jun 28, 2023
217e68c
select box
alanrenmsft Jun 28, 2023
b4fa674
fix tests
alanrenmsft Jun 28, 2023
017d9b7
one more test
alanrenmsft Jun 28, 2023
0db26a6
infobox style
alanrenmsft Jun 28, 2023
055318e
Merge remote-tracking branch 'origin/main' into alanren/infobox
alanrenmsft Jun 28, 2023
6a0b9a5
table style
alanrenmsft Jun 29, 2023
9bd2bbb
Merge remote-tracking branch 'origin/main' into alanren/table-style
alanrenmsft Jun 29, 2023
07a0884
fix designer issues
alanrenmsft Jun 29, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 19 additions & 5 deletions src/sql/base/browser/ui/table/interfaces.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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> {
Expand Down
5 changes: 3 additions & 2 deletions src/sql/base/browser/ui/table/table.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>>{
Expand All @@ -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;

Expand Down Expand Up @@ -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();
Expand Down Expand Up @@ -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> {
Expand Down
5 changes: 3 additions & 2 deletions src/sql/base/browser/ui/table/treeGrid.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down
28 changes: 27 additions & 1 deletion src/sql/platform/theme/browser/defaultStyles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,10 @@ import { IDropdownStyles } from 'sql/base/browser/ui/dropdownList/dropdownList';
import { IEditableDropdownStyles } from 'sql/base/browser/ui/editableDropdown/browser/dropdown';
import { IListBoxStyles } from 'sql/base/browser/ui/listBox/listBox';
import { ISelectBoxStyles } from 'sql/base/browser/ui/selectBox/selectBox';
import { ITableStyles } from 'sql/base/browser/ui/table/interfaces';
import { ITableFilterStyles } from 'sql/base/browser/ui/table/plugins/headerFilter.plugin';
import * as sqlcr from 'sql/platform/theme/common/colorRegistry';
import { disabledCheckboxForeground } from 'sql/platform/theme/common/colors';
import { disabledCheckboxForeground, listFocusAndSelectionBackground, tableHeaderBackground, tableHeaderForeground } from 'sql/platform/theme/common/colors';
import { IInfoBoxStyles } from 'sql/workbench/browser/ui/infoBox/infoBox';
import { IButtonStyles } from 'vs/base/browser/ui/button/button';
import { IStyleOverride, defaultButtonStyles, defaultCountBadgeStyles, defaultInputBoxStyles, defaultListStyles, defaultSelectBoxStyles as vsDefaultSelectBoxStyles, overrideStyles } from 'vs/platform/theme/browser/defaultStyles';
Expand Down Expand Up @@ -85,3 +86,28 @@ export const defaultInfoBoxStyles: IInfoBoxStyles = {
errorBackground: cr.asCssVariable(sqlcr.infoBoxErrorBackground),
successBackground: cr.asCssVariable(sqlcr.infoBoxSuccessBackground)
};

export const defaultTableStyles: ITableStyles = {
listFocusBackground: cr.asCssVariable(cr.listFocusBackground),
listFocusForeground: cr.asCssVariable(cr.listFocusForeground),
listActiveSelectionBackground: cr.asCssVariable(cr.listActiveSelectionBackground),
listActiveSelectionForeground: cr.asCssVariable(cr.listActiveSelectionForeground),
listFocusAndSelectionBackground: cr.asCssVariable(listFocusAndSelectionBackground),
listFocusAndSelectionForeground: cr.asCssVariable(cr.listActiveSelectionForeground),
listInactiveFocusBackground: undefined,
listInactiveSelectionBackground: cr.asCssVariable(cr.listInactiveSelectionBackground),
listInactiveSelectionForeground: undefined,
listHoverBackground: cr.asCssVariable(cr.listHoverBackground),
listHoverForeground: cr.asCssVariable(cr.listHoverForeground),
listDropBackground: cr.asCssVariable(cr.listDropBackground),
listFocusOutline: cr.asCssVariable(cr.activeContrastBorder),
listSelectionOutline: cr.asCssVariable(cr.activeContrastBorder),
listHoverOutline: cr.asCssVariable(cr.activeContrastBorder),
listInactiveFocusOutline: cr.asCssVariable(cr.listInactiveFocusOutline),
tableHeaderBackground: cr.asCssVariable(tableHeaderBackground),
tableHeaderForeground: cr.asCssVariable(tableHeaderForeground)
};

export function getTableStyles(styles: IStyleOverride<ITableStyles>): ITableStyles {
return overrideStyles(styles, defaultTableStyles);
}
52 changes: 0 additions & 52 deletions src/sql/platform/theme/common/styler.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,68 +3,16 @@
* Licensed under the Source EULA. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/

import * as colors from './colors';

import { IThemeService } from 'vs/platform/theme/common/themeService';
import * as cr from 'vs/platform/theme/common/colorRegistry';
import * as sqlcr from 'sql/platform/theme/common/colorRegistry';
import { IThemable, attachStyler, computeStyles, IStyleOverrides } from 'sql/platform/theme/common/vsstyler';
import { IDisposable } from 'vs/base/common/lifecycle';

export interface ITableStyleOverrides extends IStyleOverrides {
listFocusBackground?: cr.ColorIdentifier,
listFocusForeground?: cr.ColorIdentifier,
listActiveSelectionBackground?: cr.ColorIdentifier,
listActiveSelectionForeground?: cr.ColorIdentifier,
listFocusAndSelectionBackground?: cr.ColorIdentifier,
listFocusAndSelectionForeground?: cr.ColorIdentifier,
listInactiveFocusBackground?: cr.ColorIdentifier,
listInactiveSelectionBackground?: cr.ColorIdentifier,
listInactiveSelectionForeground?: cr.ColorIdentifier,
listHoverBackground?: cr.ColorIdentifier,
listHoverForeground?: cr.ColorIdentifier,
listDropBackground?: cr.ColorIdentifier,
listFocusOutline?: cr.ColorIdentifier,
listInactiveFocusOutline?: cr.ColorIdentifier,
listSelectionOutline?: cr.ColorIdentifier,
listHoverOutline?: cr.ColorIdentifier,
tableHeaderBackground?: cr.ColorIdentifier,
tableHeaderForeground?: cr.ColorIdentifier,
}

export const defaultTableStyles: ITableStyleOverrides = {
listFocusBackground: cr.listFocusBackground,
listFocusForeground: cr.listFocusForeground,
listActiveSelectionBackground: cr.listActiveSelectionBackground,
listActiveSelectionForeground: cr.listActiveSelectionForeground,
listFocusAndSelectionBackground: colors.listFocusAndSelectionBackground,
listFocusAndSelectionForeground: cr.listActiveSelectionForeground,
listInactiveFocusBackground: cr.listInactiveFocusBackground,
listInactiveSelectionBackground: cr.listInactiveSelectionBackground,
listInactiveSelectionForeground: cr.listInactiveSelectionForeground,
listHoverBackground: cr.listHoverBackground,
listHoverForeground: cr.listHoverForeground,
listDropBackground: cr.listDropBackground,
listFocusOutline: cr.activeContrastBorder,
listSelectionOutline: cr.activeContrastBorder,
listHoverOutline: cr.activeContrastBorder,
listInactiveFocusOutline: cr.listInactiveFocusOutline,
tableHeaderBackground: colors.tableHeaderBackground,
tableHeaderForeground: colors.tableHeaderForeground
};

export function attachTableStyler(widget: IThemable, themeService: IThemeService, style?: ITableStyleOverrides): IDisposable {
return attachStyler(themeService, { ...defaultTableStyles, ...(style || {}) }, widget);
}

export function attachDesignerStyler(widget: any, themeService: IThemeService): IDisposable {
function applyStyles(): void {
const colorTheme = themeService.getColorTheme();
const tableStyles = computeStyles(colorTheme, defaultTableStyles);
widget.style({
tableStyles: tableStyles,
paneSeparator: cr.resolveColorValue(sqlcr.DesignerPaneSeparator, colorTheme),
groupHeaderBackground: cr.resolveColorValue(sqlcr.GroupHeaderBackground, colorTheme)
});
}

Expand Down
Loading