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

redo the table styles (#23538)

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

99
src/sql/workbench/browser/designer/designer.ts
View File

@@ -9,14 +9,13 @@ import {
DesignerEditProcessedEventArgs, DesignerStateChangedEventArgs, DesignerAction, ScriptProperty, DesignerRootObjectPath, CanBeDeletedProperty, DesignerUIArea
}
from 'sql/workbench/browser/designer/interfaces';
import { IPanelTab, ITabbedPanelStyles, TabbedPanel } from 'sql/base/browser/ui/panel/panel';
import { IPanelTab, TabbedPanel } from 'sql/base/browser/ui/panel/panel';
import * as DOM from 'vs/base/browser/dom';
import { Emitter, Event } from 'vs/base/common/event';
import { Event } from 'vs/base/common/event';
import { Orientation, Sizing, SplitView } from 'vs/base/browser/ui/splitview/splitview';
import { Disposable, DisposableStore } from 'vs/base/common/lifecycle';
import { InputBox } from 'sql/base/browser/ui/inputBox/inputBox';
import 'vs/css!./media/designer';
import { ITableStyles } from 'sql/base/browser/ui/table/interfaces';
import { Checkbox } from 'sql/base/browser/ui/checkbox/checkbox';
import { Table } from 'sql/base/browser/ui/table/table';
import { SelectBox } from 'sql/base/browser/ui/selectBox/selectBox';
@@ -38,7 +37,7 @@ import { DesignerIssuesTabPanelView } from 'sql/workbench/browser/designer/desig
import { DesignerScriptEditorTabPanelView } from 'sql/workbench/browser/designer/designerScriptEditorTabPanelView';
import { DesignerPropertyPathValidator } from 'sql/workbench/browser/designer/designerPropertyPathValidator';
import { IColorTheme, ICssStyleCollector, IThemeService, registerThemingParticipant } from 'vs/platform/theme/common/themeService';
import { listActiveSelectionBackground, listActiveSelectionForeground, listHoverBackground } from 'vs/platform/theme/common/colorRegistry';
import { asCssVariable, listActiveSelectionBackground, listActiveSelectionForeground, listHoverBackground } from 'vs/platform/theme/common/colorRegistry';
import { alert } from 'vs/base/browser/ui/aria/aria';
import { layoutDesignerTable, TableHeaderRowHeight, TableRowHeight } from 'sql/workbench/browser/designer/designerTableUtil';
import { Dropdown } from 'sql/base/browser/ui/editableDropdown/browser/dropdown';
@@ -55,20 +54,18 @@ import { IQuickInputService } from 'vs/platform/quickinput/common/quickInput';
import { IComponentContextService } from 'sql/workbench/services/componentContext/browser/componentContextService';
import { defaultInputBoxStyles } from 'vs/platform/theme/browser/defaultStyles';
import { ThemeIcon } from 'vs/base/common/themables';
import { defaultCheckboxStyles, defaultEditableDropdownStyles, defaultSelectBoxStyles } from 'sql/platform/theme/browser/defaultStyles';
export interface IDesignerStyle {
tabbedPanelStyles?: ITabbedPanelStyles;
tableStyles?: ITableStyles;
paneSeparator?: Color;
groupHeaderBackground?: Color;
}
import { defaultCheckboxStyles, defaultEditableDropdownStyles, defaultSelectBoxStyles, getTableStyles } from 'sql/platform/theme/browser/defaultStyles';
import { GroupHeaderBackground } from 'sql/platform/theme/common/colorRegistry';
export type DesignerUIComponent = InputBox | Checkbox | Table<Slick.SlickData> | SelectBox | Dropdown;
export type CreateComponentsFunc = (container: HTMLElement, components: DesignerDataPropertyInfo[], parentPath: DesignerPropertyPath) => DesignerUIComponent[];
export type SetComponentValueFunc = (definition: DesignerDataPropertyInfo, component: DesignerUIComponent, data: DesignerViewModel) => void;
export interface IDesignerStyles {
paneSeparator: Color;
}
interface DesignerTableCellContext {
view: DesignerUIArea;
path: DesignerPropertyPath;
@@ -90,7 +87,6 @@ export class Designer extends Disposable {
private _contentContainer: HTMLElement;
private _topContentContainer: HTMLElement;
private _propertiesPaneContainer: HTMLElement;
private _styles: IDesignerStyle = {};
private _supressEditProcessing: boolean = false;
private _componentMap = new Map<string, { defintion: DesignerDataPropertyInfo, component: DesignerUIComponent }>();
private _input: DesignerComponentInput;
@@ -98,12 +94,10 @@ export class Designer extends Disposable {
private _propertiesPane: DesignerPropertiesPane;
private _inputDisposable: DisposableStore;
private _loadingTimeoutHandle: any;
private _groupHeaders: HTMLElement[] = [];
private _issuesView: DesignerIssuesTabPanelView;
private _scriptEditorView: DesignerScriptEditorTabPanelView;
private _taskbars: Taskbar[] = [];
private _actionsMap: Map<Taskbar, DesignerTableAction[]> = new Map<Taskbar, DesignerTableAction[]>();
private _onStyleChangeEventEmitter = new Emitter<void>();
constructor(private readonly _container: HTMLElement,
@IInstantiationService private readonly _instantiationService: IInstantiationService,
@@ -205,54 +199,13 @@ export class Designer extends Disposable {
this._propertiesPane = new DesignerPropertiesPane(this._propertiesPaneContainer, (container, components, parentPath) => {
return this.createComponents(container, components, this._propertiesPane.componentMap, this._propertiesPane.groupHeaders, parentPath, 'PropertiesView');
return this.createComponents(container, components, this._propertiesPane.componentMap, parentPath, 'PropertiesView');
}, (definition, component, viewModel) => {
this.setComponentValue(definition, component, viewModel);
}, this._instantiationService);
}
private styleComponent(component: TabbedPanel | InputBox | Checkbox | Table<Slick.SlickData> | SelectBox | Dropdown): void {
if (component instanceof InputBox) {
} else if (component instanceof Checkbox) {
} else if (component instanceof TabbedPanel) {
component.style(this._styles.tabbedPanelStyles);
} else if (component instanceof Table) {
this.removeTableSelectionStyles();
component.style(this._styles.tableStyles);
} else if (component instanceof Dropdown) {
} else {
}
}
private removeTableSelectionStyles(): void {
this._styles.tableStyles.listActiveSelectionBackground = undefined;
this._styles.tableStyles.listActiveSelectionForeground = undefined;
this._styles.tableStyles.listFocusAndSelectionBackground = undefined;
this._styles.tableStyles.listFocusAndSelectionForeground = undefined;
this._styles.tableStyles.listInactiveFocusBackground = undefined;
this._styles.tableStyles.listInactiveFocusForeground = undefined;
this._styles.tableStyles.listInactiveSelectionBackground = undefined;
this._styles.tableStyles.listInactiveSelectionForeground = undefined;
}
private styleGroupHeader(header: HTMLElement): void {
if (this._styles.groupHeaderBackground) {
header.style.backgroundColor = this._styles.groupHeaderBackground.toString();
}
}
public style(styles: IDesignerStyle): void {
this._styles = styles;
this._componentMap.forEach((value, key, map) => {
if (value.component instanceof Table) {
if (value.component.style) {
this.styleComponent(value.component);
}
}
});
this._propertiesPane.componentMap.forEach((value) => {
this.styleComponent(value.component);
});
public style(styles: IDesignerStyles): void {
this._verticalSplitView.style({
separatorBorder: styles.paneSeparator
});
@@ -261,16 +214,7 @@ export class Designer extends Disposable {
separatorBorder: styles.paneSeparator
});
this._groupHeaders.forEach((header) => {
this.styleGroupHeader(header);
});
this._propertiesPane.groupHeaders.forEach((header) => {
this.styleGroupHeader(header);
});
this._propertiesPane.descriptionElement.style.borderColor = styles.paneSeparator.toString();
this._onStyleChangeEventEmitter.fire();
}
public layout(dimension: DOM.Dimension) {
@@ -336,14 +280,13 @@ export class Designer extends Disposable {
DOM.clearNode(this._topContentContainer);
this._contentTabbedPanel.clearTabs();
this._propertiesPane.clear();
this._groupHeaders = [];
this._taskbars.map(t => t.dispose());
}
private initializeDesigner(): void {
const view = this._input.view;
if (view.components) {
this.createComponents(this._topContentContainer, view.components, this._componentMap, this._groupHeaders, DesignerRootObjectPath, 'TopContentView');
this.createComponents(this._topContentContainer, view.components, this._componentMap, DesignerRootObjectPath, 'TopContentView');
}
view.tabs.forEach(tab => {
this._contentTabbedPanel.pushTab(this.createTabView(tab));
@@ -617,7 +560,7 @@ export class Designer extends Disposable {
private createTabView(tab: DesignerTab): IPanelTab {
const view = new DesignerTabPanelView(tab, (container, components, identifierGetter) => {
return this.createComponents(container, components, this._componentMap, this._groupHeaders, identifierGetter, 'TabsView');
return this.createComponents(container, components, this._componentMap, identifierGetter, 'TabsView');
});
return {
identifier: tab.title,
@@ -705,7 +648,6 @@ export class Designer extends Disposable {
private createComponents(container: HTMLElement,
components: DesignerDataPropertyInfo[],
componentMap: Map<string, { defintion: DesignerDataPropertyInfo, component: DesignerUIComponent }>,
groupHeaders: HTMLElement[],
parentPath: DesignerPropertyPath,
area: DesignerUIArea): DesignerUIComponent[] {
const uiComponents = [];
@@ -727,8 +669,7 @@ export class Designer extends Disposable {
} else {
groupNames.forEach(group => {
const groupHeader = container.appendChild(DOM.$('div.full-row.group-header'));
groupHeaders.push(groupHeader);
this.styleGroupHeader(groupHeader);
groupHeader.style.backgroundColor = asCssVariable(GroupHeaderBackground);
groupHeader.innerText = group;
componentsToCreate.forEach(component => {
if (component.group === group) {
@@ -841,7 +782,15 @@ export class Designer extends Disposable {
const tableProperties = componentDefinition.componentProperties as DesignerTableProperties;
const taskbar = this.addTableTaskbar(container, tableProperties);
const tableContainer = container.appendChild(DOM.$('.full-row'));
const table = new Table(tableContainer, this._accessibilityService, this._quickInputService, {
const table = new Table(tableContainer, this._accessibilityService, this._quickInputService, getTableStyles({
listActiveSelectionBackground: undefined,
listActiveSelectionForeground: undefined,
listFocusAndSelectionBackground: undefined,
listFocusAndSelectionForeground: undefined,
listInactiveFocusBackground: undefined,
listInactiveSelectionBackground: undefined,
listInactiveSelectionForeground: undefined
}), {
dataProvider: new TableDataView()
}, {
editable: true,
@@ -1030,8 +979,6 @@ export class Designer extends Disposable {
defintion: componentDefinition,
component: component
});
this.styleComponent(component);
return component;
}

10
src/sql/workbench/browser/designer/designerIssuesTabPanelView.ts
View File

@@ -11,13 +11,13 @@ import { Emitter, Event } from 'vs/base/common/event';
import { IListAccessibilityProvider, List } from 'vs/base/browser/ui/list/listWidget';
import { IListRenderer, IListVirtualDelegate } from 'vs/base/browser/ui/list/list';
import { localize } from 'vs/nls';
import { IColorTheme, ICssStyleCollector, IThemeService, registerThemingParticipant } from 'vs/platform/theme/common/themeService';
import { attachListStyler } from 'sql/platform/theme/common/vsstyler';
import { IColorTheme, ICssStyleCollector, registerThemingParticipant } from 'vs/platform/theme/common/themeService';
import { problemsErrorIconForeground, problemsInfoIconForeground, problemsWarningIconForeground } from 'vs/platform/theme/common/colorRegistry';
import { Codicon } from 'vs/base/common/codicons';
import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
import { Link } from 'vs/platform/opener/browser/link';
import { ThemeIcon } from 'vs/base/common/themables';
import { getListStyles } from 'vs/platform/theme/browser/defaultStyles';
export class DesignerIssuesTabPanelView extends Disposable implements IPanelView {
private _container: HTMLElement;
@@ -27,7 +27,6 @@ export class DesignerIssuesTabPanelView extends Disposable implements IPanelView
public readonly onIssueSelected: Event<DesignerPropertyPath> = this._onIssueSelected.event;
constructor(
@IThemeService private _themeService: IThemeService,
@IInstantiationService private _instantiationService: IInstantiationService
) {
super();
@@ -41,12 +40,15 @@ export class DesignerIssuesTabPanelView extends Disposable implements IPanelView
mouseSupport: true,
accessibilityProvider: new DesignerIssueListAccessibilityProvider()
});
this._issueList.style(getListStyles({
listInactiveSelectionIconForeground: undefined,
listActiveSelectionIconForeground: undefined
}));
this._register(this._issueList.onDidChangeSelection((e) => {
if (e.elements && e.elements.length === 1) {
this._onIssueSelected.fire(e.elements[0].propertyPath);
}
}));
this._register(attachListStyler(this._issueList, this._themeService));
}
layout(dimension: DOM.Dimension): void {

6
src/sql/workbench/browser/designer/designerPropertiesPane.ts
View File

@@ -25,7 +25,6 @@ export class DesignerPropertiesPane {
private _contentElement: HTMLElement;
private _objectPath: DesignerPropertyPath;
private _componentMap = new Map<string, { defintion: DesignerDataPropertyInfo, component: DesignerUIComponent }>();
private _groupHeaders: HTMLElement[] = [];
// Description variables
private _descriptionContainer: HTMLElement;
@@ -45,10 +44,6 @@ export class DesignerPropertiesPane {
}
public get groupHeaders(): HTMLElement[] {
return this._groupHeaders;
}
public get descriptionElement(): HTMLElement {
return this._descriptionContainer;
}
@@ -78,7 +73,6 @@ export class DesignerPropertiesPane {
value.component.dispose();
});
this._componentMap.clear();
this._groupHeaders = [];
DOM.clearNode(this._contentElement);
this._objectPath = undefined;
}

8
src/sql/workbench/browser/modelComponents/table.component.ts
View File

@@ -15,8 +15,6 @@ import { ComponentBase } from 'sql/workbench/browser/modelComponents/componentBa
import { Table } from 'sql/base/browser/ui/table/table';
import { TableDataView } from 'sql/base/browser/ui/table/tableDataView';
import { attachTableStyler } from 'sql/platform/theme/common/styler';
import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService';
import { getContentHeight, getContentWidth, Dimension, isAncestor } from 'vs/base/browser/dom';
import { RowSelectionModel } from 'sql/base/browser/ui/table/plugins/rowSelectionModel.plugin';
import { ActionOnCheck, CheckboxSelectColumn, ICheckboxCellActionEventArgs } from 'sql/base/browser/ui/table/plugins/checkboxSelectColumn.plugin';
@@ -41,7 +39,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 { deepClone, equals } from 'vs/base/common/objects';
import { defaultTableFilterStyles } from 'sql/platform/theme/browser/defaultStyles';
import { defaultTableFilterStyles, defaultTableStyles } from 'sql/platform/theme/browser/defaultStyles';
export enum ColumnSizingMode {
ForceFit = 0, // all columns will be sized to fit in viewable space, no horiz scroll bar
@@ -88,7 +86,6 @@ export default class TableComponent extends ComponentBase<azdata.TableComponentP
@ViewChild('table', { read: ElementRef }) private _inputContainer: ElementRef;
constructor(
@Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef,
@Inject(IWorkbenchThemeService) private themeService: IWorkbenchThemeService,
@Inject(forwardRef(() => ElementRef)) el: ElementRef,
@Inject(ILogService) logService: ILogService,
@Inject(IContextViewService) private contextViewService: IContextViewService,
@@ -283,12 +280,11 @@ export default class TableComponent extends ComponentBase<azdata.TableComponentP
enableInGridTabNavigation: this.moveFocusOutWithTab
};
this._table = new Table<Slick.SlickData>(this._inputContainer.nativeElement, this.accessibilityService, this.quickInputService, { dataProvider: this._tableData, columns: this._tableColumns }, options);
this._table = new Table<Slick.SlickData>(this._inputContainer.nativeElement, this.accessibilityService, this.quickInputService, defaultTableStyles, { dataProvider: this._tableData, columns: this._tableColumns }, options);
this._table.setData(this._tableData);
this._table.setSelectionModel(new RowSelectionModel({ selectActiveRow: true }));
this._register(this._table);
this._register(attachTableStyler(this._table, this.themeService));
this._register(this._table.onSelectedRowsChanged((e, data) => {
if (this.isCheckboxColumnsUsedForSelection()) {
return;