From 2b4dfcc34cb9cb2a5621398433505d1b03384023 Mon Sep 17 00:00:00 2001 From: Christof Marti Date: Fri, 20 Apr 2018 16:40:05 +0200 Subject: [PATCH] Prompt and validation message (#48116) --- .../browser/parts/quickinput/quickInput.css | 7 ++++ .../browser/parts/quickinput/quickInput.ts | 35 +++++++++++++++---- 2 files changed, 35 insertions(+), 7 deletions(-) diff --git a/src/vs/workbench/browser/parts/quickinput/quickInput.css b/src/vs/workbench/browser/parts/quickinput/quickInput.css index 28ec8b5c3dd98..240530d12b2c0 100644 --- a/src/vs/workbench/browser/parts/quickinput/quickInput.css +++ b/src/vs/workbench/browser/parts/quickinput/quickInput.css @@ -30,6 +30,9 @@ .quick-input-box { flex-grow: 1; +} + +.quick-input-widget[data-type=selectMany] .quick-input-box { margin-left: 5px; } @@ -53,6 +56,10 @@ line-height: initial; } +.quick-input-message { + margin: 0px 11px; +} + .quick-input-progress.monaco-progress-container, .quick-input-progress.monaco-progress-container .progress-bit { height: 2px; diff --git a/src/vs/workbench/browser/parts/quickinput/quickInput.ts b/src/vs/workbench/browser/parts/quickinput/quickInput.ts index 4e938ce673ab9..dfd57a3fe5639 100644 --- a/src/vs/workbench/browser/parts/quickinput/quickInput.ts +++ b/src/vs/workbench/browser/parts/quickinput/quickInput.ts @@ -31,6 +31,7 @@ import { ProgressBar } from 'vs/base/browser/ui/progressbar/progressbar'; import { chain } from 'vs/base/common/event'; import { Button } from 'vs/base/browser/ui/button/button'; import { dispose, IDisposable } from 'vs/base/common/lifecycle'; +import { onUnexpectedError } from 'vs/base/common/errors'; const $ = dom.$; @@ -52,6 +53,7 @@ export interface SelectManyParameters export interface TextInputParameters extends BaseInputParameters { readonly type: 'textInput'; readonly value?: string; + readonly prompt?: string; readonly validateInput?: (input: string) => TPromise; } @@ -59,6 +61,7 @@ interface QuickInputUI { checkAll: HTMLInputElement; inputBox: QuickInputBox; count: CountBadge; + message: HTMLElement; checkboxList: QuickInputCheckboxList; } @@ -84,6 +87,8 @@ class SelectManyController implements InputController< }); this.result.then(() => this.closed = true, () => this.closed = true); + ui.inputBox.value = ''; + ui.inputBox.setPlaceholder(parameters.placeHolder || ''); ui.checkboxList.matchOnDescription = parameters.matchOnDescription; ui.checkboxList.matchOnDetail = parameters.matchOnDetail; ui.checkboxList.setElements([]); @@ -104,10 +109,11 @@ class SelectManyController implements InputController< } class TextInputController implements InputController { - public showUI = { inputBox: true }; + public showUI = { inputBox: true, message: true }; public result: TPromise; public ready = TPromise.as(null); public resolve: (ok?: true | Thenable) => void; + private validationValue: string; private disposables: IDisposable[] = []; constructor(ui: QuickInputUI, parameters: TextInputParameters) { @@ -117,10 +123,22 @@ class TextInputController implements InputController { this.result.then(() => this.dispose()); ui.inputBox.value = parameters.value || ''; + ui.inputBox.setPlaceholder(parameters.placeHolder || ''); + const defaultMessage = parameters.prompt + ? localize('inputModeEntryDescription', "{0} (Press 'Enter' to confirm or 'Escape' to cancel)", parameters.prompt) + : localize('inputModeEntry', "Press 'Enter' to confirm your input or 'Escape' to cancel"); + ui.message.textContent = defaultMessage; + if (parameters.validateInput) { this.disposables.push(ui.inputBox.onDidChange(value => { - parameters.validateInput(value); - // TODO + this.validationValue = value; + parameters.validateInput(value) + .then(validationError => { + if (this.validationValue === value) { + ui.message.textContent = validationError || defaultMessage; + } + }) + .then(null, onUnexpectedError); })); } } @@ -218,6 +236,8 @@ export class QuickInputService extends Component implements IQuickInputService { } })); + const message = dom.append(this.container, $('.quick-input-message')); + this.progressBar = new ProgressBar(this.container); dom.addClass(this.progressBar.getContainer(), 'quick-input-progress'); this.toUnbind.push(attachProgressBarStyler(this.progressBar, this.themeService)); @@ -289,7 +309,7 @@ export class QuickInputService extends Component implements IQuickInputService { this.toUnbind.push(this.quickOpenService.onShow(() => this.close())); - this.ui = { checkAll, inputBox, count, checkboxList }; + this.ui = { checkAll, inputBox, count, message, checkboxList }; this.updateStyles(); } @@ -315,6 +335,7 @@ export class QuickInputService extends Component implements IQuickInputService { return this.show({ type: 'textInput', value: options.value, + prompt: options.prompt, placeHolder: options.placeHolder, ignoreFocusLost: options.ignoreFocusLost, validateInput: options.validateInput, @@ -330,10 +351,9 @@ export class QuickInputService extends Component implements IQuickInputService { this.controller.resolve(); } - this.ignoreFocusLost = parameters.ignoreFocusLost; + this.container.setAttribute('data-type', parameters.type); - this.ui.inputBox.value = ''; - this.ui.inputBox.setPlaceholder(parameters.placeHolder || ''); + this.ignoreFocusLost = parameters.ignoreFocusLost; this.progressBar.stop(); this.ready = false; @@ -343,6 +363,7 @@ export class QuickInputService extends Component implements IQuickInputService { this.filterContainer.style.display = this.controller.showUI.inputBox ? null : 'none'; this.countContainer.style.display = this.controller.showUI.count ? null : 'none'; this.okContainer.style.display = this.controller.showUI.ok ? null : 'none'; + this.ui.message.style.display = this.controller.showUI.message ? null : 'none'; this.ui.checkboxList.display(this.controller.showUI.checkboxList); this.container.style.display = null;