Wizard message UI improvement (#2971)

* improve the wizard message experience - WIP

* undo gitignorechanges

* fix expand button issue

* fix the cursor issue

* use flex to control height

* toggle message detail support

* apply style

* new images

* use template string

* address comments
This commit is contained in:
Alan Ren
2018-10-22 23:53:28 -07:00
committed by GitHub
parent 29cc57f52a
commit 82486ee22e
38 changed files with 339 additions and 105 deletions

View File

@@ -25,6 +25,7 @@ import { Emitter } from 'vs/base/common/event';
import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
import { DialogMessage, MessageLevel } from '../../workbench/api/common/sqlExtHostTypes';
import { IClipboardService } from 'vs/platform/clipboard/common/clipboardService';
export class DialogModal extends Modal {
private _dialogPane: DialogPane;
@@ -43,9 +44,10 @@ export class DialogModal extends Modal {
@IWorkbenchThemeService private _themeService: IWorkbenchThemeService,
@ITelemetryService telemetryService: ITelemetryService,
@IContextKeyService contextKeyService: IContextKeyService,
@IClipboardService clipboardService: IClipboardService,
@IInstantiationService private _instantiationService: IInstantiationService
) {
super(_dialog.title, name, partService, telemetryService, contextKeyService, options);
super(_dialog.title, name, partService, telemetryService, clipboardService, contextKeyService, options);
}
public layout(): void {
@@ -53,7 +55,7 @@ export class DialogModal extends Modal {
}
public render() {
super.render(true);
super.render();
attachModalDialogStyler(this, this._themeService);
if (this.backButton) {
@@ -78,7 +80,7 @@ export class DialogModal extends Modal {
let messageChangeHandler = (message: DialogMessage) => {
if (message && message.text) {
this.setError(message.text, message.level);
this.setError(message.text, message.level, message.description);
} else {
this.setError('');
}

View File

@@ -63,10 +63,8 @@ export class Dialog extends ModelViewPane {
}
public set message(value: DialogMessage) {
if (this._message && !value || !this._message && value || this._message && value && (this._message.level !== value.level || this._message.text !== value.text)) {
this._message = value;
this._onMessageChange.fire(this._message);
}
this._message = value;
this._onMessageChange.fire(this._message);
}
public registerCloseValidator(validator: () => boolean | Thenable<boolean>): void {
@@ -255,9 +253,7 @@ export class Wizard {
}
public set message(value: DialogMessage) {
if (this._message && !value || !this._message && value || this._message && value && (this._message.level !== value.level || this._message.text !== value.text)) {
this._message = value;
this._onMessageChange.fire(this._message);
}
this._message = value;
this._onMessageChange.fire(this._message);
}
}

View File

@@ -21,6 +21,7 @@
flex-direction: column;
width: 100%;
height: 100%;
overflow: scroll;
}
.dialogModal-hidden {

View File

@@ -7,8 +7,7 @@
display: flex;
flex-direction: column;
width: 80px;
height: calc(100% + 25px);
margin-top: -25px;
height: 100%;
}
.hc-black .wizardNavigation-container {
@@ -24,7 +23,7 @@
flex-direction: column;
align-items: center;
justify-content: center;
max-height: 130px;
max-height: 100px;
}
.wizardNavigation-pageNumber a {

View File

@@ -24,6 +24,7 @@ import { attachButtonStyler } from 'vs/platform/theme/common/styler';
import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
import { Emitter } from 'vs/base/common/event';
import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
import { IClipboardService } from 'vs/platform/clipboard/common/clipboardService';
export class WizardModal extends Modal {
private _dialogPanes = new Map<WizardPage, DialogPane>();
@@ -48,9 +49,10 @@ export class WizardModal extends Modal {
@IWorkbenchThemeService private _themeService: IWorkbenchThemeService,
@ITelemetryService telemetryService: ITelemetryService,
@IContextKeyService contextKeyService: IContextKeyService,
@IInstantiationService private _instantiationService: IInstantiationService
@IInstantiationService private _instantiationService: IInstantiationService,
@IClipboardService clipboardService: IClipboardService
) {
super(_wizard.title, name, partService, telemetryService, contextKeyService, options);
super(_wizard.title, name, partService, telemetryService, clipboardService, contextKeyService, options);
}
public layout(): void {
@@ -58,7 +60,7 @@ export class WizardModal extends Modal {
}
public render() {
super.render(true);
super.render();
attachModalDialogStyler(this, this._themeService);
if (this.backButton) {
@@ -83,7 +85,7 @@ export class WizardModal extends Modal {
let messageChangeHandler = (message: DialogMessage) => {
if (message && message.text) {
this.setError(message.text, message.level);
this.setError(message.text, message.level, message.description);
} else {
this.setError('');
}