#57 notifications ui position tweak
parent
934d29f4cf
commit
1bb13ce771
File diff suppressed because one or more lines are too long
@ -1,87 +1,87 @@
|
|||||||
import anime from 'animejs/lib/anime.es.js';
|
import anime from "animejs/lib/anime.es.js";
|
||||||
const notifcation = document.getElementById('notifications');
|
const notifcation = document.getElementById("notifications");
|
||||||
const notify = document.getElementById('notifyMessage');
|
const notify = document.getElementById("notifyMessage");
|
||||||
const messageText = document.getElementById('message-text');
|
const messageText = document.getElementById("message-text");
|
||||||
const iconGood = document.getElementById('notify-good');
|
const iconGood = document.getElementById("notify-good");
|
||||||
const iconLame = document.getElementById('notify-lame');
|
const iconLame = document.getElementById("notify-lame");
|
||||||
const iconWorking = document.getElementById('notify-working');
|
const iconWorking = document.getElementById("notify-working");
|
||||||
|
|
||||||
export default class Notfications {
|
export default class Notfications {
|
||||||
//--------------------------
|
//--------------------------
|
||||||
// constructor
|
// constructor
|
||||||
//--------------------------
|
//--------------------------
|
||||||
constructor() {}
|
constructor() {}
|
||||||
//--------------------------
|
//--------------------------
|
||||||
// methods
|
// methods
|
||||||
//--------------------------
|
//--------------------------
|
||||||
|
|
||||||
alert(text, status) {
|
alert(text, status) {
|
||||||
iconWorking.style.display = 'none';
|
iconWorking.style.display = "none";
|
||||||
iconGood.style.display = 'none';
|
iconGood.style.display = "none";
|
||||||
iconLame.style.display = 'none';
|
iconLame.style.display = "none";
|
||||||
|
|
||||||
var color = '';
|
var color = "";
|
||||||
if (status !== null) {
|
if (status !== null) {
|
||||||
if (status) {
|
if (status) {
|
||||||
color = '#32cd32';
|
color = "#32cd32";
|
||||||
iconWorking.style.display = 'none';
|
iconWorking.style.display = "none";
|
||||||
iconGood.style.display = 'block';
|
iconGood.style.display = "block";
|
||||||
} else {
|
} else {
|
||||||
color = '#F64747';
|
color = "#F64747";
|
||||||
iconWorking.style.display = 'none';
|
iconWorking.style.display = "none";
|
||||||
iconLame.style.display = 'block';
|
iconLame.style.display = "block";
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
color = '#200317';
|
color = "#200317";
|
||||||
iconWorking.style.display = 'block';
|
iconWorking.style.display = "block";
|
||||||
}
|
}
|
||||||
messageText.innerHTML = text;
|
messageText.innerHTML = text;
|
||||||
|
|
||||||
anime({
|
anime({
|
||||||
targets: notifcation,
|
targets: notifcation,
|
||||||
marginTop: '0',
|
marginTop: "-10",
|
||||||
easing: 'easeInOutQuint',
|
easing: "easeInOutQuint",
|
||||||
duration: 10,
|
duration: 10,
|
||||||
complete: () => {
|
complete: () => {
|
||||||
anime({
|
anime({
|
||||||
targets: notify,
|
targets: notify,
|
||||||
rotateX: '0',
|
rotateX: "0",
|
||||||
easing: 'easeInOutQuint',
|
easing: "easeInOutQuint",
|
||||||
duration: 700
|
duration: 700
|
||||||
});
|
});
|
||||||
anime({
|
anime({
|
||||||
targets: messageText,
|
targets: messageText,
|
||||||
backgroundColor: color,
|
backgroundColor: color,
|
||||||
easing: 'easeInOutQuint',
|
easing: "easeInOutQuint",
|
||||||
duration: 700,
|
duration: 700,
|
||||||
complete: () => {
|
complete: () => {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
if (status !== null) {
|
if (status !== null) {
|
||||||
anime({
|
anime({
|
||||||
targets: notify,
|
targets: notify,
|
||||||
rotateX: '-120',
|
rotateX: "-120",
|
||||||
easing: 'easeInOutQuint',
|
easing: "easeInOutQuint",
|
||||||
duration: 700,
|
duration: 700,
|
||||||
complete: () => {
|
complete: () => {
|
||||||
anime({
|
anime({
|
||||||
targets: notifcation,
|
targets: notifcation,
|
||||||
marginTop: '-55',
|
marginTop: "-55",
|
||||||
easing: 'easeInOutQuint',
|
easing: "easeInOutQuint",
|
||||||
delay: 700,
|
delay: 700,
|
||||||
duration: 50
|
duration: 50
|
||||||
});
|
});
|
||||||
//notifcation.style.display = 'none';
|
//notifcation.style.display = 'none';
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}, 1000);
|
}, 1000);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
//--------------------------
|
//--------------------------
|
||||||
// event handlers
|
// event handlers
|
||||||
//--------------------------
|
//--------------------------
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue