diff --git a/src/vs/workbench/browser/parts/quickinput/quickInput.css b/src/vs/workbench/browser/parts/quickinput/quickInput.css index 6b8fcbd826dc4a5a8ef092d7759dfd46e55ef404..3e0cdbea6a15578f83e388ffcd60d8531830da3f 100644 --- a/src/vs/workbench/browser/parts/quickinput/quickInput.css +++ b/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; +} diff --git a/src/vs/workbench/browser/parts/quickinput/quickInput.ts b/src/vs/workbench/browser/parts/quickinput/quickInput.ts index 94358b25a9c0d0437cd6cb16962916313d65fd8d..56a0961c76235942422814a5fd5975d133759e0f 100644 --- a/src/vs/workbench/browser/parts/quickinput/quickInput.ts +++ b/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 = 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}; }`); } }); diff --git a/src/vs/workbench/browser/parts/quickinput/quickInputBox.ts b/src/vs/workbench/browser/parts/quickinput/quickInputBox.ts index 1a2cfb71e6e0b14450e9063d9591c3130ec9aa40..0e7c127d58c7c7f3954df8d6c3178d080a59db6d 100644 --- a/src/vs/workbench/browser/parts/quickinput/quickInputBox.ts +++ b/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 {