diff --git a/@overflow/commons/ui/directive/auto-height.directive.ts b/@overflow/commons/ui/directive/auto-height.directive.ts index 9b7bfae..d4ed6d6 100644 --- a/@overflow/commons/ui/directive/auto-height.directive.ts +++ b/@overflow/commons/ui/directive/auto-height.directive.ts @@ -6,6 +6,7 @@ import { Directive, AfterViewInit, Input, HostListener, ElementRef, ChangeDetect selector: '[of-auto-height]' }) export class AutoHeightDirective implements OnInit, OnDestroy, AfterViewInit { + @Input() key: string; @Input() footerElement = null; @HostListener('window:resize', ['$event']) @@ -29,6 +30,10 @@ export class AutoHeightDirective implements OnInit, OnDestroy, AfterViewInit { ngOnDestroy(): void { } + onVisible(event) { + console.log('visibilitychange'); + } + /** * forceCalculate */ diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 3090f7b..c884970 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -25,7 +25,6 @@ import { SERVICES } from '../commons/service'; AppRoutingModule, AppStoreModule, - ], providers: [ ...SERVICES, diff --git a/src/commons/component/host-detail.component.html b/src/commons/component/host-detail.component.html index 9920fef..3b26146 100644 --- a/src/commons/component/host-detail.component.html +++ b/src/commons/component/host-detail.component.html @@ -70,7 +70,7 @@ -
+
  • diff --git a/src/commons/component/host-detail.component.ts b/src/commons/component/host-detail.component.ts index b126b56..54bb7c0 100644 --- a/src/commons/component/host-detail.component.ts +++ b/src/commons/component/host-detail.component.ts @@ -1,4 +1,4 @@ -import { Component, Input, OnChanges, SimpleChanges, ViewChild } from '@angular/core'; +import { Component, Input, OnChanges, SimpleChanges, ViewChildren, QueryList } from '@angular/core'; import { of } from 'rxjs'; import { map, catchError, take } from 'rxjs/operators'; @@ -17,7 +17,8 @@ import { AutoHeightDirective } from '@overflow/commons/ui/directive/auto-height. }) export class HostDetailComponent implements OnChanges { @Input() host: Host; - @ViewChild(AutoHeightDirective) autoHeightDirective; + + @ViewChildren(AutoHeightDirective) autoHeightDirectives: QueryList; pingWaiting: boolean; @@ -75,7 +76,12 @@ export class HostDetailComponent implements OnChanges { } onTabViewChange($event) { - this.autoHeightDirective.forceCalculate(); + const index = String($event.index); + this.autoHeightDirectives.map(item => { + if (item.key === index) { + item.forceCalculate(); + } + }); } } diff --git a/src/commons/component/service-detail.component.html b/src/commons/component/service-detail.component.html index 3350f57..348fcb8 100644 --- a/src/commons/component/service-detail.component.html +++ b/src/commons/component/service-detail.component.html @@ -46,7 +46,7 @@ -
    +
    • @@ -105,8 +105,6 @@
    - - diff --git a/src/commons/component/service-detail.component.ts b/src/commons/component/service-detail.component.ts index 7d32095..d81e644 100644 --- a/src/commons/component/service-detail.component.ts +++ b/src/commons/component/service-detail.component.ts @@ -1,4 +1,4 @@ -import { Component, Input, Output, EventEmitter, ViewChild, OnChanges, SimpleChanges } from '@angular/core'; +import { Component, Input, OnChanges, SimpleChanges, ViewChildren, QueryList } from '@angular/core'; import { Service } from '@overflow/model/discovery'; import { PingResult } from '@overflow/model/ping'; import { ProbeService } from '../service/probe.service'; @@ -15,7 +15,7 @@ export class ServiceDetailComponent implements OnChanges { @Input() service: Service; - @ViewChild(AutoHeightDirective) autoHeightDirective; + @ViewChildren(AutoHeightDirective) autoHeightDirectives: QueryList; pingWaiting: boolean; @@ -36,10 +36,6 @@ export class ServiceDetailComponent implements OnChanges { this.deadline = 1; } - onTabViewChange($event) { - this.autoHeightDirective.forceCalculate(); - } - ngOnChanges(simpleChanges: SimpleChanges): void { this.pingResult = null; } @@ -75,4 +71,13 @@ export class ServiceDetailComponent implements OnChanges { .subscribe(); } + onTabViewChange($event) { + const index = String($event.index); + this.autoHeightDirectives.map(item => { + if (item.key === index) { + item.forceCalculate(); + } + }); + } + } diff --git a/src/commons/component/zone-detail.component.html b/src/commons/component/zone-detail.component.html index ebc793a..25e15f6 100644 --- a/src/commons/component/zone-detail.component.html +++ b/src/commons/component/zone-detail.component.html @@ -17,34 +17,36 @@ - -
      -
    • - Interface - {{zone.iface}} -
      • -
    • - Mac Address - {{zone.mac}} -
      • -
    • - IP Version - {{zone.metaIPType.key}} -
      • -
    • - Network - {{zone.network}} -
      • -
    • - IP Range - {{ipRange}} -
      • -
    -     +
    + +
      +
    • + Interface + {{zone.iface}} +
      • +
    • + Mac Address + {{zone.mac}} +
      • +
    • + IP Version + {{zone.metaIPType.key}} +
      • +
    • + Network + {{zone.network}} +
      • +
    • + IP Range + {{ipRange}} +
      • +
    +     +
    -
    +
    • @@ -57,7 +59,5 @@
    - -
    \ No newline at end of file diff --git a/src/commons/component/zone-detail.component.ts b/src/commons/component/zone-detail.component.ts index 41f78d8..5c3e610 100644 --- a/src/commons/component/zone-detail.component.ts +++ b/src/commons/component/zone-detail.component.ts @@ -1,4 +1,4 @@ -import { Component, Input, OnInit, Output, EventEmitter, ViewChild } from '@angular/core'; +import { Component, Input, OnInit, Output, EventEmitter, ViewChildren, QueryList } from '@angular/core'; import { Zone, Host } from '@overflow/model/discovery'; import { AutoHeightDirective } from '@overflow/commons/ui/directive/auto-height.directive'; @@ -14,7 +14,7 @@ export class ZoneDetailComponent implements OnInit { @Input() zone: Zone; @Output() otherHostSelect = new EventEmitter(); - @ViewChild(AutoHeightDirective) autoHeightDirective; + @ViewChildren(AutoHeightDirective) autoHeightDirectives: QueryList; ipRange: string; @@ -36,7 +36,12 @@ export class ZoneDetailComponent implements OnInit { } onTabViewChange($event) { - this.autoHeightDirective.forceCalculate(); + const index = String($event.index); + this.autoHeightDirectives.map(item => { + if (item.key === index) { + item.forceCalculate(); + } + }); } } diff --git a/yarn.lock b/yarn.lock index 9920208..917195e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -790,6 +790,12 @@ amdefine@>=0.0.4: version "1.0.1" resolved "https://nexus.loafle.net/repository/npm-all/amdefine/-/amdefine-1.0.1.tgz#4a5282ac164729e93619bcfd3ad151f817ce91f5" +angular-page-visibility@^6.1.3: + version "6.1.3" + resolved "https://nexus.loafle.net/repository/npm-all/angular-page-visibility/-/angular-page-visibility-6.1.3.tgz#d2cfaa5a73aec195f393be03cf9fc45f9b293e16" + dependencies: + tslib "^1.9.0" + ansi-align@^2.0.0: version "2.0.0" resolved "https://nexus.loafle.net/repository/npm-all/ansi-align/-/ansi-align-2.0.0.tgz#c36aeccba563b89ceb556f3690f0b1d9e3547f7f" @@ -6498,6 +6504,10 @@ rx@^4.1.0: version "4.1.0" resolved "https://nexus.loafle.net/repository/npm-all/rx/-/rx-4.1.0.tgz#a5f13ff79ef3b740fe30aa803fb09f98805d4782" +rxjs-compat@^6.3.3: + version "6.3.3" + resolved "https://nexus.loafle.net/repository/npm-all/rxjs-compat/-/rxjs-compat-6.3.3.tgz#2ab3b9ac0dac0c073749d55fef9c03ea1df2045c" + rxjs@^6.0.0, rxjs@^6.2.2: version "6.3.3" resolved "https://nexus.loafle.net/repository/npm-all/rxjs/-/rxjs-6.3.3.tgz#3c6a7fa420e844a81390fb1158a9ec614f4bad55"