mirror of
https://github.com/ckaczor/azuredatastudio.git
synced 2026-02-14 12:08:36 -05:00
align with portal button style (#14187)
* align with portal button style * fix welcome page * image button * more fixes * use withProperties * add comment back * add border radius
This commit is contained in:
Alan Ren
@@ -28,6 +28,11 @@ export interface IButtonStyles {
|
||||
buttonSecondaryHoverBackground?: Color;
|
||||
buttonSecondaryForeground?: Color;
|
||||
buttonBorder?: Color;
|
||||
// {{SQL CARBON EDIT}}
|
||||
buttonSecondaryBorder?: Color;
|
||||
buttonDisabledBackground?: Color;
|
||||
buttonDisabledForeground?: Color;
|
||||
buttonDisabledBorder?: Color;
|
||||
}
|
||||
|
||||
const defaultOptions: IButtonStyles = {
|
||||
@@ -48,6 +53,13 @@ export class Button extends Disposable {
|
||||
private buttonSecondaryHoverBackground: Color | undefined;
|
||||
private buttonSecondaryForeground: Color | undefined;
|
||||
private buttonBorder: Color | undefined;
|
||||
// {{SQL CARBON EDIT}}
|
||||
private buttonSecondaryBorder: Color | undefined;
|
||||
private buttonDisabledBackground: Color | undefined;
|
||||
private buttonDisabledForeground: Color | undefined;
|
||||
private buttonDisabledBorder: Color | undefined;
|
||||
private hasIcon: boolean = false;
|
||||
// {{SQL CARBON EDIT}} - END
|
||||
|
||||
private _onDidClick = this._register(new Emitter<Event>());
|
||||
get onDidClick(): BaseEvent<Event> { return this._onDidClick.event; }
|
||||
@@ -69,6 +81,12 @@ export class Button extends Disposable {
|
||||
this.buttonSecondaryHoverBackground = this.options.buttonSecondaryHoverBackground;
|
||||
|
||||
this.buttonBorder = this.options.buttonBorder;
|
||||
// {{SQL CARBON EDIT}}
|
||||
this.buttonSecondaryBorder = this.options.buttonSecondaryBorder;
|
||||
this.buttonDisabledBackground = this.options.buttonDisabledBackground;
|
||||
this.buttonDisabledForeground = this.options.buttonDisabledForeground;
|
||||
this.buttonDisabledBorder = this.options.buttonDisabledBorder;
|
||||
|
||||
|
||||
this._element = document.createElement('a');
|
||||
this._element.classList.add('monaco-button');
|
||||
@@ -125,6 +143,10 @@ export class Button extends Disposable {
|
||||
}
|
||||
|
||||
private setHoverBackground(): void {
|
||||
// {{SQL CARBON EDIT}} - skip if this is an icon button
|
||||
if (this.hasIcon) {
|
||||
return;
|
||||
}
|
||||
let hoverBackground;
|
||||
if (this.options.secondary) {
|
||||
hoverBackground = this.buttonSecondaryHoverBackground ? this.buttonSecondaryHoverBackground.toString() : null;
|
||||
@@ -145,9 +167,15 @@ export class Button extends Disposable {
|
||||
this.buttonSecondaryHoverBackground = styles.buttonSecondaryHoverBackground;
|
||||
this.buttonBorder = styles.buttonBorder;
|
||||
|
||||
this.buttonSecondaryBorder = styles.buttonSecondaryBorder;
|
||||
this.buttonDisabledBackground = styles.buttonDisabledBackground;
|
||||
this.buttonDisabledForeground = styles.buttonDisabledForeground;
|
||||
this.buttonDisabledBorder = styles.buttonDisabledBorder;
|
||||
|
||||
this.applyStyles();
|
||||
}
|
||||
|
||||
/**
|
||||
// {{SQL CARBON EDIT}} -- removed 'private' access modifier @todo anthonydresser 4/12/19 things needs investigation whether we need this
|
||||
applyStyles(): void {
|
||||
if (this._element) {
|
||||
@@ -170,6 +198,49 @@ export class Button extends Disposable {
|
||||
this._element.style.borderColor = border;
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
// {{SQL CARBON EDIT}} - custom applyStyles
|
||||
applyStyles(): void {
|
||||
if (this._element) {
|
||||
let background, foreground, border, fontWeight, fontSize;
|
||||
if (this.hasIcon) {
|
||||
background = border = 'transparent';
|
||||
foreground = this.buttonSecondaryForeground;
|
||||
fontWeight = fontSize = 'inherit';
|
||||
} else {
|
||||
if (this.enabled) {
|
||||
if (this.options.secondary) {
|
||||
foreground = this.buttonSecondaryForeground ? this.buttonSecondaryForeground.toString() : '';
|
||||
background = this.buttonSecondaryBackground ? this.buttonSecondaryBackground.toString() : '';
|
||||
border = this.buttonSecondaryBorder ? this.buttonSecondaryBorder.toString() : '';
|
||||
} else {
|
||||
foreground = this.buttonForeground ? this.buttonForeground.toString() : '';
|
||||
background = this.buttonBackground ? this.buttonBackground.toString() : '';
|
||||
border = this.buttonBorder ? this.buttonBorder.toString() : '';
|
||||
}
|
||||
}
|
||||
else {
|
||||
foreground = this.buttonDisabledForeground;
|
||||
background = this.buttonDisabledBackground;
|
||||
border = this.buttonDisabledBorder;
|
||||
}
|
||||
fontWeight = '600';
|
||||
fontSize = '12px';
|
||||
}
|
||||
|
||||
this._element.style.color = foreground;
|
||||
this._element.style.backgroundColor = background;
|
||||
this._element.style.borderWidth = border ? '1px' : '';
|
||||
this._element.style.borderStyle = border ? 'solid' : '';
|
||||
this._element.style.borderColor = border;
|
||||
this._element.style.opacity = this.hasIcon ? '' : '1';
|
||||
this._element.style.fontWeight = fontWeight;
|
||||
this._element.style.fontSize = fontSize;
|
||||
this._element.style.borderRadius = '2px';
|
||||
}
|
||||
}
|
||||
// {{SQL CARBON EDIT}} - end custom applyStyles
|
||||
|
||||
get element(): HTMLElement {
|
||||
return this._element;
|
||||
@@ -192,7 +263,9 @@ export class Button extends Disposable {
|
||||
|
||||
// {{SQL CARBON EDIT}}
|
||||
set icon(iconClassName: string) {
|
||||
this.hasIcon = iconClassName !== '';
|
||||
this._element.classList.add(...iconClassName.split(' '));
|
||||
this.applyStyles();
|
||||
}
|
||||
|
||||
set enabled(value: boolean) {
|
||||
@@ -205,6 +278,7 @@ export class Button extends Disposable {
|
||||
this._element.setAttribute('aria-disabled', String(true));
|
||||
removeTabIndexAndUpdateFocus(this._element);
|
||||
}
|
||||
this.applyStyles(); // {{SQL CARBON EDIT}}
|
||||
}
|
||||
|
||||
get enabled() {
|
||||
|
||||
@@ -227,13 +227,23 @@ export const simpleCheckboxBackground = registerColor('checkbox.background', { d
|
||||
export const simpleCheckboxForeground = registerColor('checkbox.foreground', { dark: selectForeground, light: selectForeground, hc: selectForeground }, nls.localize('checkbox.foreground', "Foreground color of checkbox widget."));
|
||||
export const simpleCheckboxBorder = registerColor('checkbox.border', { dark: selectBorder, light: selectBorder, hc: selectBorder }, nls.localize('checkbox.border', "Border color of checkbox widget."));
|
||||
|
||||
export const buttonForeground = registerColor('button.foreground', { dark: Color.white, light: Color.white, hc: Color.white }, nls.localize('buttonForeground', "Button foreground color."));
|
||||
export const buttonBackground = registerColor('button.background', { dark: '#0078D4', light: '#007ACC', hc: '#0078D4' }, nls.localize('buttonBackground', "Button background color."));
|
||||
export const buttonHoverBackground = registerColor('button.hoverBackground', { dark: lighten(buttonBackground, 0.2), light: darken(buttonBackground, 0.2), hc: null }, nls.localize('buttonHoverBackground', "Button background color when hovering."));
|
||||
// {{SQL CARBON EDIT}} - ADS custom button styles
|
||||
// Existing VSCode button colors, reuse the color ids with modified color values
|
||||
export const buttonForeground = registerColor('button.foreground', { dark: '#111111', light: Color.white, hc: Color.white }, nls.localize('buttonForeground', "Button foreground color."));
|
||||
export const buttonBackground = registerColor('button.background', { dark: '#4894FE', light: '#0078D4', hc: null }, nls.localize('buttonBackground', "Button background color."));
|
||||
export const buttonHoverBackground = registerColor('button.hoverBackground', { dark: '#6CA9FE', light: '#106EBE', hc: null }, nls.localize('buttonHoverBackground', "Button background color when hovering."));
|
||||
|
||||
export const buttonSecondaryForeground = registerColor('button.secondaryForeground', { dark: Color.white, light: Color.white, hc: Color.white }, nls.localize('buttonSecondaryForeground', "Secondary button foreground color."));
|
||||
export const buttonSecondaryBackground = registerColor('button.secondaryBackground', { dark: '#3A3D41', light: '#5F6A79', hc: null }, nls.localize('buttonSecondaryBackground', "Secondary button background color."));
|
||||
export const buttonSecondaryHoverBackground = registerColor('button.secondaryHoverBackground', { dark: lighten(buttonSecondaryBackground, 0.2), light: darken(buttonSecondaryBackground, 0.2), hc: null }, nls.localize('buttonSecondaryHoverBackground', "Secondary button background color when hovering."));
|
||||
export const buttonSecondaryForeground = registerColor('button.secondaryForeground', { dark: '#4894FE', light: '#323130', hc: Color.white }, nls.localize('buttonSecondaryForeground', "Secondary button foreground color."));
|
||||
export const buttonSecondaryBackground = registerColor('button.secondaryBackground', { dark: '#212121', light: Color.white, hc: null }, nls.localize('buttonSecondaryBackground', "Secondary button background color."));
|
||||
export const buttonSecondaryHoverBackground = registerColor('button.secondaryHoverBackground', { dark: new Color(new RGBA(127, 127, 127, 0.1)), light: '#F3F2F1', hc: null }, nls.localize('buttonSecondaryHoverBackground', "Secondary button background color when hovering."));
|
||||
|
||||
// new button colors introduced by ADS
|
||||
export const buttonBorder = registerColor('button.border', { dark: '#4894FE', light: '#0078D4', hc: contrastBorder }, nls.localize('button.border', "Primary button border color."));
|
||||
export const buttonSecondaryBorder = registerColor('button.secondaryBorder', { dark: '#4894FE', light: '#8A8886', hc: contrastBorder }, nls.localize('button.secondaryBorder', "Secondary button border color."));
|
||||
export const buttonDisabledBorder = registerColor('button.disabledBorder', { dark: new Color(new RGBA(127, 127, 127, 0.1)), light: '#F3F2F1', hc: '#00FF00' }, nls.localize('button.secondaryBorder', "Secondary button border color."));
|
||||
export const buttonDisabledForeground = registerColor('button.disabledForeground', { dark: new Color(new RGBA(127, 127, 127, 0.7)), light: '#A19F9D', hc: '#00FF00' }, nls.localize('button.disabledForeground', "Disabled button foreground color."));
|
||||
export const buttonDisabledBackground = registerColor('button.disabledBackground', { dark: new Color(new RGBA(127, 127, 127, 0.1)), light: '#F3F2F1', hc: Color.black }, nls.localize('button.disabledBackground', "Disablbed button background color."));
|
||||
// {{SQL CARBON EDIT}} - end of ADS custom button styles
|
||||
|
||||
export const badgeBackground = registerColor('badge.background', { dark: '#4D4D4D', light: '#C4C4C4', hc: Color.black }, nls.localize('badgeBackground', "Badge background color. Badges are small information labels, e.g. for search results count."));
|
||||
export const badgeForeground = registerColor('badge.foreground', { dark: Color.white, light: '#333', hc: Color.white }, nls.localize('badgeForeground', "Badge foreground color. Badges are small information labels, e.g. for search results count."));
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
|
||||
import { IColorTheme, IThemeService } from 'vs/platform/theme/common/themeService';
|
||||
import { focusBorder, inputBackground, inputForeground, ColorIdentifier, selectForeground, selectBackground, selectListBackground, selectBorder, inputBorder, foreground, editorBackground, contrastBorder, inputActiveOptionBorder, inputActiveOptionBackground, inputActiveOptionForeground, listFocusBackground, listFocusForeground, listActiveSelectionBackground, listActiveSelectionForeground, listInactiveSelectionForeground, listInactiveSelectionBackground, listInactiveFocusBackground, listHoverBackground, listHoverForeground, listDropBackground, pickerGroupBorder, pickerGroupForeground, widgetShadow, inputValidationInfoBorder, inputValidationInfoBackground, inputValidationWarningBorder, inputValidationWarningBackground, inputValidationErrorBorder, inputValidationErrorBackground, activeContrastBorder, buttonForeground, buttonBackground, buttonHoverBackground, ColorFunction, badgeBackground, badgeForeground, progressBarBackground, breadcrumbsForeground, breadcrumbsFocusForeground, breadcrumbsActiveSelectionForeground, breadcrumbsBackground, editorWidgetBorder, inputValidationInfoForeground, inputValidationWarningForeground, inputValidationErrorForeground, menuForeground, menuBackground, menuSelectionForeground, menuSelectionBackground, menuSelectionBorder, menuBorder, menuSeparatorBackground, darken, listFilterWidgetOutline, listFilterWidgetNoMatchesOutline, listFilterWidgetBackground, editorWidgetBackground, treeIndentGuidesStroke, editorWidgetForeground, simpleCheckboxBackground, simpleCheckboxBorder, simpleCheckboxForeground, ColorValue, resolveColorValue, textLinkForeground, problemsWarningIconForeground, problemsErrorIconForeground, problemsInfoIconForeground, buttonSecondaryBackground, buttonSecondaryForeground, buttonSecondaryHoverBackground } from 'vs/platform/theme/common/colorRegistry';
|
||||
import { focusBorder, inputBackground, inputForeground, ColorIdentifier, selectForeground, selectBackground, selectListBackground, selectBorder, inputBorder, foreground, editorBackground, contrastBorder, inputActiveOptionBorder, inputActiveOptionBackground, inputActiveOptionForeground, listFocusBackground, listFocusForeground, listActiveSelectionBackground, listActiveSelectionForeground, listInactiveSelectionForeground, listInactiveSelectionBackground, listInactiveFocusBackground, listHoverBackground, listHoverForeground, listDropBackground, pickerGroupBorder, pickerGroupForeground, widgetShadow, inputValidationInfoBorder, inputValidationInfoBackground, inputValidationWarningBorder, inputValidationWarningBackground, inputValidationErrorBorder, inputValidationErrorBackground, activeContrastBorder, buttonForeground, buttonBackground, buttonHoverBackground, ColorFunction, badgeBackground, badgeForeground, progressBarBackground, breadcrumbsForeground, breadcrumbsFocusForeground, breadcrumbsActiveSelectionForeground, breadcrumbsBackground, editorWidgetBorder, inputValidationInfoForeground, inputValidationWarningForeground, inputValidationErrorForeground, menuForeground, menuBackground, menuSelectionForeground, menuSelectionBackground, menuSelectionBorder, menuBorder, menuSeparatorBackground, darken, listFilterWidgetOutline, listFilterWidgetNoMatchesOutline, listFilterWidgetBackground, editorWidgetBackground, treeIndentGuidesStroke, editorWidgetForeground, simpleCheckboxBackground, simpleCheckboxBorder, simpleCheckboxForeground, ColorValue, resolveColorValue, textLinkForeground, problemsWarningIconForeground, problemsErrorIconForeground, problemsInfoIconForeground, buttonSecondaryBackground, buttonSecondaryForeground, buttonSecondaryHoverBackground, buttonBorder, buttonSecondaryBorder, buttonDisabledBorder, buttonDisabledBackground, buttonDisabledForeground } from 'vs/platform/theme/common/colorRegistry';
|
||||
import { IDisposable } from 'vs/base/common/lifecycle';
|
||||
import { Color } from 'vs/base/common/color';
|
||||
import { IThemable, styleFn } from 'vs/base/common/styler';
|
||||
@@ -265,6 +265,12 @@ export interface IButtonStyleOverrides extends IStyleOverrides {
|
||||
buttonSecondaryForeground?: ColorIdentifier;
|
||||
buttonSecondaryBackground?: ColorIdentifier;
|
||||
buttonSecondaryHoverBackground?: ColorIdentifier;
|
||||
// {{SQL CARBON EDIT}}
|
||||
buttonBorder?: ColorIdentifier;
|
||||
buttonSecondaryBorder?: ColorIdentifier;
|
||||
buttonDisabledForeground?: ColorIdentifier;
|
||||
buttonDisabledBackground?: ColorIdentifier;
|
||||
buttonDisabledBorder?: ColorIdentifier;
|
||||
}
|
||||
|
||||
export function attachButtonStyler(widget: IThemable, themeService: IThemeService, style?: IButtonStyleOverrides): IDisposable {
|
||||
@@ -275,7 +281,12 @@ export function attachButtonStyler(widget: IThemable, themeService: IThemeServic
|
||||
buttonSecondaryForeground: (style && style.buttonSecondaryForeground) || buttonSecondaryForeground,
|
||||
buttonSecondaryBackground: (style && style.buttonSecondaryBackground) || buttonSecondaryBackground,
|
||||
buttonSecondaryHoverBackground: (style && style.buttonSecondaryHoverBackground) || buttonSecondaryHoverBackground,
|
||||
buttonBorder: contrastBorder
|
||||
// {{SQL CARBON EDIT}}
|
||||
buttonBorder: (style && style.buttonBorder) || buttonBorder,
|
||||
buttonSecondaryBorder: (style && style.buttonSecondaryBorder) || buttonSecondaryBorder,
|
||||
buttonDisabledBorder: (style && style.buttonDisabledBorder) || buttonDisabledBorder,
|
||||
buttonDisabledBackground: (style && style.buttonDisabledBackground) || buttonDisabledBackground,
|
||||
buttonDisabledForeground: (style && style.buttonDisabledForeground) || buttonDisabledForeground
|
||||
} as IButtonStyleOverrides, widget);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user