MOBILE-3063 reading-mode: Add reading mode to glossary entries

src/addons/mod/glossary/pages/entry/entry.html

@@ -8,6 +8,7 @@
                 <core-format-text [text]="entry.concept" contextLevel="module" [contextInstanceId]="componentId" [courseId]="courseId" />
             </h1>
         </ion-title>
+        <ion-buttons slot="end" />
     </ion-toolbar>
 </ion-header>
 <ion-content [core-swipe-navigation]="entries" class="limited-width">
@@ -23,6 +24,7 @@
                     <ion-label>{{ 'core.hasdatatosync' | translate: { $a: 'addon.mod_glossary.entry' | translate } }}</ion-label>
                 </ion-item>
             </ion-card>
+            <div core-reading-mode>
                 <ion-item class="ion-text-wrap" *ngIf="showAuthor">
                     <core-user-avatar [user]="entry" slot="start" />
                     <ion-label>
@@ -44,12 +46,13 @@
                 </ion-item>
                 <ion-item class="ion-text-wrap">
                     <ion-label>
-                    <core-format-text [component]="component" [componentId]="componentId" [text]="entry.definition" contextLevel="module"
+                        <core-format-text [component]="component" [componentId]="componentId" [text]="entry.definition"
-                        [contextInstanceId]="componentId" [courseId]="courseId" />
+                            contextLevel="module" [contextInstanceId]="componentId" [courseId]="courseId" />
                     </ion-label>
                 </ion-item>
                 <div *ngIf="onlineEntry && onlineEntry.attachment">
-                <core-file *ngFor="let file of onlineEntry.attachments" [file]="file" [component]="component" [componentId]="componentId" />
+                    <core-file *ngFor="let file of onlineEntry.attachments" [file]="file" [component]="component"
+                        [componentId]="componentId" />
                 </div>
                 <div *ngIf="offlineEntry && offlineEntry.attachments">
                     <core-file *ngFor="let file of offlineEntry.attachments.online" [file]="file" [component]="component"
@@ -58,7 +61,8 @@
                 <div *ngIf="offlineEntry && offlineEntryFiles">
                     <core-local-file *ngFor="let file of offlineEntryFiles" [file]="file" />
                 </div>
-            <ion-item class="ion-text-wrap" *ngIf="onlineEntry && tagsEnabled && entry && onlineEntry.tags && onlineEntry.tags.length > 0">
+                <ion-item class="ion-text-wrap"
+                    *ngIf="onlineEntry && tagsEnabled && entry && onlineEntry.tags && onlineEntry.tags.length > 0">
                     <ion-label>
                         <div slot="start">{{ 'core.tag.tags' | translate }}:</div>
                         <core-tag-list [tags]="onlineEntry.tags" />
@@ -70,7 +74,8 @@
                             [ariaLabel]="'addon.mod_glossary.deleteentry' | translate">
                             <ion-icon slot="icon-only" name="fas-trash" aria-hidden="true" />
                         </ion-button>
-                    <ion-button *ngIf="canEdit" fill="clear" (click)="editEntry()" [ariaLabel]="'addon.mod_glossary.editentry' | translate">
+                        <ion-button *ngIf="canEdit" fill="clear" (click)="editEntry()"
+                            [ariaLabel]="'addon.mod_glossary.editentry' | translate">
                             <ion-icon slot="icon-only" name="fas-pen" aria-hidden="true" />
                         </ion-button>
                     </div>
@@ -89,6 +94,7 @@
                 <core-rating-aggregate *ngIf="glossary && ratingInfo && onlineEntry" [ratingInfo]="ratingInfo" contextLevel="module"
                     [instanceId]="glossary.coursemodule" [itemId]="onlineEntry.id" [courseId]="glossary.course"
                     [aggregateMethod]="glossary.assessed" [scaleId]="glossary.scale" />
+            </div>
         </ng-container>
 
         <ion-card *ngIf="!entry" class="core-warning-card">

src/core/directives/reading-mode.ts

@@ -28,6 +28,7 @@ import { CoreModals } from '@services/modals';
 import { CoreViewer } from '@features/viewer/services/viewer';
 import { CoreDirectivesRegistry } from '@singletons/directives-registry';
 import { CoreCollapsibleHeaderDirective } from './collapsible-header';
+import { CoreLogger } from '@singletons/logger';
 
 /**
  * Directive to add the reading mode to the selected html tag.
@@ -48,6 +49,7 @@ export class CoreReadingModeDirective implements AfterViewInit, OnDestroy {
     protected enabled = false;
     protected contentEl?: HTMLIonContentElement;
     protected header?: CoreCollapsibleHeaderDirective;
+    protected logger = CoreLogger.getInstance('CoreReadingModeDirective');
 
     constructor(
         element: ElementRef,
@@ -72,9 +74,14 @@ export class CoreReadingModeDirective implements AfterViewInit, OnDestroy {
         const page = CoreDom.closest(this.element, '.ion-page');
         this.contentEl = page?.querySelector('ion-content') ?? undefined;
 
-        const toolbar = page?.querySelector('ion-header ion-toolbar ion-buttons[slot="end"]');
+        const buttonsContainer = page?.querySelector<HTMLIonButtonsElement>('ion-header ion-toolbar ion-buttons[slot="end"]');
 
-        if (!toolbar || toolbar.querySelector('.core-text-viewer-button')) {
+        if (!buttonsContainer) {
+            this.logger.warn('The header was not found, or it didn\'t have any ion-buttons on slot end.');
+
+            return;
+        }
+        if (buttonsContainer.querySelector('.core-text-viewer-button')) {
             return;
         }
 
@@ -96,7 +103,7 @@ export class CoreReadingModeDirective implements AfterViewInit, OnDestroy {
         const src = CoreIcons.getIconSrc('font-awesome', 'solid', iconName);
         // Add an ion-icon item to apply the right styles, but the ion-icon component won't be executed.
         button.innerHTML = `<ion-icon name="fas-${iconName}" aria-hidden="true" src="${src}"></ion-icon>`;
-        toolbar.appendChild(button);
+        buttonsContainer.appendChild(button);
 
         button.addEventListener('click', (e: Event) => {
             if (!this.element.innerHTML) {

src/theme/components/reading-mode.scss

@@ -44,8 +44,10 @@ body.core-reading-mode-enabled {
         [core-reading-mode] {
             zoom: var(--reading-mode-zoom, 1);
             &> * {
+                --ion-item-background: var(--reading-mode-background, --ion-background-color);
                 --text-color: var(--reading-mode-text-color, --text-color);
                 --color: var(--reading-mode-text-color, --text-color);
+                --subdued-text-color: var(--text-color);
                 color: var(--text-color);
             }
         }