MOBILE-2898 courses: Display done icon when course download finishes

src/core/course/providers/helper.ts

@@ -264,7 +264,7 @@ export class CoreCourseHelperProvider {
      * This function will set the icon to "spinner" when starting and it will also set it back to the initial icon if the
      * user cancels. All the other updates of the icon should be made when CoreEventsProvider.COURSE_STATUS_CHANGED is received.
      *
-     * @param {any} data An object where to store the course icon and title: "prefetchCourseIcon" and "title".
+     * @param {any} data An object where to store the course icon and title: "prefetchCourseIcon", "title" and "downloadSucceeded".
      * @param {any} course Course to prefetch.
      * @param {any[]} [sections] List of course sections.
      * @param {CoreCourseOptionsHandlerToDisplay[]} courseHandlers List of course handlers.
@@ -279,6 +279,7 @@ export class CoreCourseHelperProvider {
             siteId = this.sitesProvider.getCurrentSiteId();
         let promise;
 
+        data.downloadSucceeded = false;
         data.prefetchCourseIcon = 'spinner';
         data.title = 'core.downloading';
 
@@ -313,6 +314,8 @@ export class CoreCourseHelperProvider {
                     return this.prefetchCourse(course, sections, courseHandlers, menuHandlers, siteId);
                 }).then(() => {
                     // Download successful.
+                    data.downloadSucceeded = true;
+
                     return true;
                 });
             }, (error): any => {

src/core/courses/components/course-progress/core-courses-course-progress.html

@@ -14,7 +14,8 @@
         <div class="core-button-spinner" *ngIf="downloadCourseEnabled && !courseOptionMenuEnabled && showDownload">
             <!-- Download course. -->
             <button *ngIf="prefetchCourseData.prefetchCourseIcon != 'spinner'" ion-button icon-only clear color="dark" (click)="prefetchCourse($event)" [attr.aria-label]="prefetchCourseData.title | translate">
-                <core-icon [name]="prefetchCourseData.prefetchCourseIcon"></core-icon>
+                <core-icon *ngIf="!prefetchCourseData.downloadSucceeded" [name]="prefetchCourseData.prefetchCourseIcon"></core-icon>
+                <ion-icon *ngIf="prefetchCourseData.downloadSucceeded" name="cloud-done" color="success" [attr.aria-label]="'core.downloaded' | translate" role="status"></ion-icon>
             </button>
             <!-- Download course spinner. -->
             <ion-spinner *ngIf="prefetchCourseData.prefetchCourseIcon == 'spinner'"></ion-spinner>
@@ -24,6 +25,9 @@
             <!-- Download course spinner. -->
             <ion-spinner *ngIf="(downloadCourseEnabled && prefetchCourseData.prefetchCourseIcon == 'spinner') || showSpinner"></ion-spinner>
 
+            <!-- Downloaded icon. -->
+             <ion-icon *ngIf="downloadCourseEnabled && prefetchCourseData.downloadSucceeded && !showSpinner" class="core-icon-downloaded" name="cloud-done" color="success" [attr.aria-label]="'core.downloaded' | translate" role="status"></ion-icon>
+
             <!-- Options menu. -->
             <button ion-button icon-only clear color="dark" (click)="showCourseOptionsMenu($event)" *ngIf="!showSpinner">
                 <core-icon name="more"></core-icon>

src/core/courses/components/course-progress/course-progress.scss

@@ -72,6 +72,12 @@ ion-app.app-root core-courses-course-progress {
                 vertical-align: middle;
             }
 
+            .core-button-spinner .core-icon-downloaded {
+                font-size: 28.8px;
+                margin-top: 8px;
+                vertical-align: top;
+            }
+
             .item-button[icon-only] {
                 min-width: 50px;
                 width: 50px;

src/core/courses/components/course-progress/course-progress.ts

@@ -42,6 +42,7 @@ export class CoreCoursesCourseProgressComponent implements OnInit, OnDestroy {
 
     isDownloading: boolean;
     prefetchCourseData = {
+        downloadSucceeded: false,
         prefetchCourseIcon: 'spinner',
         title: 'core.course.downloadcourse'
     };

src/core/courses/pages/course-preview/course-preview.html

@@ -58,7 +58,8 @@
                 <p>{{ 'core.courses.notenrollable' | translate }}</p>
             </ion-item>
             <a ion-item *ngIf="canAccessCourse && downloadCourseEnabled" (click)="prefetchCourse()" detail-none [attr.aria-label]="prefetchCourseData.title | translate">
-                <core-icon *ngIf="prefetchCourseData.prefetchCourseIcon != 'spinner'" [name]="prefetchCourseData.prefetchCourseIcon" item-start></core-icon>
+                <core-icon *ngIf="!prefetchCourseData.downloadSucceeded && prefetchCourseData.prefetchCourseIcon != 'spinner'" [name]="prefetchCourseData.prefetchCourseIcon" item-start></core-icon>
+                <ion-icon *ngIf="prefetchCourseData.downloadSucceeded && prefetchCourseData.prefetchCourseIcon != 'spinner'" item-start name="cloud-done" color="success" [attr.aria-label]="'core.downloaded' | translate" role="status"></ion-icon>
                 <ion-spinner *ngIf="prefetchCourseData.prefetchCourseIcon == 'spinner'" item-start></ion-spinner>
                 <h2>{{ 'core.course.downloadcourse' | translate }}</h2>
             </a>

src/core/courses/pages/course-preview/course-preview.ts

@@ -44,6 +44,7 @@ export class CoreCoursesCoursePreviewPage implements OnDestroy {
     dataLoaded: boolean;
     avoidOpenCourse = false;
     prefetchCourseData = {
+        downloadSucceeded: false,
         prefetchCourseIcon: 'spinner',
         title: 'core.course.downloadcourse'
     };