Changes for ui improvements

src/app/checklist/checklist.component.html

@@ -11,7 +11,10 @@
 
   <div class="container">
     <mat-accordion>
-      <mat-expansion-panel (opened)="panelOpenState = true" (closed)="panelOpenState = false" class="mat-body">
+
+      <mat-expansion-panel (opened)="panelOpenState = true" (closed)="panelOpenState = false" class="mat-body"
+        [expanded]="getChecklistTypeParamValue()=='sequence'">
+
         <mat-expansion-panel-header>
           <mat-panel-title>
             <b *ngIf="checklistType === ChecklistType.sequence">Download spreadsheet template for annotated

src/app/dashboard/dashboard.component.html

@@ -6,7 +6,7 @@
 
 
   <div fxLayout="row wrap" fxLayoutGap="10px" fxLayoutAlign="center end">
-    <ng-container *ngIf="!isEga()">
+    <!-- <ng-container *ngIf="!isEga()">
       <mat-card class="mat-card-css">
         <mat-card-subtitle>
           Account Management
@@ -18,7 +18,7 @@
           </span>
         </div>
       </mat-card>
-    </ng-container>
+    </ng-container> -->
 
     <ng-container>
       <mat-card class="mat-card-css">
@@ -26,19 +26,19 @@
         <div class="cat-element">
           <span [routerLink]="['/study']">
             <mat-icon class=note_add>add_box</mat-icon>
-            <p class="mat-small mat-caption">Register study (project)</p>
+            <p class="mat-small mat-caption">Register Study (Project)</p>
           </span>
           <span *ngIf="isSuperUser()" [routerLink]="['/umbrella']">
             <mat-icon class=note_add>add_box</mat-icon>
-            <p class="mat-small mat-caption">Register umbrella project</p>
+            <p class="mat-small mat-caption">Register Umbrella Project</p>
           </span>
           <span [routerLink]="['/app-checklist','sample',true]">
             <mat-icon class="note_add">add_box</mat-icon>
-            <p class="mat-small mat-caption">Register samples</p>
+            <p class="mat-small mat-caption">Register Samples</p>
           </span>
           <span *ngIf="!isEga()" [routerLink]="['/taxonomy']">
             <mat-icon class="note_add">add_box</mat-icon>
-            <p class="mat-small mat-caption">Register taxonomy</p>
+            <p class="mat-small mat-caption">Register Taxonomy</p>
           </span>
           <span *ngIf="isEga()" [routerLink]="['/dac']">
             <mat-icon class="note_add">add_box</mat-icon>
@@ -46,11 +46,11 @@
           </span>
           <span *ngIf="isEga()" [routerLink]="['/dac-policy']">
             <mat-icon class="note_add">add_box</mat-icon>
-            <p class="mat-small mat-caption">Register policy</p>
+            <p class="mat-small mat-caption">Register Policy</p>
           </span>
           <span *ngIf="isEga()" [routerLink]="['/dac-dataset']">
             <mat-icon class="note_add">add_box</mat-icon>
-            <p class="mat-small mat-caption">Register dataset</p>
+            <p class="mat-small mat-caption">Register Dataset</p>
           </span>
         </div>
       </mat-card>
@@ -63,15 +63,15 @@
         <div class="cat-element">
           <span [routerLink]="['/app-submit']">
             <mat-icon class="note_add">note_add</mat-icon>
-            <p class="mat-small mat-caption">Submit xml</p>
+            <p class="mat-small mat-caption">Submit XML</p>
           </span>
           <span [routerLink]="['/read-submission']">
             <mat-icon class="note_add">note_add</mat-icon>
-            <p class="mat-small mat-caption">Submit reads</p>
+            <p class="mat-small mat-caption">Submit Reads</p>
           </span>
           <span *ngIf="!isEga()" [routerLink]="['/app-checklist','sequence',true]">
             <mat-icon class="note_add">note_add</mat-icon>
-            <p class="mat-small mat-caption">Create annotated sequence spreadsheet</p>
+            <p class="mat-small mat-caption">Create Annotated Sequence Spreadsheet</p>
           </span>
         </div>
       </mat-card>

src/app/header/header.component.css

 
 
