ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-01-21 09:35:38 -05:00
Code Issues Packages Projects Releases Wiki Activity

redo the table styles (#23538)

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

28
src/sql/platform/theme/browser/defaultStyles.ts
View File

@@ -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';
@@ -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
src/sql/platform/theme/common/styler.ts
View File

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