Updated modal UI. Added data citation. Resolves #987.

spa/src/app/files/project-download-matrix-modal-container/project-download-matrix-modal-container.component.scss

@@ -11,14 +11,16 @@
 
 .panel-invisible {
     bottom: 0;
+    padding-top: 60px;
     max-width: 100vw !important; /** Override Material default that is added as inline style */
     min-width: 100vw;
     min-height: calc(100vh - 60px);
     overflow: scroll;
-    top:60px;
+    top: 0;
 }
 
 .panel-invisible .mat-dialog-container {
+    background-color: transparent;
     box-shadow: none;
 }
 
@@ -32,9 +34,6 @@
     .panel-invisible {
         max-width: 840px !important; /** Override Material default that is added as inline style */
         min-width: 840px;
-        min-height: calc(100vh - 120px);
-        top: 60px;
-        bottom: 60px;
     }
 }
 

spa/src/app/files/project-download-matrix-modal-container/project-download-matrix-modal-container.component.ts

@@ -12,6 +12,7 @@ import { ActivatedRoute } from "@angular/router";
 import { Subject } from "rxjs";
 import { takeUntil } from "rxjs/operators";
 import { Store } from "@ngrx/store";
+
 // App dependencies
 import { ProjectDownloadMatrixModalComponent } from "../project-download-matrix-modal/project-download-matrix-modal.component";
 import { AppState } from "../../_ngrx/app.state";
