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

Refactor options dialog to not use splitview (#9684)

Browse Source 
* Refactor options dialog to not use splitview

* Fix test
This commit is contained in:
Charles Gagnon
2020-03-23 08:15:54 -07:00
committed by GitHub
parent a7dbb68f7d
commit df1b0c908e
3 changed files with 41 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src/sql/workbench/browser/modal/media/optionsDialog.css
View File

@@ -3,11 +3,11 @@
* Licensed under the Source EULA. See License.txt in the project root for license information. * Licensed under the Source EULA. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/ *--------------------------------------------------------------------------------------------*/
.optionsDialog-label { .optionsDialog-options .optionsDialog-label {
width: 120px; width: 120px;
} }
.optionsDialog-input { .optionsDialog-options .optionsDialog-input {
width: 200px; width: 200px;
} }
@@ -22,27 +22,29 @@
overflow-y: auto; overflow-y: auto;
} }
.optionsDialog-options-groups { .optionsDialog-options .optionsDialog-options-groups {
margin: 10px 0px; margin: 10px 0px;
flex: 1 1; flex: 1 1;
overflow-y: auto; overflow-y: auto;
} }
.vs .optionsDialog-options-groups { .vs .optionsDialog-options .optionsDialog-options-groups {
box-shadow: 0 1px 4px 1px rgba(220, 220, 220, 0.71); box-shadow: 0 1px 4px 1px rgba(220, 220, 220, 0.71);
} }
.vs-dark .optionsDialog-options-groups { .vs-dark .optionsDialog-options .optionsDialog-options-groups {
box-shadow: 0 4px 5px 0px rgba(0, 0, 0, 0.71); box-shadow: 0 4px 5px 0px rgba(0, 0, 0, 0.71);
} }
.optionsDialog-options-groups .split-view-view .header { .optionsDialog-options .option-category-title {
padding-left: 28px !important; font-size: 11px;
margin: 5px 0px;
padding-left: 20px !important;
font-weight: bold;
background-position-x: 8px !important; background-position-x: 8px !important;
} text-transform: uppercase;
line-height: 22px;
.optionsDialog-options-groups .split-view-view .body { align-items: center;
padding-left: 5px !important;
} }
.backButtonIcon { .backButtonIcon {
@@ -58,25 +60,25 @@
content: url('back_inverse.svg'); content: url('back_inverse.svg');
} }
.optionsDialog-description { .optionsDialog-options .optionsDialog-description {
height: 90px; height: 90px;
margin: 15px; margin: 15px;
overflow-y: auto; overflow-y: auto;
} }
.optionsDialog-description .modal-title { .optionsDialog-options .optionsDialog-description .modal-title {
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 2px center; background-position: 2px center;
padding-left: 25px; padding-left: 25px;
background-size: 16px; background-size: 16px;
} }
.vs .optionsDialog-description .modal-title { .vs .optionsDialog-options .optionsDialog-description .modal-title {
background-image: url('info_notification.svg') background-image: url('info_notification.svg')
} }
.vs-dark .optionsDialog-description .modal-title, .vs-dark .optionsDialog-options .optionsDialog-description .modal-title,
.hc-black .optionsDialog-description .modal-title { .hc-black .optionsDialog-options .optionsDialog-description .modal-title {
background-image: url('info_notification_inverse.svg') background-image: url('info_notification_inverse.svg')
} }
@@ -86,13 +88,14 @@
flex-direction: column; flex-direction: column;
} }
.optionsDialog-description-content { .optionsDialog-options .optionsDialog-description-content {
padding-top: 10px; padding-top: 10px;
padding-left: 25px; padding-left: 25px;
} }
.optionsDialog-table{ .optionsDialog-options .optionsDialog-table {
width:100%; width:100%;
padding: 10px 19px 10px 10px; padding: 10px 19px 10px 10px;
border-spacing: 5px; border-spacing: 5px;
padding-left: 5px !important;
} }

46
src/sql/workbench/browser/modal/optionsDialog.ts
View File

