This commit is contained in:
crusader 2018-09-29 00:34:38 +09:00
parent 578a2af303
commit c1f532e2a9
9 changed files with 72 additions and 44 deletions

View File

@ -6,6 +6,7 @@ import { Directive, AfterViewInit, Input, HostListener, ElementRef, ChangeDetect
selector: '[of-auto-height]' selector: '[of-auto-height]'
}) })
export class AutoHeightDirective implements OnInit, OnDestroy, AfterViewInit { export class AutoHeightDirective implements OnInit, OnDestroy, AfterViewInit {
@Input() key: string;
@Input() footerElement = null; @Input() footerElement = null;
@HostListener('window:resize', ['$event']) @HostListener('window:resize', ['$event'])
@ -29,6 +30,10 @@ export class AutoHeightDirective implements OnInit, OnDestroy, AfterViewInit {
ngOnDestroy(): void { ngOnDestroy(): void {
} }
onVisible(event) {
console.log('visibilitychange');
}
/** /**
* forceCalculate * forceCalculate
*/ */

View File

@ -25,7 +25,6 @@ import { SERVICES } from '../commons/service';
AppRoutingModule, AppRoutingModule,
AppStoreModule, AppStoreModule,
], ],
providers: [ providers: [
...SERVICES, ...SERVICES,

View File

@ -70,7 +70,7 @@
</p-tabPanel> </p-tabPanel>
<p-tabPanel header="Ports" *ngIf="host.portList"> <p-tabPanel header="Ports" *ngIf="host.portList">
<div of-auto-height> <div of-auto-height key="2">
<perfect-scrollbar> <perfect-scrollbar>
<ul class="key-value"> <ul class="key-value">
<li *ngFor="let port of host.portList | sort: 'portNumber'"> <li *ngFor="let port of host.portList | sort: 'portNumber'">

View File

@ -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 { of } from 'rxjs';
import { map, catchError, take } from 'rxjs/operators'; 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 { export class HostDetailComponent implements OnChanges {
@Input() host: Host; @Input() host: Host;
@ViewChild(AutoHeightDirective) autoHeightDirective;
@ViewChildren(AutoHeightDirective) autoHeightDirectives: QueryList<AutoHeightDirective>;
pingWaiting: boolean; pingWaiting: boolean;
@ -75,7 +76,12 @@ export class HostDetailComponent implements OnChanges {
} }
onTabViewChange($event) { onTabViewChange($event) {
this.autoHeightDirective.forceCalculate(); const index = String($event.index);
this.autoHeightDirectives.map(item => {
if (item.key === index) {
item.forceCalculate();
}
});
} }
} }

View File

@ -46,7 +46,7 @@
</p-tabPanel> </p-tabPanel>
<p-tabPanel header="Metadata" *ngIf="service.meta"> <p-tabPanel header="Metadata" *ngIf="service.meta">
<div of-auto-height> <div of-auto-height key="1">
<perfect-scrollbar> <perfect-scrollbar>
<ul class="detail-content-meta-title"> <ul class="detail-content-meta-title">
<li *ngFor="let key of service.meta | objectKeys"> <li *ngFor="let key of service.meta | objectKeys">
@ -105,8 +105,6 @@
</p-table> </p-table>
</div> </div>
</p-tabPanel> </p-tabPanel>
</p-tabView> </p-tabView>

View File

@ -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 { Service } from '@overflow/model/discovery';
import { PingResult } from '@overflow/model/ping'; import { PingResult } from '@overflow/model/ping';
import { ProbeService } from '../service/probe.service'; import { ProbeService } from '../service/probe.service';
@ -15,7 +15,7 @@ export class ServiceDetailComponent implements OnChanges {
@Input() service: Service; @Input() service: Service;
@ViewChild(AutoHeightDirective) autoHeightDirective; @ViewChildren(AutoHeightDirective) autoHeightDirectives: QueryList<AutoHeightDirective>;
pingWaiting: boolean; pingWaiting: boolean;
@ -36,10 +36,6 @@ export class ServiceDetailComponent implements OnChanges {
this.deadline = 1; this.deadline = 1;
} }
onTabViewChange($event) {
this.autoHeightDirective.forceCalculate();
}
ngOnChanges(simpleChanges: SimpleChanges): void { ngOnChanges(simpleChanges: SimpleChanges): void {
this.pingResult = null; this.pingResult = null;
} }
@ -75,4 +71,13 @@ export class ServiceDetailComponent implements OnChanges {
.subscribe(); .subscribe();
} }
onTabViewChange($event) {
const index = String($event.index);
this.autoHeightDirectives.map(item => {
if (item.key === index) {
item.forceCalculate();
}
});
}
} }

