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

MOBILE-4628 course-storage: Better translate status on download refresh

main
Pau Ferrer Ocaña 2024-07-22 13:53:47 +02:00
parent bea16ec337
commit dcba760c68
5 changed files with 52 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/addons/storagemanager/pages/course-storage/course-storage.html
View File

@ -78,7 +78,8 @@
<core-download-refresh *ngIf="!section.isDownloading && section.downloadStatus !== statusDownloaded"
[status]="section.downloadStatus" [enabled]="true" (action)="prefecthSection(section)"
[loading]="section.isDownloading || section.isCalculating" [canTrustDownload]="true"
[statusTranslatable]="'addon.storagemanager.downloaddatafrom' | translate: { name: section.name }" />
[statusesTranslatable]="{notdownloaded: 'addon.storagemanager.downloaddatafrom' }"
[statusSubject]="section.name" />
<ion-badge class="core-course-download-section-progress"
*ngIf="section.isDownloading && section.count < section.total" role="progressbar"
@ -124,7 +125,8 @@
module.downloadStatus !== statusDownloaded" [status]="module.downloadStatus" [enabled]="true"
[canTrustDownload]="true" [loading]="module.spinner || module.handlerData.spinner"
(action)="prefetchModule(module)"
[statusTranslatable]="'addon.storagemanager.downloaddatafrom' | translate: { name: module.name }" />
[statusesTranslatable]="{notdownloaded: 'addon.storagemanager.downloaddatafrom' }"
[statusSubject]="module.name" />
<ion-button fill="clear" (click)="deleteForModule($event, module, section)"
*ngIf="!module.calculatingSize && module.totalSize > 0" color="danger">
<ion-icon name="fas-trash" slot="icon-only"

12
src/core/components/download-refresh/core-download-refresh.html
View File

@ -1,23 +1,25 @@
<ng-container *ngIf="enabled && !loading">
<!-- Download button. -->
<ion-button *ngIf="status === statusNotDownloaded" fill="clear" (click)="download($event, false)" @coreShowHideAnimation
[ariaLabel]="(statusTranslatable || 'core.download') | translate">
[ariaLabel]="(statusTranslatable || translates.notdownloaded) | translate: { name : statusSubject }">
<ion-icon slot="icon-only" name="fas-cloud-arrow-down" aria-hidden="true" />
</ion-button>
<!-- Refresh button. -->
<ion-button *ngIf="status === statusOutdated || (status === statusDownloaded && !canTrustDownload)" fill="clear"
(click)="download($event, true)" @coreShowHideAnimation [ariaLabel]="(statusTranslatable || 'core.refresh') | translate">
(click)="download($event, true)" @coreShowHideAnimation
[ariaLabel]="(statusTranslatable || translates.outdated) | translate: { name : statusSubject }">
<ion-icon slot="icon-only" name="fam-cloud-refresh" aria-hidden="true" />
</ion-button>
<!-- Downloaded status icon. -->
<ion-icon *ngIf="status === statusDownloaded && canTrustDownload" class="core-icon-downloaded ion-padding-horizontal" color="success"
name="fam-cloud-done" [attr.aria-label]="(statusTranslatable || 'core.downloaded') | translate" role="status" />
name="fam-cloud-done" [attr.aria-label]="(statusTranslatable || translates.downloaded) | translate: { name : statusSubject }"
role="status" />
<ion-spinner *ngIf="status === statusDownloading" @coreShowHideAnimation
[attr.aria-label]="(statusTranslatable || 'core.downloading') | translate" />
[attr.aria-label]="(statusTranslatable || translates.downloading) | translate: { name : statusSubject }" />
</ng-container>
<!-- Spinner. -->
<ion-spinner *ngIf="loading" @coreShowHideAnimation [attr.aria-label]="'core.loading' | translate" />
<ion-spinner *ngIf="loading" @coreShowHideAnimation [attr.aria-label]="translates.loading | translate: { name : statusSubject }" />

35
src/core/components/download-refresh/download-refresh.ts
View File

