Merge pull request #1306 from dpalou/MOBILE-2392

MOBILE-2392 course: Update download course label

src/core/course/lang/en.json

@@ -18,6 +18,7 @@
     "hiddenfromstudents": "Hidden from students",
     "nocontentavailable": "No content available at the moment.",
     "overriddennotice": "Your final grade from this activity was manually adjusted.",
+    "refreshcourse": "Refresh course",
     "sections": "Sections",
     "useactivityonbrowser": "You can still use it using your device's web browser."
 }

src/core/course/pages/section/section.html

@@ -13,7 +13,7 @@
                 <core-navbar-buttons>
                     <core-context-menu>
                         <core-context-menu-item *ngIf="displayEnableDownload" [priority]="2000" [content]="'core.settings.enabledownloadsection' | translate" (action)="toggleDownload()" [iconAction]="downloadEnabledIcon"></core-context-menu-item>
-                        <core-context-menu-item [priority]="1900" [content]="'core.course.downloadcourse' | translate" (action)="prefetchCourse()" [iconAction]="prefetchCourseData.prefetchCourseIcon" [closeOnClick]="false"></core-context-menu-item>
+                        <core-context-menu-item [priority]="1900" [content]="prefetchCourseData.title | translate" (action)="prefetchCourse()" [iconAction]="prefetchCourseData.prefetchCourseIcon" [closeOnClick]="false"></core-context-menu-item>
                     </core-context-menu>
                 </core-navbar-buttons>
                 <ion-content>

src/core/course/pages/section/section.ts

@@ -49,7 +49,8 @@ export class CoreCourseSectionPage implements OnDestroy {
     downloadEnabled: boolean;
     downloadEnabledIcon = 'square-outline'; // Disabled by default.
     prefetchCourseData = {
-        prefetchCourseIcon: 'spinner'
+        prefetchCourseIcon: 'spinner',
+        title: 'core.course.downloadcourse'
     };
     moduleId: number;
     displayEnableDownload: boolean;
@@ -83,7 +84,7 @@ export class CoreCourseSectionPage implements OnDestroy {
         // Listen for changes in course status.
         this.courseStatusObserver = eventsProvider.on(CoreEventsProvider.COURSE_STATUS_CHANGED, (data) => {
             if (data.courseId == this.course.id) {
-                this.prefetchCourseData.prefetchCourseIcon = this.courseHelper.getCourseStatusIconFromStatus(data.status);
+                this.updateCourseStatus(data.status);
             }
         }, sitesProvider.getCurrentSiteId());
     }
@@ -116,7 +117,7 @@ export class CoreCourseSectionPage implements OnDestroy {
                     } else {
                         // No download, this probably means that the app was closed while downloading. Set previous status.
                         this.courseProvider.setCoursePreviousStatus(this.course.id).then((status) => {
-                            this.prefetchCourseData.prefetchCourseIcon = this.courseHelper.getCourseStatusIconFromStatus(status);
+                            this.updateCourseStatus(status);
                         });
                     }
                 }
