Skip to content

Commit 67f63fe

Browse files
sandy081sandy081
committed
Use svgs instead of octicons
1 parent 69ec81b commit 67f63fe

7 files changed

Lines changed: 118 additions & 125 deletions

File tree

‎src/vs/base/browser/ui/severityIcon/severityIcon.ts‎

Lines changed: 0 additions & 48 deletions
This file was deleted.

‎src/vs/editor/contrib/gotoError/gotoErrorWidget.ts‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ import { IAction } from 'vs/base/common/actions';
2727
import { IActionBarOptions, ActionsOrientation } from 'vs/base/browser/ui/actionbar/actionbar';
2828
import { peekViewTitleForeground, peekViewTitleInfoForeground } from 'vs/editor/contrib/referenceSearch/referencesWidget';
2929
import { AccessibilitySupport } from 'vs/platform/accessibility/common/accessibility';
30-
import { SeverityIcon } from 'vs/base/browser/ui/severityIcon/severityIcon';
30+
import { SeverityIcon } from 'vs/platform/severityIcon/common/severityIcon';
3131

3232
class MessageWidget extends Disposable {
3333

@@ -165,7 +165,7 @@ export class MarkerNavigationWidget extends PeekViewWidget {
165165

166166
private _parentContainer: HTMLElement;
167167
private _container: HTMLElement;
168-
private readonly _headingSeverityIcon: SeverityIcon;
168+
private _icon: HTMLElement;
169169
private _message: MessageWidget;
170170
private _callOnDispose: IDisposable[] = [];
171171
private _severity: MarkerSeverity;
@@ -182,7 +182,6 @@ export class MarkerNavigationWidget extends PeekViewWidget {
182182
) {
183183
super(editor, { showArrow: true, showFrame: true, isAccessible: true });
184184
this._severity = MarkerSeverity.Warning;
185-
this._headingSeverityIcon = new SeverityIcon();
186185
this._backgroundColor = Color.white;
187186

188187
this._applyTheme(_themeService.getTheme());
@@ -231,7 +230,7 @@ export class MarkerNavigationWidget extends PeekViewWidget {
231230
}
232231

233232
protected _fillTitleIcon(container: HTMLElement): void {
234-
dom.append(container, this._headingSeverityIcon.element);
233+
this._icon = dom.append(container, dom.$(''));
235234
}
236235

237236
protected _getActionBarOptions(): IActionBarOptions {
@@ -281,7 +280,7 @@ export class MarkerNavigationWidget extends PeekViewWidget {
281280
: nls.localize('change', "{0} of {1} problem", markerIdx, markerCount);
282281
this.setTitle(basename(model.uri), detail);
283282
}
284-
this._headingSeverityIcon.severity = MarkerSeverity.toSeverity(this._severity);
283+
this._icon.className = SeverityIcon.className(MarkerSeverity.toSeverity(this._severity));
285284

286285
this.editor.revealPositionInCenter(position, ScrollType.Smooth);
287286

‎src/vs/platform/severityIcon/common/severityIcon.ts‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
/*---------------------------------------------------------------------------------------------
2+
* Copyright (c) Microsoft Corporation. All rights reserved.
3+
* Licensed under the MIT License. See License.txt in the project root for license information.
4+
*--------------------------------------------------------------------------------------------*/
5+
6+
import Severity from 'vs/base/common/severity';
7+
import { registerThemingParticipant, ITheme, LIGHT } from 'vs/platform/theme/common/themeService';
8+
import { severityIconErrorForeground, severityIconWarningForeground, severityIconInfoForeground, severityIconIgnoreForeground } from 'vs/platform/theme/common/colorRegistry';
9+
10+
const errorStart = encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" enable-background="new 0 0 16 16" height="16" width="16"><circle cx="8" cy="8" r="6" fill="#F6F6F6"/><path d="M8 3C5.238 3 3 5.238 3 8s2.238 5 5 5 5-2.238 5-5-2.238-5-5-5zm3 7l-1 1-2-2-2 2-1-1 2-2.027L5 6l1-1 2 2 2-2 1 1-2 1.973L11 10z" fill="`);
11+
const errorEnd = encodeURIComponent(`"/><path fill="#fff" d="M11 6l-1-1-2 2-2-2-1 1 2 1.973L5 10l1 1 2-2 2 2 1-1-2-2.027z"/></svg>`);
12+
const errorDarkStart = encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="16" width="16"><circle cx="8" cy="8" r="6" fill="#1E1E1E"/><path d="M8 3C5.238 3 3 5.238 3 8s2.238 5 5 5 5-2.238 5-5-2.238-5-5-5zm3 7l-1 1-2-2-2 2-1-1 2-2.027L5 6l1-1 2 2 2-2 1 1-2 1.973L11 10z" fill="`);
13+
const errorDarkEnd = encodeURIComponent(`"/><path fill="#252526" d="M11 6l-1-1-2 2-2-2-1 1 2 1.973L5 10l1 1 2-2 2 2 1-1-2-2.027z"/></svg>`);
14+
15+
const warningStart = encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" enable-background="new 0 0 16 16" height="16" width="16"><path fill="#F6F6F6" d="M7.5 2L2 12l2 2h9l2-2L9.5 2z"/><path d="M9 3H8l-4.5 9 1 1h8l1-1L9 3zm0 9H8v-1h1v1zm0-2H8V6h1v4z" fill="`);
16+
const warningEnd = encodeURIComponent(`"/><path d="M9 10H8V6h1v4zm0 1H8v1h1v-1z"/></svg>`);
17+
const warningDarkStart = encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="16" width="16"><path fill="#1E1E1E" d="M7.5 2L2 12l2 2h9l2-2L9.5 2z"/><path d="M9 3H8l-4.5 9 1 1h8l1-1L9 3zm0 9H8v-1h1v1zm0-2H8V6h1v4z" fill="`);
18+
const warningDarkEnd = encodeURIComponent(`"/><path d="M9 10H8V6h1v4zm0 1H8v1h1v-1z"/></svg>`);
19+
20+
const infoStart = encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" enable-background="new 0 0 16 16" height="16" width="16"><circle cx="8.5" cy="7.5" r="5.5" fill="#F6F6F6"/><path d="M8.5 3C6.015 3 4 5.015 4 7.5S6.015 12 8.5 12 13 9.985 13 7.5 10.985 3 8.5 3zm.5 8H8V6h1v5zm0-6H8V4h1v1z" fill="`);
21+
const infoEnd = encodeURIComponent(`"/><path d="M8 6h1v5H8V6zm0-2v1h1V4H8z" fill="#fff"/></svg>`);
22+
const infoDarkStart = encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" enable-background="new 0 0 16 16" height="16" width="16"><circle cx="8.5" cy="7.5" r="5.5" fill="#1E1E1E"/><path d="M8.5 3C6.015 3 4 5.015 4 7.5S6.015 12 8.5 12 13 9.985 13 7.5 10.985 3 8.5 3zm.5 8H8V6h1v5zm0-6H8V4h1v1z" fill="`);
23+
const infoDarkEnd = encodeURIComponent(`"/><path d="M8 6h1v5H8V6zm0-2v1h1V4H8z" fill="#252526"/></svg>`);
24+
25+
export namespace SeverityIcon {
26+
27+
export function getSVGData(severity: Severity, theme: ITheme): string {
28+
switch (severity) {
29+
case Severity.Ignore:
30+
const ignoreColor = theme.getColor(severityIconIgnoreForeground);
31+
if (ignoreColor) {
32+
return theme.type === LIGHT ? infoStart + encodeURIComponent(ignoreColor.toString()) + infoEnd
33+
: infoDarkStart + encodeURIComponent(ignoreColor.toString()) + infoDarkEnd;
34+
}
35+
return '';
36+
case Severity.Info:
37+
const infoColor = theme.getColor(severityIconInfoForeground);
38+
if (infoColor) {
39+
return theme.type === LIGHT ? infoStart + encodeURIComponent(infoColor.toString()) + infoEnd
40+
: infoDarkStart + encodeURIComponent(infoColor.toString()) + infoDarkEnd;
41+
}
42+
return '';
43+
case Severity.Warning:
44+
const warningColor = theme.getColor(severityIconWarningForeground);
45+
if (warningColor) {
46+
return theme.type === LIGHT ? warningStart + encodeURIComponent(warningColor.toString()) + warningEnd
47+
: warningDarkStart + encodeURIComponent(warningColor.toString()) + warningDarkEnd;
48+
}
49+
return '';
50+
case Severity.Error:
51+
const errorColor = theme.getColor(severityIconErrorForeground);
52+
if (errorColor) {
53+
return theme.type === LIGHT ? errorStart + encodeURIComponent(errorColor.toString()) + errorEnd
54+
: errorDarkStart + encodeURIComponent(errorColor.toString()) + errorDarkEnd;
55+
}
56+
return '';
57+
}
58+
return '';
59+
}
60+
61+
export function className(severity: Severity): string {
62+
switch (severity) {
63+
case Severity.Ignore:
64+
return 'severity-icon severity-ignore';
65+
case Severity.Info:
66+
return 'severity-icon severity-info';
67+
case Severity.Warning:
68+
return 'severity-icon severity-warning';
69+
case Severity.Error:
70+
return 'severity-icon severity-error';
71+
}
72+
return '';
73+
}
74+
}
75+
76+
function getCSSRule(severity: Severity, theme: ITheme): string {
77+
return `.${SeverityIcon.className(severity).split(' ').join('.')} { background: url("data:image/svg+xml,${SeverityIcon.getSVGData(severity, theme)}") center center no-repeat; height: 16px; width: 16px; }`;
78+
}
79+
80+
registerThemingParticipant((theme, collector) => {
81+
collector.addRule(getCSSRule(Severity.Error, theme));
82+
collector.addRule(getCSSRule(Severity.Warning, theme));
83+
collector.addRule(getCSSRule(Severity.Info, theme));
84+
collector.addRule(getCSSRule(Severity.Ignore, theme));
85+
});

‎src/vs/platform/theme/common/styler.ts‎

Lines changed: 2 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,10 @@
44
*--------------------------------------------------------------------------------------------*/
55

66
import { ITheme, IThemeService } from 'vs/platform/theme/common/themeService';
7-
import { focusBorder, inputBackground, inputForeground, ColorIdentifier, selectForeground, selectBackground, selectListBackground, selectBorder, inputBorder, foreground, editorBackground, contrastBorder, inputActiveOptionBorder, 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, severityIconErrorForeground, severityIconWarningForeground, severityIconInfoForeground, severityIconIgnoreForeground } from 'vs/platform/theme/common/colorRegistry';
7+
import { focusBorder, inputBackground, inputForeground, ColorIdentifier, selectForeground, selectBackground, selectListBackground, selectBorder, inputBorder, foreground, editorBackground, contrastBorder, inputActiveOptionBorder, 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 } from 'vs/platform/theme/common/colorRegistry';
88
import { IDisposable } from 'vs/base/common/lifecycle';
99
import { Color } from 'vs/base/common/color';
1010
import { mixin } from 'vs/base/common/objects';
11-
import Severity from 'vs/base/common/severity';
1211

1312
export type styleFn = (colors: { [name: string]: Color | undefined }) => void;
1413

@@ -352,37 +351,4 @@ export const defaultDialogStyles = <IDialogStyleOverrides>{
352351

353352
export function attachDialogStyler(widget: IThemable, themeService: IThemeService, style?: IDialogStyleOverrides): IDisposable {
354353
return attachStyler(themeService, { ...defaultDialogStyles, ...style }, widget);
355-
}
356-
357-
export interface ISeverityStyleOverrides extends IStyleOverrides {
358-
color?: ColorIdentifier;
359-
}
360-
361-
export const defaultErrorSeverityStyles = <ISeverityStyleOverrides>{
362-
color: severityIconErrorForeground
363-
};
364-
export const defaultWarningSeverityStyles = <ISeverityStyleOverrides>{
365-
color: severityIconWarningForeground
366-
};
367-
export const defaultInfoSeverityStyles = <ISeverityStyleOverrides>{
368-
color: severityIconInfoForeground
369-
};
370-
export const defaultIgnoreSeverityStyles = <ISeverityStyleOverrides>{
371-
color: severityIconIgnoreForeground
372-
};
373-
374-
export function attachSeverityStyler(severity: Severity, widget: IThemable, themeService: IThemeService, style?: ISeverityStyleOverrides): IDisposable {
375-
let defaultSeverityStyles: ISeverityStyleOverrides = defaultIgnoreSeverityStyles;
376-
switch (severity) {
377-
case Severity.Error:
378-
defaultSeverityStyles = defaultErrorSeverityStyles;
379-
break;
380-
case Severity.Warning:
381-
defaultSeverityStyles = defaultWarningSeverityStyles;
382-
break;
383-
case Severity.Info:
384-
defaultSeverityStyles = defaultInfoSeverityStyles;
385-
break;
386-
}
387-
return attachStyler(themeService, { ...defaultSeverityStyles, ...style }, widget);
388-
}
354+
}

‎src/vs/workbench/contrib/extensions/electron-browser/extensionsViews.ts‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/work
4545
import { CancelablePromise, createCancelablePromise } from 'vs/base/common/async';
4646
import { isUIExtension } from 'vs/workbench/services/extensions/common/extensionsUtil';
4747
import { IProductService } from 'vs/platform/product/common/product';
48-
import { SeverityIcon } from 'vs/base/browser/ui/severityIcon/severityIcon';
48+
import { SeverityIcon } from 'vs/platform/severityIcon/common/severityIcon';
4949

5050
class ExtensionsViewState extends Disposable implements IExtensionsViewState {
5151

@@ -74,7 +74,7 @@ export class ExtensionsListView extends ViewletPanel {
7474

7575
private readonly server: IExtensionManagementServer | undefined;
7676
private messageContainer: HTMLElement;
77-
private messageSeverityIcon: SeverityIcon;
77+
private messageSeverityIcon: HTMLElement;
7878
private messageBox: HTMLElement;
7979
private extensionsList: HTMLElement;
8080
private badge: CountBadge;
@@ -120,9 +120,7 @@ export class ExtensionsListView extends ViewletPanel {
120120
renderBody(container: HTMLElement): void {
121121
this.extensionsList = append(container, $('.extensions-list'));
122122
this.messageContainer = append(container, $('.message-container'));
123-
this.messageSeverityIcon = new SeverityIcon();
124-
append(this.messageContainer, this.messageSeverityIcon.element);
125-
this.disposables.push(this.messageSeverityIcon);
123+
this.messageSeverityIcon = append(this.messageContainer, $(''));
126124
this.messageBox = append(this.messageContainer, $('.message'));
127125
const delegate = new Delegate();
128126
const extensionsViewState = new ExtensionsViewState();
@@ -700,14 +698,14 @@ export class ExtensionsListView extends ViewletPanel {
700698
if (count === 0 && this.isBodyVisible()) {
701699
if (error) {
702700
if (error instanceof ExtensionListViewWarning) {
703-
this.messageSeverityIcon.severity = Severity.Warning;
701+
this.messageSeverityIcon.className = SeverityIcon.className(Severity.Warning);
704702
this.messageBox.textContent = getErrorMessage(error);
705703
} else {
706-
this.messageSeverityIcon.severity = Severity.Error;
704+
this.messageSeverityIcon.className = SeverityIcon.className(Severity.Error);
707705
this.messageBox.textContent = localize('error', "Error while loading extensions. {0}", getErrorMessage(error));
708706
}
709707
} else {
710-
this.messageSeverityIcon.severity = undefined;
708+
this.messageSeverityIcon.className = '';
711709
this.messageBox.textContent = localize('no extensions found', "No extensions found.");
712710
}
713711
alert(this.messageBox.textContent);

0 commit comments

Comments
 (0)