fix table issues presentation of geneontology/noctua-annotation-revie…

…w#30
geneontology · Oct 6, 2020 · 5e0668f · 5e0668f
1 parent 19d04e5
commit 5e0668f
Show file tree

Hide file tree

Showing 10 changed files with 100 additions and 25 deletions.
diff --git a/src/@noctua.common/scss/noctua.common.scss b/src/@noctua.common/scss/noctua.common.scss
@@ -5,6 +5,8 @@ $noc-primary-color-lighter: #dfe3ee;
 $noc-primary-color-light: rgba(#798fb8, 0.3);
 $noc-primary-color-text: #4a8bfc;
 
+$noc-tree-line-color: rgba(#798fb8, 0.3);
+
 $primary: map-get($theme, primary);
 $accent: map-get($theme, accent);
 

diff --git a/src/@noctua/scss/noctua.scss b/src/@noctua/scss/noctua.scss
@@ -120,14 +120,15 @@ mat-chip {
   align-items: center;
   justify-content: center;
   border-radius: 50%;
-  width: 30px;
-  height: 30px;
+  @include deep-height(30px);
+  @include deep-width(30px);
   border: #BBB solid 1px;
   font-size: 14px;
+  z-index: 2;
 
   &.noc-sm {
-    width: 25px;
-    height: 25px;
+    @include deep-height(25px);
+    @include deep-width(25px);
     font-size: 10px;
   }
 }

diff --git a/src/app/main/apps/noctua-form/cam/cam-table/annoton-table/annoton-table.component.scss b/src/app/main/apps/noctua-form/cam/cam-table/annoton-table/annoton-table.component.scss
@@ -84,7 +84,7 @@ $accent: map-get($theme, accent);
           top: 50%;
           transform: translateY(-50%);
           color: white;
-          background-color: #BBB;
+          background-color: $noc-tree-line-color;
           content: "";
         }
       }

diff --git a/src/app/main/apps/noctua-form/cam/cam-table/cam-table.component.scss b/src/app/main/apps/noctua-form/cam/cam-table/cam-table.component.scss
@@ -102,7 +102,7 @@ $accent: map-get($theme, accent);
       width: 25px;
       height: 2px;
       color: white;
-      background-color: #BBB;
+      background-color: $noc-tree-line-color;
       content: "";
     }
   }
@@ -133,7 +133,7 @@ $accent: map-get($theme, accent);
       bottom: 0;
       width: 2px;
       color: white;
-      background-color: #BBB;
+      background-color: $noc-tree-line-color;
       content: "";
     }
   }

diff --git a/src/app/main/apps/noctua-search/cams/cams-review-changes/cams-review-changes.component.html b/src/app/main/apps/noctua-search/cams/cams-review-changes/cams-review-changes.component.html
@@ -1,4 +1,4 @@
-<div class="noc-cams-table noc-drawer-body" fxLayout="column" fxLayoutAlign="start stretch">
+<div class="noc-drawer-body" fxLayout="column" fxLayoutAlign="start stretch">
   <div *ngIf="!noctuaUserService.user" class="noc-draw-body-disabled" fxLayoutAlign="center center">
     Log in to Continue
   </div>

diff --git a/src/app/main/apps/noctua-search/cams/cams-review/cams-review.component.html b/src/app/main/apps/noctua-search/cams/cams-review/cams-review.component.html
@@ -1,4 +1,4 @@
-<div class="noc-cams-table noc-drawer-body" fxLayout="column" fxLayoutAlign="start stretch">
+<div class="noc-drawer-body" fxLayout="column" fxLayoutAlign="start stretch">
   <div *ngIf="!noctuaUserService.user" class="noc-draw-body-disabled" fxLayoutAlign="center center">
     Log in to Continue
   </div>
@@ -7,7 +7,6 @@
     <span class="noc-header-title">
       Review Models</span>
   </div>
-
   <div class="noc-cams-results">
     <div class="noc-cam-container" *ngFor="let cam of cams" id="{{'noc-review-cams-'+cam.displayId}}"
       [ngClass]=" {'noc-selected': cam.id===camsService.selectedCamUuid}" fxLayout="column"

diff --git a/src/app/main/apps/noctua-search/cams/cams-review/cams-review.component.scss b/src/app/main/apps/noctua-search/cams/cams-review/cams-review.component.scss
@@ -125,10 +125,9 @@
         bottom: 0;
         width: 2px;
         color: white;
-        background-color: #BBB;
+        background-color: $noc-tree-line-color;
         content: "";
       }
-
     }
   }
 

diff --git a/src/app/main/apps/noctua-search/cams/cams-table/cams-table.component.html b/src/app/main/apps/noctua-search/cams/cams-table/cams-table.component.html
@@ -2,7 +2,8 @@
   <mat-progress-spinner class="example-margin" [color]="loadingSpinner.color" [mode]="loadingSpinner.mode">
   </mat-progress-spinner>
 </div>
-<div class="noc-cams-table noc-drawer-body" fxLayout="column" fxLayoutAlign="start stretch">
+<div class="noc-cams-result noc-drawer-body" [ngClass]="{'noc-review-mode': isReviewMode}" fxLayout="column"
+  fxLayoutAlign="start stretch">
   <div class="noc-summary-filter-bar" fxLayout="row" fxLayoutAlign="start center">
     <small class="mr-12">Filtered By: </small>
     <mat-chip *ngIf="noctuaSearchService?.searchCriteria?.filtersCount>0" (click)="reset()" class="noc-clearall-chip">
@@ -87,24 +88,28 @@
       (page)="pageEvent = $event; setPage($event)" [showFirstLastButtons]="true">
     </mat-paginator>
   </div>