@@ -273,8 +274,9 @@ export class CoreCourseSectionPage implements OnDestroy {
      * @return {Promise<void>} Promise resolved when done.
      */
     protected determineCoursePrefetchIcon(): Promise<void> {
-        return this.courseHelper.getCourseStatusIcon(this.course.id).then((icon) => {
+        return this.courseHelper.getCourseStatusIconAndTitle(this.course.id).then((data) => {
-            this.prefetchCourseData.prefetchCourseIcon = icon;
+            this.prefetchCourseData.prefetchCourseIcon = data.icon;
+            this.prefetchCourseData.title = data.title;
         });
     }
 
@@ -305,6 +307,18 @@ export class CoreCourseSectionPage implements OnDestroy {
         this.downloadEnabledIcon = this.downloadEnabled ? 'checkbox-outline' : 'square-outline';
     }
 
+    /**
+     * Update the course status icon and title.
+     *
+     * @param {string} status Status to show.
+     */
+    protected updateCourseStatus(status: string): void {
+        const statusData = this.courseHelper.getCourseStatusIconAndTitleFromStatus(status);
+
+        this.prefetchCourseData.prefetchCourseIcon = statusData.icon;
+        this.prefetchCourseData.title = statusData.title;
+    }
+
     /**
      * Page destroyed.
      */

src/core/course/providers/helper.ts

@@ -245,20 +245,22 @@ 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} iconData An object where to store the course icon. It will be stored with the name "prefetchCourseIcon".
+     * @param {any} data An object where to store the course icon and title: "prefetchCourseIcon" and "title".
      * @param {any} course Course to prefetch.
      * @param {any[]} [sections] List of course sections.
      * @param {CoreCourseOptionsHandlerToDisplay[]} courseHandlers List of course handlers.
      * @return {Promise<boolean>} Promise resolved when the download finishes, rejected if an error occurs or the user cancels.
      */
-    confirmAndPrefetchCourse(iconData: any, course: any, sections?: any[], courseHandlers?: CoreCourseOptionsHandlerToDisplay[])
+    confirmAndPrefetchCourse(data: any, course: any, sections?: any[], courseHandlers?: CoreCourseOptionsHandlerToDisplay[])
             : Promise<boolean> {
 
-        const initialIcon = iconData.prefetchCourseIcon,
+        const initialIcon = data.prefetchCourseIcon,
+            initialTitle = data.title,
             siteId = this.sitesProvider.getCurrentSiteId();
         let promise;
 
-        iconData.prefetchCourseIcon = 'spinner';
+        data.prefetchCourseIcon = 'spinner';
+        data.title = 'core.downloading';
 
         // Get the sections first if needed.
         if (sections) {
@@ -286,7 +288,8 @@ export class CoreCourseHelperProvider {
                 });
             }, (error): any => {
                 // User cancelled or there was an error calculating the size.
-                iconData.prefetchCourseIcon = initialIcon;
+                data.prefetchCourseIcon = initialIcon;
+                data.title = initialTitle;
 
                 return Promise.reject(error);
             });
@@ -729,32 +732,41 @@ export class CoreCourseHelperProvider {
     }
 
     /**
-     * Get a course status icon.
+     * Get a course status icon and the langkey to use as a title.
      *
      * @param {number} courseId Course ID.
      * @param {string} [siteId] Site ID. If not defined, current site.
-     * @return {Promise<string>} Promise resolved with the icon name.
+     * @return {Promise<{icon: string, title: string}>} Promise resolved with the icon name and the title key.
      */
-    getCourseStatusIcon(courseId: number, siteId?: string): Promise<string> {
+    getCourseStatusIconAndTitle(courseId: number, siteId?: string): Promise<{icon: string, title: string}> {
         return this.courseProvider.getCourseStatus(courseId, siteId).then((status) => {
-            return this.getCourseStatusIconFromStatus(status);
+            return this.getCourseStatusIconAndTitleFromStatus(status);
         });
     }
 
     /**
-     * Get a course status icon from status.
+     * Get a course status icon and the langkey to use as a title from status.
      *
      * @param {string} status Course status.
-     * @return {string} Icon name.
+     * @return {{icon: string, title: string}} Title and icon name.
      */
-    getCourseStatusIconFromStatus(status: string): string {
+    getCourseStatusIconAndTitleFromStatus(status: string): {icon: string, title: string} {
         if (status == CoreConstants.DOWNLOADED) {
             // Always show refresh icon, we cannot knew if there's anything new in course options.
-            return 'refresh';
+            return {
+                icon: 'refresh',
+                title: 'core.course.refreshcourse'
+            };
         } else if (status == CoreConstants.DOWNLOADING) {
-            return 'spinner';
+            return {
+                icon: 'spinner',
+                title: 'core.downloading'
+            };
         } else {
-            return 'cloud-download';
+            return {
+                icon: 'cloud-download',
+                title: 'core.course.downloadcourse'
+            };
         }
     }
 

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

@@ -4,7 +4,7 @@
 
         <div class="core-button-spinner">
             <!-- Download course. -->
-            <button *ngIf="prefetchCourseData.prefetchCourseIcon != 'spinner'" ion-button icon-only clear color="dark" (click)="prefetchCourse($event)">
+            <button *ngIf="prefetchCourseData.prefetchCourseIcon != 'spinner'" ion-button icon-only clear color="dark" (click)="prefetchCourse($event)" [attr.aria-label]="prefetchCourseData.title | translate">
                 <ion-icon [name]="prefetchCourseData.prefetchCourseIcon"></ion-icon>
             </button>
             <!-- Download course spinner. -->

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

@@ -38,7 +38,8 @@ export class CoreCoursesCourseProgressComponent implements OnInit, OnDestroy {
 
     isDownloading: boolean;
     prefetchCourseData = {
-        prefetchCourseIcon: 'spinner'
+        prefetchCourseIcon: 'spinner',
+        title: 'core.course.downloadcourse'
     };
 
     protected isDestroyed = false;
@@ -50,7 +51,7 @@ export class CoreCoursesCourseProgressComponent implements OnInit, OnDestroy {
         // Listen for status change in course.
         this.courseStatusObserver = eventsProvider.on(CoreEventsProvider.COURSE_STATUS_CHANGED, (data) => {
             if (data.courseId == this.course.id) {
-                this.prefetchCourseData.prefetchCourseIcon = this.courseHelper.getCourseStatusIconFromStatus(data.status);
+                this.updateCourseStatus(data.status);
             }
         }, sitesProvider.getCurrentSiteId());
     }
@@ -60,10 +61,11 @@ export class CoreCoursesCourseProgressComponent implements OnInit, OnDestroy {
      */
     ngOnInit(): void {
         // Determine course prefetch icon.
-        this.courseHelper.getCourseStatusIcon(this.course.id).then((icon) => {
+        this.courseHelper.getCourseStatusIconAndTitle(this.course.id).then((data) => {
-            this.prefetchCourseData.prefetchCourseIcon = icon;
+            this.prefetchCourseData.prefetchCourseIcon = data.icon;
+            this.prefetchCourseData.title = data.title;
 
-            if (icon == 'spinner') {
+            if (data.icon == 'spinner') {
                 // Course is being downloaded. Get the download promise.
                 const promise = this.courseHelper.getCourseDownloadPromise(this.course.id);
                 if (promise) {
@@ -106,6 +108,18 @@ export class CoreCoursesCourseProgressComponent implements OnInit, OnDestroy {
         });
     }
 
+    /**
+     * Update the course status icon and title.
+     *
+     * @param {string} status Status to show.
+     */
+    protected updateCourseStatus(status: string): void {
+        const statusData = this.courseHelper.getCourseStatusIconAndTitleFromStatus(status);
+
+        this.prefetchCourseData.prefetchCourseIcon = statusData.icon;
+        this.prefetchCourseData.title = statusData.title;
+    }
+
     /**
      * Component destroyed.
      */

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

@@ -41,7 +41,7 @@
             <ion-item *ngIf="!isEnrolled && !selfEnrolInstances.length && !paypalEnabled">
                 <p>{{ 'core.courses.notenrollable' | translate }}</p>
             </ion-item>
-            <a ion-item *ngIf="canAccessCourse" (click)="prefetchCourse()" detail-none>
+            <a ion-item *ngIf="canAccessCourse" (click)="prefetchCourse()" detail-none [attr.aria-label]="prefetchCourseData.title | translate">
                 <ion-icon *ngIf="prefetchCourseData.prefetchCourseIcon != 'spinner'" [name]="prefetchCourseData.prefetchCourseIcon" item-start></ion-icon>
                 <ion-spinner *ngIf="prefetchCourseData.prefetchCourseIcon == 'spinner'" item-start></ion-spinner>
                 <h2>{{ 'core.course.downloadcourse' | translate }}</h2>

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

@@ -42,7 +42,8 @@ export class CoreCoursesCoursePreviewPage implements OnDestroy {
     paypalEnabled: boolean;
     dataLoaded: boolean;
     prefetchCourseData = {
-        prefetchCourseIcon: 'spinner'
+        prefetchCourseIcon: 'spinner',
+        title: 'core.course.downloadcourse'
     };
 
     protected guestWSAvailable: boolean;
@@ -73,7 +74,7 @@ export class CoreCoursesCoursePreviewPage implements OnDestroy {
         // Listen for status change in course.
         this.courseStatusObserver = eventsProvider.on(CoreEventsProvider.COURSE_STATUS_CHANGED, (data) => {
             if (data.courseId == this.course.id) {
-                this.prefetchCourseData.prefetchCourseIcon = this.courseHelper.getCourseStatusIconFromStatus(data.status);
+                this.updateCourseStatus(data.status);
             }
         }, sitesProvider.getCurrentSiteId());
     }
@@ -101,10 +102,11 @@ export class CoreCoursesCoursePreviewPage implements OnDestroy {
 
         this.getCourse().finally(() => {
             // Determine course prefetch icon.
-            this.courseHelper.getCourseStatusIcon(this.course.id).then((icon) => {
+            this.courseHelper.getCourseStatusIconAndTitle(this.course.id).then((data) => {
-                this.prefetchCourseData.prefetchCourseIcon = icon;
+                this.prefetchCourseData.prefetchCourseIcon = data.icon;
+                this.prefetchCourseData.title = data.title;
 
-                if (icon == 'spinner') {
+                if (data.icon == 'spinner') {
                     // Course is being downloaded. Get the download promise.
                     const promise = this.courseHelper.getCourseDownloadPromise(this.course.id);
                     if (promise) {
@@ -378,6 +380,18 @@ export class CoreCoursesCoursePreviewPage implements OnDestroy {
         });
     }
 
+    /**
+     * Update the course status icon and title.
+     *
+     * @param {string} status Status to show.
+     */
+    protected updateCourseStatus(status: string): void {
+        const statusData = this.courseHelper.getCourseStatusIconAndTitleFromStatus(status);
+
+        this.prefetchCourseData.prefetchCourseIcon = statusData.icon;
+        this.prefetchCourseData.title = statusData.title;
+    }
+
     /**
      * Wait for the user to be enrolled in the course.
      *

src/core/courses/pages/my-courses/my-courses.ts

@@ -191,7 +191,7 @@ export class CoreCoursesMyCoursesPage implements OnDestroy {
         }
 
         this.courseHelper.determineCoursesStatus(this.courses).then((status) => {
-            let icon = this.courseHelper.getCourseStatusIconFromStatus(status);
+            let icon = this.courseHelper.getCourseStatusIconAndTitleFromStatus(status).icon;
             if (icon == 'spinner') {
                 // It seems all courses are being downloaded, show a download button instead.
                 icon = 'cloud-download';

src/core/courses/pages/my-overview/my-overview.ts

@@ -394,7 +394,7 @@ export class CoreCoursesMyOverviewPage implements OnDestroy {
             }
 
             this.courseHelper.determineCoursesStatus(this.courses[filter]).then((status) => {
-                let icon = this.courseHelper.getCourseStatusIconFromStatus(status);
+                let icon = this.courseHelper.getCourseStatusIconAndTitleFromStatus(status).icon;
                 if (icon == 'spinner') {
                     // It seems all courses are being downloaded, show a download button instead.
                     icon = 'cloud-download';