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

MOBILE-3217 course: Support custom course card colors

Browse Source
This commit is contained in:
Pau Ferrer Ocaña 2019-11-22 13:44:49 +01:00
parent 6ad4d8744d
commit 2a6a3876b9
3 changed files with 31 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,5 @@
<ion-card [attr.course-color]="course.id % 10"> <ion-card [attr.course-color]="course.color ? null : course.colorNumber">
<div (click)="openCourse(course)" class="core-course-thumb" [class.core-course-color-img]="course.courseImage"> <div (click)="openCourse(course)" class="core-course-thumb" [class.core-course-color-img]="course.courseImage" [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 tappable text-wrap detail-none (click)="openCourse(course)" [title]="course.displayname || course.fullname" class="core-course-link" [class.item-disabled]="course.visible == 0" [class.core-course-more-than-title]="(course.progress != null && course.progress >= 0)"> <ion-item tappable text-wrap detail-none (click)="openCourse(course)" [title]="course.displayname || course.fullname" class="core-course-link" [class.item-disabled]="course.visible == 0" [class.core-course-more-than-title]="(course.progress != null && course.progress >= 0)">

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

@ -21,6 +21,7 @@ ion-app.app-root core-courses-course-progress {
position: relative; position: relative;
background-position: center; background-position: center;
background-size: cover; background-size: cover;
@include core-transition(all, 50ms);
&.core-course-color-img { &.core-course-color-img {
background: white; background: white;

38
src/core/courses/providers/helper.ts
View File

@ -15,6 +15,7 @@
import { Injectable } from '@angular/core'; import { Injectable } from '@angular/core';
import { PopoverController } from 'ionic-angular'; import { PopoverController } from 'ionic-angular';
import { CoreUtilsProvider } from '@providers/utils/utils'; import { CoreUtilsProvider } from '@providers/utils/utils';
import { CoreSitesProvider } from '@providers/sites';
import { CoreCoursesProvider } from './courses'; import { CoreCoursesProvider } from './courses';
import { AddonCourseCompletionProvider } from '@addon/coursecompletion/providers/coursecompletion'; import { AddonCourseCompletionProvider } from '@addon/coursecompletion/providers/coursecompletion';
import { TranslateService } from '@ngx-translate/core'; import { TranslateService } from '@ngx-translate/core';
@ -26,11 +27,12 @@ import { CoreCoursePickerMenuPopoverComponent } from '@components/course-picker-
@Injectable() @Injectable()
export class CoreCoursesHelperProvider { export class CoreCoursesHelperProvider {
constructor(private coursesProvider: CoreCoursesProvider, constructor(protected coursesProvider: CoreCoursesProvider,
private utils: CoreUtilsProvider, protected utils: CoreUtilsProvider,
private courseCompletionProvider: AddonCourseCompletionProvider, protected courseCompletionProvider: AddonCourseCompletionProvider,
private translate: TranslateService, protected translate: TranslateService,
private popoverCtrl: PopoverController) { } protected popoverCtrl: PopoverController,
protected sitesProvider: CoreSitesProvider) { }
/** /**
* Get the courses to display the course picker popover. If a courseId is specified, it will also return its categoryId. * Get the courses to display the course picker popover. If a courseId is specified, it will also return its categoryId.
@ -105,10 +107,22 @@ export class CoreCoursesHelperProvider {
return Promise.resolve(); return Promise.resolve();
} }
const promises = []; let coursesInfo = [],
let coursesInfo = []; courseInfoAvailable = false;
let courseInfoAvalaible = false; const site = this.sitesProvider.getCurrentSite(),
promises = [],
colors = [];
if (site.isVersionGreaterEqualThan('3.8')) {
promises.push(site.getConfig().then((configs) => {
for (let x = 0; x < 10; x++) {
colors[x] = configs['core_admin_coursecolor' + (x + 1)] || null;
}
}).catch(() => {
// Ignore errors.
}));
}
if (this.coursesProvider.isGetCoursesByFieldAvailable() && (loadCategoryNames || if (this.coursesProvider.isGetCoursesByFieldAvailable() && (loadCategoryNames ||
(typeof courses[0].overviewfiles == 'undefined' && typeof courses[0].displayname == 'undefined'))) { (typeof courses[0].overviewfiles == 'undefined' && typeof courses[0].displayname == 'undefined'))) {
@ -116,7 +130,7 @@ export class CoreCoursesHelperProvider {
return course.id; return course.id;
}).join(','); }).join(',');
courseInfoAvalaible = true; courseInfoAvailable = true;
// Get the extra data for the courses. // Get the extra data for the courses.
promises.push(this.coursesProvider.getCoursesByField('ids', courseIds).then((coursesInfos) => { promises.push(this.coursesProvider.getCoursesByField('ids', courseIds).then((coursesInfos) => {
@ -126,7 +140,11 @@ export class CoreCoursesHelperProvider {
return Promise.all(promises).then(() => { return Promise.all(promises).then(() => {
courses.forEach((course) => { courses.forEach((course) => {
this.loadCourseExtraInfo(course, courseInfoAvalaible ? coursesInfo[course.id] : course, loadCategoryNames); this.loadCourseExtraInfo(course, courseInfoAvailable ? coursesInfo[course.id] : course, loadCategoryNames);
if (!course.courseImage) {
course.colorNumber = course.id % 10;
course.color = colors[course.colorNumber];
}
}); });
}); });
} }