From cf0d9ae4684267f2a16142e8c7367358bd723314 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Thu, 27 Jan 2022 22:52:04 +0100
Subject: [PATCH] MOBILE-3954 storage: Improve courses manager template

---
 .../pages/course-storage/course-storage.html     | 11 ++++++-----
 .../pages/courses-storage/courses-storage.html   | 16 +++++++++-------
 2 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/src/addons/storagemanager/pages/course-storage/course-storage.html b/src/addons/storagemanager/pages/course-storage/course-storage.html
index 3b15683d5..3f05975e6 100644
--- a/src/addons/storagemanager/pages/course-storage/course-storage.html
+++ b/src/addons/storagemanager/pages/course-storage/course-storage.html
@@ -12,20 +12,20 @@
     <core-loading [hideUntil]="loaded">
         <ion-card class="wholecourse">
             <ion-card-header>
-                <ion-card-title>{{ title }}</ion-card-title>
                 <p class="ion-text-wrap">{{ 'addon.storagemanager.info' | translate }}</p>
+                <ion-card-title>{{ title }}</ion-card-title>
                 <ion-item class="size ion-text-wrap ion-no-padding" lines="none">
                     <ion-icon name="fas-archive" slot="start" aria-hidden="true"></ion-icon>
                     <ion-label>
                         <p class="item-heading ion-text-wrap">{{ 'addon.storagemanager.storageused' | translate }}</p>
                         <ion-badge color="light">{{ totalSize | coreBytesToSize }}</ion-badge>
                     </ion-label>
-                    <ion-button slot="end" (click)="deleteForCourse()" [disabled]="totalSize == 0">
+                    <ion-button slot="end" (click)="deleteForCourse()" [disabled]="totalSize == 0" color="danger">
                         <ion-icon name="fas-trash" slot="icon-only" [attr.aria-label]="'addon.storagemanager.deletecourse' | translate">
                         </ion-icon>
                     </ion-button>
                 </ion-item>
-                <ion-button *ngIf="downloadCourseEnabled" (click)="prefetchCourse()" expand="block">
+                <ion-button *ngIf="downloadCourseEnabled" (click)="prefetchCourse()" expand="block" fill="outline">
                     <ion-icon *ngIf="!prefetchCourseData.loading" [name]="prefetchCourseData.icon" slot="start"></ion-icon>
                     <ion-spinner *ngIf="prefetchCourseData.loading" slot="start"></ion-spinner>
                     {{ prefetchCourseData.statusTranslatable | translate }}
@@ -48,7 +48,7 @@
                             </p>
                         </ion-label>
                         <div class="storage-buttons" slot="end" *ngIf="section.totalSize > 0 || downloadEnabled">
-                            <ion-button (click)="deleteForSection(section)" *ngIf="section.totalSize > 0">
+                            <ion-button (click)="deleteForSection(section)" *ngIf="section.totalSize > 0" color="danger">
                                 <ion-icon name="fas-trash" slot="icon-only"
                                     [attr.aria-label]="'addon.storagemanager.deletedatafrom' | translate: { name: section.name }">
                                 </ion-icon>
@@ -87,7 +87,8 @@
                             </ion-label>
 
                             <div class="storage-buttons" slot="end">
-                                <ion-button fill="clear" (click)="deleteForModule(module, section)" *ngIf="module.totalSize > 0">
+                                <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>
diff --git a/src/addons/storagemanager/pages/courses-storage/courses-storage.html b/src/addons/storagemanager/pages/courses-storage/courses-storage.html
index ca9eb3b53..e91ab12bc 100644
--- a/src/addons/storagemanager/pages/courses-storage/courses-storage.html
+++ b/src/addons/storagemanager/pages/courses-storage/courses-storage.html
@@ -12,35 +12,37 @@
     <core-loading [hideUntil]="loaded">
         <ion-card>
             <ion-card-header>
-                <ion-card-title class="ion-text-wrap">{{ 'core.courses.courses' | translate }}</ion-card-title>
                 <p class="ion-text-wrap">{{ 'addon.storagemanager.info' | translate }}</p>
+                <ion-card-title class="ion-text-wrap">{{ 'core.courses.courses' | translate }}</ion-card-title>
                 <ion-item class="size ion-text-wrap ion-no-padding" lines="none">
                     <ion-icon name="fas-archive" slot="start" aria-hidden="true"></ion-icon>
                     <ion-label>
                         <h2 class="ion-text-wrap">{{ 'addon.storagemanager.storageused' | translate }}</h2>
+                        <ion-badge color="light">{{ totalSize | coreBytesToSize }}</ion-badge>
                     </ion-label>
-                    <p slot="end" class="ion-text-end">{{ totalSize | coreBytesToSize }}</p>
                     <ion-button slot="end" (click)="deleteCompletelyDownloadedCourses()"
-                        [disabled]="completelyDownloadedCourses.length === 0">
+                        [disabled]="completelyDownloadedCourses.length === 0" color="danger">
                         <ion-icon name="fas-trash" slot="icon-only" ariaLabel="{{ 'addon.storagemanager.deletecourses' | translate }}">
                         </ion-icon>
                     </ion-button>
                 </ion-item>
             </ion-card-header>
         </ion-card>
-        <ion-card>
+        <ion-card *ngIf="downloadedCourses.length">
             <ion-card-content class="ion-no-padding">
                 <ion-list>
-                    <ion-item *ngFor="let course of downloadedCourses" class="course">
+                    <ion-item *ngFor="let course of downloadedCourses" class="course" (click)="openCourse(course)" button>
                         <ion-label class="ion-text-wrap">
                             <p class="item-heading" *ngIf="course.displayname">{{ course.displayname }}</p>
                             <p class="item-heading" *ngIf="!course.displayname">{{ course.fullname }}</p>
                             <p class="item-heading item-heading-secondary" *ngIf="course.isDownloading">
                                 {{ 'core.downloading' | translate }}
                             </p>
+                            <ion-badge color="light">
+                                {{ course.totalSize | coreBytesToSize }}
+                            </ion-badge>
                         </ion-label>
-                        <p slot="end" class="ion-text-end">{{ course.totalSize | coreBytesToSize }}</p>
-                        <ion-button slot="end" (click)="deleteCourse(course)" [disabled]="course.isDownloading">
+                        <ion-button slot="end" (click)="deleteCourse(course)" [disabled]="course.isDownloading" color="danger">
                             <ion-icon name="fas-trash" slot="icon-only"
                                 [attr.aria-label]="'addon.storagemanager.deletedatafrom' | translate: { name: course.displayname }">
                             </ion-icon>