From 27a0a8fcdf5d93b8eb8547ac69f4d16496e43a6c Mon Sep 17 00:00:00 2001
From: Albert Gasset <albertgasset@fsfe.org>
Date: Wed, 22 May 2019 12:31:15 +0200
Subject: [PATCH] MOBILE-2898 courses: Display done icon when course download
 finishes

---
 src/core/course/providers/helper.ts                         | 5 ++++-
 .../course-progress/core-courses-course-progress.html       | 6 +++++-
 .../courses/components/course-progress/course-progress.scss | 6 ++++++
 .../courses/components/course-progress/course-progress.ts   | 1 +
 src/core/courses/pages/course-preview/course-preview.html   | 3 ++-
 src/core/courses/pages/course-preview/course-preview.ts     | 1 +
 6 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/core/course/providers/helper.ts b/src/core/course/providers/helper.ts
index d1eb53fe5..7259db9b8 100644
--- a/src/core/course/providers/helper.ts
+++ b/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 => {
diff --git a/src/core/courses/components/course-progress/core-courses-course-progress.html b/src/core/courses/components/course-progress/core-courses-course-progress.html
index ed633bbac..985d92008 100644
--- a/src/core/courses/components/course-progress/core-courses-course-progress.html
+++ b/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>
diff --git a/src/core/courses/components/course-progress/course-progress.scss b/src/core/courses/components/course-progress/course-progress.scss
index 471a710bf..230838b1f 100644
--- a/src/core/courses/components/course-progress/course-progress.scss
+++ b/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;
diff --git a/src/core/courses/components/course-progress/course-progress.ts b/src/core/courses/components/course-progress/course-progress.ts
index 8c0a9811b..814b00c55 100644
--- a/src/core/courses/components/course-progress/course-progress.ts
+++ b/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'
     };
diff --git a/src/core/courses/pages/course-preview/course-preview.html b/src/core/courses/pages/course-preview/course-preview.html
index 66a641bd1..e379c0b21 100644
--- a/src/core/courses/pages/course-preview/course-preview.html
+++ b/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>
diff --git a/src/core/courses/pages/course-preview/course-preview.ts b/src/core/courses/pages/course-preview/course-preview.ts
index b230fee56..6e1569c2d 100644
--- a/src/core/courses/pages/course-preview/course-preview.ts
+++ b/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'
     };