Skip to content

Commit

Permalink
MDL-83068 theme: Update grade icons
Browse files Browse the repository at this point in the history 
The fa-check-double icon for correct/incorrect/partial grades were updated
in MDL-82497. However, the UX team has decided to replace these icons with
the following:

 - core:i/grade_correct : fa-check-double --> fa-regular fa-circle-check
 - core:i/grade_incorrect : fa-xmark --> fa-regular fa-circle-xmark
 - core:i/grade_partiallycorrect : fa-check --> fa-circle-half-stroke

These changes should be consistent with the Navigation quiz block too.
  • Loading branch information
@sarjona
sarjona committed Sep 10, 2024
1 parent 1938c43 commit 32be3f9
Show file tree
Hide file tree
Showing 8 changed files with 94 additions and 22 deletions.
2 changes: 1 addition & 1 deletion admin/tool/componentlibrary/hugo/site/data/fontawesomeicons.json
View file

Large diffs are not rendered by default.

6 changes: 3 additions & 3 deletions lib/classes/output/icon_system_fontawesome.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -250,9 +250,9 @@ public function get_core_icon_map() {
'core:i/filter' => 'fa-filter',
'core:i/flagged' => 'fa-flag',
'core:i/folder' => 'fa-folder',
'core:i/grade_correct' => 'fa-check-double text-success',
'core:i/grade_incorrect' => 'fa-xmark text-danger',
'core:i/grade_partiallycorrect' => 'fa-check text-warning',
'core:i/grade_correct' => 'fa-regular fa-circle-check text-success',
'core:i/grade_incorrect' => 'fa-regular fa-circle-xmark text-danger',
'core:i/grade_partiallycorrect' => 'fa-circle-half-stroke text-warning',
'core:i/grades' => 'fa-clipboard-check',
'core:i/grading' => 'fa-wand-magic-sparkles',
'core:i/gradingnotifications' => 'fa-regular fa-bell',
Expand Down
2 changes: 1 addition & 1 deletion pix/i/grade_correct.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion pix/i/grade_incorrect.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion pix/i/grade_partiallycorrect.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
38 changes: 33 additions & 5 deletions theme/boost/scss/moodle/modules.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1275,6 +1275,33 @@ img.userpicture {
border-radius: 0 0 3px 3px;
}

.qnbutton.correct .thispageholder {
border-color: $success;
}

.qnbutton.incorrect .thispageholder {
border-color: $danger;
}

.qnbutton.partiallycorrect .thispageholder {
border-color: $warning;
}

.qnbutton.correct,
.qnbutton.correct .trafficlight {
background-color: #dff4d8; /* light green */
}

.qnbutton.incorrect,
.qnbutton.incorrect .trafficlight {
background-color: #fdd; /* light red */
}

.qnbutton.partiallycorrect,
.qnbutton.partiallycorrect .trafficlight {
background-color: #fcefdc; /* light yellow */
}

.qnbutton.notyetanswered .trafficlight,
.qnbutton.invalidanswer .trafficlight {
background-color: $card-bg;
Expand All @@ -1285,8 +1312,8 @@ img.userpicture {
}

.qnbutton.correct .trafficlight {
background-image: url([[pix:theme|mod/quiz/checkmark]]);
background-color: $success;
background-image: url([[pix:core|i/grade_correct]]);
color: $success;
}

.qnbutton.blocked .trafficlight {
Expand All @@ -1296,12 +1323,13 @@ img.userpicture {

.qnbutton.notanswered .trafficlight,
.qnbutton.incorrect .trafficlight {
background-color: $danger;
background-image: url([[pix:core|i/grade_incorrect]]);
color: $danger;
}

.qnbutton.partiallycorrect .trafficlight {
background-image: url([[pix:theme|mod/quiz/whitecircle]]);
background-color: $warning;
background-image: url([[pix:core|i/grade_partiallycorrect]]);
color: $warning;
}

.qnbutton.complete .trafficlight,
Expand Down
32 changes: 27 additions & 5 deletions theme/boost/style/moodle.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34668,6 +34668,27 @@ img.userpicture {
margin-top: 20px;
border-radius: 0 0 3px 3px;
}
.path-mod-quiz #mod_quiz_navblock .qnbutton.correct .thispageholder {
border-color: #357a32;
}
.path-mod-quiz #mod_quiz_navblock .qnbutton.incorrect .thispageholder {
border-color: #ca3120;
}
.path-mod-quiz #mod_quiz_navblock .qnbutton.partiallycorrect .thispageholder {
border-color: #f0ad4e;
}
.path-mod-quiz #mod_quiz_navblock .qnbutton.correct,
.path-mod-quiz #mod_quiz_navblock .qnbutton.correct .trafficlight {
background-color: #dff4d8; /* light green */
}
.path-mod-quiz #mod_quiz_navblock .qnbutton.incorrect,
.path-mod-quiz #mod_quiz_navblock .qnbutton.incorrect .trafficlight {
background-color: #fdd; /* light red */
}
.path-mod-quiz #mod_quiz_navblock .qnbutton.partiallycorrect,
.path-mod-quiz #mod_quiz_navblock .qnbutton.partiallycorrect .trafficlight {
background-color: #fcefdc; /* light yellow */
}
.path-mod-quiz #mod_quiz_navblock .qnbutton.notyetanswered .trafficlight,
.path-mod-quiz #mod_quiz_navblock .qnbutton.invalidanswer .trafficlight {
background-color: #fff;
Expand All @@ -34676,20 +34697,21 @@ img.userpicture {
background-image: url([[pix:theme|mod/quiz/warningtriangle]]);
}
.path-mod-quiz #mod_quiz_navblock .qnbutton.correct .trafficlight {
background-image: url([[pix:theme|mod/quiz/checkmark]]);
background-color: #357a32;
background-image: url([[pix:core|i/grade_correct]]);
color: #357a32;
}
.path-mod-quiz #mod_quiz_navblock .qnbutton.blocked .trafficlight {
background-image: url([[pix:core|t/locked]]);
background-color: #e9ecef;
}
.path-mod-quiz #mod_quiz_navblock .qnbutton.notanswered .trafficlight,
.path-mod-quiz #mod_quiz_navblock .qnbutton.incorrect .trafficlight {
background-color: #ca3120;
background-image: url([[pix:core|i/grade_incorrect]]);
color: #ca3120;
}
.path-mod-quiz #mod_quiz_navblock .qnbutton.partiallycorrect .trafficlight {
background-image: url([[pix:theme|mod/quiz/whitecircle]]);
background-color: #f0ad4e;
background-image: url([[pix:core|i/grade_partiallycorrect]]);
color: #f0ad4e;
}
.path-mod-quiz #mod_quiz_navblock .qnbutton.complete .trafficlight,
.path-mod-quiz #mod_quiz_navblock .qnbutton.answersaved .trafficlight,
Expand Down
32 changes: 27 additions & 5 deletions theme/classic/style/moodle.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34668,6 +34668,27 @@ img.userpicture {
margin-top: 20px;
border-radius: 0 0 3px 3px;
}
.path-mod-quiz #mod_quiz_navblock .qnbutton.correct .thispageholder {
border-color: #357a32;
}
.path-mod-quiz #mod_quiz_navblock .qnbutton.incorrect .thispageholder {
border-color: #ca3120;
}
.path-mod-quiz #mod_quiz_navblock .qnbutton.partiallycorrect .thispageholder {
border-color: #f0ad4e;
}
.path-mod-quiz #mod_quiz_navblock .qnbutton.correct,
.path-mod-quiz #mod_quiz_navblock .qnbutton.correct .trafficlight {
background-color: #dff4d8; /* light green */
}
.path-mod-quiz #mod_quiz_navblock .qnbutton.incorrect,
.path-mod-quiz #mod_quiz_navblock .qnbutton.incorrect .trafficlight {
background-color: #fdd; /* light red */
}
.path-mod-quiz #mod_quiz_navblock .qnbutton.partiallycorrect,
.path-mod-quiz #mod_quiz_navblock .qnbutton.partiallycorrect .trafficlight {
background-color: #fcefdc; /* light yellow */
}
.path-mod-quiz #mod_quiz_navblock .qnbutton.notyetanswered .trafficlight,
.path-mod-quiz #mod_quiz_navblock .qnbutton.invalidanswer .trafficlight {
background-color: #fff;
Expand All @@ -34676,20 +34697,21 @@ img.userpicture {
background-image: url([[pix:theme|mod/quiz/warningtriangle]]);
}
.path-mod-quiz #mod_quiz_navblock .qnbutton.correct .trafficlight {
background-image: url([[pix:theme|mod/quiz/checkmark]]);
background-color: #357a32;
background-image: url([[pix:core|i/grade_correct]]);
color: #357a32;
}
.path-mod-quiz #mod_quiz_navblock .qnbutton.blocked .trafficlight {
background-image: url([[pix:core|t/locked]]);
background-color: #e9ecef;
}
.path-mod-quiz #mod_quiz_navblock .qnbutton.notanswered .trafficlight,
.path-mod-quiz #mod_quiz_navblock .qnbutton.incorrect .trafficlight {
background-color: #ca3120;
background-image: url([[pix:core|i/grade_incorrect]]);
color: #ca3120;
}
.path-mod-quiz #mod_quiz_navblock .qnbutton.partiallycorrect .trafficlight {
background-image: url([[pix:theme|mod/quiz/whitecircle]]);
background-color: #f0ad4e;
background-image: url([[pix:core|i/grade_partiallycorrect]]);
color: #f0ad4e;
}
.path-mod-quiz #mod_quiz_navblock .qnbutton.complete .trafficlight,
.path-mod-quiz #mod_quiz_navblock .qnbutton.answersaved .trafficlight,
Expand Down

0 comments on commit 32be3f9

Please sign in to comment.