redo the table styles (#23538)

This commit is contained in:
Alan Ren
2023-06-28 22:19:40 -07:00
committed by GitHub
parent 562a0ce595
commit dec81143bc
35 changed files with 137 additions and 262 deletions

View File

@@ -7,7 +7,6 @@ import 'vs/css!./media/insightsDialog';
import { Button } from 'sql/base/browser/ui/button/button';
import { IConnectionProfile } from 'sql/platform/connection/common/interfaces';
import { Modal } from 'sql/workbench/browser/modal/modal';
import { attachTableStyler } from 'sql/platform/theme/common/styler';
import { ConnectionProfile } from 'sql/platform/connection/common/connectionProfile';
import * as TelemetryKeys from 'sql/platform/telemetry/common/telemetryKeys';
import { IInsightsDialogModel, ListResource, IInsightDialogActionContext, insertValueRegex } from 'sql/workbench/services/insights/browser/insightsDialogService';
@@ -53,6 +52,7 @@ import { ITextResourcePropertiesService } from 'vs/editor/common/services/textRe
import { IAccessibilityService } from 'vs/platform/accessibility/common/accessibility';
import { IQuickInputService } from 'vs/platform/quickinput/common/quickInput';
import { IComponentContextService } from 'sql/workbench/services/componentContext/browser/componentContextService';
import { defaultTableStyles } from 'sql/platform/theme/browser/defaultStyles';
const labelDisplay = nls.localize("insights.item", "Item");
const valueDisplay = nls.localize("insights.value", "Value");
@@ -97,7 +97,7 @@ class InsightTableView extends ViewPane {
}
protected override renderBody(container: HTMLElement): void {
this._table = new Table(container, this._accessibilityService, this._quickInputService, {
this._table = new Table(container, this._accessibilityService, this._quickInputService, defaultTableStyles, {
columns: this.columns,
dataProvider: this.data
}, this.tableOptions);
@@ -305,9 +305,6 @@ export class InsightsDialogView extends Modal {
this._splitView.addView(topTableView, Sizing.Distribute);
this._splitView.addView(bottomTableView, Sizing.Distribute);
this._register(attachTableStyler(this._topTable, this._themeService));
this._register(attachTableStyler(this._bottomTable, this._themeService));
this._topTable.grid.onKeyDown.subscribe(e => {
let event = new StandardKeyboardEvent(<unknown>e as KeyboardEvent);
if (event.equals(KeyMod.Shift | KeyCode.Tab)) {

View File

@@ -9,7 +9,6 @@ import { textFormatter } from 'sql/base/browser/ui/table/formatters';
import { RowNumberColumn } from 'sql/base/browser/ui/table/plugins/rowNumberColumn.plugin';
import { escape } from 'sql/base/common/strings';
import { IDataResource, IDataResourceRow, rowHasColumnNameKeys } from 'sql/workbench/services/notebook/browser/sql/sqlSessionManager';
import { attachTableStyler } from 'sql/platform/theme/common/styler';
import { IThemeService } from 'vs/platform/theme/common/themeService';
import { MouseWheelSupport } from 'sql/base/browser/ui/table/plugins/mousewheelTableScroll.plugin';
import { AutoColumnSize } from 'sql/base/browser/ui/table/plugins/autoSizeColumns.plugin';
@@ -17,6 +16,7 @@ import { AdditionalKeyBindings } from 'sql/base/browser/ui/table/plugins/additio
import { RESULTS_GRID_DEFAULTS } from 'sql/workbench/common/constants';
import { IAccessibilityService } from 'vs/platform/accessibility/common/accessibility';
import { IQuickInputService } from 'vs/platform/quickinput/common/quickInput';
import { defaultTableStyles } from 'sql/platform/theme/browser/defaultStyles';
/**
* Render DataResource as a grid into a host node.
@@ -56,7 +56,7 @@ export function renderDataResource(
let transformedData = transformData(sourceObject.data, columnsTransformed);
tableResultsData.push(transformedData);
let detailTable = new Table(tableContainer, options.accessibilityService, options.quickInputService, {
let detailTable = new Table(tableContainer, options.accessibilityService, options.quickInputService, defaultTableStyles, {
dataProvider: tableResultsData, columns: columnsTransformed
}, {
rowHeight: RESULTS_GRID_DEFAULTS.rowHeight,
@@ -77,8 +77,6 @@ export function renderDataResource(
// Set the height dynamically if the grid's height is < 500px high; otherwise, set height to 500px
tableContainer.style.height = rowsHeight >= 500 ? '500px' : rowsHeight.toString() + 'px';
}
attachTableStyler(detailTable, options.themeService);
host.appendChild(tableContainer);
detailTable.resizeCanvas();

View File

@@ -26,14 +26,13 @@ import { IQuickInputService } from 'vs/platform/quickinput/common/quickInput';
import { TableDataView } from 'sql/base/browser/ui/table/tableDataView';
import { TableHeaderRowHeight, TableRowHeight } from 'sql/workbench/browser/designer/designerTableUtil';
import { textFormatter } from 'sql/base/browser/ui/table/formatters';
import { attachTableStyler } from 'sql/platform/theme/common/styler';
import { ButtonColumn } from 'sql/base/browser/ui/table/plugins/buttonColumn.plugin';
import Severity from 'vs/base/common/severity';
import { status } from 'vs/base/browser/ui/aria/aria';
import { IErrorMessageService } from 'sql/platform/errorMessage/common/errorMessageService';
import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
import { defaultInputBoxStyles } from 'vs/platform/theme/browser/defaultStyles';
import { defaultEditableDropdownStyles, defaultSelectBoxStyles } from 'sql/platform/theme/browser/defaultStyles';
import { defaultEditableDropdownStyles, defaultSelectBoxStyles, defaultTableStyles } from 'sql/platform/theme/browser/defaultStyles';
// strings for filter dialog
const OkButtonText = localize('objectExplorer.okButtonText', "OK");
@@ -356,7 +355,7 @@ export class FilterDialog extends Modal {
};
}
this.filterTable = new Table(filter, this._accessibilityService, this._quickInputService, {
this.filterTable = new Table(filter, this._accessibilityService, this._quickInputService, defaultTableStyles, {
dataProvider: dataProvider!,
columns: columns,
}, {
@@ -389,7 +388,6 @@ export class FilterDialog extends Modal {
this.filterTable.registerPlugin(clearValueColumn);
this.filterTable.layout(new DOM.Dimension(600, (tableData.length + 2) * TableRowHeight));
this._register(attachTableStyler(this.filterTable, this._themeService));
this._description = DOM.append(body, DOM.$('.filter-dialog-description'));
this._description.innerHTML = this._properties[0].description;

View File

@@ -30,7 +30,6 @@ import { Table } from 'sql/base/browser/ui/table/table';
import { TableDataView } from 'sql/base/browser/ui/table/tableDataView';
import * as DialogHelper from 'sql/workbench/browser/modal/dialogHelper';
import { HideReason, Modal } from 'sql/workbench/browser/modal/modal';
import { attachTableStyler } from 'sql/platform/theme/common/styler';
import * as TelemetryKeys from 'sql/platform/telemetry/common/telemetryKeys';
import { RestoreViewModel, RestoreOptionParam, SouceDatabaseNamesParam } from 'sql/workbench/services/restore/browser/restoreViewModel';
import * as FileValidationConstants from 'sql/workbench/services/fileBrowser/common/fileValidationServiceConstants';
@@ -51,7 +50,7 @@ import { IAccessibilityService } from 'vs/platform/accessibility/common/accessib
import { IQuickInputService } from 'vs/platform/quickinput/common/quickInput';
import { IComponentContextService } from 'sql/workbench/services/componentContext/browser/componentContextService';
import { defaultButtonStyles, defaultInputBoxStyles } from 'vs/platform/theme/browser/defaultStyles';
import { defaultCheckboxStyles, defaultEditableDropdownStyles, defaultSelectBoxStyles } from 'sql/platform/theme/browser/defaultStyles';
import { defaultCheckboxStyles, defaultEditableDropdownStyles, defaultSelectBoxStyles, defaultTableStyles } from 'sql/platform/theme/browser/defaultStyles';
interface FileListElement {
logicalFileName: string;
@@ -319,7 +318,7 @@ export class RestoreDialog extends Modal {
this._restorePlanTableContainer = DOM.append(restorePlanElement, DOM.$('.dialog-input-section.restore-list'));
DOM.hide(this._restorePlanTableContainer);
this._restorePlanData = new TableDataView<Slick.SlickData>();
this._restorePlanTable = this._register(new Table<Slick.SlickData>(this._restorePlanTableContainer, this._accessibilityService, this._quickInputService,
this._restorePlanTable = this._register(new Table<Slick.SlickData>(this._restorePlanTableContainer, this._accessibilityService, this._quickInputService, defaultTableStyles,
{ dataProvider: this._restorePlanData, columns: this._restorePlanColumn }, { enableColumnReorder: false }));
this._restorePlanTable.setTableTitle(localize('restorePlan', "Restore plan"));
this._restorePlanTable.setSelectionModel(new RowSelectionModel({ selectActiveRow: false }));
@@ -371,7 +370,7 @@ export class RestoreDialog extends Modal {
field: 'restoreAs'
}];
this._fileListData = new TableDataView<FileListElement>();
this._fileListTable = this._register(new Table<FileListElement>(this._fileListTableContainer, this._accessibilityService, this._quickInputService,
this._fileListTable = this._register(new Table<FileListElement>(this._fileListTableContainer, this._accessibilityService, this._quickInputService, defaultTableStyles,
{ dataProvider: this._fileListData, columns }, { enableColumnReorder: false }));
this._fileListTable.setSelectionModel(new RowSelectionModel());
this._register(this._componentContextService.registerTable(this._fileListTable));
@@ -666,8 +665,6 @@ export class RestoreDialog extends Modal {
this._register(this._scriptButton!);
this._register(this._restoreButton!);
this._register(this._closeButton!);
this._register(attachTableStyler(this._fileListTable!, this._themeService));
this._register(attachTableStyler(this._restorePlanTable!, this._themeService));
this._register(this._targetDatabaseInputBox.onDidChange(dbName => {
if (!this.viewModel.databases?.includes(dbName)) {