ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-02-16 10:58:30 -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>[]; columns?: Slick.Column<T>[];
sorter?: ITableSorter<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; text-overflow: ellipsis;
white-space: nowrap; 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 { .slick-header-menubutton {
background-position: center center; background-position: center center;
background-repeat: no-repeat; background-repeat: no-repeat;
bottom: 0;
cursor: pointer; cursor: pointer;
display: inline-block; display: inline-block;
position: absolute; width: 16px;
right: 10px;
top: 0;
width: 18px;
background-image: url('down.svg'); background-image: url('down.svg');
flex: 0 0 auto;
margin-right: 2px;
background-color: transparent;
border: 0px;
padding: 0px;
} }
.vs-dark .slick-header-menubutton, .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 { localize } from 'vs/nls';
import { Button } from 'sql/base/browser/ui/button/button'; 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 { escape } from 'sql/base/common/strings';
import { addDisposableListener } from 'vs/base/browser/dom'; import { addDisposableListener } from 'vs/base/browser/dom';
import { DisposableStore } from 'vs/base/common/lifecycle'; import { DisposableStore } from 'vs/base/common/lifecycle';
@@ -20,6 +21,8 @@ export interface CommandEventArgs<T extends Slick.SlickData> {
command: string command: string
} }
const ShowFilterText: string = localize('headerFilter.showFilter', "Show Filter");
export class HeaderFilter<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> }>();
@@ -84,25 +87,18 @@ export class HeaderFilter<T extends Slick.SlickData> {
if (column.id === '_detail_selector') { if (column.id === '_detail_selector') {
return; return;
} }
if ((<any>column).filterable === false) { if ((<FilterableColumn<T>>column).filterable === false) {
return; 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') .addClass('slick-header-menubutton')
.data('column', column); .data('column', column);
$el.bind('click', (e: KeyboardEvent) => { $el.click(() => {
this.showFilter(e); this.showFilter($el[0]);
e.preventDefault(); });
e.stopPropagation(); $el.appendTo(args.node);
}).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);
} }
private handleBeforeHeaderCellDestroy(e: Event, args: Slick.OnBeforeHeaderCellDestroyEventArgs<T>) { private handleBeforeHeaderCellDestroy(e: Event, args: Slick.OnBeforeHeaderCellDestroyEventArgs<T>) {
@@ -165,8 +161,8 @@ export class HeaderFilter<T extends Slick.SlickData> {
}); });
} }
private showFilter(e: KeyboardEvent) { private showFilter(element: HTMLElement) {
const target = withNullAsUndefined(e.target); const target = withNullAsUndefined(element);
const $menuButton = jQuery(target); const $menuButton = jQuery(target);
this.columnDef = $menuButton.data('column'); this.columnDef = $menuButton.data('column');

4
src/sql/workbench/browser/editor/resourceViewer/resourceViewerInput.ts
View File

@@ -12,12 +12,12 @@ import { DataGridProvider, IDataGridProviderService } from 'sql/workbench/servic
import { onUnexpectedError } from 'vs/base/common/errors'; import { onUnexpectedError } from 'vs/base/common/errors';
import { ButtonColumn } from 'sql/base/browser/ui/table/plugins/buttonColumn.plugin'; import { ButtonColumn } from 'sql/base/browser/ui/table/plugins/buttonColumn.plugin';
import { getDataGridFormatter } from 'sql/workbench/services/dataGridProvider/browser/dataGridProviderUtils'; import { getDataGridFormatter } from 'sql/workbench/services/dataGridProvider/browser/dataGridProviderUtils';
import { FilterableColumn } from 'sql/base/browser/ui/table/interfaces';
export interface ColumnDefinition extends Slick.Column<azdata.DataGridItem> { export interface ColumnDefinition extends FilterableColumn<azdata.DataGridItem> {
name: string; name: string;
// actions is a special internal type for the More Actions column // actions is a special internal type for the More Actions column
type: azdata.DataGridColumnType | 'actions'; type: azdata.DataGridColumnType | 'actions';
filterable?: boolean;
} }
export class ResourceViewerInput extends EditorInput { export class ResourceViewerInput extends EditorInput {