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

Add info/warning/error messages for wizards and dialogs (#1696)

Browse Source
This commit is contained in:
Matt Irvine
2018-06-21 11:55:23 -07:00
committed by GitHub
parent 9d2b206156
commit f5b147ca4b
16 changed files with 238 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/sql/base/browser/ui/modal/media/modal.css
View File

@@ -172,4 +172,22 @@
margin-right: 10px;
width: 20px;
height: 20px;
}
.modal .modal-footer .dialogErrorMessage {
align-items: center;
max-height: 30px;
margin-right: 5px;
}
.modal .dialogErrorMessage .icon {
float: left;
margin-right: 10px;
width: auto;
height: 20px;
}
.modal .modal-footer .dialogErrorMessage .errorMessage {
max-height: 100%;
overflow-y: scroll;
}

53
src/sql/base/browser/ui/modal/modal.ts
View File

@@ -21,9 +21,13 @@ import { Button } from 'sql/base/browser/ui/button/button';
import * as TelemetryUtils from 'sql/common/telemetryUtilities';
import * as TelemetryKeys from 'sql/common/telemetryKeys';
import { localize } from 'vs/nls';
import { MessageLevel } from 'sql/workbench/api/common/sqlExtHostTypes';
export const MODAL_SHOWING_KEY = 'modalShowing';
export const MODAL_SHOWING_CONTEXT = new RawContextKey<Array<string>>(MODAL_SHOWING_KEY, []);
const INFO_ALT_TEXT = localize('infoAltText', 'Info');
const WARNING_ALT_TEXT = localize('warningAltText', 'Warning');
const ERROR_ALT_TEXT = localize('errorAltText', 'Error');
export interface IModalDialogStyles {
dialogForeground?: Color;
@@ -145,7 +149,7 @@ export abstract class Modal extends Disposable implements IThemable {
/**
* Build and render the modal, will call {@link Modal#renderBody}
*/
public render() {
public render(errorMessagesInFooter: boolean = false) {
let modalBodyClass = (this._modalOptions.isAngular === false ? 'modal-body' : 'modal-body-and-footer');
let parts: Array<HTMLElement> = [];
// This modal header section refers to the header of of the dialog
@@ -182,17 +186,6 @@ export abstract class Modal extends Disposable implements IThemable {
this.renderBody(body.getHTMLElement());
if (this._modalOptions.isAngular === false && this._modalOptions.hasErrors) {
body.div({ class: 'dialogErrorMessage', id: 'dialogErrorMessage' }, (errorMessageContainer) => {
errorMessageContainer.div({ class: 'icon error' }, (iconContainer) => {
this._errorIconElement = iconContainer.getHTMLElement();
this._errorIconElement.style.visibility = 'hidden';
});
errorMessageContainer.div({ class: 'errorMessage' }, (messageContainer) => {
this._errorMessage = messageContainer;
});
});
}
// This modal footer section refers to the footer of of the dialog
if (this._modalOptions.isAngular === false) {
this._modalFooterSection = $().div({ class: 'modal-footer' }, (modelFooter) => {
@@ -221,6 +214,19 @@ export abstract class Modal extends Disposable implements IThemable {
builderClass += ' wide';
}
if (this._modalOptions.isAngular === false && this._modalOptions.hasErrors) {
let builder = errorMessagesInFooter ? this._leftFooter : body;
builder.div({ class: 'dialogErrorMessage', id: 'dialogErrorMessage' }, (errorMessageContainer) => {
errorMessageContainer.div({ class: 'icon error' }, (iconContainer) => {
this._errorIconElement = iconContainer.getHTMLElement();
this._errorIconElement.style.visibility = 'hidden';
});
errorMessageContainer.div({ class: 'errorMessage' }, (messageContainer) => {
this._errorMessage = messageContainer;
});
});
}
// The builder builds the dialog. It append header, body and footer sections.
this._builder = $().div({ class: builderClass, 'role': 'dialog' }, (dialogContainer) => {
this._modalDialog = dialogContainer.div({ class: 'modal-dialog ', role: 'document' }, (modalDialog) => {
@@ -355,14 +361,33 @@ export abstract class Modal extends Disposable implements IThemable {
* Show an error in the error message element
* @param err Text to show in the error message
*/
protected setError(err: string) {
protected setError(err: string, level: MessageLevel = MessageLevel.Error) {
if (this._modalOptions.hasErrors) {
if (err === '') {
this._errorIconElement.style.visibility = 'hidden';
} else {
const levelClasses = ['info', 'warning', 'error'];
let selectedLevel = levelClasses[2];
let altText = ERROR_ALT_TEXT;
if (level === MessageLevel.Information) {
selectedLevel = levelClasses[0];
altText = INFO_ALT_TEXT;
} else if (level === MessageLevel.Warning) {
selectedLevel = levelClasses[1];
altText = WARNING_ALT_TEXT;
}
levelClasses.forEach(level => {
if (selectedLevel === level) {
this._errorIconElement.classList.add(level);
} else {
this._errorIconElement.classList.remove(level);
}
});
this._errorIconElement.title = altText;
this._errorIconElement.style.visibility = 'visible';
}
this._errorMessage.innerHtml(err);
this._errorMessage.text(err);
}
}