@@ -9,7 +9,6 @@ import { SelectBox } from 'sql/base/browser/ui/selectBox/selectBox';
import { IModalOptions, Modal } from './modal'; import { IModalOptions, Modal } from './modal';
import * as OptionsDialogHelper from './optionsDialogHelper'; import * as OptionsDialogHelper from './optionsDialogHelper';
import { attachButtonStyler } from 'sql/platform/theme/common/styler'; import { attachButtonStyler } from 'sql/platform/theme/common/styler';
import { ScrollableSplitView } from 'sql/base/browser/ui/scrollableSplitview/scrollableSplitview';
import * as azdata from 'azdata'; 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 { ITextResourcePropertiesService } from 'vs/editor/common/services/textResourceConfigurationService';
import { IAdsTelemetryService } from 'sql/platform/telemetry/common/telemetry'; import { IAdsTelemetryService } from 'sql/platform/telemetry/common/telemetry';
import { ViewPane, IViewPaneOptions } from 'vs/workbench/browser/parts/views/viewPaneContainer'; 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 { IViewDescriptorService } from 'vs/workbench/common/views';
import { ServiceOptionType } from 'sql/platform/connection/common/interfaces'; import { ServiceOptionType } from 'sql/platform/connection/common/interfaces';
import { IOpenerService } from 'vs/platform/opener/common/opener'; import { IOpenerService } from 'vs/platform/opener/common/opener';
@@ -77,16 +76,13 @@ export interface IOptionsDialogOptions extends IModalOptions {
export class OptionsDialog extends Modal { export class OptionsDialog extends Modal {
private _body: HTMLElement; private _body: HTMLElement;
private _optionGroups: HTMLElement; private _optionGroupsContainer: HTMLElement;
private _categoryTitles: HTMLElement[] = [];
private _dividerBuilder: HTMLElement; private _dividerBuilder: HTMLElement;
private _optionTitle: HTMLElement; private _optionTitle: HTMLElement;
private _optionDescription: HTMLElement; private _optionDescription: HTMLElement;
private _optionElements: { [optionName: string]: OptionsDialogHelper.IOptionElement } = {}; private _optionElements: { [optionName: string]: OptionsDialogHelper.IOptionElement } = {};
private _optionValues: { [optionName: string]: string }; private _optionValues: { [optionName: string]: string };
private _optionRowSize = 31;
private _optionCategoryPadding = 30;
private height: number;
private splitview: ScrollableSplitView;
private _onOk = new Emitter<void>(); private _onOk = new Emitter<void>();
public onOk: Event<void> = this._onOk.event; public onOk: Event<void> = this._onOk.event;
@@ -101,7 +97,6 @@ export class OptionsDialog extends Modal {
@ILayoutService layoutService: ILayoutService, @ILayoutService layoutService: ILayoutService,
@IThemeService themeService: IThemeService, @IThemeService themeService: IThemeService,
@IContextViewService private _contextViewService: IContextViewService, @IContextViewService private _contextViewService: IContextViewService,
@IInstantiationService private _instantiationService: IInstantiationService,
@IAdsTelemetryService telemetryService: IAdsTelemetryService, @IAdsTelemetryService telemetryService: IAdsTelemetryService,
@IContextKeyService contextKeyService: IContextKeyService, @IContextKeyService contextKeyService: IContextKeyService,
@IClipboardService clipboardService: IClipboardService, @IClipboardService clipboardService: IClipboardService,
@@ -132,8 +127,7 @@ export class OptionsDialog extends Modal {
this._dividerBuilder = append(this._body, $('div')); this._dividerBuilder = append(this._body, $('div'));
this._optionGroups = append(this._body, $('div.optionsDialog-options-groups.monaco-pane-view')); this._optionGroupsContainer = append(this._body, $('div.optionsDialog-options-groups.monaco-pane-view'));
this.splitview = new ScrollableSplitView(this._optionGroups, { enableResizing: false, scrollDebounce: 0 });
const descriptionContainer = append(this._body, $('div.optionsDialog-description')); 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 // Update theming that is specific to options dialog flyout body
private updateTheme(theme: IColorTheme): void { private updateTheme(theme: IColorTheme): void {
let borderColor = theme.getColor(contrastBorder); const borderColor = theme.getColor(contrastBorder);
let border = borderColor ? borderColor.toString() : null; const border = borderColor ? borderColor.toString() : null;
const backgroundColor = theme.getColor(SIDE_BAR_BACKGROUND);
if (this._dividerBuilder) { if (this._dividerBuilder) {
this._dividerBuilder.style.borderTopWidth = border ? '1px' : null; this._dividerBuilder.style.borderTopWidth = border ? '1px' : null;
this._dividerBuilder.style.borderTopStyle = border ? 'solid' : null; this._dividerBuilder.style.borderTopStyle = border ? 'solid' : null;
this._dividerBuilder.style.borderTopColor = border; 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 { private onOptionLinkClicked(optionName: string): void {
@@ -231,36 +232,29 @@ export class OptionsDialog extends Modal {
public open(options: azdata.ServiceOption[], optionValues: { [name: string]: any }) { public open(options: azdata.ServiceOption[], optionValues: { [name: string]: any }) {
this._optionValues = optionValues; this._optionValues = optionValues;
let firstOption: string; let firstOption: string;
this.splitview.clear();
let categoryMap = OptionsDialogHelper.groupOptionsByCategory(options); let categoryMap = OptionsDialogHelper.groupOptionsByCategory(options);
for (let category in categoryMap) { 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 serviceOptions: azdata.ServiceOption[] = categoryMap[category];
let bodyContainer = $('table.optionsDialog-table'); let bodyContainer = $('table.optionsDialog-table');
this.fillInOptions(bodyContainer, serviceOptions); this.fillInOptions(bodyContainer, serviceOptions);
append(this._optionGroupsContainer, bodyContainer);
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);
if (!firstOption) { if (!firstOption) {
firstOption = serviceOptions[0].name; firstOption = serviceOptions[0].name;
} }
} }
if (this.height) { this.updateTheme(this._themeService.getColorTheme());
this.splitview.layout(this.height - 120);
}
this.show(); this.show();
let firstOptionWidget = this._optionElements[firstOption].optionWidget; let firstOptionWidget = this._optionElements[firstOption].optionWidget;
this.registerStyling(); this.registerStyling();
firstOptionWidget.focus(); setTimeout(() => firstOptionWidget.focus(), 1);
} }
protected layout(height?: number): void { 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 { public dispose(): void {

1
src/sql/workbench/contrib/connection/test/browser/advancedPropertiesDialog.test.ts
View File

@@ -91,7 +91,6 @@ suite('Advanced properties dialog tests', () => {
undefined, // partsService undefined, // partsService
undefined, // themeService undefined, // themeService
undefined, // Context view service undefined, // Context view service
undefined, // instantiation Service
undefined, // telemetry service undefined, // telemetry service
new MockContextKeyService() // contextkeyservice new MockContextKeyService() // contextkeyservice
); );