mirror of
https://github.com/ckaczor/azuredatastudio.git
synced 2026-01-21 01:25:37 -05:00
Move loading component out of common properties component (#10134)
This commit is contained in:
4
src/sql/azdata.proposed.d.ts
vendored
4
src/sql/azdata.proposed.d.ts
vendored
@@ -335,10 +335,6 @@ declare module 'azdata' {
|
||||
* The properties to display
|
||||
*/
|
||||
propertyItems?: PropertiesContainerItem[];
|
||||
/**
|
||||
* Whether the component is currently loading
|
||||
*/
|
||||
loading?: boolean;
|
||||
}
|
||||
|
||||
export namespace nb {
|
||||
|
||||
@@ -4,8 +4,6 @@
|
||||
* Licensed under the Source EULA. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
-->
|
||||
<loading-spinner [loading]="loading" [loadingMessage]="loadingMessage"
|
||||
[loadingCompletedMessage]="loadingCompletedMessage"></loading-spinner>
|
||||
<div class="grid-container {{gridDisplayLayout}}" style="position: absolute; height: 100%; width: 100%;" [style.display]="_loading ? 'none':'grid'">
|
||||
<ng-template ngFor let-item [ngForOf]="displayProperties">
|
||||
<div class="property {{propertyLayout}}" style="display:flex">
|
||||
|
||||
@@ -6,7 +6,6 @@ import 'vs/css!./media/propertiesContainer';
|
||||
|
||||
import { Component, Inject, forwardRef, ChangeDetectorRef, OnInit, ElementRef, OnDestroy } from '@angular/core';
|
||||
import { EventType, addDisposableListener } from 'vs/base/browser/dom';
|
||||
import * as nls from 'vs/nls';
|
||||
import { Disposable } from 'vs/base/common/lifecycle';
|
||||
|
||||
enum GridDisplayLayout {
|
||||
@@ -35,11 +34,8 @@ const verticalPropertyHeight = 46;
|
||||
export class PropertiesContainer extends Disposable implements OnInit, OnDestroy {
|
||||
public gridDisplayLayout = GridDisplayLayout.twoColumns;
|
||||
public propertyLayout = PropertyLayoutDirection.row;
|
||||
public loadingMessage: string = nls.localize('loadingProperties', "Loading properties");
|
||||
public loadingCompletedMessage: string = nls.localize('loadingPropertiesCompleted', "Loading properties completed");
|
||||
public height: number;
|
||||
|
||||
private _loading: boolean = true;
|
||||
private _displayProperties: DisplayProperty[] = [];
|
||||
|
||||
constructor(
|
||||
@@ -63,23 +59,21 @@ export class PropertiesContainer extends Disposable implements OnInit, OnDestroy
|
||||
// 2 columns w/ horizontal alignment : 1366px and above
|
||||
// 2 columns w/ vertical alignment : 1024 - 1365px
|
||||
// 1 column w/ vertical alignment : 1024px or less
|
||||
if (!this.loading) {
|
||||
if (window.innerWidth >= 1366) {
|
||||
this.gridDisplayLayout = GridDisplayLayout.twoColumns;
|
||||
this.propertyLayout = PropertyLayoutDirection.row;
|
||||
this.height = Math.ceil(this.displayProperties.length / 2) * horizontalPropertyHeight + collapseHeight;
|
||||
} else if (window.innerWidth < 1366 && window.innerWidth >= 1024) {
|
||||
this.gridDisplayLayout = GridDisplayLayout.twoColumns;
|
||||
this.propertyLayout = PropertyLayoutDirection.column;
|
||||
this.height = Math.ceil(this.displayProperties.length / 2) * verticalPropertyHeight + collapseHeight;
|
||||
} else if (window.innerWidth < 1024) {
|
||||
this.gridDisplayLayout = GridDisplayLayout.oneColumn;
|
||||
this.propertyLayout = PropertyLayoutDirection.column;
|
||||
this.height = this.displayProperties.length * verticalPropertyHeight + collapseHeight;
|
||||
}
|
||||
|
||||
this._changeRef.detectChanges();
|
||||
if (window.innerWidth >= 1366) {
|
||||
this.gridDisplayLayout = GridDisplayLayout.twoColumns;
|
||||
this.propertyLayout = PropertyLayoutDirection.row;
|
||||
this.height = Math.ceil(this.displayProperties.length / 2) * horizontalPropertyHeight + collapseHeight;
|
||||
} else if (window.innerWidth < 1366 && window.innerWidth >= 1024) {
|
||||
this.gridDisplayLayout = GridDisplayLayout.twoColumns;
|
||||
this.propertyLayout = PropertyLayoutDirection.column;
|
||||
this.height = Math.ceil(this.displayProperties.length / 2) * verticalPropertyHeight + collapseHeight;
|
||||
} else if (window.innerWidth < 1024) {
|
||||
this.gridDisplayLayout = GridDisplayLayout.oneColumn;
|
||||
this.propertyLayout = PropertyLayoutDirection.column;
|
||||
this.height = this.displayProperties.length * verticalPropertyHeight + collapseHeight;
|
||||
}
|
||||
|
||||
this._changeRef.detectChanges();
|
||||
}
|
||||
|
||||
public set displayProperties(displayProperties: DisplayProperty[]) {
|
||||
@@ -90,13 +84,4 @@ export class PropertiesContainer extends Disposable implements OnInit, OnDestroy
|
||||
public get displayProperties(): DisplayProperty[] {
|
||||
return this._displayProperties;
|
||||
}
|
||||
|
||||
public set loading(loading: boolean) {
|
||||
this._loading = loading;
|
||||
this._changeRef.detectChanges();
|
||||
}
|
||||
|
||||
public get loading(): boolean {
|
||||
return this._loading;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -42,16 +42,6 @@ export default class PropertiesContainerComponent extends ComponentBase implemen
|
||||
public setProperties(properties: { [key: string]: any; }): void {
|
||||
super.setProperties(properties);
|
||||
this._propertiesContainer.displayProperties = this.displayProperties;
|
||||
this._propertiesContainer.loading = this.loading;
|
||||
}
|
||||
|
||||
public get loading(): boolean {
|
||||
return this.getPropertyOrDefault<azdata.PropertiesContainerComponentProperties, boolean>((props) => props.loading, true);
|
||||
}
|
||||
|
||||
public set loading(newValue: boolean) {
|
||||
this.setPropertyFromUI<azdata.PropertiesContainerComponentProperties, boolean>((props, value) => props.loading = value, newValue);
|
||||
this._propertiesContainer.loading = newValue;
|
||||
}
|
||||
|
||||
public get displayProperties(): DisplayProperty[] {
|
||||
|
||||
@@ -52,10 +52,14 @@ const dashboardRegistry = Registry.as<IDashboardRegistry>(DashboardExtensions.Da
|
||||
|
||||
@Component({
|
||||
selector: 'properties-widget',
|
||||
template: '<properties-container></properties-container>'
|
||||
template: `
|
||||
<loading-spinner [loading]="_loading" [loadingMessage]="loadingMessage" [loadingCompletedMessage]="loadingCompletedMessage"></loading-spinner>
|
||||
<properties-container></properties-container>`
|
||||
})
|
||||
export class PropertiesWidgetComponent extends DashboardWidget implements IDashboardWidget, OnInit {
|
||||
@ViewChild(PropertiesContainer) private _propertiesContainer: PropertiesContainer;
|
||||
public loadingMessage: string = nls.localize('loadingProperties', "Loading properties");
|
||||
public loadingCompletedMessage: string = nls.localize('loadingPropertiesCompleted', "Loading properties completed");
|
||||
private _connection: ConnectionManagementInfo;
|
||||
|
||||
constructor(
|
||||
@@ -245,13 +249,6 @@ export class PropertiesWidgetComponent extends DashboardWidget implements IDashb
|
||||
return val;
|
||||
}
|
||||
|
||||
protected setLoadingStatus(loading: boolean): void {
|
||||
super.setLoadingStatus(loading);
|
||||
if (this._inited) {
|
||||
this._propertiesContainer.loading = loading;
|
||||
}
|
||||
}
|
||||
|
||||
public get height(): number {
|
||||
return convertSizeToNumber(this._propertiesContainer.height);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user