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

Merge pull request #3168 from crazyserver/MOBILE-3814 

Mobile 3814
main
Dani Palou 2022-03-10 15:48:22 +01:00 committed by GitHub
parent f5c9c3d022 f184a09550
commit cb6d46fccb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
24 changed files with 375 additions and 190 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
scripts/langindex.json
View File

@ -1567,6 +1567,7 @@
"core.course.thisweek": "format_weeks/currentsection",
"core.course.todo": "completion",
"core.course.useactivityonbrowser": "local_moodlemobileapp",
"core.course.viewcourse": "block_timeline",
"core.course.warningmanualcompletionmodified": "local_moodlemobileapp",
"core.course.warningofflinemanualcompletiondeleted": "local_moodlemobileapp",
"core.coursedetails": "moodle",

2
src/addons/competency/pages/competency/competency.html
View File

@ -122,7 +122,7 @@
<ion-card *ngFor="let evidence of competency.evidence">
<ion-item class="ion-text-wrap" *ngIf="evidence.actionuser" core-user-link [userId]="evidence.actionuser.id"
[courseId]="courseId">
<core-user-avatar [user]="evidence.actionuser" slot="start"></core-user-avatar>
<core-user-avatar [user]="evidence.actionuser" slot="start" [linkProfile]="false"></core-user-avatar>
<ion-label>
<p class="item-heading">{{ evidence.actionuser.fullname }}</p>
<p>{{ evidence.timemodified * 1000 | coreFormatDate }}</p>

6
src/addons/mod/assign/components/submission/addon-mod-assign-submission.html
View File

@ -3,7 +3,7 @@
<!-- User and status of the submission. -->
<ion-item class="ion-text-wrap" *ngIf="!blindMarking && user" core-user-link [userId]="submitId" [courseId]="courseId"
[attr.aria-label]="user!.fullname">
<core-user-avatar [user]="user" slot="start"></core-user-avatar>
<core-user-avatar [user]="user" slot="start" [linkProfile]="false"></core-user-avatar>
<ion-label>
<h2>{{ user!.fullname }}</h2>
<ng-container *ngTemplateOutlet="submissionStatus"></ng-container>
@ -176,7 +176,7 @@
<ng-container *ngFor="let user of membersToSubmit">
<ion-item class="ion-text-wrap" core-user-link [userId]="user.id" [courseId]="courseId"
[attr.aria-label]="user.fullname">
<core-user-avatar [user]="user" slot="start"></core-user-avatar>
<core-user-avatar [user]="user" slot="start" [linkProfile]="false"></core-user-avatar>
<ion-label>
<h2>{{ user.fullname }}</h2>
</ion-label>
@ -334,7 +334,7 @@
<!-- Data about the grader (teacher who graded). -->
<ion-item class="ion-text-wrap" *ngIf="grader" core-user-link [userId]="grader!.id" [courseId]="courseId"
[attr.aria-label]="grader!.fullname" detail="true">
<core-user-avatar [user]="grader" slot="start"></core-user-avatar>
<core-user-avatar [user]="grader" slot="start" [linkProfile]="false"></core-user-avatar>
<ion-label>
<h2>{{ 'addon.mod_assign.gradedby' | translate }}</h2>
<h2>{{ grader!.fullname }}</h2>

2
src/addons/mod/choice/components/index/addon-mod-choice-index.html
View File

@ -114,7 +114,7 @@
<ng-container *ngIf="result.expanded">
<ion-item *ngFor="let user of result.userresponses" core-user-link [courseId]="courseId" [userId]="user.userid"
[attr.aria-label]="user.fullname" class="ion-text-wrap">
<core-user-avatar [user]="user" slot="start" [courseId]="courseId"></core-user-avatar>
<core-user-avatar [user]="user" slot="start" [courseId]="courseId" [linkProfile]="false"></core-user-avatar>
<ion-label>
<p>{{user.fullname}}</p>
</ion-label>

2
src/addons/mod/feedback/pages/attempt/attempt.html
View File

@ -14,7 +14,7 @@
<ion-list class="ion-no-margin" *ngIf="attempt || anonAttempt">
<ion-item *ngIf="attempt" class="ion-text-wrap" core-user-link [userId]="attempt.userid"
[attr.aria-label]="'core.user.viewprofile' | translate" [courseId]="attempt.courseid">
<core-user-avatar [user]="attempt" slot="start"></core-user-avatar>
<core-user-avatar [user]="attempt" slot="start" [linkProfile]="false"></core-user-avatar>
<ion-label>
<h2>{{attempt.fullname}}</h2>
<p *ngIf="attempt.timemodified">{{attempt.timemodified * 1000 | coreFormatDate }}</p>

2
src/addons/mod/h5pactivity/pages/attempt-results/attempt-results.html
View File

