Fix some missed property name updates (#10135)

* Fix some missed property name updates

* Undo css addition

* Remove css
This commit is contained in:
Charles Gagnon
2020-04-23 07:44:16 -07:00
committed by GitHub
parent 7bd1dfdf0f
commit b1081bb610
5 changed files with 30 additions and 31 deletions

View File

@@ -5,7 +5,7 @@
*--------------------------------------------------------------------------------------------*/
-->
<div class="grid-container {{gridDisplayLayout}}" style="position: absolute; height: 100%; width: 100%;" [style.display]="_loading ? 'none':'grid'">
<ng-template ngFor let-item [ngForOf]="displayProperties">
<ng-template ngFor let-item [ngForOf]="propertyItems">
<div class="property {{propertyLayout}}" style="display:flex">
<div class="propertyName">{{item.displayName}}</div>
<div class="splitter">:</div>

View File

@@ -2,8 +2,8 @@
* 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/propertiesContainer';
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 { Disposable } from 'vs/base/common/lifecycle';
@@ -18,7 +18,7 @@ enum PropertyLayoutDirection {
column = 'columnLayout'
}
export interface DisplayProperty {
export interface PropertyItem {
displayName: string;
value: string;
}
@@ -35,8 +35,7 @@ export class PropertiesContainer extends Disposable implements OnInit, OnDestroy
public gridDisplayLayout = GridDisplayLayout.twoColumns;
public propertyLayout = PropertyLayoutDirection.row;
public height: number;
private _displayProperties: DisplayProperty[] = [];
private _propertyItems: PropertyItem[] = [];
constructor(
@Inject(forwardRef(() => ChangeDetectorRef)) private _changeRef: ChangeDetectorRef,
@@ -46,7 +45,7 @@ export class PropertiesContainer extends Disposable implements OnInit, OnDestroy
}
ngOnInit() {
this._register(addDisposableListener(window, EventType.RESIZE, () => this.layoutDisplayProperties()));
this._register(addDisposableListener(window, EventType.RESIZE, () => this.layoutPropertyItems()));
this._changeRef.detectChanges();
}
@@ -54,7 +53,7 @@ export class PropertiesContainer extends Disposable implements OnInit, OnDestroy
this.dispose();
}
private layoutDisplayProperties(): void {
private layoutPropertyItems(): void {
// Reflow:
// 2 columns w/ horizontal alignment : 1366px and above
// 2 columns w/ vertical alignment : 1024 - 1365px
@@ -62,26 +61,26 @@ export class PropertiesContainer extends Disposable implements OnInit, OnDestroy
if (window.innerWidth >= 1366) {
this.gridDisplayLayout = GridDisplayLayout.twoColumns;
this.propertyLayout = PropertyLayoutDirection.row;
this.height = Math.ceil(this.displayProperties.length / 2) * horizontalPropertyHeight + collapseHeight;
this.height = Math.ceil(this.propertyItems.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;
this.height = Math.ceil(this.propertyItems.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.height = this.propertyItems.length * verticalPropertyHeight + collapseHeight;
}
this._changeRef.detectChanges();
}
public set displayProperties(displayProperties: DisplayProperty[]) {
this._displayProperties = displayProperties;
this.layoutDisplayProperties();
public set propertyItems(propertyItems: PropertyItem[]) {
this._propertyItems = propertyItems;
this.layoutPropertyItems();
}
public get displayProperties(): DisplayProperty[] {
return this._displayProperties;
public get propertyItems(): PropertyItem[] {
return this._propertyItems;
}
}