Clean up button component disposables (#14011)

* Clean up button component disposables

* consolidate logic
This commit is contained in:
Charles Gagnon
2021-01-21 12:08:16 -08:00
committed by GitHub
parent a96caf82c3
commit 07d798c949
2 changed files with 34 additions and 13 deletions

View File

@@ -283,12 +283,14 @@ export function attachEditableDropdownStyler(widget: IThemable, themeService: IT
}, widget); }, widget);
} }
export function attachButtonStyler(widget: IThemable, themeService: IThemeService, style?: { type ButtonStyle = {
buttonForeground?: cr.ColorIdentifier, buttonForeground?: cr.ColorIdentifier,
buttonBackground?: cr.ColorIdentifier, buttonBackground?: cr.ColorIdentifier,
buttonHoverBackground?: cr.ColorIdentifier, buttonHoverBackground?: cr.ColorIdentifier,
buttonFocusOutline?: cr.ColorIdentifier buttonFocusOutline?: cr.ColorIdentifier
}): IDisposable { };
export function attachButtonStyler(widget: IThemable, themeService: IThemeService, style?: ButtonStyle): IDisposable {
return attachStyler(themeService, { return attachStyler(themeService, {
buttonForeground: (style && style.buttonForeground) || cr.buttonForeground, buttonForeground: (style && style.buttonForeground) || cr.buttonForeground,
buttonBackground: (style && style.buttonBackground) || cr.buttonBackground, buttonBackground: (style && style.buttonBackground) || cr.buttonBackground,

View File

@@ -23,6 +23,7 @@ import { IComponentDescriptor, IComponent, IModelStore, ComponentEventType } fro
import { convertSize } from 'sql/base/browser/dom'; import { convertSize } from 'sql/base/browser/dom';
import { createIconCssClass } from 'sql/workbench/browser/modelComponents/iconUtils'; import { createIconCssClass } from 'sql/workbench/browser/modelComponents/iconUtils';
import { ILogService } from 'vs/platform/log/common/log'; import { ILogService } from 'vs/platform/log/common/log';
import { IDisposable } from 'vs/base/common/lifecycle';
@Component({ @Component({
selector: 'modelview-button', selector: 'modelview-button',
@@ -40,13 +41,13 @@ import { ILogService } from 'vs/platform/log/common/log';
</ng-template> </ng-template>
` `
}) })
export default class ButtonComponent extends ComponentWithIconBase<azdata.ButtonProperties> implements IComponent, OnDestroy { export default class ButtonComponent extends ComponentWithIconBase<azdata.ButtonProperties> implements IComponent, OnDestroy {
@Input() descriptor: IComponentDescriptor; @Input() descriptor: IComponentDescriptor;
@Input() modelStore: IModelStore; @Input() modelStore: IModelStore;
private _button: Button | InfoButton; private _button: Button | InfoButton;
public fileType: string = '.sql'; public fileType: string = '.sql';
private _currentButtonType?: azdata.ButtonType = undefined; private _currentButtonType?: azdata.ButtonType = undefined;
private _buttonStyler: IDisposable | undefined = undefined;
@ViewChild('input', { read: ElementRef }) private _inputContainer: ElementRef; @ViewChild('input', { read: ElementRef }) private _inputContainer: ElementRef;
@ViewChild('fileInput', { read: ElementRef }) private _fileInputContainer: ElementRef; @ViewChild('fileInput', { read: ElementRef }) private _fileInputContainer: ElementRef;
@@ -89,9 +90,7 @@ export default class ButtonComponent extends ComponentWithIconBase<azdata.Button
} }
this._register(this._button); this._register(this._button);
this._register(attachButtonStyler(this._button, this.themeService, { this.updateStyler();
buttonBackground: SIDE_BAR_BACKGROUND, buttonHoverBackground: SIDE_BAR_BACKGROUND, buttonForeground: SIDE_BAR_TITLE_FOREGROUND
}));
this._register(this._button.onDidClick(e => { this._register(this._button.onDidClick(e => {
if (this._fileInputContainer) { if (this._fileInputContainer) {
const self = this; const self = this;
@@ -119,6 +118,7 @@ export default class ButtonComponent extends ComponentWithIconBase<azdata.Button
} }
})); }));
} }
public setProperties(properties: { [key: string]: any; }): void { public setProperties(properties: { [key: string]: any; }): void {
super.setProperties(properties); super.setProperties(properties);
if (this._currentButtonType !== this.buttonType) { if (this._currentButtonType !== this.buttonType) {
@@ -178,19 +178,38 @@ export default class ButtonComponent extends ComponentWithIconBase<azdata.Button
if (!this._iconClass) { if (!this._iconClass) {
super.updateIcon(); super.updateIcon();
this._button.icon = this._iconClass + ' icon'; this._button.icon = this._iconClass + ' icon';
// Styling for icon button this.updateStyler();
this._register(attachButtonStyler(this._button, this.themeService, {
buttonBackground: Color.transparent.toString(),
buttonHoverBackground: Color.transparent.toString(),
buttonFocusOutline: focusBorder,
buttonForeground: foreground
}));
} else { } else {
super.updateIcon(); super.updateIcon();
} }
} else {
this.updateStyler();
} }
} }
/**
* Updates the styler for this button based on whether it has an icon or not
*/
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
}));
}
}
protected get defaultIconHeight(): number { protected get defaultIconHeight(): number {
return 15; return 15;
} }