development/vscode
development/vscode
1
0
Fork 0
mirror of https://github.com/Microsoft/vscode synced 2024-09-13 21:55:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update quick input message style to match other error messages (#72393)

Browse source
This commit is contained in:
Alex Ross 2019-04-16 16:15:31 +02:00 committed by GitHub
parent 044c8ed8e1
commit eb383430e8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 36 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/vs/base/browser/ui/inputbox/inputBox.ts
View file

@ -365,7 +365,7 @@ export class InputBox extends Widget {
return !errorMsg;
}
private stylesForType(type: MessageType | undefined): { border: Color | undefined; background: Color | undefined; foreground: Color | undefined } {
public stylesForType(type: MessageType | undefined): { border: Color | undefined; background: Color | undefined; foreground: Color | undefined } {
switch (type) {
case MessageType.INFO: return { border: this.inputValidationInfoBorder, background: this.inputValidationInfoBackground, foreground: this.inputValidationInfoForeground };
case MessageType.WARNING: return { border: this.inputValidationWarningBorder, background: this.inputValidationWarningBackground, foreground: this.inputValidationWarningForeground };

13
src/vs/workbench/browser/parts/quickinput/quickInput.css
View file

@ -50,6 +50,13 @@
padding: 6px 6px 4px 6px;
}
.quick-input-and-message {
display: flex;
flex-direction: column;
flex-grow: 1;
position: relative;
}
.quick-input-check-all {
align-self: center;
margin: 0;
@ -65,7 +72,8 @@
flex-grow: 1;
}
.quick-input-widget.show-checkboxes .quick-input-box {
.quick-input-widget.show-checkboxes .quick-input-box,
.quick-input-widget.show-checkboxes .quick-input-message {
margin-left: 5px;
}
@ -95,7 +103,8 @@
}
.quick-input-message {
margin: 0px 11px;
margin-top: -1px;
padding: 6px 5px 2px 5px;
}
.quick-input-progress.monaco-progress-container {

25
src/vs/workbench/browser/parts/quickinput/quickInput.ts
View file

@ -301,6 +301,18 @@ class QuickInput implements IQuickInput {
return '';
}
protected showMessageDecoration(severity: Severity) {
this.ui.inputBox.showDecoration(severity);
if (severity === Severity.Error) {
const styles = this.ui.inputBox.stylesForType(severity);
this.ui.message.style.backgroundColor = styles.background ? `${styles.background}` : null;
this.ui.message.style.border = styles.border ? `1px solid ${styles.border}` : null;
} else {
this.ui.message.style.backgroundColor = '';
this.ui.message.style.border = '';
}
}
public dispose(): void {
this.hide();
this.disposables = dispose(this.disposables);
@ -742,10 +754,10 @@ class QuickPick<T extends IQuickPickItem> extends QuickInput implements IQuickPi
}
if (this.validationMessage) {
this.ui.message.textContent = this.validationMessage;
this.ui.inputBox.showDecoration(Severity.Error);
this.showMessageDecoration(Severity.Error);
} else {
this.ui.message.textContent = null;
this.ui.inputBox.showDecoration(Severity.Ignore);
this.showMessageDecoration(Severity.Info);
}
this.ui.customButton.label = this.customLabel;
this.ui.customButton.element.title = this.customHover;
@ -876,11 +888,11 @@ class InputBox extends QuickInput implements IInputBox {
}
if (!this.validationMessage && this.ui.message.textContent !== this.noValidationMessage) {
this.ui.message.textContent = this.noValidationMessage;
this.ui.inputBox.showDecoration(Severity.Ignore);
this.showMessageDecoration(Severity.Info);
}
if (this.validationMessage && this.ui.message.textContent !== this.validationMessage) {
this.ui.message.textContent = this.validationMessage;
this.ui.inputBox.showDecoration(Severity.Error);
this.showMessageDecoration(Severity.Error);
}
this.ui.setVisibilities({ title: !!this.title || !!this.step, inputBox: true, message: true });
}
@ -1044,7 +1056,8 @@ export class QuickInputService extends Component implements IQuickInputService {
}
}));
this.filterContainer = dom.append(headerContainer, $('.quick-input-filter'));
const extraContainer = dom.append(headerContainer, $('.quick-input-and-message'));
this.filterContainer = dom.append(extraContainer, $('.quick-input-filter'));
const inputBox = this._register(new QuickInputBox(this.filterContainer));
inputBox.setAttribute('aria-describedby', `${this.idPrefix}message`);
@ -1075,7 +1088,7 @@ export class QuickInputService extends Component implements IQuickInputService {
this.onDidCustomEmitter.fire();
}));
const message = dom.append(container, $(`#${this.idPrefix}message.quick-input-message`));
const message = dom.append(extraContainer, $(`#${this.idPrefix}message.quick-input-message`));
const progressBar = new ProgressBar(container);
dom.addClass(progressBar.getContainer(), 'quick-input-progress');

4
src/vs/workbench/browser/parts/quickinput/quickInputBox.ts
View file

@ -101,6 +101,10 @@ export class QuickInputBox {
}
}
stylesForType(decoration: Severity) {
return this.inputBox.stylesForType(decoration === Severity.Info ? MessageType.INFO : decoration === Severity.Warning ? MessageType.WARNING : MessageType.ERROR);
}
setFocus(): void {
this.inputBox.focus();
}

1
src/vs/workbench/services/dialogs/browser/remoteFileDialog.ts
View file

@ -179,6 +179,7 @@ export class RemoteFileDialog {
this.filePickBox = this.quickInputService.createQuickPick<FileQuickPickItem>();
this.filePickBox.matchOnLabel = false;
this.filePickBox.autoFocusOnList = false;
this.filePickBox.ignoreFocusOut = true;
this.filePickBox.ok = true;
if (this.options && this.options.availableFileSystems && (this.options.availableFileSystems.length > 1)) {
this.filePickBox.customButton = true;