From 02d8bd7b772ccd0a71613466b0fbf902cb444288 Mon Sep 17 00:00:00 2001
From: WubzyGD <wubzygd@gmail.com>
Date: Sat, 11 Dec 2021 16:39:09 -0700
Subject: [PATCH 1/5] toast test case + animate toasts

---
 index.html                   |  2 ++
 scripts/toast/createtoast.js |  0
 styles/toast.css             | 43 ++++++++++++++++++++++++++++++++++++
 3 files changed, 45 insertions(+)
 create mode 100644 scripts/toast/createtoast.js
 create mode 100644 styles/toast.css

diff --git a/index.html b/index.html
index 7aa076d..dd576d1 100644
--- a/index.html
+++ b/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 class="toast"><h2>Test</h2><p>This is a test toast toast toast</p></div></div>
 
 
         <script src="./scripts/renderer.js"></script>
diff --git a/scripts/toast/createtoast.js b/scripts/toast/createtoast.js
new file mode 100644
index 0000000..e69de29
diff --git a/styles/toast.css b/styles/toast.css
new file mode 100644
index 0000000..df48297
--- /dev/null
+++ b/styles/toast.css
@@ -0,0 +1,43 @@
+@keyframes enter-toast {
+    from {
+        opacity: 0;
+        transform: translateX(100%);
+    }
+    to {
+        opacity: 100;
+        transform: translateX(0);
+    }
+}
+
+#toast-container {
+    position: fixed;
+    top: 10px;
+    right: 10px;
+    display: flex;
+    flex-direction: column-reverse;
+    align-items: stretch;
+    align-content: stretch;
+    row-gap: 4px;
+    justify-content: flex-end;
+    width: auto;
+}
+
+.toast {
+    border-radius: 5px;
+    background-color: #a172a6;
+    color: white;
+    animation: enter-toast .25s ease-out 1;
+    animation-fill-mode: both;
+    animation-delay: 2s;
+}
+
+.toast p {
+    font-family: 'Montserrat', sans-serif;
+    margin: 8px;
+}
+
+.toast h2 {
+    font-size: 25px;
+    font-family: 'Nunito', sans-serif;
+    margin: 6px 0 8px 8px;
+}
\ No newline at end of file

From 383e67f10aa48bc3b5adad80072507ecdd0bb39b Mon Sep 17 00:00:00 2001
From: WubzyGD <wubzygd@gmail.com>
Date: Sat, 11 Dec 2021 17:40:50 -0700
Subject: [PATCH 2/5] remove tests and begin toast builder function

Supports:
- Title
- Multiple lines
- Custom bg color
- Selectable text toggling
- Custom onclick functions
---
 index.html                   |  2 +-
 scripts/toast/createtoast.js | 28 ++++++++++++++++++++++++++++
 styles/toast.css             | 20 ++++++++++++++------
 3 files changed, 43 insertions(+), 7 deletions(-)

diff --git a/index.html b/index.html
index dd576d1..1736120 100644
--- a/index.html
+++ b/index.html
@@ -37,7 +37,7 @@
         </div>
 
         <div id="ctx"></div>
-        <div id="toast-container"><div class="toast"><h2>Test</h2><p>This is a test toast toast toast</p></div></div>
+        <div id="toast-container"></div>
 
 
         <script src="./scripts/renderer.js"></script>
diff --git a/scripts/toast/createtoast.js b/scripts/toast/createtoast.js
index e69de29..b6dc192 100644
--- a/scripts/toast/createtoast.js
+++ b/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'));}
+    }
+};
\ No newline at end of file
diff --git a/styles/toast.css b/styles/toast.css
index df48297..fc2b64b 100644
--- a/styles/toast.css
+++ b/styles/toast.css
@@ -11,11 +11,11 @@
 
 #toast-container {
     position: fixed;
-    top: 10px;
+    top: 34px;
     right: 10px;
     display: flex;
     flex-direction: column-reverse;
-    align-items: stretch;
+    align-items: flex-end;
     align-content: stretch;
     row-gap: 4px;
     justify-content: flex-end;
