MOBILE-3320 core: Add size option to download refresh component

main
Pau Ferrer Ocaña 2021-05-26 14:37:31 +02:00
parent f01301e590
commit 2fafe48af6
5 changed files with 8 additions and 7 deletions

View File

@ -1,14 +1,14 @@
<ng-container *ngIf="enabled && !loading"> <ng-container *ngIf="enabled && !loading">
<!-- Download button. --> <!-- Download button. -->
<ion-button *ngIf="status == statusNotDownloaded" fill="clear" (click)="download($event, false)" color="dark" <ion-button *ngIf="status == statusNotDownloaded" fill="clear" (click)="download($event, false)" color="dark"
[@coreShowHideAnimation] [attr.aria-label]="(statusTranslatable || 'core.download') | translate"> [@coreShowHideAnimation] [attr.aria-label]="(statusTranslatable || 'core.download') | translate" [size]="size">
<ion-icon slot="icon-only" name="cloud-download" aria-hidden="true"></ion-icon> <ion-icon slot="icon-only" name="cloud-download" aria-hidden="true"></ion-icon>
</ion-button> </ion-button>
<!-- Refresh button. --> <!-- Refresh button. -->
<ion-button *ngIf="status == statusOutdated || (status == statusDownloaded && !canTrustDownload)" fill="clear" <ion-button *ngIf="status == statusOutdated || (status == statusDownloaded && !canTrustDownload)" fill="clear"
(click)="download($event, true)" color="dark" [@coreShowHideAnimation] (click)="download($event, true)" color="dark" [@coreShowHideAnimation]
[attr.aria-label]="(statusTranslatable || 'core.refresh') | translate"> [attr.aria-label]="(statusTranslatable || 'core.refresh') | translate" [size]="size">
<ion-icon slot="icon-only" name="fas-redo-alt" aria-hidden="true"></ion-icon> <ion-icon slot="icon-only" name="fas-redo-alt" aria-hidden="true"></ion-icon>
</ion-button> </ion-button>

View File

@ -34,6 +34,7 @@ export class CoreDownloadRefreshComponent {
@Input() statusTranslatable?: string; // Download status translatable string. @Input() statusTranslatable?: string; // Download status translatable string.
@Input() enabled = false; // Whether the download is enabled. @Input() enabled = false; // Whether the download is enabled.
@Input() loading = true; // Force loading status when is not downloading. @Input() loading = true; // Force loading status when is not downloading.
@Input() size: 'small' | 'default' | 'large' = 'default'; // Size of the buttons.
@Input() canTrustDownload = false; // If false, refresh will be shown if downloaded. @Input() canTrustDownload = false; // If false, refresh will be shown if downloaded.
@Output() action: EventEmitter<boolean>; // Will emit an event when the item clicked. @Output() action: EventEmitter<boolean>; // Will emit an event when the item clicked.

View File

@ -9,11 +9,11 @@
</ion-label> </ion-label>
<div slot="end"> <div slot="end">
<core-download-refresh [status]="state" [enabled]="canDownload" [loading]="isDownloading" <core-download-refresh [status]="state" [enabled]="canDownload" [loading]="isDownloading"
[canTrustDownload]="!alwaysDownload" (action)="download()"> [canTrustDownload]="!alwaysDownload" (action)="download()" size="small">
</core-download-refresh> </core-download-refresh>
<ion-button fill="clear" *ngIf="!isDownloading && canDelete" (click)="delete($event)" <ion-button fill="clear" *ngIf="!isDownloading && canDelete" (click)="delete($event)"
[attr.aria-label]="'core.delete' | translate" color="danger"> [attr.aria-label]="'core.delete' | translate" color="danger" size="small">
<ion-icon slot="icon-only" name="fas-trash" aria-hidden="true"></ion-icon> <ion-icon slot="icon-only" name="fas-trash" aria-hidden="true"></ion-icon>
</ion-button> </ion-button>
</div> </div>

View File

@ -167,7 +167,7 @@
</ion-badge> </ion-badge>
<core-download-refresh [status]="section.downloadStatus" [enabled]="downloadEnabled" (action)="prefetch(section)" <core-download-refresh [status]="section.downloadStatus" [enabled]="downloadEnabled" (action)="prefetch(section)"
[loading]="section.isDownloading || section.isCalculating" [canTrustDownload]="section.canCheckUpdates"> [loading]="section.isDownloading || section.isCalculating" [canTrustDownload]="section.canCheckUpdates" size="small">
</core-download-refresh> </core-download-refresh>
</div> </div>
</ng-template> </ng-template>

View File

@ -61,11 +61,11 @@
<div class="core-module-buttons-more"> <div class="core-module-buttons-more">
<core-download-refresh [status]="downloadStatus" [enabled]="downloadEnabled" <core-download-refresh [status]="downloadStatus" [enabled]="downloadEnabled"
[canTrustDownload]="canCheckUpdates" [loading]="spinner || module.handlerData.spinner" [canTrustDownload]="canCheckUpdates" [loading]="spinner || module.handlerData.spinner"
(action)="download($event)"> (action)="download($event)" size="small">
</core-download-refresh> </core-download-refresh>
<!-- Buttons defined by the module handler. --> <!-- Buttons defined by the module handler. -->
<ion-button fill="clear" *ngFor="let button of module.handlerData.buttons" color="dark" <ion-button fill="clear" *ngFor="let button of module.handlerData.buttons" color="dark" size="small"
[hidden]="button.hidden || spinner || module.handlerData.spinner" class="core-animate-show-hide" [hidden]="button.hidden || spinner || module.handlerData.spinner" class="core-animate-show-hide"
(click)="buttonClicked($event, button)" (click)="buttonClicked($event, button)"
[attr.aria-label]="button.label | translate:{$a: module.handlerData.title}"> [attr.aria-label]="button.label | translate:{$a: module.handlerData.title}">