CIT/Vmeda.Online
3
0
Fork 1
forked from EVOgeek/Vmeda.Online
Code Pull Requests Activity

Merge pull request #3706 from crazyserver/MOBILE-3973

Browse Source 
MOBILE-3973 course: Support svg geopatterns in the app
This commit is contained in:
Dani Palou 2023-06-15 10:19:54 +02:00 committed by GitHub
commit 13dadcac0f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 73 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -18,8 +18,8 @@
</ion-refresher> </ion-refresher>
<core-loading [hideUntil]="dataLoaded"> <core-loading [hideUntil]="dataLoaded">
<div *ngIf="course" class="core-course-thumb" #courseThumb> <div *ngIf="course" class="core-course-thumb" #courseThumb>
<img *ngIf="course.courseImage" [src]="course.courseImage" core-external-content alt="" /> <img *ngIf="course.courseimage" [src]="course.courseimage" core-external-content alt="" (error)="loadFallbackCourseIcon()" />
<ion-icon *ngIf="!course.courseImage" name="fas-graduation-cap" class="course-icon" aria-hidden="true"> <ion-icon *ngIf="!course.courseimage" name="fas-graduation-cap" class="course-icon" aria-hidden="true">
</ion-icon> </ion-icon>
</div> </div>
<div *ngIf="course" class="course-container"> <div *ngIf="course" class="course-container">

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

@ -466,6 +466,20 @@ export class CoreCourseSummaryPage implements OnInit, OnDestroy {
CoreNavigator.navigateToSitePath(item.data.page, { params }); CoreNavigator.navigateToSitePath(item.data.page, { params });
} }
/**
* Removes the course image set because it cannot be loaded and set the fallback icon color.
*/
loadFallbackCourseIcon(): void {
if (!this.course) {
return;
}
this.course.courseimage = undefined;
// Set the color because it won't be set at this point.
this.setCourseColor();
}
/** /**
* Set course color. * Set course color.
*/ */

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

