MOBILE-3063 reading-mode: Add reading mode to glossary entries
Pau Ferrer Ocaña
parent
a3c16af58d
commit
e6733bbd65
|
|
@ -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,72 +24,77 @@
|
|||
<ion-label>{{ 'core.hasdatatosync' | translate: { $a: 'addon.mod_glossary.entry' | translate } }}</ion-label>
|
||||
</ion-item>
|
||||
</ion-card>
|
||||
<ion-item class="ion-text-wrap" *ngIf="showAuthor">
|
||||
<core-user-avatar [user]="entry" slot="start" />
|
||||
<ion-label>
|
||||
<h2>
|
||||
<core-format-text [text]="entry.concept" contextLevel="module" [contextInstanceId]="componentId"
|
||||
[courseId]="courseId" />
|
||||
</h2>
|
||||
<p *ngIf="onlineEntry">{{ onlineEntry.userfullname }}</p>
|
||||
</ion-label>
|
||||
<ion-note slot="end" *ngIf="showDate && onlineEntry">{{ onlineEntry.timemodified | coreDateDayOrTime }}</ion-note>
|
||||
</ion-item>
|
||||
<ion-item class="ion-text-wrap" *ngIf="!showAuthor">
|
||||
<ion-label>
|
||||
<p class="item-heading">
|
||||
<core-format-text [text]="entry.concept" contextLevel="module" [contextInstanceId]="componentId" />
|
||||
</p>
|
||||
</ion-label>
|
||||
<ion-note slot="end" *ngIf="showDate && onlineEntry">{{ onlineEntry.timemodified | coreDateDayOrTime }}</ion-note>
|
||||
</ion-item>
|
||||
<ion-item class="ion-text-wrap">
|
||||
<ion-label>
|
||||
<core-format-text [component]="component" [componentId]="componentId" [text]="entry.definition" 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" />
|
||||
</div>
|
||||
<div *ngIf="offlineEntry && offlineEntry.attachments">
|
||||
<core-file *ngFor="let file of offlineEntry.attachments.online" [file]="file" [component]="component"
|
||||
[componentId]="componentId" />
|
||||
</div>
|
||||
<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-label>
|
||||
<div slot="start">{{ 'core.tag.tags' | translate }}:</div>
|
||||
<core-tag-list [tags]="onlineEntry.tags" />
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item *ngIf="canDelete || canEdit">
|
||||
<div slot="end">
|
||||
<ion-button *ngIf="canDelete" fill="clear" color="danger" (click)="deleteEntry()"
|
||||
[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-icon slot="icon-only" name="fas-pen" aria-hidden="true" />
|
||||
</ion-button>
|
||||
<div core-reading-mode>
|
||||
<ion-item class="ion-text-wrap" *ngIf="showAuthor">
|
||||
<core-user-avatar [user]="entry" slot="start" />
|
||||
<ion-label>
|
||||
<h2>
|
||||
<core-format-text [text]="entry.concept" contextLevel="module" [contextInstanceId]="componentId"
|
||||
[courseId]="courseId" />
|
||||
</h2>
|
||||
<p *ngIf="onlineEntry">{{ onlineEntry.userfullname }}</p>
|
||||
</ion-label>
|
||||
<ion-note slot="end" *ngIf="showDate && onlineEntry">{{ onlineEntry.timemodified | coreDateDayOrTime }}</ion-note>
|
||||
</ion-item>
|
||||
<ion-item class="ion-text-wrap" *ngIf="!showAuthor">
|
||||
<ion-label>
|
||||
<p class="item-heading">
|
||||
<core-format-text [text]="entry.concept" contextLevel="module" [contextInstanceId]="componentId" />
|
||||
</p>
|
||||
</ion-label>
|
||||
<ion-note slot="end" *ngIf="showDate && onlineEntry">{{ onlineEntry.timemodified | coreDateDayOrTime }}</ion-note>
|
||||
</ion-item>
|
||||
<ion-item class="ion-text-wrap">
|
||||
<ion-label>
|
||||
<core-format-text [component]="component" [componentId]="componentId" [text]="entry.definition"
|
||||
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" />
|
||||
</div>
|
||||
</ion-item>
|
||||
<ion-item class="ion-text-wrap" *ngIf="onlineEntry && !onlineEntry.approved">
|
||||
<ion-label>
|
||||
<p><em>{{ 'addon.mod_glossary.entrypendingapproval' | translate }}</em></p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<core-comments *ngIf="glossary && glossary.allowcomments && onlineEntry && onlineEntry.id > 0 && commentsEnabled"
|
||||
contextLevel="module" [instanceId]="glossary.coursemodule" component="mod_glossary" [itemId]="onlineEntry.id"
|
||||
area="glossary_entry" [courseId]="glossary.course" [showItem]="true" />
|
||||
<core-rating-rate *ngIf="glossary && ratingInfo && onlineEntry" [ratingInfo]="ratingInfo" contextLevel="module"
|
||||
[instanceId]="glossary.coursemodule" [itemId]="onlineEntry.id" [itemSetId]="0" [courseId]="glossary.course"
|
||||
[aggregateMethod]="glossary.assessed" [scaleId]="glossary.scale" [userId]="entry.userid" (onUpdate)="ratingUpdated()" />
|
||||
<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 *ngIf="offlineEntry && offlineEntry.attachments">
|
||||
<core-file *ngFor="let file of offlineEntry.attachments.online" [file]="file" [component]="component"
|
||||
[componentId]="componentId" />
|
||||
</div>
|
||||
<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-label>
|
||||
<div slot="start">{{ 'core.tag.tags' | translate }}:</div>
|
||||
<core-tag-list [tags]="onlineEntry.tags" />
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item *ngIf="canDelete || canEdit">
|
||||
<div slot="end">
|
||||
<ion-button *ngIf="canDelete" fill="clear" color="danger" (click)="deleteEntry()"
|
||||
[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-icon slot="icon-only" name="fas-pen" aria-hidden="true" />
|
||||
</ion-button>
|
||||
</div>
|
||||
</ion-item>
|
||||
<ion-item class="ion-text-wrap" *ngIf="onlineEntry && !onlineEntry.approved">
|
||||
<ion-label>
|
||||
<p><em>{{ 'addon.mod_glossary.entrypendingapproval' | translate }}</em></p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<core-comments *ngIf="glossary && glossary.allowcomments && onlineEntry && onlineEntry.id > 0 && commentsEnabled"
|
||||
contextLevel="module" [instanceId]="glossary.coursemodule" component="mod_glossary" [itemId]="onlineEntry.id"
|
||||
area="glossary_entry" [courseId]="glossary.course" [showItem]="true" />
|
||||
<core-rating-rate *ngIf="glossary && ratingInfo && onlineEntry" [ratingInfo]="ratingInfo" contextLevel="module"
|
||||
[instanceId]="glossary.coursemodule" [itemId]="onlineEntry.id" [itemSetId]="0" [courseId]="glossary.course"
|
||||
[aggregateMethod]="glossary.assessed" [scaleId]="glossary.scale" [userId]="entry.userid" (onUpdate)="ratingUpdated()" />
|
||||
<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">
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue