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

Remove properties widget height calculations (#10152)

Browse Source 
* Remove height calculations

* Remove custom height setting

* Fix compile errors
This commit is contained in:
Charles Gagnon
2020-04-24 11:36:45 -07:00
committed by GitHub
parent 1e8a9c47cb
commit a018058169
11 changed files with 43 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/sql/base/browser/ui/propertiesContainer/media/propertiesContainer.css
View File

@@ -3,6 +3,19 @@
* Licensed under the Source EULA. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
properties-container {
display: block;
}
properties-container .grid-container {
width: 100%;
display: grid;
}
properties-container .property {
display:flex;
}
properties-container .twoColumns.grid-container {
grid-template-columns: 50% 50%;
}

4
src/sql/base/browser/ui/propertiesContainer/propertiesContainer.component.html
View File

@@ -4,9 +4,9 @@
* Licensed under the Source EULA. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
-->
<div class="grid-container {{gridDisplayLayout}}" style="position: absolute; height: 100%; width: 100%;" [style.display]="_loading ? 'none':'grid'">
<div class="grid-container {{gridDisplayLayout}}">
<ng-template ngFor let-item [ngForOf]="propertyItems">
<div class="property {{propertyLayout}}" style="display:flex">
<div class="property {{propertyLayout}}">
<div class="propertyName">{{item.displayName}}</div>
<div class="splitter">:</div>
<div class="propertyValue">{{item.value}}</div>

17
src/sql/base/browser/ui/propertiesContainer/propertiesContainer.component.ts
View File

@@ -4,8 +4,8 @@
*--------------------------------------------------------------------------------------------*/
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 { Component, Inject, forwardRef, ChangeDetectorRef, OnInit, OnDestroy } from '@angular/core';
import * as DOM from 'vs/base/browser/dom';
import { Disposable } from 'vs/base/common/lifecycle';
enum GridDisplayLayout {
@@ -23,10 +23,6 @@ export interface PropertyItem {
value: string;
}
const collapseHeight = 25;
const horizontalPropertyHeight = 28;
const verticalPropertyHeight = 46;
@Component({
selector: 'properties-container',
templateUrl: decodeURI(require.toUrl('./propertiesContainer.component.html'))
@@ -34,18 +30,16 @@ const verticalPropertyHeight = 46;
export class PropertiesContainer extends Disposable implements OnInit, OnDestroy {
public gridDisplayLayout = GridDisplayLayout.twoColumns;
public propertyLayout = PropertyLayoutDirection.row;
public height: number;
private _propertyItems: PropertyItem[] = [];
constructor(
@Inject(forwardRef(() => ChangeDetectorRef)) private _changeRef: ChangeDetectorRef,
@Inject(forwardRef(() => ElementRef)) el: ElementRef
@Inject(forwardRef(() => ChangeDetectorRef)) private _changeRef: ChangeDetectorRef
) {
super();
}
ngOnInit() {
this._register(addDisposableListener(window, EventType.RESIZE, () => this.layoutPropertyItems()));
this._register(DOM.addDisposableListener(window, DOM.EventType.RESIZE, () => this.layoutPropertyItems()));
this._changeRef.detectChanges();
}
@@ -61,15 +55,12 @@ 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.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.propertyItems.length / 2) * verticalPropertyHeight + collapseHeight;
} else if (window.innerWidth < 1024) {
this.gridDisplayLayout = GridDisplayLayout.oneColumn;
this.propertyLayout = PropertyLayoutDirection.column;
this.height = this.propertyItems.length * verticalPropertyHeight + collapseHeight;
}
this._changeRef.detectChanges();