@@ -38,13 +39,14 @@ export class ProjectDownloadMatrixModalContainerComponent implements OnDestroy {
     constructor(dialog: MatDialog, route: ActivatedRoute, private store: Store<AppState>) {
 
         route.params.pipe(takeUntil(this.ngDestroy$)).subscribe(params => {
-            
+
             dialog.open(ProjectDownloadMatrixModalComponent, {
                 autoFocus: false,
                 backdropClass: this.CSS_BACKDROP,
                 data: {
                     projectId: params.id
                 },
+                disableClose: true,
                 panelClass: this.CSS_PANEL
             });
         });

spa/src/app/files/project-download-matrix-modal/project-download-matrix-modal.component.html

@@ -1,10 +1,10 @@
 <modal-layout *ngIf="state$ | async as state"
               [loaded]="state.loaded"
               (closed)="onClosedClicked()">
-    <ng-container title>Download Project Expression Matrices</ng-container>
-    <ng-container subtitle *ngIf="state.loaded">
-        {{state.project.projectTitle}}
+    <ng-container title *ngIf="state.loaded">
+        Download Project Expression Matrices
     </ng-container>
+    <ng-container subtitle *ngIf="state.loaded">{{state.project.projectTitle}}</ng-container>
     <ng-container content *ngIf="state.loaded">
         <project-download-matrix [projectMatrixUrls]="state.projectMatrixUrls"></project-download-matrix>
     </ng-container>

spa/src/app/files/project-download-matrix-modal/project-download-matrix-modal.component.ts

@@ -6,7 +6,7 @@
  */
 
 // Core dependencies
-import { Component, Inject, OnDestroy, OnInit } from "@angular/core";
+import { Component, HostListener, Inject, OnDestroy, OnInit } from "@angular/core";
 import { MAT_DIALOG_DATA, MatDialogRef } from "@angular/material";
 import { Router } from "@angular/router";
 import { select, Store } from "@ngrx/store";
@@ -49,6 +49,15 @@ export class ProjectDownloadMatrixModalComponent implements OnDestroy, OnInit {
         private router: Router) {
     }
 
+    /**
+     * Close dialog on key up of escape key.
+     */
+    @HostListener("window:keyup.esc") onKeyUp() {
+
+        this.dialogRef.close();
+        this.redirectToProjects()
+    }
+
     /**
      * Close modal and redirect to projects list.
      */
@@ -110,12 +119,6 @@ export class ProjectDownloadMatrixModalComponent implements OnDestroy, OnInit {
      * key) and redirect to projects list.
      */
     public ngOnInit(): void {
-
-        this.dialogRef.beforeClosed().pipe(
-            takeUntil(this.ngDestroy$)
-        ).subscribe(() => {
-            this.redirectToProjects();
-        });
 
         const projectId = this.data.projectId;
 

spa/src/app/files/project-download-matrix/project-download-matrix.component.html

@@ -1,5 +1,24 @@
-<p class="fontsize-m">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam at commodo diam, vel iaculis elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed rhoncus, ante vel scelerisque eleifend, tellus leo dapibus magna, ut finibus magna velit vel leo. </p>
-<ng-container *ngFor="let species of projectMatrixUrls.listSpeciesWithMatrixUrls()">
-    <h3 class="fontsize-s">{{species}}</h3>
-    <file-download *ngFor="let matrixUrl of projectMatrixUrls.listMatrixUrlsBySpecies(species)" [link]="matrixUrl"></file-download>
-</ng-container>
+<p class="fontsize-m">
+    Expression matrices for the specified project are available for download below in
+    <a href="https://math.nist.gov/MatrixMarket/formats.html" target="_blank">mtx</a>,
+    <a href="https://en.wikipedia.org/wiki/Comma-separated_values" target="_blank">csv</a> and
+    <a href="http://loompy.org/" target="_blank">loom</a> formats.
+</p>
+<div class="downloads">
+    <div>
+        <ng-container *ngFor="let species of projectMatrixUrls.listSpeciesWithMatrixUrls()">
+            <h3 class="fontsize-l">{{species}}</h3>
+            <file-download *ngFor="let matrixUrl of projectMatrixUrls.listMatrixUrlsBySpecies(species)"
+                           [link]="matrixUrl"></file-download>
+        </ng-container>
+    </div>
+    <div>
+        <p class="fontsize-xs">
+            Data downloaded from the HCA DCP is governed by the <a href="https://www.humancellatlas.org/data-release-policy/"
+                                                                   target="_blank">HCA Data Release Policy</a> and licensed
+            under the <a href="https://creativecommons.org/licenses/by/4.0/" target="_blank">Creative Commons Attribution 4.0
+            International License (CC BY 4.0)</a>. For more information please see our
+            <a href="https://staging.data.humancellatlas.org/about/data-use-agreement" target="_blank">Data Use Agreement</a>.
+        </p>
+    </div>
+</div>

spa/src/app/files/project-download-matrix/project-download-matrix.component.scss

@@ -5,6 +5,8 @@
  * Styles for project prepared expression matrices download functionality.
  */
 
+@import "../../site/theme/cgl.vars";
+
 /* Initial paragraph */
 p:first-of-type {
     margin-top: 24px;
@@ -14,3 +16,27 @@ p:first-of-type {
 h3 {
     margin-top: 24px;
 }
+
+.downloads {
+    display: flex;
+}
+
+.downloads > * {
+    flex: 1;
+}
+
+.downloads p {
+    border-left: 1px solid $hca-gray-lightest;
+    padding-left: 10px;
+}
+
+/**
+ * Large Tablet +
+ * https://material.io/design/layout/responsive-layout-grid.html#breakpoints
+ */
+@media screen and (min-width: 840px) {
+
+    .downloads > *:nth-child(2) {
+        max-width: 33%;
+    }
+}

spa/src/app/shared/modal-layout/modal-layout.component.html

@@ -1,10 +1,10 @@
 <span class="close" (click)="onCloseClicked()"></span>
-<hca-section-title>
-    <ng-content select="[title]"></ng-content>
-</hca-section-title>
 <div *ngIf="loaded" [@fadeIn]>
+    <h2><ng-content select="[title]"></ng-content></h2>
     <status-panel>
-        <h2><ng-content select="[subtitle]"></ng-content></h2>
+        <hca-section-title>
+            <ng-content select="[subtitle]"></ng-content>
+        </hca-section-title>
     </status-panel>
     <ng-content select="[content]"></ng-content>
 </div>

spa/src/app/shared/modal-layout/modal-layout.component.scss

@@ -50,13 +50,13 @@
  */
 hca-section-title {
     display: block;
-    margin-bottom: -10px;
 }
 
 /**
  * Subtitle
  */
 h2 {
+    margin-top: 0;
     max-width: 550px;
 }
 

spa/src/app/site/hca-footer/hca-footer.component.scss

@@ -64,6 +64,14 @@
     }
 }
 
+/** Footer behind modal - hide when modal is open(ing) to prevent visible jump around of content */
+:host-context(.modal-open) {
+
+    footer {
+        display: none;
+    }
+}
+
 /**
  * Medium +
  */

spa/src/app/site/hca-toolbar/hca-toolbar.component.scss

@@ -87,14 +87,14 @@ mat-toolbar {
 :host-context(.modal-open) {
 
     mat-toolbar {
-
-        img {
-            left: 16px;
-            position: fixed;
-            top: 15px;
-            z-index: 1001;
-        }
-
+        background-color: $hca-white;
+        position: fixed;
+        top: 0;
+        z-index: 1001;
+    }
+
+    mat-toolbar-row > *:not(a) {
+        display: none;
     }
 }
 
@@ -207,18 +207,6 @@ mat-toolbar {
             padding: 0 12px;
         }
     }
-
-    /** Logo in modal */
-    :host-context(.modal-open) {
-
-        mat-toolbar {
-
-            img {
-                top: 10px;
-            }
-
-        }
-    }
 }
 
 /**
@@ -232,16 +220,4 @@ mat-toolbar {
             padding: 0 30px; /* Gutter 30px */
         }
     }
-
-    /** Logo in modal */
-    :host-context(.modal-open) {
-
-        mat-toolbar {
-
-            img {
-                left: 30px;
-            }
-
-        }
-    }
 }