ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-02-16 10:58:30 -05:00
Code Issues Packages Projects Releases Wiki Activity

Adding zoom button (#18407) (#18431)

Browse Source 
* Adding zoom button (#18407)

* Adding zoom button

* Fixing string

* Using proper zoom icon (#18338)
This commit is contained in:
Aasim Khan
2022-02-17 09:22:54 -08:00
committed by GitHub
parent 8335854015
commit 5e7356d652
3 changed files with 21 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/sql/workbench/contrib/queryplan2/browser/constants.ts
View File

@@ -262,3 +262,4 @@ export const zoomInIconClassNames = [parentContainer, 'zoom-in-icon'].join(' ');
export const zoomOutIconClassNames = [parentContainer, 'zoom-out-icon'].join(' '); export const zoomOutIconClassNames = [parentContainer, 'zoom-out-icon'].join(' ');
export const customZoomIconClassNames = [parentContainer, 'custom-zoom-icon'].join(' '); export const customZoomIconClassNames = [parentContainer, 'custom-zoom-icon'].join(' ');
export const zoomToFitIconClassNames = [parentContainer, 'zoom-to-fit-icon'].join(' '); export const zoomToFitIconClassNames = [parentContainer, 'zoom-to-fit-icon'].join(' ');
export const zoomIconClassNames = [parentContainer, 'zoom-icon'].join(' ');

8
src/sql/workbench/contrib/queryplan2/browser/media/queryPlan2.css
View File

@@ -74,7 +74,7 @@ However we always want it to be the width of the container it is resizing.
flex-direction: row; flex-direction: row;
padding: 5px; padding: 5px;
height: auto; height: auto;
width: 180px; width: 240px;
} }
/* query plan header that contains the relative query cost, query statement and recommendations */ /* query plan header that contains the relative query cost, query statement and recommendations */
@@ -292,4 +292,10 @@ However we always want it to be the width of the container it is resizing.
background-repeat: no-repeat; background-repeat: no-repeat;
} }
.qps-container .zoom-icon {
background-image: url(../images/actionIcons/zoom.svg);
background-size: 16px 16px;
background-position: center;
background-repeat: no-repeat;
}

15
src/sql/workbench/contrib/queryplan2/browser/widgets/customZoomWidget.ts
View File

@@ -15,6 +15,8 @@ import { localize } from 'vs/nls';
import { IContextViewService } from 'vs/platform/contextview/browser/contextView'; import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
import { INotificationService } from 'vs/platform/notification/common/notification'; import { INotificationService } from 'vs/platform/notification/common/notification';
import { IThemeService } from 'vs/platform/theme/common/themeService'; 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 { export class CustomZoomWidget extends QueryPlanWidgetBase {
private _actionBar: ActionBar; private _actionBar: ActionBar;
@@ -52,10 +54,19 @@ export class CustomZoomWidget extends QueryPlanWidgetBase {
} }
}; };
const applyButton = new Button(this.container, {
title: localize('customZoomApplyButtonTitle', "Zoom (Enter)")
});
applyButton.setWidth('60px');
applyButton.label = localize('customZoomApplyButton', "Apply");
applyButton.onDidClick(async e => {
await new CustomZoomAction().run(self);
});
// Adding action bar // Adding action bar
this._actionBar = new ActionBar(this.container); this._actionBar = new ActionBar(this.container);
this._actionBar.context = this; this._actionBar.context = this;
this._actionBar.pushAction(new CustomZoomAction(), { label: false, icon: true });
this._actionBar.pushAction(new CancelZoom(), { label: false, icon: true }); this._actionBar.pushAction(new CancelZoom(), { label: false, icon: true });
} }
@@ -70,7 +81,7 @@ export class CustomZoomAction extends Action {
public static LABEL = localize('zoomAction', "Zoom (Enter)"); public static LABEL = localize('zoomAction', "Zoom (Enter)");
constructor() { constructor() {
super(CustomZoomAction.ID, CustomZoomAction.LABEL, Codicon.zoomOut.classNames); super(CustomZoomAction.ID, CustomZoomAction.LABEL, zoomIconClassNames);
} }
public override async run(context: CustomZoomWidget): Promise<void> { public override async run(context: CustomZoomWidget): Promise<void> {