ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-01-21 09:35:38 -05:00
Code Issues Packages Projects Releases Wiki Activity

fix the header filter plugin issue (#14333)

Browse Source
This commit is contained in:
Alan Ren
2021-02-18 00:10:41 -08:00
committed by GitHub
parent 87a9ae0975
commit 30f55be67d
5 changed files with 36 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/sql/base/browser/ui/table/interfaces.ts
View File

@@ -29,3 +29,7 @@ export interface ITableConfiguration<T> {
columns?: Slick.Column<T>[];
sorter?: ITableSorter<T>;
}
export interface FilterableColumn<T> extends Slick.Column<T> {
filterable?: boolean;
}

12
src/sql/base/browser/ui/table/media/slick.grid.css
View File

@@ -186,3 +186,15 @@
text-overflow: ellipsis;
white-space: nowrap;
}
.slick-header-column.slick-header-with-filter {
display: flex;
}
.slick-header-with-filter .slick-column-name {
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
flex: 1 1 auto;
}

11
src/sql/base/browser/ui/table/media/table.css
View File

@@ -37,14 +37,15 @@
.slick-header-menubutton {
background-position: center center;
background-repeat: no-repeat;
bottom: 0;
cursor: pointer;
display: inline-block;
position: absolute;
right: 10px;
top: 0;
width: 18px;
width: 16px;
background-image: url('down.svg');
flex: 0 0 auto;
margin-right: 2px;
background-color: transparent;
border: 0px;
padding: 0px;
}
.vs-dark .slick-header-menubutton,

28
src/sql/base/browser/ui/table/plugins/headerFilter.plugin.ts
View File

@@ -5,6 +5,7 @@ import { IButtonStyles } from 'vs/base/browser/ui/button/button';
import { localize } from 'vs/nls';
import { Button } from 'sql/base/browser/ui/button/button';
import { FilterableColumn } from 'sql/base/browser/ui/table/interfaces';
import { escape } from 'sql/base/common/strings';
import { addDisposableListener } from 'vs/base/browser/dom';
import { DisposableStore } from 'vs/base/common/lifecycle';
@@ -20,6 +21,8 @@ export interface CommandEventArgs<T extends Slick.SlickData> {
command: string
}
const ShowFilterText: string = localize('headerFilter.showFilter', "Show Filter");
export class HeaderFilter<T extends Slick.SlickData> {
public onFilterApplied = new Slick.Event<{ grid: Slick.Grid<T>, column: IExtendedColumn<T> }>();
@@ -84,25 +87,18 @@ export class HeaderFilter<T extends Slick.SlickData> {
if (column.id === '_detail_selector') {
return;
}
if ((<any>column).filterable === false) {
if ((<FilterableColumn<T>>column).filterable === false) {
return;
}
const $el = jQuery('<div tabIndex="0"></div>')
args.node.classList.add('slick-header-with-filter');
const $el = jQuery(`<button aria-label="${ShowFilterText}" title="${ShowFilterText}"></button>`)
.addClass('slick-header-menubutton')
.data('column', column);
$el.bind('click', (e: KeyboardEvent) => {
this.showFilter(e);
e.preventDefault();
e.stopPropagation();
}).appendTo(args.node);
$el.bind('keydown', (e: KeyboardEvent) => {
if (e.key === 'Enter' || e.keyCode === 13) {
this.showFilter(e);
e.preventDefault();
e.stopPropagation();
}
}).appendTo(args.node);
$el.click(() => {
this.showFilter($el[0]);
});
$el.appendTo(args.node);
}
private handleBeforeHeaderCellDestroy(e: Event, args: Slick.OnBeforeHeaderCellDestroyEventArgs<T>) {
@@ -165,8 +161,8 @@ export class HeaderFilter<T extends Slick.SlickData> {
});
}
private showFilter(e: KeyboardEvent) {
const target = withNullAsUndefined(e.target);
private showFilter(element: HTMLElement) {
const target = withNullAsUndefined(element);
const $menuButton = jQuery(target);
this.columnDef = $menuButton.data('column');