Skip to content

Commit 4759e0b

Browse files
aeschlijoaomoreno
aeschli
and
joaomoreno
authored
refactor styling of toggle, dialog, inputbox & checkbox (microsoft#166542)
* refactor styling of toggle, dialog, inputbox & checkbox * simplify abstract tree styling Co-authored-by: Joao Moreno <[email protected]>
1 parent f8c9ae7 commit 4759e0b

File tree

64 files changed

+555
-1056
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

64 files changed

+555
-1056
lines changed

‎src/vs/base/browser/ui/actionbar/actionViewItems.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import { IContextViewProvider } from 'vs/base/browser/ui/contextview/contextview
1212
import { IHoverDelegate } from 'vs/base/browser/ui/iconLabel/iconHoverDelegate';
1313
import { ICustomHover, setupCustomHover } from 'vs/base/browser/ui/iconLabel/iconLabelHover';
1414
import { ISelectBoxOptions, ISelectOptionItem, SelectBox } from 'vs/base/browser/ui/selectBox/selectBox';
15+
import { IToggleStyles } from 'vs/base/browser/ui/toggle/toggle';
1516
import { Action, ActionRunner, IAction, IActionChangeEvent, IActionRunner, Separator } from 'vs/base/common/actions';
1617
import { Disposable } from 'vs/base/common/lifecycle';
1718
import * as platform from 'vs/base/common/platform';
@@ -261,6 +262,7 @@ export interface IActionViewItemOptions extends IBaseActionViewItemOptions {
261262
icon?: boolean;
262263
label?: boolean;
263264
keybinding?: string | null;
265+
toggleStyles?: IToggleStyles;
264266
}
265267

266268
export class ActionViewItem extends BaseActionViewItem {
@@ -270,7 +272,7 @@ export class ActionViewItem extends BaseActionViewItem {
270272

271273
private cssClass?: string;
272274

273-
constructor(context: unknown, action: IAction, options: IActionViewItemOptions = {}) {
275+
constructor(context: unknown, action: IAction, options: IActionViewItemOptions) {
274276
super(context, action, options);
275277

276278
this.options = options;

‎src/vs/base/browser/ui/dialog/dialog.ts

Lines changed: 53 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,9 @@ import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
88
import { ActionBar } from 'vs/base/browser/ui/actionbar/actionbar';
99
import { ButtonBar, ButtonWithDescription, IButtonStyles } from 'vs/base/browser/ui/button/button';
1010
import { ICheckboxStyles, Checkbox } from 'vs/base/browser/ui/toggle/toggle';
11-
import { InputBox } from 'vs/base/browser/ui/inputbox/inputBox';
11+
import { IInputBoxStyles, InputBox } from 'vs/base/browser/ui/inputbox/inputBox';
1212
import { Action } from 'vs/base/common/actions';
1313
import { Codicon } from 'vs/base/common/codicons';
14-
import { Color } from 'vs/base/common/color';
1514
import { KeyCode, KeyMod } from 'vs/base/common/keyCodes';
1615
import { mnemonicButtonLabel } from 'vs/base/common/labels';
1716
import { Disposable } from 'vs/base/common/lifecycle';
@@ -39,6 +38,9 @@ export interface IDialogOptions {
3938
readonly disableCloseAction?: boolean;
4039
readonly disableDefaultAction?: boolean;
4140
readonly buttonStyles: IButtonStyles;
41+
readonly checkboxStyles: ICheckboxStyles;
42+
readonly inputBoxStyles: IInputBoxStyles;
43+
readonly dialogStyles: IDialogStyles;
4244
}
4345

4446
export interface IDialogResult {
@@ -47,19 +49,15 @@ export interface IDialogResult {
4749
readonly values?: string[];
4850
}
4951

50-
export interface IDialogStyles extends ICheckboxStyles {
51-
readonly dialogForeground?: Color;
52-
readonly dialogBackground?: Color;
53-
readonly dialogShadow?: Color;
54-
readonly dialogBorder?: Color;
55-
readonly errorIconForeground?: Color;
56-
readonly warningIconForeground?: Color;
57-
readonly infoIconForeground?: Color;
58-
readonly inputBackground?: Color;
59-
readonly inputForeground?: Color;
60-
readonly inputBorder?: Color;
61-
readonly textLinkForeground?: Color;
62-
52+
export interface IDialogStyles {
53+
readonly dialogForeground: string | undefined;
54+
readonly dialogBackground: string | undefined;
55+
readonly dialogShadow: string | undefined;
56+
readonly dialogBorder: string | undefined;
57+
readonly errorIconForeground: string | undefined;
58+
readonly warningIconForeground: string | undefined;
59+
readonly infoIconForeground: string | undefined;
60+
readonly textLinkForeground: string | undefined;
6361
}
6462

6563
interface ButtonMapEntry {
@@ -78,7 +76,6 @@ export class Dialog extends Disposable {
7876
private readonly checkbox: Checkbox | undefined;
7977
private readonly toolbarContainer: HTMLElement;
8078
private buttonBar: ButtonBar | undefined;
81-
private styles: IDialogStyles | undefined;
8279
private focusToReturn: HTMLElement | undefined;
8380
private readonly inputs: InputBox[];
8481
private readonly buttons: string[];
@@ -140,6 +137,7 @@ export class Dialog extends Disposable {
140137
const inputBox = this._register(new InputBox(inputRowElement, undefined, {
141138
placeholder: input.placeholder,
142139
type: input.type ?? 'text',
140+
inputBoxStyles: options.inputBoxStyles
143141
}));
144142

145143
if (input.value) {
@@ -155,7 +153,9 @@ export class Dialog extends Disposable {
155153
if (this.options.checkboxLabel) {
156154
const checkboxRowElement = this.messageContainer.appendChild($('.dialog-checkbox-row'));
157155

158-
const checkbox = this.checkbox = this._register(new Checkbox(this.options.checkboxLabel, !!this.options.checkboxChecked));
156+
const checkbox = this.checkbox = this._register(
157+
new Checkbox(this.options.checkboxLabel, !!this.options.checkboxChecked, options.checkboxStyles)
158+
);
159159

160160
checkboxRowElement.appendChild(checkbox.domNode);
161161

@@ -166,6 +166,8 @@ export class Dialog extends Disposable {
166166

167167
const toolbarRowElement = this.element.appendChild($('.dialog-toolbar-row'));
168168
this.toolbarContainer = toolbarRowElement.appendChild($('.dialog-toolbar'));
169+
170+
this.applyStyles();
169171
}
170172

171173
private getIconAriaLabel(): string {
@@ -391,7 +393,7 @@ export class Dialog extends Disposable {
391393
});
392394
}));
393395

394-
actionBar.push(action, { icon: true, label: false, });
396+
actionBar.push(action, { icon: true, label: false });
395397
}
396398

397399
this.applyStyles();
@@ -416,60 +418,47 @@ export class Dialog extends Disposable {
416418
}
417419

418420
private applyStyles() {
419-
if (this.styles) {
420-
const style = this.styles;
421-
422-
const fgColor = style.dialogForeground;
423-
const bgColor = style.dialogBackground;
424-
const shadowColor = style.dialogShadow ? `0 0px 8px ${style.dialogShadow}` : '';
425-
const border = style.dialogBorder ? `1px solid ${style.dialogBorder}` : '';
426-
const linkFgColor = style.textLinkForeground;
427-
428-
this.shadowElement.style.boxShadow = shadowColor;
429-
430-
this.element.style.color = fgColor?.toString() ?? '';
431-
this.element.style.backgroundColor = bgColor?.toString() ?? '';
432-
this.element.style.border = border;
421+
const style = this.options.dialogStyles;
433422

434-
this.checkbox?.style(style);
423+
const fgColor = style.dialogForeground;
424+
const bgColor = style.dialogBackground;
425+
const shadowColor = style.dialogShadow ? `0 0px 8px ${style.dialogShadow}` : '';
426+
const border = style.dialogBorder ? `1px solid ${style.dialogBorder}` : '';
427+
const linkFgColor = style.textLinkForeground;
435428

436-
if (fgColor && bgColor) {
437-
const messageDetailColor = fgColor.transparent(.9);
438-
this.messageDetailElement.style.color = messageDetailColor.makeOpaque(bgColor).toString();
439-
}
429+
this.shadowElement.style.boxShadow = shadowColor;
440430

441-
if (linkFgColor) {
442-
for (const el of this.messageContainer.getElementsByTagName('a')) {
443-
el.style.color = linkFgColor.toString();
444-
}
445-
}
431+
this.element.style.color = fgColor?.toString() ?? '';
432+
this.element.style.backgroundColor = bgColor?.toString() ?? '';
433+
this.element.style.border = border;
446434

447-
let color;
448-
switch (this.options.type) {
449-
case 'error':
450-
color = style.errorIconForeground;
451-
break;
452-
case 'warning':
453-
color = style.warningIconForeground;
454-
break;
455-
default:
456-
color = style.infoIconForeground;
457-
break;
458-
}
459-
if (color) {
460-
this.iconElement.style.color = color.toString();
461-
}
435+
// TODO fix
436+
// if (fgColor && bgColor) {
437+
// const messageDetailColor = fgColor.transparent(.9);
438+
// this.messageDetailElement.style.mixBlendMode = messageDetailColor.makeOpaque(bgColor).toString();
439+
// }
462440

463-
for (const input of this.inputs) {
464-
input.style(style);
441+
if (linkFgColor) {
442+
for (const el of this.messageContainer.getElementsByTagName('a')) {
443+
el.style.color = linkFgColor;
465444
}
466445
}
467-
}
468446

469-
style(style: IDialogStyles): void {
470-
this.styles = style;
471-
472-
this.applyStyles();
447+
let color;
448+
switch (this.options.type) {
449+
case 'error':
450+
color = style.errorIconForeground;
451+
break;
452+
case 'warning':
453+
color = style.warningIconForeground;
454+
break;
455+
default:
456+
color = style.infoIconForeground;
457+
break;
458+
}
459+
if (color) {
460+
this.iconElement.style.color = color;
461+
}
473462
}
474463

475464
override dispose(): void {

0 commit comments

Comments
 (0)