Merge branch 'toast'

toast
Kit Kasune 3 years ago
commit 8c78567f02
  1. 5
      scripts/startup/preload.js
  2. 10
      scripts/toast/createtoast.js
  3. 5
      scripts/toast/removetoast.js
  4. 20
      styles/toast.css

@ -1,9 +1,11 @@
const os = require('os');
const moment = require('../dep/moment');
const setButtons = require('./setbuttons');
const hideContext = require('../contextmenu/hidecontext');
const lightRefresh = require('../fileview/lightrefresh');
const checkDir = require('../fileview/checkdir');
const createToast = require('../toast/createtoast');
window.addEventListener('DOMContentLoaded', () => {
window.kade = {
@ -38,6 +40,9 @@ window.addEventListener('DOMContentLoaded', () => {
window.kade.checkDirInterval = setInterval(checkDir, 5000);
require('../keybinds/handleKey')();
setTimeout(() => {createToast("Welcome", [`Today is ${moment().format('MMMM Do, YYYY')}`, `The time is ${moment().format('h:mma')}`], '#5d60ca', false, 10);}, 1000);
setTimeout(() => {createToast("Welcome", ["Welcome to FileKade!", "App by WubzyGD", "Alpha/Pre-release Build"], '#5d60ca', false, 10);}, 1300);
});
window.addEventListener('contextmenu', e => {

@ -1,3 +1,5 @@
const removeToast = require('./removetoast');
module.exports = (name, text, bg = '#a172a6', persistOnClick = false, time = 5, onclick = () => {}, selectable = false) => {
if (!name || !text) {return;}
if (!Array.isArray(text)) {text = [text];}
@ -5,10 +7,15 @@ module.exports = (name, text, bg = '#a172a6', persistOnClick = false, time = 5,
toast.className = 'toast';
toast.style.backgroundColor = `${bg}c2`;
toast.style.borderColor = `${bg}c2`;
toast.classList.add('toast-entering');
toast.onmouseenter = () => {toast.style.backgroundColor = bg;};
toast.onmouseleave = () => {toast.style.backgroundColor = `${bg}c2`;};
let continueTimeout = true;
toast.onclick = () => {
if (!persistOnClick) {}
if (!persistOnClick) {
removeToast(toast);
continueTimeout = false;
}
onclick();
};
document.getElementById('toast-container').appendChild(toast);
@ -25,4 +32,5 @@ module.exports = (name, text, bg = '#a172a6', persistOnClick = false, time = 5,
}
else {toast.appendChild(document.createElement('br'));}
}
setTimeout(() => {if (continueTimeout) {removeToast(toast);}}, time * 1000);
};

@ -0,0 +1,5 @@
module.exports = (toast) => {
toast.classList.remove('toast-entering');
toast.classList.add('toast-leaving');
toast.onanimationend = () => {toast.remove();};
};

@ -8,6 +8,16 @@
transform: translateX(0);
}
}
@keyframes leave-toast {
to {
opacity: 0;
transform: translateX(100%);
}
from {
opacity: 100;
transform: translateX(0);
}
}
#toast-container {
position: fixed;
@ -39,6 +49,16 @@
border-color: white;
}
.toast-entering {
animation: enter-toast .25s ease-out 1;
animation-fill-mode: both;
}
.toast-leaving {
animation: leave-toast .25s ease-out 1;
animation-fill-mode: both;
}
.toast p {
font-family: 'Montserrat', sans-serif;
margin: 8px;

Loading…
Cancel
Save