@ -27,6 +27,11 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
// Fill geopaterns
&[src$=".svg"] {
min-width: 100%;
}
} }
ion-icon.course-icon { ion-icon.course-icon {

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

@ -21,12 +21,12 @@
<div class="core-course-header"> <div class="core-course-header">
<ion-item class="core-format-progress-list ion-text-wrap list-item-limited-width" collapsible> <ion-item class="core-format-progress-list ion-text-wrap list-item-limited-width" collapsible>
<ng-container *ngIf="course"> <ng-container *ngIf="course">
<div *ngIf="!course.courseImage" #courseThumb slot="start" class="core-course-thumb"> <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 name="fas-graduation-cap" class="course-icon" aria-hidden="true">
</ion-icon> </ion-icon>
</div> </div>
<ion-avatar *ngIf="course.courseImage" slot="start" class="core-course-thumb"> <ion-avatar *ngIf="course.courseimage" slot="start" class="core-course-thumb">
<img [src]="course.courseImage" core-external-content alt="" /> <img [src]="course.courseimage" core-external-content alt="" />
</ion-avatar> </ion-avatar>
</ng-container> </ng-container>

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

@ -27,6 +27,11 @@
color: var(--course-color-tint); color: var(--course-color-tint);
background: var(--course-color, transparent); background: var(--course-color, transparent);
} }
// Fill geopaterns
img[src$=".svg"] {
min-width: 100%;
}
} }
@if ($core-hide-courseimage-on-course) { @if ($core-hide-courseimage-on-course) {

BIN
src/core/features/course/tests/behat/snapshots/test-basic-usage-of-one-course-in-app-view-course-contents_46.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 36 KiB

After

Width:  |  Height:  |  Size: 37 KiB

12
src/core/features/courses/components/course-list-item/core-courses-course-list-item.html
View File

@ -2,9 +2,9 @@
[class.core-course-list-card]="layout == 'card' || layout == 'summarycard'" [class.item-dimmed]="course.hidden" (click)="openCourse()" [class.core-course-list-card]="layout == 'card' || layout == 'summarycard'" [class.item-dimmed]="course.hidden" (click)="openCourse()"
button [attr.aria-label]="course.displayname || course.fullname"> button [attr.aria-label]="course.displayname || course.fullname">
<div *ngIf="layout == 'card' || layout == 'summarycard'" class="core-course-thumb" [class.core-course-color-img]="course.courseImage"> <div *ngIf="layout == 'card' || layout == 'summarycard'" class="core-course-thumb" [class.core-course-color-img]="course.courseimage">
<img *ngIf="course.courseImage" [src]="course.courseImage" core-external-content alt="" /> <img *ngIf="course.courseimage" [src]="course.courseimage" core-external-content alt="" (error)="loadFallbackCourseIcon()" />
<ion-icon *ngIf="!course.courseImage" name="fas-graduation-cap" class="course-icon" aria-hidden="true"> <ion-icon *ngIf="!course.courseimage" name="fas-graduation-cap" class="course-icon" aria-hidden="true">
</ion-icon> </ion-icon>
</div> </div>
@ -30,11 +30,11 @@
<ion-item class="ion-text-wrap"> <ion-item class="ion-text-wrap">
<ng-container *ngIf="layout == 'list' || layout == 'listwithenrol'"> <ng-container *ngIf="layout == 'list' || layout == 'listwithenrol'">
<ion-icon *ngIf="!course.courseImage" name="fas-graduation-cap" slot="start" class="course-icon core-course-thumb" <ion-icon *ngIf="!course.courseimage" name="fas-graduation-cap" slot="start" class="course-icon core-course-thumb"
aria-hidden="true"> aria-hidden="true">
</ion-icon> </ion-icon>
<ion-avatar *ngIf="course.courseImage" slot="start" class="core-course-thumb"> <ion-avatar *ngIf="course.courseimage" slot="start" class="core-course-thumb">
<img [src]="course.courseImage" core-external-content alt="" /> <img [src]="course.courseimage" core-external-content alt="" (error)="loadFallbackCourseIcon()" />
</ion-avatar> </ion-avatar>
</ng-container> </ng-container>

4
src/core/features/courses/components/course-list-item/course-list-item.scss
View File

@ -138,6 +138,10 @@ ion-card.core-course-list-item {
} }
} }
// Fill geopaterns
.core-course-thumb img[src$=".svg"] {
min-width: 100%;
}
// Card layout. // Card layout.
ion-card.core-course-list-card { ion-card.core-course-list-card {

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

@ -111,7 +111,7 @@ export class CoreCoursesCourseListItemComponent implements OnInit, OnDestroy, On
label: 'core.courses.allowguests', label: 'core.courses.allowguests',
icon: 'fas-unlock', icon: 'fas-unlock',
}); });
} else if (instance === 'paypal') { } else if (instance === 'paypal' || instance === 'fee') {
this.enrolmentIcons.push({ this.enrolmentIcons.push({
label: 'core.courses.otherenrolments', label: 'core.courses.otherenrolments',
icon: 'fas-up-right-from-square', icon: 'fas-up-right-from-square',
@ -128,6 +128,16 @@ export class CoreCoursesCourseListItemComponent implements OnInit, OnDestroy, On
} }
} }
/**
* Removes the course image set because it cannot be loaded and set the fallback icon color.
*/
loadFallbackCourseIcon(): void {
this.course.courseimage = undefined;
// Set the color because it won't be set at this point.
this.setCourseColor();
}
/** /**
* Set course color. * Set course color.
*/ */

4
src/core/features/courses/components/course-progress/core-courses-course-progress.html
View File

@ -1,7 +1,7 @@
<ion-card [attr.course-color]="course.color ? null : course.colorNumber"> <ion-card [attr.course-color]="course.color ? null : course.colorNumber">
<div (click)="openCourse()" class="core-course-thumb" [class.core-course-color-img]="course.courseImage" <div (click)="openCourse()" class="core-course-thumb" [class.core-course-color-img]="course.courseimage"
[style.background-color]="course.color"> [style.background-color]="course.color">
<img *ngIf="course.courseImage" [src]="course.courseImage" core-external-content alt="" /> <img *ngIf="course.courseimage" [src]="course.courseimage" core-external-content alt="" />
</div> </div>
<ion-item button (click)="openCourse()" [attr.aria-label]="course.displayname || course.fullname" class="core-course-header" <ion-item button (click)="openCourse()" [attr.aria-label]="course.displayname || course.fullname" class="core-course-header"
[class.core-course-only-title]="!showAll || progress < 0 && completionUserTracked === false" detail="false"> [class.core-course-only-title]="!showAll || progress < 0 && completionUserTracked === false" detail="false">

5
src/core/features/courses/components/course-progress/course-progress.scss
View File

@ -40,6 +40,11 @@
right: 0; right: 0;
left: 0; left: 0;
margin: auto; margin: auto;
// Fill geopaterns
&[src$=".svg"] {
min-width: 100%;
}
} }
} }

17
src/core/features/courses/services/courses-helper.ts
View File

@ -205,8 +205,20 @@ export class CoreCoursesHelperProvider {
* @param course Course data. * @param course Course data.
*/ */
async loadCourseColorAndImage(course: CoreCourseWithImageAndColor): Promise<void> { async loadCourseColorAndImage(course: CoreCourseWithImageAndColor): Promise<void> {
// Moodle 4.1 downwards geopatterns are embedded in b64 in only some WS, remote them to keep it coherent.
if (course.courseimage?.startsWith('data')) {
course.courseimage = undefined;
}
if (course.courseimage !== undefined) {
course.courseImage = course.courseimage; // @deprecated sinde 4.3 use courseimage instead.
return;
}
if (course.overviewfiles && course.overviewfiles[0]) { if (course.overviewfiles && course.overviewfiles[0]) {
course.courseImage = course.overviewfiles[0].fileurl; course.courseimage = course.overviewfiles[0].fileurl;
course.courseImage = course.courseimage; // @deprecated sinde 4.3 use courseimage instead.
return; return;
} }
@ -436,7 +448,8 @@ export type CoreCourseWithImageAndColor = {
overviewfiles?: CoreWSExternalFile[]; overviewfiles?: CoreWSExternalFile[];
colorNumber?: number; // Color index number. colorNumber?: number; // Color index number.
color?: string; // Color RGB. color?: string; // Color RGB.
courseImage?: string; // Course thumbnail. courseImage?: string; // Course thumbnail. @deprecated since 4.3, use courseimage instead.
courseimage?: string; // Course thumbnail.
}; };
/** /**