MOBILE-3651 quiz: Fix question styles and icons

src/addons/qtype/calculated/component/addon-qtype-calculated.html

@@ -15,6 +15,7 @@
     <ion-item *ngIf="calcQuestion.input" class="ion-text-wrap core-{{calcQuestion.input.correctIconColor}}-item">
         <ion-label position="stacked">{{ 'addon.mod_quiz.answercolon' | translate }}</ion-label>
 
+        <div class="flex-row">
             <!-- Display unit select before the answer input. -->
             <ng-container *ngIf="calcQuestion.select && calcQuestion.selectFirst">
                 <ng-container *ngTemplateOutlet="selectUnits"></ng-container>
@@ -23,16 +24,15 @@
             <!-- Input to enter the answer. -->
             <ion-input type="text" [attr.name]="calcQuestion.input.name"
                 [placeholder]="calcQuestion.input.readOnly ? '' : 'core.question.answer' | translate"
-                [value]="calcQuestion.input.value" [disabled]="calcQuestion.input.readOnly" autocorrect="off"
+                [value]="calcQuestion.input.value" [disabled]="calcQuestion.input.readOnly" autocorrect="off">
-                [slot]="calcQuestion.select && calcQuestion.selectFirst ? 'end' : 'start'">
             </ion-input>
 
             <!-- Display unit select after the answer input. -->
             <ng-container *ngIf="calcQuestion.select && !calcQuestion.selectFirst">
                 <ng-container *ngTemplateOutlet="selectUnits"></ng-container>
             </ng-container>
-
+        </div>
-        <ion-icon *ngIf="calcQuestion.input.correctIcon" class="core-correct-icon" slot="end"
+        <ion-icon *ngIf="calcQuestion.input.correctIcon" class="core-correct-icon ion-align-self-center" slot="end"
             [name]="calcQuestion.input.correctIcon" [color]="[calcQuestion.input.correctIconColor]">
         </ion-icon>
     </ion-item>
@@ -45,7 +45,6 @@
 
 <!-- Template for units entered using a select. -->
 <ng-template #selectUnits>
-    <!-- <ion-col> -->
     <label *ngIf="calcQuestion!.select!.accessibilityLabel" class="accesshide" for="{{calcQuestion!.select!.id}}">
         {{ calcQuestion!.select!.accessibilityLabel }}
     </label>
@@ -56,7 +55,6 @@
             {{option.label}}
         </ion-select-option>
     </ion-select>
-    <!-- </ion-col> -->
 </ng-template>
 
 <!-- Template for units entered using radio buttons. -->

src/core/components/local-file/core-local-file.html

@@ -1,6 +1,8 @@
 <form (ngSubmit)="changeName(newFileName, $event)" #nameForm>
-    <ion-item class="ion-text-wrap item-media" (click)="fileClicked($event)"> <!-- [class.item-input]="editMode" -->
+    <ion-item class="ion-text-wrap item-file" (click)="fileClicked($event)"> <!-- [class.item-input]="editMode" -->
-        <img [src]="fileIcon" alt="{{fileExtension}}" role="presentation" slot="start" />
+        <ion-thumbnail slot="start">
+            <img [src]="fileIcon" alt="{{fileExtension}}" role="presentation" />
+        </ion-thumbnail>
 
         <ion-label>
             <!-- File name and edit button (if editable). -->

src/core/features/editor/components/rich-text-editor/rich-text-editor.scss