@ -21,7 +21,7 @@
<!-- Attempt number and user that did the attempt. -->
<ion-item class="ion-text-wrap" *ngIf="user" core-user-link [userId]="user.id" [courseId]="courseId"
[attr.aria-label]="user.fullname">
<core-user-avatar [user]="user" slot="start" [courseId]="courseId"></core-user-avatar>
<core-user-avatar [user]="user" slot="start" [courseId]="courseId" [linkProfile]="false"></core-user-avatar>
<ion-label>
<h2>{{ 'addon.mod_h5pactivity.attempt' | translate }} #{{attempt.attempt}}: {{user.fullname}}</h2>
</ion-label>

2
src/addons/mod/h5pactivity/pages/user-attempts/user-attempts.html
View File

@ -20,7 +20,7 @@
<!-- User viewed. -->
<ion-item class="ion-text-wrap" *ngIf="user && !isCurrentUser" core-user-link [userId]="user.id" [courseId]="courseId"
[attr.aria-label]="user.fullname" button detail="true">
<core-user-avatar [user]="user" slot="start" [courseId]="courseId"></core-user-avatar>
<core-user-avatar [user]="user" slot="start" [courseId]="courseId" [linkProfile]="false"></core-user-avatar>
<ion-label>
<h2>{{ user.fullname }}</h2>
</ion-label>

2
src/addons/mod/lesson/pages/user-retake/user-retake.html
View File

@ -17,7 +17,7 @@
<div *ngIf="student">
<!-- Student data. -->
<ion-item class="ion-text-wrap" core-user-link [userId]="student.id" [courseId]="courseId" [attr.aria-label]="student.fullname">
<core-user-avatar [user]="student" slot="start" [userId]="student.id" [courseId]="courseId">
<core-user-avatar [user]="student" slot="start" [userId]="student.id" [courseId]="courseId" [linkProfile]="false">
</core-user-avatar>
<ion-label>
<h2>{{student.fullname}}</h2>

8
src/addons/storagemanager/pages/course-storage/course-storage.scss
View File

