EVOgeek
/
Vmeda.Online
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

main
Albert Gasset 2019-05-22 12:31:15 +02:00
parent 99774954a4
commit 27a0a8fcdf
6 changed files with 19 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/core/course/providers/helper.ts
View File

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

6
src/core/courses/components/course-progress/core-courses-course-progress.html
View File

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

6
src/core/courses/components/course-progress/course-progress.scss
View File

@ -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;

1
src/core/courses/components/course-progress/course-progress.ts
View File

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

3
src/core/courses/pages/course-preview/course-preview.html
View File

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

1
src/core/courses/pages/course-preview/course-preview.ts
View File

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