EVOgeek
/
Vmeda.Online
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MOBILE-3915 course: Adapt course contents to new prototypes

main
Pau Ferrer Ocaña 2022-01-26 23:09:22 +01:00
parent 0af808571c
commit 8d59e03b9d
16 changed files with 150 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/addons/mod/resource/services/handlers/module.ts
View File

@ -95,7 +95,7 @@ export class AddonModResourceModuleHandlerService extends CoreModuleHandlerBase
this.getResourceData(module, courseId, handlerData).then((extra) => { this.getResourceData(module, courseId, handlerData).then((extra) => {
handlerData.extraBadge = extra; handlerData.extraBadge = extra;
handlerData.extraBadgeColor = 'light'; handlerData.extraBadgeColor = '';
return; return;
}).catch(() => { }).catch(() => {

8
src/core/features/course/components/course-index/course-index.ts
View File

@ -14,7 +14,7 @@
import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core'; import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
import { CoreCourseModuleData, CoreCourseSectionWithStatus } from '@features/course/services/course-helper'; import { CoreCourseModuleData, CoreCourseSection } from '@features/course/services/course-helper';
import { import {
CoreCourseModuleCompletionStatus, CoreCourseModuleCompletionStatus,
CoreCourseModuleCompletionTracking, CoreCourseModuleCompletionTracking,
@ -126,7 +126,7 @@ export class CoreCourseCourseIndexComponent implements OnInit {
* @param event Event. * @param event Event.
* @param section Selected section object. * @param section Selected section object.
*/ */
selectSection(event: Event, section: CoreCourseSectionWithStatus): void { selectSection(event: Event, section: CoreCourseSection): void {
if (section.uservisible !== false) { if (section.uservisible !== false) {
ModalController.dismiss({ event, section }); ModalController.dismiss({ event, section });
} }
@ -139,7 +139,7 @@ export class CoreCourseCourseIndexComponent implements OnInit {
* @param section Selected section object. * @param section Selected section object.
* @param module Selected module object. * @param module Selected module object.
*/ */
selectModule(event: Event,section: CoreCourseSectionWithStatus, module: CoreCourseModuleData): void { selectModule(event: Event,section: CoreCourseSection, module: CoreCourseModuleData): void {
if (module.uservisible !== false) { if (module.uservisible !== false) {
ModalController.dismiss({ event, section, module }); ModalController.dismiss({ event, section, module });
} }
@ -147,7 +147,7 @@ export class CoreCourseCourseIndexComponent implements OnInit {
} }
type CourseIndexSection = Omit<CoreCourseSectionWithStatus, 'modules'> & { type CourseIndexSection = Omit<CoreCourseSection, 'modules'> & {
highlighted?: boolean; highlighted?: boolean;
expanded?: boolean; expanded?: boolean;
modules: (CoreCourseModuleData & { modules: (CoreCourseModuleData & {

12
src/core/features/course/components/format/core-course-format.html
View File

@ -74,19 +74,23 @@
<core-format-text [text]="section.name" contextLevel="course" [contextInstanceId]="course.id"> <core-format-text [text]="section.name" contextLevel="course" [contextInstanceId]="course.id">
</core-format-text> </core-format-text>
</h2> </h2>
<p *ngIf="section.visible === 0 || section.availabilityinfo"> <p *ngIf="section.visible === 0 || section.availabilityinfo || (section.highlighted && highlighted)">
<ion-badge color="info" *ngIf="section.visible === 0 && section.uservisible !== false" class="ion-text-wrap"> <ion-badge color="info" *ngIf="section.visible === 0 && section.uservisible !== false" class="ion-text-wrap block">
<ion-icon name="fas-eye-slash" aria-hidden="true"></ion-icon>
{{ 'core.course.hiddenfromstudents' | translate }} {{ 'core.course.hiddenfromstudents' | translate }}
</ion-badge> </ion-badge>
<ion-badge color="info" *ngIf="section.visible === 0 && section.uservisible === false" class="ion-text-wrap"> <ion-badge color="info" *ngIf="section.visible === 0 && section.uservisible === false" class="ion-text-wrap block">
<ion-icon name="fas-eye-slash" aria-hidden="true"></ion-icon>
{{ 'core.notavailable' | translate }} {{ 'core.notavailable' | translate }}
</ion-badge> </ion-badge>
<ion-badge color="info" *ngIf="section.availabilityinfo" class="ion-text-wrap"> <ion-badge color="info" *ngIf="section.availabilityinfo" class="ion-text-wrap block">
<ion-icon name="fas-lock" [attr.aria-label]="'core.restricted' | translate"></ion-icon>
<core-format-text [text]=" section.availabilityinfo" contextLevel="course" [contextInstanceId]="course.id"> <core-format-text [text]=" section.availabilityinfo" contextLevel="course" [contextInstanceId]="course.id">
</core-format-text> </core-format-text>
</ion-badge> </ion-badge>
</p> </p>
</ion-label> </ion-label>
<ion-badge class="ion-text-wrap block" *ngIf="section.highlighted && highlighted" slot="end">{{highlighted}}</ion-badge>
</ion-item-divider> </ion-item-divider>
<ion-item class="ion-text-wrap" *ngIf="section.summary"> <ion-item class="ion-text-wrap" *ngIf="section.summary">

13
src/core/features/course/components/format/format.ts
View File

@ -38,7 +38,6 @@ import {
CoreCourseModuleData, CoreCourseModuleData,
CoreCourseModuleCompletionData, CoreCourseModuleCompletionData,
CoreCourseSection, CoreCourseSection,
CoreCourseSectionWithStatus,
} from '@features/course/services/course-helper'; } from '@features/course/services/course-helper';
import { CoreCourseFormatDelegate } from '@features/course/services/format-delegate'; import { CoreCourseFormatDelegate } from '@features/course/services/format-delegate';
import { CoreEventObserver, CoreEvents } from '@singletons/events'; import { CoreEventObserver, CoreEvents } from '@singletons/events';
@ -47,7 +46,6 @@ import { CoreUtils } from '@services/utils/utils';
import { CoreCourseCourseIndexComponent, CoreCourseIndexSectionWithModule } from '../course-index/course-index'; import { CoreCourseCourseIndexComponent, CoreCourseIndexSectionWithModule } from '../course-index/course-index';
import { CoreBlockHelper } from '@features/block/services/block-helper'; import { CoreBlockHelper } from '@features/block/services/block-helper';
import { CoreNavigator } from '@services/navigator'; import { CoreNavigator } from '@services/navigator';
import { database } from 'faker';
import { CoreCourseModuleDelegate } from '@features/course/services/module-delegate'; import { CoreCourseModuleDelegate } from '@features/course/services/module-delegate';
/** /**
@ -70,7 +68,7 @@ export class CoreCourseFormatComponent implements OnInit, OnChanges, OnDestroy {
static readonly LOAD_MORE_ACTIVITIES = 20; // How many activities should load each time showMoreActivities is called. static readonly LOAD_MORE_ACTIVITIES = 20; // How many activities should load each time showMoreActivities is called.
@Input() course!: CoreCourseAnyCourseData; // The course to render. @Input() course!: CoreCourseAnyCourseData; // The course to render.
@Input() sections: CoreCourseSectionWithStatus[] = []; // List of course sections. @Input() sections: CoreCourseSectionToDisplay[] = []; // List of course sections.
@Input() initialSectionId?: number; // The section to load first (by ID). @Input() initialSectionId?: number; // The section to load first (by ID).
@Input() initialSectionNumber?: number; // The section to load first (by number). @Input() initialSectionNumber?: number; // The section to load first (by number).
@Input() moduleId?: number; // The module ID to scroll to. Must be inside the initial selected section. @Input() moduleId?: number; // The module ID to scroll to. Must be inside the initial selected section.
@ -98,6 +96,7 @@ export class CoreCourseFormatComponent implements OnInit, OnChanges, OnDestroy {
stealthModulesSectionId: number = CoreCourseProvider.STEALTH_MODULES_SECTION_ID; stealthModulesSectionId: number = CoreCourseProvider.STEALTH_MODULES_SECTION_ID;
loaded = false; loaded = false;
progress?: number; progress?: number;
highlighted?: string;
protected selectTabObserver?: CoreEventObserver; protected selectTabObserver?: CoreEventObserver;
protected completionObserver?: CoreEventObserver; protected completionObserver?: CoreEventObserver;
@ -220,6 +219,10 @@ export class CoreCourseFormatComponent implements OnInit, OnChanges, OnDestroy {
// Format has changed or it's the first time, load all the components. // Format has changed or it's the first time, load all the components.
this.lastCourseFormat = this.course.format; this.lastCourseFormat = this.course.format;
this.highlighted = CoreCourseFormatDelegate.getSectionHightlightedName(this.course);
const currentSection = await CoreCourseFormatDelegate.getCurrentSection(this.course, this.sections);
currentSection.highlighted = true;
await Promise.all([ await Promise.all([
this.loadCourseFormatComponent(), this.loadCourseFormatComponent(),
this.loadCourseSummaryComponent(), this.loadCourseSummaryComponent(),
@ -559,3 +562,7 @@ export class CoreCourseFormatComponent implements OnInit, OnChanges, OnDestroy {
} }
} }
type CoreCourseSectionToDisplay = CoreCourseSection & {
highlighted?: boolean;
};

5
src/core/features/course/components/module-completion/core-course-module-completion.html
View File

@ -4,16 +4,19 @@
<ng-container *ngIf="completion.istrackeduser"> <ng-container *ngIf="completion.istrackeduser">
<ng-container *ngFor="let rule of details"> <ng-container *ngFor="let rule of details">
<ion-chip *ngIf="rule.statuscomplete" color="success" role="listitem" [attr.aria-label]="rule.accessibleDescription"> <ion-chip *ngIf="rule.statuscomplete" color="success" role="listitem" [attr.aria-label]="rule.accessibleDescription">
<ion-icon name="fas-check" aria-hidden="true"></ion-icon>
<ion-label><strong>{{ 'core.course.completion_automatic:done' | translate }}</strong> {{ rule.rulevalue.description }} <ion-label><strong>{{ 'core.course.completion_automatic:done' | translate }}</strong> {{ rule.rulevalue.description }}
</ion-label> </ion-label>
</ion-chip> </ion-chip>
<ion-chip *ngIf="rule.statuscompletefail" color="danger" role="listitem" [attr.aria-label]="rule.accessibleDescription"> <ion-chip *ngIf="rule.statuscompletefail" color="danger" role="listitem" [attr.aria-label]="rule.accessibleDescription">
<ion-icon name="fas-times" aria-hidden="true"></ion-icon>
<ion-label><strong>{{ 'core.course.completion_automatic:failed' | translate }}</strong> {{ rule.rulevalue.description }} <ion-label><strong>{{ 'core.course.completion_automatic:failed' | translate }}</strong> {{ rule.rulevalue.description }}
</ion-label> </ion-label>
</ion-chip> </ion-chip>
<ion-chip *ngIf="rule.statusincomplete" color="medium" role="listitem" [attr.aria-label]="rule.accessibleDescription"> <ion-chip *ngIf="rule.statusincomplete" role="listitem" [attr.aria-label]="rule.accessibleDescription">
<ion-icon name="fas-edit" aria-hidden="true"></ion-icon>
<ion-label><strong>{{ 'core.course.completion_automatic:todo' | translate }}</strong> {{ rule.rulevalue.description }} <ion-label><strong>{{ 'core.course.completion_automatic:todo' | translate }}</strong> {{ rule.rulevalue.description }}
</ion-label> </ion-label>
</ion-chip> </ion-chip>

15
src/core/features/course/components/module-info/core-course-module-info.html
View File

@ -19,12 +19,21 @@
</ion-label> </ion-label>
</ion-item> </ion-item>
<ng-content select="[description]"></ng-content> <ng-content select="[description]"></ng-content>
<!-- Activity dates. -->
<ion-item class="ion-text-wrap core-module-dates" lines="none" *ngIf="showCompletion && module.dates?.length"> <ion-item class="ion-text-wrap core-module-dates" lines="none" *ngIf="showCompletion && (module.dates?.length ||
(module.completiondata && module.completiondata.isautomatic && module.uservisible))">
<ion-label> <ion-label>
<!-- Activity dates. -->
<div *ngIf="module.dates?.length" class="core-module-dates">
<p *ngFor="let date of module.dates"> <p *ngFor="let date of module.dates">
<strong>{{ date.label }}</strong> {{ date.timestamp * 1000 | coreFormatDate:'strftimedatetime' }} <ion-icon name="fas-calendar" aria-hidden="true"></ion-icon><strong>{{ date.label }}</strong> {{ date.timestamp * 1000 |
coreFormatDate:'strftimedatetime' }}
</p> </p>
</div>
<!-- Module completion. -->
<core-course-module-completion [completion]="module.completiondata" [moduleName]="module.name" [moduleId]="module.id"
[showCompletionConditions]="true">
</core-course-module-completion>
</ion-label> </ion-label>
</ion-item> </ion-item>
<ng-content></ng-content> <ng-content></ng-content>

5
src/core/features/course/components/module-info/course-module-info.scss
View File

@ -16,4 +16,9 @@
core-mod-icon { core-mod-icon {
align-self: flex-start; align-self: flex-start;
} }
.core-module-dates ion-icon {
@include margin-horizontal(null, 8px);
}
} }

8
src/core/features/course/components/module-manual-completion/core-course-module-manual-completion.html
View File

@ -2,22 +2,20 @@
<ng-container *ngIf="completion.istrackeduser"> <ng-container *ngIf="completion.istrackeduser">
<ng-container *ngIf="completion.state"> <ng-container *ngIf="completion.state">
<ion-button color="success" expand="block" fill="outline" [attr.aria-label]="accessibleDescription" <ion-button color="success" fill="outline" [attr.aria-label]="accessibleDescription" (click)="completionClicked($event)">
(click)="completionClicked($event)">
<ion-icon name="fas-check" slot="start" aria-hidden="true"></ion-icon> <ion-icon name="fas-check" slot="start" aria-hidden="true"></ion-icon>
{{ 'core.course.completion_manual:done' | translate }} {{ 'core.course.completion_manual:done' | translate }}
</ion-button> </ion-button>
</ng-container> </ng-container>
<ng-container *ngIf="!completion.state"> <ng-container *ngIf="!completion.state">
<ion-button color="dark" expand="block" fill="outline" [attr.aria-label]="accessibleDescription" <ion-button color="dark" fill="outline" [attr.aria-label]="accessibleDescription" (click)="completionClicked($event)">
(click)="completionClicked($event)">
{{ 'core.course.completion_manual:markdone' | translate }} {{ 'core.course.completion_manual:markdone' | translate }}
</ion-button> </ion-button>
</ng-container> </ng-container>
</ng-container> </ng-container>
<ng-container *ngIf="!completion.istrackeduser"> <ng-container *ngIf="!completion.istrackeduser">
<ion-button disabled="true" color="dark" expand="block" fill="outline"> <ion-button disabled="true" color="dark" fill="outline">
{{ 'core.course.completion_manual:markdone' | translate }} {{ 'core.course.completion_manual:markdone' | translate }}
</ion-button> </ion-button>
</ng-container> </ng-container>

6
src/core/features/course/components/module-navigation/core-course-module-navigation.html
View File

@ -6,12 +6,10 @@
<ion-icon name="fas-arrow-left" slot="icon-only" aria-hidden="true"></ion-icon> <ion-icon name="fas-arrow-left" slot="icon-only" aria-hidden="true"></ion-icon>
</ion-button> </ion-button>
</ion-col> </ion-col>
<ion-col *ngIf="showCompletion && (currentModule.completiondata && <ion-col *ngIf="showCompletion && (currentModule.completiondata && showManualCompletion && currentModule.uservisible)">
(currentModule.completiondata.isautomatic || showManualCompletion) && currentModule.uservisible)">
<!-- Module completion. --> <!-- Module completion. -->
<core-course-module-completion [completion]="currentModule.completiondata" [moduleName]="currentModule.name" <core-course-module-completion [completion]="currentModule.completiondata" [moduleName]="currentModule.name"
[moduleId]="currentModule.id" [showCompletionConditions]="true" [showManualCompletion]="showManualCompletion" [moduleId]="currentModule.id" [showManualCompletion]="true" (completionChanged)="completionChanged.emit($event)">
(completionChanged)="completionChanged.emit($event)">
</core-course-module-completion> </core-course-module-completion>
</ion-col> </ion-col>
<ion-col size="auto"> <ion-col size="auto">

72
src/core/features/course/components/module/core-course-module.html
View File

@ -18,25 +18,26 @@
[courseId]="module.course" [attr.aria-label]="module.handlerData.a11yTitle + ', ' + modNameTranslated"> [courseId]="module.course" [attr.aria-label]="module.handlerData.a11yTitle + ', ' + modNameTranslated">
</core-format-text> </core-format-text>
</p> </p>
<ion-badge *ngIf="module.handlerData.extraBadge" [color]="module.handlerData.extraBadgeColor" <ion-chip class="completioninfo completion_incomplete" *ngIf="completionStatus === 0">
class="ion-text-wrap ion-text-start"> <ion-label>
<span [innerHTML]="module.handlerData.extraBadge"></span> <ion-icon name="fas-edit" aria-hidden="true"></ion-icon>
</ion-badge> {{ 'core.course.todo' | translate }}
<ion-badge *ngIf="module.visible === 0 && (!section || section.visible)" class="ion-text-wrap"> </ion-label>
{{ 'core.course.hiddenfromstudents' | translate }} </ion-chip>
</ion-badge> <ion-chip class="completioninfo completion_complete" *ngIf="completionStatus === 1 || completionStatus === 2"
<ion-badge *ngIf="module.visible !== 0 && module.isStealth" class="ion-text-wrap"> color="success">
{{ 'core.course.hiddenoncoursepage' | translate }} <ion-icon name="fas-check" aria-hidden="true"></ion-icon>
</ion-badge> <ion-label>{{'core.course.done' | translate }}</ion-label>
<div class="core-module-availabilityinfo" *ngIf="module.availabilityinfo"> </ion-chip>
<ion-badge class="ion-text-wrap">{{ 'core.restricted' | translate }}</ion-badge> <ion-chip class="completioninfo completion_fail" *ngIf="completionStatus === 3" color="danger">
<core-format-text [text]="module.availabilityinfo" contextLevel="module" [contextInstanceId]="module.id" <ion-icon name="fas-times" aria-hidden="true"></ion-icon>
[courseId]="module.course" class="ion-text-wrap"> <ion-label>{{'core.course.failed' | translate }}</ion-label>
</core-format-text> </ion-chip>
</div>
<ion-badge *ngIf="module.completiondata?.offline" color="warning" class="ion-text-wrap"> <ion-chip *ngIf="module.handlerData.extraBadge" [color]="module.handlerData.extraBadgeColor"
{{ 'core.course.manualcompletionnotsynced' | translate }} class="ion-text-wrap ion-text-start" [outline]="true">
</ion-badge> <ion-label><span [innerHTML]="module.handlerData.extraBadge"></span></ion-label>
</ion-chip>
</ion-label> </ion-label>
<!-- Buttons. --> <!-- Buttons. -->
<div slot="end" *ngIf="module.uservisible !== false" class="buttons core-module-buttons" <div slot="end" *ngIf="module.uservisible !== false" class="buttons core-module-buttons"
@ -63,10 +64,15 @@
'item-dimmed': module.visible === 0 || module.uservisible === false 'item-dimmed': module.visible === 0 || module.uservisible === false
}" detail="false"> }" detail="false">
<ion-label> <ion-label>
<core-format-text class="core-module-description" *ngIf="module.description" [maxHeight]="80" [text]="module.description"
contextLevel="module" [contextInstanceId]="module.id" [courseId]="module.course">
</core-format-text>
<!-- Activity dates. --> <!-- Activity dates. -->
<div *ngIf="showActivityDates && module.dates && module.dates.length" class="core-module-dates"> <div *ngIf="showActivityDates && module.dates && module.dates.length" class="core-module-dates">
<p *ngFor="let date of module.dates"> <p *ngFor="let date of module.dates">
<strong>{{ date.label }}</strong> {{ date.timestamp * 1000 | coreFormatDate:'strftimedatetime' }} <ion-icon name="fas-calendar" aria-hidden="true"></ion-icon><strong>{{ date.label }}</strong> {{ date.timestamp *
1000 | coreFormatDate:'strftimedatetime' }}
</p> </p>
</div> </div>
@ -76,10 +82,32 @@
[showManualCompletion]="showManualCompletion" (completionChanged)="completionChanged.emit($event)"> [showManualCompletion]="showManualCompletion" (completionChanged)="completionChanged.emit($event)">
</core-course-module-completion> </core-course-module-completion>
<core-format-text class="core-module-description" *ngIf="module.description" [maxHeight]="80" [text]="module.description" <ion-chip *ngIf="module.completiondata?.offline" color="warning" class="ion-text-wrap block">
contextLevel="module" [contextInstanceId]="module.id" [courseId]="module.course"> <ion-icon name="fas-sync" aria-hidden="true"></ion-icon>
<ion-label>{{ 'core.course.manualcompletionnotsynced' | translate }}</ion-label>
</ion-chip>
<!-- Availability -->
<ion-chip *ngIf="module.visible === 0 && (!section || section.visible)" class="ion-text-wrap block">
<ion-icon name="fas-eye-slash" aria-hidden="true"></ion-icon>
<ion-label>{{ 'core.course.hiddenfromstudents' | translate }}</ion-label>
</ion-chip>
<ion-chip *ngIf="module.visible !== 0 && module.isStealth" class="ion-text-wrap block">
<ion-icon name="fas-eye-slash" aria-hidden="true"></ion-icon>
<ion-label>{{ 'core.course.hiddenoncoursepage' | translate }}</ion-label>
</ion-chip>
<ion-chip class="core-module-availabilityinfo ion-text-wrap block" *ngIf="module.availabilityinfo">
<ion-icon name="fas-lock" [attr.aria-label]="'core.restricted' | translate"></ion-icon>
<ion-label>
<core-format-text [text]="module.availabilityinfo" contextLevel="module" [contextInstanceId]="module.id"
[courseId]="module.course" class="ion-text-wrap">
</core-format-text> </core-format-text>
</ion-label> </ion-label>
</ion-chip>
</ion-label>
</ion-item> </ion-item>
</ng-container> </ng-container>

7
src/core/features/course/components/module/module.scss
View File

@ -1,3 +1,5 @@
@import "~theme/globals";
:host { :host {
.item.core-module-main-item { .item.core-module-main-item {
@ -59,4 +61,9 @@
--inner-border-width: 0px; --inner-border-width: 0px;
} }
.core-module-availabilityinfo ion-icon,
.core-module-dates ion-icon {
@include margin-horizontal(null, 8px);
}
} }

14
src/core/features/course/components/module/module.ts
View File

@ -20,7 +20,7 @@ import {
CoreCourseModuleCompletionData, CoreCourseModuleCompletionData,
CoreCourseSection, CoreCourseSection,
} from '@features/course/services/course-helper'; } from '@features/course/services/course-helper';
import { CoreCourse } from '@features/course/services/course'; import { CoreCourse, CoreCourseModuleCompletionStatus, CoreCourseModuleCompletionTracking } from '@features/course/services/course';
import { CoreCourseModuleDelegate, CoreCourseModuleHandlerButton } from '@features/course/services/module-delegate'; import { CoreCourseModuleDelegate, CoreCourseModuleHandlerButton } from '@features/course/services/module-delegate';
/** /**
@ -47,6 +47,7 @@ export class CoreCourseModuleComponent implements OnInit, OnDestroy {
hasInfo = false; hasInfo = false;
showLegacyCompletion = false; // Whether to show module completion in the old format. showLegacyCompletion = false; // Whether to show module completion in the old format.
showManualCompletion = false; // Whether to show manual completion when completion conditions are disabled. showManualCompletion = false; // Whether to show manual completion when completion conditions are disabled.
completionStatus?: CoreCourseModuleCompletionStatus;
/** /**
* Component being initialized. * Component being initialized.
@ -61,13 +62,22 @@ export class CoreCourseModuleComponent implements OnInit, OnDestroy {
} }
this.module.handlerData.a11yTitle = this.module.handlerData.a11yTitle ?? this.module.handlerData.title; this.module.handlerData.a11yTitle = this.module.handlerData.a11yTitle ?? this.module.handlerData.title;
this.completionStatus = this.module.completiondata === undefined ||
this.module.completiondata.tracking == CoreCourseModuleCompletionTracking.COMPLETION_TRACKING_NONE
? undefined
: this.module.completiondata.state;
this.hasInfo = !!( this.hasInfo = !!(
this.module.description || this.module.description ||
(this.showActivityDates && this.module.dates && this.module.dates.length) || (this.showActivityDates && this.module.dates && this.module.dates.length) ||
(this.module.completiondata && (this.module.completiondata &&
((this.showManualCompletion && !this.module.completiondata.isautomatic) || ((this.showManualCompletion && !this.module.completiondata.isautomatic) ||
(this.showCompletionConditions && this.module.completiondata.isautomatic)) (this.showCompletionConditions && this.module.completiondata.isautomatic))
) ) ||
this.module.completiondata?.offline ||
(this.module.visible === 0 && (!this.section || this.section.visible)) ||
(this.module.visible !== 0 && this.module.isStealth) ||
(this.module.availabilityinfo)
); );
} }

4
src/core/features/course/format/singleactivity/components/singleactivity.ts
View File

@ -19,7 +19,7 @@ import { CoreCourseUnsupportedModuleComponent } from '@features/course/component
import { CoreDynamicComponent } from '@components/dynamic-component/dynamic-component'; import { CoreDynamicComponent } from '@components/dynamic-component/dynamic-component';
import { CoreCourseAnyCourseData } from '@features/courses/services/courses'; import { CoreCourseAnyCourseData } from '@features/courses/services/courses';
import { IonRefresher } from '@ionic/angular'; import { IonRefresher } from '@ionic/angular';
import { CoreCourseModuleCompletionData, CoreCourseSectionWithStatus } from '@features/course/services/course-helper'; import { CoreCourseModuleCompletionData, CoreCourseSection } from '@features/course/services/course-helper';
import { CoreBlockHelper } from '@features/block/services/block-helper'; import { CoreBlockHelper } from '@features/block/services/block-helper';
import { CoreCourse } from '@features/course/services/course'; import { CoreCourse } from '@features/course/services/course';
@ -36,7 +36,7 @@ import { CoreCourse } from '@features/course/services/course';
export class CoreCourseFormatSingleActivityComponent implements OnChanges { export class CoreCourseFormatSingleActivityComponent implements OnChanges {
@Input() course?: CoreCourseAnyCourseData; // The course to render. @Input() course?: CoreCourseAnyCourseData; // The course to render.
@Input() sections?: CoreCourseSectionWithStatus[]; // List of course sections. @Input() sections?: CoreCourseSection[]; // List of course sections.
@Input() initialSectionId?: number; // The section to load first (by ID). @Input() initialSectionId?: number; // The section to load first (by ID).
@Input() initialSectionNumber?: number; // The section to load first (by number). @Input() initialSectionNumber?: number; // The section to load first (by number).
@Input() moduleId?: number; // The module ID to scroll to. Must be inside the initial selected section. @Input() moduleId?: number; // The module ID to scroll to. Must be inside the initial selected section.

42
src/core/features/course/pages/module-preview/module-preview.html
View File

@ -27,33 +27,35 @@
<core-course-module-info [module]="module" [courseId]="courseId" [description]="module.description" [component]="module.modname" <core-course-module-info [module]="module" [courseId]="courseId" [description]="module.description" [component]="module.modname"
[componentId]="module.id" [expandDescription]="true"> [componentId]="module.id" [expandDescription]="true">
<div class="safe-area-padding-horizontal ion-padding" *ngIf="module.handlerData?.extraBadge"> <div class="ion-padding" *ngIf="module.handlerData?.extraBadge">
<ion-badge class="ion-text-wrap ion-text-start" [color]="module.handlerData?.extraBadgeColor"> <ion-chip class="ion-text-wrap ion-text-start" [color]="module.handlerData?.extraBadgeColor">
<span [innerHTML]="module.handlerData?.extraBadge"></span> <ion-label><span [innerHTML]="module.handlerData?.extraBadge"></span></ion-label>
</ion-badge> </ion-chip>
</div> </div>
<div class="safe-area-padding-horizontal ion-padding" *ngIf="module.visible === 0 && (!section || section.visible)"> <div class="ion-padding" *ngIf="module.visible === 0 && (!section || section.visible)">
<ion-badge class="ion-text-wrap"> <ion-chip class="ion-text-wrap">
{{ 'core.course.hiddenfromstudents' | translate }} <ion-icon name="fas-eye-slash" aria-hidden="true"></ion-icon>
</ion-badge> <ion-label>{{ 'core.course.hiddenfromstudents' | translate }}</ion-label>
</ion-chip>
</div> </div>
<div class="safe-area-padding-horizontal ion-padding" *ngIf="module.visible !== 0 && module.isStealth"> <div class="ion-padding" *ngIf="module.visible !== 0 && module.isStealth">
<ion-badge class="ion-text-wrap"> <ion-chip class="ion-text-wrap">
{{ 'core.course.hiddenoncoursepage' | translate }} <ion-icon name="fas-eye-slash" aria-hidden="true"></ion-icon>
</ion-badge> <ion-label>{{ 'core.course.hiddenoncoursepage' | translate }}</ion-label>
</ion-chip>
</div> </div>
<div class="safe-area-padding-horizontal ion-padding core-module-availabilityinfo" *ngIf="module.availabilityinfo"> <div class="ion-padding core-module-availabilityinfo" *ngIf="module.availabilityinfo">
<ion-badge class="ion-text-wrap">{{ 'core.restricted' | translate }}</ion-badge> <ion-icon name="fas-lock" [attr.aria-label]="'core.restricted' | translate"></ion-icon>
<div> <ion-label>
<core-format-text [text]="module.availabilityinfo" contextLevel="module" [contextInstanceId]="module.id" <core-format-text [text]="module.availabilityinfo" contextLevel="module" [contextInstanceId]="module.id"
[courseId]="courseId" class="ion-text-wrap"> [courseId]="courseId" class="ion-text-wrap">
</core-format-text> </core-format-text>
</ion-label>
</div> </div>
</div> <div class="ion-padding" *ngIf="module.completiondata?.offline">
<div class="safe-area-padding-horizontal ion-padding" *ngIf="module.completiondata?.offline"> <ion-chip color="warning" class="ion-text-wrap">
<ion-badge color="warning" class="ion-text-wrap"> <ion-label>{{ 'core.course.manualcompletionnotsynced' | translate }}</ion-label>
{{ 'core.course.manualcompletionnotsynced' | translate }} </ion-chip>
</ion-badge>
</div> </div>
<core-course-unsupported-module *ngIf="unsupported" [module]="module" [courseId]="courseId"></core-course-unsupported-module> <core-course-unsupported-module *ngIf="unsupported" [module]="module" [courseId]="courseId"></core-course-unsupported-module>

4
src/core/features/siteplugins/components/course-format/course-format.ts
View File

@ -16,7 +16,7 @@ import { Component, OnChanges, Input, ViewChild, Output, EventEmitter } from '@a
import { IonRefresher } from '@ionic/angular'; import { IonRefresher } from '@ionic/angular';
import { CoreCourseFormatComponent } from '@features/course/components/format/format'; import { CoreCourseFormatComponent } from '@features/course/components/format/format';
import { CoreCourseModuleCompletionData, CoreCourseSectionWithStatus } from '@features/course/services/course-helper'; import { CoreCourseModuleCompletionData, CoreCourseSection } from '@features/course/services/course-helper';
import { CoreCourseFormatDelegate } from '@features/course/services/format-delegate'; import { CoreCourseFormatDelegate } from '@features/course/services/format-delegate';
import { CoreCourseAnyCourseData } from '@features/courses/services/courses'; import { CoreCourseAnyCourseData } from '@features/courses/services/courses';
import { CoreSitePlugins, CoreSitePluginsContent } from '@features/siteplugins/services/siteplugins'; import { CoreSitePlugins, CoreSitePluginsContent } from '@features/siteplugins/services/siteplugins';
@ -33,7 +33,7 @@ import { CoreSitePluginsPluginContentComponent } from '../plugin-content/plugin-
export class CoreSitePluginsCourseFormatComponent implements OnChanges { export class CoreSitePluginsCourseFormatComponent implements OnChanges {
@Input() course?: CoreCourseAnyCourseData; // The course to render. @Input() course?: CoreCourseAnyCourseData; // The course to render.
@Input() sections?: CoreCourseSectionWithStatus[]; // List of course sections. The status will be calculated in this component. @Input() sections?: CoreCourseSection[]; // List of course sections. The status will be calculated in this component.
@Input() downloadEnabled?: boolean; // Whether the download of sections and modules is enabled. @Input() downloadEnabled?: boolean; // Whether the download of sections and modules is enabled.
@Input() initialSectionId?: number; // The section to load first (by ID). @Input() initialSectionId?: number; // The section to load first (by ID).
@Input() initialSectionNumber?: number; // The section to load first (by number). @Input() initialSectionNumber?: number; // The section to load first (by number).

5
src/theme/theme.base.scss
View File

@ -844,6 +844,8 @@ ion-select-popover ion-item.core-select-option-title {
ion-chip { ion-chip {
line-height: 1.1; line-height: 1.1;
border-radius: var(--big-radius);
@include padding-horizontal(16px);
} }
ion-searchbar { ion-searchbar {
@ -1167,9 +1169,8 @@ ion-item.item-input ion-input.has-focus {
} }
} }
// Ionic set this value to 0 without px that provoked miscalculations.
ion-item-divider { ion-item-divider {
--inner-padding-end: 0px; --inner-padding-end: 8px;
} }
// Change default outline. // Change default outline.