@ -3,6 +3,10 @@
:host {
--course-storage-max-activity-height: 120px;
ion-card ion-item {
--inner-padding-end: 0px;
}
ion-card.section ion-card-header {
margin-bottom: 8px;
padding-top: 8px;
@ -48,7 +52,3 @@ ion-item core-mod-icon {
display: flex;
align-items: center;
}
ion-item {
--inner-padding-end: 0px;
}

11
src/core/components/user-avatar/user-avatar.scss
View File

@ -1,3 +1,5 @@
@import '~theme/globals.scss';
:host {
position: relative;
width: var(--core-avatar-size);
@ -76,6 +78,11 @@
}
:host-context(ion-item) {
margin-top: 12px;
margin-bottom: 12px;
margin-top: 6px;
margin-bottom: 6px;
@include margin(6px, 8px, 6px, 0px);
img {
min-width: var(--core-avatar-size);
min-height: var(--core-avatar-size);
}
}

1
src/core/features/course/lang.json
View File

@ -54,6 +54,7 @@
"thisweek": "This week",
"todo": "To do",
"useactivityonbrowser": "You can still use it using your device's web browser.",
"viewcourse": "View course",
"warningmanualcompletionmodified": "The manual completion of an activity was modified on the site.",
"warningofflinemanualcompletiondeleted": "Some offline manual completion of course '{{name}}' has been deleted. {{error}}"
}

129
src/core/features/course/pages/course-summary/course-summary.html
View File

@ -1,12 +1,9 @@
<ion-header>
<ion-header class="no-title">
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button [text]="'core.back' | translate"></ion-back-button>
</ion-buttons>
<ion-title>
<h1>
{{'core.course.coursesummary' | translate}}
</h1>
</ion-title>
<ion-buttons slot="end" *ngIf="isModal">
<ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
@ -15,27 +12,29 @@
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-content [fullscreen]="true">
<ion-refresher slot="fixed" [disabled]="!dataLoaded" (ionRefresh)="refreshData($event.target)">
<ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
</ion-refresher>
<core-loading [hideUntil]="dataLoaded">
<div *ngIf="courseImageUrl" class="core-course-thumb">
<img [src]="courseImageUrl" core-external-content alt="" />
<div *ngIf="course" class="core-course-thumb" #courseThumb>
<img *ngIf="course.courseImage" [src]="course.courseImage" core-external-content alt="" />
<ion-icon *ngIf="!course.courseImage" name="fas-graduation-cap" class="course-icon" aria-hidden="true">
</ion-icon>
</div>
<ng-container *ngIf="course">
<ion-item class="ion-text-wrap">
<div *ngIf="course" class="course-container">
<ion-item class="ion-text-wrap course-name">
<ion-label>
<p *ngIf="course.displayname && course.shortname && course.fullname != course.displayname"
class="core-course-shortname">
<core-format-text [text]="course.shortname" contextLevel="course" [contextInstanceId]="course.id">
</core-format-text>
</p>
<h2>
<h1>
<span class="sr-only">{{ 'core.courses.aria:coursename' | translate }}</span>
<core-format-text [text]="course.fullname" contextLevel="course" [contextInstanceId]="course.id">
</core-format-text>
</h2>
</h1>
<ion-chip color="primary" *ngIf="course.categoryname" class="core-course-category ion-text-nowrap">
<span class="sr-only">{{ 'core.courses.aria:coursecategory' | translate }}</span>
<ion-label>
@ -43,7 +42,14 @@
</core-format-text>
</ion-label>
</ion-chip>
</ion-label>
<ion-button fill="clear" [href]="courseUrl" core-link [showBrowserWarning]="false"
[attr.aria-label]="'core.openinbrowser' | translate" slot="end">
<ion-icon name="fas-external-link-alt" slot="icon-only" aria-hidden="true"></ion-icon>
</ion-button>
</ion-item>
<ion-item class="ion-text-wrap" *ngIf="progress !== undefined || course.startdate || course.enddate">
<ion-label>
<div class="core-course-progress" *ngIf="progress !== undefined">
<core-progress-bar [progress]="progress" a11yText="core.course.aria:sectionprogress">
</core-progress-bar>
@ -51,26 +57,22 @@
<div *ngIf="course.startdate || course.enddate" class="core-course-dates">
<p *ngIf="course.startdate">
<ion-icon name="fas-calendar" aria-hidden="true"></ion-icon>
<strong>{{ 'core.course.startdate' | translate }}: </strong> {{ course.startdate * 1000 |
coreFormatDate:'strftimedatefullshort' }}
<strong>{{ 'core.course.startdate' | translate }}</strong><br>
{{ course.startdate * 1000 | coreFormatDate:'strftimedaydatetime' }}
</p>
<p *ngIf="course.enddate">
<ion-icon name="fas-calendar" aria-hidden="true"></ion-icon>
<strong>{{ 'core.course.enddate' | translate }}: </strong> {{ course.enddate * 1000 |
coreFormatDate:'strftimedatefullshort' }}
<strong>{{ 'core.course.enddate' | translate }}</strong><br>
{{ course.enddate * 1000 | coreFormatDate:'strftimedaydatetime' }}
</p>
</div>
</ion-label>
<ion-button fill="clear" [href]="courseUrl" core-link [showBrowserWarning]="false"
[attr.aria-label]="'core.openinbrowser' | translate" slot="end">
<ion-icon name="fas-external-link-alt" slot="icon-only" aria-hidden="true"></ion-icon>
</ion-button>
</ion-item>
<ion-item class="ion-text-wrap" *ngIf="course.summary" detail="false">
<ion-label>
<p class="item-heading">
{{'core.summary' | translate}}
{{'core.course.coursesummary' | translate}}
</p>
<core-format-text [text]="course.summary" collapsible-item contextLevel="course" [contextInstanceId]="course.id">
</core-format-text>
@ -78,19 +80,28 @@
</ion-item>
<ion-list *ngIf="course.contacts && course.contacts.length">
<ion-item-divider class="ion-text-wrap">
<ion-item [button]="course.contacts.length >= 5" class="ion-text-wrap" (click)="toggleContacts()"
[attr.aria-label]="(contactsExpanded ? 'core.collapse' : 'core.expand') | translate" detail="false">
<ion-icon *ngIf="course.contacts.length >= 5" name="fas-chevron-right" flip-rtl slot="start" aria-hidden="true"
class="expandable-status-icon" [class.expandable-status-icon-expanded]="contactsExpanded">
</ion-icon>
<ion-label>
<p class="item-heading">{{ 'core.teachers' | translate }}</p>
</ion-label>
</ion-item-divider>
<ion-item button class="ion-text-wrap" *ngFor="let contact of course.contacts" core-user-link [userId]="contact.id"
[courseId]="isEnrolled ? course.id : null" [attr.aria-label]="'core.viewprofile' | translate" detail="true">
<core-user-avatar [user]="contact" slot="start" [userId]="contact.id" [courseId]="isEnrolled ? course.id : null">
</core-user-avatar>
<ion-label>
<p class="item-heading">{{contact.fullname}}</p>
<p class="item-heading">
{{ 'core.teachers' | translate }}
</p>
</ion-label>
</ion-item>
<ng-container *ngIf="contactsExpanded || course.contacts.length < 5">
<ion-item button class="ion-text-wrap" *ngFor="let contact of course.contacts" core-user-link [userId]="contact.id"
[courseId]="isEnrolled ? course.id : null" [attr.aria-label]="'core.viewprofile' | translate" detail="true">
<core-user-avatar [user]="contact" slot="start" [userId]="contact.id" [courseId]="isEnrolled ? course.id : null"
[linkProfile]="false">
</core-user-avatar>
<ion-label>
<p class="item-heading">{{contact.fullname}}</p>
</ion-label>
</ion-item>
</ng-container>
<core-spacer></core-spacer>
</ion-list>
@ -102,58 +113,44 @@
<span class="core-customfieldname">
<core-format-text [text]="field.name" contextLevel="course" [contextInstanceId]="course.id">
</core-format-text>
</span><span class="core-customfieldseparator">: </span>
<span class="core-customfieldseparator">: </span>
</span>
<span class="core-customfieldvalue">
<core-format-text [text]="field.value" collapsible-item contextLevel="course"
[contextInstanceId]="course.id">
<core-format-text [text]="field.value" [collapsible-item]="field.type == 'textarea' ? '' : null"
contextLevel="course" [contextInstanceId]="course.id">
</core-format-text>
</span>
</div>
</ng-container>
</ion-label>
</ion-item>
</ng-container>
</div>
</core-loading>
</ion-content>
<ion-footer *ngIf="course && dataLoaded">
<!-- Enrol -->
<ion-card *ngIf="!isEnrolled">
<ion-item class="ion-text-wrap" *ngFor="let instance of selfEnrolInstances">
<ion-label>
<p class="item-heading">{{ instance.name }}</p>
<ion-button expand="block" class="ion-margin-top" (click)="selfEnrolClicked(instance.id)">
{{ 'core.courses.enrolme' | translate }}
</ion-button>
</ion-label>
</ion-item>
<ion-item class="ion-text-wrap" *ngIf="paypalEnabled">
<ion-label>
<p class="item-heading">{{ 'core.courses.otherenrolments' | translate }}</p>
<ion-button expand="block" class="ion-margin-top" (click)="browserEnrol()">
{{ 'core.courses.completeenrolmentbrowser' | translate }}
</ion-button>
</ion-label>
</ion-item>
<ion-item *ngIf="!selfEnrolInstances.length && !paypalEnabled">
<ion-label>
<p class="item-heading">{{ 'core.courses.notenrollable' | translate }}</p>
</ion-label>
</ion-item>
</ion-card>
<ng-container *ngIf="canAccessCourse">
<ion-button *ngFor="let item of courseMenuHandlers" (click)="openMenuItem(item)" [class]="'ion-margin' + item.data.class"
<ion-button *ngFor="let item of courseMenuHandlers" (click)="openMenuItem(item)" [class]="'ion-text-wrap '+ item.data.class"
expand="block">
<ion-icon *ngIf="item.data.icon" [name]="item.data.icon" slot="start" aria-hidden="true"></ion-icon>
<ion-label>{{item.data.title | translate }}</ion-label>
</ion-button>
</ng-container>
<ion-button class="ion-margin" (click)="openCourse()" *ngIf="!isModal && canAccessCourse" expand="block">
<ion-icon name="fas-briefcase" slot="start" aria-hidden="true"></ion-icon>
<ion-label>
{{ 'core.course' | translate }}
</ion-label>
<ion-button expand="block" (click)="enrolMe()" *ngIf="!isEnrolled && (selfEnrolInstances.length > 0 || otherEnrolments)"
class="ion-text-wrap">
{{ 'core.courses.enrolme' | translate }}
</ion-button>
<ion-card class="core-info-card ion-text-wrap" *ngIf="!isEnrolled && !selfEnrolInstances.length && !otherEnrolments">
<ion-item>
<ion-icon name="fas-info-circle" slot="start" aria-hidden="true"></ion-icon>
<ion-label>{{ 'core.courses.notenrollable' | translate }}</ion-label>
</ion-item>
</ion-card>
<ion-button (click)="openCourse()" *ngIf="!isModal && canAccessCourse" expand="block" fill="outline" class="ion-text-wrap">
<ion-icon name="fas-eye" slot="start" aria-hidden="true"></ion-icon>
{{ 'core.course.viewcourse' | translate }}
</ion-button>
</ion-footer>

89
src/core/features/course/pages/course-summary/course-summary.scss
View File

@ -1,28 +1,99 @@
@import '~theme/globals.scss';
:host {
.core-course-thumb {
overflow: hidden;
text-align: center;
max-height: 35vh;
z-index: -1;
overflow: hidden;
border-bottom: 1px solid var(--stroke);
--thumb-height: 180px;
ion-content {
position: absolute;
}
.core-course-thumb {
background: var(--course-color, white);
overflow: hidden;
text-align: center;
height: var(--thumb-height);
position: fixed;
z-index: -1;
width: 100%;
.core-customfieldvalue core-format-text {
display: inline;
@for $i from 0 to length($core-course-image-background) {
&.course-color-#{$i} {
--course-color: var(--core-course-color-#{$i});
--course-color-tint: var(--core-course-color-#{$i}-tint);
}
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
ion-icon.course-icon {
padding: 24px;
font-size: calc(var(--thumb-height) - 48px);
color: var(--course-color-tint);
}
}
.course-container {
position: relative;
top: calc(var(--thumb-height) - var(--big-radius));
}
.course-name {
border-radius: var(--big-radius) var(--big-radius) 0 0;
box-shadow: var(--drop-shadow-top);
ion-label {
margin-bottom: 0px;
}
}
h1 {
font-size: 20px;
}
.core-course-category {
margin-left: 0;
margin-right: 0;
}
.core-course-dates {
background: var(--light);
border-radius: var(--small-radius);
padding: 8px;
width: 100%;
p {
margin-bottom: 8px;
}
p:last-child {
margin-bottom: 0px;
}
ion-icon {
@include margin-horizontal(null, 8px);
}
}
.core-customfield {
margin-bottom: 8px;
&.core-customfield_textarea {
display: flex;
flex-direction: column;
margin-bottom: 12px;
}
.core-customfieldname {
@include margin-horizontal(null, 4px);
font-weight: bold;
display: inline;
}
.core-customfieldvalue {
display: inline;
}
}
}

170
src/core/features/course/pages/course-summary/course-summary.ts
View File

@ -12,8 +12,8 @@
// See the License for the specific language governing permissions and
// limitations under the License.
import { Component, OnDestroy, OnInit, Input } from '@angular/core';
import { IonRefresher } from '@ionic/angular';
import { Component, OnDestroy, OnInit, Input, ViewChild, ElementRef } from '@angular/core';
import { ActionSheetButton, IonRefresher } from '@ionic/angular';
import { CoreEventObserver, CoreEvents } from '@singletons/events';
import { CoreSites } from '@services/sites';
import { CoreDomUtils } from '@services/utils/dom';
@ -31,12 +31,13 @@ import {
CoreCourseOptionsMenuHandlerToDisplay,
} from '@features/course/services/course-options-delegate';
import { CoreCourseHelper } from '@features/course/services/course-helper';
import { ModalController, NgZone, Platform, Translate } from '@singletons';
import { ActionSheetController, ModalController, NgZone, Platform, Translate } from '@singletons';
import { CoreCoursesSelfEnrolPasswordComponent } from '../../../courses/components/self-enrol-password/self-enrol-password';
import { CoreNavigator } from '@services/navigator';
import { CoreUtils } from '@services/utils/utils';
import { CoreCourseWithImageAndColor } from '@features/courses/services/courses-helper';
import { CoreCoursesHelper, CoreCourseWithImageAndColor } from '@features/courses/services/courses-helper';
import { Subscription } from 'rxjs';
import { CoreColors } from '@singletons/colors';
/**
* Page that shows the summary of a course including buttons to enrol and other available options.
@ -51,23 +52,25 @@ export class CoreCourseSummaryPage implements OnInit, OnDestroy {
@Input() course?: CoreCourseSummaryData;
@Input() courseId = 0;
@ViewChild('courseThumb') courseThumb?: ElementRef;
isEnrolled = false;
canAccessCourse = true;
selfEnrolInstances: CoreCourseEnrolmentMethod[] = [];
paypalEnabled = false;
otherEnrolments = false;
dataLoaded = false;
isModal = false;
contactsExpanded = false;
courseUrl = '';
courseImageUrl?: string;
progress?: number;
protected actionSheet?: HTMLIonActionSheetElement;
courseMenuHandlers: CoreCourseOptionsMenuHandlerToDisplay[] = [];
protected isGuestEnabled = false;
protected useGuestAccess = false;
protected guestInstanceId?: number;
protected enrolmentMethods: CoreCourseEnrolmentMethod[] = [];
protected waitStart = 0;
protected enrolUrl = '';
protected pageDestroyed = false;
@ -127,25 +130,14 @@ export class CoreCourseSummaryPage implements OnInit, OnDestroy {
* password is required for guest access.
*/
protected async canAccessAsGuest(): Promise<boolean> {
if (!this.isGuestEnabled) {
throw Error('Guest access is not enabled.');
if (this.guestInstanceId === undefined) {
return false;
}
// Search instance ID of guest enrolment method.
const method = this.enrolmentMethods.find((method) => method.type == 'guest');
this.guestInstanceId = method?.id;
const info = await CoreCourses.getCourseGuestEnrolmentInfo(this.guestInstanceId);
if (this.guestInstanceId) {
const info = await CoreCourses.getCourseGuestEnrolmentInfo(this.guestInstanceId);
if (!info.status) {
// Not active, reject.
throw Error('Guest access is not enabled.');
}
return info.passwordrequired;
}
throw Error('Guest enrollment method not found.');
// Guest access with password is not supported by the app.
return !!info.status && !info.passwordrequired;
}
/**
@ -156,17 +148,24 @@ export class CoreCourseSummaryPage implements OnInit, OnDestroy {
protected async getCourse(refresh = false): Promise<void> {
// Get course enrolment methods.
this.selfEnrolInstances = [];
this.otherEnrolments = false;
try {
this.enrolmentMethods = await CoreCourses.getCourseEnrolmentMethods(this.courseId);
const enrolmentMethods = await CoreCourses.getCourseEnrolmentMethods(this.courseId);
this.guestInstanceId = undefined;
enrolmentMethods.forEach((method) => {
if (!method.status) {
return;
}
this.enrolmentMethods.forEach((method) => {
if (method.type === 'self') {
this.selfEnrolInstances.push(method);
} else if (method.type === 'guest') {
this.isGuestEnabled = true;
} else if (method.type === 'paypal') {
this.paypalEnabled = true;
this.guestInstanceId = method.id;
} else {
// Other enrolments that comes from that WS should need user action.
this.otherEnrolments = true;
}
});
} catch (error) {
@ -189,16 +188,8 @@ export class CoreCourseSummaryPage implements OnInit, OnDestroy {
this.useGuestAccess = false;
} catch {
// The user is not an admin/manager. Check if we can provide guest access to the course.
try {
this.canAccessCourse = !(await this.canAccessAsGuest());
this.useGuestAccess = this.canAccessCourse;
} catch {
this.canAccessCourse = false;
}
}
if (this.course && 'overviewfiles' in this.course && this.course.overviewfiles?.length) {
this.courseImageUrl = this.course.overviewfiles[0].fileurl;
this.canAccessCourse = await this.canAccessAsGuest();
this.useGuestAccess = this.canAccessCourse;
}
try {
@ -213,12 +204,17 @@ export class CoreCourseSummaryPage implements OnInit, OnDestroy {
this.course = courseByField;
}
this.paypalEnabled = !this.isEnrolled && courseByField.enrollmentmethods?.indexOf('paypal') > -1;
// enrollmentmethods contains ALL enrolment methods including manual.
if (!this.isEnrolled && courseByField.enrollmentmethods?.some((method) => method === 'paypal')) {
this.otherEnrolments = true;
}
} catch {
// Ignore errors.
}
await this.setCourseColor();
if (!this.course ||
!('progress' in this.course) ||
typeof this.course.progress !== 'number' ||
@ -271,7 +267,7 @@ export class CoreCourseSummaryPage implements OnInit, OnDestroy {
try {
await CoreDomUtils.showConfirm(
Translate.instant('core.courses.browserenrolinstructions'),
undefined,
Translate.instant('core.courses.completeenrolmentbrowser'),
Translate.instant('core.openinbrowser'),
);
} catch {
@ -291,15 +287,15 @@ export class CoreCourseSummaryPage implements OnInit, OnDestroy {
}
/**
* User clicked in a self enrol button.
* Confirm user to Self enrol in course.
*
* @param instanceId The instance ID of the enrolment method.
* @param enrolMethod The enrolment method.
*/
async selfEnrolClicked(instanceId: number): Promise<void> {
async selfEnrolConfirm(enrolMethod: CoreCourseEnrolmentMethod): Promise<void> {
try {
await CoreDomUtils.showConfirm(Translate.instant('core.courses.confirmselfenrol'));
await CoreDomUtils.showConfirm(Translate.instant('core.courses.confirmselfenrol'), enrolMethod.name);
this.selfEnrolInCourse('', instanceId);
this.selfEnrolInCourse(enrolMethod.id);
} catch {
// User cancelled.
}
@ -308,11 +304,11 @@ export class CoreCourseSummaryPage implements OnInit, OnDestroy {
/**
* Self enrol in a course.
*
* @param password Password to use.
* @param instanceId The instance ID.
* @param password Password to use.
* @return Promise resolved when self enrolled.
*/
async selfEnrolInCourse(password: string, instanceId: number): Promise<void> {
async selfEnrolInCourse(instanceId: number, password = ''): Promise<void> {
const modal = await CoreDomUtils.showModalLoading('core.loading', true);
try {
@ -351,7 +347,7 @@ export class CoreCourseSummaryPage implements OnInit, OnDestroy {
);
if (modalData !== undefined) {
this.selfEnrolInCourse(modalData, instanceId);
this.selfEnrolInCourse(instanceId, modalData);
return;
}
@ -433,6 +429,82 @@ export class CoreCourseSummaryPage implements OnInit, OnDestroy {
CoreNavigator.navigateToSitePath(item.data.page, { params });
}
/**
* Set course color.
*/
protected async setCourseColor(): Promise<void> {
if (!this.course) {
return;
}
await CoreCoursesHelper.loadCourseColorAndImage(this.course);
if (!this.courseThumb) {
return;
}
if (this.course.color) {
this.courseThumb.nativeElement.style.setProperty('--course-color', this.course.color);
const tint = CoreColors.lighter(this.course.color, 50);
this.courseThumb.nativeElement.style.setProperty('--course-color-tint', tint);
} else if(this.course.colorNumber !== undefined) {
this.courseThumb.nativeElement.classList.add('course-color-' + this.course.colorNumber);
}
}
/**
* Open enrol action sheet.
*/
async enrolMe(): Promise<void> {
if (this.selfEnrolInstances.length == 1 && !this.otherEnrolments) {
this.selfEnrolConfirm(this.selfEnrolInstances[0]);
return;
}
if (this.selfEnrolInstances.length == 0 && this.otherEnrolments) {
this.browserEnrol();
return;
}
const buttons: ActionSheetButton[] = this.selfEnrolInstances.map((enrolMethod) => ({
text: enrolMethod.name,
handler: (): void => {
this.selfEnrolConfirm(enrolMethod);
},
}));
if (this.otherEnrolments) {
buttons.push({
text: Translate.instant('core.courses.completeenrolmentbrowser'),
handler: (): void => {
this.browserEnrol();
},
});
}
buttons.push({
text: Translate.instant('core.cancel'),
role: 'cancel',
});
this.actionSheet = await ActionSheetController.create({
header: Translate.instant('core.courses.enrolme'),
buttons: buttons,
});
await this.actionSheet.present();
}
/**
* Toggle list of contacts.
*/
toggleContacts(): void {
this.contactsExpanded = !this.contactsExpanded;
}
/**
* Close the modal.
*/

13
src/core/features/course/pages/index/index.html
View File

@ -17,9 +17,16 @@
</ion-toolbar>
</ion-header>
<ion-item class="core-format-progress-list ion-text-wrap list-item-limited-width" collapsible>
<ion-avatar slot="start" class="core-course-thumb" *ngIf="imageThumb">
<img [src]="imageThumb" core-external-content alt="" />
</ion-avatar>
<ng-container *ngIf="course">
<div *ngIf="!course.courseImage" #courseThumb slot="start" class="core-course-thumb">
<ion-icon *ngIf="!course.courseImage" name="fas-graduation-cap" class="course-icon" aria-hidden="true">
</ion-icon>
</div>
<ion-avatar *ngIf="course.courseImage" slot="start" class="core-course-thumb">
<img [src]="course.courseImage" core-external-content alt="" />
</ion-avatar>
</ng-container>
<ion-label>
<h1>{{ title }}</h1>
<div class="core-course-progress" *ngIf="progress !== undefined">

16
src/core/features/course/pages/index/index.scss
View File

@ -11,6 +11,22 @@
width: var(--core-courseimage-on-course-size);
min-width: var(--core-courseimage-on-course-size);
--border-radius: var(--core-courseimage-radius);
@include margin(8px, 16px, 8px, 0px);
@for $i from 0 to length($core-course-image-background) {
&.course-color-#{$i} {
--course-color: var(--core-course-color-#{$i});
--course-color-tint: var(--core-course-color-#{$i}-tint);
}
}
ion-icon.course-icon {
padding: 12px;
font-size: calc(var(--core-courseimage-on-course-size) - 24px);
border-radius: var(--border-radius);
color: var(--course-color-tint);
background: var(--course-color, transparent);
}
}
@if ($core-hide-courseimage-on-course) {

36
src/core/features/course/pages/index/index.ts
View File

@ -12,7 +12,7 @@
// See the License for the specific language governing permissions and
// limitations under the License.
import { Component, ViewChild, OnDestroy, OnInit } from '@angular/core';
import { Component, ViewChild, OnDestroy, OnInit, ElementRef } from '@angular/core';
import { ActivatedRoute, Params } from '@angular/router';
import { CoreTabsOutletTab, CoreTabsOutletComponent } from '@components/tabs-outlet/tabs-outlet';
@ -28,6 +28,8 @@ import { CoreNavigationOptions, CoreNavigator } from '@services/navigator';
import { CONTENTS_PAGE_NAME } from '@features/course/course.module';
import { CoreDomUtils } from '@services/utils/dom';
import { CoreCourseSummaryPage } from '../course-summary/course-summary';
import { CoreCoursesHelper, CoreCourseWithImageAndColor } from '@features/courses/services/courses-helper';
import { CoreColors } from '@singletons/colors';
/**
* Page that displays the list of courses the user is enrolled in.
@ -40,13 +42,13 @@ import { CoreCourseSummaryPage } from '../course-summary/course-summary';
export class CoreCourseIndexPage implements OnInit, OnDestroy {
@ViewChild(CoreTabsOutletComponent) tabsComponent?: CoreTabsOutletComponent;
@ViewChild('courseThumb') courseThumb?: ElementRef;
title = '';
category = '';
course?: CoreCourseAnyCourseData;
course?: CoreCourseWithImageAndColor & CoreCourseAnyCourseData;
tabs: CourseTab[] = [];
loaded = false;
imageThumb?: string;
progress?: number;
protected currentPagePath = '';
@ -235,9 +237,7 @@ export class CoreCourseIndexPage implements OnInit, OnDestroy {
// Get the title to display initially.
this.title = CoreCourseFormatDelegate.getCourseTitle(this.course);
if ('overviewfiles' in this.course) {
this.imageThumb = this.course.overviewfiles?.[0]?.fileurl;
}
await this.setCourseColor();
this.updateProgress();
@ -313,6 +313,30 @@ export class CoreCourseIndexPage implements OnInit, OnDestroy {
this.progress = this.course.progress;
}
/**
* Set course color.
*/
protected async setCourseColor(): Promise<void> {
if (!this.course) {
return;
}
await CoreCoursesHelper.loadCourseColorAndImage(this.course);
if (!this.courseThumb) {
return;
}
if (this.course.color) {
this.courseThumb.nativeElement.style.setProperty('--course-color', this.course.color);
const tint = CoreColors.lighter(this.course.color, 50);
this.courseThumb.nativeElement.style.setProperty('--course-color-tint', tint);
} else if(this.course.colorNumber !== undefined) {
this.courseThumb.nativeElement.classList.add('course-color-' + this.course.colorNumber);
}
}
}
type CourseTab = CoreTabsOutletTab & {

2
src/core/features/courses/components/course-list-item/course-list-item.ts
View File

@ -114,7 +114,7 @@ export class CoreCoursesCourseListItemComponent implements OnInit, OnDestroy, On
} else if (instance === 'paypal') {
this.enrolmentIcons.push({
label: 'core.courses.otherenrolments',
icon: 'fab-paypal',
icon: 'fas-external-link-alt',
});
}
});

2
src/core/features/user/components/tag-area/core-user-tag-area.html
View File

@ -1,6 +1,6 @@
<ion-card *ngFor="let item of items">
<ion-item class="ion-text-wrap" core-user-link [userId]="item.user.id">
<core-user-avatar [user]="item.user" slot="start"></core-user-avatar>
<core-user-avatar [user]="item.user" slot="start" [linkProfile]="false"></core-user-avatar>
<ion-label>
<h2>{{ item.heading }}</h2>
</ion-label>

6
src/core/features/viewer/components/text/text.scss
View File

@ -1,5 +1,3 @@
ion-app.app-root page-core-viewer-text {
ion-footer {
padding: 6px;
}
ion-footer {
padding: 6px;
}

1
src/core/features/viewer/components/text/text.ts
View File

@ -24,6 +24,7 @@ import { ModalController } from '@singletons';
@Component({
selector: 'page-core-viewer-text',
templateUrl: 'text.html',
styleUrls: ['text.scss'],
})
export class CoreViewerTextComponent {

2
src/theme/components/format-text.scss
View File

@ -77,8 +77,6 @@ core-format-text {
}
&.collapsible-collapsed .core-format-text-content {
overflow: hidden;
height: var(--collapsible-height);
@include core-transition(height, 300ms);
}
}

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

@ -152,6 +152,7 @@ ion-toolbar {
// Header.
ion-header {
z-index: 12; // To hide ion-slides on scroll.
--core-header-buttons-background: var(--core-header-toolbar-background);
ion-toolbar {
ion-spinner {
@ -159,26 +160,22 @@ ion-header {
}
ion-back-button,
.in-toolbar.button-clear {
.in-toolbar.button-clear,
.in-toolbar.button-solid,
.button.button-clear,
.button.button-solid {
--color: var(--core-header-toolbar-color);
--background: var(--core-header-toolbar-background);
--background: var(--core-header-buttons-background);
--ion-toolbar-color: var(--core-header-toolbar-color);
--border-radius: var(--huge-radius);
--primary: var(--core-header-toolbar-color);
}
ion-back-button::part(text) {
display: none;
}
.button.button-clear,
.button.button-solid {
--background: var(--core-header-toolbar-background);
--color: var(--core-header-toolbar-color);
--primary: var(--core-header-toolbar-color);
}
.button.button-clear.button-has-icon-only,
.button.button-solid.button-has-icon-only {
--border-radius: var(--huge-radius);
width: var(--a11y-min-target-size);
height: var(--a11y-min-target-size);
ion-icon {
@ -186,7 +183,6 @@ ion-header {
}
}
.core-navbar-button-hidden {
display: none !important;
}
@ -262,6 +258,10 @@ ion-footer ion-toolbar.ion-color-contrast {
background-color: var(--contrast-background);
}
ion-footer {
background-color: var(--contrast-background);
}
// Ionic icon.
ion-icon {
position: relative;
@ -833,24 +833,23 @@ ion-toolbar h1 .core-bar-button-image img {
}
// Action sheet.
.md ion-action-sheet {
ion-action-sheet.md {
.action-sheet-title {
@include padding(4px, null, 4px, 16px);
font-size: 12px;
min-height: auto;
color: var(--medium);
line-height: 2em;
font-weight: normal;
}
.action-sheet-group:first-child {
border-radius: var(--big-radius) var(--big-radius) 0 0;
}
.action-sheet-group-cancel {
box-shadow: var(--drop-shadow-top, none);
}
.action-sheet-title {
border-bottom: 2px solid var(--title-border-color);
}
}
.ios ion-action-sheet {
.action-sheet-title {
font-size: 16px;
}
.action-sheet-title {
border-bottom: 2px solid var(--title-border-color);
}
}
// Radio.
@ -1474,15 +1473,9 @@ ion-header.no-title {
--core-header-toolbar-border-width: 0;
--core-header-toolbar-background: transparent;
--core-header-shadow: none !important;
ion-toolbar .button.button-clear,
ion-toolbar .button.button-solid {
--background: var(--ion-background-color);
}
--core-header-buttons-background: var(--ion-background-color);
}
// To make core-swipe-slides fill the remaining height.
.core-swipe-slides-container {
display: flex;

1
src/theme/theme.light.scss
View File

@ -216,7 +216,6 @@
ion-action-sheet {
--button-color: var(--ion-text-color);
--button-color-selected: var(--ion-text-color);
--title-border-color: var(--primary);
.action-sheet-title {
--color: var(--ion-text-color);