-  <table fxFlex="1 1 auto" mat-table multiTemplateDataRows class="" [dataSource]="cams"
+  <table fxFlex="1 1 auto" mat-table multiTemplateDataRows class="noc-cams-table" [dataSource]="cams"
     [@animateStagger]="{value:'50'}">
     <ng-container matColumnDef="select">
-      <th mat-header-cell *matHeaderCellDef fxFlex="50px">
+      <th mat-header-cell *matHeaderCellDef fxFlex="30px">
       </th>
-      <td class="noc-checkbox-cell" mat-cell *matCellDef="let cam" fxFlex="50px">
+      <td class="noc-checkbox-cell" mat-cell *matCellDef="let cam" fxFlex="30px">
         <mat-checkbox (click)="$event.stopPropagation()" (change)="$event ? toggleSelection(cam) : null"
           [checked]="selection.isSelected(cam)" [aria-label]="checkboxLabel(cam)">
         </mat-checkbox>
       </td>
     </ng-container>
     <ng-container matColumnDef="expand">
-      <th mat-header-cell *matHeaderCellDef fxFlex="40px" fxLayout="row" fxLayoutAlign="start center"></th>
-      <td mat-cell *matCellDef="let cam" fxFlex="40px" fxLayout="row" fxLayoutAlign="start center">
-        <button mat-icon-button (click)="toggleCamExpand(cam)" color="primary" class="">
+      <th mat-header-cell *matHeaderCellDef fxFlex="80px" fxLayout="row" fxLayoutAlign="start center"></th>
+      <td mat-cell *matCellDef="let cam" class="noc-expand-cell" fxFlex="80px" fxLayout="row"
+        fxLayoutAlign="start center">
+        <button mat-icon-button (click)="toggleCamExpand(cam)" color="primary" class="noc-toggle-expand-button">
           <fa-icon *ngIf="!cam.expanded" [icon]="['fas', 'caret-right']"></fa-icon>
           <fa-icon *ngIf="cam.expanded" [icon]="['fas', 'caret-down']"></fa-icon>
         </button>
+        <div class="noc-display-number mr-8">
+          {{cam.displayNumber}}
+        </div>
       </td>
     </ng-container>
     <ng-container matColumnDef="title">

diff --git a/src/app/main/apps/noctua-search/cams/cams-table/cams-table.component.scss b/src/app/main/apps/noctua-search/cams/cams-table/cams-table.component.scss
@@ -197,22 +197,28 @@ $rotate-graph: 235deg;
     }
   }
 
-  .noc-cams-table {
+  .noc-cams-result {
     background-color: #F7F7F7;
     font-size: 12px;
     width: 100%;
     @include deep-height(100%);
     padding-bottom: 300px;
 
+
     .noc-edit-button {
       background-color: #ffffff;
       color: map-get($primary, default);
       border: rgba(map-get($primary, default), 0.5) solid 1px;
       @include mat-elevation(1)
     }
 
-    table {
+
+    .noc-cams-table {
       @include deep-width(100%);
+
+      .noc-display-number {
+        background-color: #FFF;
+      }
     }
 
     tr.mat-row {
@@ -239,6 +245,7 @@ $rotate-graph: 235deg;
       z-index: 10;
     }
 
+
     .mat-cell {
       min-width: 0;
       display: flex;
@@ -248,15 +255,49 @@ $rotate-graph: 235deg;
 
       &.noc-checkbox-cell {
         padding-left: 16px;
-        border-right: $noc-primary-color-light solid 1px;
+        //border-right: $noc-primary-color-light solid 1px;
       }
 
-      &.noc-expand-cell {}
+      &.noc-expand-cell {
+        position: relative;
+        padding-left: 8px;
+
+        .noc-toggle-expand-button {
+          width: 30px;
+          height: 30px;
+          line-height: 12px;
+        }
+
+        &::before {
+          position: absolute;
+          top: 0;
+          left: 52px;
+          bottom: 0;
+          width: 2px;
+          color: white;
+          background-color: $noc-tree-line-color;
+          content: "";
+          z-index: 0;
+        }
+      }
     }
 
     .noc-cam-table-container {
       width: 100%;
-      padding-left: 75px;
+      position: relative;
+      padding-left: 70px;
+
+
+      &::before {
+        position: absolute;
+        top: 0;
+        left: 52px;
+        bottom: 0;
+        width: 2px;
+        color: white;
+        background-color: $noc-tree-line-color;
+        content: "";
+      }
     }
 
     .mat-column-id {
@@ -279,6 +320,34 @@ $rotate-graph: 235deg;
         font-size: 10px;
       }
     }
+
+
+  }
+
+  .noc-cams-result {
+
+    &.noc-review-mode {
+      .noc-summary-filter-bar {
+        top: 101px;
+      }
+
+      .noc-summary-results-bar {
+        top: 131px;
+      }
+
+      .mat-header-row {
+        top: 172px;
+      }
+
+      .noc-cam-table-container {
+        padding-left: 100px;
+
+        &::before {
+          left: 82px;
+        }
+      }
+
+    }
   }
 
 }
diff --git a/src/app/main/apps/noctua-search/cams/cams-table/cams-table.component.ts b/src/app/main/apps/noctua-search/cams/cams-table/cams-table.component.ts
@@ -96,7 +96,7 @@ export class CamsTableComponent implements OnInit, OnDestroy {
     public noctuaSearchService: NoctuaSearchService) {
     this._unsubscribeAll = new Subject();
 
-    this.selection.sort()
+    this.selection.sort();
   }
 
   initTable(isReviewMode) {