From 9c3d2caef8701fd369a0f44a7ad901b255f32461 Mon Sep 17 00:00:00 2001 From: Dani Palou Date: Mon, 29 Apr 2024 10:40:38 +0200 Subject: [PATCH 1/3] MOBILE-4560 question: Fix partially graded answers icon & color --- src/core/features/question/question.scss | 30 ++++++++++++- .../question/services/question-helper.ts | 45 ++++++++++--------- src/theme/theme.dark.scss | 2 + src/theme/theme.light.scss | 2 + 4 files changed, 56 insertions(+), 23 deletions(-) diff --git a/src/core/features/question/question.scss b/src/core/features/question/question.scss index 0a20e3a21..b4f39d6ad 100644 --- a/src/core/features/question/question.scss +++ b/src/core/features/question/question.scss @@ -5,10 +5,31 @@ color: var(--core-question-correct-color); } + .core-question-answer-partiallycorrect { + color: var(--core-question-partial-color); + } + .core-question-answer-incorrect { color: var(--core-question-incorrect-color); } + input, select { + &.core-question-answer-correct { + --background: var(--core-question-correct-color-bg); + --contrast-background: var(--background); + } + + &.core-question-answer-partiallycorrect { + --background: var(--core-question-partial-color-bg); + --contrast-background: var(--background); + } + + &.core-question-answer-incorrect { + --background: var(--core-question-incorrect-color-bg); + --contrast-background: var(--background); + } + } + .core-question-feedback-container ::ng-deep { --color: var(--core-question-feedback-color); --background: var(--core-question-feedback-background-color); @@ -45,6 +66,7 @@ .core-question-feedback-inline { display: inline-block; + @include margin-horizontal(4px, 0px); } .core-question-feedback-padding { @@ -60,11 +82,15 @@ color: var(--core-question-correct-color); } .core-question-partiallycorrect { - background-color: var(--core-question-state-partial-color); + --background: var(--core-question-partial-color-bg); + background-color: var(--core-question-partial-color-bg); + color: var(--core-question-partial-color); } .core-question-notanswered, .core-question-incorrect { - background-color: var(--core-question-state-incorrect-color); + --background: var(--core-question-incorrect-color-bg); + background-color: var(--core-question-incorrect-color-bg); + color: var(--core-question-incorrect-color); } .core-question-answersaved, .core-question-requiresgrading { diff --git a/src/core/features/question/services/question-helper.ts b/src/core/features/question/services/question-helper.ts index ec9b983d5..28ab7e1fc 100644 --- a/src/core/features/question/services/question-helper.ts +++ b/src/core/features/question/services/question-helper.ts @@ -731,6 +731,7 @@ export class CoreQuestionHelperProvider { CoreDomUtils.replaceClassesInElement(element, { correct: 'core-question-answer-correct', incorrect: 'core-question-answer-incorrect', + partiallycorrect: 'core-question-answer-partiallycorrect', }); } @@ -799,38 +800,40 @@ export class CoreQuestionHelperProvider { treatCorrectnessIcons(element: HTMLElement): void { const icons = Array.from(element.querySelectorAll('img.icon, img.questioncorrectnessicon, i.icon')); icons.forEach((icon) => { - let correct = false; + let iconName: string | undefined; + let color: string | undefined; if ('src' in icon) { if ((icon as HTMLImageElement).src.indexOf('correct') >= 0) { - correct = true; - } else if ((icon as HTMLImageElement).src.indexOf('incorrect') < 0 ) { - return; + iconName = 'check'; + color = 'success'; + } else if ((icon as HTMLImageElement).src.indexOf('incorrect') >= 0 ) { + iconName = 'xmark'; + color = 'danger'; } } else { - const classList = icon.classList.toString(); - if (classList.indexOf('fa-check') >= 0) { - correct = true; - } else if (classList.indexOf('fa-xmark') < 0 && classList.indexOf('fa-remove') < 0) { - return; + if (icon.classList.contains('fa-check-square')) { + iconName = 'square-check'; + color = 'warning'; + } else if (icon.classList.contains('fa-check')) { + iconName = 'check'; + color = 'success'; + } else if (icon.classList.contains('fa-xmark') || icon.classList.contains('fa-remove')) { + iconName = 'xmark'; + color = 'danger'; } } + if (!iconName) { + return; + } + // Replace the icon with the font version. const newIcon: HTMLIonIconElement = document.createElement('ion-icon'); - if (correct) { - const iconName = 'check'; - newIcon.setAttribute('name', `fas-${iconName}`); - newIcon.setAttribute('src', CoreIcons.getIconSrc('font-awesome', 'solid', iconName)); - newIcon.className = 'core-correct-icon ion-color ion-color-success questioncorrectnessicon'; - } else { - const iconName = 'xmark'; - newIcon.setAttribute('name', `fas-${iconName}`); - newIcon.setAttribute('src', CoreIcons.getIconSrc('font-awesome', 'solid', iconName)); - newIcon.className = 'core-correct-icon ion-color ion-color-danger questioncorrectnessicon'; - } - + newIcon.setAttribute('name', `fas-${iconName}`); + newIcon.setAttribute('src', CoreIcons.getIconSrc('font-awesome', 'solid', iconName)); + newIcon.className = `core-correct-icon ion-color ion-color-${color} questioncorrectnessicon`; newIcon.title = icon.title; newIcon.setAttribute('aria-label', icon.title); icon.parentNode?.replaceChild(newIcon, icon); diff --git a/src/theme/theme.dark.scss b/src/theme/theme.dark.scss index eb4b3641b..07eb188d9 100644 --- a/src/theme/theme.dark.scss +++ b/src/theme/theme.dark.scss @@ -135,6 +135,8 @@ html.dark { --core-question-correct-color-bg: var(--success-shade); --core-question-incorrect-color: var(--danger); --core-question-incorrect-color-bg: var(--danger-shade); + --core-question-partial-color: var(--warning-tint); + --core-question-partial-color-bg: var(--warning-shade); --core-question-feedback-color: var(--warning-tint); --core-question-feedback-color-bg: var(--warning-shade); --core-question-warning-color: var(--danger); diff --git a/src/theme/theme.light.scss b/src/theme/theme.light.scss index c4982111d..057b4d47a 100644 --- a/src/theme/theme.light.scss +++ b/src/theme/theme.light.scss @@ -171,6 +171,8 @@ html { --core-question-correct-color-bg: var(--success-tint); --core-question-incorrect-color: var(--danger); --core-question-incorrect-color-bg: var(--danger-tint); + --core-question-partial-color: var(--warning-shade); + --core-question-partial-color-bg: var(--warning-tint); --core-question-feedback-color: var(--warning-shade); --core-question-feedback-color-bg: var(--warning-tint); --core-question-warning-color: var(--danger); From 1b154a4fb6ca5119d080c62b5f9dd3d75a58e232 Mon Sep 17 00:00:00 2001 From: Dani Palou Date: Mon, 29 Apr 2024 10:41:59 +0200 Subject: [PATCH 2/3] MOBILE-4560 question: Delete unused CSS variables --- src/theme/theme.dark.scss | 5 ----- src/theme/theme.light.scss | 5 ----- 2 files changed, 10 deletions(-) diff --git a/src/theme/theme.dark.scss b/src/theme/theme.dark.scss index 07eb188d9..95d463e6e 100644 --- a/src/theme/theme.dark.scss +++ b/src/theme/theme.dark.scss @@ -142,11 +142,6 @@ html.dark { --core-question-warning-color: var(--danger); --core-question-saved-color-bg: var(--gray-500); - --core-question-state-correct-color: var(--success-shade); - --core-question-state-partial-color: var(--warning-shade); - --core-question-state-partial-text: var(--warning); - --core-question-state-incorrect-color: var(--danger-shade); - --core-question-feedback-color: var(--warning-tint); --core-question-feedback-background-color: var(--warning-shade); diff --git a/src/theme/theme.light.scss b/src/theme/theme.light.scss index 057b4d47a..4a0a03940 100644 --- a/src/theme/theme.light.scss +++ b/src/theme/theme.light.scss @@ -178,11 +178,6 @@ html { --core-question-warning-color: var(--danger); --core-question-saved-color-bg: var(--gray-200); - --core-question-state-correct-color: var(--success-tint); - --core-question-state-partial-color: var(--warning-tint); - --core-question-state-partial-text: var(--warning); - --core-question-state-incorrect-color: var(--danger-tint); - --core-question-feedback-color: var(--warning-shade); --core-question-feedback-background-color: var(--warning-tint); From 1b71f69cfe3a3e23f8bf959a20e278084ecf1b82 Mon Sep 17 00:00:00 2001 From: Dani Palou Date: Tue, 30 Apr 2024 15:53:36 +0200 Subject: [PATCH 3/3] MOBILE-4560 colors: Use CoreIonicColorNames in missing places --- .../competency/classes/competency-plans-source.ts | 7 ++++--- .../mod/assign/components/submission/submission.ts | 3 ++- .../features/question/services/question-helper.ts | 11 ++++++----- 3 files changed, 12 insertions(+), 9 deletions(-) diff --git a/src/addons/competency/classes/competency-plans-source.ts b/src/addons/competency/classes/competency-plans-source.ts index 471db5ba5..53b7f3c09 100644 --- a/src/addons/competency/classes/competency-plans-source.ts +++ b/src/addons/competency/classes/competency-plans-source.ts @@ -17,6 +17,7 @@ import { CoreRoutedItemsManagerSource } from '@classes/items-management/routed-i import { ADDON_COMPETENCY_COMPETENCIES_PAGE } from '../competency.module'; import { AddonCompetency, AddonCompetencyPlan, AddonCompetencyProvider } from '../services/competency'; import { AddonCompetencyHelper } from '../services/competency-helper'; +import { CoreIonicColorNames } from '@singletons/colors'; /** * Provides a collection of learning plans. @@ -73,13 +74,13 @@ export class AddonCompetencyPlansSource extends CoreRoutedItemsManagerSource= 0) { iconName = 'check'; - color = 'success'; + color = CoreIonicColorNames.SUCCESS; } else if ((icon as HTMLImageElement).src.indexOf('incorrect') >= 0 ) { iconName = 'xmark'; - color = 'danger'; + color = CoreIonicColorNames.DANGER; } } else { if (icon.classList.contains('fa-check-square')) { iconName = 'square-check'; - color = 'warning'; + color = CoreIonicColorNames.WARNING; } else if (icon.classList.contains('fa-check')) { iconName = 'check'; - color = 'success'; + color = CoreIonicColorNames.SUCCESS; } else if (icon.classList.contains('fa-xmark') || icon.classList.contains('fa-remove')) { iconName = 'xmark'; - color = 'danger'; + color = CoreIonicColorNames.DANGER; } }