fix a few issues (#14378)

This commit is contained in:
Alan Ren
2021-02-21 17:58:39 -08:00
committed by GitHub
parent 6ca777ad31
commit 289dd3ba65
2 changed files with 39 additions and 8 deletions

View File

@@ -99,6 +99,22 @@
white-space: nowrap;
width: 200px;
display: grid;
align-content: flex-start;
}
.slick-header-menu .filter .filter-option {
display: flex;
align-items: center;
}
.slick-header-menu .filter-menu-button-container {
display: flex;
flex-direction: row;
width: 100%;
}
.slick-header-menu .filter-menu-button {
flex: 0 0 auto;
}
.monaco-table label {

View File

@@ -21,6 +21,12 @@ export interface CommandEventArgs<T extends Slick.SlickData> {
command: string
}
export type CellValueGetter = (data: any) => string;
function GetCellValue(data: any): string {
return data?.toString();
}
const ShowFilterText: string = localize('headerFilter.showFilter', "Show Filter");
export class HeaderFilter<T extends Slick.SlickData> {
@@ -41,6 +47,9 @@ export class HeaderFilter<T extends Slick.SlickData> {
private disposableStore = new DisposableStore();
constructor(private cellValueExtrator: CellValueGetter = GetCellValue) {
}
public init(grid: Slick.Grid<T>): void {
this.grid = grid;
this.handler.subscribe(this.grid.onHeaderCellRendered, (e: Event, args: Slick.OnHeaderCellRenderedEventArgs<T>) => this.handleHeaderCellRendered(e, args))
@@ -95,7 +104,9 @@ export class HeaderFilter<T extends Slick.SlickData> {
.addClass('slick-header-menubutton')
.data('column', column);
$el.click(() => {
$el.click((e: JQuery.Event) => {
e.stopPropagation();
e.preventDefault();
this.showFilter($el[0]);
});
$el.appendTo(args.node);
@@ -197,7 +208,7 @@ export class HeaderFilter<T extends Slick.SlickData> {
for (let i = 0; i < filterItems.length; i++) {
const filtered = this.workingFilters.some(x => x === filterItems[i]);
if (filterItems[i] && filterItems[i].indexOf('Error:') < 0) {
filterOptions += '<label><input type="checkbox" value="' + i + '"'
filterOptions += '<label class="filter-option"><input type="checkbox" value="' + i + '"'
+ (filtered ? ' checked="checked"' : '')
+ '/>' + escape(filterItems[i]) + '</label>';
}
@@ -206,7 +217,11 @@ export class HeaderFilter<T extends Slick.SlickData> {
.append(jQuery(filterOptions))
.appendTo(this.$menu);
this.okButton = new Button(this.$menu.get(0));
const $buttonContainer = jQuery('<div class="filter-menu-button-container">').appendTo(this.$menu);
const $okButtonDiv = jQuery('<div class="filter-menu-button">').appendTo($buttonContainer);
const $clearButtonDiv = jQuery('<div class="filter-menu-button">').appendTo($buttonContainer);
const $cancelButtonDiv = jQuery('<div class="filter-menu-button">').appendTo($buttonContainer);
this.okButton = new Button($okButtonDiv.get(0));
this.okButton.label = localize('headerFilter.ok', "OK");
this.okButton.title = localize('headerFilter.ok', "OK");
this.okButton.element.id = 'filter-ok-button';
@@ -217,7 +232,7 @@ export class HeaderFilter<T extends Slick.SlickData> {
this.handleApply(ev, this.columnDef);
});
this.clearButton = new Button(this.$menu.get(0), { secondary: true });
this.clearButton = new Button($clearButtonDiv.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';
@@ -228,7 +243,7 @@ export class HeaderFilter<T extends Slick.SlickData> {
this.handleApply(ev, this.columnDef);
});
this.cancelButton = new Button(this.$menu.get(0), { secondary: true });
this.cancelButton = new Button($cancelButtonDiv.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';
@@ -249,8 +264,8 @@ export class HeaderFilter<T extends Slick.SlickData> {
if (menutop + offset.top > jQuery(window).height()) {
menutop -= (this.$menu.height() + jQuery(target).height() + 8);
}
this.$menu.css('top', menutop)
.css('left', (left > 0 ? left : 0));
this.$menu.css('top', menutop).css('left', (left > 0 ? left : 0));
this.okButton.focus();
}
public style(styles: IButtonStyles): void {
@@ -337,7 +352,7 @@ export class HeaderFilter<T extends Slick.SlickData> {
dataView.getItems().forEach(items => {
const value = items[column.field!];
const valueArr = value instanceof Array ? value : [value];
valueArr.forEach(v => seen.add(v));
valueArr.forEach(v => seen.add(this.cellValueExtrator(v)));
});
return Array.from(seen);