fix: remove ngClass

macite · Apr 18, 2024 · d1d8c72 · d1d8c72
1 parent 63e276c
commit d1d8c72
Show file tree

Hide file tree

Showing 10 changed files with 321 additions and 291 deletions.
diff --git a/package.json b/package.json
@@ -160,4 +160,4 @@
     "typescript": "~5.2",
     "underscore": "^1.8.3"
   }
-}
+}
diff --git a/src/app/common/audio-player/audio-player.component.html b/src/app/common/audio-player/audio-player.component.html
@@ -1,6 +1,10 @@
 <div class="audio-comment-container" fxLayout="row" fxLayoutAlign="start center">
   <button class="play-button" (click)="pausePlay()">
-    <i id="playButton" class="play-button fa" [ngClass]="isPlaying ? 'fa-pause-circle' : 'fa-play-circle'"></i>
+    @if (isPlaying) {
+      <i id="playButton" class="play-button fa fa-pause-circle"></i>
+    } @else {
+      <i id="playButton" class="play-button fa fa-play-circle"></i>
+    }
   </button>
   <mat-progress-bar
     #progressBar

diff --git a/src/app/common/file-drop/file-drop.component.html b/src/app/common/file-drop/file-drop.component.html
@@ -16,16 +16,17 @@
     [disabled]="uploadProgress"
   >
     @if (uploadProgress) {
-    <mat-spinner [diameter]="18" [strokeWidth]="0.5" mode="indeterminate"></mat-spinner>
-    } @if (!uploadProgress) {
-    <span>Choose file</span>
+      <mat-spinner [diameter]="18" [strokeWidth]="0.5" mode="indeterminate"></mat-spinner>
+    }
+    @if (!uploadProgress) {
+      <span>Choose file</span>
     }
   </button>
   <div class="f-inner-border flex grow items-center rounded-lg rounded-l-none bg-white">
     <div class="flex flex-col w-full">
       <div class="flex ml-4 h-[48px] items-center">
         @if (file?.name) {
-        <mat-icon class="mr-2">upload_file</mat-icon>
+          <mat-icon class="mr-2">upload_file</mat-icon>
         }
         <span class="truncate grow max-w-xs mt-[4px]"> {{ file?.name || message }} </span>
         {{ uploadProgress }}
@@ -36,16 +37,18 @@
           (click)="uploadProgress ? cancelUpload() : upload()"
         >
           @if (!uploadProgress) {
-          <mat-icon [ngClass]="{ 'animate-bounce': file?.name }">upload</mat-icon>
-          } @if (uploadProgress) {
-          <mat-icon>cancel</mat-icon>
+            <mat-icon [class.animate-bounce]="file?.name">upload</mat-icon>
+          }
+          @if (uploadProgress) {
+            <mat-icon>cancel</mat-icon>
           }
         </button>
       </div>
       @if (uploadProgress) {
-      <mat-progress-bar mode="determinate" [value]="uploadProgress"> </mat-progress-bar>
-      } @if (!uploadProgress) {
-      <span class="h-[4px]"></span>
+        <mat-progress-bar mode="determinate" [value]="uploadProgress"> </mat-progress-bar>
+      }
+      @if (!uploadProgress) {
+        <span class="h-[4px]"></span>
       }
     </div>
   </div>

