chore: notyf v3.0.0 kinda funky. meh

Kuazark · Mar 20, 2019 · 9413dfb · 9413dfb
1 parent a612301
commit 9413dfb
Show file tree

Hide file tree

Showing 3 changed files with 161 additions and 239 deletions.
diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts
@@ -119,8 +119,8 @@ export class HomeComponent {
     const opt = cloneDeep(this.options);
     opt.toastComponent = NotyfToast;
     opt.toastClass = 'notyf confirm';
-    opt.positionClass = 'notyf-container';
-    this.options.newestOnTop = false;
+    // opt.positionClass = 'notyf__wrapper';
+    // this.options.newestOnTop = false;
     const { message, title } = this.getMessage();
     const inserted = this.toastr.show(message || 'Success', title, opt);
     if (inserted && inserted.toastId) {

diff --git a/src/app/notyf.toast.ts b/src/app/notyf.toast.ts
@@ -4,7 +4,7 @@ import {
   state,
   style,
   transition,
-  trigger
+  trigger,
 } from '@angular/animations';
 import { Component } from '@angular/core';
 import { Toast, ToastrService, ToastPackage } from '../lib/public_api';
@@ -13,64 +13,77 @@ import { Toast, ToastrService, ToastPackage } from '../lib/public_api';
   selector: '[notyf-toast-component]',
   styles: [],
   template: `
-  <div class="notyf-wrapper">
-    <div class="notyf-icon">
-      <i class="notyf-confirm-icon"></i>
+    <div class="notyf__toast notyf__toast--success notyf__toast">
+      <div class="notyf__wrapper">
+        <div class="notyf__icon">
+          <i class="notyf__icon--success" style="color: rgb(61, 199, 99);"></i>
+        </div>
+        <div class="notyf__message">{{ title }} {{ message }}</div>
+      </div>
+      <div
+        class="notyf__ripple"
+        style="background-color: rgb(61, 199, 99);"
+      ></div>
     </div>
-    <div class="notyf-message">{{ message }}</div>
-  </div>
   `,
   animations: [
     trigger('flyInOut', [
-      state('inactive', style({
-        display: 'none',
-        opacity: 0
-      })),
-      transition('inactive => active', animate('300ms ease-out', keyframes([
+      state('inactive', style({ opacity: 0 })),
+      transition(
+        'inactive => active',
+        animate(
+          '300ms ease-out',
+          keyframes([
+            style({
+              opacity: 0,
+              bottom: '-15px',
+              'max-height': 0,
+              'max-width': 0,
+              'margin-top': 0,
+            }),
+            style({
+              opacity: 0.8,
+              bottom: '-3px',
+            }),
+            style({
+              opacity: 1,
+              bottom: '0',
+              'max-height': '200px',
+              'margin-top': '12px',
+              'max-width': '400px',
+            }),
+          ]),
+        ),
+      ),
+      state(
+        'active',
         style({
-          opacity: 0,
-          bottom: '-15px',
-          'max-height': 0,
-          'max-width': 0,
-          'margin-top': 0,
-        }),
-        style({
-          opacity: 0.8,
-          bottom: '-3px',
-        }),
-        style({
-          opacity: 1,
           bottom: '0',
           'max-height': '200px',
           'margin-top': '12px',
           'max-width': '400px',
         }),
-      ]))),
-      state('active', style({
-        bottom: '0',
-        'max-height': '200px',
-        'margin-top': '12px',
-        'max-width': '400px',
-      })),
-      transition('active => removed', animate('300ms ease-out', keyframes([
-        style({
-          opacity: 0.6,
-          bottom: 0,
-        }),
-        style({
-          opacity: 0.1,
-          bottom: '-3px',
-        }),
-        style({
-          opacity: 0,
-          bottom: '-15px',
-        }),
-      ]))),
+      ),
+      transition(
+        'active => removed',
+        animate(
+          '300ms ease-out',
+          keyframes([
+            style({
+              opacity: 1,
+              transform: 'translateY(0)'
+            }),
+            style({
+              opacity: 0,
+              transform: 'translateY(25%)'
+            }),
+          ]),
+        ),
+      ),
     ]),
   ],
 })
 export class NotyfToast extends Toast {
-
   // constructor is only necessary when not using AoT
   constructor(
     protected toastrService: ToastrService,