From 8cdda963936021ec34a882bcc45b0df98268b84b Mon Sep 17 00:00:00 2001 From: Christof Marti Date: Tue, 3 Apr 2018 11:16:46 +0200 Subject: [PATCH] Use existing button widget (fixes #46947) --- .../browser/parts/quickinput/quickInput.css | 9 +++---- .../browser/parts/quickinput/quickInput.ts | 27 ++++++------------- 2 files changed, 12 insertions(+), 24 deletions(-) diff --git a/src/vs/workbench/browser/parts/quickinput/quickInput.css b/src/vs/workbench/browser/parts/quickinput/quickInput.css index a4d68e602b7..28ec8b5c3dd 100644 --- a/src/vs/workbench/browser/parts/quickinput/quickInput.css +++ b/src/vs/workbench/browser/parts/quickinput/quickInput.css @@ -45,13 +45,12 @@ .quick-input-action { margin-left: 6px; - border: 0; - padding: 6px; - cursor: pointer; } -.quick-input-action:focus { - outline:0; +.quick-input-action .monaco-text-button { + font-size: 85%; + padding: 7px 6px 6px 6px; + line-height: initial; } .quick-input-progress.monaco-progress-container, diff --git a/src/vs/workbench/browser/parts/quickinput/quickInput.ts b/src/vs/workbench/browser/parts/quickinput/quickInput.ts index 23478edf3fe..b65d9de2ee1 100644 --- a/src/vs/workbench/browser/parts/quickinput/quickInput.ts +++ b/src/vs/workbench/browser/parts/quickinput/quickInput.ts @@ -13,7 +13,7 @@ import { Dimension } from 'vs/base/browser/builder'; import * as dom from 'vs/base/browser/dom'; import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation'; import { registerThemingParticipant, ITheme, ICssStyleCollector, IThemeService } from 'vs/platform/theme/common/themeService'; -import { buttonBackground, buttonForeground, contrastBorder, buttonHoverBackground, widgetShadow } from 'vs/platform/theme/common/colorRegistry'; +import { contrastBorder, widgetShadow } from 'vs/platform/theme/common/colorRegistry'; import { SIDE_BAR_BACKGROUND, SIDE_BAR_FOREGROUND } from 'vs/workbench/common/theme'; import { IQuickOpenService, IPickOpenEntry, IPickOptions } from 'vs/platform/quickOpen/common/quickOpen'; import { TPromise } from 'vs/base/common/winjs.base'; @@ -26,10 +26,11 @@ import { localize } from 'vs/nls'; import { IConfigurationService } from 'vs/platform/configuration/common/configuration'; import { CLOSE_ON_FOCUS_LOST_CONFIG } from 'vs/workbench/browser/quickopen'; import { CountBadge } from 'vs/base/browser/ui/countBadge/countBadge'; -import { attachBadgeStyler, attachProgressBarStyler } from 'vs/platform/theme/common/styler'; +import { attachBadgeStyler, attachProgressBarStyler, attachButtonStyler } from 'vs/platform/theme/common/styler'; import { IEnvironmentService } from 'vs/platform/environment/common/environment'; 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'; const $ = dom.$; @@ -113,9 +114,11 @@ export class QuickInputService extends Component implements IQuickInputService { this.count = new CountBadge(badgeContainer, { countFormat: localize('quickInput.countSelected', "{0} Selected") }); this.toUnbind.push(attachBadgeStyler(this.count, this.themeService)); - const ok = dom.append(headerContainer, $('button.quick-input-action')); - ok.textContent = localize('ok', "OK"); - this.toUnbind.push(dom.addDisposableListener(ok, dom.EventType.CLICK, e => { + const okContainer = dom.append(headerContainer, $('.quick-input-action')); + const ok = new Button(okContainer); + attachButtonStyler(ok, this.themeService); + ok.label = localize('ok', "OK"); + this.toUnbind.push(ok.onDidClick(e => { if (this.ready) { this.close(this.checkboxList.getCheckedElements()); } @@ -293,18 +296,4 @@ registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => { ${contrastBorderColor ? `border: 1px solid ${contrastBorderColor};` : ''} ${widgetShadowColor ? `box-shadow: 0 5px 8px ${widgetShadowColor};` : ''} }`); - - const buttonBackgroundColor = theme.getColor(buttonBackground); - const buttonForegroundColor = theme.getColor(buttonForeground); - collector.addRule(`.quick-input-action { - ${buttonBackgroundColor ? `background-color: ${buttonBackgroundColor};` : ''} - ${buttonForegroundColor ? `color: ${buttonForegroundColor};` : ''} - ${contrastBorderColor ? `border: 1px solid ${contrastBorderColor};` : ''} - }`); - - const buttonHoverBackgroundColor = theme.getColor(buttonHoverBackground); - if (buttonHoverBackgroundColor) { - collector.addRule(`.quick-input-action:hover { background-color: ${buttonHoverBackgroundColor}; }`); - collector.addRule(`.quick-input-action:focus { background-color: ${buttonHoverBackgroundColor}; }`); - } }); -- GitLab