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

MOBILE-3814 course: Add placeholder thumb on course page

Browse Source
This commit is contained in:
Pau Ferrer Ocaña 2022-03-10 12:28:39 +01:00
parent d6269cf16d
commit f2798ec817
3 changed files with 56 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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 & {