Changing tree grid toggle icon color when the cell is selected (#20868)

* Changing toggle color when selected

* Using styles to support chevron coloring

* Adding escape to fix hygiene issues

* Fixing hygiene error
This commit is contained in:
Aasim Khan
2022-10-20 13:53:28 -07:00
committed by GitHub
parent d5bb8276ce
commit e6b36cec0f
2 changed files with 21 additions and 3 deletions

View File

@@ -30,8 +30,8 @@ function getDefaultOptions<T>(): Slick.GridOptions<T> {
}
export class Table<T extends Slick.SlickData> extends Widget implements IDisposable {
private styleElement: HTMLStyleElement;
private idPrefix: string;
protected styleElement: HTMLStyleElement;
protected idPrefix: string;
protected _grid: Slick.Grid<T>;
protected _columns: Slick.Column<T>[];

View File

@@ -5,7 +5,7 @@
import 'vs/css!./media/slick.grid';
import { FilterableColumn, ITableConfiguration } from 'sql/base/browser/ui/table/interfaces';
import { FilterableColumn, ITableConfiguration, ITableStyles } from 'sql/base/browser/ui/table/interfaces';
import { Table } from 'sql/base/browser/ui/table/table';
import { IDisposableDataProvider } from 'sql/base/common/dataProvider';
import { generateUuid } from 'vs/base/common/uuid';
@@ -14,6 +14,7 @@ import { AsyncDataProvider } from 'sql/base/browser/ui/table/asyncDataView';
import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
import { KeyCode } from 'vs/base/common/keyCodes';
import { createTreeGridExpandableColumnFormatter, textFormatter } from 'sql/base/browser/ui/table/formatters';
import { escape } from 'sql/base/common/strings';
function defaultTreeGridFilter<T extends Slick.SlickData>(data: T[], columns: FilterableColumn<T>[], cellValueGetter: CellValueGetter = defaultCellValueGetter): T[] {
let filteredData = defaultFilter(data, columns, cellValueGetter);
@@ -183,4 +184,21 @@ export class TreeGrid<T extends Slick.SlickData> extends Table<T> {
}
}
}
override style(styles: ITableStyles): void {
super.style(styles);
const content: string[] = [];
if (styles.listFocusAndSelectionForeground) {
content.push(`.monaco-table.${this.idPrefix}.focused .slick-row .selected.active .codicon.toggle { color: ${styles.listFocusAndSelectionForeground}; }`);
}
if (styles.listInactiveSelectionForeground) {
content.push(`.monaco-table.${this.idPrefix} .slick-row .selected.active .codicon.toggle { color: ${styles.listInactiveSelectionForeground}; }`);
}
if (content.length > 0) {
this.styleElement.innerText += escape('\n' + content.join('\n'));
}
}
}