From 5b5dcd8b79d74b8aa7f78078926b615c1602fbcf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Wed, 24 Apr 2019 14:11:43 +0200
Subject: [PATCH] MOBILE-2895 file: Show download status on files
---
.../download-refresh/download-refresh.scss | 9 +++------
src/components/file/core-file.html | 7 +++----
src/components/file/file.scss | 15 ++++++++++++++
src/components/file/file.ts | 20 ++++++++-----------
4 files changed, 29 insertions(+), 22 deletions(-)
diff --git a/src/components/download-refresh/download-refresh.scss b/src/components/download-refresh/download-refresh.scss
index 52ed6dbf1..46381a154 100644
--- a/src/components/download-refresh/download-refresh.scss
+++ b/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;*/
- }
}
diff --git a/src/components/file/core-file.html b/src/components/file/core-file.html
index 1ae020dfa..071deec11 100644
--- a/src/components/file/core-file.html
+++ b/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>
diff --git a/src/components/file/file.scss b/src/components/file/file.scss
index a39dcde10..227c565b8 100644
--- a/src/components/file/file.scss
+++ b/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;
+ }
}
}
\ No newline at end of file
diff --git a/src/components/file/file.ts b/src/components/file/file.ts
index 53fb53aa6..22d0c98af 100644
--- a/src/components/file/file.ts
+++ b/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;