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

@@ -4,11 +4,9 @@
*--------------------------------------------------------------------------------------------*/
import { Button as vsButton, IButtonOptions, IButtonStyles as vsIButtonStyles } from 'vs/base/browser/ui/button/button';
import * as DOM from 'vs/base/browser/dom';
import { Color } from 'vs/base/common/color';
export interface IButtonStyles extends vsIButtonStyles {
buttonFocusOutline?: Color;
}
export class Button extends vsButton {
@@ -16,32 +14,6 @@ export class Button extends vsButton {
constructor(container: HTMLElement, options?: IButtonOptions) {
super(container, options);
this._register(DOM.addDisposableListener(this.element, DOM.EventType.FOCUS, () => {
this.element.style.outlineColor = this.buttonFocusOutline ? this.buttonFocusOutline.toString() : '';
this.element.style.outlineWidth = '1px';
}));
this._register(DOM.addDisposableListener(this.element, DOM.EventType.MOUSE_DOWN, e => {
if (!DOM.hasClass(this.element, 'disabled') && e.button === 0) {
this.element.classList.add('active');
}
}));
this._register(DOM.addDisposableListener(this.element, DOM.EventType.MOUSE_UP, e => {
DOM.EventHelper.stop(e);
this.element.classList.remove('active');
}));
this._register(DOM.addDisposableListener(this.element, DOM.EventType.MOUSE_LEAVE, e => {
DOM.EventHelper.stop(e);
this.element.classList.remove('active');
}));
}
public style(styles: IButtonStyles): void {
super.style(styles);
this.buttonFocusOutline = styles.buttonFocusOutline;
}
public set title(value: string) {

View File

@@ -22,7 +22,7 @@ export interface CommandEventArgs<T extends Slick.SlickData> {
export class HeaderFilter<T extends Slick.SlickData> {
public onFilterApplied = new Slick.Event<{ grid: Slick.Grid<T>, column: IExtendedColumn<T>}>();
public onFilterApplied = new Slick.Event<{ grid: Slick.Grid<T>, column: IExtendedColumn<T> }>();
public onCommand = new Slick.Event<CommandEventArgs<T>>();
private grid!: Slick.Grid<T>;
@@ -221,7 +221,7 @@ export class HeaderFilter<T extends Slick.SlickData> {
this.handleApply(ev, this.columnDef);
});
this.clearButton = new Button(this.$menu.get(0));
this.clearButton = new Button(this.$menu.get(0), { secondary: true });
this.clearButton.label = localize('headerFilter.clear', "Clear");
this.clearButton.title = localize('headerFilter.clear', "Clear");
this.clearButton.element.id = 'filter-clear-button';
@@ -232,7 +232,7 @@ export class HeaderFilter<T extends Slick.SlickData> {
this.handleApply(ev, this.columnDef);
});
this.cancelButton = new Button(this.$menu.get(0));
this.cancelButton = new Button(this.$menu.get(0), { secondary: true });
this.cancelButton.label = localize('headerFilter.cancel', "Cancel");
this.cancelButton.title = localize('headerFilter.cancel', "Cancel");
this.cancelButton.element.id = 'filter-cancel-button';