-.homeDiv{
-    float: left;
-    padding: 0px 0px 0px 5px;
+.headerContent{
+  display: flex;
+  flex-direction: column;
 }
 
-.homeDiv mat-icon{
-    font-size: 33px;
+
+.toolbar {
+  display: flex ;
+  position: relative;
+  /* Make sure the toolbar will stay on top of the content as it scrolls past. */
+  z-index: 2;
+  
+}
+
+#local-title{
+  padding-top: 14px;
+ 
+}
+
+
+.mat-toolbar.mat-primary {
+  background: #39a2a7c4;
+  color: white;
+}
+
+.mat-toolbar-single-row {
+  height: 50px;
+}
+
+
+nav ul.menu li:not(:last-child){
+  border-right: 1px solid #f8f8f8;
+}
+nav ul.menu li:hover{
+  background-color: rgb(71, 71, 71);
+} 
+nav ul.menu li a{
+  color: white;
+  border: none;
+}
+
+
+
+@media screen and (min-width: 980px) {
+  
+  .toolbar-text{
+    font-size: 18px;
+    font-weight: 500;  
+  }
+
+  .accountIcon{
+    font-size: 24px;
+    vertical-align: sub;
+    margin-top: -13px;
+  }
+
+  .linkDiv{
+    text-align: right;
+    width: 100%;
+  }
+  .logo{
+    width:25%;
+    min-width: 15%;
+    cursor: pointer;
+  }
+  .title{
+    color:white;
+    width:25%;
+  }
+}
+
+@media screen and (max-width: 980px) {
+  li.toolbar-text {
+    font-size: 12px;
+    font-weight: 300;  
+  }
+  .title{
+    font-size: 15px;
+  }
+  .accountIcon{
+    display: none;
+  }
+
+  .linkDiv{
+    width: 50%;
+  }
+  .logo{
+    width:15%;
+    cursor: pointer;
+  }
+  .title{
+    color:white;
+    width:25%;
+    
+  }
+  
+}
+
+@media screen and (max-width: 600px) {
+  .title{
+    display: none;
+  }
+  .logo{
+    width:25%;
     cursor: pointer;
+  }
+  .linkDiv{
+    width: 75%;
+    text-align: right;
+  }
 }
\ No newline at end of file

src/app/header/header.component.html

-<!-- The below line is commented because it is added in sidenav-->
-<!--<header id="masthead-black-bar" class="clearfix masthead-black-bar">
-</header> -->
\ No newline at end of file
+<div fxFlex style="overflow: scroll;">
+    <header id="masthead-black-bar" class="clearfix masthead-black-bar">
+    </header>
+
+    <mat-toolbar color="primary" class="toolbar">
+
+        <mat-toolbar-row>
+
+            <div class="logo" routerLink="">
+                <img src="assets/ENA_Logo_notagline.png" alt="ENA Logo">
+            </div>
+            <div class="float-left inline-block padding-left-large" id="local-title">
+                <a routerLink="">
+                    <div class="title">
+                        {{getTitle()}}
+                    </div>
+                </a>
+            </div>
+
+
+            <div class="linkDiv">
+                <nav class="float-right" style="margin-top: 0;">
+                    <ul id="local-nav" class="dropdown menu float-left" data-description="navigational">
+                        <li class="toolbar-text"><a href="https://www.ebi.ac.uk/ena/browser/support">Support <i
+                                    class="icon icon-generic" data-icon="x"></i></a></li>
+                        <li class="toolbar-text" *ngIf="isAuthenticated()"><a [routerLink]="['/accountInfo']">Manage
+                                Account
+
+                                <i class="material-icons accountIcon">account_box</i>
+                            </a></li>
+                        <li class="toolbar-text" *ngIf="isAuthenticated()"><a [routerLink]="['/login']"
+                                (click)='logout()'>Logout
+                                <span>({{getAccount()}})</span>
+                            </a></li>
+                    </ul>
+                </nav>
+            </div>
+        </mat-toolbar-row>
+
+    </mat-toolbar>
+</div>
\ No newline at end of file

src/app/header/header.component.ts

@@ -35,4 +35,8 @@ export class HeaderComponent {
   getAccount() {
     return this._webinAuthenticationService.account;
   }
+
+  logout() {
+    this._webinAuthenticationService.logout();
+  }
 }

src/app/report/report.component.css

@@ -42,5 +42,8 @@ mat-form-field.mat-form-field {
 input[readonly]{
   background-color:none;
 }
+.infoText:hover{
+  background: none;
+}
 
 

src/app/report/report.component.html

@@ -5,39 +5,39 @@
   <mat-divider *ngIf="!embeded"></mat-divider>
   <div class="container">
     <p class="mat-body">
-      <span *ngIf="!embeded" class="app-primary-color">
+      <span class="infoText" *ngIf="!embeded" class="app-primary-color">
         <i class="material-icons">info</i>
       </span>
 
-      <span *ngIf="isMetadataReport() && !embeded">
+      <span class="infoText" *ngIf="isMetadataReport() && !embeded">
         Shows submitted {{ ReportType.getPluralName(reportType) }} and their release statuses. Search by accession or
         unique name, or simply click search to show most recent submissions. The results will show the most recently
         submitted {{ReportType.getPluralName(reportType)}}
         in your submission account.
       </span>
 
-      <span *ngIf="isFileReport() && !embeded">
+      <span class="infoText" *ngIf="isFileReport() && !embeded">
         Shows submitted {{ ReportType.getPluralName(reportType) }} and their archival statuses. Search by accession or
         other conditions, or simply click search to show most recent submissions. The results will show the most
         recently submitted {{ReportType.getPluralName(reportType)}}
         in your submission account.
       </span>
 
-      <span *ngIf="isProcessReport()">
+      <span class="infoText" *ngIf="isProcessReport()">
         Shows the {{ ReportType.getPluralName(reportType) }}. Search by accession or other conditions, or simply click
         search to show most recent submissions. The results will show the {{ReportType.getPluralName(reportType)}} in
         your submission account.
       </span>
 
-      <span *ngIf="reportType === ReportType.runProcess">
+      <span class="infoText" *ngIf="reportType === ReportType.runProcess">
       </span>
 
-      <span *ngIf="reportType === ReportType.analysisProcess">
+      <span class="infoText" *ngIf="reportType === ReportType.analysisProcess">
         The primary use of this report is to retrieve sequence accessions assigned as part of
         genome assembly, transcriptome assembly or sequence flat file submissions.
       </span>
 
-      <span *ngIf="reportType === ReportType.unsubmittedFiles">
+      <span class="infoText" *ngIf="reportType === ReportType.unsubmittedFiles">
         Shows uploaded files scheduled to be removed unless submitted by the expiration date.
         Uploaded files will only be included into the archive once they have been
         submitted either as runs or analyses. <b>Note that unlike all other reports, the
@@ -163,18 +163,6 @@
           </mat-form-field>
         </div>
 
-        <div class="app-field-padding">
-          <button mat-raised-button color="accent" (click)="report()" [disabled]="active">
-            Search
-          </button>
-        </div>
-
-        <div class="app-field-padding">
-          <button mat-raised-button (click)="reset()">
-            Reset
-          </button>
-        </div>
-
         <div>
           <mat-form-field class="app-field-padding">
             <mat-select placeholder="Maximum rows" [(ngModel)]="rows">
@@ -199,6 +187,17 @@
             Show unique name
           </mat-checkbox>
         </div>
+        <div class="app-field-padding">
+          <button mat-raised-button color="accent" (click)="report()" [disabled]="active">
+            Search
+          </button>
+        </div>
+
+        <div class="app-field-padding">
+          <button mat-raised-button (click)="reset()">
+            Reset
+          </button>
+        </div>
       </div>
     </mat-card>
 

src/app/sidenav/sidenav/sidenav.component.css

@@ -2,13 +2,14 @@
     display: flex;
     flex-direction: column;
     position: absolute;
-    top: 0;
+    top: 100px;
     bottom: 0;
     left: 0;
     right: 0;
   }
+
   
-  .sidenav-is-mobile .sidenav-toolbar {
+  .sidenav-is-mobile{
     position: fixed;
     /* Make sure the toolbar will stay on top of the content as it scrolls past. */
     z-index: 2;
@@ -33,22 +34,21 @@
        `<body>` to be our scrolling element for mobile layouts. */
     flex: 1 0 auto;
   }
-
-  #local-title{
-      margin-bottom: 0px;;
-  }
-  
-  nav ul.menu li:first-child{
-    border-right: 1px solid #f8f8f8;
-  }
-  nav ul.menu li:hover{
-    background-color: rgb(71, 71, 71);
-  } 
-  nav ul.menu li a{
-    color: white;
-    border: none;
-    font-size: 18px;
-    font-weight: 100;
+mat-sidenav{
+  padding-top: 50px;
+}
+  .mat-icon-button{
+    position:absolute;
+    z-index: 2;
+    top:0;
+    left:0;
+    margin: 10px;
+    min-width: 0;
+    width: 40px;
+    height: 40px;
+    flex-shrink: 0;
+    line-height: 40px;
+    border-radius: 50%;
     
   }
 
@@ -77,6 +77,8 @@
   .parent{
       background:#efefef;
   }
+  
+
   .full-width-dashboard:hover{
       outline: 0;
   }

src/app/sidenav/sidenav/sidenav.component.html

-<div class="sidenav-container" [class.sidenav-is-mobile]="mobileQuery.matches">
-  <header id="masthead-black-bar" class="clearfix masthead-black-bar">
-  </header>
-  <mat-toolbar color="primary" class="sidenav-toolbar">
-
-    <button *ngIf="isAuthenticated()" mat-icon-button (click)="snav.toggle()">
-      <mat-icon>menu</mat-icon>
-    </button>
-    <div class="float-left inline-block padding-left-large" id="local-title">
-      <a routerLink="">
-        <h4 style="color:white">
-          {{getTitle()}}
-        </h4>
-      </a> <!-- ** Application specific content ** -->
-    </div>
-    <nav class="float-left columns medium-6 large-6" style="margin-top: 0;">
-      <ul id="local-nav" class="dropdown menu float-left" data-description="navigational">
-        <li><a href="https://www.ebi.ac.uk/ena/browser/support">Support <i class="icon icon-generic"
-              data-icon="x"></i></a></li> <!-- ** Application specific content ** -->
-        <li *ngIf="isAuthenticated()"><a [routerLink]="['/login']" (click)='logout()'>Logout
-            <span>({{getAccount()}})</span> <!-- ** Application specific content ** -->
-          </a></li>
-      </ul>
-    </nav>
-  </mat-toolbar>
+<div class="sidenav-container">
 
+  <button *ngIf="isAuthenticated()" mat-icon-button (click)="snav.toggle()">
+    <mat-icon>menu</mat-icon>
+  </button>
   <mat-sidenav-container class="sidenav-sidenav-container">
     <mat-sidenav #snav [mode]="over">
       <mat-nav-list>
@@ -31,14 +10,14 @@
           <mat-icon style="padding-right: 35px;">dashboard</mat-icon>
           <a class="full-width-dashboard">Dashboard</a>
         </mat-list-item>
-        <mat-list-item *ngIf="!isEga()" class="parent">
+        <mat-list-item *ngIf="!isEga()" class="parent" [ngStyle]="{'pointer-events':'none'}">
           <mat-icon style="padding-right: 35px;">account_box</mat-icon>
           <span class="full-width">Account Management</span>
         </mat-list-item>
         <div *ngIf="!isEga()" class="submenu" [ngClass]="{'expanded' : showSubmenu}">
           <a mat-list-item routerLink="/accountInfo" (click)="snav.toggle()">Edit Information</a>
         </div>
-        <mat-list-item class="parent">
+        <mat-list-item class="parent" [ngStyle]="{'pointer-events':'none'}">
           <mat-icon style="padding-right: 35px;">add_box</mat-icon>
           <span class="full-width">Metadata Registration</span>
         </mat-list-item>
@@ -56,7 +35,7 @@
             <a mat-list-item [routerLink]="['/dac-dataset']" (click)="snav.toggle()">Register dataset</a>
           </ng-container>
         </div>
-        <mat-list-item class="parent">
+        <mat-list-item class="parent" [ngStyle]="{'pointer-events':'none'}">
           <mat-icon style="padding-right: 35px;">note_add</mat-icon>
           <span class="full-width">Data Submissions</span>
         </mat-list-item>
@@ -66,7 +45,7 @@
           <a *ngIf="!isEga()" mat-list-item [routerLink]="['/app-checklist','sequence',true]"
             (click)="snav.toggle()">Create annotated sequence spreadsheet</a>
         </div>
-        <mat-list-item class="parent">
+        <mat-list-item class="parent" [ngStyle]="{'pointer-events':'none'}">
           <mat-icon style="padding-right: 35px;">insert_chart</mat-icon>
           <span class="full-width">Reports</span>
         </mat-list-item>

src/app/submit/submit.component.css

@@ -10,4 +10,9 @@
     float: left;
     padding-top: 2px;
     cursor: pointer;
-  }
\ No newline at end of file
+  }
+input{
+  border: 1px solid #e2e2e2;
+  padding: 5px;
+}
+

