From fbe285eec9bd7c85e13ca4cbca4833a85cb39693 Mon Sep 17 00:00:00 2001
From: Ro <ro@playvicio.us>
Date: Fri, 4 Sep 2020 16:16:50 -0700
Subject: [PATCH] fix for notifications animation bug

---
 brain/views/frame.pug             |  2 +-
 public/assets/css/dash.css        |  9 ++--
 public/assets/scripts/dash.min.js | 76 +++++++++++++++----------------
 3 files changed, 44 insertions(+), 43 deletions(-)

diff --git a/brain/views/frame.pug b/brain/views/frame.pug
index 21282d7..e72b6c8 100644
--- a/brain/views/frame.pug
+++ b/brain/views/frame.pug
@@ -13,7 +13,7 @@ html(xmlns='http://www.w3.org/1999/xhtml', lang='en', xml:lang="en")
         link(rel='stylesheet', href="/assets/css/dash.css", type='text/css')
     body
       #notifications.notifications
-        #notifyMessage.notifyMessage.notify-close
+        #notifyMessage.notifyMessage
           .notify-icon#notify-good
             svg(viewBox="0 0 20 20" class="icons")
               use#submit-update(xlink:href='/assets/images/global/sprite.svg#entypo-emoji-flirt')
diff --git a/public/assets/css/dash.css b/public/assets/css/dash.css
index e9b9514..15024e9 100644
--- a/public/assets/css/dash.css
+++ b/public/assets/css/dash.css
@@ -1580,23 +1580,26 @@ svg.icons {
   perspective: 1000px;
   position: fixed;
   z-index: 2000;
-  height: 10%;
+  height: 55x;
   width: 100%;
-  display: none;
+  display: block;
   align-items: center;
   justify-content: center;
   padding: 0;
+  margin-top: -55px;
   margin: 0;
 }
 #notifications #notifyMessage {
   margin: 0 auto;
-  transition: all 0.5s cubic-bezier(0.83, 0.05, 0.28, 1);
+  transition: all 0.6s cubic-bezier(0.83, 0.05, 0.28, 1);
   height: 50px;
   width: 500px;
   display: flex;
   align-items: center;
   justify-content: center;
   opacity: 1;
+  transform-style: preserve-3d;
+  transform: rotateX(-120deg);
   transform-origin: 50% 0;
 }
 #notifications #notifyMessage #notify-good,
diff --git a/public/assets/scripts/dash.min.js b/public/assets/scripts/dash.min.js
index 58fdf1f..09871db 100644
--- a/public/assets/scripts/dash.min.js
+++ b/public/assets/scripts/dash.min.js
@@ -3637,7 +3637,6 @@ var Notfications = /*#__PURE__*/function () {
   _createClass(Notfications, [{
     key: "alert",
     value: function alert(text, status) {
-      notifcation.style.display = 'block';
       iconWorking.style.display = 'none';
       iconGood.style.display = 'none';
       iconLame.style.display = 'none';
@@ -3658,49 +3657,48 @@ var Notfications = /*#__PURE__*/function () {
         iconWorking.style.display = 'block';
       }
 
-      notify.classList.remove('notify-close');
-      notify.classList.add('notify-open');
       messageText.innerHTML = text;
       (0, _animeEs.default)({
-        targets: messageText,
-        backgroundColor: color,
+        targets: notifcation,
+        marginTop: '0',
         easing: 'easeInOutQuint',
-        duration: 700,
+        duration: 10,
         complete: function complete() {
-          if (status !== null) {
-            setTimeout(function () {
-              notify.addEventListener('transitionend', function () {
-                notifcation.style.display = 'none';
-              });
-              notify.classList.add('notify-close');
-              notify.classList.remove('notify-open');
-            }, 1000);
-          }
+          (0, _animeEs.default)({
+            targets: notify,
+            rotateX: '0',
+            easing: 'easeInOutQuint',
+            duration: 700
+          });
+          (0, _animeEs.default)({
+            targets: messageText,
+            backgroundColor: color,
+            easing: 'easeInOutQuint',
+            duration: 700,
+            complete: function complete() {
+              setTimeout(function () {
+                if (status !== null) {
+                  (0, _animeEs.default)({
+                    targets: notify,
+                    rotateX: '-120',
+                    easing: 'easeInOutQuint',
+                    duration: 700,
+                    complete: function complete() {
+                      (0, _animeEs.default)({
+                        targets: notifcation,
+                        marginTop: '-55',
+                        easing: 'easeInOutQuint',
+                        delay: 700,
+                        duration: 50
+                      }); //notifcation.style.display = 'none';
+                    }
+                  });
+                }
+              }, 1000);
+            }
+          });
         }
       });
-      /*
-      anime({
-      	targets: message,
-      	marginTop: '-20px',
-      	easing: 'easeInOutQuint',
-      	duration: 500,
-      	opacity: 1,
-      	complete: () => {
-      		setTimeout(() => {
-      			anime({
-      				targets: message,
-      				marginTop: '-125px',
-      				easing: 'easeOutQuint',
-      				duration: 500,
-      				opacity: 0,
-      				complete: () => {
-      					notifcation.style.display = 'none';
-      				}
-      			});
-      		}, 1000);
-      	}
-      });
-      */
     } //--------------------------
     // event handlers
     //--------------------------
@@ -8576,7 +8574,7 @@ var parent = module.bundle.parent;
 if ((!parent || !parent.isParcelRequire) && typeof WebSocket !== 'undefined') {
   var hostname = "" || location.hostname;
   var protocol = location.protocol === 'https:' ? 'wss' : 'ws';
-  var ws = new WebSocket(protocol + '://' + hostname + ':' + "57255" + '/');
+  var ws = new WebSocket(protocol + '://' + hostname + ':' + "57701" + '/');
 
   ws.onmessage = function (event) {
     checkedAssets = {};