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

MOBILE-3899 core: Fix some animations and a11y

main
Pau Ferrer Ocaña 2021-10-26 16:23:09 +02:00
parent dc2bbe8af1
commit d1f5ad89b7
5 changed files with 15 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/core/components/button-with-spinner/core-button-with-spinner.html
View File

@ -1,6 +1,6 @@
<div *ngIf="!loading" [@coreShowHideAnimation]> <div *ngIf="!loading" @coreShowHideAnimation>
<ng-content></ng-content> <ng-content></ng-content>
</div> </div>
<!-- Spinner. --> <!-- Spinner. -->
<ion-spinner *ngIf="loading" [@coreShowHideAnimation] [attr.aria-label]="loadingLabel | translate"></ion-spinner> <ion-spinner *ngIf="loading" @coreShowHideAnimation [attr.aria-label]="loadingLabel | translate"></ion-spinner>

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

@ -1,25 +1,24 @@
<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
[@coreShowHideAnimation] [attr.aria-label]="(statusTranslatable || 'core.download') | translate" [size]="size"> [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" [size]="size"> [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>
<!-- Downloaded status icon. --> <!-- Downloaded status icon. -->
<ion-icon *ngIf="status == statusDownloaded && canTrustDownload" class="core-icon-downloaded ion-padding-horizontal" <ion-icon *ngIf="status == statusDownloaded && canTrustDownload" class="core-icon-downloaded ion-padding-horizontal" color="success"
color="success" name="cloud-done" [attr.aria-label]="(statusTranslatable || 'core.downloaded') | translate" name="cloud-done" [attr.aria-label]="(statusTranslatable || 'core.downloaded') | translate" role="status"></ion-icon>
role="status"></ion-icon>
<ion-spinner *ngIf="status === statusDownloading" [@coreShowHideAnimation] <ion-spinner *ngIf="status === statusDownloading" @coreShowHideAnimation
[attr.aria-label]="(statusTranslatable || 'core.downloading') | translate"></ion-spinner> [attr.aria-label]="(statusTranslatable || 'core.downloading') | translate"></ion-spinner>
</ng-container> </ng-container>
<!-- Spinner. --> <!-- Spinner. -->
<ion-spinner *ngIf="loading" [@coreShowHideAnimation] [attr.aria-label]="'core.loading' | translate"></ion-spinner> <ion-spinner *ngIf="loading" @coreShowHideAnimation [attr.aria-label]="'core.loading' | translate"></ion-spinner>

4
src/core/components/loading/core-loading.html
View File

@ -1,8 +1,8 @@
<div class="core-loading-container" *ngIf="!hideUntil" role="status" [@coreShowHideAnimation]> <div class="core-loading-container" *ngIf="!hideUntil" role="status" @coreShowHideAnimation>
<ion-spinner color="primary" aria-hidden="true"></ion-spinner> <ion-spinner color="primary" aria-hidden="true"></ion-spinner>
<p class="core-loading-message" *ngIf="message" role="status">{{message}}</p> <p class="core-loading-message" *ngIf="message" role="status">{{message}}</p>
</div> </div>
<div #content class="core-loading-content" [id]="uniqueId" [attr.aria-busy]="!hideUntil" [@coreShowHideAnimation] <div #content class="core-loading-content" [id]="uniqueId" [attr.aria-busy]="!hideUntil" @coreShowHideAnimation
[class.opacity-hide]="!hideUntil"> [class.opacity-hide]="!hideUntil">
<ng-content *ngIf="loaded"> <ng-content *ngIf="loaded">
</ng-content> </ng-content>

2
src/core/features/settings/pages/space-usage/space-usage.html
View File

@ -19,7 +19,7 @@
</ion-refresher> </ion-refresher>
<core-loading [hideUntil]="loaded"> <core-loading [hideUntil]="loaded">
<ion-list> <ion-list>
<ion-item *ngFor="let site of sites" [attr.aria-current]="site.id == currentSiteId ? 'page' : 'false'"> <ion-item *ngFor="let site of sites" [class.item-current]="site.id == currentSiteId">
<ion-label class="ion-text-wrap"> <ion-label class="ion-text-wrap">
<p class="item-heading"> <p class="item-heading">
<core-format-text [text]="site.siteName" clean="true" [siteId]="site.id"></core-format-text> <core-format-text [text]="site.siteName" clean="true" [siteId]="site.id"></core-format-text>

6
src/core/features/settings/pages/synchronization/synchronization.html
View File

@ -31,7 +31,7 @@
<h2>{{ 'core.settings.sites' | translate }}</h2> <h2>{{ 'core.settings.sites' | translate }}</h2>
</ion-label> </ion-label>
</ion-item-divider> </ion-item-divider>
<ion-item *ngFor="let site of sites" [attr.aria-current]="site.id == currentSiteId ? 'page' : 'false'" class="ion-text-wrap"> <ion-item *ngFor="let site of sites" [class.item-current]="site.id == currentSiteId" class="ion-text-wrap">
<ion-label> <ion-label>
<p class="item-heading"> <p class="item-heading">
<core-format-text [text]="site.siteName" clean="true" [siteId]="site.id"></core-format-text> <core-format-text [text]="site.siteName" clean="true" [siteId]="site.id"></core-format-text>
@ -40,8 +40,8 @@
<p>{{ site.siteUrl }}</p> <p>{{ site.siteUrl }}</p>
</ion-label> </ion-label>
<core-button-with-spinner [loading]="isSynchronizing(site.id)" slot="end"> <core-button-with-spinner [loading]="isSynchronizing(site.id)" slot="end">
<ion-button fill="clear" (click)="synchronize(site.id)" <ion-button fill="clear" (click)="synchronize(site.id)" [title]="site.siteName"
[title]="site.siteName" [attr.aria-label]="'core.settings.synchronizenow' | translate"> [attr.aria-label]="'core.settings.synchronizenow' | translate">
<ion-icon name="fas-sync-alt" slot="icon-only" aria-hidden="true"></ion-icon> <ion-icon name="fas-sync-alt" slot="icon-only" aria-hidden="true"></ion-icon>
</ion-button> </ion-button>
</core-button-with-spinner> </core-button-with-spinner>