src/app/taxonomy-management/taxonomy-management.component.html

@@ -5,8 +5,25 @@
   <mat-divider></mat-divider>
   <div class="container">
     <mat-accordion>
-      <mat-expansion-panel #spreadExpansionPanel (opened)="panelOpenState = true;" (closed)="panelOpenState = false"
+      <mat-expansion-panel #formExpansionPanel (opened)="panelOpenState = true;" (closed)="panelOpenState = false"
         class="mat-body" [expanded]="true">
+        <mat-expansion-panel-header>
+          <mat-panel-title>
+            <b>Register using form</b>
+          </mat-panel-title>
+        </mat-expansion-panel-header>
+        <br>
+        <a (click)="openDialog('Add',{'id':getId()},'Form')">Add taxa details<mat-icon>add_circle</mat-icon></a>
+        <br><br>
+        <div class="mat-vertical-content">
+          <ng-template [ngTemplateOutlet]="taxonTables"
+            [ngTemplateOutletContext]="{validDs:validFormDataSource,invalidDs:invalidFormDataSource,source:'Form'}">
+          </ng-template>
+        </div>
+      </mat-expansion-panel>
+
+      <mat-expansion-panel #spreadExpansionPanel (opened)="panelOpenState = true;" (closed)="panelOpenState = false"
+        class="mat-body">
         <mat-expansion-panel-header>
           <mat-panel-title>
             <b>Register using spreadsheet</b>
