From 81e8eb9a825918a9595f06aa5024f2543dcec1f6 Mon Sep 17 00:00:00 2001 From: Aasim Khan Date: Wed, 16 Feb 2022 15:26:14 -0800 Subject: [PATCH] Adding zoom button (#18407) * Adding zoom button * Fixing string --- .../contrib/queryplan2/browser/media/queryPlan2.css | 2 +- .../queryplan2/browser/widgets/customZoomWidget.ts | 12 +++++++++++- 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/src/sql/workbench/contrib/queryplan2/browser/media/queryPlan2.css b/src/sql/workbench/contrib/queryplan2/browser/media/queryPlan2.css index c0f105f189..d7a54754b2 100644 --- a/src/sql/workbench/contrib/queryplan2/browser/media/queryPlan2.css +++ b/src/sql/workbench/contrib/queryplan2/browser/media/queryPlan2.css @@ -74,7 +74,7 @@ However we always want it to be the width of the container it is resizing. flex-direction: row; padding: 5px; height: auto; - width: 180px; + width: 240px; } /* query plan header that contains the relative query cost, query statement and recommendations */ diff --git a/src/sql/workbench/contrib/queryplan2/browser/widgets/customZoomWidget.ts b/src/sql/workbench/contrib/queryplan2/browser/widgets/customZoomWidget.ts index b9635633d2..300033dae4 100644 --- a/src/sql/workbench/contrib/queryplan2/browser/widgets/customZoomWidget.ts +++ b/src/sql/workbench/contrib/queryplan2/browser/widgets/customZoomWidget.ts @@ -16,6 +16,7 @@ import { IContextViewService } from 'vs/platform/contextview/browser/contextView import { INotificationService } from 'vs/platform/notification/common/notification'; import { IThemeService } from 'vs/platform/theme/common/themeService'; import { zoomIconClassNames } from 'sql/workbench/contrib/queryplan2/browser/constants'; +import { Button } from 'sql/base/browser/ui/button/button'; export class CustomZoomWidget extends QueryPlanWidgetBase { private _actionBar: ActionBar; @@ -53,10 +54,19 @@ export class CustomZoomWidget extends QueryPlanWidgetBase { } }; + const applyButton = new Button(this.container, { + title: localize('customZoomApplyButtonTitle', "Apply Zoom (Enter)") + }); + applyButton.setWidth('60px'); + applyButton.label = localize('customZoomApplyButton', "Apply"); + + applyButton.onDidClick(async e => { + await new CustomZoomAction().run(self); + }); + // Adding action bar this._actionBar = new ActionBar(this.container); this._actionBar.context = this; - this._actionBar.pushAction(new CustomZoomAction(), { label: false, icon: true }); this._actionBar.pushAction(new CancelZoom(), { label: false, icon: true }); }