ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-01-30 17:23:29 -05:00
Code Issues Packages Projects Releases Wiki Activity

Revert "ML extension updates (#11817)" (#12645)

Browse Source 
This reverts commit 037d638927.
This commit is contained in:
Alan Ren
2020-09-26 13:46:09 -07:00
committed by GitHub
parent 4ec5991a13
commit 34a6200a47
10 changed files with 203 additions and 423 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/sql/azdata.proposed.d.ts vendored
View File

@@ -691,24 +691,6 @@ declare module 'azdata' {
*/
delete?: boolean;
}
export interface ButtonProperties {
/**
* Specifies whether to use expanded layout or not.
*/
buttonType?: ButtonType;
/**
* Description text to display inside button element.
*/
description?: string;
}
export enum ButtonType {
File = 'File',
Normal = 'Normal',
Informational = 'Informational'
}
export interface DiffEditorComponent {
/**
* Title of editor

2
src/sql/base/browser/ui/button/button.ts
View File

@@ -12,7 +12,7 @@ export interface IButtonStyles extends vsIButtonStyles {
}
export class Button extends vsButton {
protected buttonFocusOutline?: Color;
private buttonFocusOutline?: Color;
constructor(container: HTMLElement, options?: IButtonOptions) {
super(container, options);

73
src/sql/base/browser/ui/infoButton/infoButton.css
View File

@@ -1,73 +0,0 @@
/*---------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the Source EULA. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
.info-button-container {
display: flex;
justify-content: space-around;
}
.info-button .info-main {
cursor: pointer;
padding: 10px;
}
.info-button .info-icon {
align-items: flex-start;
display: flex;
flex-flow: column;
padding-right: 10px;
}
.info-button .info-text {
display: flex;
flex-flow: column;
justify-content: space-between;
padding: 0 0 0 10px;
margin: 0px;
}
.info-button .info-text p.info-title {
font-size: 14px;
font-weight: bold;
line-height: 20px;
margin: 0px;
}
.info-button .info-text p.info-desc {
font-size: 12px;
line-height: 16px;
margin: 0px;
}
.info-button {
background-color: #fff;
border-radius: 2px;
box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.13);
display: inline-block;
}
.info-button[tabindex="0"]:active {
background-color: #fff;
box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.13);
}
.vs-dark .info-button {
background-color: #1b1a19;
box-shadow: 0px 1px 4px rgba(255, 255, 255, 0.13);
}
.vs-dark .info-button[tabindex="0"]:active {
background-color: #1b1a19;
box-shadow: 0px 3px 8px rgba(255, 255, 255, 0.13);
}
.hc-black .info-button {
background-color: #000;
box-shadow: none;
}
.hc-black .info-button[tabindex="0"]:active {
background-color: #000;
}
.info-button:hover {
box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.13);
}
.vs-dark .info-button:hover {
box-shadow: 0px 3px 8px rgba(255, 255, 255, 0.13);
}
.hc-black .info-button[tabindex="0"]:hover {
border-style: dashed !important;
border-color: rgb(243, 133, 24) !important;
}

153
src/sql/base/browser/ui/infoButton/infoButton.ts
View File

@@ -1,153 +0,0 @@
/*---------------------------------------------------------------------------------------------
* 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!./infoButton';
import { Button as sqlButton } from 'sql/base/browser/ui/button/button';
import * as DOM from 'vs/base/browser/dom';
import { IButtonOptions } from 'vs/base/browser/ui/button/button';
export interface IInfoButtonOptions extends IButtonOptions {
buttonMaxHeight: number,
buttonMaxWidth: number,
description: string,
iconClass: string,
iconHeight: number,
iconWidth: number,
title: string,
}
export class InfoButton extends sqlButton {
private _container: HTMLElement;
private _main: HTMLElement;
private _iconContainer: HTMLElement;
private _iconElement: HTMLElement;
private _textContainer: HTMLElement;
private _pTitle: HTMLElement;
private _pDesc: HTMLElement;
private _buttonMaxHeight?: number;
private _buttonMaxWidth?: number;
private _description?: string;
private _iconClass?: string;
private _iconHeight?: number;
private _iconWidth?: number;
private _title?: string;
constructor(container: HTMLElement, options?: IInfoButtonOptions) {
super(container, options);
this._container = container;
DOM.addClass(this._container, 'info-button-container');
this._main = document.createElement('div');
DOM.addClass(this._main, 'flexContainer');
DOM.addClass(this._main, 'info-main');
this._iconContainer = document.createElement('div');
DOM.addClass(this._iconContainer, 'info-icon');
this._iconContainer.style.alignItems = 'flex-start';
this._iconElement = document.createElement('div');
DOM.addClass(this._iconElement, 'icon');
this._textContainer = document.createElement('div');
DOM.addClass(this._textContainer, 'info-text');
this._pTitle = document.createElement('p');
DOM.addClass(this._pTitle, 'info-title');
this._pTitle.setAttribute('aria-hidden', 'false');
this._pDesc = document.createElement('p');
DOM.addClass(this._pDesc, 'info-desc');
this._pDesc.setAttribute('aria-hidden', 'false');
this._textContainer.appendChild(this._pTitle);
this._textContainer.appendChild(this._pDesc);
this._iconContainer.appendChild(this._iconElement);
this._main.appendChild(this._iconContainer);
this._main.appendChild(this._textContainer);
DOM.addClass(this.element, 'info-button');
this.element.appendChild(this._main);
this.element.style.background = 'none';
this.infoButtonOptions = options;
}
public get title(): string {
return this._title!;
}
public set title(value: string) {
this._title! = value;
this._pTitle.innerText = this.title;
}
public get description(): string {
return this._description!;
}
public set description(value: string) {
this._description! = value;
this._pDesc.innerText = this.description;
}
public get buttonMaxHeight(): number {
return this._buttonMaxHeight!;
}
public set buttonMaxHeight(value: number) {
this._buttonMaxHeight! = value;
this._main.style.maxHeight = `${this._buttonMaxHeight!}px`;
this._iconContainer.style.height = `${this._buttonMaxHeight! - 20}px`;
this._textContainer.style.height = `${this._buttonMaxHeight! - 20}px`;
}
public get buttonMaxWidth(): number {
return this._buttonMaxWidth!;
}
public set buttonMaxWidth(value: number) {
this._buttonMaxWidth! = value;
this._main.style.width = `${this._buttonMaxWidth!}px`;
this._textContainer.style.width = `${this._buttonMaxWidth! - this._iconWidth!}px`;
}
public get iconHeight(): number {
return this._iconHeight!;
}
public set iconHeight(value: number) {
this._iconHeight! = value;
this._iconElement.style.height = `${this._iconHeight!}px`;
}
public get iconWidth(): number {
return this._iconWidth!;
}
public set iconWidth(value: number) {
this._iconWidth! = value;
this._iconContainer.style.width = `${this._iconWidth!}px`;
this._iconElement.style.width = `${this._iconWidth!}px`;
}
public get iconClass(): string {
return this._iconClass!;
}
public set iconClass(value: string) {
this._iconClass! = value;
DOM.addClass(this._iconElement, this._iconClass!);
}
public set infoButtonOptions(options: IInfoButtonOptions | undefined) {
if (!options) {
return;
}
this.buttonMaxHeight = options.buttonMaxHeight;
this.buttonMaxWidth = options.buttonMaxWidth;
this.description = options.description;
this.iconHeight = options.iconHeight;
this.iconWidth = options.iconWidth;
this.iconClass = options.iconClass;
this.title = options.title;
}
}

16
src/sql/base/browser/ui/panel/media/panel.css
View File

@@ -58,7 +58,7 @@ panel {
max-width: 100px;
}
.tabbedPanel.vertical > .title .tabList .tab .tabLabel {
.tabbedPanel.vertical >.title .tabList .tab .tabLabel {
font-size: 13px;
padding-bottom: 0px;
max-width: 200px;
@@ -70,20 +70,6 @@ panel {
font-weight: 600;
}
.tabbedPanel .tabList .tab-header:hover:not(.active) {
background-color: #dcdcdc;
outline: none;
}
.vs-dark .tabbedPanel .tabList .tab-header:hover:not(.active) {
background-color: #2a2d2e;
outline: none;
}
.hc-black .tabbedPanel .tabList .tab-header:hover:not(.active) {
background-color: initial;
outline: 1px dashed #f38518;
outline-offset: -3px;
}
.tabbedPanel.horizontal > .title .tabList .tab .tabLabel,
.tabbedPanel.vertical > .title .tabList .tab .tabLabel {
text-overflow: ellipsis;

1
src/sql/workbench/api/common/sqlExtHost.api.impl.ts
View File

@@ -539,7 +539,6 @@ export function createAdsApiFactory(accessor: ServicesAccessor): IAdsExtensionAp
return {
accounts,
ButtonType: sqlExtHostTypes.ButtonType,
connection,
credentials,
objectexplorer: objectExplorer,

6
src/sql/workbench/api/common/sqlExtHostTypes.ts
View File

@@ -862,9 +862,3 @@ export enum SqlAssessmentResultItemKind {
Warning = 1,
Error = 2
}
export enum ButtonType {
File = 'File',
Normal = 'Normal',
Informational = 'Informational'
}

139
src/sql/workbench/browser/modelComponents/button.component.ts
View File

@@ -17,38 +17,30 @@ import { SIDE_BAR_BACKGROUND, SIDE_BAR_TITLE_FOREGROUND } from 'vs/workbench/com
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 { InfoButton } from 'sql/base/browser/ui/infoButton/infoButton';
import { Color } from 'vs/base/common/color';
import { IComponentDescriptor, IComponent, IModelStore, ComponentEventType } from 'sql/platform/dashboard/browser/interfaces';
import { convertSize } from 'sql/base/browser/dom';
import { createIconCssClass } from 'sql/workbench/browser/modelComponents/iconUtils';
@Component({
selector: 'modelview-button',
template: `
<ng-container *ngIf="!this.buttonType === 'Informational'"; else elseBlock>
<div>
<label for={{this.label}}>
<div #input style="width: 100%">
<input #fileInput *ngIf="this.isFile === true" id={{this.label}} type="file" accept="{{ this.fileType }}" style="display: none">
<input #fileInput *ngIf="this.isFile === true" id={{this.label}} type="file" accept="{{ this.fileType }}" style="display: none">
</div>
</label>
</ng-container>
<ng-container #elseBlock>
<div #informationalInput style="width: 100%;"></div>
</ng-container>
</div>
`
})
export default class ButtonComponent extends ComponentWithIconBase<azdata.ButtonProperties> implements IComponent, OnDestroy, AfterViewInit {
@Input() descriptor: IComponentDescriptor;
@Input() modelStore: IModelStore;
private _button: Button | InfoButton;
private _button: Button;
public fileType: string = '.sql';
@ViewChild('input', { read: ElementRef }) private _inputContainer: ElementRef;
@ViewChild('informationalInput', { read: ElementRef }) private _informationalInputContainer: ElementRef;
@ViewChild('fileInput', { read: ElementRef }) private _fileInputContainer: ElementRef;
constructor(
@Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef,
@Inject(IWorkbenchThemeService) private themeService: IWorkbenchThemeService,
@@ -59,48 +51,43 @@ export default class ButtonComponent extends ComponentWithIconBase<azdata.Button
ngOnInit(): void {
this.baseInit();
}
ngAfterViewInit(): void {
if (this._inputContainer) {
this._button = new Button(this._inputContainer.nativeElement);
}
if (this._informationalInputContainer) {
this._button = new InfoButton(this._informationalInputContainer.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 = (e.target as FileReader).result;
self.fileContent = text.toString();
self.fireEvent({
eventType: ComponentEventType.onDidClick,
args: {
filePath: file.path,
fileContent: self.fileContent
}
});
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: {
filePath: file.path,
fileContent: self.fileContent
}
});
};
reader.readAsText(file);
};
reader.readAsText(file);
};
} else {
this.fireEvent({
eventType: ComponentEventType.onDidClick,
args: e
});
}
}));
} else {
this.fireEvent({
eventType: ComponentEventType.onDidClick,
args: e
});
}
}));
}
}
ngOnDestroy(): void {
@@ -110,43 +97,31 @@ export default class ButtonComponent extends ComponentWithIconBase<azdata.Button
/// 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);
if (this._informationalInputContainer) {
let button = this._button as InfoButton;
button.buttonMaxHeight = this.properties.height;
button.buttonMaxWidth = this.properties.width;
button.description = this.properties.description;
button.iconClass = createIconCssClass(this.properties.iconPath);
button.iconHeight = this.properties.iconHeight;
button.iconWidth = this.properties.iconWidth;
button.title = this.properties.title;
} else {
this._button.enabled = this.enabled;
this._button.label = this.label;
this._button.enabled = this.enabled;
this._button.label = this.label;
if (this.properties.fileType) {
this.fileType = properties.fileType;
}
this._button.title = this.title;
if (this.properties.fileType) {
this.fileType = properties.fileType;
}
this._button.title = this.title;
// Button's ariaLabel gets set to the label by default.
// We only want to override that if buttonComponent's ariaLabel is set explicitly.
if (this.ariaLabel) {
this._button.ariaLabel = this.ariaLabel;
}
if (this.width) {
this._button.setWidth(convertSize(this.width.toString()));
}
if (this.height) {
this._button.setHeight(convertSize(this.height.toString()));
}
// Button's ariaLabel gets set to the label by default.
// We only want to override that if buttonComponent's ariaLabel is set explicitly.
if (this.ariaLabel) {
this._button.ariaLabel = this.ariaLabel;
}
if (this.width) {
this._button.setWidth(convertSize(this.width.toString()));
}
if (this.height) {
this._button.setHeight(convertSize(this.height.toString()));
}
this.updateIcon();
this._changeRef.detectChanges();
}
@@ -183,18 +158,6 @@ export default class ButtonComponent extends ComponentWithIconBase<azdata.Button
this.setPropertyFromUI<string>(this.setValueProperties, newValue);
}
public get buttonType(): azdata.ButtonType {
if (this.isFile === true) {
return 'File' as azdata.ButtonType;
} else {
return this.getPropertyOrDefault((props) => props.buttonType, 'Normal' as azdata.ButtonType);
}
}
public get description(): string {
return this.getPropertyOrDefault((props) => props.description, '');
}
public get isFile(): boolean {
return this.getPropertyOrDefault<boolean>((props) => props.isFile, false);
}