Added translations

apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html

@@ -47,8 +47,8 @@
       <!-- Quick navigation tab-->
       <div class="vertical" (click)="selectTab('NAVIGATION')" [ngClass]="{ active: navigationTab}"
            #navigationTabElement>
-        <div class="tab-title" [ngClass]="navigationTab ? 'heading' : 'subheading'">
-          Quick Navigation
+        <div class="tab-title" [ngClass]="navigationTab ? 'heading' : 'subheading'"
+             translate="file-preview.tabs.quick-navigation.label">
         </div>
 
         <div class="tab-content" [class.not-visible]="!navigationTab">
@@ -80,8 +80,8 @@
       <!-- Annotations tab-->
       <div (click)="selectTab('ANNOTATIONS')" class="vertical" [ngClass]="{ active: annotationsTab }"
            #annotationsContainer>
-        <div class="tab-title" [ngClass]="annotationsTab ? 'heading' : 'subheading'">
-          Annotations
+        <div class="tab-title" [ngClass]="annotationsTab ? 'heading' : 'subheading'"
+             translate="file-preview.tabs.annotations.label">
         </div>
 
         <div class="tab-content" [class.not-visible]="!annotationsTab">
@@ -106,8 +106,8 @@
 
       <!-- Info tab-->
       <div class="vertical" (click)="selectTab('INFO')" [ngClass]="{ active: infoTab}">
-        <div class="tab-title" [ngClass]="infoTab ? 'heading' : 'subheading'">
-          Info
+        <div class="tab-title" [ngClass]="infoTab ? 'heading' : 'subheading'"
+             translate="file-preview.tabs.info.label">
         </div>
 
         <div *ngIf="infoTab" class="tab-content info-container">
@@ -126,25 +126,22 @@
 
           <div class="flex-row mt-20">
             <redaction-initials-avatar size="large" color="red-white"></redaction-initials-avatar>
-            <a class="assign-reviewer">Assign Reviewer</a>
+            <a class="assign-reviewer" translate="file-preview.tabs.info.assign-reviewer.label"></a>
           </div>
 
-          <div class="subheading mt-20">
-            Added on
+          <div class="subheading mt-20" translate="file-preview.tabs.info.added-on.label">
           </div>
           <div class="subtitle mt-5">
             {{appStateService.activeFile.added | date:'medium'}}
           </div>
 
-          <div class="subheading mt-20">
-            Added by
+          <div class="subheading mt-20" translate="file-preview.tabs.info.added-by.label">
           </div>
           <div class="subtitle mt-5">
             {{user.name}}
           </div>
 
-          <div class="subheading mt-20">
-            Last modified on
+          <div class="subheading mt-20" translate="file-preview.tabs.info.last-modified-on.label">
           </div>
           <div class="subtitle mt-5">
             {{appStateService.activeFile.lastUpdated | date:'medium'}}

apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html

@@ -10,20 +10,20 @@
   <button (click)="openAddProjectDialog()" color="primary" mat-flat-button class="add-project-btn">
     <mat-icon svgIcon="red:plus">
     </mat-icon>
-    <span translate="projects.add-new.label"></span>
+    <span translate="project-listing.add-new.label"></span>
   </button>
 </div>
 
-<div *ngIf="appStateService.allProjects?.length === 0 " translate="projects.no-projects.label"></div>
+<div *ngIf="appStateService.allProjects?.length === 0 " translate="project-listing.no-projects.label"></div>
 
 <div class="flex red-content-inner">
   <div class="left-container">
     <div class="table-header">
         <span class="subheading">
-          {{'projects.table-header.title.label'| translate:{ length: appStateService.allProjects?.length || 0 } }}
+          {{'project-listing.table-header.title.label'| translate:{ length: appStateService.allProjects?.length || 0 } }}
         </span>
       <div class="actions">
