Skip to content

Commit

Permalink
Add options to theme notification buttons and badges (#28471)
Browse files Browse the repository at this point in the history
  • Loading branch information
@bpasero
Hasan Ali authored and bpasero committed Jun 13, 2017
1 parent 03bb0ad commit 87e691c
Show file tree
Hide file tree
Showing 2 changed files with 75 additions and 10 deletions.
56 changes: 55 additions & 1 deletion src/vs/workbench/common/theme.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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.
*/
Expand Down
29 changes: 20 additions & 9 deletions src/vs/workbench/services/message/browser/messageList.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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,
Expand All @@ -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; }`);
}
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -469,4 +480,4 @@ export class MessageList {
public dispose(): void {
this.toDispose = dispose(this.toDispose);
}
}
}

0 comments on commit 87e691c

Please sign in to comment.