listbox and select box (#23504)

* listbox

* select box

* fix tests

* one more test
This commit is contained in:
Alan Ren
2023-06-28 11:20:31 -07:00
committed by GitHub
parent e52aa01cf0
commit 6dc1b9b905
31 changed files with 159 additions and 414 deletions

View File

@@ -5,16 +5,18 @@
import { ICheckboxStyles } from 'sql/base/browser/ui/checkbox/checkbox';
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 { 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 { IButtonStyles } from 'vs/base/browser/ui/button/button';
import { IStyleOverride, defaultButtonStyles, defaultCountBadgeStyles, defaultInputBoxStyles, defaultListStyles, overrideStyles } from 'vs/platform/theme/browser/defaultStyles';
import { asCssVariable, editorBackground, inputBorder, inputForeground } from 'vs/platform/theme/common/colorRegistry';
import { IStyleOverride, defaultButtonStyles, defaultCountBadgeStyles, defaultInputBoxStyles, defaultListStyles, defaultSelectBoxStyles as vsDefaultSelectBoxStyles, overrideStyles } from 'vs/platform/theme/browser/defaultStyles';
import * as cr from 'vs/platform/theme/common/colorRegistry';
export const defaultCheckboxStyles: ICheckboxStyles = {
disabledCheckboxForeground: asCssVariable(disabledCheckboxForeground)
disabledCheckboxForeground: cr.asCssVariable(disabledCheckboxForeground)
};
export function getCheckboxStyles(override: IStyleOverride<ICheckboxStyles>): ICheckboxStyles {
@@ -22,10 +24,10 @@ export function getCheckboxStyles(override: IStyleOverride<ICheckboxStyles>): IC
}
export const defaultInfoButtonStyles: IButtonStyles = {
buttonBackground: asCssVariable(sqlcr.infoButtonBackground),
buttonForeground: asCssVariable(sqlcr.infoButtonForeground),
buttonBorder: asCssVariable(sqlcr.infoButtonBorder),
buttonHoverBackground: asCssVariable(sqlcr.infoButtonHoverBackground),
buttonBackground: cr.asCssVariable(sqlcr.infoButtonBackground),
buttonForeground: cr.asCssVariable(sqlcr.infoButtonForeground),
buttonBorder: cr.asCssVariable(sqlcr.infoButtonBorder),
buttonHoverBackground: cr.asCssVariable(sqlcr.infoButtonHoverBackground),
buttonSeparator: undefined,
buttonSecondaryBackground: undefined,
buttonSecondaryForeground: undefined,
@@ -37,8 +39,8 @@ export const defaultInfoButtonStyles: IButtonStyles = {
}
export const defaultEditableDropdownStyles: IEditableDropdownStyles = {
contextBackground: asCssVariable(editorBackground),
contextBorder: asCssVariable(inputBorder),
contextBackground: cr.asCssVariable(cr.editorBackground),
contextBorder: cr.asCssVariable(cr.inputBorder),
...defaultInputBoxStyles,
...defaultListStyles
}
@@ -51,7 +53,27 @@ export const defaultTableFilterStyles: ITableFilterStyles = {
}
export const defaultDropdownStyles: IDropdownStyles = {
foregroundColor: asCssVariable(inputForeground),
borderColor: asCssVariable(inputBorder),
backgroundColor: asCssVariable(editorBackground)
foregroundColor: cr.asCssVariable(cr.inputForeground),
borderColor: cr.asCssVariable(cr.inputBorder),
backgroundColor: cr.asCssVariable(cr.editorBackground)
}
export const defaultListBoxStyles: IListBoxStyles = {
inputValidationInfoBorder: cr.asCssVariable(cr.inputValidationInfoBorder),
inputValidationInfoBackground: cr.asCssVariable(cr.inputValidationInfoBackground),
inputValidationWarningBorder: cr.asCssVariable(cr.inputValidationWarningBorder),
inputValidationWarningBackground: cr.asCssVariable(cr.inputValidationWarningBackground),
inputValidationErrorBorder: cr.asCssVariable(cr.inputValidationErrorBorder),
inputValidationErrorBackground: cr.asCssVariable(cr.inputValidationErrorBackground),
...vsDefaultSelectBoxStyles
}
export const defaultSelectBoxStyles: ISelectBoxStyles = {
inputValidationInfoBorder: cr.asCssVariable(cr.inputValidationInfoBorder),
inputValidationInfoBackground: cr.asCssVariable(cr.inputValidationInfoBackground),
inputValidationWarningBorder: cr.asCssVariable(cr.inputValidationWarningBorder),
inputValidationWarningBackground: cr.asCssVariable(cr.inputValidationWarningBackground),
inputValidationErrorBorder: cr.asCssVariable(cr.inputValidationErrorBorder),
inputValidationErrorBackground: cr.asCssVariable(cr.inputValidationErrorBackground),
...vsDefaultSelectBoxStyles
}