Skip to content

Commit

Permalink
CSCEXAM-1249 Fix main menu keyboard usage (#1106)
Browse files Browse the repository at this point in the history
  • Loading branch information
@VirmasaloA
VirmasaloA committed Jun 6, 2024
1 parent a20dace commit 3343e09
Show file tree
Hide file tree
Showing 9 changed files with 129 additions and 111 deletions.
123 changes: 56 additions & 67 deletions ui/src/app/enrolment/active/helpers/active-enrolment-menu.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,104 +3,93 @@
<button ngbDropdownToggle class="btn btn-outline-secondary">
<i class="bi-pencil me-2"></i>{{ 'i18n_edit_enrolment' | translate }}
</button>
<div ngbDropdownMenu>
<div>
<!-- enrolment with reservation, allow changing -->
@if (enrolment.reservation && canChangeReservation(enrolment.reservation)) {
<div ngbDropdownItem>
<!-- collaborative exam taken here -->
@if (enrolment.reservation.machine && enrolment.collaborativeExam) {
<a
class="btn btn-outline-secondary"
[routerLink]="['/calendar', enrolment.collaborativeExam.id, 'collaborative']"
>{{ 'i18n_student_change_reservation' | translate }}
</a>
}
<!-- regular exam taken here -->
@if (enrolment.reservation.machine && !enrolment.collaborativeExam) {
<a class="btn btn-outline-secondary" [routerLink]="['/calendar', enrolment.exam.id]"
>{{ 'i18n_student_change_reservation' | translate }}
</a>
}
<!-- regular exam taken elsewhere -->
@if (enrolment.reservation.externalReservation && enrolment.exam) {
<a class="btn btn-outline-secondary" [routerLink]="['/calendar', enrolment.exam.id, 'external']"
>{{ 'i18n_student_change_reservation' | translate }}
</a>
}
<!-- collaborative exam taken elsewhere -->
@if (enrolment.reservation.externalReservation && enrolment.collaborativeExam) {
<a
class="btn btn-outline-secondary"
[routerLink]="['/calendar', enrolment.collaborativeExam.id, 'external']"
[queryParams]="{ isCollaborative: true }"
>{{ 'i18n_student_change_reservation' | translate }}
</a>
}
</div>
<!-- collaborative exam taken here -->
@if (enrolment.reservation.machine && enrolment.collaborativeExam) {
<a
ngbDropdownItem
class="btn btn-outline-secondary"
[routerLink]="['/calendar', enrolment.collaborativeExam.id, 'collaborative']"
>{{ 'i18n_student_change_reservation' | translate }}
</a>
}
<!-- regular exam taken here -->
@if (enrolment.reservation.machine && !enrolment.collaborativeExam) {
<a ngbDropdownItem class="btn btn-outline-secondary" [routerLink]="['/calendar', enrolment.exam.id]"
>{{ 'i18n_student_change_reservation' | translate }}
</a>
}
<!-- regular exam taken elsewhere -->
@if (enrolment.reservation.externalReservation && enrolment.exam) {
<a
ngbDropdownItem
class="btn btn-outline-secondary"
[routerLink]="['/calendar', enrolment.exam.id, 'external']"
>{{ 'i18n_student_change_reservation' | translate }}
</a>
}
<!-- collaborative exam taken elsewhere -->
@if (enrolment.reservation.externalReservation && enrolment.collaborativeExam) {
<a
ngbDropdownItem
class="btn btn-outline-secondary"
[routerLink]="['/calendar', enrolment.collaborativeExam.id, 'external']"
[queryParams]="{ isCollaborative: true }"
>{{ 'i18n_student_change_reservation' | translate }}
</a>
}
}
<!-- enrolment with examination event, allow changing -->
@if (enrolment.examinationEventConfiguration && hasUpcomingAlternativeEvents()) {
<div ngbDropdownItem>
<button class="btn btn-outline-secondary" (click)="makeReservation()">
{{ 'i18n_student_change_reservation' | translate }}
</button>
</div>
<button ngbDropdownItem class="btn btn-outline-secondary" (click)="makeReservation()">
{{ 'i18n_student_change_reservation' | translate }}
</button>
}
<!-- enrolment with reservation, allow reservation removal -->
@if (enrolment.reservation && canChangeReservation(enrolment.reservation)) {
<div ngbDropdownItem>
<button class="btn btn-outline-danger" (click)="removeReservation()">
{{ 'i18n_student_remove_reservation' | translate }}
</button>
</div>
<button ngbDropdownItem class="btn btn-outline-danger" (click)="removeReservation()">
{{ 'i18n_student_remove_reservation' | translate }}
</button>
}
<!-- reservation in progress, inform with a disabled item -->
@if (enrolment.reservation && !canChangeReservation(enrolment.reservation)) {
<div>
<button class="btn btn-outline-danger" [disabled]="true" (click)="removeReservation()">
{{ 'i18n_not_allowed_to_modify_reservation' | translate }}
</button>
</div>
<button ngbDropdownItem class="btn btn-outline-danger" [disabled]="true" (click)="removeReservation()">
{{ 'i18n_not_allowed_to_modify_reservation' | translate }}
</button>
}
<!-- enrolment with examination event, allow event removal -->
@if (enrolment.examinationEventConfiguration) {
<div ngbDropdownItem>
<button class="btn btn-outline-danger" (click)="removeReservation()">
{{ 'i18n_student_remove_reservation' | translate }}
</button>
</div>
<button ngbDropdownItem class="btn btn-outline-danger" (click)="removeReservation()">
{{ 'i18n_student_remove_reservation' | translate }}
</button>
}
<!-- enrolment without reservation or examination event, allow unenrolling (if other conditions pass) -->
@if (
!enrolment.reservation &&
!enrolment.examinationEventConfiguration &&
(enrolment.exam?.executionType?.type === 'PUBLIC' || enrolment.collaborativeExam)
) {
<div ngbDropdownItem>
<button (click)="removeEnrolment()" class="btn btn-outline-danger">
{{ 'i18n_student_remove_enrolment' | translate }}
</button>
</div>
<button ngbDropdownItem (click)="removeEnrolment()" class="btn btn-outline-danger">
{{ 'i18n_student_remove_enrolment' | translate }}
</button>
}
<!-- enrolment without reservation, allow making reservation -->
@if ((!enrolment.reservation && enrolment.exam?.implementation === 'AQUARIUM') || enrolment.collaborativeExam) {
<div ngbDropdownItem>
<button (click)="makeReservation()" class="btn btn-outline-secondary">
{{ 'i18n_student_new_reservation' | translate }}
</button>
</div>
<button ngbDropdownItem (click)="makeReservation()" class="btn btn-outline-secondary">
{{ 'i18n_student_new_reservation' | translate }}
</button>
}
<!-- enrolment without examination event, allow making reservation -->
@if (
!enrolment.examinationEventConfiguration &&
enrolment.exam?.implementation !== 'AQUARIUM' &&
hasUpcomingAlternativeEvents()
) {
<div ngbDropdownItem>
<button class="btn btn-outline-secondary" (click)="makeReservation()">
{{ 'i18n_student_new_reservation' | translate }}
</button>
</div>
<button ngbDropdownItem class="btn btn-outline-secondary" (click)="makeReservation()">
{{ 'i18n_student_new_reservation' | translate }}
</button>
}
</div>
</div>
7 changes: 6 additions & 1 deletion ui/src/app/enrolment/finished/exam-participations.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,12 @@
<div class="input-group-append search">
<img alt="" src="/assets/images/icon_search.png" width="49" height="40" />
</div>
<div class="invisible">{{ participations.length > 0 ? '' : '' }}</div>
</div>
</div>
<div class="row my-2">
<div class="col-md-12" aria-live="polite">
{{ 'i18n_student_exam_search_result' | translate }} {{ participations.length }}
{{ 'i18n_student_exam_search_result_continues' | translate }}
</div>
</div>
<div class="col-8" ngbDropdown>
Expand Down
14 changes: 5 additions & 9 deletions ui/src/app/enrolment/search/collaborative-exam-search.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,16 +56,12 @@ import { ExamSearchResultComponent } from './exam-search-result.component';
</div>
</div>
</div>
@if (exams.length > 0 && filter.text.length > 2) {
<div class="row mt-2">
<div class="col-12">
{{ 'i18n_student_exam_search_result' | translate }} {{ exams.length }}
{{ 'i18n_student_exam_search_result_continues' | translate }}
<b>"{{ filter.text }}"</b>
</div>
<div class="row mt-2">
<div class="col-md-12" aria-live="polite">
{{ 'i18n_student_exam_search_result' | translate }} {{ exams.length }}
{{ 'i18n_student_exam_search_result_continues' | translate }}
</div>
}
</div>
<div class="row mt-2">
<div class="col" [hidden]="!loader.loading">
<button class="btn btn-success" type="button" disabled>
Expand Down
13 changes: 5 additions & 8 deletions ui/src/app/enrolment/search/exam-search.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,15 +66,12 @@ import { ExamSearchService } from './exam-search.service';
</div>
}
@if (exams.length > 0) {
<div class="row my-2">
<div class="col-md-12">
{{ 'i18n_student_exam_search_result' | translate }} {{ exams.length }}
{{ 'i18n_student_exam_search_result_continues' | translate }}
<b>"{{ filter.text }}"</b>
</div>
<div class="row my-2">
<div class="col-md-12" aria-live="polite">
{{ 'i18n_student_exam_search_result' | translate }} {{ exams.length }}
{{ 'i18n_student_exam_search_result_continues' | translate }}
</div>
}
</div>
<div [@listAnimation]="exams.length">
@for (exam of exams; track exam.id) {
Expand Down
51 changes: 38 additions & 13 deletions ui/src/app/navigation/navigation.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,25 +29,32 @@
<ul class="links">
@for (link of links; track link.name) {
<li [hidden]="!link.visible">
<a
<button
class="btn important-clear-focus"
[routerLink]="link.route"
routerLinkActive="selected"
[attr.aria-current]="isActive(link)"
(click)="link.submenu.hidden = !link.submenu.hidden"
>
<img aria-hidden="true" width="18" src="/assets/images/nav/{{ link.iconPng }}" alt="" />
<span class="menu-item" (click)="link.submenu.hidden = !link.submenu.hidden">{{
link.name | translate
}}</span>
</a>
<span class="menu-item">{{ link.name | translate }}</span>
</button>
@if (isActive(link)) {
<a class="skip" id="skip-button" [href]="getSkipLinkPath('#mainView')">{{
'i18n_skip_to_content' | translate
}}</a>
}
<ul class="submenu" [ngbCollapse]="link.submenu.hidden && link.submenu.items.length > 0">
<ul
class="submenu ms-4"
[ngbCollapse]="link.submenu.hidden && link.submenu.items.length > 0"
>
@for (subitem of link.submenu.items; track subitem.name) {
<li [hidden]="!subitem.visible">
<a [routerLink]="subitem.route" routerLinkActive="selected">
<button
[routerLink]="subitem.route"
routerLinkActive="selected"
class="btn important-clear-focus"
>
<div>
<img
aria-hidden="true"
Expand All @@ -57,8 +64,8 @@
/>
{{ subitem.name | translate }}
</div>
</a>
@if (isActive(link)) {
</button>
@if (isActive(subitem)) {
<a
class="skip"
id="skip-button-sub"
Expand All @@ -77,18 +84,28 @@
<ul class="links">
@for (link of links; track link.name) {
<li [hidden]="!link.visible">
<a
<button
class="btn important-clear-focus w-100"
[routerLink]="link.route"
routerLinkActive="selected"
(click)="link.submenu.hidden = !link.submenu.hidden"
>
<img aria-hidden="true" width="18" src="/assets/images/nav/{{ link.iconPng }}" alt="" />
<span class="menu-item">{{ link.name | translate }}</span>
</a>
</button>
@if (isActive(link)) {
<a class="skip" id="skip-button-mobile" [href]="getSkipLinkPath('#mainView')">{{
'i18n_skip_to_content' | translate
}}</a>
}
<ul class="submenu" [ngbCollapse]="!link.submenu.hidden && link.submenu.items.length > 0">
@for (subitem of link.submenu.items; track subitem.name) {
<li [hidden]="!subitem.visible">
<a [routerLink]="subitem.route" routerLinkActive="selected">
<button
[routerLink]="subitem.route"
routerLinkActive="selected"
class="btn important-clear-focus w-100"
>
<div>
<img
aria-hidden="true"
Expand All @@ -98,7 +115,15 @@
/>
{{ subitem.name | translate }}
</div>
</a>
</button>
@if (isActive(subitem)) {
<a
class="skip"
id="skip-button-sub-mobile"
[href]="getSkipLinkPath('#mainView')"
>{{ 'i18n_skip_to_content' | translate }}</a
>
}
</li>
}
</ul>
Expand Down
20 changes: 13 additions & 7 deletions ui/src/app/navigation/navigation.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,15 +44,16 @@
}
}

a {
button {
display: flex;
text-decoration: none;
padding-left: 1.5em;
border-left: 3px solid #212121;
border-radius: 0px;
font-size: 16px;
color: #e7e7e7;
letter-spacing: 0.27px;
line-height: 18px;
height: auto;
text-align: left;
align-items: center;
@media (max-width: $mobile-width) {
Expand All @@ -70,7 +71,7 @@
}
}

a:hover {
button:hover {
border-left: 3px solid $exam-dark-green;
@media (max-width: $mobile-width) {
border: 3px solid white;
Expand Down Expand Up @@ -124,7 +125,6 @@
background-color: #212121;
top: 162px;
bottom: 105px;
overflow-y: auto;
width: 17.125em;

@media (max-width: $mobile-width) {
Expand All @@ -145,6 +145,10 @@
position: fixed;
bottom: 0;
width: 17.125em;
&.button {
height: 25px;

}

@media (max-width: $mobile-width) {
display: none;
Expand Down Expand Up @@ -207,7 +211,7 @@
font-weight: 300;
letter-spacing: 1px;
display: inline-block;

height: auto;
color: white;
padding: 0.5em;
margin-left: 1.5em;
Expand Down Expand Up @@ -253,8 +257,10 @@
line-height: 16px;
text-align: left;

a {
margin: 0 10px 0 10px;
button {
height: 20px;
border-radius: 0px;
color: #e7e7e7;
@media (max-width: $mobile-width) {
margin: 0;
}
Expand Down
4 changes: 2 additions & 2 deletions ui/src/assets/i18n/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -795,8 +795,8 @@
"i18n_print_attachment": "Download the attachment of the exam for printing",
"i18n_print_attachment_reminder": "There is an attachment in the exam. Please remember to print it",
"i18n_examination_date_missing": "Examination dates haven´t been set",
"i18n_student_exam_search_result": "Results for exam search",
"i18n_student_exam_search_result_continues": "exams",
"i18n_student_exam_search_result": "Search found",
"i18n_student_exam_search_result_continues": "results",
"i18n_printout_exams": "Printed exams",
"i18n_exam_new_question": "Add new question",
"i18n_exam_library_new_question": "Add new question to question bank",
Expand Down
Loading

0 comments on commit 3343e09

Please sign in to comment.