ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-01-24 09:35:37 -05:00
Code Issues Packages Projects Releases Wiki Activity

Support icon for button.component (#1565)

Browse Source 
* support icon button

* formatting

* fix dropdown css and set attribute for model view editor
This commit is contained in:
Abbie Petchtes
2018-06-06 14:05:36 -07:00
committed by GitHub
parent cf6a7198f9
commit 38ad60478c
10 changed files with 122 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,14 +2,13 @@
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the Source EULA. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
import 'vs/css!./button';
import {
Component, Input, Inject, ChangeDetectorRef, forwardRef, ComponentFactoryResolver,
ViewChild, ViewChildren, ElementRef, Injector, OnDestroy, QueryList, AfterViewInit
} from '@angular/core';
import * as sqlops from 'sqlops';
import { Event, Emitter } from 'vs/base/common/event';
import { ComponentBase } from 'sql/parts/modelComponents/componentBase';
import { IComponent, IComponentDescriptor, IModelStore, ComponentEventType } from 'sql/parts/modelComponents/interfaces';
@@ -19,9 +18,13 @@ import { Button } from 'sql/base/browser/ui/button/button';
import { SIDE_BAR_BACKGROUND } from 'vs/workbench/common/theme';
import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService';
import { attachListStyler } from 'vs/platform/theme/common/styler';
import URI from 'vs/base/common/uri';
import { IdGenerator } from 'vs/base/common/idGenerator';
import { createCSSRule, removeCSSRulesContainingSelector } from 'vs/base/browser/dom';
import { focusBorder, foreground } from 'vs/platform/theme/common/colorRegistry';
import { Color } from 'vs/base/common/color';
@Component({
selector: 'button',
selector: 'modelview-button',
template: `
<div #input style="width: 100%"></div>
`
@@ -30,6 +33,8 @@ export default class ButtonComponent extends ComponentBase implements IComponent
@Input() descriptor: IComponentDescriptor;
@Input() modelStore: IModelStore;
private _button: Button;
private _iconClass: string;
private _iconPath: string | URI | { light: string | URI; dark: string | URI };
@ViewChild('input', { read: ElementRef }) private _inputContainer: ElementRef;
constructor(
@@ -37,6 +42,7 @@ export default class ButtonComponent extends ComponentBase implements IComponent
@Inject(IWorkbenchThemeService) private themeService: IWorkbenchThemeService
) {
super(changeRef);
}
ngOnInit(): void {
@@ -64,6 +70,9 @@ export default class ButtonComponent extends ComponentBase implements IComponent
}
ngOnDestroy(): void {
if (this._iconClass) {
removeCSSRulesContainingSelector(this._iconClass);
}
this.baseDestroy();
}
@@ -80,7 +89,58 @@ export default class ButtonComponent extends ComponentBase implements IComponent
public setProperties(properties: { [key: string]: any; }): void {
super.setProperties(properties);
this._button.enabled = this.enabled;
this._button.label = this.label;
this.updateIcon();
}
private updateIcon() {
if (this.iconPath && this.iconPath !== this._iconPath) {
this._iconPath = this.iconPath;
if (!this._iconClass) {
const ids = new IdGenerator('button-component-icon-' + Math.round(Math.random() * 1000));
this._iconClass = ids.nextId();
this._button.icon = this._iconClass + ' icon';
// Styling for icon button
this._register(attachButtonStyler(this._button, this.themeService, {
buttonBackground: Color.transparent.toString(),
buttonHoverBackground: Color.transparent.toString(),
buttonFocusOutline: focusBorder,
buttonForeground: foreground
}));
}
removeCSSRulesContainingSelector(this._iconClass);
const icon = this.getLightIconPath(this.iconPath);
const iconDark = this.getDarkIconPath(this.iconPath) || icon;
createCSSRule(`.icon.${this._iconClass}`, `background-image: url("${icon}")`);
createCSSRule(`.vs-dark .icon.${this._iconClass}, .hc-black .icon.${this._iconClass}`, `background-image: url("${iconDark}")`);
}
}
private getLightIconPath(iconPath: string | URI | { light: string | URI; dark: string | URI }): string {
if (iconPath && iconPath['light']) {
return this.getIconPath(iconPath['light']);
} else {
return this.getIconPath(<string | URI>iconPath);
}
}
private getDarkIconPath(iconPath: string | URI | { light: string | URI; dark: string | URI }): string {
if (iconPath && iconPath['dark']) {
return this.getIconPath(iconPath['dark']);
}
return null;
}
private getIconPath(iconPath: string | URI): string {
if (typeof iconPath === 'string') {
return URI.file(iconPath).toString();
} else {
let uri = URI.revive(iconPath);
return uri.toString();
}
}
// CSS-bound properties
@@ -93,6 +153,14 @@ export default class ButtonComponent extends ComponentBase implements IComponent
this.setPropertyFromUI<sqlops.ButtonProperties, string>(this.setValueProperties, newValue);
}
public get iconPath(): string | URI | { light: string | URI; dark: string | URI } {
return this.getPropertyOrDefault<sqlops.ButtonProperties, string | URI | { light: string | URI; dark: string | URI }>((props) => props.iconPath, undefined);
}
public set iconPath(newValue: string | URI | { light: string | URI; dark: string | URI }) {
this.setPropertyFromUI<sqlops.ButtonProperties, string | URI | { light: string | URI; dark: string | URI }>((properties, iconPath) => { properties.iconPath = iconPath; }, newValue);
}
private setValueProperties(properties: sqlops.ButtonProperties, label: string): void {
properties.label = label;
}