@@ -1,3 +1,20 @@
+@import "~theme/globals";
+:host {
+    --placeholder-color: var(--gray-light);
+    --toobar-background: var(--white);
+    --button-color: var(--ion-text-color);
+    --button-active-color: var(--gray);
+}
+
+:host-context(body.dark) {
+    --background: var(--gray-darker);
+    --color: var(--white);
+    --button-color: var(--gray-light);
+    --button-active-color: var(--gray-dark);
+    --placeholder-color: var(--gray);
+    --toobar-background: var(--black);
+}
+
 :host {
     height: 40vh;
     overflow: hidden;
@@ -6,9 +23,7 @@
     width: 100%;
     display: flex;
     flex-direction: column;
-    // @include darkmode() {
+    background: var(--background);
-    //     background-color: $gray-darker;
-    // }
 
     .core-rte-editor-container {
         max-height: calc(100% - 46px);
@@ -22,7 +37,7 @@
         .core-rte-info-message {
             padding: 5px;
             border-top: 1px solid var(--ion-color-secondary);
-            background: white;
+            background: var(--background);
             flex-shrink: 1;
             font-size: 1.4rem;
 
@@ -37,36 +52,30 @@
         margin: 2px;
         width: 100%;
         resize: none;
-        background-color: white;
+        background-color: var(--background);
+        color: var(--color);
         flex-grow: 1;
-        // @include darkmode() {
-        //     background-color: var(--gray-darker);
-        //     color: var(--white);
-        // }
     }
 
     .core-rte-editor {
         flex-grow: 1;
         flex-shrink: 1;
         -webkit-user-select: auto !important;
+        user-select: auto !important;
         word-wrap: break-word;
         overflow-x: hidden;
         overflow-y: auto;
         cursor: text;
         img {
-            // @include padding(null, null, null, 2px);
+            @include padding(null, null, null, 2px);
             max-width: 95%;
             width: auto;
         }
         &:empty:before {
             content: attr(data-placeholder-text);
             display: block;
-            color: var(--gray-light);
+            color: var(--placeholder-color);
             font-weight: bold;
-
-            // @include darkmode() {
-            //     color: $gray;
-            // }
         }
 
         // Make empty elements selectable (to move the cursor).
@@ -80,19 +89,15 @@
         flex-shrink: 1;
         position: relative;
 
-        textarea {
+        ::ng-deep textarea {
             margin: 0 !important;
             padding: 0;
-            height: 100% !important;
-            width: 100% !important;
             resize: none;
             overflow-x: hidden;
             overflow-y: auto;
             position: absolute;
             top: 0;
             bottom: 0;
-            left: 0;
-            right: 0;
         }
     }
 
@@ -102,12 +107,8 @@
         z-index: 1;
         flex-grow: 0;
         flex-shrink: 0;
-        background-color: var(--white);
+        background-color: var(--toobar-background);
-
+        padding-top: 5px;
-        // @include darkmode() {
-        //     background-color: $black;
-        // }
-        // @include padding(5px, null);
         border-top: 1px solid var(--gray);
 
         ion-slides {
@@ -126,26 +127,18 @@
             padding-left: 6px;
             margin: 0 auto;
             font-size: 18px;
-            background-color: var(--white);
+            background-color: var(--toobar-background);
             border-radius: 4px;
-            // @include core-transition(background-color, 200ms);
+            @include core-transition(background-color, 200ms);
-            color: var(--ion-text-color);
+            color: var(--button-color);
             cursor: pointer;
 
-            // @include darkmode() {
-            //     background-color: $black;
-            //     color: $core-dark-text-color;
-            // }
-
             &.toolbar-button-enable {
                 width: 100%;
             }
 
             &:active, &[aria-pressed="true"] {
-                background-color: var(--gray);
+                background-color: var(--button-active-color);
-                // @include darkmode() {
-                //     background-color: $gray-dark;
-                // }
             }
 
             &.toolbar-arrow {
@@ -153,13 +146,10 @@
                 flex-grow: 0;
                 flex-shrink: 0;
                 opacity: 1;
-                // @include core-transition(opacity, 200ms);
+                @include core-transition(opacity, 200ms);
 
                 &:active {
-                    background-color: var(--white);
+                    background-color: var(--toobar-background);
-                    // @include darkmode() {
-                    //     background-color: $black;
-                    // }
                 }
 
                 &.toolbar-arrow-hidden {

src/core/features/question/services/question-helper.ts

@@ -769,23 +769,37 @@ export class CoreQuestionHelperProvider {
      * @param element DOM element.
      */
     treatCorrectnessIcons(element: HTMLElement): void {
-        const icons = <HTMLImageElement[]> Array.from(element.querySelectorAll('img.icon, img.questioncorrectnessicon'));
+        const icons = <HTMLElement[]> Array.from(element.querySelectorAll('img.icon, img.questioncorrectnessicon, i.icon'));
         icons.forEach((icon) => {
-            // Replace the icon with the font version.
+            let correct = false;
-            if (!icon.src) {
+
+            if ('src' in icon) {
+                if ((icon as HTMLImageElement).src.indexOf('correct') >= 0) {
+                    correct = true;
+                } else if ((icon as HTMLImageElement).src.indexOf('incorrect') < 0 ) {
                     return;
                 }
-
-            // @todo: Check the right classes to use.
-            const newIcon: HTMLElement = document.createElement('i');
-
-            if (icon.src.indexOf('incorrect') > -1) {
-                newIcon.className = 'icon fa fa-remove text-danger fa-fw questioncorrectnessicon';
-            } else if (icon.src.indexOf('correct') > -1) {
-                newIcon.className = 'icon fa fa-check text-success fa-fw questioncorrectnessicon';
             } else {
+                const classList = icon.classList.toString();
+                if (classList.indexOf('fa-check') >= 0) {
+                    correct = true;
+                } else if (classList.indexOf('fa-remove') < 0) {
                     return;
                 }
+            }
+
+            // Replace the icon with the font version.
+            const newIcon: HTMLElement = document.createElement('ion-icon');
+
+            if (correct) {
+                newIcon.setAttribute('name', 'fas-check');
+                newIcon.setAttribute('src', 'assets/fonts/font-awesome/solid/check.svg');
+                newIcon.className = 'core-correct-icon ion-color ion-color-success questioncorrectnessicon';
+            } else {
+                newIcon.setAttribute('name', 'fas-times');
+                newIcon.setAttribute('src', 'assets/fonts/font-awesome/solid/times.svg');
+                newIcon.className = 'core-correct-icon ion-color ion-color-danger questioncorrectnessicon';
+            }
 
             newIcon.title = icon.title;
             newIcon.setAttribute('aria-label', icon.title);

src/theme/theme.base.scss

@@ -28,6 +28,11 @@
     text-transform: none;
 }
 
+.flex-row {
+    display: flex;
+    flex-direction: row;
+}
+
 // Correctly inherit ion-text-wrap onto labels.
 ion-item.ion-text-wrap ion-label {
     white-space: normal !important;