@ -12,7 +12,7 @@
// See the License for the specific language governing permissions and
// limitations under the License.
import { Component, Input, Output, EventEmitter } from '@angular/core';
import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
import { DownloadStatus } from '@/core/constants';
import { CoreAnimations } from '@components/animations';
@ -29,24 +29,45 @@ import { CoreAnimations } from '@components/animations';
styleUrls: ['download-refresh.scss'],
animations: [CoreAnimations.SHOW_HIDE],
})
export class CoreDownloadRefreshComponent {
export class CoreDownloadRefreshComponent implements OnInit {
@Input() status?: DownloadStatus; // Download status.
@Input() statusTranslatable?: string; // Download status translatable string.
@Input() statusesTranslatable?: Partial<CoreDownloadStatusTranslatable>; // Download statuses translatable strings.
@Input() statusSubject = ''; // Status subject to use on name filed in the translatable string.
@Input() enabled = false; // Whether the download is enabled.
@Input() loading = true; // Force loading status when is not downloading.
@Input() canTrustDownload = false; // If false, refresh will be shown if downloaded.
@Output() action: EventEmitter<boolean>; // Will emit an event when the item clicked.
/**
* @deprecated since 4.5. Use statusesTranslatable instead.
*/
@Input() statusTranslatable?: string; // Download status translatable string.
statusDownloaded = DownloadStatus.DOWNLOADED;
statusNotDownloaded = DownloadStatus.DOWNLOADABLE_NOT_DOWNLOADED;
statusOutdated = DownloadStatus.OUTDATED;
statusDownloading = DownloadStatus.DOWNLOADING;
translates: CoreDownloadStatusTranslatable = {
downloaded: 'core.downloaded',
notdownloaded: 'core.download',
outdated: 'core.refresh',
downloading: 'core.downloading',
loading: 'core.loading',
};
constructor() {
this.action = new EventEmitter();
}
/**
* @inheritdoc
*/
ngOnInit(): void {
this.translates = Object.assign(this.translates, this.statusesTranslatable || {});
}
/**
* Download clicked.
*
@ -61,3 +82,11 @@ export class CoreDownloadRefreshComponent {
}
}
export type CoreDownloadStatusTranslatable = {
downloaded: string;
notdownloaded: string;
outdated: string;
downloading: string;
loading: string;
};

4
src/core/features/courses/components/course-list-item/core-courses-course-list-item.html
View File

@ -10,8 +10,8 @@
<ng-container *ngIf="isEnrolled && layout !== 'summarycard'">
<div class="core-button-spinner" *ngIf="!courseOptionMenuEnabled && showDownload">
<core-download-refresh [status]="prefetchCourseData.status" [enabled]="showDownload"
[statusTranslatable]="prefetchCourseData.statusTranslatable" [canTrustDownload]="false"
[loading]="prefetchCourseData.loading" (action)="prefetchCourse()" />
[statusesTranslatable]="statusesTranslatable" [canTrustDownload]="false" [loading]="prefetchCourseData.loading"
(action)="prefetchCourse()" />
</div>
<div class="core-button-spinner" *ngIf="courseOptionMenuEnabled">

7
src/core/features/courses/components/course-list-item/course-list-item.ts
View File

@ -27,6 +27,7 @@ import { CoreCourseListItem, CoreCourses, CoreCoursesProvider } from '../../serv
import { CoreCoursesHelper, CoreEnrolledCourseDataWithExtraInfoAndOptions } from '../../services/courses-helper';
import { CoreCoursesCourseOptionsMenuComponent } from '../course-options-menu/course-options-menu';
import { CoreEnrolHelper } from '@features/enrol/services/enrol-helper';
import { CoreDownloadStatusTranslatable } from '@components/download-refresh/download-refresh';
/**
* This directive is meant to display an item for a list of courses.
@ -55,6 +56,12 @@ export class CoreCoursesCourseListItemComponent implements OnInit, OnDestroy, On
loading: true,
};
statusesTranslatable: Partial<CoreDownloadStatusTranslatable> = {
downloaded: 'core.course.refreshcourse',
notdownloaded: 'core.course.downloadcourse',
outdated: 'core.course.downloadcourse',
};
showSpinner = false;
courseOptionMenuEnabled = false;
progress = -1;