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

ML extension - View models styles / layout updates (#13091)

Browse Source 
* Revised styles and added elements to view models stage of the View and import models.

* Implemented Leilas DataInfoComponent, replacing my use of icon and title, description fields. Corrected some styles.

* Fixed the issue with icon title and description

* Fixed severla issues

* Added method to output localized text for number of models shown. Added component to display models shown text.

* Fixed the issues with order of components

* Fixed showing number of models

Co-authored-by: llali <llali@microsoft.com>
This commit is contained in:
Hale Rankin
2020-11-04 12:07:54 -08:00
committed by GitHub
parent 06a4b0d1a2
commit 4af67c9734
13 changed files with 286 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
extensions/machine-learning/src/views/dataInfoComponent.ts
View File

@@ -13,6 +13,8 @@ import { ViewBase } from './viewBase';
export interface iconSettings {
width?: number,
height?: number,
containerWidth?: number,
containerHeight?: number,
css?: { [key: string]: string },
path?: string | vscode.Uri | { light: string | vscode.Uri; dark: string | vscode.Uri }
}
@@ -24,12 +26,13 @@ export class DataInfoComponent extends ViewBase {
private _labelComponent: azdata.TextComponent | undefined;
private _descriptionComponent: azdata.TextComponent | undefined;
private _loadingComponent: azdata.LoadingComponent | undefined;
private _width: number = 100;
private _height: number = 100;
private _width: number = 200;
private _height: number = 200;
private _title: string = '';
private _description: string = '';
private _iconComponent: azdata.ImageComponent | undefined;
private _iconSettings: iconSettings | undefined;
private _defaultIconSize = 128;
constructor(apiWrapper: ApiWrapper, parent: ModelViewBase) {
@@ -38,9 +41,11 @@ export class DataInfoComponent extends ViewBase {
public registerComponent(modelBuilder: azdata.ModelBuilder): azdata.Component {
this._descriptionComponent = modelBuilder.text().withProperties({
value: this._description,
width: 200
}).component();
this._labelComponent = modelBuilder.text().withProperties({
value: this._title,
width: 200
}).component();
this._labelContainer = modelBuilder.flexContainer().withLayout({
@@ -55,26 +60,26 @@ export class DataInfoComponent extends ViewBase {
if (!this._iconSettings) {
this._iconSettings = {
css: {},
height: 50,
width: 50,
height: this._defaultIconSize,
width: this._defaultIconSize,
path: ''
,
};
}
this._iconComponent = modelBuilder.image().withProperties({
width: 100,
height: 100,
iconWidth: this._iconSettings.width,
iconHeight: this._iconSettings.height,
width: this._iconSettings?.containerWidth ?? this._defaultIconSize,
height: this._iconSettings?.containerHeight ?? this._defaultIconSize,
iconWidth: this._iconSettings?.width ?? this._defaultIconSize,
iconHeight: this._iconSettings?.height ?? this._defaultIconSize,
title: this._title
}).component();
let iconContainer = modelBuilder.flexContainer().withLayout({
width: 100,
width: this._iconSettings?.containerWidth ?? this._defaultIconSize,
}).component();
iconContainer.addItem(this._iconComponent, {
CSSStyles: this._iconSettings.css
CSSStyles: this._iconSettings?.css ?? {}
});
this._labelContainer.addItem(iconContainer);