fix for notifications animation bug

This commit is contained in:
Ro 2020-09-04 16:16:50 -07:00
parent 97fd051423
commit fbe285eec9
3 changed files with 44 additions and 43 deletions

View file

@ -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') link(rel='stylesheet', href="/assets/css/dash.css", type='text/css')
body body
#notifications.notifications #notifications.notifications
#notifyMessage.notifyMessage.notify-close #notifyMessage.notifyMessage
.notify-icon#notify-good .notify-icon#notify-good
svg(viewBox="0 0 20 20" class="icons") svg(viewBox="0 0 20 20" class="icons")
use#submit-update(xlink:href='/assets/images/global/sprite.svg#entypo-emoji-flirt') use#submit-update(xlink:href='/assets/images/global/sprite.svg#entypo-emoji-flirt')

View file

@ -1580,23 +1580,26 @@ svg.icons {
perspective: 1000px; perspective: 1000px;
position: fixed; position: fixed;
z-index: 2000; z-index: 2000;
height: 10%; height: 55x;
width: 100%; width: 100%;
display: none; display: block;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 0; padding: 0;
margin-top: -55px;
margin: 0; margin: 0;
} }
#notifications #notifyMessage { #notifications #notifyMessage {
margin: 0 auto; 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; height: 50px;
width: 500px; width: 500px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
opacity: 1; opacity: 1;
transform-style: preserve-3d;
transform: rotateX(-120deg);
transform-origin: 50% 0; transform-origin: 50% 0;
} }
#notifications #notifyMessage #notify-good, #notifications #notifyMessage #notify-good,

View file

@ -3637,7 +3637,6 @@ var Notfications = /*#__PURE__*/function () {
_createClass(Notfications, [{ _createClass(Notfications, [{
key: "alert", key: "alert",
value: function alert(text, status) { value: function alert(text, status) {
notifcation.style.display = 'block';
iconWorking.style.display = 'none'; iconWorking.style.display = 'none';
iconGood.style.display = 'none'; iconGood.style.display = 'none';
iconLame.style.display = 'none'; iconLame.style.display = 'none';
@ -3658,49 +3657,48 @@ var Notfications = /*#__PURE__*/function () {
iconWorking.style.display = 'block'; iconWorking.style.display = 'block';
} }
notify.classList.remove('notify-close');
notify.classList.add('notify-open');
messageText.innerHTML = text; messageText.innerHTML = text;
(0, _animeEs.default)({
targets: notifcation,
marginTop: '0',
easing: 'easeInOutQuint',
duration: 10,
complete: function complete() {
(0, _animeEs.default)({
targets: notify,
rotateX: '0',
easing: 'easeInOutQuint',
duration: 700
});
(0, _animeEs.default)({ (0, _animeEs.default)({
targets: messageText, targets: messageText,
backgroundColor: color, backgroundColor: color,
easing: 'easeInOutQuint', easing: 'easeInOutQuint',
duration: 700, duration: 700,
complete: function complete() { complete: function complete() {
if (status !== null) {
setTimeout(function () { setTimeout(function () {
notify.addEventListener('transitionend', function () { if (status !== null) {
notifcation.style.display = 'none'; (0, _animeEs.default)({
}); targets: notify,
notify.classList.add('notify-close'); rotateX: '-120',
notify.classList.remove('notify-open');
}, 1000);
}
}
});
/*
anime({
targets: message,
marginTop: '-20px',
easing: 'easeInOutQuint', easing: 'easeInOutQuint',
duration: 500, duration: 700,
opacity: 1, complete: function complete() {
complete: () => { (0, _animeEs.default)({
setTimeout(() => { targets: notifcation,
anime({ marginTop: '-55',
targets: message, easing: 'easeInOutQuint',
marginTop: '-125px', delay: 700,
easing: 'easeOutQuint', duration: 50
duration: 500, }); //notifcation.style.display = 'none';
opacity: 0,
complete: () => {
notifcation.style.display = 'none';
} }
}); });
}
}, 1000); }, 1000);
} }
}); });
*/ }
});
} //-------------------------- } //--------------------------
// event handlers // event handlers
//-------------------------- //--------------------------
@ -8576,7 +8574,7 @@ var parent = module.bundle.parent;
if ((!parent || !parent.isParcelRequire) && typeof WebSocket !== 'undefined') { if ((!parent || !parent.isParcelRequire) && typeof WebSocket !== 'undefined') {
var hostname = "" || location.hostname; var hostname = "" || location.hostname;
var protocol = location.protocol === 'https:' ? 'wss' : 'ws'; 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) { ws.onmessage = function (event) {
checkedAssets = {}; checkedAssets = {};