From 45ca74410c21fad99fa56050e49915d34d8e134f Mon Sep 17 00:00:00 2001 From: William Welling Date: Wed, 4 Oct 2017 15:39:08 -0500 Subject: [PATCH] simple loading animation and fade in and out animations --- rollup.config.js | 42 +++++------ .../collection-page.component.html | 4 +- .../collection-page.component.ts | 11 ++- .../community-page.component.html | 2 +- .../community-page.component.ts | 3 + ...ty-page-sub-collection-list.component.html | 4 +- ...nity-page-sub-collection-list.component.ts | 3 + .../top-level-community-list.component.html | 2 +- .../top-level-community-list.component.ts | 4 +- .../full/full-item-page.component.html | 2 +- .../full/full-item-page.component.ts | 5 ++ .../simple/item-page.component.html | 2 +- .../+item-page/simple/item-page.component.ts | 5 ++ .../+search-page/search-page.component.html | 7 +- src/app/+search-page/search-page.component.ts | 12 ++-- .../search-results.component.html | 8 ++- src/app/app.component.html | 26 +++---- src/app/browser-app.module.ts | 2 + .../object-list/object-list.component.html | 5 +- src/app/server-app.module.ts | 2 + src/app/shared/animations/fade.ts | 24 +++++++ src/app/shared/error/error.component.html | 4 +- src/app/shared/error/error.component.spec.ts | 4 +- src/app/shared/loading/loading.component.html | 16 ++++- src/app/shared/loading/loading.component.scss | 72 +++++++++++++++++++ .../shared/loading/loading.component.spec.ts | 4 +- .../object-list/object-list.component.ts | 5 +- 27 files changed, 222 insertions(+), 58 deletions(-) create mode 100644 src/app/shared/animations/fade.ts diff --git a/rollup.config.js b/rollup.config.js index a47b46dd37..caa63ac03e 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -1,20 +1,22 @@ -import nodeResolve from 'rollup-plugin-node-resolve' -import commonjs from 'rollup-plugin-commonjs'; -import uglify from 'rollup-plugin-uglify' - -export default { - entry: 'dist/client.js', - dest: 'dist/client.js', - sourceMap: false, - format: 'iife', - plugins: [ - nodeResolve({ - jsnext: true, - module: true - }), - commonjs({ - include: 'node_modules/rxjs/**' - }), - uglify() - ] -} +import nodeResolve from 'rollup-plugin-node-resolve' +import commonjs from 'rollup-plugin-commonjs'; +import uglify from 'rollup-plugin-uglify' + +export default { + input: 'dist/client.js', + output: { + file: 'dist/client.js', + format: 'iife', + }, + sourceMap: false, + plugins: [ + nodeResolve({ + jsnext: true, + module: true + }), + commonjs({ + include: 'node_modules/rxjs/**' + }), + uglify() + ] +} diff --git a/src/app/+collection-page/collection-page.component.html b/src/app/+collection-page/collection-page.component.html index 8a8f2f0aad..a4e81cd272 100644 --- a/src/app/+collection-page/collection-page.component.html +++ b/src/app/+collection-page/collection-page.component.html @@ -1,5 +1,5 @@
-
+
@@ -34,7 +34,7 @@
-
+

{{'collection.page.browse.recent.head' | translate}}