diff --git a/src/app/common/header/header.component.html b/src/app/common/header/header.component.html
@@ -1,85 +1,90 @@
 @if (showHeader) {
-<mat-toolbar
-  [ngClass]="{ inbox: globalState.isInboxState }"
-  class="flex items-center justify-start"
-  style="min-height: 85px"
->
-  @if (!media.isActive('xs')) {
-  <a uiSref="home" class="pt-4">
-    <mat-icon
-      uiSref="home"
-      style="margin-right: 20px; margin-left: 20px"
-      svgIcon="formatif-logo"
-      class="formatif-icon"
-      aria-label="Formatif logo"
-    ></mat-icon>
-  </a>
-  }
+  <mat-toolbar
+    [class.inbox]="globalState.isInboxState"
+    class="flex items-center justify-start"
+    style="min-height: 85px"
+  >
+    @if (!media.isActive('xs')) {
+      <a uiSref="home" class="pt-4">
+        <mat-icon
+          uiSref="home"
+          style="margin-right: 20px; margin-left: 20px"
+          svgIcon="formatif-logo"
+          class="formatif-icon"
+          aria-label="Formatif logo"
+        ></mat-icon>
+      </a>
+    }
 
-  <unit-dropdown [unit]="currentUnit" [unitRoles]="filteredUnitRoles" [projects]="projects" class="mr-2">
-  </unit-dropdown>
+    <unit-dropdown
+      [unit]="currentUnit"
+      [unitRoles]="filteredUnitRoles"
+      [projects]="projects"
+      class="mr-2"
+    >
+    </unit-dropdown>
 
-  <task-dropdown
-    [currentUnit]="currentUnit"
-    [currentProject]="currentProject"
-    [currentView]="currentView"
-    [data]="data"
-    [unitRole]="currentUnitRole"
-  ></task-dropdown>
+    <task-dropdown
+      [currentUnit]="currentUnit"
+      [currentProject]="currentProject"
+      [currentView]="currentView"
+      [data]="data"
+      [unitRole]="currentUnitRole"
+    ></task-dropdown>
 
-  <span class="grow"></span>
+    <span class="grow"></span>
 
-  @if (currentUser.role === 'Admin' || currentUser.role === 'Convenor') {
-  <button
-    #menuState="matMenuTrigger"
-    mat-icon-button
-    fxShow.lt-sm="false"
-    fxShow.gt-md="true"
-    fxShow="true"
-    [matMenuTriggerFor]="menu"
-  >
-    <mat-icon>admin_panel_settings</mat-icon>
-  </button>
-  }
-  <mat-menu #menu="matMenu">
-    @if (currentUser.role === 'Admin') {
-    <button mat-menu-item uiSref="institutionsettings">
-      <mat-icon matListItemIcon>business</mat-icon>
-      Institution Settings
-    </button>
-    }
-    <button mat-menu-item uiSref="admin/units">
-      <mat-icon matListItemIcon>school</mat-icon>
-      Manage Units
-    </button>
-    @if (currentUser.role === 'Admin') {
-    <button mat-menu-item uiSref="admin/users">
-      <mat-icon matListItemIcon>people</mat-icon>
-      Manage Users
-    </button>
+    @if (currentUser.role === 'Admin' || currentUser.role === 'Convenor') {
+      <button
+        #menuState="matMenuTrigger"
+        mat-icon-button
+        fxShow.lt-sm="false"
+        fxShow.gt-md="true"
+        fxShow="true"
+        [matMenuTriggerFor]="menu"
+      >
+        <mat-icon>admin_panel_settings</mat-icon>
+      </button>
     }
-  </mat-menu>
+    <mat-menu #menu="matMenu">
+      @if (currentUser.role === 'Admin') {
+        <button mat-menu-item uiSref="institutionsettings">
+          <mat-icon matListItemIcon>business</mat-icon>
+          Institution Settings
+        </button>
+      }
+      <button mat-menu-item uiSref="admin/units">
+        <mat-icon matListItemIcon>school</mat-icon>
+        Manage Units
+      </button>
+      @if (currentUser.role === 'Admin') {
+        <button mat-menu-item uiSref="admin/users">
+          <mat-icon matListItemIcon>people</mat-icon>
+          Manage Users
+        </button>
+      }
+    </mat-menu>
 
-  <button mat-button [matMenuTriggerFor]="menu2">
-    <user-icon [size]="32"></user-icon>
-  </button>
-  <mat-menu #menu2="matMenu">
-    <button mat-menu-item uiSref="edit_profile">
-      <mat-icon matListItemIcon aria-label="Edit profile">person</mat-icon>
-      Edit Profile
-    </button>
-    <button mat-menu-item (click)="openCalendar()">
-      <mat-icon matListItemIcon aria-label="Edit calendar">calendar_month</mat-icon>
-      Calendar
-    </button>
-    <button mat-menu-item (click)="openAboutModal()">
-      <mat-icon matListItemIcon aria-label="About">info</mat-icon>
-      About
-    </button>
-    <button mat-menu-item (click)="signOut()">
-      <mat-icon matListItemIcon aria-label="Sign out">logout</mat-icon>
-      Sign Out
+    <button mat-button [matMenuTriggerFor]="menu2">
+      <user-icon [size]="32"></user-icon>
     </button>
-  </mat-menu>
-</mat-toolbar>
+    <mat-menu #menu2="matMenu">
+      <button mat-menu-item uiSref="edit_profile">
+        <mat-icon matListItemIcon aria-label="Edit profile">person</mat-icon>
+        Edit Profile
+      </button>
+      <button mat-menu-item (click)="openCalendar()">
+        <mat-icon matListItemIcon aria-label="Edit calendar">calendar_month</mat-icon>
+        Calendar
+      </button>
+      <button mat-menu-item (click)="openAboutModal()">
+        <mat-icon matListItemIcon aria-label="About">info</mat-icon>
+        About
+      </button>
+      <button mat-menu-item (click)="signOut()">
+        <mat-icon matListItemIcon aria-label="Sign out">logout</mat-icon>
+        Sign Out
+      </button>
+    </mat-menu>
+  </mat-toolbar>
 }
diff --git a/src/app/common/status-icon/status-icon.component.html b/src/app/common/status-icon/status-icon.component.html
@@ -1,5 +1,5 @@
 <div
-  [ngClass]="statusClass(status)"
+
   matTooltip="{{ statusLabel(status) }}"
   matTooltipPosition="above"
   [matTooltipDisabled]="!showTooltip"

diff --git a/...ctives/task-dashboard/directives/task-similarity-view/task-similarity-view.component.html b/...ctives/task-dashboard/directives/task-similarity-view/task-similarity-view.component.html
@@ -10,44 +10,39 @@ <h1 class="mat-headline m-0">Similarities</h1>
 
   <mat-accordion multi>
     @for (similarity of task?.similarityCache.values | async; track similarity) {
-
       <h1 class="mat-headline"></h1>
       @for (part of similarity.parts; track part; let i = $index) {
-  <mat-expansion-panel
-
-        hideToggle
-        (opened)="part.panelOpenState = true"
-        (closed)="part.panelOpenState = false"
-      >
-        <mat-expansion-panel-header [ngClass]="{ flagged: similarity.flagged }">
-          <mat-panel-title>
-            {{ similarity.friendlyTypeName }}
-          </mat-panel-title>
-          <mat-panel-description> {{ part.description }} </mat-panel-description>
-          @if (i === 0) {
-<button
-
-            [matTooltip]="similarity.flagged ? 'Unflag similarity' : 'Flag similarity'"
-            mat-icon-button
-            aria-label="Flag similarities"
-            (click)="toggleFlag($event, similarity)"
-          >
-            <mat-icon [color]="similarity.flagged ? 'warn' : ''">{{
-              similarity.flagged ? 'flag_circle' : 'check_circle'
-            }}</mat-icon>
-          </button>
-}
-        </mat-expansion-panel-header>
-        @if (part.panelOpenState) {
-<f-file-viewer
-
-          [fileType]="part.format"
-          [src]="similarity.fileUrl(part.idx)"
-        ></f-file-viewer>
-}
-      </mat-expansion-panel>
-}
-
-}
+        <mat-expansion-panel
+          hideToggle
+          (opened)="part.panelOpenState = true"
+          (closed)="part.panelOpenState = false"
+        >
+          <mat-expansion-panel-header [class.flagged]="similarity.flagged">
+            <mat-panel-title>
+              {{ similarity.friendlyTypeName }}
+            </mat-panel-title>
+            <mat-panel-description> {{ part.description }} </mat-panel-description>
+            @if (i === 0) {
+              <button
+                [matTooltip]="similarity.flagged ? 'Unflag similarity' : 'Flag similarity'"
+                mat-icon-button
+                aria-label="Flag similarities"
+                (click)="toggleFlag($event, similarity)"
+              >
+                <mat-icon [color]="similarity.flagged ? 'warn' : ''">{{
+                  similarity.flagged ? 'flag_circle' : 'check_circle'
+                }}</mat-icon>
+              </button>
+            }
+          </mat-expansion-panel-header>
+          @if (part.panelOpenState) {
+            <f-file-viewer
+              [fileType]="part.format"
+              [src]="similarity.fileUrl(part.idx)"
+            ></f-file-viewer>
+          }
+        </mat-expansion-panel>
+      }
+    }
   </mat-accordion>
 </div>
