Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

button: switch to theming by css variables #165515

Merged
merged 4 commits into from
Nov 11, 2022
Merged

button: switch to theming by css variables #165515

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1c8fe37
button: switch to themeing by css variables
aeschli Nov 4, 2022
217be02
make options mandatory, don't mixin default styles
aeschli Nov 9, 2022
d05f11b
Merge branch 'main' into aeschli/button-theming
aeschli Nov 11, 2022
bc2af7e
merge fixes
aeschli Nov 11, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
161 changes: 58 additions & 103 deletions src/vs/base/browser/ui/button/button.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ import { Color } from 'vs/base/common/color';
import { Emitter, Event as BaseEvent } from 'vs/base/common/event';
import { KeyCode } from 'vs/base/common/keyCodes';
import { Disposable, IDisposable } from 'vs/base/common/lifecycle';
import { mixin } from 'vs/base/common/objects';
import { localize } from 'vs/nls';
import 'vs/css!./button';

Expand All @@ -24,22 +23,28 @@ export interface IButtonOptions extends IButtonStyles {
readonly secondary?: boolean;
}

export type CSSValueString = string;

export interface IButtonStyles {
buttonBackground?: Color;
buttonHoverBackground?: Color;
buttonForeground?: Color;
buttonSeparator?: Color;
buttonSecondaryBackground?: Color;
buttonSecondaryHoverBackground?: Color;
buttonSecondaryForeground?: Color;
buttonBorder?: Color;
readonly buttonBackground?: CSSValueString;
readonly buttonHoverBackground?: CSSValueString;
readonly buttonForeground?: CSSValueString;
readonly buttonSeparator?: CSSValueString;
readonly buttonSecondaryBackground?: CSSValueString;
readonly buttonSecondaryHoverBackground?: CSSValueString;
readonly buttonSecondaryForeground?: CSSValueString;
readonly buttonBorder?: CSSValueString;
}