@@ -24,11 +24,19 @@
 
 .toast {
     border-radius: 5px;
-    background-color: #a172a6;
+    background-color: #a172a6c2;
     color: white;
     animation: enter-toast .25s ease-out 1;
     animation-fill-mode: both;
-    animation-delay: 2s;
+    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 {
@@ -37,7 +45,7 @@
 }
 
 .toast h2 {
-    font-size: 25px;
+    font-size: 20px;
     font-family: 'Nunito', sans-serif;
-    margin: 6px 0 8px 8px;
+    margin: 6px 0 2px 8px;
 }
\ No newline at end of file

From 7b4a0fdbde8bb91178cf5afd2c1b7db12d05bab6 Mon Sep 17 00:00:00 2001
From: WubzyGD <wubzygd@gmail.com>
Date: Sat, 11 Dec 2021 19:31:21 -0700
Subject: [PATCH 3/5] create exit button

i robbed all the CSS don't @ me
---
 scripts/modal/exitbtn.js | 28 +++++++++++++++
 styles/modal.css         | 76 ++++++++++++++++++++++++++++++++++++++++
 2 files changed, 104 insertions(+)
 create mode 100644 scripts/modal/exitbtn.js

diff --git a/scripts/modal/exitbtn.js b/scripts/modal/exitbtn.js
new file mode 100644
index 0000000..308a1c0
--- /dev/null
+++ b/scripts/modal/exitbtn.js
@@ -0,0 +1,28 @@
+module.exports = (parent, btnID) => {
+    let wr = document.createElement('div');
+    wr.className = 'exit-wrapper';
+    parent.appendChild(wr);
+    let btn = document.createElement('a');
+    btn.className = 'exit-button';
+    btn.id = btnID;
+    wr.appendChild(btn)
+    let ind = document.createElement('div');
+    ind.className = 'exit-in';
+    btn.appendChild(ind);
+    let inbl1 = document.createElement('div');
+    inbl1.className = 'exit-button-block';
+    ind.appendChild(inbl1);
+    let inbl2 = document.createElement('div');
+    inbl2.className = 'exit-button-block';
+    ind.appendChild(inbl2);
+    let outd = document.createElement('div');
+    outd.className = 'exit-out';
+    btn.appendChild(outd);
+    let outbl1 = document.createElement('div');
+    outbl1.className = 'exit-button-block';
+    outd.appendChild(outbl1);
+    let outbl2 = document.createElement('div');
+    outbl2.className = 'exit-button-block';
+    outd.appendChild(outbl2);
+    return wr;
+};
\ No newline at end of file
diff --git a/styles/modal.css b/styles/modal.css
index 720d0e5..b9760d3 100644
--- a/styles/modal.css
+++ b/styles/modal.css
@@ -58,4 +58,80 @@
     left: 0;
     background-color: #1717176d;
     z-index: 2;
+}
+
+
+/* robbed this shit from some website somewhere. i'm not this cool.
+ * https://codepen.io/maneeshc/pen/pPxKQm
+ * that's the codepen i robbed it from */
+
+.exit-wrapper {
+    width: 100vw;
+    height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.exit-button {
+    display: block;
+    width: 40px;
+    height: 40px;
+    position: relative;
+    overflow: hidden;
+}
+.exit-button > div {
+    position: relative;
+}
+.exit-button-block {
+    width: 40px;
+    height: 20px;
+    position: relative;
+    overflow: hidden;
+}
+.exit-button-block:before, .exit-button-block:after {
+    content: "";
+    position: absolute;
+    bottom: 0;
+    left: calc(55% - 4px);
+    display: block;
+    width: 4px;
+    height: 25px;
+    transform-origin: bottom center;
+    background: white;
+    transition: all ease-out 280ms;
+}
+.exit-button-block:last-of-type {
+    transform: rotate(180deg);
+}
+.exit-button .exit-in .exit-button-block:before {
+    transition-delay: 280ms;
+    transform: translateX(20px) translateY(-20px) rotate(45deg);
+}
+.exit-button .exit-in .exit-button-block:after {
+    transition-delay: 280ms;
+    transform: translateX(-22px) translateY(-22px) rotate(-45deg);
+}
+.exit-button .exit-out {
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+.exit-button .exit-out .exit-button-block:before {
+    transform: translateX(-5px) translateY(5px) rotate(45deg);
+}
+.exit-button .exit-out .exit-button-block:after {
+    transform: translateX(5px) translateY(5px) rotate(-45deg);
+}
+.exit-button:hover .exit-in .exit-button-block:before {
+    transform: translateX(-5px) translateY(5px) rotate(45deg);
+}
+.exit-button:hover .exit-in .exit-button-block:after {
+    transform: translateX(5px) translateY(5px) rotate(-45deg);
+}
+.exit-button:hover .exit-out .exit-button-block:before {
+    transform: translateX(-20px) translateY(20px) rotate(45deg);
+}
+.exit-button:hover .exit-out .exit-button-block:after {
+    transform: translateX(20px) translateY(20px) rotate(-45deg);
 }
\ No newline at end of file

From b0fc4dee3d929f474aa7cbb1e10fbd15fb734107 Mon Sep 17 00:00:00 2001
From: WubzyGD <wubzygd@gmail.com>
Date: Sat, 11 Dec 2021 19:51:01 -0700
Subject: [PATCH 4/5] abandon that idea because robbery is bad

---
 scripts/contextmenu/newfolder.js |  1 +
 scripts/modal/exitbtn.js         | 28 ------------
 styles/modal.css                 | 75 --------------------------------
 3 files changed, 1 insertion(+), 103 deletions(-)
 delete mode 100644 scripts/modal/exitbtn.js

diff --git a/scripts/contextmenu/newfolder.js b/scripts/contextmenu/newfolder.js
index 5786e70..9902001 100644
--- a/scripts/contextmenu/newfolder.js
+++ b/scripts/contextmenu/newfolder.js
@@ -38,6 +38,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 {
diff --git a/scripts/modal/exitbtn.js b/scripts/modal/exitbtn.js
deleted file mode 100644
index 308a1c0..0000000
--- a/scripts/modal/exitbtn.js
+++ /dev/null
@@ -1,28 +0,0 @@
-module.exports = (parent, btnID) => {
-    let wr = document.createElement('div');
-    wr.className = 'exit-wrapper';
-    parent.appendChild(wr);
-    let btn = document.createElement('a');
-    btn.className = 'exit-button';
-    btn.id = btnID;
-    wr.appendChild(btn)
-    let ind = document.createElement('div');
-    ind.className = 'exit-in';
-    btn.appendChild(ind);
-    let inbl1 = document.createElement('div');
-    inbl1.className = 'exit-button-block';
-    ind.appendChild(inbl1);
-    let inbl2 = document.createElement('div');
-    inbl2.className = 'exit-button-block';
-    ind.appendChild(inbl2);
-    let outd = document.createElement('div');
-    outd.className = 'exit-out';
-    btn.appendChild(outd);
-    let outbl1 = document.createElement('div');
-    outbl1.className = 'exit-button-block';
-    outd.appendChild(outbl1);
-    let outbl2 = document.createElement('div');
-    outbl2.className = 'exit-button-block';
-    outd.appendChild(outbl2);
-    return wr;
-};
\ No newline at end of file
diff --git a/styles/modal.css b/styles/modal.css
index b9760d3..ab039dc 100644
--- a/styles/modal.css
+++ b/styles/modal.css
@@ -60,78 +60,3 @@
     z-index: 2;
 }
 
-
-/* robbed this shit from some website somewhere. i'm not this cool.
- * https://codepen.io/maneeshc/pen/pPxKQm
- * that's the codepen i robbed it from */
-
-.exit-wrapper {
-    width: 100vw;
-    height: 100vh;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.exit-button {
-    display: block;
-    width: 40px;
-    height: 40px;
-    position: relative;
-    overflow: hidden;
-}
-.exit-button > div {
-    position: relative;
-}
-.exit-button-block {
-    width: 40px;
-    height: 20px;
-    position: relative;
-    overflow: hidden;
-}
-.exit-button-block:before, .exit-button-block:after {
-    content: "";
-    position: absolute;
-    bottom: 0;
-    left: calc(55% - 4px);
-    display: block;
-    width: 4px;
-    height: 25px;
-    transform-origin: bottom center;
-    background: white;
-    transition: all ease-out 280ms;
-}
-.exit-button-block:last-of-type {
-    transform: rotate(180deg);
-}
-.exit-button .exit-in .exit-button-block:before {
-    transition-delay: 280ms;
-    transform: translateX(20px) translateY(-20px) rotate(45deg);
-}
-.exit-button .exit-in .exit-button-block:after {
-    transition-delay: 280ms;
-    transform: translateX(-22px) translateY(-22px) rotate(-45deg);
-}
-.exit-button .exit-out {
-    position: absolute;
-    top: 0;
-    left: 0;
-}
-.exit-button .exit-out .exit-button-block:before {
-    transform: translateX(-5px) translateY(5px) rotate(45deg);
-}
-.exit-button .exit-out .exit-button-block:after {
-    transform: translateX(5px) translateY(5px) rotate(-45deg);
-}
-.exit-button:hover .exit-in .exit-button-block:before {
-    transform: translateX(-5px) translateY(5px) rotate(45deg);
-}
-.exit-button:hover .exit-in .exit-button-block:after {
-    transform: translateX(5px) translateY(5px) rotate(-45deg);
-}
-.exit-button:hover .exit-out .exit-button-block:before {
-    transform: translateX(-20px) translateY(20px) rotate(45deg);
-}
-.exit-button:hover .exit-out .exit-button-block:after {
-    transform: translateX(20px) translateY(20px) rotate(-45deg);
-}
\ No newline at end of file

From c65856efa6984f97df6d4278c728f2996e1e5551 Mon Sep 17 00:00:00 2001
From: WubzyGD <wubzygd@gmail.com>
Date: Sun, 12 Dec 2021 00:03:44 -0700
Subject: [PATCH 5/5] i lied robbery is a really good idea

- robbed a new X button
- double-wrapped some divs to abuse relative positioning and absolute positioning
- the x button now works because i'm very cool yes yes
---
 scripts/contextmenu/newfolder.js | 28 +++++++++++++++------
 styles/modal.css                 | 42 ++++++++++++++++++++++++++++++++
 2 files changed, 63 insertions(+), 7 deletions(-)

diff --git a/scripts/contextmenu/newfolder.js b/scripts/contextmenu/newfolder.js
index 9902001..b9c7294 100644
--- a/scripts/contextmenu/newfolder.js
+++ b/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);
@@ -50,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.");
@@ -62,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);
 }
\ No newline at end of file
diff --git a/styles/modal.css b/styles/modal.css
index ab039dc..a9ae14a 100644
--- a/styles/modal.css
+++ b/styles/modal.css
@@ -60,3 +60,45 @@
     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);
+}
\ No newline at end of file