fix the icon sizing issue (#13522)

This commit is contained in:
Alan Ren
2020-11-23 13:02:52 -08:00
committed by GitHub
parent 21ddf30a7b
commit 6e0a4f27de
4 changed files with 30 additions and 14 deletions

View File

@@ -187,6 +187,14 @@ export default class ButtonComponent extends ComponentWithIconBase<azdata.Button
}
}
protected get defaultIconHeight(): number {
return 15;
}
protected get defaultIconWidth(): number {
return 15;
}
// CSS-bound properties
private get label(): string {

View File

@@ -42,12 +42,20 @@ export abstract class ComponentWithIconBase<T extends azdata.ComponentWithIconPr
}
}
protected get defaultIconWidth(): number {
return 50;
}
protected get defaultIconHeight(): number {
return 50;
}
public getIconWidth(): string {
return convertSize(this.iconWidth, '40px');
return convertSize(this.iconWidth, `${this.defaultIconWidth}px`);
}
public getIconHeight(): string {
return convertSize(this.iconHeight, '40px');
return convertSize(this.iconHeight, `${this.defaultIconHeight}px`);
}
public get iconPath(): string | URI | { light: string | URI; dark: string | URI } {
@@ -55,11 +63,11 @@ export abstract class ComponentWithIconBase<T extends azdata.ComponentWithIconPr
}
public get iconHeight(): number | string {
return this.getPropertyOrDefault<number | string>((props) => props.iconHeight, '50px');
return this.getPropertyOrDefault<number | string>((props) => props.iconHeight, this.defaultIconHeight);
}
public get iconWidth(): number | string {
return this.getPropertyOrDefault<number | string>((props) => props.iconWidth, '50px');
return this.getPropertyOrDefault<number | string>((props) => props.iconWidth, this.defaultIconWidth);
}
public get title(): string {

View File

@@ -51,17 +51,17 @@
}
.modelview-toolbar-container .modelview-toolbar-component modelview-button .monaco-text-button.icon {
padding-left: 19px;
background-size: 15px;
padding-left: 19px !important;
background-size: 15px !important;
margin-right: 0.3em;
}
/* Vertical button handling */
.modelview-toolbar-container.toolbar-vertical .modelview-toolbar-component modelview-button .monaco-text-button.icon {
padding: 20px 16px 20px 16px;
background-size: 20px;
padding: 20px 16px 20px 16px !important;
background-size: 20px !important;
margin-right: 0.3em;
background-position: 50% 50%;
background-position: 50% 50% !important;
}