added highlighting, fixed user profile links, added dashes

open-learning-exchange · Nov 15, 2024 · f10f838 · f10f838
1 parent 03cae0e
commit f10f838
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 76 deletions.
diff --git a/src/app/courses/progress-courses/courses-progress-chart.component.html b/src/app/courses/progress-courses/courses-progress-chart.component.html
@@ -1,10 +1,11 @@
 <table class="simple-table">
   <thead>
     <tr>
-      <th *ngIf="showTotals">{ label, select, Steps {Steps} Questions {Questions} other {Steps} }</th>
+      <th *ngIf="showTotals">
+        {{ label | i18nSelect: { 'Steps': 'Steps', 'Questions': 'Questions', 'other': 'Steps' } }}
+      </th>
       <th i18n>Success (%)</th>
       <th i18n>Total Errors</th>
-      <!-- Dynamic User Headers -->
       <th *ngFor="let set of sets" class="user-header">
         <div class="user-header-content">
           <planet-avatar 
@@ -13,64 +14,74 @@
             [planetCode]="set.planetCode" 
             imgClass="profile-image">
           </planet-avatar>
-          <div class="user-name">
+          <div class="user-name cursor-pointer" (click)="labelClick(set)">
             {{ set.label }} ({{ set.total }})
           </div>
         </div>
       </th>
     </tr>
   </thead>
   <tbody>
-    <!-- Data Rows -->
     <tr *ngFor="let i of horizTotals; let index = index">
       <td>
         {{ index + 1 }}
       </td>
       <td>
         <ng-container *ngIf="calculateSuccessPercentage(index) !== null; else showDash">
           <span [ngClass]="{
-            'success-high': calculateSuccessPercentage(index) >= 90,
-            'success-medium': calculateSuccessPercentage(index) >= 70 && calculateSuccessPercentage(index) < 90,
-            'success-low': calculateSuccessPercentage(index) < 70
-          }">
+                  'highlight-green': calculateSuccessPercentage(index) >= 90,
+                  'highlight-yellow': calculateSuccessPercentage(index) >= 70 && calculateSuccessPercentage(index) < 90,
+                  'highlight-red': calculateSuccessPercentage(index) < 70,
+                  'cursor-pointer': i.clickable
+                }"
+                i18n-matTooltip
+                matTooltip="Click to see test detail"
+                [matTooltipDisabled]="!i.clickable"
+                (click)="i.clickable ? dataClick($event, [], index) : null">
             {{ calculateSuccessPercentage(index) | number:'1.0-0' }}%
           </span>
         </ng-container>
         <ng-template #showDash>
           -
         </ng-template>
       </td>
-      <td>
-        <div
-          i18n-matTooltip
-          matTooltip="Click to see test detail"
-          [matTooltipDisabled]="!i.clickable"
-          [ngClass]="{'cursor-pointer': i.clickable}"
-          (click)="i.clickable ? dataClick($event, [], index) : null">
-          {{ i.count }}
-        </div>
+      <td class="accent-highlight">
+        <ng-container *ngIf="i.count > 0; else showTotalDash">
+          <div
+            i18n-matTooltip
+            matTooltip="Click to see test detail"
+            [matTooltipDisabled]="!i.clickable"
+            [ngClass]="{'cursor-pointer': i.clickable}"
+            (click)="i.clickable ? dataClick($event, [], index) : null">
+            {{ i.count }}
+          </div>
+        </ng-container>
+        <ng-template #showTotalDash>
+          -
+        </ng-template>
       </td>
-      <!-- Dynamic User Data Cells -->
       <td *ngFor="let set of sets">
         <div *ngIf="set.items[index]" 
              i18n-matTooltip 
              matTooltip="Click to see test detail" 
              [matTooltipDisabled]="!set.items[index]?.clickable"
-             [ngClass]="{'cursor-pointer': set.items[index]?.clickable}" 
+             [ngClass]="{
+               'cursor-pointer': set.items[index]?.clickable
+             }" 
              (click)="dataClick($event, set, index)">
           <ng-container *ngIf="set.items[index].number === 0; else showNumber">
             0
           </ng-container>
           <ng-template #showNumber>
             <ng-container *ngIf="set.items[index].number > 0; else showDash">
-              {{ set.items[index].number }}
+              <span class="number-highlight">{{ set.items[index].number }}</span>
             </ng-container>
             <ng-template #showDash>
               -
             </ng-template>
           </ng-template>
         </div>
-      </td>      
+      </td>               
     </tr>
   </tbody>
-</table>
+</table>
diff --git a/src/app/courses/progress-courses/courses-progress-chart.component.ts b/src/app/courses/progress-courses/courses-progress-chart.component.ts
@@ -43,8 +43,6 @@ export class CoursesProgressChartComponent implements OnChanges {
     });
 }
 
-
-
   dataClick(event, set, index) {
     this.changeData.emit({ set, index });
   }

diff --git a/src/app/courses/progress-courses/courses-progress-chart.scss b/src/app/courses/progress-courses/courses-progress-chart.scss
@@ -1,3 +1,5 @@
+@import '../../variables';
+
 .simple-table {
   width: 80%;
   margin: 0 auto;
@@ -16,73 +18,51 @@
     font-weight: bold;
     position: sticky;
     top: 0;
-    z-index: 2;
-  }
-
-  tr:nth-child(even) {
-    background-color: #ECF0F1;
-  }
-
-  td {
-    background-color: #ffffff;
-    position: relative;
-  }
-
-  .cursor-pointer {
-    cursor: pointer;
   }
 
   .user-header-content {
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
-  }
-
-  .user-name {
-    margin-top: 5px;
-    font-size: 12px;
-    white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
   }
-
-  .wrap-content {
-    max-width: 100px;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-  }
-
-  .user-summary {
-    display: flex;
-    flex-wrap: wrap;
-    margin-top: 20px;
 
-    .user-row {
-      display: flex;
-      align-items: center;
-      margin-right: 15px;
-
-      .user-total {
-        margin-right: 5px;
-      }
-    }
+  .highlight-green {
+    background-color: green;
+    color: white;
+    display: inline-block;
+    padding: 2px 5px;
+    border-radius: 4px;
+  }
 
-    planet-avatar {
-      margin-right: 5px;
-    }
+  .highlight-yellow {
+    background-color: orange;
+    color: white;
+    display: inline-block;
+    padding: 2px 5px;
+    border-radius: 4px;
   }
 
-  .success-high {
-    color: green;
+  .highlight-red {
+    background-color: red;
+    color: white;
+    display: inline-block;
+    padding: 2px 5px;
+    border-radius: 4px;
   }
-
-  .success-medium {
-    color: orange;
+
+  .accent-highlight {
+    background-color: $accent;
+    color: $accent-text;
   }
-
-  .success-low {
-    color: red;
+
+  .number-highlight {
+    background-color: $accent;
+    color: $accent-text;
+    display: inline-block;
+    padding: 2px 5px;
+    border-radius: 4px;
   }
 }
-Original file line number
+Diff line change
@@ Expand Up @@
         });
     }
       dataClick(event, set, index) {
         this.changeData.emit({ set, index });
       }
@@ Expand Down @@