feat(fr-data-table): Add ripple effect on icons

chloe463 · Jan 3, 2018 · 9a03b3e · 9a03b3e
1 parent ac34331
commit 9a03b3e
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 0 deletions.
diff --git a/src/app/data-table/data-table/data-table.component.html b/src/app/data-table/data-table/data-table.component.html
@@ -15,6 +15,7 @@
             <path d="M -10.5 -25.86 L -7 -21 L -14 -21 L -10.5 -25.86 Z" transform="matrix(-1, 0, 0, -1, 0, 0)" style="fill: rgba(0, 0, 0, 0.560784);" bx:shape="triangle -14 -25.86 7 4.86 0.5 0 1@8bac0b8a"/>
             </g>
           </svg>
+          <span [class.fr-data-table__btn-ripple]="ripples.edit"></span>
         </span>
       </a>
       <a class="fr-data-table__header-btn" (click)="updateRowAction('delete')">
@@ -31,6 +32,7 @@
             <rect x="8.211" width="1" height="13" rx="0.337" ry="0.337" style="fill: rgb(255, 255, 255);" y="2.242"/>
             </g>
           </svg>
+          <span [class.fr-data-table__btn-ripple]="ripples.delete"></span>
         </span>
       </a>
       <a class="fr-data-table__header-btn" (click)="toggleOtherActionList()" [hidden]="!headerComponent.actionKeys.length" #dots>
@@ -41,6 +43,7 @@
             <ellipse cx="12" cy="12" rx="2" ry="2" style="fill: rgba(0, 0, 0, 0.560784);"/>
             <ellipse cx="12" cy="19" rx="2" ry="2" style="fill: rgba(0, 0, 0, 0.560784);"/>
           </svg>
+          <span [class.fr-data-table__btn-ripple]="ripples.dots"></span>
         </span>
       </a>
       <span class="fr-data-table__other-actions">

diff --git a/src/app/data-table/data-table/data-table.component.ts b/src/app/data-table/data-table/data-table.component.ts
@@ -20,6 +20,7 @@ import {
   transition,
   animate
 } from '@angular/animations';
+import { timer } from 'rxjs/observable/timer';
 
 import { FrDataTableColumnsComponent, IFrDataTableColumn } from '../data-table-columns/data-table-columns.component';
 import { FrDataTableHeaderComponent } from '../data-table-header/data-table-header.component';
@@ -92,6 +93,8 @@ export class FrDataTableComponent implements AfterContentInit {
 
   public actionListState: string = 'hidden';
 
+  public ripples = { edit: false, delete: false, dots: false };
+
   ngAfterContentInit() {
     // this.title = this.headerComponent.title;
     if (this.headerComponent) {
@@ -164,6 +167,7 @@ export class FrDataTableComponent implements AfterContentInit {
   public updateRowAction(updateAction: string, changeListState = false): void {
     const checkedRows = this._extraceCheckedRows();
     const event = new FrDataTableEvent(updateAction, checkedRows, this.rowsPerPage, this.paginationInfo.page);
+    this.activateRippleEffect(updateAction);
     if (this.dataTableAction) {
       this.dataTableAction.emit(event);
     }
@@ -187,9 +191,17 @@ export class FrDataTableComponent implements AfterContentInit {
   }
 
   public toggleOtherActionList(): void {
+    this.activateRippleEffect('dots');
     this.actionListState = (this.actionListState === 'hidden') ? 'show': 'hidden';
   }
 
+  private activateRippleEffect(key: string): void {
+    this.ripples[key] = true;
+    timer(800).subscribe(() => {
+      this.ripples[key] = false;
+    });
+  }
+
   @HostListener('document:click', ['$event'])
   public hideActionListOnClick(event): void {
     if (!this.dots.nativeElement.contains(event.target)) {

diff --git a/src/styles/_data-table.scss b/src/styles/_data-table.scss
@@ -65,6 +65,7 @@
 }
 
 .fr-data-table__icon {
+  position: relative;
   display: inline-block;
   width: 24px;
   height: 24px;
@@ -247,3 +248,37 @@
     }
   }
 }
+
+.fr-data-table__btn-ripple {
+  position: absolute;
+  display: inline-block;
+  width: 50px;
+  height: 50px;
+  background: #CCCCCC;
+  border-radius: 50%;
+  top: -14px;
+  right: -14px;
+  bottom: -14px;
+  left: -14px;
+  opacity: 0.3;
+  transform: scale(0.2);
+  animation: button-ripple 0.8s ease-out;
+}
+
+@keyframes button-ripple {
+  from {
+    opacity: 1;
+  }
+  40% {
+    transform: scale(1);
+    opacity: 0.2;
+  }
+  90% {
+    transform: scale(1);
+    opacity: 0.05;
+  }
+  to {
+    transform: scale(1);
+    opacity: 0;
+  }
+}