Added parent button to explorer

Added explorer context menu
zen-fs · Oct 14, 2024 · 395773e · 395773e
1 parent fa6f643
commit 395773e
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 8 deletions.
diff --git a/src/explorer.ts b/src/explorer.ts
@@ -1,5 +1,5 @@
 import { fs } from '@zenfs/core';
-import { cwd, join } from '@zenfs/core/emulation/path.js';
+import { cwd, dirname, join } from '@zenfs/core/emulation/path.js';
 import $ from 'jquery';
 import { formatCompact } from 'utilium';
 import { cloneTemplate } from 'utilium/dom.js';
@@ -31,6 +31,19 @@ function createEntry(name: string) {
 		}
 
 		li.toggleClass('selected');
+		$('#explorer .menu').hide();
+	});
+
+	li.on('contextmenu', e => {
+		e.preventDefault();
+
+		$('#explorer .menu')
+			.toggle()
+			.css({
+				left: e.clientX + 'px',
+				top: e.clientY + 'px',
+			});
+		return false;
 	});
 
 	li.appendTo('#explorer');
@@ -43,3 +56,8 @@ export function update() {
 		createEntry(file);
 	}
 }
+
+$('#explorer .parent').on('click', () => {
+	openPath(dirname(cwd));
+	update();
+});
diff --git a/src/index.html b/src/index.html
@@ -41,7 +41,20 @@
 		</ul>
 
 		<ul id="explorer" class="tab" style="display: none">
-			<strong class="top">Explorer</strong>
+			<div class="top">
+				<p><strong>Explorer</strong></p>
+				<div>
+					<button class="parent"><strong>↑</strong> Parent</button>
+				</div>
+			</div>
+
+			<div class="menu" style="display: none">
+				<div class="contents">
+					<div>Open</div>
+					<div>Rename</div>
+					<div>Delete</div>
+				</div>
+			</div>
 
 			<li class="header">
 				<p class="name">Name</p>

diff --git a/src/styles.css b/src/styles.css
@@ -86,7 +86,7 @@ input:focus {
 
 	li {
 		position: relative;
-		top: 2em;
+		top: 6em;
 		border-radius: 0.25em;
 		padding: 0.25em;
 	}
@@ -105,11 +105,6 @@ input:focus {
 		right: 1em;
 		bottom: 1em;
 	}
-
-	li {
-		position: relative;
-		top: 6em;
-	}
 }
 
 #explorer {
@@ -155,6 +150,31 @@ input:focus {
 		border: 1px solid #777;
 		border-radius: 0.5em;
 	}
+
+	.menu {
+		position: fixed;
+		left: 0;
+		top: 0;
+	}
+
+	.menu .contents {
+		padding: 1em;
+		display: flex;
+		flex-direction: column;
+		border: 1px solid #888;
+		background-color: #555;
+		border-radius: 0.5em;
+		z-index: 10;
+
+		div {
+			padding: 0.5em;
+		}
+
+		div:hover {
+			background-color: #666;
+			border-radius: 0.5em;
+		}
+	}
 }
 
 #editor textarea.content {