ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-01-30 09:35:39 -05:00
Code Issues Packages Projects Releases Wiki Activity

introduce fieldset component (#23005)

Browse Source
This commit is contained in:
Alan Ren
2023-05-06 21:36:08 -07:00
committed by GitHub
parent feed449d97
commit 718b149e84
6 changed files with 61 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/sql/workbench/browser/modal/media/modal.css
View File

@@ -333,3 +333,7 @@
-webkit-mask-size: 100%;
mask-size: 100%;
}
.modal-dialog form {
height: 100%;
}

5
src/sql/workbench/browser/modal/modal.ts
View File

@@ -223,12 +223,13 @@ export abstract class Modal extends Disposable implements IThemable {
}
this._bodyContainer.style.top = `${top}px`;
this._modalDialog = DOM.append(this._bodyContainer, DOM.$('.modal-dialog'));
const formElement = DOM.append(this._modalDialog, DOM.$('form'));
if (this._modalOptions.dialogStyle === 'callout') {
let arrowClass = `.callout-arrow.from-${this._modalOptions.dialogPosition}`;
this._modalContent = DOM.append(this._modalDialog, DOM.$(`.modal-content${arrowClass}`));
this._modalContent = DOM.append(formElement, DOM.$(`.modal-content${arrowClass}`));
} else {
this._modalContent = DOM.append(this._modalDialog, DOM.$('.modal-content'));
this._modalContent = DOM.append(formElement, DOM.$('.modal-content'));
}
if (typeof this._modalOptions.width === 'number') {

14
src/sql/workbench/services/connection/browser/connectionDialogWidget.ts
View File

@@ -45,6 +45,7 @@ import { ConnectionBrowseTab } from 'sql/workbench/services/connection/browser/c
import { ElementSizeObserver } from 'vs/editor/browser/config/elementSizeObserver';
import { ICapabilitiesService } from 'sql/platform/capabilities/common/capabilitiesService';
import { onUnexpectedError } from 'vs/base/common/errors';
import { FieldSet } from 'sql/base/browser/ui/fieldset/fieldset';
export interface OnShowUIResponse {
selectedProviderDisplayName: string;
@@ -224,18 +225,21 @@ export class ConnectionDialogWidget extends Modal {
}));
this._panel.pushTab(this.browsePanel);
const connectionDetailsGroupLabel = localize('connectionDetailsTitle', "Connection Details");
const connectionDetailsFieldSet = new FieldSet(this._body, { ariaLabel: connectionDetailsGroupLabel });
this._register(connectionDetailsFieldSet);
this._connectionDetailTitle = DOM.append(connectionDetailsFieldSet.element, DOM.$('.connection-details-title'));
this._connectionDetailTitle = DOM.append(this._body, DOM.$('.connection-details-title'));
this._connectionDetailTitle.innerText = connectionDetailsGroupLabel;
this._connectionDetailTitle.innerText = localize('connectionDetailsTitle', "Connection Details");
this._connectionTypeContainer = DOM.append(this._body, DOM.$('.connection-type'));
this._connectionTypeContainer = DOM.append(connectionDetailsFieldSet.element, DOM.$('.connection-type'));
const table = DOM.append(this._connectionTypeContainer, DOM.$('table.connection-table-content'));
table.setAttribute('role', 'presentation');
DialogHelper.appendInputSelectBox(
DialogHelper.appendRow(table, connectTypeLabel, 'connection-label', 'connection-input'), this._providerTypeSelectBox);
this._connectionUIContainer = DOM.$('.connection-provider-info', { id: 'connectionProviderInfo' });
this._body.append(this._connectionUIContainer);
connectionDetailsFieldSet.element.append(this._connectionUIContainer);
this._register(this._themeService.onDidColorThemeChange(e => this.updateTheme(e)));
this.updateTheme(this._themeService.getColorTheme());

9
src/sql/workbench/services/connection/browser/connectionWidget.ts
View File

@@ -45,6 +45,7 @@ import { AuthLibrary, getAuthLibrary } from 'sql/workbench/services/accountManag
import { adjustForMssqlAppName } from 'sql/platform/connection/common/utils';
import { isMssqlAuthProviderEnabled } from 'sql/workbench/services/connection/browser/utils';
import { RequiredIndicatorClassName } from 'sql/base/browser/ui/label/label';
import { FieldSet } from 'sql/base/browser/ui/fieldset/fieldset';
const ConnectionStringText = localize('connectionWidget.connectionString', "Connection string");
@@ -214,9 +215,11 @@ export class ConnectionWidget extends lifecycle.Disposable {
private addInputOptionRadioButtons(): void {
if (this._connectionStringOptions.isEnabled) {
const groupName = 'input-option-type';
const inputOptionsContainer = DialogHelper.appendRow(this._tableContainer, '', 'connection-label', 'connection-input', 'connection-input-options');
this._defaultInputOptionRadioButton = new RadioButton(inputOptionsContainer, { label: 'Parameters', checked: !this._connectionStringOptions.isDefault });
this._connectionStringRadioButton = new RadioButton(inputOptionsContainer, { label: 'Connection String', checked: this._connectionStringOptions.isDefault });
const inputTypeLabel = localize('connectionWidget.inputTypeLabel', "Input type");
const inputOptionsContainer = DialogHelper.appendRow(this._tableContainer, inputTypeLabel, 'connection-label', 'connection-input', 'connection-input-options');
const inputTypeGroup = new FieldSet(inputOptionsContainer, { ariaLabel: inputTypeLabel });
this._defaultInputOptionRadioButton = new RadioButton(inputTypeGroup.element, { label: localize('connectionWidget.inputType.parameters', "Parameters"), checked: !this._connectionStringOptions.isDefault });
this._connectionStringRadioButton = new RadioButton(inputTypeGroup.element, { label: localize('connectionWidget.inputType.connectionString', "Connection String"), checked: this._connectionStringOptions.isDefault });
this._defaultInputOptionRadioButton.name = groupName;
this._connectionStringRadioButton.name = groupName;
this._register(this._defaultInputOptionRadioButton);