Skip to content

Commit eb38343

Browse files
alexr00alexr00
authored
Update quick input message style to match other error messages (microsoft#72393)
1 parent 044c8ed commit eb38343

5 files changed

Lines changed: 36 additions & 9 deletions

File tree

‎src/vs/base/browser/ui/inputbox/inputBox.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -365,7 +365,7 @@ export class InputBox extends Widget {
365365
return !errorMsg;
366366
}
367367

368-
private stylesForType(type: MessageType | undefined): { border: Color | undefined; background: Color | undefined; foreground: Color | undefined } {
368+
public stylesForType(type: MessageType | undefined): { border: Color | undefined; background: Color | undefined; foreground: Color | undefined } {
369369
switch (type) {
370370
case MessageType.INFO: return { border: this.inputValidationInfoBorder, background: this.inputValidationInfoBackground, foreground: this.inputValidationInfoForeground };
371371
case MessageType.WARNING: return { border: this.inputValidationWarningBorder, background: this.inputValidationWarningBackground, foreground: this.inputValidationWarningForeground };

‎src/vs/workbench/browser/parts/quickinput/quickInput.css‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,13 @@
5050
padding: 6px 6px 4px 6px;
5151
}
5252

53+
.quick-input-and-message {
54+
display: flex;
55+
flex-direction: column;
56+
flex-grow: 1;
57+
position: relative;
58+
}
59+
5360
.quick-input-check-all {
5461
align-self: center;
5562
margin: 0;
@@ -65,7 +72,8 @@
6572
flex-grow: 1;
6673
}
6774

68-
.quick-input-widget.show-checkboxes .quick-input-box {
75+
.quick-input-widget.show-checkboxes .quick-input-box,
76+
.quick-input-widget.show-checkboxes .quick-input-message {
6977
margin-left: 5px;
7078
}
7179

@@ -95,7 +103,8 @@
95103
}
96104

97105
.quick-input-message {
98-
margin: 0px 11px;
106+
margin-top: -1px;
107+
padding: 6px 5px 2px 5px;
99108
}
100109

101110
.quick-input-progress.monaco-progress-container {

‎src/vs/workbench/browser/parts/quickinput/quickInput.ts‎

Lines changed: 19 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -301,6 +301,18 @@ class QuickInput implements IQuickInput {
301301
return '';
302302
}
303303

304+
protected showMessageDecoration(severity: Severity) {
305+
this.ui.inputBox.showDecoration(severity);
306+
if (severity === Severity.Error) {
307+
const styles = this.ui.inputBox.stylesForType(severity);
308+
this.ui.message.style.backgroundColor = styles.background ? `${styles.background}` : null;
309+
this.ui.message.style.border = styles.border ? `1px solid ${styles.border}` : null;
310+
} else {
311+
this.ui.message.style.backgroundColor = '';
312+
this.ui.message.style.border = '';
313+
}
314+
}
315+
304316
public dispose(): void {
305317
this.hide();
306318
this.disposables = dispose(this.disposables);
@@ -742,10 +754,10 @@ class QuickPick<T extends IQuickPickItem> extends QuickInput implements IQuickPi
742754
}
743755
if (this.validationMessage) {
744756
this.ui.message.textContent = this.validationMessage;
745-
this.ui.inputBox.showDecoration(Severity.Error);
757+
this.showMessageDecoration(Severity.Error);
746758
} else {
747759
this.ui.message.textContent = null;
748-
this.ui.inputBox.showDecoration(Severity.Ignore);
760+
this.showMessageDecoration(Severity.Info);
749761
}
750762
this.ui.customButton.label = this.customLabel;
751763
this.ui.customButton.element.title = this.customHover;
@@ -876,11 +888,11 @@ class InputBox extends QuickInput implements IInputBox {
876888
}
877889
if (!this.validationMessage && this.ui.message.textContent !== this.noValidationMessage) {
878890
this.ui.message.textContent = this.noValidationMessage;
879-
this.ui.inputBox.showDecoration(Severity.Ignore);
891+
this.showMessageDecoration(Severity.Info);
880892
}
881893
if (this.validationMessage && this.ui.message.textContent !== this.validationMessage) {
882894
this.ui.message.textContent = this.validationMessage;
883-
this.ui.inputBox.showDecoration(Severity.Error);
895+
this.showMessageDecoration(Severity.Error);
884896
}
885897
this.ui.setVisibilities({ title: !!this.title || !!this.step, inputBox: true, message: true });
886898
}
@@ -1044,7 +1056,8 @@ export class QuickInputService extends Component implements IQuickInputService {
10441056
}
10451057
}));
10461058

1047-
this.filterContainer = dom.append(headerContainer, $('.quick-input-filter'));
1059+
const extraContainer = dom.append(headerContainer, $('.quick-input-and-message'));
1060+
this.filterContainer = dom.append(extraContainer, $('.quick-input-filter'));
10481061

10491062
const inputBox = this._register(new QuickInputBox(this.filterContainer));
10501063
inputBox.setAttribute('aria-describedby', `${this.idPrefix}message`);
@@ -1075,7 +1088,7 @@ export class QuickInputService extends Component implements IQuickInputService {
10751088
this.onDidCustomEmitter.fire();
10761089
}));
10771090

1078-
const message = dom.append(container, $(`#${this.idPrefix}message.quick-input-message`));
1091+
const message = dom.append(extraContainer, $(`#${this.idPrefix}message.quick-input-message`));
10791092

10801093
const progressBar = new ProgressBar(container);
10811094
dom.addClass(progressBar.getContainer(), 'quick-input-progress');

‎src/vs/workbench/browser/parts/quickinput/quickInputBox.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -101,6 +101,10 @@ export class QuickInputBox {
101101
}
102102
}
103103

104+
stylesForType(decoration: Severity) {
105+
return this.inputBox.stylesForType(decoration === Severity.Info ? MessageType.INFO : decoration === Severity.Warning ? MessageType.WARNING : MessageType.ERROR);
106+
}
107+
104108
setFocus(): void {
105109
this.inputBox.focus();
106110
}

‎src/vs/workbench/services/dialogs/browser/remoteFileDialog.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -179,6 +179,7 @@ export class RemoteFileDialog {
179179
this.filePickBox = this.quickInputService.createQuickPick<FileQuickPickItem>();
180180
this.filePickBox.matchOnLabel = false;
181181
this.filePickBox.autoFocusOnList = false;
182+
this.filePickBox.ignoreFocusOut = true;
182183
this.filePickBox.ok = true;
183184
if (this.options && this.options.availableFileSystems && (this.options.availableFileSystems.length > 1)) {
184185
this.filePickBox.customButton = true;

0 commit comments

Comments
 (0)