feat: adding roster row animations

projects/components/src/lib/clan-roster-list-view/clan-roster-list-view.component-story.stories.ts

@@ -0,0 +1,24 @@
+import { Component, OnInit, Input, ChangeDetectionStrategy, PipeTransform, Pipe } from '@angular/core';
+import { MemberProfile, ClanMember } from 'bungie-models';
+@Component({
+  selector: 'lib-clan-roster-list-view-story',
+  template: `
+    <lib-clan-roster-list-view [members]="members" [isLoading]="isLoading"></lib-clan-roster-list-view>
+    <button (click)="click()">Button</button>
+  `
+})
+export class ClanListViewStoryComponent implements OnInit {
+  @Input()
+  members;
+
+  @Input()
+  isLoading: boolean = true;
+
+  constructor() {}
+
+  ngOnInit(): void {}
+
+  click() {
+    this.members = this.members.concat([this.members[0]]);
+  }
+}

projects/components/src/lib/clan-roster-list-view/clan-roster-list-view.component.css

@@ -46,23 +46,34 @@ mat-row {
   padding-left: 0.75rem;
   padding-right: 0.75rem;
 }
-.mat-column-bungiedisplayName {
+.mat-column-bungieDisplayName {
   flex: 1 0 100px;
   min-width: 150px;
   padding-right: 0.75rem;
 }
 .mat-column-characters {
-  flex: 1 0 150px;
+  flex: 0 0 200px;
   justify-content: space-around;
   align-items: stretch;
 }
 
 .mat-column-powerBonus {
-  flex: 0 0 75px;
+  flex: 0 0 50px;
   justify-content: space-around;
   align-items: stretch;
 }
 
+.mat-column-activeScore {
+  flex: 0 0 75px;
+  justify-content: space-around;
+}
+
+.mat-column-lifetimeScore {
+  flex: 0 0 75px;
+  justify-content: space-around;
+}
+
+
 .mat-column-joinDate {
   flex: 0 0 100px;
 }

projects/components/src/lib/clan-roster-list-view/clan-roster-list-view.component.html

@@ -24,13 +24,13 @@
   <ng-container matColumnDef="characters">
     <mat-header-cell *matHeaderCellDef mat-sort-header>
       Characters
-      <div class="titan-cell p-2">
+      <div class="titan-cell p-1 m-1">
         <mat-icon [svgIcon]="'titan'"></mat-icon>
       </div>
-      <div class="hunter-cell p-2">
+      <div class="hunter-cell p-1 m-1">
         <mat-icon [svgIcon]="'hunter'"></mat-icon>
       </div>
-      <div class="warlock-cell p-2">
+      <div class="warlock-cell p-1 m-1">
         <mat-icon [svgIcon]="'warlock'"></mat-icon>
       </div>
     </mat-header-cell>
@@ -107,5 +107,5 @@
   <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
   <mat-header-row *matHeaderRowDef="['loadingRow'] ; sticky:true"
     [ngClass]="{'loading': isLoading, 'loading-row': true}"></mat-header-row>
-  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
+  <mat-row *matRowDef="let row; columns: displayedColumns;" @rowsAnimation></mat-row>
 </mat-table>

projects/components/src/lib/clan-roster-list-view/clan-roster-list-view.component.stories.ts

@@ -14,6 +14,8 @@ import { PipesModule } from '../pipes/pipes.module';
 import { ClassCellComponent, ClassIconPipe } from './class-cell.component';
 
 import { withKnobs, boolean } from '@storybook/addon-knobs';
+import { ClanListViewStoryComponent } from './clan-roster-list-view.component-story.stories';
+
 export default {
   title: 'Clan / Member Roster',
   decorators: [
@@ -26,20 +28,40 @@ export default {
         MatIconModule,
         MaterialModule,
         IconsModule,
-        PipesModule
+        PipesModule,
+        ClanRosterListViewModule
       ],
-      declarations: [ClanRosterListViewComponent, ClassCellComponent, ClassIconPipe]
+      declarations: [ClanListViewStoryComponent]
     })
   ]
 };
 
+let members = MEMBERS;
+
+const addRow = () => {
+  members = members.concat([MEMBERS[0]]);
+  console.log(members);
+};
+
 export const base = () => ({
   component: ClanRosterListViewComponent,
   template: `
     <lib-clan-roster-list-view [members]="roster"  [isLoading]="isLoading"></lib-clan-roster-list-view>
    `,
   props: {
-    roster: MEMBERS,
-    isLoading: boolean('Is Loading', true)
+    roster: members,
+    isLoading: boolean('Is Loading', false),
+    click: addRow
+  }
+});
+export const dynamic = () => ({
+  component: ClanRosterListViewComponent,
+  template: `
+    <lib-clan-roster-list-view-story [members]="roster"  [isLoading]="isLoading"></lib-clan-roster-list-view-story>
+   `,
+  props: {
+    roster: members,
+    isLoading: boolean('Is Loading', false),
+    click: addRow
   }
 });

projects/components/src/lib/clan-roster-list-view/clan-roster-list-view.component.ts

@@ -6,14 +6,16 @@ import { MatTableDataSource } from '@angular/material/table';
 import { Sort } from '@angular/material/sort';
 import { ClanMemberListItem } from '../models/ClanMemberListItem';
 import { compare } from '../utilities/compare';
+import { rowsAnimation } from '../core/animations/table-row';
 
 export { ClanMemberListItem } from '../models/ClanMemberListItem';
 
 @Component({
   selector: 'lib-clan-roster-list-view',
   templateUrl: './clan-roster-list-view.component.html',
   styleUrls: ['./clan-roster-list-view.component.css'],
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  animations: [rowsAnimation]
 })
 export class ClanRosterListViewComponent {
   displayedColumns: string[] = [

projects/components/src/lib/core/animations/table-row.ts

@@ -0,0 +1,18 @@
+import {
+  trigger,
+  sequence,
+  state,
+  stagger,
+  animate,
+  transition,
+  style,
+  query,
+  animateChild
+} from '@angular/animations';
+
+export const rowsAnimation = trigger('rowsAnimation', [
+  transition('void => *', [
+    style({ opacity: '0', transform: 'translateY(-5%)' }),
+    animate('0.2s ease-in-out', style({ transform: 'translateY(0%)', opacity: 1 }))
+  ])
+]);