MOBILE-3814 module: Re-order course module card info

main
Pau Ferrer Ocaña 2022-02-09 16:53:09 +01:00
parent 926f2508d1
commit 61a7d5d59f
5 changed files with 42 additions and 52 deletions

View File

@ -74,16 +74,14 @@
</core-format-text>
</h2>
<div *ngIf="section.visible === 0 && section.uservisible !== false">
<ion-chip>
<ion-icon name="fas-eye-slash" aria-hidden="true"></ion-icon>
<ion-label>{{ 'core.course.hiddenfromstudents' | translate }}</ion-label>
</ion-chip>
<ion-badge color="warning">
{{ 'core.course.hiddenfromstudents' | translate }}
</ion-badge>
</div>
<div *ngIf="section.visible === 0 && section.uservisible === false">
<ion-chip>
<ion-icon name="fas-eye-slash" aria-hidden="true"></ion-icon>
<ion-label>{{ 'core.notavailable' | translate }}</ion-label>
</ion-chip>
<ion-badge color="warning">
{{ 'core.notavailable' | translate }}
</ion-badge>
</div>
<div *ngIf="section.availabilityinfo">
<ion-chip>

View File

@ -4,10 +4,14 @@
class="ion-text-wrap" [class.chip]="mode == 'basic'">
<ion-icon name="fas-check" slot="start" aria-hidden="true"></ion-icon>
{{ 'core.course.completion_manual:done' | translate }}
<ion-icon *ngIf="completion?.offline" name="fas-sync" [attr.aria-label]="'core.course.manualcompletionnotsynced' | translate"
slot="end"></ion-icon>
</ion-button>
<ion-button *ngIf="!completion.state" color="dark" fill="outline" [attr.aria-label]="accessibleDescription"
(click)="completionClicked($event)" class="ion-text-wrap" [class.chip]="mode == 'basic'">
{{ 'core.course.completion_manual:markdone' | translate }}
<ion-icon *ngIf="completion?.offline" name="fas-sync" [attr.aria-label]="'core.course.manualcompletionnotsynced' | translate"
slot="end"></ion-icon>
</ion-button>
</ng-container>

View File

@ -29,6 +29,14 @@
class="ion-text-wrap ion-text-start" [outline]="true">
<ion-label><span [innerHTML]="module.handlerData.extraBadge"></span></ion-label>
</ion-chip>
<!-- Hidden badges -->
<ion-badge color="warning" *ngIf="module.visible === 0 && (!section || section.visible)">
{{ 'core.course.hiddenfromstudents' | translate }}
</ion-badge>
<ion-badge color="warning" *ngIf="module.visible !== 0 && module.isStealth">
{{ 'core.course.hiddenoncoursepage' | translate }}
</ion-badge>
</ion-label>
<!-- Buttons. -->
<div slot="end" *ngIf="module.uservisible !== false" class="buttons core-module-buttons"
@ -59,6 +67,11 @@
contextLevel="module" [contextInstanceId]="module.id" [courseId]="module.course">
</core-format-text>
<!-- Module completion. Only auto conditions-->
<core-course-module-completion *ngIf="module.completiondata && module.uservisible" [completion]="module.completiondata"
[moduleName]="module.name" [moduleId]="module.id" [showCompletionConditions]="showCompletionConditions">
</core-course-module-completion>
<!-- Activity dates. -->
<div *ngIf="showActivityDates && module.dates && module.dates.length" class="core-module-dates">
<p *ngFor="let date of module.dates">
@ -67,33 +80,7 @@
</p>
</div>
<!-- Module completion. Only auto conditions-->
<core-course-module-completion *ngIf="module.completiondata && module.uservisible" [completion]="module.completiondata"
[moduleName]="module.name" [moduleId]="module.id" [showCompletionConditions]="showCompletionConditions">
</core-course-module-completion>
<div *ngIf="module.completiondata?.offline">
<ion-chip color="warning">
<ion-icon name="fas-sync" aria-hidden="true"></ion-icon>
<ion-label>{{ 'core.course.manualcompletionnotsynced' | translate }}</ion-label>
</ion-chip>
</div>
<!-- Availability -->
<div *ngIf="module.visible === 0 && (!section || section.visible)">
<ion-chip>
<ion-icon name="fas-eye-slash" aria-hidden="true"></ion-icon>
<ion-label>{{ 'core.course.hiddenfromstudents' | translate }}</ion-label>
</ion-chip>
</div>
<div *ngIf="module.visible !== 0 && module.isStealth">
<ion-chip>
<ion-icon name="fas-eye-slash" aria-hidden="true"></ion-icon>
<ion-label>{{ 'core.course.hiddenoncoursepage' | translate }}</ion-label>
</ion-chip>
</div>
<!-- Availability info -->
<div *ngIf="module.availabilityinfo">
<ion-chip class="core-module-availabilityinfo">
<ion-icon name="fas-lock" [attr.aria-label]="'core.restricted' | translate"></ion-icon>

View File

@ -66,7 +66,6 @@ export class CoreCourseModuleComponent implements OnInit, OnDestroy {
this.module.description ||
(this.showActivityDates && this.module.dates && this.module.dates.length) ||
(this.module.completiondata && 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)

View File

@ -28,33 +28,35 @@
[componentId]="module.id" [expandDescription]="true">
<div class="ion-padding" *ngIf="module.handlerData?.extraBadge">
<ion-chip class="ion-text-wrap ion-text-start" [color]="module.handlerData?.extraBadgeColor">
<ion-chip *ngIf="module.handlerData?.extraBadge" [color]="module.handlerData?.extraBadgeColor"
class="ion-text-wrap ion-text-start" [outline]="true">
<ion-label><span [innerHTML]="module.handlerData?.extraBadge"></span></ion-label>
</ion-chip>
</div>
<div class="ion-padding" *ngIf="module.visible === 0 && (!section || section.visible)">
<ion-chip class="ion-text-wrap">
<!-- Hidden badges -->
<div *ngIf="module.visible === 0 && (!section || section.visible)">
<ion-chip color="warning">
<ion-icon name="fas-eye-slash" aria-hidden="true"></ion-icon>
<ion-label>{{ 'core.course.hiddenfromstudents' | translate }}</ion-label>
</ion-chip>
</div>
<div class="ion-padding" *ngIf="module.visible !== 0 && module.isStealth">
<ion-chip class="ion-text-wrap">
<div *ngIf="module.visible !== 0 && module.isStealth">
<ion-chip color="warning">
<ion-icon name="fas-eye-slash" aria-hidden="true"></ion-icon>
<ion-label>{{ 'core.course.hiddenoncoursepage' | translate }}</ion-label>
</ion-chip>
</div>
<div class="ion-padding core-module-availabilityinfo" *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]="courseId" class="ion-text-wrap">
</core-format-text>
</ion-label>
</div>
<div class="ion-padding" *ngIf="module.completiondata?.offline">
<ion-chip color="warning" class="ion-text-wrap">
<ion-label>{{ 'core.course.manualcompletionnotsynced' | translate }}</ion-label>
<!-- Availability info -->
<div *ngIf="module.availabilityinfo">
<ion-chip class="core-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">
</core-format-text>
</ion-label>
</ion-chip>
</div>