const defaultOptions: IButtonStyles = {
buttonBackground: Color.fromHex('#0E639C'),
buttonHoverBackground: Color.fromHex('#006BB3'),
buttonSeparator: Color.white,
buttonForeground: Color.white
export const defaultOptions: IButtonStyles = {
buttonBackground: '#0E639C',
buttonHoverBackground: '#006BB3',
buttonSeparator: Color.white.toString(),
buttonForeground: Color.white.toString(),
buttonBorder: undefined,
buttonSecondaryBackground: undefined,
buttonSecondaryForeground: undefined,
buttonSecondaryHoverBackground: undefined
};

export interface IButton extends IDisposable {
Expand All @@ -48,7 +53,6 @@ export interface IButton extends IDisposable {
label: string;
icon: CSSIcon;
enabled: boolean;
style(styles: IButtonStyles): void;
focus(): void;
hasFocus(): boolean;
}
Expand All @@ -62,40 +66,31 @@ export class Button extends Disposable implements IButton {
protected _element: HTMLElement;
protected options: IButtonOptions;

private buttonBackground: Color | undefined;
private buttonHoverBackground: Color | undefined;
private buttonForeground: Color | undefined;
private buttonSecondaryBackground: Color | undefined;
private buttonSecondaryHoverBackground: Color | undefined;
private buttonSecondaryForeground: Color | undefined;
private buttonBorder: Color | undefined;

private _onDidClick = this._register(new Emitter<Event>());
get onDidClick(): BaseEvent<Event> { return this._onDidClick.event; }

private focusTracker: IFocusTracker;

constructor(container: HTMLElement, options?: IButtonOptions) {
constructor(container: HTMLElement, options: IButtonOptions) {
super();

this.options = options || Object.create(null);
mixin(this.options, defaultOptions, false);

this.buttonForeground = this.options.buttonForeground;
this.buttonBackground = this.options.buttonBackground;
this.buttonHoverBackground = this.options.buttonHoverBackground;

this.buttonSecondaryForeground = this.options.buttonSecondaryForeground;
this.buttonSecondaryBackground = this.options.buttonSecondaryBackground;
this.buttonSecondaryHoverBackground = this.options.buttonSecondaryHoverBackground;

this.buttonBorder = this.options.buttonBorder;
this.options = options;

this._element = document.createElement('a');
this._element.classList.add('monaco-button');
this._element.tabIndex = 0;
this._element.setAttribute('role', 'button');

const background = options.secondary ? options.buttonSecondaryBackground : options.buttonBackground;
const foreground = options.secondary ? options.buttonSecondaryForeground : options.buttonForeground;
const border = options.buttonBorder;

this._element.style.color = foreground || '';
this._element.style.backgroundColor = background || '';
if (border) {
this._element.style.border = `1px solid ${border}`;
}

container.appendChild(this._element);

this._register(Gesture.addTarget(this._element));
Expand Down Expand Up @@ -129,65 +124,29 @@ export class Button extends Disposable implements IButton {

this._register(addDisposableListener(this._element, EventType.MOUSE_OVER, e => {
if (!this._element.classList.contains('disabled')) {
this.setHoverBackground();
this.updateBackground(true);
}
}));

this._register(addDisposableListener(this._element, EventType.MOUSE_OUT, e => {
this.applyStyles(); // restore standard styles
this.updateBackground(false); // restore standard styles
}));

// Also set hover background when button is focused for feedback
this.focusTracker = this._register(trackFocus(this._element));
this._register(this.focusTracker.onDidFocus(() => { if (this.enabled) { this.setHoverBackground(); } }));
this._register(this.focusTracker.onDidBlur(() => { if (this.enabled) { this.applyStyles(); } }));

this.applyStyles();
this._register(this.focusTracker.onDidFocus(() => { if (this.enabled) { this.updateBackground(true); } }));
this._register(this.focusTracker.onDidBlur(() => { if (this.enabled) { this.updateBackground(false); } }));
}

private setHoverBackground(): void {
let hoverBackground;
private updateBackground(hover: boolean): void {
let background;
if (this.options.secondary) {
hoverBackground = this.buttonSecondaryHoverBackground ? this.buttonSecondaryHoverBackground.toString() : null;
background = hover ? this.options.buttonSecondaryHoverBackground : this.options.buttonSecondaryBackground;
} else {
hoverBackground = this.buttonHoverBackground ? this.buttonHoverBackground.toString() : null;
}
if (hoverBackground) {
this._element.style.backgroundColor = hoverBackground;
background = hover ? this.options.buttonHoverBackground : this.options.buttonBackground;
}
}

style(styles: IButtonStyles): void {
this.buttonForeground = styles.buttonForeground;
this.buttonBackground = styles.buttonBackground;
this.buttonHoverBackground = styles.buttonHoverBackground;
this.buttonSecondaryForeground = styles.buttonSecondaryForeground;
this.buttonSecondaryBackground = styles.buttonSecondaryBackground;
this.buttonSecondaryHoverBackground = styles.buttonSecondaryHoverBackground;
this.buttonBorder = styles.buttonBorder;

this.applyStyles();
}

private applyStyles(): void {
if (this._element) {
let background, foreground;
if (this.options.secondary) {
foreground = this.buttonSecondaryForeground ? this.buttonSecondaryForeground.toString() : '';
background = this.buttonSecondaryBackground ? this.buttonSecondaryBackground.toString() : '';
} else {
foreground = this.buttonForeground ? this.buttonForeground.toString() : '';
background = this.buttonBackground ? this.buttonBackground.toString() : '';
}

const border = this.buttonBorder ? this.buttonBorder.toString() : '';

this._element.style.color = foreground;
if (background) {
this._element.style.backgroundColor = background;

this._element.style.borderWidth = border ? '1px' : '';
this._element.style.borderStyle = border ? 'solid' : '';
this._element.style.borderColor = border;
}
}

Expand Down Expand Up @@ -293,6 +252,21 @@ export class ButtonWithDropdown extends Disposable implements IButton {
this.separatorContainer.appendChild(this.separator);
this.element.appendChild(this.separatorContainer);

// Separator styles
const border = options.buttonBorder;
if (border) {
this.separatorContainer.style.borderTopWidth = '1px';
this.separatorContainer.style.borderTopStyle = 'solid';
this.separatorContainer.style.borderTopColor = border;

this.separatorContainer.style.borderBottomWidth = '1px';
this.separatorContainer.style.borderBottomStyle = 'solid';
this.separatorContainer.style.borderBottomColor = border;
}
this.separatorContainer.style.backgroundColor = options.buttonBackground?.toString() ?? '';
this.separator.style.backgroundColor = options.buttonSeparator?.toString() ?? '';


this.dropdownButton = this._register(new Button(this.element, { ...options, title: false, supportIcons: true }));
this.dropdownButton.element.title = localize("button dropdown more actions", 'More Actions...');
this.dropdownButton.element.setAttribute('aria-haspopup', 'true');
Expand Down Expand Up @@ -330,25 +304,6 @@ export class ButtonWithDropdown extends Disposable implements IButton {
return this.button.enabled;
}

style(styles: IButtonStyles): void {
this.button.style(styles);
this.dropdownButton.style(styles);

// Separator
const border = styles.buttonBorder ? styles.buttonBorder.toString() : '';

this.separatorContainer.style.borderTopWidth = border ? '1px' : '';
this.separatorContainer.style.borderTopStyle = border ? 'solid' : '';
this.separatorContainer.style.borderTopColor = border;

this.separatorContainer.style.borderBottomWidth = border ? '1px' : '';
this.separatorContainer.style.borderBottomStyle = border ? 'solid' : '';
this.separatorContainer.style.borderBottomColor = border;

this.separatorContainer.style.backgroundColor = styles.buttonBackground?.toString() ?? '';
this.separator.style.backgroundColor = styles.buttonSeparator?.toString() ?? '';
}

focus(): void {
this.button.focus();
}
Expand All @@ -363,7 +318,7 @@ export class ButtonWithDescription extends Button implements IButtonWithDescript
private _labelElement: HTMLElement;
private _descriptionElement: HTMLElement;

constructor(container: HTMLElement, options?: IButtonOptions) {
constructor(container: HTMLElement, options: IButtonOptions) {
super(container, options);

this._element.classList.add('monaco-description-button');
Expand Down Expand Up @@ -412,13 +367,13 @@ export class ButtonBar extends Disposable {
return this._buttons;
}

addButton(options?: IButtonOptions): IButton {
addButton(options: IButtonOptions): IButton {
const button = this._register(new Button(this.container, options));
this.pushButton(button);
return button;
}

addButtonWithDescription(options?: IButtonOptions): IButtonWithDescription {
addButtonWithDescription(options: IButtonOptions): IButtonWithDescription {
const button = this._register(new ButtonWithDescription(this.container, options));
this.pushButton(button);
return button;
Expand Down
2 changes: 0 additions & 2 deletions src/vs/base/browser/ui/dialog/dialog.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -427,8 +427,6 @@ export class Dialog extends Disposable {
this.element.style.backgroundColor = bgColor?.toString() ?? '';
this.element.style.border = border;

this.buttonBar?.buttons.forEach(button => button.style(style));

this.checkbox?.style(style);

if (fgColor && bgColor) {
Expand Down
6 changes: 2 additions & 4 deletions src/vs/base/parts/quickinput/browser/quickInput.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1295,14 +1295,14 @@ export class QuickInputController extends Disposable {
const count = new CountBadge(countContainer, { countFormat: localize({ key: 'quickInput.countSelected', comment: ['This tells the user how many items are selected in a list of items to select from. The items can be anything.'] }, "{0} Selected") });

const okContainer = dom.append(headerContainer, $('.quick-input-action'));
const ok = new Button(okContainer);
const ok = new Button(okContainer, this.styles.button);
ok.label = localize('ok', "OK");
this._register(ok.onDidClick(e => {
this.onDidAcceptEmitter.fire();
}));

const customButtonContainer = dom.append(headerContainer, $('.quick-input-action'));
const customButton = new Button(customButtonContainer);
const customButton = new Button(customButtonContainer, this.styles.button);
customButton.label = localize('custom', "Custom");
this._register(customButton.onDidClick(e => {
this.onDidCustomEmitter.fire();
Expand Down Expand Up @@ -1825,8 +1825,6 @@ export class QuickInputController extends Disposable {
this.ui.container.style.boxShadow = widgetShadow ? `0 0 8px 2px ${widgetShadow}` : '';
this.ui.inputBox.style(this.styles.inputBox);
this.ui.count.style(this.styles.countBadge);
this.ui.ok.style(this.styles.button);
this.ui.customButton.style(this.styles.button);
this.ui.list.style(this.styles.list);

const content: string[] = [];
Expand Down
4 changes: 2 additions & 2 deletions src/vs/code/electron-sandbox/issue/issueReporterMain.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import 'vs/css!./media/issueReporter';
import 'vs/base/browser/ui/codicons/codiconStyles'; // make sure codicon css is loaded
import { localize } from 'vs/nls';
import { $, reset, safeInnerHtml, windowOpenNoOpener } from 'vs/base/browser/dom';
import { Button } from 'vs/base/browser/ui/button/button';
import { Button, defaultOptions } from 'vs/base/browser/ui/button/button';
import { renderIcon } from 'vs/base/browser/ui/iconLabel/iconLabels';
import { Delayer } from 'vs/base/common/async';
import { Codicon } from 'vs/base/common/codicons';
Expand Down Expand Up @@ -88,7 +88,7 @@ export class IssueReporter extends Disposable {

const issueReporterElement = this.getElementById('issue-reporter');
if (issueReporterElement) {
this.previewButton = new Button(issueReporterElement);
this.previewButton = new Button(issueReporterElement, defaultOptions);
this.updatePreviewButtonState();
}

Expand Down
11 changes: 3 additions & 8 deletions src/vs/platform/quickinput/browser/quickInput.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,8 @@ import { IWorkbenchListOptions, WorkbenchList } from 'vs/platform/list/browser/l
import { QuickAccessController } from 'vs/platform/quickinput/browser/quickAccess';
import { IQuickAccessController } from 'vs/platform/quickinput/common/quickAccess';
import { IInputBox, IInputOptions, IKeyMods, IPickOptions, IQuickInputButton, IQuickInputService, IQuickNavigateConfiguration, IQuickPick, IQuickPickItem, QuickPickInput } from 'vs/platform/quickinput/common/quickInput';
import { getProgressBarStyles } from 'vs/platform/theme/browser/defaultStyles';
import { activeContrastBorder, badgeBackground, badgeForeground, buttonBackground, buttonForeground, buttonHoverBackground, contrastBorder, inputBackground, inputBorder, inputForeground, inputValidationErrorBackground, inputValidationErrorBorder, inputValidationErrorForeground, inputValidationInfoBackground, inputValidationInfoBorder, inputValidationInfoForeground, inputValidationWarningBackground, inputValidationWarningBorder, inputValidationWarningForeground, keybindingLabelBackground, keybindingLabelBorder, keybindingLabelBottomBorder, keybindingLabelForeground, pickerGroupBorder, pickerGroupForeground, quickInputBackground, quickInputForeground, quickInputListFocusBackground, quickInputListFocusForeground, quickInputListFocusIconForeground, quickInputTitleBackground, widgetShadow } from 'vs/platform/theme/common/colorRegistry';
import { defaultButtonStyles, getProgressBarStyles } from 'vs/platform/theme/browser/defaultStyles';
import { activeContrastBorder, badgeBackground, badgeForeground, contrastBorder, inputBackground, inputBorder, inputForeground, inputValidationErrorBackground, inputValidationErrorBorder, inputValidationErrorForeground, inputValidationInfoBackground, inputValidationInfoBorder, inputValidationInfoForeground, inputValidationWarningBackground, inputValidationWarningBorder, inputValidationWarningForeground, keybindingLabelBackground, keybindingLabelBorder, keybindingLabelBottomBorder, keybindingLabelForeground, pickerGroupBorder, pickerGroupForeground, quickInputBackground, quickInputForeground, quickInputListFocusBackground, quickInputListFocusForeground, quickInputListFocusIconForeground, quickInputTitleBackground, widgetShadow } from 'vs/platform/theme/common/colorRegistry';
import { computeStyles } from 'vs/platform/theme/common/styler';
import { IThemeService, Themable } from 'vs/platform/theme/common/themeService';

Expand Down Expand Up @@ -213,12 +213,7 @@ export class QuickInputService extends Themable implements IQuickInputService {
badgeForeground,
badgeBorder: contrastBorder
}),
button: computeStyles(this.theme, {
buttonForeground,
buttonBackground,
buttonHoverBackground,
buttonBorder: contrastBorder
}),
button: defaultButtonStyles,
progressBar: getProgressBarStyles(), // default uses progressBarBackground
keybindingLabel: computeStyles(this.theme, {
keybindingLabelBackground,
Expand Down
30 changes: 29 additions & 1 deletion src/vs/platform/theme/browser/defaultStyles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,10 @@
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
import { IButtonStyles } from 'vs/base/browser/ui/button/button';
import { IKeybindingLabelStyles } from 'vs/base/browser/ui/keybindingLabel/keybindingLabel';
import { ColorIdentifier, keybindingLabelBackground, keybindingLabelBorder, keybindingLabelBottomBorder, keybindingLabelForeground, asCssValue, widgetShadow, buttonForeground, buttonSeparator, buttonBackground, buttonHoverBackground, buttonSecondaryForeground, buttonSecondaryBackground, buttonSecondaryHoverBackground, buttonBorder, progressBarBackground } from 'vs/platform/theme/common/colorRegistry';
import { IProgressBarStyles } from 'vs/base/browser/ui/progressbar/progressbar';
import { ColorIdentifier, keybindingLabelBackground, keybindingLabelBorder, keybindingLabelBottomBorder, keybindingLabelForeground, asCssValue, widgetShadow, progressBarBackground } from 'vs/platform/theme/common/colorRegistry';
import { IStyleOverrides } from 'vs/platform/theme/common/styler';


Expand All @@ -26,6 +27,33 @@ export function getKeybindingLabelStyles(style?: IKeybindingLabelStyleOverrides)
};
}

export interface IButtonStyleOverrides extends IStyleOverrides {
readonly buttonForeground?: ColorIdentifier;
readonly buttonSeparator?: ColorIdentifier;
readonly buttonBackground?: ColorIdentifier;
readonly buttonHoverBackground?: ColorIdentifier;
readonly buttonSecondaryForeground?: ColorIdentifier;
readonly buttonSecondaryBackground?: ColorIdentifier;
readonly buttonSecondaryHoverBackground?: ColorIdentifier;
readonly buttonBorder?: ColorIdentifier;
}


export const defaultButtonStyles: IButtonStyles = getButtonStyles({});

export function getButtonStyles(style: IButtonStyleOverrides): IButtonStyles {
return {
buttonForeground: asCssValue(style.buttonForeground || buttonForeground),
buttonSeparator: asCssValue(style.buttonSeparator || buttonSeparator),
buttonBackground: asCssValue(style.buttonBackground || buttonBackground),
buttonHoverBackground: asCssValue(style.buttonHoverBackground || buttonHoverBackground),
buttonSecondaryForeground: asCssValue(style.buttonSecondaryForeground || buttonSecondaryForeground),
buttonSecondaryBackground: asCssValue(style.buttonSecondaryBackground || buttonSecondaryBackground),
buttonSecondaryHoverBackground: asCssValue(style.buttonSecondaryHoverBackground || buttonSecondaryHoverBackground),
buttonBorder: asCssValue(style.buttonBorder || buttonBorder),
};
}

export interface IProgressBarStyleOverrides extends IStyleOverrides {
progressBarBackground?: ColorIdentifier;
}
Expand Down
Loading