Usability: Add tooltip to upload sections (#643)

* changed cancel to back

* added tooltip to file upload

* change tooltip position on page3

* Updated German translation to use gender-neutral form for professors

Author: Abi107717

src/main/webapp/app/application/application-creation/application-creation-form/application-creation-form.component.ts

@@ -149,7 +149,7 @@ export default class ApplicationCreationFormComponent {
               })();
             },
             disabled: false,
-            label: 'entity.applicationSteps.buttons.cancel',
+            label: 'entity.applicationSteps.buttons.back',
             changePanel: false,
             shouldTranslate: true,
           },

src/main/webapp/app/application/application-creation/application-creation-page2/application-creation-page2.component.html

@@ -61,6 +61,12 @@
           [documentIds]="documentIdsBachelorTranscript()"
         />
       </div>
+      <fa-icon
+        icon="circle-info"
+        class="upload-info-icon"
+        pTooltip="{{ 'entity.applicationPage2.tooltip.filenamePrivacy' | translate }}"
+        tooltipPosition="top"
+      />
     </div>
   }
 
@@ -126,6 +132,12 @@
           [documentIds]="documentIdsMasterTranscript()"
         />
       </div>
+      <fa-icon
+        icon="circle-info"
+        class="upload-info-icon"
+        pTooltip="{{ 'entity.applicationPage2.tooltip.filenamePrivacy' | translate }}"
+        tooltipPosition="top"
+      />
     </div>
   }
 </form>

src/main/webapp/app/application/application-creation/application-creation-page2/application-creation-page2.component.ts

@@ -6,6 +6,8 @@ import { SelectComponent, SelectOption } from 'app/shared/components/atoms/selec
 import { UploadButtonComponent } from 'app/shared/components/atoms/upload-button/upload-button.component';
 import { DividerModule } from 'primeng/divider';
 import { TranslateModule } from '@ngx-translate/core';
+import { TooltipModule } from 'primeng/tooltip';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 
 import { StringInputComponent } from '../../../shared/components/atoms/string-input/string-input.component';
 
@@ -58,6 +60,8 @@ export const getPage2FromApplication = (application: ApplicationForApplicantDTO)
     ReactiveFormsModule,
     StringInputComponent,
     TranslateModule,
+    TooltipModule,
+    FontAwesomeModule,
   ],
   templateUrl: './application-creation-page2.component.html',
   styleUrl: './application-creation-page2.component.scss',

src/main/webapp/app/application/application-creation/application-creation-page3/application-creation-page3.component.html

@@ -22,6 +22,12 @@
     }
     <p-divider layout="horizontal">
       <span jhiTranslate="entity.applicationPage3.section.uploads"></span>
+      <fa-icon
+        icon="circle-info"
+        class="upload-info-icon mr-4"
+        pTooltip="{{ 'entity.applicationPage2.tooltip.filenamePrivacy' | translate }}"
+        tooltipPosition="top"
+      />
     </p-divider>
 
     @if (applicationIdForDocuments(); as applicationId) {
@@ -34,6 +40,7 @@
             [documentIds]="computedDocumentIdsCvSet()"
           />
         </div>
+
         <div class="w-1/2 ml-1">
           <jhi-upload-button
             uploadKey="entity.upload.upload_instruction.REFERENCE"

src/main/webapp/content/scss/global.scss

@@ -315,6 +315,13 @@
   }
 }
 
+/* Styles for the tooltip icon in the Upload component */
+.upload-info-icon {
+  color: var(--p-primary-color);
+  margin-left: 0.5rem;
+  font-size: 1rem;
+}
+
 /* Styling for links */
 .link {
   color: var(--p-primary-color);

src/main/webapp/i18n/de/global.json

@@ -210,7 +210,7 @@
       "education": "Ausbildung",
       "applicationDetails": "Bewerbungsdetails",
       "buttons": {
-        "cancel": "Abbrechen",
+        "back": "Zurück",
         "next": "Weiter",
         "prev": "Zurück",
         "send": "Senden"
@@ -272,7 +272,8 @@
         "masterDegreeName": "Gib den Studiengang deines Masters an.",
         "masterDegreeUniversity": "Gib den Namen der Universität an, an der du deinen Master absolviert hast.",
         "masterGradingScale": "Wähle die Benotungsskala deines Masters.",
-        "masterGrade": "Gib deine Abschlussnote laut der Notenskala deiner Universität an."
+        "masterGrade": "Gib deine Abschlussnote laut der Notenskala deiner Universität an.",
+        "filenamePrivacy": "Dateinamen bleiben privat und werden den Professor:innen nicht angezeigt."
       }
     },
     "applicationPage3": {

src/main/webapp/i18n/en/global.json

@@ -210,7 +210,7 @@
       "education": "Education",
       "applicationDetails": "Application Details",
       "buttons": {
-        "cancel": "Cancel",
+        "back": "Back",
         "next": "Next",
         "prev": "Previous",
         "send": "Send"
@@ -272,7 +272,8 @@
         "masterDegreeName": "Specify the study program of your Master's Degree.",
         "masterDegreeUniversity": "Enter the name of the University where you completed your Master's Degree.",
         "masterGradingScale": "Choose the Grading Scale used for your Master's Degree.",
-        "masterGrade": "Enter your final Master's Grade according to your institution's grading system."
+        "masterGrade": "Enter your final Master's Grade according to your institution's grading system.",
+        "filenamePrivacy": "File names stay private and are not shown to professors."
       }
     },
     "applicationPage3": {