feat:Change styles on dashboard, add animations

src/app/modules/dashboard/dashboard.component.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2021 StApps
+ * Copyright (C) 2022 StApps
  * This program is free software: you can redistribute it and/or modify it
  * under the terms of the GNU General Public License as published by the Free
  * Software Foundation, version 3.
@@ -12,7 +12,14 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
-import {Component, OnInit, OnDestroy} from '@angular/core';
+import {
+  Component,
+  ElementRef,
+  NgZone,
+  OnDestroy,
+  OnInit,
+  ViewChild,
+} from '@angular/core';
 import {Router} from '@angular/router';
 import {Location} from '@angular/common';
 import {Subscription} from 'rxjs';
@@ -22,11 +29,18 @@ import {SplashScreen} from '@capacitor/splash-screen';
 
 import {DataRoutingService} from '../data/data-routing.service';
 import {ScheduleProvider} from '../calendar/schedule.provider';
+import {AnimationController, IonContent} from '@ionic/angular';
+import {DashboardCollapse} from './dashboard-collapse';
+
+// const scrollTimeline = new ScrollTimeline();
 
 @Component({
   selector: 'app-dashboard',
   templateUrl: './dashboard.component.html',
-  styleUrls: ['./dashboard.component.scss'],
+  styleUrls: [
+    './dashboard.component.scss',
+    '/dashboard.collapse.component.scss',
+  ],
 })
 export class DashboardComponent implements OnInit, OnDestroy {
   /**
@@ -34,6 +48,14 @@ export class DashboardComponent implements OnInit, OnDestroy {
    */
   subscriptions: Subscription[] = [];
 
+  @ViewChild('toolbar', {read: ElementRef}) toolbarRef: ElementRef;
+
+  @ViewChild('schedule', {read: ElementRef}) scheduleRef: ElementRef;
+
+  @ViewChild('ionContent') ionContentRef: IonContent;
+
+  collapseAnimation: DashboardCollapse;
+
   /**
    * UUID subscription
    */
@@ -44,6 +66,11 @@ export class DashboardComponent implements OnInit, OnDestroy {
    */
   private uuids: SCUuid[];
 
+  /**
+   * Enable header animation
+   */
+  isHeaderAnimated = true;
+
   /**
    * Next event in calendar
    */
@@ -66,6 +93,8 @@ export class DashboardComponent implements OnInit, OnDestroy {
     private scheduleProvider: ScheduleProvider,
     protected router: Router,
     public location: Location,
+    private animationControl: AnimationController,
+    private zone: NgZone,
   ) {
     this.subscriptions.push(
       this.dataRoutingService.itemSelectListener().subscribe(item => {
@@ -82,6 +111,14 @@ export class DashboardComponent implements OnInit, OnDestroy {
       },
     );
     await SplashScreen.hide();
+
+    this.collapseAnimation = new DashboardCollapse(
+      this.animationControl,
+      this.zone,
+      await this.ionContentRef.getScrollElement(),
+      this.toolbarRef.nativeElement,
+      this.scheduleRef.nativeElement,
+    );
   }
 
   async loadNextEvent() {
@@ -103,5 +140,6 @@ export class DashboardComponent implements OnInit, OnDestroy {
       sub.unsubscribe();
     }
     this._uuidSubscription.unsubscribe();
+    this.collapseAnimation.destroy();
   }
 }