ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-01-22 01:25:38 -05:00
Code Issues Packages Projects Releases Wiki Activity

add custom width support for dialogs (#10641)

Browse Source 
* add custom width support for dialogs

* comments

* fix test
This commit is contained in:
Alan Ren
2020-06-03 13:08:48 -07:00
committed by GitHub
parent 2e4aee944c
commit c4be667567
12 changed files with 123 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -35,12 +35,20 @@
.modal.flyout-dialog .modal-dialog {
margin: auto auto auto auto;
height: 100%;
width: 500px;
right: 0;
position: absolute;
overflow-y: hidden;
}
.modal.flyout-dialog.wide .modal-dialog {
.modal.flyout-dialog .modal-dialog.narrow-dialog {
width: 500px;
}
.modal.flyout-dialog .modal-dialog.medium-dialog {
width: 800px;
}
.modal.flyout-dialog .modal-dialog.wide-dialog {
width: 1200px;
max-width: 95%;
min-width: 400px;

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

@@ -56,9 +56,11 @@ export interface IModalDialogStyles {
footerBorderTopColor?: Color;
}
export type DialogWidth = 'narrow' | 'medium' | 'wide' | number;
export interface IModalOptions {
isFlyout?: boolean;
isWide?: boolean;
width?: DialogWidth;
isAngular?: boolean;
hasBackButton?: boolean;
hasTitleIcon?: boolean;
@@ -69,7 +71,7 @@ export interface IModalOptions {
const defaultOptions: IModalOptions = {
isFlyout: true,
isWide: false,
width: 'narrow',
isAngular: false,
hasBackButton: false,
hasTitleIcon: false,
@@ -175,16 +177,18 @@ export abstract class Modal extends Disposable implements IThemable {
builderClass += ' flyout-dialog';
}
if (this._modalOptions.isWide) {
builderClass += ' wide';
}
this._bodyContainer = DOM.$(`.${builderClass}`, { role: 'dialog', 'aria-label': this._title });
const top = this.layoutService.offset?.top ?? 0;
this._bodyContainer.style.top = `${top}px`;
this._modalDialog = DOM.append(this._bodyContainer, DOM.$('.modal-dialog'));
this._modalContent = DOM.append(this._modalDialog, DOM.$('.modal-content'));
if (typeof this._modalOptions.width === 'number') {
this._modalDialog.style.width = `${this._modalOptions.width}px`;
} else {
this._modalDialog.classList.add(`${this._modalOptions.width}-dialog`);
}
if (!isUndefinedOrNull(this._title)) {
this._modalHeaderSection = DOM.append(this._modalContent, DOM.$('.modal-header'));
if (this._modalOptions.hasBackButton) {