diff --git a/src/sql/workbench/browser/modal/media/modal.css b/src/sql/workbench/browser/modal/media/modal.css index 1385380a03..d83f1612c7 100644 --- a/src/sql/workbench/browser/modal/media/modal.css +++ b/src/sql/workbench/browser/modal/media/modal.css @@ -18,12 +18,21 @@ border-width: 1px; } -.modal:not(.flyout-dialog):not(.callout-dialog) .modal-dialog { +.modal.normal-dialog .modal-dialog { margin: auto; width: 640px; - max-height: 480px; } +.modal.normal-dialog .modal-dialog .modal-content { + display: flex; + flex-direction: column; + height: 100%; +} + +.modal.normal-dialog .modal-dialog .modal-content .modal-body { + flex: 1 1 auto; + overflow-y: auto; +} .modal .modal-header { padding: 15px; } diff --git a/src/sql/workbench/browser/modal/modal.ts b/src/sql/workbench/browser/modal/modal.ts index 99a1a67e03..bb963ee732 100644 --- a/src/sql/workbench/browser/modal/modal.ts +++ b/src/sql/workbench/browser/modal/modal.ts @@ -85,6 +85,10 @@ export interface IModalOptions { renderHeader?: boolean; renderFooter?: boolean; dialogProperties?: IDialogProperties; + /** + * The height of the dialog, only applicable when the dialog style is normal. + */ + height?: number; } const defaultOptions: IModalOptions = { @@ -98,7 +102,8 @@ const defaultOptions: IModalOptions = { hasSpinner: true, renderHeader: true, renderFooter: true, - dialogProperties: undefined + dialogProperties: undefined, + height: 480 }; export type HideReason = 'close' | 'cancel' | 'ok'; @@ -210,9 +215,16 @@ export abstract class Modal extends Disposable implements IThemable { let top: number; let builderClass = '.modal.fade'; - builderClass += this._modalOptions.dialogStyle === 'flyout' ? '.flyout-dialog' - : this._modalOptions.dialogStyle === 'callout' ? '.callout-dialog' - : ''; + switch (this._modalOptions.dialogStyle) { + case 'flyout': + builderClass += '.flyout-dialog'; + break; + case 'callout': + builderClass += '.callout-dialog'; + break; + default: + builderClass += '.normal-dialog'; + } this._bodyContainer = DOM.$(`${builderClass}`, { role: 'dialog', 'aria-label': this._title }); @@ -225,6 +237,12 @@ export abstract class Modal extends Disposable implements IThemable { this._modalDialog = DOM.append(this._bodyContainer, DOM.$('.modal-dialog')); const formElement = DOM.append(this._modalDialog, DOM.$('form')); + if (this._modalOptions.dialogStyle === 'normal') { + // set the height based on the available space and the expected height. + // so that the dialog can scroll vertically when needed. + this._modalDialog.style.height = `min(100%, ${this._modalOptions.height}px)`; + } + if (this._modalOptions.dialogStyle === 'callout') { let arrowClass = `.callout-arrow.from-${this._modalOptions.dialogPosition}`; this._modalContent = DOM.append(formElement, DOM.$(`.modal-content${arrowClass}`)); diff --git a/src/sql/workbench/services/connection/browser/media/passwordDialog.css b/src/sql/workbench/services/connection/browser/media/passwordDialog.css index 4115f7b940..aa787e7854 100644 --- a/src/sql/workbench/services/connection/browser/media/passwordDialog.css +++ b/src/sql/workbench/services/connection/browser/media/passwordDialog.css @@ -3,18 +3,11 @@ * Licensed under the Source EULA. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ .change-password-dialog { - padding: 30px; - height: 100%; - overflow: hidden; + padding: 10px; display: flex; flex-direction: column; } -.change-password-dialog .properties-content { - flex: 1 1 auto; - overflow-y: auto; -} - .change-password-dialog .component-label-bold { font-weight: 600; padding-bottom: 30px; diff --git a/src/sql/workbench/services/connection/browser/passwordChangeDialog.ts b/src/sql/workbench/services/connection/browser/passwordChangeDialog.ts index 3bc51e40e5..598855bc47 100644 --- a/src/sql/workbench/services/connection/browser/passwordChangeDialog.ts +++ b/src/sql/workbench/services/connection/browser/passwordChangeDialog.ts @@ -57,7 +57,7 @@ export class PasswordChangeDialog extends Modal { @IContextViewService private readonly contextViewService: IContextViewService, @ITextResourcePropertiesService textResourcePropertiesService: ITextResourcePropertiesService, ) { - super('', '', telemetryService, layoutService, clipboardService, themeService, logService, textResourcePropertiesService, contextKeyService, { hasSpinner: true, spinnerTitle: passwordChangeLoadText, dialogStyle: 'normal', width: dialogWidth, dialogPosition: 'left' }); + super('', '', telemetryService, layoutService, clipboardService, themeService, logService, textResourcePropertiesService, contextKeyService, { hasSpinner: true, spinnerTitle: passwordChangeLoadText, dialogStyle: 'normal', width: dialogWidth, dialogPosition: 'left', height: 350 }); } public open(profile: IConnectionProfile): Promise { diff --git a/src/sql/workbench/services/errorMessage/browser/errorMessageDialog.ts b/src/sql/workbench/services/errorMessage/browser/errorMessageDialog.ts index 223d7953a7..0b1cbe1715 100644 --- a/src/sql/workbench/services/errorMessage/browser/errorMessageDialog.ts +++ b/src/sql/workbench/services/errorMessage/browser/errorMessageDialog.ts @@ -62,7 +62,7 @@ export class ErrorMessageDialog extends Modal { @IOpenerService private readonly _openerService: IOpenerService, protected _telemetryView: TelemetryKeys.TelemetryView | string = TelemetryKeys.TelemetryView.ErrorMessageDialog, ) { - super('', TelemetryKeys.ModalDialogName.ErrorMessage, telemetryService, layoutService, clipboardService, themeService, logService, textResourcePropertiesService, contextKeyService, { dialogStyle: 'normal', hasTitleIcon: true }); + super('', TelemetryKeys.ModalDialogName.ErrorMessage, telemetryService, layoutService, clipboardService, themeService, logService, textResourcePropertiesService, contextKeyService, { dialogStyle: 'normal', hasTitleIcon: true, height: 340 }); this._okLabel = localize('errorMessageDialog.ok', "OK"); this._closeLabel = localize('errorMessageDialog.close', "Close"); this._readMoreLabel = localize('errorMessageDialog.readMore', "Read More"); diff --git a/src/sql/workbench/services/errorMessage/browser/media/errorMessageDialog.css b/src/sql/workbench/services/errorMessage/browser/media/errorMessageDialog.css index a1121791e1..bdf476dd9e 100644 --- a/src/sql/workbench/services/errorMessage/browser/media/errorMessageDialog.css +++ b/src/sql/workbench/services/errorMessage/browser/media/errorMessageDialog.css @@ -4,9 +4,8 @@ *--------------------------------------------------------------------------------------------*/ .error-dialog { - padding: 15px; - overflow: auto; - height: 210px; + padding: 10px; + height: calc(100% - 20px); } .error-dialog .codicon.error, .error-dialog .codicon.warning , .error-dialog .codicon.info { diff --git a/src/sql/workbench/services/objectExplorer/browser/media/filterDialog.css b/src/sql/workbench/services/objectExplorer/browser/media/filterDialog.css index 96c3ab0397..0b69a9b71f 100644 --- a/src/sql/workbench/services/objectExplorer/browser/media/filterDialog.css +++ b/src/sql/workbench/services/objectExplorer/browser/media/filterDialog.css @@ -4,10 +4,11 @@ *--------------------------------------------------------------------------------------------*/ .filter-dialog-body { - height: 400px; padding: 10px; display: flex; flex-direction: column; + height: calc(100% - 20px); + overflow: hidden; } .filter-table-container .filter-table { diff --git a/src/sql/workbench/services/profiler/browser/media/profilerFilterDialog.css b/src/sql/workbench/services/profiler/browser/media/profilerFilterDialog.css index 05d6a8b8d2..d9b7dba7ea 100644 --- a/src/sql/workbench/services/profiler/browser/media/profilerFilterDialog.css +++ b/src/sql/workbench/services/profiler/browser/media/profilerFilterDialog.css @@ -4,8 +4,11 @@ *--------------------------------------------------------------------------------------------*/ .profiler-filter-dialog { - height: 300px; padding: 10px; + display: flex; + flex-direction: column; + height: calc(100% - 20px); + overflow: flex; } .profiler-filter-clause-table { @@ -13,9 +16,9 @@ margin-bottom: 10px; } -.clause-table-container{ - max-height: 270px; +.clause-table-container { overflow-y: scroll; + flex: 1 1 auto; } .profiler-filter-remove-condition { @@ -24,10 +27,14 @@ cursor: pointer; } +.profiler-filter-dialog .actions-container { + display: flex; + flex-direction: row; +} + .profiler-filter-clause-table-action { cursor: pointer; margin-right: 10px; padding: 2px; text-decoration: underline; - display: inline-block; -} \ No newline at end of file +} diff --git a/src/sql/workbench/services/profiler/browser/profilerFilterDialog.ts b/src/sql/workbench/services/profiler/browser/profilerFilterDialog.ts index 6d314cb367..9b3e562652 100644 --- a/src/sql/workbench/services/profiler/browser/profilerFilterDialog.ts +++ b/src/sql/workbench/services/profiler/browser/profilerFilterDialog.ts @@ -119,24 +119,27 @@ export class ProfilerFilterDialog extends Modal { protected renderBody(container: HTMLElement) { const body = DOM.append(container, DOM.$('.profiler-filter-dialog')); const clauseTableContainer = DOM.append(body, DOM.$('.clause-table-container')); + const actionsContainer = DOM.append(body, DOM.$('.actions-container')); this._clauseBuilder = DOM.append(clauseTableContainer, DOM.$('table.profiler-filter-clause-table')); const headerRow = DOM.append(this._clauseBuilder, DOM.$('tr')); - DOM.append(headerRow, DOM.$('td')).innerText = FieldText; - DOM.append(headerRow, DOM.$('td')).innerText = OperatorText; - DOM.append(headerRow, DOM.$('td')).innerText = ValueText; - DOM.append(headerRow, DOM.$('td')).innerText = ''; + DOM.append(headerRow, DOM.$('th')).innerText = FieldText; + DOM.append(headerRow, DOM.$('th')).innerText = OperatorText; + DOM.append(headerRow, DOM.$('th')).innerText = ValueText; + DOM.append(headerRow, DOM.$('th')).innerText = ''; this._input!.filter.clauses.forEach(clause => { this.addClauseRow(true, clause.field, this.convertToOperatorString(clause.operator), clause.value); }); - this.createClauseTableActionLink(AddClauseText, body, () => { + + + this.createClauseTableActionLink(AddClauseText, actionsContainer, () => { this.addClauseRow(false); // Set keyboard focus to the newly added clause. this._clauseRows[this._clauseRows.length - 1]?.field?.focus(); aria.status(NewClauseAddedText); }); - this.createClauseTableActionLink(ClearText, body, () => { this.handleClearButtonClick(); }); + this.createClauseTableActionLink(ClearText, actionsContainer, () => { this.handleClearButtonClick(); }); } protected layout(height?: number): void { @@ -169,7 +172,8 @@ export class ProfilerFilterDialog extends Modal { private createClauseTableActionLink(text: string, parent: HTMLElement, handler: () => void): void { const actionLink = DOM.append(parent, DOM.$('.profiler-filter-clause-table-action', { 'tabIndex': '0', - 'role': 'button' + 'role': 'button', + 'aria-label': text })); actionLink.innerText = text; DOM.addDisposableListener(actionLink, DOM.EventType.CLICK, handler); diff --git a/src/sql/workbench/services/tableDesigner/browser/media/tableDesignerPublishDialog.css b/src/sql/workbench/services/tableDesigner/browser/media/tableDesignerPublishDialog.css index 9a14fc8ee1..1357a6ac64 100644 --- a/src/sql/workbench/services/tableDesigner/browser/media/tableDesignerPublishDialog.css +++ b/src/sql/workbench/services/tableDesigner/browser/media/tableDesignerPublishDialog.css @@ -4,7 +4,7 @@ *--------------------------------------------------------------------------------------------*/ .table-designer-publish-dialog { - height: 350px; + height: calc(100% - 20px); padding: 10px; display: flex; flex-direction: column;