; diff --git a/src/app/+community-page/community-page.component.html b/src/app/+community-page/community-page.component.html index f29fa364fb..1acaf2d89e 100644 --- a/src/app/+community-page/community-page.component.html +++ b/src/app/+community-page/community-page.component.html @@ -1,4 +1,4 @@ -
+
diff --git a/src/app/+community-page/community-page.component.ts b/src/app/+community-page/community-page.component.ts index 2bd19b0f06..d1d1081757 100644 --- a/src/app/+community-page/community-page.component.ts +++ b/src/app/+community-page/community-page.component.ts @@ -9,10 +9,13 @@ import { RemoteData } from '../core/data/remote-data'; import { CommunityDataService } from '../core/data/community-data.service'; import { hasValue } from '../shared/empty.util'; +import { fadeInOut } from '../shared/animations/fade'; + @Component({ selector: 'ds-community-page', styleUrls: ['./community-page.component.scss'], templateUrl: './community-page.component.html', + animations:[fadeInOut] }) export class CommunityPageComponent implements OnInit, OnDestroy { communityData: RemoteData; diff --git a/src/app/+community-page/sub-collection-list/community-page-sub-collection-list.component.html b/src/app/+community-page/sub-collection-list/community-page-sub-collection-list.component.html index f1f05a0467..82ae6bd3e1 100644 --- a/src/app/+community-page/sub-collection-list/community-page-sub-collection-list.component.html +++ b/src/app/+community-page/sub-collection-list/community-page-sub-collection-list.component.html @@ -1,4 +1,4 @@ -
+

{{'community.sub-collection-list.head' | translate}}

  • @@ -9,3 +9,5 @@
+ + diff --git a/src/app/+community-page/sub-collection-list/community-page-sub-collection-list.component.ts b/src/app/+community-page/sub-collection-list/community-page-sub-collection-list.component.ts index caa764c39f..618890a60c 100644 --- a/src/app/+community-page/sub-collection-list/community-page-sub-collection-list.component.ts +++ b/src/app/+community-page/sub-collection-list/community-page-sub-collection-list.component.ts @@ -4,10 +4,13 @@ import { CollectionDataService } from '../../core/data/collection-data.service'; import { RemoteData } from '../../core/data/remote-data'; import { Collection } from '../../core/shared/collection.model'; +import { fadeIn } from '../../shared/animations/fade'; + @Component({ selector: 'ds-community-page-sub-collection-list', styleUrls: ['./community-page-sub-collection-list.component.scss'], templateUrl: './community-page-sub-collection-list.component.html', + animations:[fadeIn] }) export class CommunityPageSubCollectionListComponent implements OnInit { subCollections: RemoteData; diff --git a/src/app/+home-page/top-level-community-list/top-level-community-list.component.html b/src/app/+home-page/top-level-community-list/top-level-community-list.component.html index c8a889a4f7..69df3b99d0 100644 --- a/src/app/+home-page/top-level-community-list/top-level-community-list.component.html +++ b/src/app/+home-page/top-level-community-list/top-level-community-list.component.html @@ -1,4 +1,4 @@ -
+

{{'home.top-level-communities.head' | translate}}

{{'home.top-level-communities.help' | translate}}

; config: PaginationComponentOptions; diff --git a/src/app/+item-page/full/full-item-page.component.html b/src/app/+item-page/full/full-item-page.component.html index ccd8ca3932..bc8ee3f3a8 100644 --- a/src/app/+item-page/full/full-item-page.component.html +++ b/src/app/+item-page/full/full-item-page.component.html @@ -1,4 +1,4 @@ -
+
diff --git a/src/app/+item-page/full/full-item-page.component.ts b/src/app/+item-page/full/full-item-page.component.ts index c952954235..4617119402 100644 --- a/src/app/+item-page/full/full-item-page.component.ts +++ b/src/app/+item-page/full/full-item-page.component.ts @@ -1,4 +1,6 @@ import { Component, OnInit } from '@angular/core'; +import { animate, state, transition, trigger, style, keyframes } from '@angular/animations'; + import { Observable } from 'rxjs/Observable'; import { ItemPageComponent } from '../simple/item-page.component'; @@ -8,6 +10,8 @@ import { ActivatedRoute } from '@angular/router'; import { RemoteData } from '../../core/data/remote-data'; import { Item } from '../../core/shared/item.model'; +import { fadeInOut } from '../../shared/animations/fade'; + /** * This component renders a simple item page. * The route parameter 'id' is used to request the item it represents. @@ -18,6 +22,7 @@ import { Item } from '../../core/shared/item.model'; selector: 'ds-full-item-page', styleUrls: ['./full-item-page.component.scss'], templateUrl: './full-item-page.component.html', + animations:[fadeInOut ] }) export class FullItemPageComponent extends ItemPageComponent implements OnInit { diff --git a/src/app/+item-page/simple/item-page.component.html b/src/app/+item-page/simple/item-page.component.html index fe7e1138e6..a08a62684a 100644 --- a/src/app/+item-page/simple/item-page.component.html +++ b/src/app/+item-page/simple/item-page.component.html @@ -1,4 +1,4 @@ -
+
diff --git a/src/app/+item-page/simple/item-page.component.ts b/src/app/+item-page/simple/item-page.component.ts index dd37036c21..3ea9180b8d 100644 --- a/src/app/+item-page/simple/item-page.component.ts +++ b/src/app/+item-page/simple/item-page.component.ts @@ -1,5 +1,7 @@ import { Component, OnInit } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; +import { animate, state, transition, trigger, style, keyframes } from '@angular/animations'; + import { Observable } from 'rxjs/Observable'; import { Item } from '../../core/shared/item.model'; @@ -7,6 +9,8 @@ import { ItemDataService } from '../../core/data/item-data.service'; import { RemoteData } from '../../core/data/remote-data'; import { Bitstream } from '../../core/shared/bitstream.model'; +import { fadeInOut } from '../../shared/animations/fade'; + /** * This component renders a simple item page. * The route parameter 'id' is used to request the item it represents. @@ -16,6 +20,7 @@ import { Bitstream } from '../../core/shared/bitstream.model'; selector: 'ds-item-page', styleUrls: ['./item-page.component.scss'], templateUrl: './item-page.component.html', + animations:[fadeInOut] }) export class ItemPageComponent implements OnInit { diff --git a/src/app/+search-page/search-page.component.html b/src/app/+search-page/search-page.component.html index a8747a6cf9..d5e3a831eb 100644 --- a/src/app/+search-page/search-page.component.html +++ b/src/app/+search-page/search-page.component.html @@ -1,4 +1,9 @@
- + +
diff --git a/src/app/+search-page/search-page.component.ts b/src/app/+search-page/search-page.component.ts index 90da376597..052eccd33a 100644 --- a/src/app/+search-page/search-page.component.ts +++ b/src/app/+search-page/search-page.component.ts @@ -23,18 +23,22 @@ import { Community } from '../core/shared/community.model'; templateUrl: './search-page.component.html', }) export class SearchPageComponent implements OnInit, OnDestroy { + private sub; - query: string; private scope: string; + + query: string; scopeObject: RemoteData; results: RemoteData>>; currentParams = {}; searchOptions: SearchOptions; scopeList: RemoteData; - constructor(private service: SearchService, - private route: ActivatedRoute, - private communityService: CommunityDataService,) { + constructor( + private service: SearchService, + private route: ActivatedRoute, + private communityService: CommunityDataService + ) { this.scopeList = communityService.findAll(); // Initial pagination config const pagination: PaginationComponentOptions = new PaginationComponentOptions(); diff --git a/src/app/+search-page/search-results/search-results.component.html b/src/app/+search-page/search-results/search-results.component.html index 7d769dbeb0..08e63d598d 100644 --- a/src/app/+search-page/search-results/search-results.component.html +++ b/src/app/+search-page/search-results/search-results.component.html @@ -1,3 +1,7 @@

{{ 'search.results.title' | translate }}

- \ No newline at end of file + + \ No newline at end of file diff --git a/src/app/app.component.html b/src/app/app.component.html index a227b80ab0..2a621be2c4 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,13 +1,13 @@ -
-
- - -
-
- -
-
- - -
-
+
+
+ + +
+
+ +
+
+ + +
+
diff --git a/src/app/browser-app.module.ts b/src/app/browser-app.module.ts index a8e6b08312..0904ba9ecc 100644 --- a/src/app/browser-app.module.ts +++ b/src/app/browser-app.module.ts @@ -2,6 +2,7 @@ import { NgModule, APP_INITIALIZER } from '@angular/core'; import { HttpClientModule, HttpClient } from '@angular/common/http'; import { RouterModule } from '@angular/router'; import { BrowserModule } from '@angular/platform-browser'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { IdlePreload, IdlePreloadModule } from '@angularclass/idle-preload'; @@ -44,6 +45,7 @@ export function createTranslateLoader(http: HttpClient) { preloadingStrategy: IdlePreload }), + BrowserAnimationsModule, BrowserTransferStateModule, BrowserTransferStoreModule, TranslateModule.forRoot({ diff --git a/src/app/object-list/object-list.component.html b/src/app/object-list/object-list.component.html index 0765e00476..1fa0a85165 100644 --- a/src/app/object-list/object-list.component.html +++ b/src/app/object-list/object-list.component.html @@ -9,10 +9,11 @@ (sortDirectionChange)="onSortDirectionChange($event)" (sortFieldChange)="onSortDirectionChange($event)" (paginationChange)="onPaginationChange($event)"> -
    +
    - + + diff --git a/src/app/server-app.module.ts b/src/app/server-app.module.ts index 0b9a9fec1c..0eea0cac24 100644 --- a/src/app/server-app.module.ts +++ b/src/app/server-app.module.ts @@ -5,6 +5,7 @@ import { ApplicationRef, NgModule, APP_BOOTSTRAP_LISTENER } from '@angular/core' import { RouterModule } from '@angular/router'; import { ServerModule } from '@angular/platform-server'; import { BrowserModule } from '@angular/platform-browser'; +import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { Request } from 'express'; @@ -53,6 +54,7 @@ export function createTranslateLoader() { RouterModule.forRoot([], { useHash: false }), + NoopAnimationsModule, ServerTransferStateModule, ServerTransferStoreModule, TranslateModule.forRoot({ diff --git a/src/app/shared/animations/fade.ts b/src/app/shared/animations/fade.ts new file mode 100644 index 0000000000..e5272cc123 --- /dev/null +++ b/src/app/shared/animations/fade.ts @@ -0,0 +1,24 @@ +import { animate, state, transition, trigger, style, keyframes } from '@angular/animations'; + +const fadeEnter = transition(':enter', [ + style({ opacity: 0 }), + animate(300, style({ opacity: 1 })) +]); + +const fadeLeave = transition(':leave', [ + style({ opacity: 1 }), + animate(400, style({ opacity: 0 })) +]); + +export const fadeIn = trigger('fadeIn', [ + fadeEnter +]); + +export const fadeOut = trigger('fadeOut', [ + fadeLeave +]); + +export const fadeInOut = trigger('fadeInOut', [ + fadeEnter, + fadeLeave +]); diff --git a/src/app/shared/error/error.component.html b/src/app/shared/error/error.component.html index fb5224e1ac..83b189b6fe 100644 --- a/src/app/shared/error/error.component.html +++ b/src/app/shared/error/error.component.html @@ -1 +1,3 @@ -
    {{ message }}
    \ No newline at end of file +
    + {{ message }} +
    diff --git a/src/app/shared/error/error.component.spec.ts b/src/app/shared/error/error.component.spec.ts index 078aa95592..1417d3ffe7 100644 --- a/src/app/shared/error/error.component.spec.ts +++ b/src/app/shared/error/error.component.spec.ts @@ -22,8 +22,8 @@ describe('ErrorComponent (inline template)', () => { comp = fixture.componentInstance; // ErrorComponent test instance - // query for the title
    by CSS element selector - de = fixture.debugElement.query(By.css('div')); + // query for the message by CSS element selector + de = fixture.debugElement.query(By.css('span')); el = de.nativeElement; }); diff --git a/src/app/shared/loading/loading.component.html b/src/app/shared/loading/loading.component.html index fb5224e1ac..c5faa49365 100644 --- a/src/app/shared/loading/loading.component.html +++ b/src/app/shared/loading/loading.component.html @@ -1 +1,15 @@ -
    {{ message }}
    \ No newline at end of file +
    + {{ message }} +
    + + + + + + + + + + +
    +
    diff --git a/src/app/shared/loading/loading.component.scss b/src/app/shared/loading/loading.component.scss index e69de29bb2..bb98849cae 100644 --- a/src/app/shared/loading/loading.component.scss +++ b/src/app/shared/loading/loading.component.scss @@ -0,0 +1,72 @@ +.loader { + margin: 0px 25px; +} + +span { + display: block; + margin: 0 auto; +} + +span[class*="l-"] { + height: 4px; width: 4px; + background: #000; + display: inline-block; + margin: 12px 2px; + + border-radius: 100%; + -webkit-border-radius: 100%; + -moz-border-radius: 100%; + + -webkit-animation: loader 2s infinite; + -webkit-animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415); + -webkit-animation-fill-mode: both; + -moz-animation: loader 2s infinite; + -moz-animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415); + -moz-animation-fill-mode: both; + -ms-animation: loader 2s infinite; + -ms-animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415); + -ms-animation-fill-mode: both; + animation: loader 2s infinite; + animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415); + animation-fill-mode: both; +} + +span.l-1 {-webkit-animation-delay: 1s;animation-delay: 1s;-ms-animation-delay: 1s;-moz-animation-delay: 1s;} +span.l-2 {-webkit-animation-delay: 0.9s;animation-delay: 0.9s;-ms-animation-delay: 0.9s;-moz-animation-delay: 0.9s;} +span.l-3 {-webkit-animation-delay: 0.8s;animation-delay: 0.8s;-ms-animation-delay: 0.8s;-moz-animation-delay: 0.8s;} +span.l-4 {-webkit-animation-delay: 0.7s;animation-delay: 0.7s;-ms-animation-delay: 0.7s;-moz-animation-delay: 0.7s;} +span.l-5 {-webkit-animation-delay: 0.6s;animation-delay: 0.6s;-ms-animation-delay: 0.6s;-moz-animation-delay: 0.6s;} +span.l-6 {-webkit-animation-delay: 0.5s;animation-delay: 0.5s;-ms-animation-delay: 0.5s;-moz-animation-delay: 0.5s;} +span.l-7 {-webkit-animation-delay: 0.4s;animation-delay: 0.4s;-ms-animation-delay: 0.4s;-moz-animation-delay: 0.4s;} +span.l-8 {-webkit-animation-delay: 0.3s;animation-delay: 0.3s;-ms-animation-delay: 0.3s;-moz-animation-delay: 0.3s;} +span.l-9 {-webkit-animation-delay: 0.2s;animation-delay: 0.2s;-ms-animation-delay: 0.2s;-moz-animation-delay: 0.2s;} +span.l-9 {-webkit-animation-delay: 0.1s;animation-delay: 0.1s;-ms-animation-delay: 0.1s;-moz-animation-delay: 0.1s;} +span.l-10 {-webkit-animation-delay: 0s;animation-delay: 0s;-ms-animation-delay: 0s;-moz-animation-delay: 0s;} + +@-webkit-keyframes loader { + 0% {-webkit-transform: translateX(-30px); opacity: 0;} + 25% {opacity: 1;} + 50% {-webkit-transform: translateX(30px); opacity: 0;} + 100% {opacity: 0;} +} + +@-moz-keyframes loader { + 0% {-moz-transform: translateX(-30px); opacity: 0;} + 25% {opacity: 1;} + 50% {-moz-transform: translateX(30px); opacity: 0;} + 100% {opacity: 0;} +} + +@-keyframes loader { + 0% {-transform: translateX(-30px); opacity: 0;} + 25% {opacity: 1;} + 50% {-transform: translateX(30px); opacity: 0;} + 100% {opacity: 0;} +} + +@-ms-keyframes loader { + 0% {-ms-transform: translateX(-30px); opacity: 0;} + 25% {opacity: 1;} + 50% {-ms-transform: translateX(30px); opacity: 0;} + 100% {opacity: 0;} +} \ No newline at end of file diff --git a/src/app/shared/loading/loading.component.spec.ts b/src/app/shared/loading/loading.component.spec.ts index 45583ed198..e407083479 100644 --- a/src/app/shared/loading/loading.component.spec.ts +++ b/src/app/shared/loading/loading.component.spec.ts @@ -22,8 +22,8 @@ describe('LoadingComponent (inline template)', () => { comp = fixture.componentInstance; // LoadingComponent test instance - // query for the title
    by CSS element selector - de = fixture.debugElement.query(By.css('div')); + // query for the message by CSS element selector + de = fixture.debugElement.query(By.css('span')); el = de.nativeElement; }); diff --git a/src/app/shared/object-list/object-list.component.ts b/src/app/shared/object-list/object-list.component.ts index c3018b957c..dbc0c3b75c 100644 --- a/src/app/shared/object-list/object-list.component.ts +++ b/src/app/shared/object-list/object-list.component.ts @@ -18,12 +18,15 @@ import { PaginationComponentOptions } from '../pagination/pagination-component-o import { SortOptions, SortDirection } from '../../core/cache/models/sort-options.model'; import { ListableObject } from '../../object-list/listable-object/listable-object.model'; +import { fadeIn } from '../../shared/animations/fade'; + @Component({ changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.Emulated, selector: 'ds-object-list', styleUrls: ['../../object-list/object-list.component.scss'], - templateUrl: '../../object-list/object-list.component.html' + templateUrl: '../../object-list/object-list.component.html', + animations:[fadeIn] }) export class ObjectListComponent implements OnChanges, OnInit {