Merge branch 'modals'

index.html

@@ -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>

scripts/contextmenu/newfolder.js

@@ -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);
 }

scripts/toast/createtoast.js

@@ -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'));}
+    }
+};

styles/modal.css

@@ -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);
 }

styles/toast.css

@@ -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;
+}