Single OK button right of filter text (#45589)

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

@@ -12,21 +12,29 @@
 	margin-left: -300px;
 }
 
+.quick-input-header {
+	display: flex;
+	padding: 6px;
+}
+
 .quick-input-box {
-	margin: 6px;
+	flex-grow: 1;
 }
 
-.quick-input-actions {
-	padding: 3px;
+.quick-input-box .monaco-inputbox > .wrapper > .input {
+	padding-left: 14px;
 }
 
-.quick-input-actions button {
+.quick-input-action {
+	margin-left: 6px;
 	border: 0;
 	padding: 0px 4px 1px 4px;
-	float: right;
-	margin-left: 4px;
 }
 
-.quick-input-actions button:focus {
+.quick-input-action:focus {
 	outline:0;
-}
\ No newline at end of file
+}
+
+.quick-input-checkbox-list {
+	margin-left: 3px;
+}

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

@@ -22,6 +22,7 @@ import { QuickInputCheckboxList } from './quickInputCheckboxList';
 import { QuickInputBox } from './quickInputBox';
 import { KeyCode } from 'vs/base/common/keyCodes';
 import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
+import { localize } from 'vs/nls';
 
 const $ = dom.$;
 
@@ -57,7 +58,9 @@ export class QuickInputService extends Component implements IQuickInputService {
 		this.container = dom.append(workbench, $('.quick-input-widget'));
 		this.container.style.display = 'none';
 
-		this.inputBox = new QuickInputBox(this.container);
+		const headerContainer = dom.append(this.container, $('.quick-input-header'));
+
+		this.inputBox = new QuickInputBox(headerContainer);
 		this.toUnbind.push(this.inputBox);
 		this.inputBox.style(this.themeService.getTheme());
 		this.inputBox.onInput(value => {
@@ -85,17 +88,13 @@ export class QuickInputService extends Component implements IQuickInputService {
 			}
 		}));
 
+		const ok = dom.append(headerContainer, $('button.quick-input-action'));
+		ok.textContent = localize('ok', "OK");
+		this.toUnbind.push(dom.addDisposableListener(ok, dom.EventType.CLICK, e => this.close(true)));
+
 		this.checkboxList = this.instantiationService.createInstance(QuickInputCheckboxList, this.container);
 		this.toUnbind.push(this.checkboxList);
 
-		const buttonContainer = dom.append(this.container, $('.quick-input-actions'));
-		const cancel = dom.append(buttonContainer, $('button'));
-		cancel.textContent = 'Cancel'; // TODO
-		this.toUnbind.push(dom.addDisposableListener(cancel, dom.EventType.CLICK, e => this.close(false)));
-		const ok = dom.append(buttonContainer, $('button'));
-		ok.textContent = 'OK'; // TODO
-		this.toUnbind.push(dom.addDisposableListener(ok, dom.EventType.CLICK, e => this.close(true)));
-
 		this.toUnbind.push(dom.addDisposableListener(this.container, 'focusout', (e: FocusEvent) => {
 			for (let element = <Element>e.relatedTarget; element; element = element.parentElement) {
 				if (element === this.container) {
@@ -184,7 +183,7 @@ registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => {
 
 	const buttonBackgroundColor = theme.getColor(buttonBackground);
 	const buttonForegroundColor = theme.getColor(buttonForeground);
-	collector.addRule(`.quick-input-actions button {
+	collector.addRule(`.quick-input-action {
 		${buttonBackgroundColor ? `background-color: ${buttonBackgroundColor};` : ''}
 		${buttonForegroundColor ? `color: ${buttonForegroundColor};` : ''}
 		${contrastBorderColor ? `border: 1px solid ${contrastBorderColor};` : ''}
@@ -192,6 +191,7 @@ registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => {
 
 	const buttonHoverBackgroundColor = theme.getColor(buttonHoverBackground);
 	if (buttonHoverBackgroundColor) {
-		collector.addRule(`.quick-input-actions button:hover { background-color: ${buttonHoverBackgroundColor}; }`);
+		collector.addRule(`.quick-input-action:hover { background-color: ${buttonHoverBackgroundColor}; }`);
+		collector.addRule(`.quick-input-action:focus { background-color: ${buttonHoverBackgroundColor}; }`);
 	}
 });

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

@@ -8,7 +8,7 @@
 import 'vs/css!./quickInput';
 import * as dom from 'vs/base/browser/dom';
 import { InputBox } from 'vs/base/browser/ui/inputbox/inputBox';
-import * as nls from 'vs/nls';
+import { localize } from 'vs/nls';
 import { inputBackground, inputForeground, inputBorder } from 'vs/platform/theme/common/colorRegistry';
 import { ITheme } from 'vs/platform/theme/common/themeService';
 import { dispose, IDisposable } from 'vs/base/common/lifecycle';
@@ -16,7 +16,7 @@ import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
 
 const $ = dom.$;
 
-const DEFAULT_INPUT_ARIA_LABEL = nls.localize('quickInputBoxAriaLabel', "Type to narrow down results.");
+const DEFAULT_INPUT_ARIA_LABEL = localize('quickInputBoxAriaLabel', "Type to narrow down results.");
 
 export class QuickInputBox {