new component - infobox (#14027)

* new component: infobox

* comments

* new option

* add comments
This commit is contained in:
Alan Ren
2021-01-22 18:38:10 -08:00
committed by GitHub
parent dd0fa50d32
commit d059032dee
18 changed files with 358 additions and 7 deletions

View File

@@ -68,3 +68,10 @@ export const codeEditorToolbarBackground = registerColor('notebook.codeEditorToo
export const codeEditorToolbarBorder = registerColor('notebook.codeEditorToolbarBorder', { light: '#C8C6C4', dark: '#333333', hc: '#000000' }, nls.localize('notebook.codeEditorToolbarBorder', "Notebook: Code editor toolbar right border"));
export const notebookCellTagBackground = registerColor('notebook.notebookCellTagBackground', { light: '#0078D4', dark: '#0078D4', hc: '#0078D4' }, nls.localize('notebook.notebookCellTagBackground', "Tag background color."));
export const notebookCellTagForeground = registerColor('notebook.notebookCellTagForeground', { light: '#FFFFFF', dark: '#FFFFFF', hc: '#FFFFFF' }, nls.localize('notebook.notebookCellTagForeground', "Tag foreground color."));
// Info Box
export const InfoBoxInformationBackground = registerColor('infoBox.infomationBackground', { light: '#F0F6FF', dark: '#001433', hc: '#000000' }, nls.localize('infoBox.infomationBackground', "InfoBox: The background color when the notification type is information."));
export const InfoBoxWarningBackground = registerColor('infoBox.warningBackground', { light: '#FFF8F0', dark: '#331B00', hc: '#000000' }, nls.localize('infoBox.warningBackground', "InfoBox: The background color when the notification type is warning."));
export const InfoBoxErrorBackground = registerColor('infoBox.errorBackground', { light: '#FEF0F1', dark: '#300306', hc: '#000000' }, nls.localize('infoBox.errorBackground', "InfoBox: The background color when the notification type is error."));
export const InfoBoxSuccessBackground = registerColor('infoBox.successBackground', { light: '#F8FFF0', dark: '#1B3300', hc: '#000000' }, nls.localize('infoBox.successBackground', "InfoBox: The background color when the notification type is success."));

View File

@@ -7,6 +7,7 @@ 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 { attachStyler, IColorMapping, IStyleOverrides } from 'vs/platform/theme/common/styler';
import { IDisposable } from 'vs/base/common/lifecycle';
import { IThemable } from 'vs/base/common/styler';
@@ -306,3 +307,21 @@ export function attachCheckboxStyler(widget: IThemable, themeService: IThemeServ
disabledCheckboxForeground: (style && style.disabledCheckboxForeground) || colors.disabledCheckboxForeground
}, widget);
}
export interface IInfoBoxStyleOverrides {
informationBackground: cr.ColorIdentifier,
warningBackground: cr.ColorIdentifier,
errorBackground: cr.ColorIdentifier,
successBackground: cr.ColorIdentifier
}
export const defaultInfoBoxStyles: IInfoBoxStyleOverrides = {
informationBackground: sqlcr.InfoBoxInformationBackground,
warningBackground: sqlcr.InfoBoxWarningBackground,
errorBackground: sqlcr.InfoBoxErrorBackground,
successBackground: sqlcr.InfoBoxSuccessBackground
};
export function attachInfoBoxStyler(widget: IThemable, themeService: IThemeService, style?: IInfoBoxStyleOverrides): IDisposable {
return attachStyler(themeService, { ...defaultInfoBoxStyles, ...style }, widget);
}