Move loading component out of common properties component (#10134)

This commit is contained in:
Charles Gagnon
2020-04-22 17:36:21 -07:00
committed by GitHub
parent 52f33cc587
commit 7bd1dfdf0f
5 changed files with 19 additions and 53 deletions

View File

@@ -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">

View File

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