MOBILE-3814 course: Improve course storage page
parent
0097b78963
commit
d0b59ce92b
|
@ -1106,6 +1106,7 @@
|
|||
"addon.storagemanager.confirmdeletedatafrom": "local_moodlemobileapp",
|
||||
"addon.storagemanager.coursedownloads": "local_moodlemobileapp",
|
||||
"addon.storagemanager.courseinfo": "local_moodlemobileapp",
|
||||
"addon.storagemanager.deleteall": "moodle",
|
||||
"addon.storagemanager.deleteallsitedata": "local_moodlemobileapp",
|
||||
"addon.storagemanager.deleteallsitedatainfo": "local_moodlemobileapp",
|
||||
"addon.storagemanager.deletecourses": "local_moodlemobileapp",
|
||||
|
|
|
@ -4,7 +4,7 @@
|
|||
</ion-label>
|
||||
<div slot="end" class="flex-row">
|
||||
<!-- Download all courses. -->
|
||||
<div *ngIf="downloadCoursesEnabled && filteredCourses.length > 1" class="core-button-spinner">
|
||||
<div *ngIf="downloadCoursesEnabled && filteredCourses.length > 0" class="core-button-spinner">
|
||||
<ion-button *ngIf="!prefetchCoursesData.loading" fill="clear" (click)="prefetchCourses()"
|
||||
[attr.aria-label]="prefetchCoursesData.statusTranslatable | translate">
|
||||
<ion-icon [name]="prefetchCoursesData.icon" slot="icon-only" aria-hidden="true">
|
||||
|
|
|
@ -5,6 +5,7 @@
|
|||
"confirmdeletedatafrom": "Delete all downloaded data from '{{name}}'?",
|
||||
"coursedownloads": "Course downloads",
|
||||
"courseinfo": "Download course content to work offline. Your activity will sync automatically when your device is back online.",
|
||||
"deleteall": "Delete all",
|
||||
"deleteallsitedata": "Delete all site downloaded data",
|
||||
"deleteallsitedatainfo": "This will delete all downloaded data from '{{name}}', including all downloaded courses and data that allows you to work offline.",
|
||||
"deletecourses": "Delete downloaded data from all courses",
|
||||
|
|
|
@ -10,36 +10,51 @@
|
|||
</ion-header>
|
||||
<ion-content>
|
||||
<core-loading [hideUntil]="loaded" class="list-item-limited-width">
|
||||
<ion-item class="ion-text-wrap">
|
||||
<ion-label>
|
||||
<p>{{ 'addon.storagemanager.courseinfo' | translate }}</p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
|
||||
|
||||
<ion-card class="wholecourse">
|
||||
<ion-card-header>
|
||||
<p class="ion-text-wrap ion-no-margin">{{ 'addon.storagemanager.courseinfo' | translate }}</p>
|
||||
<ion-card-title>{{ title }}</ion-card-title>
|
||||
<ion-item class="size ion-text-wrap ion-no-padding">
|
||||
<ion-label>
|
||||
<p class="item-heading ion-text-wrap">{{ 'addon.storagemanager.totaldownloads' | translate }}</p>
|
||||
<ion-badge color="light">{{ totalSize | coreBytesToSize }}</ion-badge>
|
||||
</ion-label>
|
||||
<ion-button slot="end" (click)="deleteForCourse()" [disabled]="totalSize == 0" color="danger" fill="clear">
|
||||
<ion-icon name="fas-trash" slot="icon-only" [attr.aria-label]="'addon.storagemanager.deletedatafrom' | translate:
|
||||
{ name: title }">
|
||||
</ion-icon>
|
||||
</ion-button>
|
||||
<ion-badge color="light" slot="end">{{ totalSize | coreBytesToSize }}
|
||||
</ion-badge>
|
||||
</ion-item>
|
||||
<ion-button *ngIf="downloadCourseEnabled" (click)="prefetchCourse()" expand="block" fill="outline">
|
||||
<ion-button *ngIf="downloadCourseEnabled" (click)="prefetchCourse()" expand="block" fill="outline" class="ion-no-margin">
|
||||
<ion-icon *ngIf="!prefetchCourseData.loading" [name]="prefetchCourseData.icon" slot="start"></ion-icon>
|
||||
<ion-spinner *ngIf="prefetchCourseData.loading" slot="start"></ion-spinner>
|
||||
{{ prefetchCourseData.statusTranslatable | translate }}
|
||||
</ion-button>
|
||||
<ion-button *ngIf="totalSize > 0" (click)="deleteForCourse()" expand="block" color="danger"
|
||||
class="ion-no-margin ion-margin-top">
|
||||
<ion-icon name="fas-trash" slot="start" [attr.aria-label]="'addon.storagemanager.deletedatafrom' | translate:
|
||||
{ name: title }">
|
||||
</ion-icon>
|
||||
{{ 'addon.storagemanager.deleteall' | translate }}
|
||||
</ion-button>
|
||||
</ion-card-header>
|
||||
</ion-card>
|
||||
<ng-container *ngFor="let section of sections">
|
||||
<ion-card class="section" *ngIf="section.modules.length > 0">
|
||||
<ion-card-header>
|
||||
<ion-item class="ion-no-padding">
|
||||
<ion-item class="ion-no-padding" lines="full">
|
||||
<ion-label>
|
||||
<p class="item-heading ion-text-wrap">{{ section.name }}</p>
|
||||
<ion-badge color="light" *ngIf="section.totalSize > 0">
|
||||
{{ section.totalSize | coreBytesToSize }}
|
||||
<p class="item-heading ion-text-wrap">
|
||||
<core-format-text [text]="section.name" contextLevel="course" [contextInstanceId]="section.course"
|
||||
[adaptImg]="false">
|
||||
</core-format-text>
|
||||
</p>
|
||||
<ion-badge [color]="section.downloadStatus == statusDownloaded ? 'success' : 'light'"
|
||||
*ngIf="section.totalSize > 0">
|
||||
<ion-icon aria-hidden="true" name="fam-cloud-done" *ngIf="section.downloadStatus == statusDownloaded">
|
||||
</ion-icon>{{ section.totalSize | coreBytesToSize }}
|
||||
</ion-badge>
|
||||
<!-- Download progress. -->
|
||||
<p *ngIf="downloadEnabled && section.isDownloading">
|
||||
|
@ -48,15 +63,10 @@
|
|||
</p>
|
||||
</ion-label>
|
||||
<div class="storage-buttons" slot="end" *ngIf="section.totalSize > 0 || downloadEnabled">
|
||||
<ion-button (click)="deleteForSection(section)" *ngIf="section.totalSize > 0" color="danger" fill="clear">
|
||||
<ion-icon name="fas-trash" slot="icon-only"
|
||||
[attr.aria-label]="'addon.storagemanager.deletedatafrom' | translate: { name: section.name }">
|
||||
</ion-icon>
|
||||
</ion-button>
|
||||
<div *ngIf="downloadEnabled" slot="end" class="core-button-spinner">
|
||||
<core-download-refresh *ngIf="!section.isDownloading" [status]="section.downloadStatus" [enabled]="true"
|
||||
(action)="prefecthSection(section)" [loading]="section.isDownloading || section.isCalculating"
|
||||
[canTrustDownload]="true">
|
||||
<core-download-refresh *ngIf="!section.isDownloading && section.downloadStatus != statusDownloaded"
|
||||
[status]="section.downloadStatus" [enabled]="true" (action)="prefecthSection(section)"
|
||||
[loading]="section.isDownloading || section.isCalculating" [canTrustDownload]="true">
|
||||
</core-download-refresh>
|
||||
|
||||
<ion-badge class="core-course-download-section-progress"
|
||||
|
@ -66,6 +76,11 @@
|
|||
{{section.count}} / {{section.total}}
|
||||
</ion-badge>
|
||||
</div>
|
||||
<ion-button (click)="deleteForSection(section)" *ngIf="section.totalSize > 0" color="danger" fill="clear">
|
||||
<ion-icon name="fas-trash" slot="icon-only"
|
||||
[attr.aria-label]="'addon.storagemanager.deletedatafrom' | translate: { name: section.name }">
|
||||
</ion-icon>
|
||||
</ion-button>
|
||||
</div>
|
||||
</ion-item>
|
||||
</ion-card-header>
|
||||
|
@ -81,22 +96,25 @@
|
|||
[contextInstanceId]="module.id" [adaptImg]="false">
|
||||
</core-format-text>
|
||||
</h3>
|
||||
<ion-badge color="light" *ngIf="module.totalSize > 0">
|
||||
{{ module.totalSize | coreBytesToSize }}
|
||||
<ion-badge [color]="module.downloadStatus == statusDownloaded ? 'success' : 'light'"
|
||||
*ngIf="module.totalSize > 0">
|
||||
<ion-icon aria-hidden="true" name="fam-cloud-done" *ngIf="module.downloadStatus == statusDownloaded">
|
||||
</ion-icon>{{ module.totalSize | coreBytesToSize }}
|
||||
</ion-badge>
|
||||
</ion-label>
|
||||
|
||||
<div class="storage-buttons" slot="end">
|
||||
<core-download-refresh *ngIf="downloadEnabled && module.handlerData?.showDownloadButton &&
|
||||
module.downloadStatus != statusDownloaded" [status]="module.downloadStatus" [enabled]="true"
|
||||
[canTrustDownload]="true" [loading]="module.spinner || module.handlerData.spinner"
|
||||
(action)="prefetchModule(module, section)">
|
||||
</core-download-refresh>
|
||||
<ion-button fill="clear" (click)="deleteForModule(module, section)" *ngIf="module.totalSize > 0"
|
||||
color="danger">
|
||||
<ion-icon name="fas-trash" slot="icon-only"
|
||||
[attr.aria-label]="'addon.storagemanager.deletedatafrom' | translate: { name: module.name }">
|
||||
</ion-icon>
|
||||
</ion-button>
|
||||
<core-download-refresh *ngIf="downloadEnabled && module.handlerData?.showDownloadButton"
|
||||
[status]="module.downloadStatus" [enabled]="true" [canTrustDownload]="true"
|
||||
[loading]="module.spinner || module.handlerData.spinner" (action)="prefetchModule(module, section)">
|
||||
</core-download-refresh>
|
||||
</div>
|
||||
</ion-item>
|
||||
</ng-container>
|
||||
|
|
|
@ -30,6 +30,20 @@
|
|||
}
|
||||
}
|
||||
|
||||
ion-badge {
|
||||
margin-top: 8px;
|
||||
ion-icon {
|
||||
@include margin-horizontal(null, 8px);
|
||||
}
|
||||
}
|
||||
|
||||
ion-item core-mod-icon {
|
||||
--size: 18px;
|
||||
padding: 9px;
|
||||
--margin-vertical: 8px;
|
||||
--margin-end: 8px;
|
||||
}
|
||||
|
||||
.storage-buttons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
|
@ -59,6 +59,8 @@ export class AddonStorageManagerCourseStoragePage implements OnInit, OnDestroy {
|
|||
loading: true,
|
||||
};
|
||||
|
||||
statusDownloaded = CoreConstants.DOWNLOADED;
|
||||
|
||||
protected siteUpdatedObserver?: CoreEventObserver;
|
||||
protected courseStatusObserver?: CoreEventObserver;
|
||||
protected sectionStatusObserver?: CoreEventObserver;
|
||||
|
|
|
@ -12,7 +12,7 @@
|
|||
"completeenrolmentbrowser": "Complete enrolment in browser",
|
||||
"confirmselfenrol": "Are you sure you want to enrol yourself in this course?",
|
||||
"courses": "Courses",
|
||||
"downloadcourses": "Download courses",
|
||||
"downloadcourses": "Download all courses",
|
||||
"enrolme": "Enrol me",
|
||||
"errorloadcategories": "An error occurred while loading categories.",
|
||||
"errorloadcourses": "An error occurred while loading courses.",
|
||||
|
|
|
@ -29,7 +29,7 @@
|
|||
</ion-label>
|
||||
<div slot="end" class="flex-row">
|
||||
<!-- Download all courses. -->
|
||||
<div *ngIf="downloadCoursesEnabled && myOverviewBlock && myOverviewBlock.filteredCourses.length > 1"
|
||||
<div *ngIf="downloadCoursesEnabled && myOverviewBlock && myOverviewBlock.filteredCourses.length > 0"
|
||||
class="core-button-spinner">
|
||||
<ion-button *ngIf="!myOverviewBlock.prefetchCoursesData.loading" fill="clear"
|
||||
(click)="myOverviewBlock.prefetchCourses()"
|
||||
|
|
|
@ -7,10 +7,10 @@
|
|||
"cannotsyncoffline": "Cannot synchronise offline.",
|
||||
"cannotsyncwithoutwifi": "Cannot synchronise because the current settings only allow to synchronise when connected to Wi-Fi. Please connect to a Wi-Fi network.",
|
||||
"colorscheme": "Color Scheme",
|
||||
"colorscheme-system": "System default",
|
||||
"colorscheme-system-notice": "System default mode will depend on your device support.",
|
||||
"colorscheme-dark": "Dark",
|
||||
"colorscheme-light": "Light",
|
||||
"colorscheme-system": "System default",
|
||||
"colorscheme-system-notice": "System default mode will depend on your device support.",
|
||||
"compilationinfo": "Compilation info",
|
||||
"copyinfo": "Copy device info on the clipboard",
|
||||
"cordovadevicemodel": "Cordova device model",
|
||||
|
@ -27,7 +27,7 @@
|
|||
"disableall": "Disable notifications",
|
||||
"disabled": "Disabled",
|
||||
"disabledfeatures": "Disabled features",
|
||||
"disallowed": "Disallowed",
|
||||
"disallowed": "Locked off",
|
||||
"displayformat": "Display format",
|
||||
"enabledownloadsection": "Enable download sections",
|
||||
"enablefirebaseanalytics": "Enable Firebase analytics",
|
||||
|
|
|
@ -936,7 +936,7 @@ ion-select-popover ion-item.core-select-option-title {
|
|||
|
||||
ion-badge {
|
||||
line-height: 1.1;
|
||||
padding: 4px 8px;
|
||||
padding: 2px 8px;
|
||||
border-radius: var(--big-radius);
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue