MOBILE-2895 file: Show download status on files

src/components/download-refresh/download-refresh.scss

@@ -1,16 +1,13 @@
 ion-app.app-root core-download-refresh {
+    font-size: 1.4rem;
+
     button, ion-icon {
         cursor: pointer;
         pointer-events: auto;
         text-align: center;
     }
 
-    .core-icon-downloaded {
+    ion-icon, .core-icon-downloaded {
         font-size: 1.8em;
     }
-
-    .spinner {
-        /*@include position(null, 13px, null, null);
-        position: absolute;*/
-    }
 }

src/components/file/core-file.html

@@ -3,13 +3,12 @@
     <h2>{{fileName}}</h2>
     <p *ngIf="fileSizeReadable">{{ fileSizeReadable }}</p>
     <p *ngIf="showTime">{{ timemodified * 1000 | coreFormatDate }}</p>
+
     <div class="buttons" item-end>
-        <button ion-button clear icon-only (click)="download($event)" *ngIf="!isDownloading && showDownload" [attr.aria-label]="'core.download' | translate" color="dark">
-            <ion-icon [name]="isDownloaded ? 'refresh' : 'cloud-download'"></ion-icon>
-        </button>
+        <core-download-refresh [status]="state" [enabled]="canDownload" [loading]="isDownloading" [canTrustDownload]="!alwaysDownload" (action)="download()"></core-download-refresh>
+
         <button ion-button clear icon-only (click)="delete($event)" *ngIf="!isDownloading && canDelete" [attr.aria-label]="'core.delete' | translate" color="danger">
             <ion-icon name="trash"></ion-icon>
         </button>
     </div>
-    <ion-spinner *ngIf="isDownloading" item-end></ion-spinner>
 </a>

src/components/file/file.scss

@@ -7,6 +7,10 @@ ion-app.app-root {
     .card-ios core-file + core-file > .item-ios.item-block > .item-inner,
     core-file + core-file > .item-ios.item-block > .item-inner {
         border-top: $hairlines-width solid $list-ios-border-color;
+        .buttons {
+            min-height: 53px;
+            min-width: 58px;
+        }
     }
 
     .card-wp core-file + core-file > .item-wp.item-block > .item-inner,
@@ -16,5 +20,16 @@ ion-app.app-root {
 
     core-file > .item.item-block > .item-inner {
         border-bottom: 0;
+        @include padding(null, 0, null, null);
+        .buttons {
+            display: flex;
+            flex-flow: row;
+            align-items: center;
+            z-index: 1;
+            justify-content: space-around;
+            align-content: center;
+            min-height: 52px;
+            min-width: 53px;
+        }
     }
 }

src/components/file/file.ts

@@ -44,9 +44,7 @@ export class CoreFileComponent implements OnInit, OnDestroy {
     @Input() showTime?: boolean | string = true; // Whether show file time modified.
     @Output() onDelete?: EventEmitter<void>; // Will notify when the delete button is clicked.
 
-    isDownloaded: boolean;
     isDownloading: boolean;
-    showDownload: boolean;
     fileIcon: string;
     fileName: string;
     fileSizeReadable: string;
@@ -110,13 +108,10 @@ export class CoreFileComponent implements OnInit, OnDestroy {
      */
     protected calculateState(): Promise<void> {
         return this.filepoolProvider.getFileStateByUrl(this.siteId, this.fileUrl, this.timemodified).then((state) => {
-            const canDownload = this.sitesProvider.getCurrentSite().canDownloadFiles();
+            this.canDownload = this.sitesProvider.getCurrentSite().canDownloadFiles();
 
             this.state = state;
-            this.isDownloaded = state === CoreConstants.DOWNLOADED || state === CoreConstants.OUTDATED;
-            this.isDownloading = canDownload && state === CoreConstants.DOWNLOADING;
-            this.showDownload = canDownload && (state === CoreConstants.NOT_DOWNLOADED || state === CoreConstants.OUTDATED ||
-                (this.alwaysDownload && state === CoreConstants.DOWNLOADED));
+            this.isDownloading = this.canDownload && state === CoreConstants.DOWNLOADING;
         });
     }
 
@@ -139,12 +134,12 @@ export class CoreFileComponent implements OnInit, OnDestroy {
     /**
      * Download a file and, optionally, open it afterwards.
      *
-     * @param {Event} e Click event.
+     * @param {Event} [e] Click event.
      * @param {boolean} openAfterDownload Whether the file should be opened after download.
      */
-    download(e: Event, openAfterDownload: boolean): void {
-        e.preventDefault();
-        e.stopPropagation();
+    download(e?: Event, openAfterDownload: boolean = false): void {
+        e && e.preventDefault();
+        e && e.stopPropagation();
 
         let promise;
 
@@ -168,7 +163,8 @@ export class CoreFileComponent implements OnInit, OnDestroy {
             return;
         }
 
-        if (!this.appProvider.isOnline() && (!openAfterDownload || (openAfterDownload && !this.isDownloaded))) {
+        if (!this.appProvider.isOnline() && (!openAfterDownload || (openAfterDownload &&
+                !(this.state === CoreConstants.DOWNLOADED || this.state === CoreConstants.OUTDATED)))) {
             this.domUtils.showErrorModal('core.networkerrormsg', true);
 
             return;