mirror of
https://github.com/ckaczor/azuredatastudio.git
synced 2026-01-17 01:25:36 -05:00
Inital platform relayering (#6385)
* moving test files and inital refactoring * relayer extension host code * fix imports * make insights work * relayer dashboard * relayer notebooks * moveing more code around * formatting * accept angular as browser * fix serializer * add missing files * remove declarations from extensions * fix build errors * more relayering * change urls to relative to help code relayering * remove layering to prep for merge * fix hygiene errors * fix hygiene errors * fix tests
This commit is contained in:
Anthony Dresser
178
src/sql/workbench/browser/modelComponents/button.component.ts
Normal file
178
src/sql/workbench/browser/modelComponents/button.component.ts
Normal file
@@ -0,0 +1,178 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* 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!./media/button';
|
||||
import {
|
||||
Component, Input, Inject, ChangeDetectorRef, forwardRef,
|
||||
ViewChild, ElementRef, OnDestroy, AfterViewInit
|
||||
} from '@angular/core';
|
||||
|
||||
import * as azdata from 'azdata';
|
||||
|
||||
import { ComponentWithIconBase } from 'sql/workbench/browser/modelComponents/componentWithIconBase';
|
||||
import { IComponent, IComponentDescriptor, IModelStore, ComponentEventType } from 'sql/workbench/browser/modelComponents/interfaces';
|
||||
import { attachButtonStyler } from 'sql/platform/theme/common/styler';
|
||||
|
||||
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';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'modelview-button',
|
||||
template: `
|
||||
<div>
|
||||
<label for={{this.label}}>
|
||||
<div #input style="width: 100%">
|
||||
<input #fileInput *ngIf="this.isFile === true" id={{this.label}} type="file" accept=".sql" style="display: none">
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
`
|
||||
})
|
||||
export default class ButtonComponent extends ComponentWithIconBase implements IComponent, OnDestroy, AfterViewInit {
|
||||
@Input() descriptor: IComponentDescriptor;
|
||||
@Input() modelStore: IModelStore;
|
||||
private _button: Button;
|
||||
|
||||
@ViewChild('input', { read: ElementRef }) private _inputContainer: ElementRef;
|
||||
@ViewChild('fileInput', { read: ElementRef }) private _fileInputContainer: ElementRef;
|
||||
constructor(
|
||||
@Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef,
|
||||
@Inject(IWorkbenchThemeService) private themeService: IWorkbenchThemeService,
|
||||
@Inject(forwardRef(() => ElementRef)) el: ElementRef
|
||||
) {
|
||||
super(changeRef, el);
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.baseInit();
|
||||
}
|
||||
|
||||
ngAfterViewInit(): void {
|
||||
if (this._inputContainer) {
|
||||
this._button = new Button(this._inputContainer.nativeElement);
|
||||
|
||||
this._register(this._button);
|
||||
this._register(attachButtonStyler(this._button, this.themeService, {
|
||||
buttonBackground: SIDE_BAR_BACKGROUND, buttonHoverBackground: SIDE_BAR_BACKGROUND, buttonForeground: SIDE_BAR_TITLE_FOREGROUND
|
||||
}));
|
||||
this._register(this._button.onDidClick(e => {
|
||||
if (this._fileInputContainer) {
|
||||
const self = this;
|
||||
this._fileInputContainer.nativeElement.onchange = () => {
|
||||
let file = self._fileInputContainer.nativeElement.files[0];
|
||||
let reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
let text = (<FileReader>e.target).result;
|
||||
self.fileContent = text.toString();
|
||||
self.fireEvent({
|
||||
eventType: ComponentEventType.onDidClick,
|
||||
args: self.fileContent
|
||||
});
|
||||
};
|
||||
reader.readAsText(file);
|
||||
};
|
||||
} else {
|
||||
this.fireEvent({
|
||||
eventType: ComponentEventType.onDidClick,
|
||||
args: e
|
||||
});
|
||||
}
|
||||
}));
|
||||
}
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
this.baseDestroy();
|
||||
}
|
||||
|
||||
/// IComponent implementation
|
||||
|
||||
public setLayout(layout: any): void {
|
||||
// TODO allow configuring the look and feel
|
||||
this.layout();
|
||||
}
|
||||
|
||||
public setProperties(properties: { [key: string]: any; }): void {
|
||||
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()));
|
||||
}
|
||||
if (this.height) {
|
||||
this._button.setWidth(this.convertSize(this.height.toString()));
|
||||
}
|
||||
this.updateIcon();
|
||||
}
|
||||
|
||||
protected updateIcon() {
|
||||
if (this.iconPath) {
|
||||
if (!this._iconClass) {
|
||||
super.updateIcon();
|
||||
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
|
||||
}));
|
||||
} else {
|
||||
super.updateIcon();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// CSS-bound properties
|
||||
|
||||
private get label(): string {
|
||||
return this.getPropertyOrDefault<azdata.ButtonProperties, string>((props) => props.label, '');
|
||||
}
|
||||
|
||||
private set label(newValue: string) {
|
||||
this.setPropertyFromUI<azdata.ButtonProperties, string>(this.setValueProperties, newValue);
|
||||
}
|
||||
|
||||
private get isFile(): boolean {
|
||||
return this.getPropertyOrDefault<azdata.ButtonProperties, boolean>((props) => props.isFile, false);
|
||||
}
|
||||
|
||||
private set isFile(newValue: boolean) {
|
||||
this.setPropertyFromUI<azdata.ButtonProperties, boolean>(this.setFileProperties, newValue);
|
||||
}
|
||||
|
||||
private get fileContent(): string {
|
||||
return this.getPropertyOrDefault<azdata.ButtonProperties, string>((props) => props.fileContent, '');
|
||||
}
|
||||
|
||||
private set fileContent(newValue: string) {
|
||||
this.setPropertyFromUI<azdata.ButtonProperties, string>(this.setFileContentProperties, newValue);
|
||||
}
|
||||
|
||||
private setFileContentProperties(properties: azdata.ButtonProperties, fileContent: string): void {
|
||||
properties.fileContent = fileContent;
|
||||
}
|
||||
|
||||
private setValueProperties(properties: azdata.ButtonProperties, label: string): void {
|
||||
properties.label = label;
|
||||
}
|
||||
|
||||
private setFileProperties(properties: azdata.ButtonProperties, isFile: boolean): void {
|
||||
properties.isFile = isFile;
|
||||
}
|
||||
|
||||
private get title(): string {
|
||||
return this.getPropertyOrDefault<azdata.ButtonProperties, string>((props) => props.title, '');
|
||||
}
|
||||
|
||||
private set title(newValue: string) {
|
||||
this.setPropertyFromUI<azdata.ButtonProperties, string>((properties, title) => { properties.title = title; }, newValue);
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user