Merge branch 'sidebar'

sidebar
Kit Kasune 3 years ago
commit a43921c026
  1. 33
      index.html
  2. 23
      json/qa.json
  3. 27
      scripts/startup/initsidebar.js
  4. 1
      scripts/startup/preload.js
  5. 1
      styles/context.css
  6. 2
      styles/files.css
  7. 4
      styles/modal.css
  8. 38
      styles/sidebar.css
  9. 5
      styles/styles.css

@ -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='controls' class='controls'>
<div id='header-buttons'></div>
<div id='header-nav'></div>
<div id="master">
<div id="sidebar">
<div id="favorites">
<div>
<h2 class="nosel">Quick Access</h2>
</div>
<div id="favorites-container"></div>
</div>
</div>
<div id='files' class='files'>
<div id='file-header' class='file-header'>
<p></p>
<p>Name</p>
<p>Type</p>
<p>Last Modified</p>
<p>Size</p>
<div id='container'>
<div id='controls' class='controls'>
<div id='header-buttons'></div>
<div id='header-nav'></div>
</div>
<div id='files' class='files'>
<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>

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

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

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

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

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

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

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

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

Loading…
Cancel
Save