@@ -16,7 +33,7 @@
           <mat-expansion-panel (opened)="panelOpenState = true;" (closed)="panelOpenState = false" class="mat-body">
             <mat-expansion-panel-header>
               <mat-panel-title>
-                <b>Download spreadsheet to register taxons</b>
+                <b>Download spreadsheet to register taxa</b>
               </mat-panel-title>
             </mat-expansion-panel-header>
             <p class="mat-body">
@@ -47,7 +64,7 @@
           <mat-expansion-panel (opened)="panelOpenState = true" (closed)="panelOpenState = false" class="mat-body">
             <mat-expansion-panel-header>
               <mat-panel-title>
-                <b>Upload filled spreadsheet to register taxons</b>
+                <b>Upload filled spreadsheet to register taxa</b>
               </mat-panel-title>
             </mat-expansion-panel-header>
             <mat-vertical-stepper #stepper>
@@ -59,7 +76,7 @@
                 </form>
 
               </mat-step>
-              <mat-step label="Register taxons">
+              <mat-step label="Register Taxa">
                 <br>
                 <ng-template [ngTemplateOutlet]="taxonTables"
                   [ngTemplateOutletContext]="{validDs:validSpreadsheetDataSource,invalidDs:invalidSpreadsheetDataSource,souece:'Spreadsheet'}">
