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

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

21
samples/sqlservices/src/controllers/mainController.ts
View File

@@ -266,10 +266,23 @@ export default class MainController implements vscode.Disposable {
values: ['aa', 'bb', 'cc']
})
.component();
let button = view.modelBuilder.button()
let runIcon = path.join(__dirname, '..', 'media', 'start.svg');
let runButton = view.modelBuilder.button()
.withProperties({
label: 'Run'
label: 'Run',
iconPath: runIcon
}).component();
let monitoLightPath = vscode.Uri.file(path.join(__dirname, '..', 'media', 'monitor.svg'));
let monitorIcon = {
light: monitoLightPath,
dark: path.join(__dirname, '..', 'media', 'monitor_inverse.svg') };
let monitorButton = view.modelBuilder.button()
.withProperties({
label: 'Monitor',
iconPath: monitorIcon
}).component();
let toolbarModel = view.modelBuilder.toolbarContainer()
.withToolbarItems([{
component: inputBox,
@@ -278,7 +291,9 @@ export default class MainController implements vscode.Disposable {
component: dropdown,
title: 'favorite:'
}, {
component: button
component: runButton
}, {
component: monitorButton
}]).component();

1
samples/sqlservices/src/media/monitor.svg Normal file
View File

@@ -0,0 +1 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><title>usage</title><path d="M7,7H0A6.88,6.88,0,0,1,.25,5.14,7,7,0,0,1,5.14.25,6.92,6.92,0,0,1,7,0ZM6.75,8,1.88,12.87a6.91,6.91,0,0,1-1.4-2.26A7.33,7.33,0,0,1,0,8ZM6,1.08a6,6,0,0,0-1.77.6A6,6,0,0,0,1.68,4.23,6,6,0,0,0,1.08,6H6ZM1.08,9a6.63,6.63,0,0,0,.32,1.23A5.58,5.58,0,0,0,2,11.37L4.34,9ZM8,1l.89,0a8.52,8.52,0,0,1,.86.09,8.14,8.14,0,0,1,.84.18,6.66,6.66,0,0,1,.84.29,7.51,7.51,0,0,1,4.25,4.73,7.58,7.58,0,0,1,.06,4.18A7.51,7.51,0,0,1,15,12.29,7.49,7.49,0,0,1,12.29,15a7.5,7.5,0,0,1-1.79.75,7.63,7.63,0,0,1-4.87-.3A7.53,7.53,0,0,1,3.2,13.8l-.35-.35L8,8.29Zm.5,14a6.31,6.31,0,0,0,1.73-.23,6.66,6.66,0,0,0,1.55-.66,6.5,6.5,0,0,0,2.33-2.33,6.64,6.64,0,0,0,.66-1.55,6.47,6.47,0,0,0,0-3.36,6.69,6.69,0,0,0-.59-1.49,6.45,6.45,0,0,0-.93-1.29,6.63,6.63,0,0,0-1.21-1,6.49,6.49,0,0,0-1.44-.71A6.32,6.32,0,0,0,9,2v6.7L4.27,13.44a6.39,6.39,0,0,0,2,1.16A6.47,6.47,0,0,0,8.5,15Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 969 B

1
samples/sqlservices/src/media/monitor_inverse.svg Normal file
View File

@@ -0,0 +1 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{fill:#fff;}</style></defs><title>usage_inverse</title><path class="cls-1" d="M7,7H0A6.88,6.88,0,0,1,.25,5.14,7,7,0,0,1,5.14.25,6.92,6.92,0,0,1,7,0ZM6.75,8,1.88,12.87a6.91,6.91,0,0,1-1.4-2.26A7.33,7.33,0,0,1,0,8ZM6,1.08a6,6,0,0,0-1.77.6A6,6,0,0,0,1.68,4.23,6,6,0,0,0,1.08,6H6ZM1.08,9a6.63,6.63,0,0,0,.32,1.23A5.58,5.58,0,0,0,2,11.37L4.34,9ZM8,1l.89,0a8.52,8.52,0,0,1,.86.09,8.14,8.14,0,0,1,.84.18,6.66,6.66,0,0,1,.84.29,7.51,7.51,0,0,1,4.25,4.73,7.58,7.58,0,0,1,.06,4.18A7.51,7.51,0,0,1,15,12.29,7.49,7.49,0,0,1,12.29,15a7.5,7.5,0,0,1-1.79.75,7.63,7.63,0,0,1-4.87-.3A7.53,7.53,0,0,1,3.2,13.8l-.35-.35L8,8.29Zm.5,14a6.31,6.31,0,0,0,1.73-.23,6.66,6.66,0,0,0,1.55-.66,6.5,6.5,0,0,0,2.33-2.33,6.64,6.64,0,0,0,.66-1.55,6.47,6.47,0,0,0,0-3.36,6.69,6.69,0,0,0-.59-1.49,6.45,6.45,0,0,0-.93-1.29,6.63,6.63,0,0,0-1.21-1,6.49,6.49,0,0,0-1.44-.71A6.32,6.32,0,0,0,9,2v6.7L4.27,13.44a6.39,6.39,0,0,0,2,1.16A6.47,6.47,0,0,0,8.5,15Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

1
samples/sqlservices/src/media/start.svg Normal file
View File

@@ -0,0 +1 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{fill:#3bb44a;}</style></defs><title>run</title><path class="cls-1" d="M3.24,0,14.61,8,3.24,16Zm2,12.07L11.13,8,5.24,3.88Z"/><path class="cls-1" d="M3.74,1l10,7-10,7Zm1,1.92V13.07L12,8Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 306 B

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;
}

9
src/sql/parts/modelComponents/button.css Normal file
View File

@@ -0,0 +1,9 @@
/*---------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the Source EULA. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
modelview-button a.monaco-button.monaco-text-button.icon {
background-repeat: no-repeat;
background-position: 0% 50%;
}

4
src/sql/parts/modelComponents/modelEditor/modelViewEditor.ts
View File

@@ -21,6 +21,7 @@ export class ModelViewEditor extends BaseEditor {
public static ID: string = 'workbench.editor.modelViewEditor';
private _editorFrame: HTMLElement;
private _content: HTMLElement;
constructor(
@ITelemetryService telemetryService: ITelemetryService,
@@ -34,6 +35,8 @@ export class ModelViewEditor extends BaseEditor {
*/
public createEditor(parent: HTMLElement): void {
this._editorFrame = parent;
this._content = document.createElement('div');
parent.appendChild(this._content);
}
/**
@@ -69,6 +72,7 @@ export class ModelViewEditor extends BaseEditor {
input.appendModelViewContainer();
input.container.style.visibility = 'visible';
this._content.setAttribute('aria-flowto', input.container.id);
await super.setInput(input, options);
this.doUpdateContainer();

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

@@ -30,16 +30,14 @@
margin: auto;
}
.modelview-toolbar-container .modelview-toolbar-component .select-box,
.modelview-toolbar-container .modelview-toolbar-component select,
.modelview-toolbar-container .modelview-toolbar-component .monaco-inputbox {
width: 200px;
height: 25px;
}
.modelview-toolbar-container .modelview-toolbar-component button {
height: 25px;
}
.modelview-toolbar-container .modelview-toolbar-component button .monaco-text-button {
padding: 0px
.modelview-toolbar-container .modelview-toolbar-component modelview-button .monaco-text-button.icon {
padding-left: 15px;
background-size: 11px;
margin-right: 0.3em;
}

2
src/sql/sqlops.proposed.d.ts vendored
View File

@@ -332,6 +332,7 @@ declare module 'sqlops' {
export interface ButtonProperties {
label?: string;
iconPath?: string | vscode.Uri | { light: string | vscode.Uri; dark: string | vscode.Uri };
}
export interface CardComponent extends Component {
@@ -377,6 +378,7 @@ declare module 'sqlops' {
export interface ButtonComponent extends Component {
label: string;
iconPath: string | vscode.Uri | { light: string | vscode.Uri; dark: string | vscode.Uri };
onDidClick: vscode.Event<any>;
}

10
src/sql/workbench/api/node/extHostModelView.ts
View File

@@ -7,6 +7,8 @@
import { IMainContext } from 'vs/workbench/api/node/extHost.protocol';
import { Emitter } from 'vs/base/common/event';
import { deepClone } from 'vs/base/common/objects';
import { IActionDescriptor } from 'vs/editor/standalone/browser/standaloneCodeEditor';
import URI from 'vs/base/common/uri';
import * as nls from 'vs/nls';
import * as vscode from 'vscode';
@@ -14,7 +16,6 @@ import * as sqlops from 'sqlops';
import { SqlMainContext, ExtHostModelViewShape, MainThreadModelViewShape } from 'sql/workbench/api/node/sqlExtHost.protocol';
import { IItemConfig, ModelComponentTypes, IComponentShape, IComponentEventArgs, ComponentEventType } from 'sql/workbench/api/common/sqlExtHostTypes';
import { IActionDescriptor } from 'vs/editor/standalone/browser/standaloneCodeEditor';
class ModelBuilderImpl implements sqlops.ModelBuilder {
private nextComponentId: number;
@@ -747,6 +748,13 @@ class ButtonWrapper extends ComponentWrapper implements sqlops.ButtonComponent {
this.setProperty('label', v);
}
public get iconPath(): string | URI | { light: string | URI; dark: string | URI } {
return this.properties['iconPath'];
}
public set iconPath(v: string | URI | { light: string | URI; dark: string | URI }) {
this.setProperty('iconPath', v);
}
public get onDidClick(): vscode.Event<any> {
let emitter = this._emitterMap.get(ComponentEventType.onDidClick);
return emitter && emitter.event;