07b422a9c3
This one is a doozy, so let's breakt it down into what areas where touched. - updated package json to remove unneeded dependencies. - rebuilt file uploading to simply a very convuluted process - began proces to replace icons with https://tabler-icons.io - began process of removing the need for css preprocessor and using pure css - login completed - dashboard index completed - page edit ui completed - page edit ui text editor tweaked so syntax highlighting is cleaner and more accurate The settings and navigation UIs still remain and then polishing the responsive for the new css structure
82 lines
2 KiB
JavaScript
82 lines
2 KiB
JavaScript
import anime from 'animejs/lib/anime.es.js';
|
|
const notifcation = document.querySelector('[role="notify-message"]');
|
|
const notify = document.getElementById('notify-message');
|
|
const responseText = document.querySelector('[role="response-text"]');
|
|
const notifyText = document.querySelector('[role="notify-text"]');
|
|
const notifyIcons = document.querySelector('[role="notify-icons"]');
|
|
//const notifyProgress = document.getElementById('notify-progress');
|
|
const iconGood = document.querySelector('[role="notify-good"]');
|
|
const iconNotGood = document.querySelector('[role="notify-notgood"]');
|
|
const iconWorking = document.querySelector('[role="notify-working"]');
|
|
|
|
export default class Notfications {
|
|
//--------------------------
|
|
// constructor
|
|
//--------------------------
|
|
constructor() {}
|
|
//--------------------------
|
|
// methods
|
|
//--------------------------
|
|
|
|
alert(text, status) {
|
|
iconWorking.style.display = 'none';
|
|
iconGood.style.display = 'none';
|
|
iconNotGood.style.display = 'none';
|
|
|
|
var color = '';
|
|
if (status !== null) {
|
|
if (status) {
|
|
color = '#32cd32';
|
|
iconWorking.style.display = 'none';
|
|
iconGood.style.display = 'block';
|
|
} else {
|
|
color = '#F64747';
|
|
iconWorking.style.display = 'none';
|
|
iconNotGood.style.display = 'block';
|
|
}
|
|
} else {
|
|
color = '#200317';
|
|
iconWorking.style.display = 'block';
|
|
}
|
|
responseText.innerHTML = text;
|
|
|
|
anime({
|
|
targets: notifyIcons,
|
|
width: 39,
|
|
opacity: 1,
|
|
easing: 'easeInQuint',
|
|
duration: 300
|
|
});
|
|
|
|
anime({
|
|
targets: notifyText,
|
|
backgroundColor: color,
|
|
opacity: 1,
|
|
easing: 'easeInOutQuad',
|
|
duration: 400,
|
|
complete: () => {
|
|
setTimeout(() => {
|
|
anime({
|
|
targets: notifyText,
|
|
backgroundColor: color,
|
|
opacity: 0,
|
|
easing: 'easeInOutQuad',
|
|
duration: 400
|
|
});
|
|
|
|
anime({
|
|
targets: notifyIcons,
|
|
width: 0,
|
|
opacity: 0,
|
|
easing: 'easeOutQuint',
|
|
duration: 350
|
|
});
|
|
}, 2000);
|
|
}
|
|
});
|
|
}
|
|
|
|
//--------------------------
|
|
// event handlers
|
|
//--------------------------
|
|
}
|