Merge branch 'modals'

toast
Kit Kasune 3 years ago
commit 47f16a4535
  1. 2
      index.html
  2. 29
      scripts/contextmenu/newfolder.js
  3. 28
      scripts/toast/createtoast.js
  4. 43
      styles/modal.css
  5. 51
      styles/toast.css

@ -9,6 +9,7 @@
<link href='./styles/controls.css' rel='stylesheet'>
<link href='./styles/context.css' rel='stylesheet'>
<link href='./styles/modal.css' rel='stylesheet'>
<link href="./styles/toast.css" rel="stylesheet">
<title>FileKade</title>
</head>
@ -36,6 +37,7 @@
</div>
<div id="ctx"></div>
<div id="toast-container"></div>
<script src="./scripts/renderer.js"></script>

@ -11,10 +11,13 @@ const clearModals = require('../modal/clearmodals');
module.exports = () => {
if (window.kade.modal) {console.log('hboonk'); return;}
preModal('new-folder-modal-container');
let modalOut = document.createElement('div');
modalOut.className = 'modal';
modalOut.id = 'new-folder-modal-container';
document.body.appendChild(modalOut);
let modal = document.createElement('div');
modal.className = 'modal';
modal.id = 'new-folder-modal-container';
document.body.appendChild(modal);
modal.className = 'modal-wrapper';
modalOut.appendChild(modal);
let title = document.createElement('h2');
title.innerHTML = 'New Folder';
modal.appendChild(title);
@ -38,6 +41,7 @@ module.exports = () => {
conf.onclick = () => {
try {
input.value.trim();
if (!input.value.length) {return;}
if (fs.existsSync(path.join(window.kade.cpath, input.value))) {
if (!input.value.match(/^.+\(\d\)$/gm)) {input.value += ' (1)';}
else {
@ -49,8 +53,8 @@ module.exports = () => {
}
fs.mkdirSync(path.join(window.kade.cpath, input.value));
lightRefresh();
modal.remove();
postModal(modal.id);
modalOut.remove();
postModal(modalOut.id);
} catch {
clearModals();
showError("Folder Creation", "There was an unknown error while trying to create that folder. It may be a permissions issue, or the host folder doesn't exist anymore.");
@ -61,8 +65,19 @@ module.exports = () => {
let msm = new mousetrap(modal);
msm.bind('esc', () => {
lightRefresh();
modal.remove();
postModal(modal.id);
modalOut.remove();
postModal(modalOut.id);
});
msm.bind('enter', () => {conf.click();});
let close = document.createElement('a');
close.className = 'close-button';
close.onclick = () => {
lightRefresh();
modalOut.remove();
postModal(modalOut.id);
};
let closeWrap = document.createElement('div');
closeWrap.className = 'close-button-wrapper';
modal.appendChild(closeWrap);
closeWrap.appendChild(close);
}

@ -0,0 +1,28 @@
module.exports = (name, text, bg = '#a172a6', persistOnClick = false, time = 5, onclick = () => {}, selectable = false) => {
if (!name || !text) {return;}
if (!Array.isArray(text)) {text = [text];}
let toast = document.createElement('div');
toast.className = 'toast';
toast.style.backgroundColor = `${bg}c2`;
toast.style.borderColor = `${bg}c2`;
toast.onmouseenter = () => {toast.style.backgroundColor = bg;};
toast.onmouseleave = () => {toast.style.backgroundColor = `${bg}c2`;};
toast.onclick = () => {
if (!persistOnClick) {}
onclick();
};
document.getElementById('toast-container').appendChild(toast);
let h2 = document.createElement('h2');
h2.innerHTML = name;
if (!selectable) {h2.className = 'nosel';}
toast.appendChild(h2);
for (let i = 0; i < text.length; i++) {
if (text[i].length) {
let p = document.createElement('p');
p.innerHTML = text[i];
if (!selectable) {p.className = 'nosel';}
toast.appendChild(p);
}
else {toast.appendChild(document.createElement('br'));}
}
};

@ -58,4 +58,47 @@
left: 0;
background-color: #1717176d;
z-index: 2;
}
.modal-wrapper {
margin: 0 0;
padding: 0 0;
position: relative;
}
.close-button-wrapper {
margin: 0 0;
padding: 0 0;
top: 0;
right: 10px;
position: absolute;
}
.close-button {
width: 30px;
height: 30px;
border-radius: 10px;
left: 10px;
bottom: 10px;
display: block;
z-index: 200;
position: relative;
}
.close-button:before, .close-button:after {
content: '';
width: 55%;
height: 2px;
background: #fff;
position: absolute;
top: 48%;
left: 22%;
transform: rotate(-45deg);
transition: all 0.3s ease-out;
}
.close-button:after {
transform: rotate(45deg);
transition: all 0.3s ease-out;
}
.close-button:hover:before, .close-button:hover:after {
transform: rotate(180deg);
}

@ -0,0 +1,51 @@
@keyframes enter-toast {
from {
opacity: 0;
transform: translateX(100%);
}
to {
opacity: 100;
transform: translateX(0);
}
}
#toast-container {
position: fixed;
top: 34px;
right: 10px;
display: flex;
flex-direction: column-reverse;
align-items: flex-end;
align-content: stretch;
row-gap: 4px;
justify-content: flex-end;
width: auto;
}
.toast {
border-radius: 5px;
background-color: #a172a6c2;
color: white;
animation: enter-toast .25s ease-out 1;
animation-fill-mode: both;
padding: 4px 6px;
border-color: #a172a6c2;
border-style: solid;
border-width: 1px;
transition: border-color .15s ease-in, background-color .15s ease-in;
max-width: 350px;
}
.toast:hover {
border-color: white;
}
.toast p {
font-family: 'Montserrat', sans-serif;
margin: 8px;
}
.toast h2 {
font-size: 20px;
font-family: 'Nunito', sans-serif;
margin: 6px 0 2px 8px;
}
Loading…
Cancel
Save