Merge branch 'sidebar'

index.html

@@ -10,6 +10,7 @@
         <link href='./styles/context.css' rel='stylesheet'>
         <link href='./styles/modal.css' rel='stylesheet'>
         <link href="./styles/toast.css" rel="stylesheet">
+        <link href="./styles/sidebar.css" rel="stylesheet">
 
         <title>FileKade</title>
     </head>
@@ -20,18 +21,28 @@
             </div>
         </div>
 
-        <div id='container'>
+        <div id="master">
-            <div id='controls' class='controls'>
+            <div id="sidebar">
-                <div id='header-buttons'></div>
+                <div id="favorites">
-                <div id='header-nav'></div>
+                    <div>
+                        <h2 class="nosel">Quick Access</h2>
+                    </div>
+                    <div id="favorites-container"></div>
+                </div>
             </div>
-            <div id='files' class='files'>
+            <div id='container'>
-                <div id='file-header' class='file-header'>
+                <div id='controls' class='controls'>
-                    <p></p>
+                    <div id='header-buttons'></div>
-                    <p>Name</p>
+                    <div id='header-nav'></div>
-                    <p>Type</p>
+                </div>
-                    <p>Last Modified</p>
+                <div id='files' class='files'>
-                    <p>Size</p>
+                    <div id='file-header' class='file-header'>
+                        <p></p>
+                        <p>Name</p>
+                        <p>Type</p>
+                        <p>Last Modified</p>
+                        <p>Size</p>
+                    </div>
                 </div>
             </div>
         </div>

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"
+        }
+    ]
+}

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();

styles/context.css

@@ -7,6 +7,7 @@
     position: absolute;
     background-color: #101010df;
     padding: 7px 5px;
+    z-index: 2;
 }
 
 #ctx hr {

styles/files.css

@@ -10,7 +10,7 @@
 }
 
 .files {
-    margin: 0 15px 12px 15px;
+    margin: 0 15px 12px 7px;
     display: flex;
     flex-direction: column;
     justify-content: space-between;

styles/modal.css

@@ -9,7 +9,7 @@
     border: 1px solid #af2188a4;
     background-color: #171717da;
     padding: 6px 8px;
-    z-index: 3;
+    z-index: 4;
     max-width: 50%;
 }
 
@@ -65,7 +65,7 @@
     top: 0;
     left: 0;
     background-color: #1717176d;
-    z-index: 2;
+    z-index: 3;
 }
 
 .error-modal {max-width: 45%;}

styles/sidebar.css

@@ -0,0 +1,38 @@
+#sidebar {
+    width: 180px;
+    border-right: 1px solid #5d60caaf;
+    margin: 26px 0 0 0;
+    padding: 0 14px 12px 14px;
+    position: fixed;
+    z-index: 1;
+    overflow-x: hidden;
+    top: 0;
+    left: 0;
+    background-color: #0000006d;
+    height: 100%;
+}
+
+#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/styles.css

@@ -11,7 +11,6 @@ body {
     color: #d3d3d3;
     font-family: 'Montserrat', sans-serif;
     overflow-y: overlay;
-    width: calc(100vw) - 10px;
 }
 
 .rise {
@@ -32,7 +31,7 @@ body {
 #title {
     font-family: 'Nunito', sans-serif;
     margin: 0 0;
-    z-index: 1;
+    z-index: 2;
     animation: shine 5s linear infinite;
     background: linear-gradient(to right, #5d60ca 20%, #171717 35%, #171717 35%, #5d60ca 50%, #5d60ca 50%, #af2188 75%, #5d60ca 90%);
     background-size: 200% auto;
@@ -55,7 +54,7 @@ body {
     width: 100vw;
     overflow: hidden;
     background-color: #0000006d;
-    z-index: 1;
+    z-index: 2;
     -webkit-app-region: drag;
 }