diff options
author | Jongmok Hong <jongmok@google.com> | 2018-09-13 15:04:36 +0900 |
---|---|---|
committer | Jongmok Hong <jongmok@google.com> | 2018-09-21 13:24:43 +0900 |
commit | 086619542c2b7bb3b5879f6ac1c7bcf15aa0f819 (patch) | |
tree | bf12c10ff509eb995d3840faa84b44cc3e2f4328 | |
parent | 8df76061d197a830ec8f058e67d244b72a43ca3d (diff) | |
download | test_serving-086619542c2b7bb3b5879f6ac1c7bcf15aa0f819.tar.gz |
Extend rows to have extended features.
Test: go/vtslab-schedule-dev/redirect/20180921t132238-dot-vtslab-schedule-dev
Bug: 74575555
Change-Id: I6acc2ae820d6b3c5d464efbdd43ec4f14e5db04c
-rw-r--r-- | gae/frontend/src/app/app.module.ts | 4 | ||||
-rw-r--r-- | gae/frontend/src/app/menu/cdk-detail-row.directive.ts | 72 | ||||
-rw-r--r-- | gae/frontend/src/app/menu/job/job.component.html | 11 | ||||
-rw-r--r-- | gae/frontend/src/app/menu/job/job.component.ts | 8 | ||||
-rw-r--r-- | gae/frontend/src/styles.scss | 4 |
5 files changed, 97 insertions, 2 deletions
diff --git a/gae/frontend/src/app/app.module.ts b/gae/frontend/src/app/app.module.ts index 2a60df1..cacff6e 100644 --- a/gae/frontend/src/app/app.module.ts +++ b/gae/frontend/src/app/app.module.ts @@ -51,6 +51,9 @@ import { NavModule } from './shared/navbar/navbar'; // Other dependencies. import { FlexLayoutModule } from '@angular/flex-layout'; +// User directives for CDK (Component Development Kit). +import { CdkDetailRowDirective } from './menu/cdk-detail-row.directive'; + const appRoutes: Routes = [ { path: 'device', component: DeviceComponent }, @@ -100,6 +103,7 @@ export class MaterialModule {} declarations: [ AppComponent, BuildComponent, + CdkDetailRowDirective, DashboardComponent, DeviceComponent, FilterComponent, diff --git a/gae/frontend/src/app/menu/cdk-detail-row.directive.ts b/gae/frontend/src/app/menu/cdk-detail-row.directive.ts new file mode 100644 index 0000000..60b490a --- /dev/null +++ b/gae/frontend/src/app/menu/cdk-detail-row.directive.ts @@ -0,0 +1,72 @@ +/** + * Copyright (C) 2018 The Android Open Source Project + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import {Directive, EventEmitter, HostBinding, HostListener, Input, Output, TemplateRef, ViewContainerRef} from '@angular/core'; + + +@Directive({ + selector: '[appCdkDetailRow]' +}) +export class CdkDetailRowDirective { + private row: any; + private tRef: TemplateRef<any>; + private opened: boolean; + + @HostBinding('class.expanded') + get expended(): boolean { + return this.opened; + } + + @Input() + set appCdkDetailRow(value: any) { + if (value !== this.row) { + this.row = value; + // this.render(); + } + } + + @Input('appCdkDetailRowTpl') + set template(value: TemplateRef<any>) { + if (value !== this.tRef) { + this.tRef = value; + } + } + + @Output() toggleChange = new EventEmitter<CdkDetailRowDirective>(); + + constructor(public vcRef: ViewContainerRef) { } + + @HostListener('click') + onClick(): void { + this.toggle(); + } + + toggle(): void { + if (this.opened) { + this.vcRef.clear(); + } else { + this.render(); + } + this.opened = this.vcRef.length > 0; + this.toggleChange.emit(this); + } + + private render(): void { + this.vcRef.clear(); + if (this.tRef && this.row) { + this.vcRef.createEmbeddedView(this.tRef, { $implicit: this.row }); + } + } +} diff --git a/gae/frontend/src/app/menu/job/job.component.html b/gae/frontend/src/app/menu/job/job.component.html index e938c8a..62ce0f6 100644 --- a/gae/frontend/src/app/menu/job/job.component.html +++ b/gae/frontend/src/app/menu/job/job.component.html @@ -167,9 +167,11 @@ </ng-container> <mat-header-row *matHeaderRowDef="columnTitles"></mat-header-row> - <mat-row *matRowDef="let row; columns: columnTitles;"></mat-row> + <mat-row *matRowDef="let row; columns: columnTitles;" + matRipple + class="element-row" + [appCdkDetailRow]="row" [appCdkDetailRowTpl]="job_detail"></mat-row> </mat-table> - <mat-paginator [length]="count" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" @@ -177,6 +179,11 @@ (page)="pageEvent = onPageEvent($event)"> </mat-paginator> </div> +<ng-template #job_detail let-job> + <div class="mat-row div-expandable" [@detailExpand] style="overflow: hidden"> + <a href="{{job.infra_log_url}}" download><button mat-raised-button [disabled]="(!job.infra_log_url)">Download Infra Log</button></a> + </div> +</ng-template> <div class="loading-spinner" *ngIf="loading"> <mat-spinner color="primary"></mat-spinner> </div> diff --git a/gae/frontend/src/app/menu/job/job.component.ts b/gae/frontend/src/app/menu/job/job.component.ts index 33670d4..383ae19 100644 --- a/gae/frontend/src/app/menu/job/job.component.ts +++ b/gae/frontend/src/app/menu/job/job.component.ts @@ -15,6 +15,7 @@ */ import { Component, OnInit, ViewChild } from '@angular/core'; import { MatSnackBar, MatTableDataSource, PageEvent } from '@angular/material'; +import { animate, state, style, transition, trigger } from '@angular/animations'; import { FilterComponent } from '../../shared/filter/filter.component'; import { FilterCondition } from '../../model/filter_condition'; @@ -33,6 +34,13 @@ import * as moment from 'moment-timezone'; templateUrl: './job.component.html', providers: [ JobService ], styleUrls: ['./job.component.scss'], + animations: [ + trigger('detailExpand', [ + state('void', style({height: '0px', minHeight: '0', visibility: 'hidden'})), + state('*', style({height: '*', visibility: 'visible'})), + transition('void <=> *', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')), + ]), + ], }) export class JobComponent extends MenuBaseClass implements OnInit { columnTitles = [ diff --git a/gae/frontend/src/styles.scss b/gae/frontend/src/styles.scss index 61e8933..0c95e64 100644 --- a/gae/frontend/src/styles.scss +++ b/gae/frontend/src/styles.scss @@ -40,3 +40,7 @@ body { right: 0; position: fixed; } + +.div-expandable { + padding: 10px; +} |