Merge branch 'master' into sidebar

README.md

@@ -0,0 +1,46 @@
+# FileKade
+
+**Welcome to FileKade's official repository!**
+
+This project is mainly just me learning the ropes of electron, but I'm fairly well-versed in HTML/CSS/JS, and things are coming along quite well!
+
+> For **downloads**, have a look at [releases](https://github.com/WubzyGD/FileKade/releases). ([git.wubzy.xyz](https://git.wubzy.xyz/Wubzy/FileKade/releases)), or build from source. Just `git clone`, `npm i` and `npm i -g electron`, then `npm start`
+
+## Features
+
+FileKade has *loads* of fun features that most file explorers don't have. Well, it will, at least.
+
+### Current
+
+- The basics. You can explore files :p
+- Sports a highly aesthetic background and theme
+- Fun, clean animations and moving gradients
+- Intuitive and speedy keybinds
+- Clean code that works with you and your changes both in and out of the app
+
+_yeah listen it's not super powerful yet \*cough* we **are** in alpha_ 
+
+### Planned
+
+- A sidebar to quickly access your most-used folders
+  - Possibly folders to really organize your favorite places?
+  - Maybe some user-set icons, too
+- Loads of settings
+  - Custom backgrounds
+  - Custom colors
+- In-app file-viewers and maybe even editors
+- Integration with apps like Windows terminal and Visual Studio Code
+
+## Contribution
+
+Want to contribute to FileKade? **Awesome!**
+
+Fork and make a PR. I'm not going to burst a blood vessel over formatters or anything like that; just a hobbyist making something fun, so if you have something you want to add, don't be shy at all to add it!
+
+## Acknowledgements/Other
+
+*Notice*: FileKade is a project currently in its **Alpha** state. Everything is temporary and nothing is bug-free (theoretically). Certainly don't rely on this file explorer as your main driver or anything. Linux support is currently minimal at best, and MacOS is entirely untested and likely to break.
+
+This project was heavily inspired by [Xplorer](https://github.com/kimlimjustin/xplorer). Its current file icons were taken from that app, because again, this project is not intended to be public at the current moment. In other words, you're free to use FileKade, but don't shoot me for the icons :3
+
+I'd also like to thank [JetBrains](https://jetbrains.com) for their open source license. I use [WebStorm](https://www.jetbrains.com/webstorm) religiously, and it's been an immense help and a wonderful IDE that I'm happy to call my main JS/HTML IDE.

index.html

@@ -27,6 +27,7 @@
                     <div>
                         <h2 class="nosel">Quick Access</h2>
                     </div>
+                    <div id="favorites-container"></div>
                 </div>
             </div>
             <div id='container'>

json/changelogs/1.4.3.json

@@ -0,0 +1 @@
+{"log":{"Keybinds":["Ctrl+R: Now does a refresh instead of reload","Ctrl+Shift+R: Does a hard reload instead","Alt+A: Switches between ascending and descending","Alt+S or Alt+T: Changes sorting type"]},"version":{"name":"Alpha","semver":"1.4.3"}}

json/changelogs/1.4.4.json

@@ -0,0 +1 @@
+{"log":{"Toasts":["Toasts now have moving timers","They'll soon pause on hover. (Soon:tm:)"]},"version":{"name":"Alpha","semver":"1.4.4"}}

json/changelogs/1.5.0.json

@@ -0,0 +1 @@
+{"log":{"Sidebar":["There's now a sidebar! :D","The sidebar properly flows with other elements. Have to add this as a changelog cause it took some love","There are some default quick access buttons for Windows","The quick access buttons do in fact work"]},"version":{"name":"Alpha","semver":"1.5.0"}}

json/changelogs/1.5.1.json

@@ -0,0 +1 @@
+{"log":{"Bugs":["Changelogs work in production","My brain is quite small yes yes","Hope this doesn't break anything else *shrug*"]},"version":{"name":"Alpha","semver":"1.5.1"}}

json/qa.json

@@ -0,0 +1,23 @@
+{
+    "default": [
+        {
+            "name": "Desktop",
+            "win32": "{r}\\Desktop"
+        }, {
+            "name": "Documents",
+            "win32": "{r}\\Documents"
+        }, {
+            "name": "Pictures",
+            "win32": "{r}\\Pictures"
+        }, {
+            "name": "Videos",
+            "win32": "{r}\\Videos"
+        }, {
+            "name": "Music",
+            "win32": "{r}\\Music"
+        }, {
+            "name": "Downloads",
+            "win32": "{r}\\Downloads"
+        }
+    ]
+}

json/shortcuts.json

@@ -1,10 +1,14 @@
 {
     "process": {
-        "ctrl+r": "reload",
+        "ctrl+shift+r": "reload",
         "command+r": "reload",
         "ctrl+shift+i": "devtool"
     },
     "renderer": {
-        "ctrl+n": "newfolder"
+        "ctrl+n": "newfolder",
+        "ctrl+r": "refresh",
+        "alt+a": "changeascend",
+        "alt+s": "changesort",
+        "alt+t": "changesort"
     }
 }

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "filekade",
-  "version": "1.4.2",
+  "version": "1.5.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "filekade",
-      "version": "1.4.2",
+      "version": "1.5.1",
       "license": "ISC",
       "dependencies": {
         "chalk": "^4.1.2",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "filekade",
-  "version": "1.4.2",
+  "version": "1.5.1",
   "description": "A file explorer (primarily a learning experience for me)",
   "main": "main.js",
   "scripts": {

scripts/contextmenu/refresh.js

@@ -1,3 +1,4 @@
 module.exports = () => {
+    require('../toast/createtoast')("Refresh", "View refreshed!");
     require('../fileview/lightrefresh')(window.kade.cpath);
 };

scripts/keybinds/renderer/changeascend.js

@@ -0,0 +1 @@
+module.exports = () => {require('../../buttons/changeascend')();};

scripts/keybinds/renderer/changesort.js

@@ -0,0 +1 @@
+module.exports = () => {require('../../buttons/changesort')();};

scripts/keybinds/renderer/refresh.js

@@ -0,0 +1 @@
+module.exports = () => {require('../../contextmenu/refresh')();};

scripts/startup/changelog.js

@@ -1,10 +1,11 @@
 const fs = require('fs');
 const Mousetrap = require('../dep/mousetrap');
+const path = require('path');
 
 const preModal = require('../modal/pre');
 const postModal = require('../modal/post');
 
-const changelogs = fs.readdirSync('./json/changelogs').filter(file => file.endsWith('.json'));
+const changelogs = fs.readdirSync(path.join(__dirname, '../../', '/json/changelogs')).filter(file => file.endsWith('.json'));
 
 module.exports = () => {
     if (window.kade.modal) {return;}

scripts/startup/initsidebar.js

@@ -0,0 +1,27 @@
+const refresh = require('../fileview/refresh');
+
+const qa = require('../../json/qa.json');
+const os = require("os");
+
+module.exports = () => {
+    let root
+    switch (window.kade.platform) {
+        case 'win32':
+            root = `${os.homedir()}`;
+            break;
+        case 'linux':
+            root = `~/home`;
+            break;
+    }
+
+    let quickAccess = document.getElementById('favorites-container');
+
+    qa.default.forEach(i => {
+        let quick = document.createElement('div');
+        quick.innerHTML = i.name;
+        quick.onclick = () => {refresh(i[window.kade.platform].replace('{r}', root));};
+        quick.className = 'favorites-button';
+        quick.classList.add('nosel');
+        quickAccess.appendChild(quick);
+    });
+};

scripts/startup/preload.js

@@ -40,6 +40,7 @@ window.addEventListener('DOMContentLoaded', () => {
     }
 
     require('./initcontext')();
+    require('./initsidebar')();
 
     require('../fileview/refresh')(startDir);
     setButtons();

scripts/toast/createtoast.js

@@ -1,6 +1,6 @@
 const removeToast = require('./removetoast');
 
-module.exports = (name, text, bg = '#a172a6', persistOnClick = false, time = 5, onclick = () => {}, selectable = false) => {
+module.exports = (name, text, bg = '#a172a6', persistOnClick = false, time = 5, onclick = () => {}, selectable = false, timerColor='#ddddddb2') => {
     if (!name || !text) {return;}
     if (!Array.isArray(text)) {text = [text];}
     let toast = document.createElement('div');
@@ -10,6 +10,8 @@ module.exports = (name, text, bg = '#a172a6', persistOnClick = false, time = 5,
     toast.classList.add('toast-entering');
     toast.onmouseenter = () => {toast.style.backgroundColor = bg;};
     toast.onmouseleave = () => {toast.style.backgroundColor = `${bg}c2`;};
+    let toastWrap = document.createElement('div');
+    toastWrap.className = 'toast-wrapper';
     let continueTimeout = true;
     toast.onclick = () => {
         if (!persistOnClick) {
@@ -19,18 +21,26 @@ module.exports = (name, text, bg = '#a172a6', persistOnClick = false, time = 5,
         onclick();
     };
     document.getElementById('toast-container').appendChild(toast);
+    toast.appendChild(toastWrap);
     let h2 = document.createElement('h2');
     h2.innerHTML = name;
     if (!selectable) {h2.className = 'nosel';}
-    toast.appendChild(h2);
+    toastWrap.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);
+            toastWrap.appendChild(p);
         }
-        else {toast.appendChild(document.createElement('br'));}
+        else {toastWrap.appendChild(document.createElement('br'));}
     }
+    let timer = document.createElement('div');
+    timer.className = 'toast-timer';
+    timer.style.backgroundColor = timerColor;
+    timer.style.animation = `toast-timer ${time}s linear`;
+    toastWrap.appendChild(timer);
+    //toast.onmouseenter = () => {timer.style.animationPlayState = 'paused';};
+    //toast.onmouseleave = () => {timer.style.animationPlayState = 'normal';};
     setTimeout(() => {if (continueTimeout) {removeToast(toast);}}, time * 1000);
 };

scripts/toast/removetoast.js

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

styles/sidebar.css

@@ -12,4 +12,27 @@
     height: 100%;
 }
 
-#container {margin-left: 200px;}
+#container {margin-left: 200px;}
+
+#favorites-container {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    align-content: flex-start;
+    justify-content: flex-start;
+    row-gap: 6px;
+}
+
+.favorites-button {
+    padding: 4px 6px;
+    color: #afafaf;
+    border-radius: 3px 3px;
+    cursor: pointer;
+    transition: padding-left .05s linear;
+}
+
+.favorites-button:hover {
+    background-color: #a172a65f;
+    padding-left: 10px;
+    color: white;
+}

styles/toast.css

@@ -19,6 +19,11 @@
     }
 }
 
+@keyframes toast-timer {
+    to {width: 100%;}
+    from {width: 0;}
+}
+
 #toast-container {
     position: fixed;
     top: 34px;
@@ -38,7 +43,7 @@
     color: white;
     animation: enter-toast .25s ease-out 1;
     animation-fill-mode: both;
-    padding: 4px 6px;
+    padding: 0 0;
     border-color: #a172a6c2;
     border-style: solid;
     border-width: 1px;
@@ -68,4 +73,18 @@
     font-size: 20px;
     font-family: 'Nunito', sans-serif;
     margin: 6px 0 2px 8px;
+}
+
+.toast-timer {
+    height: 5px;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+}
+
+.toast-wrapper {
+    padding: 4px 6px;
+    position: relative;
+    max-height: inherit;
+    height: inherit;
 }