auto height

@overflow/commons/ui/directive/auto-height.directive.ts

@@ -0,0 +1,61 @@
+// https://github.com/arthurvaverko/ngx-fill-height/tree/master/src/app/fill-height
+
+import { Directive, AfterViewInit, Input, HostListener, ElementRef, ChangeDetectorRef, OnInit, OnDestroy } from '@angular/core';
+
+@Directive({
+  selector: '[of-auto-height]'
+})
+export class AutoHeightDirective implements OnInit, OnDestroy, AfterViewInit {
+  @Input() footerElement = null;
+
+  @HostListener('window:resize', ['$event'])
+  onResize(event) {
+    this.calculateAndSetElementHeight();
+  }
+
+  constructor(
+    private elementRef: ElementRef,
+    private changeDetector: ChangeDetectorRef,
+  ) {
+  }
+
+  ngOnInit(): void {
+  }
+
+  ngAfterViewInit(): void {
+    this.calculateAndSetElementHeight();
+  }
+
+  ngOnDestroy(): void {
+  }
+
+  /**
+   * forceCalculate
+   */
+  public forceCalculate() {
+    this.calculateAndSetElementHeight();
+  }
+
+  private calculateAndSetElementHeight() {
+    this.changeDetector.detectChanges();
+
+    this.elementRef.nativeElement.style.overflow = 'auto';
+    const windowHeight = window.innerHeight;
+    const elementOffsetTop = this.getElementOffsetTop();
+    const elementMarginBottom = this.elementRef.nativeElement.style.marginBottom;
+    const footerElementMargin = this.getfooterElementMargin();
+
+    this.elementRef.nativeElement.style.height = windowHeight - footerElementMargin - elementOffsetTop + 'px';
+    console.log([windowHeight, elementOffsetTop, elementMarginBottom, footerElementMargin, this.elementRef.nativeElement.style.height]);
+  }
+
+  private getElementOffsetTop() {
+    return this.elementRef.nativeElement.getBoundingClientRect().top;
+  }
+
+  private getfooterElementMargin() {
+    if (!this.footerElement) { return 0; }
+    const footerStyle = window.getComputedStyle(this.footerElement);
+    return parseInt(footerStyle.height, 10);
+  }
+}

@overflow/commons/ui/directive/index.ts

@@ -1,2 +1,5 @@
+import { AutoHeightDirective } from './auto-height.directive';
+
 export const DIRECTIVES = [
+  AutoHeightDirective,
 ];

package-lock.json

@@ -1,27 +0,0 @@
-{
-  "name": "scanner-app",
-  "version": "0.0.0",
-  "lockfileVersion": 1,
-  "requires": true,
-  "dependencies": {
-    "ngx-perfect-scrollbar": {
-      "version": "6.3.1",
-      "resolved": "https://nexus.loafle.net/repository/npm-all/ngx-perfect-scrollbar/-/ngx-perfect-scrollbar-6.3.1.tgz",
-      "integrity": "sha512-kgHT0A1pDnZO5CxB4TOwflHb1Q152wZ3Nec0Zf7d29bgA1kAFl6oK8wFmYtGWeaFNhSCExus6TOq3sWN3xRQig==",
-      "requires": {
-        "perfect-scrollbar": "1.4.0",
-        "resize-observer-polyfill": "1.5.0"
-      }
-    },
-    "perfect-scrollbar": {
-      "version": "1.4.0",
-      "resolved": "https://nexus.loafle.net/repository/npm-all/perfect-scrollbar/-/perfect-scrollbar-1.4.0.tgz",
-      "integrity": "sha512-/2Sk/khljhdrsamjJYS5NjrH+GKEHEwh7zFSiYyxROyYKagkE4kSn2zDQDRTOMo8mpT2jikxx6yI1dG7lNP/hw=="
-    },
-    "resize-observer-polyfill": {
-      "version": "1.5.0",
-      "resolved": "https://nexus.loafle.net/repository/npm-all/resize-observer-polyfill/-/resize-observer-polyfill-1.5.0.tgz",
-      "integrity": "sha512-M2AelyJDVR/oLnToJLtuDJRBBWUGUvvGigj1411hXhAdyFWqMaqHp7TixW3FpiLuVaikIcR1QL+zqoJoZlOgpg=="
-    }
-  }
-}

src/commons/component/zone-detail.component.html

@@ -14,7 +14,7 @@
     </h3>
   </div>
 
-  <p-tabView class="detail-content">
+  <p-tabView class="detail-content" (onChange)="onTabViewChange($event)">
 
     <p-tabPanel header="General">
       <perfect-scrollbar>
@@ -44,7 +44,7 @@
     </p-tabPanel>
 
     <p-tabPanel header="Hosts">
-      <div>
+      <div of-auto-height>
         <perfect-scrollbar>
           <ul class="key-value">
             <li *ngFor="let host of zone.hostList | ipSort: 'address'">

src/commons/component/zone-detail.component.ts

@@ -1,5 +1,6 @@
-import { Component, Input, OnInit, Output, EventEmitter } from '@angular/core';
+import { Component, Input, OnInit, Output, EventEmitter, ViewChild } from '@angular/core';
 import { Zone, Host } from '@overflow/model/discovery';
+import { AutoHeightDirective } from '@overflow/commons/ui/directive/auto-height.directive';
 
 const IPCIDR = require('ip-cidr');
 
@@ -12,6 +13,9 @@ export class ZoneDetailComponent implements OnInit {
 
   @Input() zone: Zone;
   @Output() otherHostSelect = new EventEmitter<Host>();
+
+  @ViewChild(AutoHeightDirective) autoHeightDirective;
+
   ipRange: string;
 
   constructor(
@@ -31,4 +35,8 @@ export class ZoneDetailComponent implements OnInit {
     this.otherHostSelect.emit(host);
   }
 
+  onTabViewChange($event) {
+    this.autoHeightDirective.forceCalculate();
+  }
+
 }

yarn.lock

@@ -2004,6 +2004,10 @@ crypto-random-string@^1.0.0:
   version "1.0.0"
   resolved "https://nexus.loafle.net/repository/npm-all/crypto-random-string/-/crypto-random-string-1.0.0.tgz#a230f64f568310e1498009940790ec99545bca7e"
 
+css-element-queries@^1.0.2:
+  version "1.0.2"
+  resolved "https://nexus.loafle.net/repository/npm-all/css-element-queries/-/css-element-queries-1.0.2.tgz#a32edfee4a5023688ef4d45f402077306d51d44c"
+
 css-parse@1.7.x:
   version "1.7.0"
   resolved "https://nexus.loafle.net/repository/npm-all/css-parse/-/css-parse-1.7.0.tgz#321f6cf73782a6ff751111390fc05e2c657d8c9b"