@@ -70,20 +87,7 @@
         </mat-accordion>
       </mat-expansion-panel>
 
-      <mat-expansion-panel #formExpansionPanel (opened)="panelOpenState = true;" (closed)="panelOpenState = false"
-        class="mat-body">
-        <mat-expansion-panel-header>
-          <mat-panel-title>
-            <b>Register using form</b>
-          </mat-panel-title>
-        </mat-expansion-panel-header>
-        <br>
-        <a (click)="openDialog('Add',{'id':getId()},'Form')">Add taxa details<mat-icon>add_circle</mat-icon></a>
-        <br><br>
-        <ng-template [ngTemplateOutlet]="taxonTables"
-          [ngTemplateOutletContext]="{validDs:validFormDataSource,invalidDs:invalidFormDataSource,source:'Form'}">
-        </ng-template>
-      </mat-expansion-panel>
+
     </mat-accordion>
     <div class="centred" *ngIf="showLoadingFlag" style="height:70px;">
       <mat-spinner [diameter]="50" [strokeWidth]="5" style="margin:0 auto;">

src/app/taxonomy-management/taxonomy-management.component.ts

@@ -103,6 +103,7 @@ export class TaxonomyManagementComponent implements OnInit {
             err,
             'Taxonomy Registration'
           );
+          this.hideLoading();
         }
       );
     }
@@ -180,6 +181,7 @@ export class TaxonomyManagementComponent implements OnInit {
     dialogRef.afterClosed().subscribe((result) => {
       let source = result.source;
       if (result.event != "close") {
+        this.showLoading();
         let taxonRefObj = result.data;
         let tableArr =
           source === "Form" ? this.validFormArray : this.validSpreadsheetArray;
@@ -205,6 +207,7 @@ export class TaxonomyManagementComponent implements OnInit {
             })
             .indexOf(taxonRefObj.id);
           tableArr.splice(index, 1);
+          this.hideLoading();
         }
 
         if (typeof taxonRefObj != "undefined") {

src/environments/environment.dev.ts

@@ -5,7 +5,7 @@
 
 export const environment = {
   production: false,
-  title: 'Webin submissions portal (DEV)',
+  title: 'Webin Submissions Portal (DEV)',
   webinRestUrl: 'http://ves-ebi-5b:8110/ena/submit/drop-box',
   webinAuthUrl: 'https://wwwdev.ebi.ac.uk/ena/dev/submit/webin/auth',
   webinReportServiceUrl: 'https://wwwdev.ebi.ac.uk/ena/dev/submit/report',

src/environments/environment.prod.ts