set up contextmenu

toast
Kit Kasune 3 years ago
parent 946020a43a
commit 2b3662e337
  1. BIN
      assets/Nunito-VariableFont_wght.ttf
  2. 30
      index.html
  3. 2
      main.js
  4. 7
      scripts/contextmenu/createcontext.js
  5. 4
      scripts/contextmenu/hidecontext.js
  6. 7
      scripts/fileview/load/render.js
  7. 11
      scripts/startup/preload.js
  8. 35
      styles/context.css
  9. 1
      styles/styles.css

@ -7,6 +7,7 @@
<link href="./styles/styles.css" rel="stylesheet"> <link href="./styles/styles.css" rel="stylesheet">
<link href='./styles/files.css' rel='stylesheet'> <link href='./styles/files.css' rel='stylesheet'>
<link href='./styles/controls.css' rel='stylesheet'> <link href='./styles/controls.css' rel='stylesheet'>
<link href='./styles/context.css' rel='stylesheet'>
<title>FileKade</title> <title>FileKade</title>
</head> </head>
@ -33,6 +34,35 @@
</div> </div>
</div> </div>
<div id="ctx">
<div class="ctx-group">
<div class="ctx-item">
<p class="ctx-name nosel">New Folder</p>
</div>
</div>
<hr>
<div class="ctx-group">
<div class="ctx-item">
<p class="ctx-name nosel">Sort by: Name</p>
</div>
<div class="ctx-item">
<p class="ctx-name nosel">Order: Ascending</p>
</div>
</div>
<hr>
<div class="ctx-group">
<div class="ctx-item">
<p class="ctx-name nosel">Reload</p>
</div>
<div class="ctx-item">
<p class="ctx-name nosel">Refresh</p>
</div>
<div class="ctx-item">
<p class="ctx-name nosel">Options</p>
</div>
</div>
</div>
<script src="./scripts/renderer.js"></script> <script src="./scripts/renderer.js"></script>

@ -17,7 +17,7 @@ async function createWindow () {
}, },
titleBarStyle: "hidden", titleBarStyle: "hidden",
//titleBarOverlay: true, //titleBarOverlay: true,
}) });
// and load the index.html of the app. // and load the index.html of the app.
mainWindow.maximize(); mainWindow.maximize();

@ -0,0 +1,7 @@
module.exports = (e, target, window) => {
window.kade.context = true;
let ctx = document.getElementById('ctx');
ctx.style.left = `${e.pageX}px`;
ctx.style.top = `${e.pageY}px`;
ctx.style.display = 'block';
};

@ -0,0 +1,4 @@
module.exports = (window) => {
document.getElementById('ctx').style.display = 'none';
window.kade.context = false;
};

@ -1,6 +1,7 @@
const loadHierarchy = require("../hierarchy"); const loadHierarchy = require("../hierarchy");
const isOverflowing = require('../../dep/overflowing'); const isOverflowing = require('../../dep/overflowing');
const refresh = require("../refresh");
module.exports = (dir) => { module.exports = (dir) => {
const refresh = require("../refresh"); const refresh = require("../refresh");
@ -20,6 +21,12 @@ module.exports = (dir) => {
if (window.kade.cl) {window.kade.cl.classList.remove('file-active');} if (window.kade.cl) {window.kade.cl.classList.remove('file-active');}
window.kade.cl = cfc; window.kade.cl = cfc;
}; };
cfc.oncontextmenu = function () {
window.kade.elc = true;
if (!cfc.classList.contains('file-active')) {cfc.classList.add('file-active');}
if (window.kade.cl) {window.kade.cl.classList.remove('file-active');}
window.kade.cl = cfc;
};
cfc.style = `animation-delay: ${num * .03}s`; cfc.style = `animation-delay: ${num * .03}s`;
cfc.onanimationend = () => { cfc.onanimationend = () => {
cfc.style = ''; cfc.style = '';

@ -1,6 +1,7 @@
const os = require('os'); const os = require('os');
const setButtons = require('./setbuttons'); const setButtons = require('./setbuttons');
const hideContext = require('../contextmenu/hidecontext');
window.addEventListener('DOMContentLoaded', () => { window.addEventListener('DOMContentLoaded', () => {
window.kade = {}; window.kade = {};
@ -9,6 +10,7 @@ window.addEventListener('DOMContentLoaded', () => {
window.kade.cpath = ''; window.kade.cpath = '';
window.kade.sort = 'Name'; window.kade.sort = 'Name';
window.kade.ascend = true; window.kade.ascend = true;
window.kade.context = false;
const startDir = `${os.homedir}\\Desktop`; const startDir = `${os.homedir}\\Desktop`;
@ -20,12 +22,19 @@ window.addEventListener('DOMContentLoaded', () => {
if (window.kade.elc) {window.kade.elc = false; return;} if (window.kade.elc) {window.kade.elc = false; return;}
if (window.kade.cl) {window.kade.cl.classList.remove('file-active');} if (window.kade.cl) {window.kade.cl.classList.remove('file-active');}
}, 100); }, 100);
if (window.kade.context) {hideContext(window);}
} }
document.getElementById('ctx').style.display = 'none';
require('../keybinds/handleKey')(); require('../keybinds/handleKey')();
}); });
window.addEventListener('contextmenu', e => { window.addEventListener('contextmenu', e => {
e.preventDefault(); e.preventDefault();
require('../contextmenu/createcontext')(e, e.target, window);
setTimeout(function () {
if (window.kade.elc) {window.kade.elc = false; return;}
if (window.kade.cl) {window.kade.cl.classList.remove('file-active');}
}, 100);
}); });

@ -0,0 +1,35 @@
#ctx {
font-family: 'Nunito', sans-serif;
font-size: 16px;
color: #d4d4d4;
border-radius: 7px 7px;
position: absolute;
background-color: #101010df;
padding: 7px 5px;
border: 1px solid #af2188a4;
}
#ctx hr {
margin: 4px 5px;
border-color: #f3f3f3ca;
}
.ctx-item p {margin: 0 0; padding: 0 0;}
.ctx-item {
cursor: pointer;
border-radius: 3px;
transition: background-color .1s ease-in;
margin: 0 0;
padding: 4px;
}
.ctx-item:hover {background-color: #90909049;}
.ctx-group {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: stretch;
align-content: stretch;
row-gap: 2px;
}

@ -54,6 +54,7 @@ body {
overflow: hidden; overflow: hidden;
background-color: #0000006d; background-color: #0000006d;
z-index: 1; z-index: 1;
-webkit-app-region: drag;
} }
.nosel {-webkit-user-select: none;} .nosel {-webkit-user-select: none;}
Loading…
Cancel
Save