mirror of
https://github.com/ckaczor/azuredatastudio.git
synced 2026-01-22 09:35:37 -05:00
Refactor options dialog to not use splitview (#9684)
* Refactor options dialog to not use splitview * Fix test
This commit is contained in:
@@ -9,7 +9,6 @@ import { SelectBox } from 'sql/base/browser/ui/selectBox/selectBox';
|
||||
import { IModalOptions, Modal } from './modal';
|
||||
import * as OptionsDialogHelper from './optionsDialogHelper';
|
||||
import { attachButtonStyler } from 'sql/platform/theme/common/styler';
|
||||
import { ScrollableSplitView } from 'sql/base/browser/ui/scrollableSplitview/scrollableSplitview';
|
||||
|
||||
import * as azdata from 'azdata';
|
||||
|
||||
@@ -32,7 +31,7 @@ import { ILogService } from 'vs/platform/log/common/log';
|
||||
import { ITextResourcePropertiesService } from 'vs/editor/common/services/textResourceConfigurationService';
|
||||
import { IAdsTelemetryService } from 'sql/platform/telemetry/common/telemetry';
|
||||
import { ViewPane, IViewPaneOptions } from 'vs/workbench/browser/parts/views/viewPaneContainer';
|
||||
import { attachModalDialogStyler, attachPanelStyler } from 'sql/workbench/common/styler';
|
||||
import { attachModalDialogStyler } from 'sql/workbench/common/styler';
|
||||
import { IViewDescriptorService } from 'vs/workbench/common/views';
|
||||
import { ServiceOptionType } from 'sql/platform/connection/common/interfaces';
|
||||
import { IOpenerService } from 'vs/platform/opener/common/opener';
|
||||
@@ -77,16 +76,13 @@ export interface IOptionsDialogOptions extends IModalOptions {
|
||||
|
||||
export class OptionsDialog extends Modal {
|
||||
private _body: HTMLElement;
|
||||
private _optionGroups: HTMLElement;
|
||||
private _optionGroupsContainer: HTMLElement;
|
||||
private _categoryTitles: HTMLElement[] = [];
|
||||
private _dividerBuilder: HTMLElement;
|
||||
private _optionTitle: HTMLElement;
|
||||
private _optionDescription: HTMLElement;
|
||||
private _optionElements: { [optionName: string]: OptionsDialogHelper.IOptionElement } = {};
|
||||
private _optionValues: { [optionName: string]: string };
|
||||
private _optionRowSize = 31;
|
||||
private _optionCategoryPadding = 30;
|
||||
private height: number;
|
||||
private splitview: ScrollableSplitView;
|
||||
|
||||
private _onOk = new Emitter<void>();
|
||||
public onOk: Event<void> = this._onOk.event;
|
||||
@@ -101,7 +97,6 @@ export class OptionsDialog extends Modal {
|
||||
@ILayoutService layoutService: ILayoutService,
|
||||
@IThemeService themeService: IThemeService,
|
||||
@IContextViewService private _contextViewService: IContextViewService,
|
||||
@IInstantiationService private _instantiationService: IInstantiationService,
|
||||
@IAdsTelemetryService telemetryService: IAdsTelemetryService,
|
||||
@IContextKeyService contextKeyService: IContextKeyService,
|
||||
@IClipboardService clipboardService: IClipboardService,
|
||||
@@ -132,8 +127,7 @@ export class OptionsDialog extends Modal {
|
||||
|
||||
this._dividerBuilder = append(this._body, $('div'));
|
||||
|
||||
this._optionGroups = append(this._body, $('div.optionsDialog-options-groups.monaco-pane-view'));
|
||||
this.splitview = new ScrollableSplitView(this._optionGroups, { enableResizing: false, scrollDebounce: 0 });
|
||||
this._optionGroupsContainer = append(this._body, $('div.optionsDialog-options-groups.monaco-pane-view'));
|
||||
|
||||
const descriptionContainer = append(this._body, $('div.optionsDialog-description'));
|
||||
|
||||
@@ -143,13 +137,20 @@ export class OptionsDialog extends Modal {
|
||||
|
||||
// Update theming that is specific to options dialog flyout body
|
||||
private updateTheme(theme: IColorTheme): void {
|
||||
let borderColor = theme.getColor(contrastBorder);
|
||||
let border = borderColor ? borderColor.toString() : null;
|
||||
const borderColor = theme.getColor(contrastBorder);
|
||||
const border = borderColor ? borderColor.toString() : null;
|
||||
const backgroundColor = theme.getColor(SIDE_BAR_BACKGROUND);
|
||||
if (this._dividerBuilder) {
|
||||
this._dividerBuilder.style.borderTopWidth = border ? '1px' : null;
|
||||
this._dividerBuilder.style.borderTopStyle = border ? 'solid' : null;
|
||||
this._dividerBuilder.style.borderTopColor = border;
|
||||
}
|
||||
this._categoryTitles.forEach(titleElement => {
|
||||
titleElement.style.borderWidth = border ? '1px 0px' : null;
|
||||
titleElement.style.borderStyle = border ? 'solid none' : null;
|
||||
titleElement.style.borderColor = border;
|
||||
titleElement.style.backgroundColor = backgroundColor ? backgroundColor.toString() : null;
|
||||
});
|
||||
}
|
||||
|
||||
private onOptionLinkClicked(optionName: string): void {
|
||||
@@ -231,36 +232,29 @@ export class OptionsDialog extends Modal {
|
||||
public open(options: azdata.ServiceOption[], optionValues: { [name: string]: any }) {
|
||||
this._optionValues = optionValues;
|
||||
let firstOption: string;
|
||||
this.splitview.clear();
|
||||
let categoryMap = OptionsDialogHelper.groupOptionsByCategory(options);
|
||||
for (let category in categoryMap) {
|
||||
const title = append(this._optionGroupsContainer, $('h2.option-category-title'));
|
||||
title.innerText = category;
|
||||
this._categoryTitles.push(title);
|
||||
|
||||
let serviceOptions: azdata.ServiceOption[] = categoryMap[category];
|
||||
let bodyContainer = $('table.optionsDialog-table');
|
||||
this.fillInOptions(bodyContainer, serviceOptions);
|
||||
|
||||
let viewSize = this._optionCategoryPadding + serviceOptions.length * this._optionRowSize;
|
||||
let categoryView = this._instantiationService.createInstance(CategoryView, bodyContainer, viewSize, { title: category, id: category });
|
||||
this.splitview.addView(categoryView, viewSize);
|
||||
categoryView.render();
|
||||
attachPanelStyler(categoryView, this._themeService);
|
||||
append(this._optionGroupsContainer, bodyContainer);
|
||||
|
||||
if (!firstOption) {
|
||||
firstOption = serviceOptions[0].name;
|
||||
}
|
||||
}
|
||||
if (this.height) {
|
||||
this.splitview.layout(this.height - 120);
|
||||
}
|
||||
this.updateTheme(this._themeService.getColorTheme());
|
||||
this.show();
|
||||
let firstOptionWidget = this._optionElements[firstOption].optionWidget;
|
||||
this.registerStyling();
|
||||
firstOptionWidget.focus();
|
||||
setTimeout(() => firstOptionWidget.focus(), 1);
|
||||
}
|
||||
|
||||
protected layout(height?: number): void {
|
||||
this.height = height;
|
||||
// account for padding and the details view
|
||||
this.splitview.layout(this.height - 120 - 20);
|
||||
}
|
||||
|
||||
public dispose(): void {
|
||||
|
||||
Reference in New Issue
Block a user