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