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';
const notifcation = document.getElementById('notifications');
const notify = document.getElementById('notifyMessage');
const messageText = document.getElementById('message-text');
const iconGood = document.getElementById('notify-good');
const iconLame = document.getElementById('notify-lame');
const iconWorking = document.getElementById('notify-working');
import anime from "animejs/lib/anime.es.js";
const notifcation = document.getElementById("notifications");
const notify = document.getElementById("notifyMessage");
const messageText = document.getElementById("message-text");
const iconGood = document.getElementById("notify-good");
const iconLame = document.getElementById("notify-lame");
const iconWorking = document.getElementById("notify-working");
export default class Notfications {
//--------------------------
@ -16,57 +16,57 @@ export default class Notfications {
//--------------------------
alert(text, status) {
iconWorking.style.display = 'none';
iconGood.style.display = 'none';
iconLame.style.display = 'none';
iconWorking.style.display = "none";
iconGood.style.display = "none";
iconLame.style.display = "none";
var color = '';
var color = "";
if (status !== null) {
if (status) {
color = '#32cd32';
iconWorking.style.display = 'none';
iconGood.style.display = 'block';
color = "#32cd32";
iconWorking.style.display = "none";
iconGood.style.display = "block";
} else {
color = '#F64747';
iconWorking.style.display = 'none';
iconLame.style.display = 'block';
color = "#F64747";
iconWorking.style.display = "none";
iconLame.style.display = "block";
}
} else {
color = '#200317';
iconWorking.style.display = 'block';
color = "#200317";
iconWorking.style.display = "block";
}
messageText.innerHTML = text;
anime({
targets: notifcation,
marginTop: '0',
easing: 'easeInOutQuint',
marginTop: "-10",
easing: "easeInOutQuint",
duration: 10,
complete: () => {
anime({
targets: notify,
rotateX: '0',
easing: 'easeInOutQuint',
rotateX: "0",
easing: "easeInOutQuint",
duration: 700
});
anime({
targets: messageText,
backgroundColor: color,
easing: 'easeInOutQuint',
easing: "easeInOutQuint",
duration: 700,
complete: () => {
setTimeout(() => {
if (status !== null) {
anime({
targets: notify,
rotateX: '-120',
easing: 'easeInOutQuint',
rotateX: "-120",
easing: "easeInOutQuint",
duration: 700,
complete: () => {
anime({
targets: notifcation,
marginTop: '-55',
easing: 'easeInOutQuint',
marginTop: "-55",
easing: "easeInOutQuint",
delay: 700,
duration: 50
});