list item stying and animation

matt4446 · Mar 21, 2017 · facdb1b · facdb1b
1 parent 7af023f
commit facdb1b
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 49 deletions.
diff --git a/.vscode/symbols.json b/.vscode/symbols.json
diff --git a/app/controls/list/list-item.ts b/app/controls/list/list-item.ts
@@ -12,6 +12,7 @@ import {
 } from "@angular/core";
 import { Observable, Subject, Subscription } from 'rxjs/Rx';
 
+import { AnimationCurve } from "ui/enums";
 import { Button } from "ui/button";
 import { Logger } from "../../providers/logger";
 import { QueryList } from '@angular/core';
@@ -28,7 +29,7 @@ import { StackLayout } from "ui/layouts/stack-layout";
     <StackLayout #item>
 
         <StackLayout>
-            <StackLayout class="nx-item-top-border"></StackLayout>
+            <!--<StackLayout class="nx-item-top-border"></StackLayout>-->
 
             <StackLayout class="nx-item inset-top inset-bottom">
                 <GridLayout #animateItem columns="40, *, 50" rows="auto" (tap)="tapWrapper($event)">
@@ -116,28 +117,35 @@ export class NxListItem {
         let stackLayout: StackLayout = this.getNativeElement();
 
         if(!stackLayout) { return ;}
-
-        this.itemSelected.next(this);
-
+
         let moveRight = stackLayout.animate({
             duration: 100,
-            translate: { x: 20, y: 0 },
-            opacity: 0.8
+            translate: { x: 15, y: 0 },
+            opacity: 0.8,
+            curve: AnimationCurve.easeIn
         }).then(() =>{
-
+            this.itemSelected.next(this);
 
             return stackLayout.animate({ 
                 duration: 100,
                 translate: { x:0, y: 0},
-                opacity: 1
+                opacity: 1,
+                curve: AnimationCurve.easeIn
             });
         }).then(() => {
             //normal router navigation
-            if(this.tap){
-                this.tap.next(args);
-            }
+            setTimeout(() => {
+                this.Navigate(args);
+            }, 200)
+
         });
     };
+
+    private Navigate(args){
+        if(this.tap){
+            this.tap.next(args);
+        }
+    }
 
     public tap = new EventEmitter(); // : (args: EventEmitter<any>) => void;
 }
diff --git a/app/controls/list/list.common.css b/app/controls/list/list.common.css
@@ -28,7 +28,7 @@
     height: 1;
     border-radius: 0;
     border-width: 1;
-    border-color: #548CEC;
+    border-color: #c8c7cc;
 }
 
 .icon-column{

diff --git a/app/controls/list/list.ts b/app/controls/list/list.ts
@@ -1,6 +1,7 @@
 import { Component, ContentChildren, Directive, EventEmitter, Input, Output } from "@angular/core";
 import { Observable, Subject, Subscription } from 'rxjs/Rx';
 
+import { AnimationCurve } from "ui/enums";
 import { Logger } from "../../providers/logger";
 import { NxHeader } from "./header";
 import { NxListItem } from "./list-item";
@@ -37,11 +38,9 @@ import { NxListItem } from "./list-item";
     //inputs:["padding"]
 })
 export class NxList {
-    //@Input() //see @control - inputs
 
     constructor(private logger: Logger)
     {
-        //this.logger.Notify("NxList control Started");
     }
 
     public padding : boolean = false;
@@ -52,57 +51,75 @@ export class NxList {
     set _setHeader(items : any) {
         this.headers = items.toArray();
     }
-    //this should give me a list of shadow elements in ng-content
+
     @ContentChildren(NxListItem)
     set _listItems(items: any){
         this.children  = items.toArray();
 
         var anyReady = this.children.map((item) => item.itemReady);
         var anySelected = this.children.map((item) => item.itemSelected);
 
-        Observable.from(anySelected).flatMap(x=> x).subscribe((item) => {
+        Observable.from(anySelected)
+                    .flatMap(x=> x)
+                    .subscribe((item) => {
 
+            let indexOfSelected = this.children.indexOf(item);
             this.children.forEach((row) => {
-                if(item == row){
+                let indexOfRow = this.children.indexOf(row);
+                let distance = Math.abs(indexOfSelected - indexOfRow);
+                if (distance > 1){ return; }
+
+                if(item == row) {
                     return;
                 }
 
-                var stackPanel = row.getNativeElement();
-
-
-                stackPanel.animate({
-                    opacity: 1,
+                this.AnimateCollection(row, distance);
+            });
+
+        });
+
+    }
+
+    private AnimateCollection(row : NxListItem, distance: number) {
+        var stackPanel = row.getNativeElement();
+        setTimeout(()=> {
+
+
+            stackPanel.animate({
+                opacity: 1,
+                duration: 100,
+                translate: {
+                    x : -15,
+                    y: 0
+                },
+                curve: AnimationCurve.easeIn
+            }).then(() => {
+                return stackPanel.animate({
                     duration: 100,
                     translate: {
-                        x : 40,
+                        x: -200,
                         y: 0
-                    }
-               }).then(() => {
-                   return stackPanel.animate({
-                       duration: 100,
-                       translate: {
-                           x: -200,
-                           y: 0
-                       },
-                       opacity: 0
-                   });
-               }).then(() => {
-                    stackPanel.translateX = 0;
-                    return stackPanel.animate({
-                        duration: 200,
-                        translate: {
-                            x: 0,
-                            y: 0
-                        },
-                        opacity: 1
-                    });
-               });
-
-
+                    },
+                    opacity: 0,
+                    curve: AnimationCurve.easeOut
+                });
+            }).then(() => {
+                stackPanel.translateX = 0;
+                return stackPanel.animate({
+                    duration: 200,
+                    translate: {
+                        x: 0,
+                        y: 0
+                    },
+                    opacity: 1,
+                    curve: AnimationCurve.easeIn
+                });
             });
-
-        });
+
 
+        }, (25*distance));
+
+
     }
 }