-        <div translate="projects.table-header.bulk-select.label"></div>
+        <div translate="project-listing.table-header.bulk-select.label"></div>
         <mat-form-field appearance="none" class="red-select">
           <mat-select [(ngModel)]="sortingOption" panelClass="red-select-panel">
             <mat-option *ngFor="let option of sortingOptions" [value]="option">
@@ -88,7 +88,7 @@
     <div>
       <redaction-simple-doughnut-chart [config]="projectsChartData"
                                        [strokeWidth]="15"
-                                       [subtitle]="'Projects'"
+                                       [subtitle]="'project-listing.stats.charts.projects.label' | translate"
       ></redaction-simple-doughnut-chart>
 
       <div class="project-stats-container">
@@ -96,7 +96,7 @@
           <mat-icon svgIcon="red:files"></mat-icon>
           <div>
             <div class="heading">{{totalPages}}</div>
-            <div>Analyzed pages</div>
+            <div translate="project-listing.stats.analyzed-pages.label"></div>
           </div>
         </div>
 
@@ -104,7 +104,7 @@
           <mat-icon svgIcon="red:user"></mat-icon>
           <div>
             <div class="heading">240</div>
-            <div>Total people</div>
+            <div translate="project-listing.stats.total-people.label"></div>
           </div>
         </div>
       </div>
@@ -112,7 +112,7 @@
     <div>
       <redaction-simple-doughnut-chart [config]="documentsChartData"
                                        [strokeWidth]="15"
-                                       [subtitle]="'Total Documents'"
+                                       [subtitle]="'project-listing.stats.charts.total-documents.label' | translate"
       ></redaction-simple-doughnut-chart>
     </div>
   </div>

apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.ts

@@ -20,8 +20,8 @@ export class ProjectListingScreenComponent implements OnInit {
   public projectsChartData: DoughnutChartConfig [] = [];
   public documentsChartData: DoughnutChartConfig [] = [];
   public sortingOptions: SortingOption[] = [
-    { label: 'projects.sorting.recent.label', order: 'desc', column: 'projectDate' },
-    { label: 'projects.sorting.alphabetically.label', order: 'asc',  column: 'project.projectName' }
+    { label: 'project-listing.sorting.recent.label', order: 'desc', column: 'projectDate' },
+    { label: 'project-listing.sorting.alphabetically.label', order: 'asc',  column: 'project.projectName' }
   ];
   public sortingOption: SortingOption = this.sortingOptions[0];
 

apps/red-ui/src/assets/i18n/en.json

@@ -133,7 +133,7 @@
       "label": "Document"
     }
   },
-  "projects": {
+  "project-listing": {
     "table-header": {
       "title": {
         "label": "{{length}} active projects"
@@ -145,6 +145,22 @@
         "label": "Recent"
       }
     },
+    "stats": {
+      "analyzed-pages": {
+        "label": "Analyzed pages"
+      },
+      "total-people": {
+        "label": "Total people"
+      },
+      "charts": {
+        "projects": {
+          "label": "Projects"
+        },
+        "total-documents": {
+          "label": "Total Documents"
+        }
+      }
+    },
     "add-edit-dialog": {
       "header-new": {
         "label": "New Project"
@@ -326,6 +342,29 @@
     "view-toggle": {
       "label": "Redacted View"
     },
+    "tabs": {
+      "quick-navigation": {
+        "label": "Quick Navigation"
+      },
+      "annotations": {
+        "label": "Annotations"
+      },
+      "info": {
+        "label": "Info",
+        "assign-reviewer": {
+          "label": "Assign reviewer"
+        },
+        "added-on": {
+          "label": "Added on"
+        },
+        "added-by": {
+          "label": "Added by"
+        },
+        "last-modified-on": {
+          "label": "Last modified on"
+        }
+      }
+    },
     "download": {
       "label": "Download",
       "dropdown": {

apps/red-ui/src/assets/styles/red-button.scss

@@ -1,4 +1,4 @@
-button {
+button.mat-flat-button {
   font-family: Inter, sans-serif !important;
   font-weight: 400 !important;
   border-radius: 25px !important;