diff --git a/src/app/tasks/task-comment-composer/task-comment-composer.component.html b/src/app/tasks/task-comment-composer/task-comment-composer.component.html
@@ -140,7 +140,7 @@
     <div
       id="textFieldContainer"
       [class.active]="$userIsTyping | async"
-      [ngClass]="{recording: recording}"
+      [class.recording]="recording"
     >
       <div
         [hidden]="recording"

diff --git a/src/app/tasks/task-comments-viewer/task-comments-viewer.component.html b/src/app/tasks/task-comments-viewer/task-comments-viewer.component.html
@@ -38,17 +38,15 @@
           <p
             id="commentTimestamp"
             *ngIf="comment.shouldShowTimestamp"
-            [ngClass]="{own: comment.authorIsMe}"
+            [class.own]="comment.authorIsMe"
           >
             {{ comment.author.firstName }} {{ comment.author.lastName }}
             {{ comment.createdAt | humanizedDate }}
           </p>
           <div
             class="comment"
-            [ngClass]="{
-              'comment-by-other-user': !comment.authorIsMe,
-              'new-comment': comment.isNew
-            }"
+            [class.comment-by-other-user]="!comment.authorIsMe"
+            [class.new-comment]="comment.isNew"
             [fxLayout]="comment.authorIsMe ? 'row-reverse' : 'row'"
             fxLayoutAlign="start end"
           >
@@ -60,7 +58,8 @@
                 *ngIf="comment.shouldShowAvatar && shouldShowAuthorIcon(comment.commentType)"
                 [size]="28"
                 [user]="comment.author"
-                [ngClass]="{'hidden-xs hidden-sm': comment.authorIsMe}"
+                [class.hidden-xs]="comment.authorIsMe"
+                [class.hidden-sm]="comment.authorIsMe"
                 matTooltip="{{ comment.author.name }}"
                 matTooltipPosition="left"
               >
@@ -85,7 +84,7 @@
                 ></app-task-assessment-comment>
               </div>
 
-              <div class="bubble" [ngClass]="commentClasses(comment)">
+              <div class="bubble">
                 <a
                   (click)="scrollToComment(comment.originalComment.id)"
                   class="original-comment"
-Original file line number
+Diff line change
@@ Expand Up / @@ -160,4 +160,4 @@ @@
         "typescript": "~5.2",
         "underscore": "^1.8.3"
       }
-    }
+    }