Fix history button inconsistensy and translation

CSCfi · Sep 12, 2024 · 2ec42d2 · 2ec42d2
1 parent 724044d
commit 2ec42d2
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 8 deletions.
diff --git a/ui/src/app/exam/editor/exam-tabs.component.html b/ui/src/app/exam/editor/exam-tabs.component.html
@@ -1,13 +1,11 @@
 <xm-page-header [text]="examInfo.title || 'loading'" [prependTemplate]="linkBack" [appendTemplate]="status" />
 <xm-page-content [content]="content" />
 <ng-template #linkBack>
-    <a [routerLink]="[user.isAdmin ? '/staff/admin' : '/staff/teacher']">
-        <img class="pointer arrow_icon pe-4" src="/assets/images/icon_history.png" alt="go back" />
-    </a>
+    <xm-history-back></xm-history-back>
 </ng-template>
 <ng-template #status>
     @if (exam?.state) {
-        <span class="exam-status float-end me-3">{{ 'i18n_' + exam.state | lowercase | translate }} </span>
+        <span class="exam-status float-end pe-3">{{ 'i18n_' + exam.state | lowercase | translate }} </span>
     }
 </ng-template>
 <ng-template #content>

diff --git a/ui/src/app/exam/editor/exam-tabs.component.ts b/ui/src/app/exam/editor/exam-tabs.component.ts
@@ -25,6 +25,7 @@ import type { User } from 'src/app/session/session.service';
 import { SessionService } from 'src/app/session/session.service';
 import { PageContentComponent } from 'src/app/shared/components/page-content.component';
 import { PageHeaderComponent } from 'src/app/shared/components/page-header.component';
+import { HistoryBackComponent } from 'src/app/shared/history/history-back.component';
 import { CourseCodeService } from 'src/app/shared/miscellaneous/course-code.service';
 import type { UpdateProps } from './exam-tabs.service';
 import { ExamTabService } from './exam-tabs.service';
@@ -44,6 +45,7 @@ import { ExamTabService } from './exam-tabs.service';
         TranslateModule,
         PageHeaderComponent,
         PageContentComponent,
+        HistoryBackComponent,
     ],
     styleUrl: './exam-tabs.component.scss',
 })

diff --git a/ui/src/app/question/basequestion/question.component.html b/ui/src/app/question/basequestion/question.component.html
@@ -5,7 +5,7 @@
 }
 <xm-page-content [content]="content" />
 <ng-template #linkBack>
-    <img (click)="cancel()" class="pointer arrow_icon pe-3" src="/assets/images/icon_history.png" alt="go back" />
+    <xm-history-back></xm-history-back>
 </ng-template>
 <ng-template #content>
     <div class="row">

diff --git a/ui/src/app/question/basequestion/question.component.ts b/ui/src/app/question/basequestion/question.component.ts
@@ -27,14 +27,22 @@ import { QuestionService } from 'src/app/question/question.service';
 import type { User } from 'src/app/session/session.service';
 import { PageContentComponent } from 'src/app/shared/components/page-content.component';
 import { PageHeaderComponent } from 'src/app/shared/components/page-header.component';
+import { HistoryBackComponent } from 'src/app/shared/history/history-back.component';
 import { QuestionBodyComponent } from './question-body.component';
 
 @Component({
     selector: 'xm-question',
     templateUrl: './question.component.html',
     styleUrls: ['../question.shared.scss'],
     standalone: true,
-    imports: [FormsModule, QuestionBodyComponent, TranslateModule, PageHeaderComponent, PageContentComponent],
+    imports: [
+        FormsModule,
+        QuestionBodyComponent,
+        TranslateModule,
+        PageHeaderComponent,
+        PageContentComponent,
+        HistoryBackComponent,
+    ],
 })
 export class QuestionComponent implements OnInit, OnDestroy, CanComponentDeactivate {
     @Input() newQuestion = false;

diff --git a/ui/src/app/shared/history/history-back.component.ts b/ui/src/app/shared/history/history-back.component.ts
@@ -14,15 +14,22 @@
  *
  */
 import { Component } from '@angular/core';
+import { TranslateModule } from '@ngx-translate/core';
 
 @Component({
     selector: 'xm-history-back',
     template: `
-        <button class="btn btn-link" (click)="goBack($event)" (keydown)="onKeyDown($event)">
-            <img class="pointer arrow_icon" src="/assets/images/icon_history.png" alt="go back" />
+        <button
+            class="btn btn-link"
+            (click)="goBack($event)"
+            (keydown)="onKeyDown($event)"
+            [attr.aria-label]="'i18n_go_back' | translate"
+        >
+            <img class="pointer arrow_icon h-80 align-self-center" src="/assets/images/icon_history.png" alt="" />
         </button>
     `,
     standalone: true,
+    imports: [TranslateModule],
 })
 export class HistoryBackComponent {
     goBack = (event: Event) => {