MOBILE-3814 course: Add placeholder thumb on course page

src/core/features/course/pages/index/index.html

@@ -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="" />
+    <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">

src/core/features/course/pages/index/index.scss

@@ -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) {

src/core/features/course/pages/index/index.ts

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