EVOgeek
/
Vmeda.Online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MOBILE-3958 grades: Display icon and color in grades

main
Dani Palou 2022-02-07 12:52:43 +01:00
parent 260ef4d47e
commit 21a7ec66a2
5 changed files with 42 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
scripts/langindex.json
View File

@ -1734,6 +1734,7 @@
"core.grades.calculatedgrade": "grades",
"core.grades.category": "grades",
"core.grades.contributiontocoursetotal": "grades",
"core.grades.fail": "grades",
"core.grades.feedback": "grades",
"core.grades.grade": "grades",
"core.grades.gradeitem": "grades",
@ -1744,6 +1745,7 @@
"core.grades.nogradesreturned": "grades",
"core.grades.nooutcome": "grades",
"core.grades.outcome": "grades",
"core.grades.pass": "grades",
"core.grades.percentage": "grades",
"core.grades.range": "grades",
"core.grades.rank": "grades",

2
src/core/features/grades/lang.json
View File

@ -6,6 +6,7 @@
"calculatedgrade": "Calculated grade",
"category": "Category",
"contributiontocoursetotal": "Contribution to course total",
"fail": "Fail",
"feedback": "Feedback",
"grade": "Grade",
"gradeitem": "Grade item",
@ -16,6 +17,7 @@
"nogradesreturned": "No grades returned",
"nooutcome": "No outcome",
"outcome": "Outcome",
"pass": "Pass",
"percentage": "Percentage",
"range": "Range",
"rank": "Rank",

10
src/core/features/grades/pages/course/course.html
View File

@ -49,8 +49,8 @@
<span [innerHTML]="row.gradeitem"></span>
</th>
<ng-container *ngFor="let column of columns">
<td *ngIf="column.name !== 'gradeitem' && column.name !== 'feedback' && row[column.name] != undefined"
[class]="'ion-text-start core-grades-table-' + column.name"
<td *ngIf="column.name !== 'gradeitem' && column.name !== 'feedback' && column.name !== 'grade' &&
row[column.name] != undefined" [class]="'ion-text-start core-grades-table-' + column.name"
[class.ion-hide-md-down]="column.hiddenPhone" [innerHTML]="row[column.name]">
</td>
<td *ngIf="column.name === 'feedback' && row.feedback !== undefined"
@ -59,6 +59,12 @@
[contextInstanceId]="courseId">
</core-format-text>
</td>
<td *ngIf="column.name === 'grade'" [class.ion-hide-md-down]="column.hiddenPhone"
class="ion-text-start core-grades-table-grade {{row.gradeClass}}">
<ion-icon *ngIf="row.gradeIcon" [name]="row.gradeIcon" [attr.aria-label]="row.gradeIconAlt">
</ion-icon>
<span [innerHTML]="row[column.name]"></span>
</td>
</ng-container>
</ng-container>
</tr>

18
src/core/features/grades/pages/course/course.scss
View File

@ -42,7 +42,7 @@
}
th, td {
@include padding(10px, 10px, 10px, null);
@include padding(8px, 8px, 8px, null);
vertical-align: top;
white-space: normal;
text-align: start;
@ -55,7 +55,7 @@
}
thead #gradeitem {
@include padding(null, null, null, 23px);
@include padding(null, null, null, 24px);
}
tbody th {
@ -63,11 +63,11 @@
}
tbody #gradeitem {
@include padding(null, null, null, 5px);
@include padding(null, null, null, 4px);
}
.core-grades-table-gradeitem {
@include padding(null, null, null, 5px);
@include padding(null, null, null, 4px);
font-weight: bold;
&.column-itemname {
@ -90,7 +90,7 @@
}
span {
@include margin(null, null, null, 5px);
@include margin(null, null, null, 4px);
}
.expandable-status-icon {
@ -101,7 +101,7 @@
}
.core-grades-table-feedback {
@include padding(null, null, null, 5px);
@include padding(null, null, null, 4px);
.no-overflow {
overflow: auto;
@ -109,6 +109,12 @@
}
.core-grades-table-grade {
ion-icon {
@include padding(null, 4px, null, null);
}
}
.dimmed_text,
.hidden {
opacity: .7;

19
src/core/features/grades/services/grades-helper.ts
View File

@ -108,7 +108,7 @@ export class CoreGradesHelperProvider {
let content = String(column.content);
if (name == 'itemname') {
if (name === 'itemname') {
const itemNameColumn = <CoreGradesTableItemNameColumn> column;
row.id = parseInt(itemNameColumn.id.split('_')[1], 10);
@ -123,6 +123,20 @@ export class CoreGradesHelperProvider {
content = content.replace(/<\/span>/gi, '\n');
content = CoreTextUtils.cleanTags(content);
name = 'gradeitem';
} else if (name === 'grade') {
// Add the pass/fail class if present.
row.gradeClass = column.class.includes('gradepass') ? 'text-success' :
(column.class.includes('gradefail') ? 'text-danger' : '');
if (content.includes('fa-check')) {
row.gradeIcon = 'fas-check';
row.gradeIconAlt = Translate.instant('core.grades.pass');
content = CoreTextUtils.cleanTags(content);
} else if (content.includes('fa-times')) {
row.gradeIcon = 'fas-times';
row.gradeIconAlt = Translate.instant('core.grades.fail');
content = CoreTextUtils.cleanTags(content);
}
} else {
content = CoreTextUtils.replaceNewLines(content, '<br>');
}
@ -721,6 +735,9 @@ export type CoreGradesFormattedTableRow = CoreGradesFormattedRowCommonData & {
ariaLabel?: string;
expandable?: boolean;
expanded?: boolean;
gradeClass?: string;
gradeIcon?: string;
gradeIconAlt?: string;
};
export type CoreGradesFormattedTableColumn = {