diff --git a/src/sql/workbench/browser/modal/media/optionsDialog.css b/src/sql/workbench/browser/modal/media/optionsDialog.css index a372e1e96e..aa6fe931a0 100644 --- a/src/sql/workbench/browser/modal/media/optionsDialog.css +++ b/src/sql/workbench/browser/modal/media/optionsDialog.css @@ -3,11 +3,11 @@ * Licensed under the Source EULA. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ -.optionsDialog-label { +.optionsDialog-options .optionsDialog-label { width: 120px; } -.optionsDialog-input { +.optionsDialog-options .optionsDialog-input { width: 200px; } @@ -22,27 +22,29 @@ overflow-y: auto; } -.optionsDialog-options-groups { +.optionsDialog-options .optionsDialog-options-groups { margin: 10px 0px; flex: 1 1; 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); } -.vs-dark .optionsDialog-options-groups { +.vs-dark .optionsDialog-options .optionsDialog-options-groups { box-shadow: 0 4px 5px 0px rgba(0, 0, 0, 0.71); } -.optionsDialog-options-groups .split-view-view .header { - padding-left: 28px !important; +.optionsDialog-options .option-category-title { + font-size: 11px; + margin: 5px 0px; + padding-left: 20px !important; + font-weight: bold; background-position-x: 8px !important; -} - -.optionsDialog-options-groups .split-view-view .body { - padding-left: 5px !important; + text-transform: uppercase; + line-height: 22px; + align-items: center; } .backButtonIcon { @@ -58,25 +60,25 @@ content: url('back_inverse.svg'); } -.optionsDialog-description { +.optionsDialog-options .optionsDialog-description { height: 90px; margin: 15px; overflow-y: auto; } -.optionsDialog-description .modal-title { +.optionsDialog-options .optionsDialog-description .modal-title { background-repeat: no-repeat; background-position: 2px center; padding-left: 25px; background-size: 16px; } -.vs .optionsDialog-description .modal-title { +.vs .optionsDialog-options .optionsDialog-description .modal-title { background-image: url('info_notification.svg') } -.vs-dark .optionsDialog-description .modal-title, -.hc-black .optionsDialog-description .modal-title { +.vs-dark .optionsDialog-options .optionsDialog-description .modal-title, +.hc-black .optionsDialog-options .optionsDialog-description .modal-title { background-image: url('info_notification_inverse.svg') } @@ -86,13 +88,14 @@ flex-direction: column; } -.optionsDialog-description-content { +.optionsDialog-options .optionsDialog-description-content { padding-top: 10px; padding-left: 25px; } -.optionsDialog-table{ +.optionsDialog-options .optionsDialog-table { width:100%; padding: 10px 19px 10px 10px; border-spacing: 5px; + padding-left: 5px !important; } diff --git a/src/sql/workbench/browser/modal/optionsDialog.ts b/src/sql/workbench/browser/modal/optionsDialog.ts index f753e0bc9f..127aa21b80 100644 --- a/src/sql/workbench/browser/modal/optionsDialog.ts +++ b/src/sql/workbench/browser/modal/optionsDialog.ts @@ -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(); public onOk: Event = 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 { diff --git a/src/sql/workbench/contrib/connection/test/browser/advancedPropertiesDialog.test.ts b/src/sql/workbench/contrib/connection/test/browser/advancedPropertiesDialog.test.ts index f59daa0c8c..ad3d0f76f4 100644 --- a/src/sql/workbench/contrib/connection/test/browser/advancedPropertiesDialog.test.ts +++ b/src/sql/workbench/contrib/connection/test/browser/advancedPropertiesDialog.test.ts @@ -91,7 +91,6 @@ suite('Advanced properties dialog tests', () => { undefined, // partsService undefined, // themeService undefined, // Context view service - undefined, // instantiation Service undefined, // telemetry service new MockContextKeyService() // contextkeyservice );