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
2021-02-08 15:12:54 -08:00
committed by GitHub
parent 7a0ac71b98
commit a3cddbc8aa
67 changed files with 384 additions and 251 deletions

View File

@@ -11,19 +11,16 @@ import {
import * as azdata from 'azdata';
import { ComponentWithIconBase } from 'sql/workbench/browser/modelComponents/componentWithIconBase';
import { attachButtonStyler } from 'sql/platform/theme/common/styler';
import { SIDE_BAR_BACKGROUND, SIDE_BAR_TITLE_FOREGROUND } from 'vs/workbench/common/theme';
import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService';
import { focusBorder, foreground } from 'vs/platform/theme/common/colorRegistry';
import { Button } from 'sql/base/browser/ui/button/button';
import { InfoButton } from 'sql/base/browser/ui/infoButton/infoButton';
import { Color } from 'vs/base/common/color';
import { IComponentDescriptor, IComponent, IModelStore, ComponentEventType } from 'sql/platform/dashboard/browser/interfaces';
import { convertSize } from 'sql/base/browser/dom';
import { createIconCssClass } from 'sql/workbench/browser/modelComponents/iconUtils';
import { ILogService } from 'vs/platform/log/common/log';
import { IDisposable } from 'vs/base/common/lifecycle';
import { attachButtonStyler } from 'vs/platform/theme/common/styler';
@Component({
selector: 'modelview-button',
@@ -78,7 +75,7 @@ export default class ButtonComponent extends ComponentWithIconBase<azdata.Button
this._currentButtonType = this.buttonType;
const elementToRemove = this._button?.element;
if (this._inputContainer) {
this._button = new Button(this._inputContainer.nativeElement);
this._button = new Button(this._inputContainer.nativeElement, { secondary: this.secondary });
} else if (this._infoButtonContainer) {
this._button = new InfoButton(this._infoButtonContainer.nativeElement);
}
@@ -192,22 +189,7 @@ export default class ButtonComponent extends ComponentWithIconBase<azdata.Button
*/
private updateStyler(): void {
this._buttonStyler?.dispose();
if (this.iconPath) {
this._buttonStyler = this._register(attachButtonStyler(this._button, this.themeService, {
buttonBackground: Color.transparent.toString(),
buttonHoverBackground: Color.transparent.toString(),
buttonFocusOutline: focusBorder,
buttonForeground: foreground
}));
} else {
this._buttonStyler = this._register(attachButtonStyler(this._button, this.themeService, {
buttonBackground: SIDE_BAR_BACKGROUND,
buttonHoverBackground: SIDE_BAR_BACKGROUND,
buttonForeground: SIDE_BAR_TITLE_FOREGROUND
}));
}
this._buttonStyler = this._register(attachButtonStyler(this._button, this.themeService));
}
protected get defaultIconHeight(): number {
@@ -267,4 +249,8 @@ export default class ButtonComponent extends ComponentWithIconBase<azdata.Button
private setFileProperties(properties: azdata.ButtonProperties, isFile: boolean): void {
properties.isFile = isFile;
}
private get secondary(): boolean {
return this.getPropertyOrDefault<boolean>((props) => props.secondary, false);
}
}