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

MOBILE-3594 core: Add animations class

main
Pau Ferrer Ocaña 2020-11-19 13:56:58 +01:00
parent f76c54b053
commit c3e59edf18
8 changed files with 88 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
package-lock.json generated
View File

@ -390,6 +390,14 @@
}
}
},
"@angular/animations": {
"version": "11.0.1",
"resolved": "https://registry.npmjs.org/@angular/animations/-/animations-11.0.1.tgz",
"integrity": "sha512-RS2ZsO3yidn/dMAllR+V0EX5BOQLQDi5s2kvd4wANHYAkU/yVXWKl09nbe8LTwLVH+iOYX7AAcAUUokQPEEHxQ==",
"requires": {
"tslib": "^2.0.0"
}
},
"@angular/cli": {
"version": "10.0.8",
"resolved": "https://registry.npmjs.org/@angular/cli/-/cli-10.0.8.tgz",
@ -6514,7 +6522,7 @@
"integrity": "sha512-EYC5eQFVkoYXq39l7tYKE6lEjHJ04mvTmKXxGL7quHLdFPfJMNzru/UYpn92AOfpl3PQaZmou78C7EgmFOwFQQ=="
},
"cordova-plugin-wkuserscript": {
"version": "git+https://github.com/moodlemobile/cordova-plugin-wkuserscript.git#aa77d0f98a3fb106f2e798e5adf5882f01a2c947",
"version": "git+https://github.com/moodlemobile/cordova-plugin-wkuserscript.git#6413f4bb3c2565f353e690b5c1450b69ad9e860e",
"from": "git+https://github.com/moodlemobile/cordova-plugin-wkuserscript.git"
},
"cordova-plugin-wkwebview-cookies": {

1
package.json
View File

@ -32,6 +32,7 @@
"ionic:build:before": "npx gulp"
},
"dependencies": {
"@angular/animations": "^11.0.1",
"@angular/common": "~10.0.0",
"@angular/core": "~10.0.0",
"@angular/forms": "~10.0.0",

2
src/app/app.module.ts
View File

@ -14,6 +14,7 @@
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { RouteReuseStrategy } from '@angular/router';
import { HttpClient, HttpClientModule } from '@angular/common/http';
@ -38,6 +39,7 @@ export function createTranslateLoader(http: HttpClient): TranslateHttpLoader {
entryComponents: [],
imports: [
BrowserModule,
BrowserAnimationsModule,
IonicModule.forRoot(),
HttpClientModule, // HttpClient is used to make JSON requests. It fails for HEAD requests because there is no content.
TranslateModule.forRoot({

65
src/core/classes/animations.ts 100644
View File

@ -0,0 +1,65 @@
// (C) Copyright 2015 Moodle Pty Ltd.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
import { trigger, style, transition, animate, keyframes } from '@angular/animations';
export const coreShowHideAnimation = trigger('coreShowHideAnimation', [
transition(':enter', [
style({ opacity: 0 }),
animate('500ms ease-in-out', style({ opacity: 1 })),
]),
transition(':leave', [
style({ opacity: 1 }),
animate('500ms ease-in-out', style({ opacity: 0 })),
]),
]);
export const coreSlideInOut = trigger('coreSlideInOut', [
// Enter animation.
transition('void => fromLeft', [
style({ transform: 'translateX(0)', opacity: 1 }),
animate(300, keyframes([
style({ opacity: 0, transform: 'translateX(-100%)', offset: 0 }),
style({ opacity: 1, transform: 'translateX(5%)', offset: 0.7 }),
style({ opacity: 1, transform: 'translateX(0)', offset: 1.0 }),
])),
]),
// Leave animation.
transition('fromLeft => void', [
style({ transform: 'translateX(-100%)', opacity: 0 }),
animate(300, keyframes([
style({ opacity: 1, transform: 'translateX(0)', offset: 0 }),
style({ opacity: 1, transform: 'translateX(5%)', offset: 0.3 }),
style({ opacity: 0, transform: 'translateX(-100%)', offset: 1.0 }),
])),
]),
// Enter animation.
transition('void => fromRight', [
style({ transform: 'translateX(0)', opacity: 1 }),
animate(300, keyframes([
style({ opacity: 0, transform: 'translateX(100%)', offset: 0 }),
style({ opacity: 1, transform: 'translateX(-5%)', offset: 0.7 }),
style({ opacity: 1, transform: 'translateX(0)', offset: 1.0 }),
])),
]),
// Leave animation.
transition('fromRight => void', [
style({ transform: 'translateX(-100%)', opacity: 0 }),
animate(300, keyframes([
style({ opacity: 1, transform: 'translateX(0)', offset: 0 }),
style({ opacity: 1, transform: 'translateX(-5%)', offset: 0.3 }),
style({ opacity: 0, transform: 'translateX(100%)', offset: 1.0 }),
])),
]),
]);

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

@ -1,13 +1,13 @@
<ng-container *ngIf="enabled && !loading">
<!-- Download button. -->
<ion-button *ngIf="status == statusNotDownloaded" fill="clear" (click)="download($event, false)" color="dark"
class="core-animate-show-hide" [attr.aria-label]="(statusTranslatable || 'core.download') | translate">
[@coreShowHideAnimation] [attr.aria-label]="(statusTranslatable || 'core.download') | translate">
<ion-icon slot="icon-only" name="cloud-download"></ion-icon>
</ion-button>
<!-- Refresh button. -->
<ion-button *ngIf="status == statusOutdated || (status == statusDownloaded && !canTrustDownload)" fill="clear"
(click)="download($event, true)" color="dark" class="core-animate-show-hide"
(click)="download($event, true)" color="dark" [@coreShowHideAnimation]
attr.aria-label]="(statusTranslatable || 'core.refresh') | translate">
<ion-icon slot="icon-only" name="fas-redo-alt"></ion-icon>
</ion-button>
@ -17,9 +17,9 @@
color="success" name="cloud-done" [attr.aria-label]="(statusTranslatable || 'core.downloaded') | translate"
role="status"></ion-icon>
<ion-spinner *ngIf="status === statusDownloading" class="core-animate-show-hide"
<ion-spinner *ngIf="status === statusDownloading" [@coreShowHideAnimation]
[attr.aria-label]="(statusTranslatable || 'core.downloading') | translate"></ion-spinner>
</ng-container>
<!-- Spinner. -->
<ion-spinner *ngIf="loading" class="core-animate-show-hide" [attr.aria-label]="'core.loading' | translate"></ion-spinner>
<ion-spinner *ngIf="loading" [@coreShowHideAnimation] [attr.aria-label]="'core.loading' | translate"></ion-spinner>

2
src/core/components/download-refresh/download-refresh.ts
View File

@ -14,6 +14,7 @@
import { Component, Input, Output, EventEmitter } from '@angular/core';
import { CoreConstants } from '@/core/constants';
import { coreShowHideAnimation } from '@classes/animations';
/**
* Component to show a download button with refresh option, the spinner and the status of it.
@ -25,6 +26,7 @@ import { CoreConstants } from '@/core/constants';
selector: 'core-download-refresh',
templateUrl: 'core-download-refresh.html',
styleUrls: ['download-refresh.scss'],
animations: [coreShowHideAnimation],
})
export class CoreDownloadRefreshComponent {

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

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

3
src/core/components/loading/loading.ts
View File

@ -17,6 +17,7 @@ import { Component, Input, OnInit, OnChanges, SimpleChange, ViewChild, ElementRe
import { CoreEventLoadingChangedData, CoreEvents } from '@singletons/events';
import { CoreUtils } from '@services/utils/utils';
import { Translate } from '@singletons/core.singletons';
import { coreShowHideAnimation } from '@classes/animations';
/**
* Component to show a loading spinner and message while data is being loaded.
@ -42,7 +43,7 @@ import { Translate } from '@singletons/core.singletons';
selector: 'core-loading',
templateUrl: 'core-loading.html',
styleUrls: ['loading.scss'],
// @todo animations: [coreShowHideAnimation],
animations: [coreShowHideAnimation],
})
export class CoreLoadingComponent implements OnInit, OnChanges, AfterViewInit {