From 9ea61ba8e4d8ad84863ed580a681c18f07489569 Mon Sep 17 00:00:00 2001 From: Benjamin Pasero Date: Fri, 23 Feb 2018 14:27:11 +0100 Subject: [PATCH] notifications - theme color tweaks --- .../notifications/media/notificationsList.css | 5 ++++ .../notifications/notificationsCenter.ts | 5 +++- .../parts/notifications/notificationsList.ts | 10 ++++++- .../notifications/notificationsToasts.ts | 5 +++- src/vs/workbench/common/theme.ts | 26 ++++++++++++++----- 5 files changed, 41 insertions(+), 10 deletions(-) diff --git a/src/vs/workbench/browser/parts/notifications/media/notificationsList.css b/src/vs/workbench/browser/parts/notifications/media/notificationsList.css index ced4f5b6d2b..7cac096e954 100644 --- a/src/vs/workbench/browser/parts/notifications/media/notificationsList.css +++ b/src/vs/workbench/browser/parts/notifications/media/notificationsList.css @@ -78,6 +78,11 @@ flex: 1; /* let the message always grow */ } +.monaco-workbench .notifications-list-container .notification-list-item .notification-list-item-message a:focus { + outline-width: 1px; + outline-style: solid; +} + .monaco-workbench .notifications-list-container .notification-list-item.expanded .notification-list-item-message { white-space: normal; } diff --git a/src/vs/workbench/browser/parts/notifications/notificationsCenter.ts b/src/vs/workbench/browser/parts/notifications/notificationsCenter.ts index 666b74fd727..2a6793eb448 100644 --- a/src/vs/workbench/browser/parts/notifications/notificationsCenter.ts +++ b/src/vs/workbench/browser/parts/notifications/notificationsCenter.ts @@ -7,7 +7,7 @@ import 'vs/css!./media/notificationsCenter'; import 'vs/css!./media/notificationsActions'; -import { Themable, NOTIFICATIONS_BORDER, NOTIFICATIONS_CENTER_HEADER_FOREGROUND, NOTIFICATIONS_CENTER_HEADER_BACKGROUND } from 'vs/workbench/common/theme'; +import { Themable, NOTIFICATIONS_BORDER, NOTIFICATIONS_CENTER_HEADER_FOREGROUND, NOTIFICATIONS_CENTER_HEADER_BACKGROUND, NOTIFICATIONS_CENTER_BORDER } from 'vs/workbench/common/theme'; import { IThemeService, registerThemingParticipant, ITheme, ICssStyleCollector } from 'vs/platform/theme/common/themeService'; import { INotificationsModel, INotificationChangeEvent, NotificationChangeType } from 'vs/workbench/common/notifications'; import { Dimension } from 'vs/base/browser/builder'; @@ -221,6 +221,9 @@ export class NotificationsCenter extends Themable { const widgetShadowColor = this.getColor(widgetShadow); this.notificationsCenterContainer.style.boxShadow = widgetShadowColor ? `0 0px 8px ${widgetShadowColor}` : null; + const borderColor = this.getColor(NOTIFICATIONS_CENTER_BORDER); + this.notificationsCenterContainer.style.border = borderColor ? `1px solid ${borderColor}` : null; + const headerForeground = this.getColor(NOTIFICATIONS_CENTER_HEADER_FOREGROUND); this.notificationsCenterHeader.style.color = headerForeground ? headerForeground.toString() : null; diff --git a/src/vs/workbench/browser/parts/notifications/notificationsList.ts b/src/vs/workbench/browser/parts/notifications/notificationsList.ts index 11824629b48..73685ead880 100644 --- a/src/vs/workbench/browser/parts/notifications/notificationsList.ts +++ b/src/vs/workbench/browser/parts/notifications/notificationsList.ts @@ -12,7 +12,7 @@ import { IInstantiationService } from 'vs/platform/instantiation/common/instanti import { IListOptions } from 'vs/base/browser/ui/list/listWidget'; import { Themable, NOTIFICATIONS_LINKS, NOTIFICATIONS_BACKGROUND, NOTIFICATIONS_FOREGROUND } from 'vs/workbench/common/theme'; import { IThemeService, registerThemingParticipant, ITheme, ICssStyleCollector } from 'vs/platform/theme/common/themeService'; -import { contrastBorder } from 'vs/platform/theme/common/colorRegistry'; +import { contrastBorder, focusBorder } from 'vs/platform/theme/common/colorRegistry'; import { INotificationViewItem } from 'vs/workbench/common/notifications'; import { NotificationsListDelegate, NotificationRenderer } from 'vs/workbench/browser/parts/notifications/notificationsViewer'; import { NotificationActionRunner } from 'vs/workbench/browser/parts/notifications/notificationsActions'; @@ -224,4 +224,12 @@ registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => { if (linkColor) { collector.addRule(`.monaco-workbench .notifications-list-container .notification-list-item .notification-list-item-message a { color: ${linkColor}; }`); } + + const focusOutline = theme.getColor(focusBorder); + if (focusOutline) { + collector.addRule(` + .monaco-workbench .notifications-list-container .notification-list-item .notification-list-item-message a:focus { + outline-color: ${focusOutline}; + }`); + } }); diff --git a/src/vs/workbench/browser/parts/notifications/notificationsToasts.ts b/src/vs/workbench/browser/parts/notifications/notificationsToasts.ts index 3150ae326ee..8c00b8bae33 100644 --- a/src/vs/workbench/browser/parts/notifications/notificationsToasts.ts +++ b/src/vs/workbench/browser/parts/notifications/notificationsToasts.ts @@ -14,7 +14,7 @@ import { NotificationsList } from 'vs/workbench/browser/parts/notifications/noti import { Dimension } from 'vs/base/browser/builder'; import { once } from 'vs/base/common/event'; import { IPartService, Parts } from 'vs/workbench/services/part/common/partService'; -import { Themable } from 'vs/workbench/common/theme'; +import { Themable, NOTIFICATIONS_TOAST_BORDER } from 'vs/workbench/common/theme'; import { IThemeService } from 'vs/platform/theme/common/themeService'; import { widgetShadow } from 'vs/platform/theme/common/colorRegistry'; import { IWorkbenchEditorService } from 'vs/workbench/services/editor/common/editorService'; @@ -324,6 +324,9 @@ export class NotificationsToasts extends Themable { this.mapNotificationToToast.forEach(t => { const widgetShadowColor = this.getColor(widgetShadow); t.toast.style.boxShadow = widgetShadowColor ? `0 0px 8px ${widgetShadowColor}` : null; + + const borderColor = this.getColor(NOTIFICATIONS_TOAST_BORDER); + t.toast.style.border = borderColor ? `1px solid ${borderColor}` : null; }); } diff --git a/src/vs/workbench/common/theme.ts b/src/vs/workbench/common/theme.ts index 394e96188d7..635d0834a24 100644 --- a/src/vs/workbench/common/theme.ts +++ b/src/vs/workbench/common/theme.ts @@ -366,6 +366,18 @@ export const TITLE_BAR_BORDER = registerColor('titleBar.border', { // < --- Notifications --- > +export const NOTIFICATIONS_CENTER_BORDER = registerColor('notificationsCenter.border', { + dark: null, + light: null, + hc: contrastBorder +}, nls.localize('notificationsCenterBorder', "Notifications center border color. Notifications slide in from the bottom right of the window.")); + +export const NOTIFICATIONS_TOAST_BORDER = registerColor('notificationsToast.border', { + dark: null, + light: null, + hc: contrastBorder +}, nls.localize('notificationsToastBorder', "Notification toast border color. Notifications slide in from the bottom right of the window.")); + export const NOTIFICATIONS_FOREGROUND = registerColor('notifications.foreground', { dark: null, light: null, @@ -378,12 +390,6 @@ export const NOTIFICATIONS_BACKGROUND = registerColor('notifications.background' hc: editorWidgetBackground }, nls.localize('notificationsBackground', "Notifications background color. Notifications slide in from the bottom right of the window.")); -export const NOTIFICATIONS_BORDER = registerColor('notifications.border', { - dark: editorBackground, - light: editorBackground, - hc: editorBackground -}, nls.localize('notificationsBorder', "Notifications border color. Notifications slide in from the bottom right of the window.")); - export const NOTIFICATIONS_LINKS = registerColor('notificationLink.foreground', { dark: textLinkForeground, light: textLinkForeground, @@ -399,9 +405,15 @@ export const NOTIFICATIONS_CENTER_HEADER_FOREGROUND = registerColor('notificatio export const NOTIFICATIONS_CENTER_HEADER_BACKGROUND = registerColor('notificationsCenterHeader.background', { dark: lighten(NOTIFICATIONS_BACKGROUND, 0.3), light: darken(NOTIFICATIONS_BACKGROUND, 0.05), - hc: null + hc: NOTIFICATIONS_BACKGROUND }, nls.localize('notificationsCenterHeaderBackground', "Notifications center header background color. Notifications slide in from the bottom right of the window.")); +export const NOTIFICATIONS_BORDER = registerColor('notifications.border', { + dark: NOTIFICATIONS_CENTER_HEADER_BACKGROUND, + light: NOTIFICATIONS_CENTER_HEADER_BACKGROUND, + hc: NOTIFICATIONS_CENTER_HEADER_BACKGROUND +}, nls.localize('notificationsBorder', "Notifications border color separating from other notifications in the notifications center. Notifications slide in from the bottom right of the window.")); + /** * Base class for all themable workbench components. */ -- GitLab