From a5c537197c06db1674ee02315d126a701edb1d0f Mon Sep 17 00:00:00 2001 From: Abbie Petchtes Date: Tue, 11 Sep 2018 10:37:02 -0700 Subject: [PATCH] add animation when button is clicked and fix title in button (#2488) * add animation similar to toolbar in vscode and fix title in button * remove bur method in button --- .../sqlservices/src/controllers/mainController.ts | 6 ++++-- src/sql/base/browser/ui/button/button.ts | 12 ++++++++++++ src/sql/parts/modelComponents/button.component.ts | 12 +++++++++++- .../modelComponents/toolbarContainer.component.ts | 2 +- src/sql/parts/modelComponents/toolbarLayout.css | 10 +++++++++- src/sql/sqlops.proposed.d.ts | 15 +++++++++++++++ src/sql/workbench/api/node/extHostModelView.ts | 7 +++++++ 7 files changed, 59 insertions(+), 5 deletions(-) diff --git a/samples/sqlservices/src/controllers/mainController.ts b/samples/sqlservices/src/controllers/mainController.ts index 937772954c..dde21db387 100644 --- a/samples/sqlservices/src/controllers/mainController.ts +++ b/samples/sqlservices/src/controllers/mainController.ts @@ -518,7 +518,8 @@ export default class MainController implements vscode.Disposable { let runButton = view.modelBuilder.button() .withProperties({ label: 'Run', - iconPath: runIcon + iconPath: runIcon, + title: 'Run title' }).component(); let monitorLightPath = vscode.Uri.file(path.join(__dirname, '..', 'media', 'monitor.svg')); @@ -530,7 +531,8 @@ export default class MainController implements vscode.Disposable { let monitorButton = view.modelBuilder.button() .withProperties({ label: 'Monitor', - iconPath: monitorIcon + iconPath: monitorIcon, + title: 'Monitor title' }).component(); let toolbarModel = view.modelBuilder.toolbarContainer() .withToolbarItems([{ diff --git a/src/sql/base/browser/ui/button/button.ts b/src/sql/base/browser/ui/button/button.ts index 7766563865..d5cb01482b 100644 --- a/src/sql/base/browser/ui/button/button.ts +++ b/src/sql/base/browser/ui/button/button.ts @@ -23,6 +23,18 @@ export class Button extends vsButton { this.$el.style('outline-color', this.buttonFocusOutline ? this.buttonFocusOutline.toString() : null); this.$el.style('outline-width', '1px'); }); + + this.$el.on(DOM.EventType.MOUSE_DOWN, (e) => { + const mouseEvent = e as MouseEvent; + if (!this.$el.hasClass('disabled') && mouseEvent.button === 0) { + this.$el.addClass('active'); + } + }); + + this.$el.on([DOM.EventType.MOUSE_UP], (e) => { + DOM.EventHelper.stop(e); + this.$el.removeClass('active'); + }); } public style(styles: IButtonStyles): void { diff --git a/src/sql/parts/modelComponents/button.component.ts b/src/sql/parts/modelComponents/button.component.ts index d698f39cfb..836a5e477d 100644 --- a/src/sql/parts/modelComponents/button.component.ts +++ b/src/sql/parts/modelComponents/button.component.ts @@ -13,11 +13,11 @@ import * as sqlops from 'sqlops'; import { ComponentWithIconBase } from 'sql/parts/modelComponents/componentWithIconBase'; import { IComponent, IComponentDescriptor, IModelStore, ComponentEventType } from 'sql/parts/modelComponents/interfaces'; import { attachButtonStyler } from 'sql/common/theme/styler'; -import { Button } from 'sql/base/browser/ui/button/button'; import { SIDE_BAR_BACKGROUND, SIDE_BAR_TITLE_FOREGROUND } from 'vs/workbench/common/theme'; import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService'; import { focusBorder, foreground } from 'vs/platform/theme/common/colorRegistry'; +import { Button } from 'sql/base/browser/ui/button/button'; import { Color } from 'vs/base/common/color'; @@ -101,6 +101,7 @@ export default class ButtonComponent extends ComponentWithIconBase implements IC super.setProperties(properties); this._button.enabled = this.enabled; this._button.label = this.label; + this._button.title = this.title; if (this.width) { this._button.setWidth(this.convertSize(this.width.toString())); } @@ -165,4 +166,13 @@ export default class ButtonComponent extends ComponentWithIconBase implements IC private setFileProperties(properties: sqlops.ButtonProperties, isFile: boolean): void { properties.isFile = isFile; } + + private get title(): string { + return this.getPropertyOrDefault((props) => props.title, ''); + } + + private set title(newValue: string) { + this.setPropertyFromUI((properties, title) => { properties.title = title; }, newValue); + } + } diff --git a/src/sql/parts/modelComponents/toolbarContainer.component.ts b/src/sql/parts/modelComponents/toolbarContainer.component.ts index 7136ae05b0..275da76e8e 100644 --- a/src/sql/parts/modelComponents/toolbarContainer.component.ts +++ b/src/sql/parts/modelComponents/toolbarContainer.component.ts @@ -29,7 +29,7 @@ export class ToolbarItem { template: `
-
+
{{getItemTitle(item)}}
diff --git a/src/sql/parts/modelComponents/toolbarLayout.css b/src/sql/parts/modelComponents/toolbarLayout.css index 2583621bf8..2750c09698 100644 --- a/src/sql/parts/modelComponents/toolbarLayout.css +++ b/src/sql/parts/modelComponents/toolbarLayout.css @@ -62,4 +62,12 @@ margin-right: 0.3em; background-position: 50% 50%; -} \ No newline at end of file +} + +.modelview-toolbar-container .modelview-toolbar-component modelview-button .monaco-text-button.active { + -ms-transform: scale(1.272019649, 1.272019649); /* 1.272019649 = √φ */ + -webkit-transform: scale(1.272019649, 1.272019649); + -moz-transform: scale(1.272019649, 1.272019649); + -o-transform: scale(1.272019649, 1.272019649); + transform: scale(1.272019649, 1.272019649); +} diff --git a/src/sql/sqlops.proposed.d.ts b/src/sql/sqlops.proposed.d.ts index da2798ac99..295f63d750 100644 --- a/src/sql/sqlops.proposed.d.ts +++ b/src/sql/sqlops.proposed.d.ts @@ -561,6 +561,7 @@ declare module 'sqlops' { label?: string; isFile?: boolean; fileContent?: string; + title?: string; } export interface LoadingComponentProperties { @@ -662,8 +663,22 @@ declare module 'sqlops' { } export interface ButtonComponent extends Component, ButtonProperties { + /** + * The label for the button + */ label: string; + /** + * The title for the button. This title will show when it hovers + */ + title: string; + /** + * Icon Path for the button. + */ iconPath: string | vscode.Uri | { light: string | vscode.Uri; dark: string | vscode.Uri }; + + /** + * An event called when the button is clicked + */ onDidClick: vscode.Event; } diff --git a/src/sql/workbench/api/node/extHostModelView.ts b/src/sql/workbench/api/node/extHostModelView.ts index 1681e6f622..6a5ce5f213 100644 --- a/src/sql/workbench/api/node/extHostModelView.ts +++ b/src/sql/workbench/api/node/extHostModelView.ts @@ -1103,6 +1103,13 @@ class ButtonWrapper extends ComponentWrapper implements sqlops.ButtonComponent { this.setProperty('iconPath', v); } + public get title(): string { + return this.properties['title']; + } + public set title(v: string) { + this.setProperty('title', v); + } + public get onDidClick(): vscode.Event { let emitter = this._emitterMap.get(ComponentEventType.onDidClick); return emitter && emitter.event;