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

fix normal dialog vertical scrolling issue (#23177)

Browse Source
This commit is contained in:
Alan Ren
2023-05-19 16:51:55 -07:00
committed by GitHub
parent e322641538
commit 5356cd7748
10 changed files with 64 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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;
}

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

@@ -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}`));