From 87e691c9cc9fec32e993e80d942240332bd8ffb7 Mon Sep 17 00:00:00 2001 From: Hasan Ali Date: Tue, 13 Jun 2017 07:26:28 +0100 Subject: [PATCH] Add options to theme notification buttons and badges (#28471) --- src/vs/workbench/common/theme.ts | 56 ++++++++++++++++++- .../services/message/browser/messageList.ts | 29 +++++++--- 2 files changed, 75 insertions(+), 10 deletions(-) diff --git a/src/vs/workbench/common/theme.ts b/src/vs/workbench/common/theme.ts index 4297f3a2df2..072582f273e 100644 --- a/src/vs/workbench/common/theme.ts +++ b/src/vs/workbench/common/theme.ts @@ -4,7 +4,7 @@ *--------------------------------------------------------------------------------------------*/ import nls = require('vs/nls'); -import { registerColor, editorBackground, contrastBorder, transparent, badgeForeground, badgeBackground } from 'vs/platform/theme/common/colorRegistry'; +import { registerColor, editorBackground, contrastBorder, transparent, badgeForeground, badgeBackground, lighten, darken } from 'vs/platform/theme/common/colorRegistry'; import { IDisposable, Disposable, dispose } from 'vs/base/common/lifecycle'; import { IThemeService, ITheme } from 'vs/platform/theme/common/themeService'; import { Color } from 'vs/base/common/color'; @@ -306,6 +306,60 @@ export const NOTIFICATIONS_BACKGROUND = registerColor('notification.background', hc: '#000000' }, nls.localize('notificationsBackground', "Notifications background color. Notifications slide in from the top of the window.")); +export const NOTIFICATIONS_BUTTON_BACKGROUND = registerColor('notification.buttonBackground', { + dark: '#0E639C', + light: '#007ACC', + hc: null +}, nls.localize('notificationsButtonBackground', "Notifications button background color. Notifications slide in from the top of the window.")); + +export const NOTIFICATIONS_BUTTON_HOVER_BACKGROUND = registerColor('notification.buttonHoverBackground', { + dark: lighten(NOTIFICATIONS_BUTTON_BACKGROUND, 0.2), + light: darken(NOTIFICATIONS_BUTTON_BACKGROUND, 0.2), + hc: null +}, nls.localize('notificationsButtonHoverBackground', "Notifications button background color when hovering. Notifications slide in from the top of the window.")); + +export const NOTIFICATIONS_BUTTON_FOREGROUND = registerColor('notification.buttonForeground', { + dark: Color.white, + light: Color.white, + hc: Color.white +}, nls.localize('notificationsButtonForeground', "Notifications button foreground color. Notifications slide in from the top of the window.")); + +export const NOTIFICATIONS_INFO_BACKGROUND = registerColor('notification.infoBackground', { + dark: '#007acc', + light: '#007acc', + hc: contrastBorder +}, nls.localize('notificationsInfoBackground', "Notifications info background color. Notifications slide in from the top of the window.")); + +export const NOTIFICATIONS_INFO_FOREGROUND = registerColor('notification.infoForeground', { + dark: NOTIFICATIONS_FOREGROUND, + light: NOTIFICATIONS_FOREGROUND, + hc: null +}, nls.localize('notificationsInfoForeground', "Notifications info foreground color. Notifications slide in from the top of the window.")); + +export const NOTIFICATIONS_WARNING_BACKGROUND = registerColor('notification.warningBackground', { + dark: '#B89500', + light: '#B89500', + hc: contrastBorder +}, nls.localize('notificationsWarningBackground', "Notifications warning background color. Notifications slide in from the top of the window.")); + +export const NOTIFICATIONS_WARNING_FOREGROUND = registerColor('notification.warningForeground', { + dark: NOTIFICATIONS_FOREGROUND, + light: NOTIFICATIONS_FOREGROUND, + hc: null +}, nls.localize('notificationsWarningForeground', "Notifications warning foreground color. Notifications slide in from the top of the window.")); + +export const NOTIFICATIONS_ERROR_BACKGROUND = registerColor('notification.errorBackground', { + dark: '#BE1100', + light: '#BE1100', + hc: contrastBorder +}, nls.localize('notificationsErrorBackground', "Notifications error background color. Notifications slide in from the top of the window.")); + +export const NOTIFICATIONS_ERROR_FOREGROUND = registerColor('notification.errorForeground', { + dark: NOTIFICATIONS_FOREGROUND, + light: NOTIFICATIONS_FOREGROUND, + hc: null +}, nls.localize('notificationsErrorForeground', "Notifications error foreground color. Notifications slide in from the top of the window.")); + /** * Base class for all themable workbench components. */ diff --git a/src/vs/workbench/services/message/browser/messageList.ts b/src/vs/workbench/services/message/browser/messageList.ts index 744b5818055..55e51942ce2 100644 --- a/src/vs/workbench/services/message/browser/messageList.ts +++ b/src/vs/workbench/services/message/browser/messageList.ts @@ -19,10 +19,10 @@ import { Action } from 'vs/base/common/actions'; import htmlRenderer = require('vs/base/browser/htmlContentRenderer'); import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent'; import { KeyCode } from 'vs/base/common/keyCodes'; -import { NOTIFICATIONS_FOREGROUND, NOTIFICATIONS_BACKGROUND } from 'vs/workbench/common/theme'; +import { NOTIFICATIONS_FOREGROUND, NOTIFICATIONS_BACKGROUND, NOTIFICATIONS_BUTTON_BACKGROUND, NOTIFICATIONS_BUTTON_HOVER_BACKGROUND, NOTIFICATIONS_BUTTON_FOREGROUND, NOTIFICATIONS_INFO_BACKGROUND, NOTIFICATIONS_WARNING_BACKGROUND, NOTIFICATIONS_ERROR_BACKGROUND, NOTIFICATIONS_INFO_FOREGROUND, NOTIFICATIONS_WARNING_FOREGROUND, NOTIFICATIONS_ERROR_FOREGROUND } from 'vs/workbench/common/theme'; import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry'; import { registerThemingParticipant } from 'vs/platform/theme/common/themeService'; -import { contrastBorder, buttonBackground, buttonHoverBackground, widgetShadow, inputValidationErrorBorder, inputValidationWarningBorder, inputValidationInfoBorder } from 'vs/platform/theme/common/colorRegistry'; +import { contrastBorder, widgetShadow } from 'vs/platform/theme/common/colorRegistry'; import { IDisposable, dispose } from 'vs/base/common/lifecycle'; import { Color } from 'vs/base/common/color'; @@ -77,9 +77,13 @@ export class MessageList { private widgetShadow = Color.fromHex('#000000'); private outlineBorder: Color; private buttonBackground = Color.fromHex('#0E639C'); + private buttonForeground = this.foreground; private infoBackground = Color.fromHex('#007ACC'); + private infoForeground = this.foreground; private warningBackground = Color.fromHex('#B89500'); + private warningForeground = this.foreground; private errorBackground = Color.fromHex('#BE1100'); + private errorForeground = this.foreground; constructor( container: HTMLElement, @@ -106,12 +110,16 @@ export class MessageList { this.foreground = theme.getColor(NOTIFICATIONS_FOREGROUND); this.widgetShadow = theme.getColor(widgetShadow); this.outlineBorder = theme.getColor(contrastBorder); - this.buttonBackground = theme.getColor(buttonBackground); - this.infoBackground = theme.getColor(inputValidationInfoBorder); - this.warningBackground = theme.getColor(inputValidationWarningBorder); - this.errorBackground = theme.getColor(inputValidationErrorBorder); - - const buttonHoverBackgroundColor = theme.getColor(buttonHoverBackground); + this.buttonBackground = theme.getColor(NOTIFICATIONS_BUTTON_BACKGROUND); + this.buttonForeground = theme.getColor(NOTIFICATIONS_BUTTON_FOREGROUND); + this.infoBackground = theme.getColor(NOTIFICATIONS_INFO_BACKGROUND); + this.infoForeground = theme.getColor(NOTIFICATIONS_INFO_FOREGROUND); + this.warningBackground = theme.getColor(NOTIFICATIONS_WARNING_BACKGROUND); + this.warningForeground = theme.getColor(NOTIFICATIONS_WARNING_FOREGROUND); + this.errorBackground = theme.getColor(NOTIFICATIONS_ERROR_BACKGROUND); + this.errorForeground = theme.getColor(NOTIFICATIONS_ERROR_FOREGROUND); + + const buttonHoverBackgroundColor = theme.getColor(NOTIFICATIONS_BUTTON_HOVER_BACKGROUND); if (buttonHoverBackgroundColor) { collector.addRule(`.global-message-list li.message-list-entry .actions-container .message-action .action-button:hover { background-color: ${buttonHoverBackgroundColor} !important; }`); } @@ -281,6 +289,7 @@ export class MessageList { div.a({ class: 'action-button', tabindex: '0', role: 'button' }) .style('border-color', this.outlineBorder ? this.outlineBorder.toString() : null) .style('background-color', this.buttonBackground ? this.buttonBackground.toString() : null) + .style('color', this.buttonForeground ? this.buttonForeground.toString() : null) .text(action.label) .on([DOM.EventType.CLICK, DOM.EventType.KEY_DOWN], e => { if (e instanceof KeyboardEvent) { @@ -317,9 +326,11 @@ export class MessageList { const sev = message.severity; const label = (sev === Severity.Error) ? nls.localize('error', "Error") : (sev === Severity.Warning) ? nls.localize('warning', "Warn") : nls.localize('info', "Info"); const color = (sev === Severity.Error) ? this.errorBackground : (sev === Severity.Warning) ? this.warningBackground : this.infoBackground; + const foregroundColor = (sev === Severity.Error) ? this.errorForeground : (sev === Severity.Warning) ? this.warningForeground : this.infoForeground; const sevLabel = $().span({ class: `message-left-side severity ${sev === Severity.Error ? 'app-error' : sev === Severity.Warning ? 'app-warning' : 'app-info'}`, text: label }); sevLabel.style('border-color', this.outlineBorder ? this.outlineBorder.toString() : null); sevLabel.style('background-color', color ? color.toString() : null); + sevLabel.style('color', foregroundColor ? foregroundColor.toString() : null); sevLabel.appendTo(div); // Error message @@ -469,4 +480,4 @@ export class MessageList { public dispose(): void { this.toDispose = dispose(this.toDispose); } -} \ No newline at end of file +} -- GitLab