diff --git a/src/vs/workbench/electron-browser/actions.ts b/src/vs/workbench/electron-browser/actions.ts index 44be3bf33e51c278dbcc64349b477eff127338be..51e98c957cc210c4318085899b6ec56b8e289ac0 100644 --- a/src/vs/workbench/electron-browser/actions.ts +++ b/src/vs/workbench/electron-browser/actions.ts @@ -1578,7 +1578,9 @@ export class ShowAboutDialogAction extends Action { } run(): TPromise { - this.notificationService.notify(Severity.Info, 'This is a message with a [link](https://code.visualstudio.com).'); + this.notificationService.notify(Severity.Info, 'This is a info message with a [link](https://code.visualstudio.com).'); + this.notificationService.notify(Severity.Warning, 'This is a warning message with a [link](https://code.visualstudio.com).'); + this.notificationService.notify(Severity.Error, 'This is a error message with a [link](https://code.visualstudio.com).'); return TPromise.as(undefined); } diff --git a/src/vs/workbench/services/notification/browser/media/notification-error-inverse.svg b/src/vs/workbench/services/notification/browser/media/notification-error-inverse.svg new file mode 100644 index 0000000000000000000000000000000000000000..3c852a7ffde95dab5e0031517b5692aca17aac14 --- /dev/null +++ b/src/vs/workbench/services/notification/browser/media/notification-error-inverse.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/vs/workbench/services/notification/browser/media/notification-error.svg b/src/vs/workbench/services/notification/browser/media/notification-error.svg new file mode 100644 index 0000000000000000000000000000000000000000..a1ddb39fed6a755eb9291cf128002c1a2269e703 --- /dev/null +++ b/src/vs/workbench/services/notification/browser/media/notification-error.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/vs/workbench/services/notification/browser/media/notification-info-inverse.svg b/src/vs/workbench/services/notification/browser/media/notification-info-inverse.svg new file mode 100644 index 0000000000000000000000000000000000000000..d38c363e0e4cd4e72f0ef664e6f2e725360342d7 --- /dev/null +++ b/src/vs/workbench/services/notification/browser/media/notification-info-inverse.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/vs/workbench/services/notification/browser/media/notification-info.svg b/src/vs/workbench/services/notification/browser/media/notification-info.svg new file mode 100644 index 0000000000000000000000000000000000000000..6e2e22f67bc97694dcb4c914e3fb381b6fb67f03 --- /dev/null +++ b/src/vs/workbench/services/notification/browser/media/notification-info.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/vs/workbench/services/notification/browser/media/notification-warning-inverse.svg b/src/vs/workbench/services/notification/browser/media/notification-warning-inverse.svg new file mode 100644 index 0000000000000000000000000000000000000000..df44e61b3265c38e04f054eb6aebfa17901ad839 --- /dev/null +++ b/src/vs/workbench/services/notification/browser/media/notification-warning-inverse.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/vs/workbench/services/notification/browser/media/notification-warning.svg b/src/vs/workbench/services/notification/browser/media/notification-warning.svg new file mode 100644 index 0000000000000000000000000000000000000000..f4e2a84b0af409036b5c141957e6f8fe3830279c --- /dev/null +++ b/src/vs/workbench/services/notification/browser/media/notification-warning.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/vs/workbench/services/notification/browser/media/notificationList.css b/src/vs/workbench/services/notification/browser/media/notificationList.css index 40edb046d6e99807b06cbf3a2328fd7a3f61b1a6..fef55b14863f817218a225552a377c4336fe0d14 100644 --- a/src/vs/workbench/services/notification/browser/media/notificationList.css +++ b/src/vs/workbench/services/notification/browser/media/notificationList.css @@ -3,7 +3,7 @@ * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ -.notifications-list-container { +.monaco-workbench > .notifications-list-container { position: absolute; width: 600px; z-index: 1000; @@ -12,6 +12,63 @@ display: none; } -.notifications-list-container.visible { +.monaco-workbench > .notifications-list-container.visible { display: block; +} + +.monaco-workbench > .notifications-list-container .monaco-list-row { + border-left: 3px solid grey; /* TODO make themable */ + border-right: 3px solid grey; + border-bottom: 3px solid grey; +} + +.monaco-workbench > .notifications-list-container .monaco-list-row:first { + border-top: 3px solid grey; +} + +/** Notification: Container */ + +.monaco-workbench > .notifications-list-container .notification-list-item { + display: flex; +} + +/** Notification: Icon */ + +.monaco-workbench > .notifications-list-container .notification-list-item > .notification-list-item-icon { + height: 22px; + margin-right: 4px; + margin-left: 4px; + background-position: center; + background-repeat: no-repeat; + flex: 0 0 16px; +} + +.monaco-workbench > .notifications-list-container .notification-list-item > .notification-list-item-icon.icon-info { + background-image: url('notification-info.svg'); +} + +.monaco-workbench > .notifications-list-container .notification-list-item > .notification-list-item-icon.icon-warning { + background-image: url('notification-warning.svg'); +} + +.monaco-workbench > .notifications-list-container .notification-list-item > .notification-list-item-icon.icon-error { + background-image: url('notification-error.svg'); +} + +.vs-dark .monaco-workbench > .notifications-list-container .notification-list-item > .notification-list-item-icon.icon-info { + background-image: url('notification-info-inverse.svg'); +} + +.vs-dark .monaco-workbench > .notifications-list-container .notification-list-item > .notification-list-item-icon.icon-warning { + background-image: url('notification-warning-inverse.svg'); +} + +.vs-dark .monaco-workbench > .notifications-list-container .notification-list-item > .notification-list-item-icon.icon-error { + background-image: url('notification-error-inverse.svg'); +} + +/** Notification: Message */ + +.monaco-workbench > .notifications-list-container .notification-list-item > .notification-list-item-message { + } \ No newline at end of file diff --git a/src/vs/workbench/services/notification/browser/notificationList.ts b/src/vs/workbench/services/notification/browser/notificationList.ts index 73dc994d2612b65c5897a58be7b629289299c252..d073db5c9f4b5564cbe1087bf6f2ca4c4fcf18f4 100644 --- a/src/vs/workbench/services/notification/browser/notificationList.ts +++ b/src/vs/workbench/services/notification/browser/notificationList.ts @@ -15,8 +15,8 @@ import { NotificationRenderer, NotificationsDelegate } from 'vs/workbench/servic import { IListOptions } from 'vs/base/browser/ui/list/listWidget'; import { localize } from 'vs/nls'; import { Themable, NOTIFICATIONS_BACKGROUND, NOTIFICATIONS_FOREGROUND } from 'vs/workbench/common/theme'; -import { IThemeService } from 'vs/platform/theme/common/themeService'; -import { contrastBorder, widgetShadow } from 'vs/platform/theme/common/colorRegistry'; +import { IThemeService, registerThemingParticipant, ITheme, ICssStyleCollector } from 'vs/platform/theme/common/themeService'; +import { contrastBorder, widgetShadow, textLinkForeground } from 'vs/platform/theme/common/colorRegistry'; import { IMarkdownString } from 'vs/base/common/htmlContent'; export class NotificationList extends Themable { @@ -75,4 +75,11 @@ export class NotificationList extends Themable { this.list.splice(0, 0, [new NotificationViewItem(severity, { value: notification, isTrusted: true } as IMarkdownString)]); this.list.layout(); } -} \ No newline at end of file +} + +registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => { + const linkColor = theme.getColor(textLinkForeground); + if (linkColor) { + collector.addRule(`.monaco-workbench > .notifications-list-container .notification-list-item > .notification-list-item-message a { color: ${linkColor}; }`); + } +}); diff --git a/src/vs/workbench/services/notification/browser/notificationViewer.ts b/src/vs/workbench/services/notification/browser/notificationViewer.ts index 662155ebd1d0d9da9bc7a83937eb3e6629016fdb..36b954161f21d5b8abfe749eefd3ed5f5ca95169 100644 --- a/src/vs/workbench/services/notification/browser/notificationViewer.ts +++ b/src/vs/workbench/services/notification/browser/notificationViewer.ts @@ -9,15 +9,16 @@ import 'vs/css!./media/notificationList'; import { IDelegate, IRenderer } from 'vs/base/browser/ui/list/list'; import { INotificationViewItem, NotificationViewItem } from 'vs/workbench/services/notification/common/notificationsModel'; import { renderMarkdown } from 'vs/base/browser/htmlContentRenderer'; -import { clearNode } from 'vs/base/browser/dom'; +import { clearNode, addClass, removeClass } from 'vs/base/browser/dom'; import { IOpenerService } from 'vs/platform/opener/common/opener'; import URI from 'vs/base/common/uri'; import { onUnexpectedError } from 'vs/base/common/errors'; +import { Severity } from 'vs/platform/message/common/message'; export class NotificationsDelegate implements IDelegate { public getHeight(element: INotificationViewItem): number { - return 22; + return 44; } public getTemplateId(element: INotificationViewItem): string { @@ -31,6 +32,7 @@ export class NotificationsDelegate implements IDelegate { export interface INotificationTemplateData { container: HTMLElement; + icon: HTMLElement; message: HTMLElement; } @@ -38,6 +40,7 @@ export class NotificationRenderer implements IRenderer text || ''; private static readonly MARKED_NOOP_TARGETS = [ 'blockquote', 'br', 'code', 'codespan', 'del', 'em', 'heading', 'hr', 'html', @@ -59,17 +62,42 @@ export class NotificationRenderer implements IRenderer { + const domAction = element.severity === this.toSeverity(severity) ? addClass : removeClass; + domAction(data.icon, `icon-${severity}`); + }); + // Message (simple markdown with links support) clearNode(data.message); data.message.appendChild(renderMarkdown(element.message, {