xarvh/fipamo
1
0
Fork 0
forked from projects/fipamo
Code Pull requests Activity

#57 notifications ui position tweak

Browse source
This commit is contained in:
Ro 2021-09-23 13:15:03 -07:00
parent 934d29f4cf
commit 1bb13ce771
2 changed files with 81 additions and 81 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
public/assets/scripts/dash.min.js vendored
View file

File diff suppressed because one or more lines are too long

56
src/com/ui/Notifications.js
View file

@ -1,10 +1,10 @@
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 {
//-------------------------- //--------------------------
@ -16,57 +16,57 @@ export default class Notfications {
//-------------------------- //--------------------------
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
}); });