Microsoft/vscode
1
0
Fork 0
mirror of https://github.com/microsoft/vscode.git synced 2026-07-14 07:54:36 +01:00
Code Issues Packages Projects Releases Wiki Activity

Custom dialog icons don't have the correct color tokens. Fixes #95900

Browse Source
This commit is contained in:
Martin Aeschlimann
2020-04-22 22:42:07 +02:00
parent 8dff64169d
commit 8b7ea333cc
3 changed files with 35 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/vs/base/browser/ui/dialog/dialog.ts
+24 -3
View File
@@ -38,6 +38,9 @@ export interface IDialogStyles extends IButtonStyles, ISimpleCheckboxStyles {
dialogBackground?: Color;
dialogShadow?: Color;
dialogBorder?: Color;
errorIconForeground?: Color;
warningIconForeground?: Color;
infoIconForeground?: Color;
}
interface ButtonMapEntry {
@@ -208,7 +211,7 @@ export class Dialog extends Disposable {
}
}));
removeClasses(this.iconElement, dialogErrorIcon.classNames, dialogWarningIcon.classNames, dialogInfoIcon.classNames);
removeClasses(this.iconElement, dialogErrorIcon.classNames, dialogWarningIcon.classNames, dialogInfoIcon.classNames, Codicon.loading.classNames);
switch (this.options.type) {
case 'error':
@@ -218,7 +221,7 @@ export class Dialog extends Disposable {
addClasses(this.iconElement, dialogWarningIcon.classNames);
break;
case 'pending':
addClasses(this.iconElement, 'codicon-loading', 'codicon-animation-spin');
addClasses(this.iconElement, Codicon.loading.classNames, 'codicon-animation-spin');
break;
case 'none':
case 'info':
@@ -273,10 +276,28 @@ export class Dialog extends Disposable {
this.checkbox.style(style);
}
if (this.messageDetailElement) {
if (this.messageDetailElement && fgColor && bgColor) {
const messageDetailColor = Color.fromHex(fgColor).transparent(.9);
this.messageDetailElement.style.color = messageDetailColor.makeOpaque(Color.fromHex(bgColor)).toString();
}
if (this.iconElement) {
let color;
switch (this.options.type) {
case 'error':
color = style.errorIconForeground;
break;
case 'warning':
color = style.warningIconForeground;
break;
default:
color = style.infoIconForeground;
break;
}
if (color) {
this.iconElement.style.color = color.toString();
}
}
}
}
src/vs/platform/severityIcon/common/severityIcon.ts
+3 -6
View File
@@ -33,8 +33,7 @@ registerThemingParticipant((theme, collector) => {
collector.addRule(`
.monaco-editor .zone-widget ${errorCodiconSelector},
.markers-panel .marker-icon${errorCodiconSelector},
.extensions-viewlet > .extensions ${errorCodiconSelector},
.monaco-dialog-box .dialog-message-row ${errorCodiconSelector} {
.extensions-viewlet > .extensions ${errorCodiconSelector} {
color: ${errorIconForeground};
}
`);
@@ -47,8 +46,7 @@ registerThemingParticipant((theme, collector) => {
.monaco-editor .zone-widget ${warningCodiconSelector},
.markers-panel .marker-icon${warningCodiconSelector},
.extensions-viewlet > .extensions ${warningCodiconSelector},
.extension-editor ${warningCodiconSelector},
.monaco-dialog-box .dialog-message-row ${warningCodiconSelector} {
.extension-editor ${warningCodiconSelector} {
color: ${warningIconForeground};
}
`);
@@ -61,8 +59,7 @@ registerThemingParticipant((theme, collector) => {
.monaco-editor .zone-widget ${infoCodiconSelector},
.markers-panel .marker-icon${infoCodiconSelector},
.extensions-viewlet > .extensions ${infoCodiconSelector},
.extension-editor ${infoCodiconSelector},
.monaco-dialog-box .dialog-message-row ${infoCodiconSelector} {
.extension-editor ${infoCodiconSelector} {
color: ${infoIconForeground};
}
`);
src/vs/platform/theme/common/styler.ts
+8 -2
View File
@@ -4,7 +4,7 @@
*--------------------------------------------------------------------------------------------*/
import { IColorTheme, IThemeService } from 'vs/platform/theme/common/themeService';
import { focusBorder, inputBackground, inputForeground, ColorIdentifier, selectForeground, selectBackground, selectListBackground, selectBorder, inputBorder, foreground, editorBackground, contrastBorder, inputActiveOptionBorder, inputActiveOptionBackground, listFocusBackground, listFocusForeground, listActiveSelectionBackground, listActiveSelectionForeground, listInactiveSelectionForeground, listInactiveSelectionBackground, listInactiveFocusBackground, listHoverBackground, listHoverForeground, listDropBackground, pickerGroupBorder, pickerGroupForeground, widgetShadow, inputValidationInfoBorder, inputValidationInfoBackground, inputValidationWarningBorder, inputValidationWarningBackground, inputValidationErrorBorder, inputValidationErrorBackground, activeContrastBorder, buttonForeground, buttonBackground, buttonHoverBackground, ColorFunction, badgeBackground, badgeForeground, progressBarBackground, breadcrumbsForeground, breadcrumbsFocusForeground, breadcrumbsActiveSelectionForeground, breadcrumbsBackground, editorWidgetBorder, inputValidationInfoForeground, inputValidationWarningForeground, inputValidationErrorForeground, menuForeground, menuBackground, menuSelectionForeground, menuSelectionBackground, menuSelectionBorder, menuBorder, menuSeparatorBackground, darken, listFilterWidgetOutline, listFilterWidgetNoMatchesOutline, listFilterWidgetBackground, editorWidgetBackground, treeIndentGuidesStroke, editorWidgetForeground, simpleCheckboxBackground, simpleCheckboxBorder, simpleCheckboxForeground, ColorValue, resolveColorValue, textLinkForeground } from 'vs/platform/theme/common/colorRegistry';
import { focusBorder, inputBackground, inputForeground, ColorIdentifier, selectForeground, selectBackground, selectListBackground, selectBorder, inputBorder, foreground, editorBackground, contrastBorder, inputActiveOptionBorder, inputActiveOptionBackground, listFocusBackground, listFocusForeground, listActiveSelectionBackground, listActiveSelectionForeground, listInactiveSelectionForeground, listInactiveSelectionBackground, listInactiveFocusBackground, listHoverBackground, listHoverForeground, listDropBackground, pickerGroupBorder, pickerGroupForeground, widgetShadow, inputValidationInfoBorder, inputValidationInfoBackground, inputValidationWarningBorder, inputValidationWarningBackground, inputValidationErrorBorder, inputValidationErrorBackground, activeContrastBorder, buttonForeground, buttonBackground, buttonHoverBackground, ColorFunction, badgeBackground, badgeForeground, progressBarBackground, breadcrumbsForeground, breadcrumbsFocusForeground, breadcrumbsActiveSelectionForeground, breadcrumbsBackground, editorWidgetBorder, inputValidationInfoForeground, inputValidationWarningForeground, inputValidationErrorForeground, menuForeground, menuBackground, menuSelectionForeground, menuSelectionBackground, menuSelectionBorder, menuBorder, menuSeparatorBackground, darken, listFilterWidgetOutline, listFilterWidgetNoMatchesOutline, listFilterWidgetBackground, editorWidgetBackground, treeIndentGuidesStroke, editorWidgetForeground, simpleCheckboxBackground, simpleCheckboxBorder, simpleCheckboxForeground, ColorValue, resolveColorValue, textLinkForeground, problemsWarningIconForeground, problemsErrorIconForeground, problemsInfoIconForeground } from 'vs/platform/theme/common/colorRegistry';
import { IDisposable } from 'vs/base/common/lifecycle';
import { Color } from 'vs/base/common/color';
import { IThemable, styleFn } from 'vs/base/common/styler';
@@ -347,6 +347,9 @@ export interface IDialogStyleOverrides extends IButtonStyleOverrides {
checkboxBorder?: ColorIdentifier;
checkboxBackground?: ColorIdentifier;
checkboxForeground?: ColorIdentifier;
errorIconForeground?: ColorIdentifier;
warningIconForeground?: ColorIdentifier;
infoIconForeground?: ColorIdentifier;
}
export const defaultDialogStyles = <IDialogStyleOverrides>{
@@ -360,7 +363,10 @@ export const defaultDialogStyles = <IDialogStyleOverrides>{
buttonBorder: contrastBorder,
checkboxBorder: simpleCheckboxBorder,
checkboxBackground: simpleCheckboxBackground,
checkboxForeground: simpleCheckboxForeground
checkboxForeground: simpleCheckboxForeground,
errorIconForeground: problemsErrorIconForeground,
warningIconForeground: problemsWarningIconForeground,
infoIconForeground: problemsInfoIconForeground
};