ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-02-11 18:48:33 -05:00
Code Issues Packages Projects Releases Wiki Activity

add animation when button is clicked and fix title in button (#2488)

Browse Source 
* add animation similar to toolbar in vscode and fix title in button

* remove bur method in button
This commit is contained in:
Abbie Petchtes
2018-09-11 10:37:02 -07:00
committed by GitHub
parent 4ea13bdbc0
commit a5c537197c
7 changed files with 59 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/sql/parts/modelComponents/button.component.ts
View File

@@ -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<sqlops.ButtonProperties, string>((props) => props.title, '');
}
private set title(newValue: string) {
this.setPropertyFromUI<sqlops.ButtonProperties, string>((properties, title) => { properties.title = title; }, newValue);
}
}

2
src/sql/parts/modelComponents/toolbarContainer.component.ts
View File

@@ -29,7 +29,7 @@ export class ToolbarItem {
template: `
<div #container *ngIf="items" [class]="toolbarClass" >
<ng-container *ngFor="let item of items">
<div class="modelview-toolbar-item" [title]="getItemTitle(item)" [style.paddingTop]="paddingTop" tabindex="0">
<div class="modelview-toolbar-item" [style.paddingTop]="paddingTop">
<div *ngIf="shouldShowTitle(item)" class="modelview-toolbar-title" >
{{getItemTitle(item)}}
</div>

10
src/sql/parts/modelComponents/toolbarLayout.css
View File

@@ -62,4 +62,12 @@
margin-right: 0.3em;
background-position: 50% 50%;
}
}
.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);
}