View File

@ -17,6 +17,7 @@
<p-tabView class="detail-content" (onChange)="onTabViewChange($event)"> <p-tabView class="detail-content" (onChange)="onTabViewChange($event)">
<p-tabPanel header="General"> <p-tabPanel header="General">
<div of-auto-height key="0">
<perfect-scrollbar> <perfect-scrollbar>
<ul class="key-value"> <ul class="key-value">
<li *ngIf="zone.iface"> <li *ngIf="zone.iface">
@ -41,10 +42,11 @@
</li> </li>
</ul> </ul>
</perfect-scrollbar> </perfect-scrollbar>
</div>
</p-tabPanel> </p-tabPanel>
<p-tabPanel header="Hosts"> <p-tabPanel header="Hosts">
<div of-auto-height> <div of-auto-height key="1">
<perfect-scrollbar> <perfect-scrollbar>
<ul class="key-value"> <ul class="key-value">
<li *ngFor="let host of zone.hostList | ipSort: 'address'"> <li *ngFor="let host of zone.hostList | ipSort: 'address'">
@ -57,7 +59,5 @@
</perfect-scrollbar> </perfect-scrollbar>
</div> </div>
</p-tabPanel> </p-tabPanel>
</p-tabView> </p-tabView>
</div> </div>

View File

@ -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 { Zone, Host } from '@overflow/model/discovery';
import { AutoHeightDirective } from '@overflow/commons/ui/directive/auto-height.directive'; import { AutoHeightDirective } from '@overflow/commons/ui/directive/auto-height.directive';
@ -14,7 +14,7 @@ export class ZoneDetailComponent implements OnInit {
@Input() zone: Zone; @Input() zone: Zone;
@Output() otherHostSelect = new EventEmitter<Host>(); @Output() otherHostSelect = new EventEmitter<Host>();
@ViewChild(AutoHeightDirective) autoHeightDirective; @ViewChildren(AutoHeightDirective) autoHeightDirectives: QueryList<AutoHeightDirective>;
ipRange: string; ipRange: string;
@ -36,7 +36,12 @@ export class ZoneDetailComponent implements OnInit {
} }
onTabViewChange($event) { onTabViewChange($event) {
this.autoHeightDirective.forceCalculate(); const index = String($event.index);
this.autoHeightDirectives.map(item => {
if (item.key === index) {
item.forceCalculate();
}
});
} }
} }

View File

@ -790,6 +790,12 @@ amdefine@>=0.0.4:
version "1.0.1" version "1.0.1"
resolved "https://nexus.loafle.net/repository/npm-all/amdefine/-/amdefine-1.0.1.tgz#4a5282ac164729e93619bcfd3ad151f817ce91f5" 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: ansi-align@^2.0.0:
version "2.0.0" version "2.0.0"
resolved "https://nexus.loafle.net/repository/npm-all/ansi-align/-/ansi-align-2.0.0.tgz#c36aeccba563b89ceb556f3690f0b1d9e3547f7f" 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" version "4.1.0"
resolved "https://nexus.loafle.net/repository/npm-all/rx/-/rx-4.1.0.tgz#a5f13ff79ef3b740fe30aa803fb09f98805d4782" 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: rxjs@^6.0.0, rxjs@^6.2.2:
version "6.3.3" version "6.3.3"
resolved "https://nexus.loafle.net/repository/npm-all/rxjs/-/rxjs-6.3.3.tgz#3c6a7fa420e844a81390fb1158a9ec614f4bad55" resolved "https://nexus.loafle.net/repository/npm-all/rxjs/-/rxjs-6.3.3.tgz#3c6a7fa420e844a81390fb1158a9ec614f4bad55"