joachim/FileRise
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

enhanced folder management helper

Browse Source
This commit is contained in:
Ryan
2025-03-20 00:13:09 -04:00
committed by GitHub
parent f75a4bd720
commit 8a7dcbe7bf
4 changed files with 68 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@@ -8,7 +8,7 @@ Multi File Upload Editor is a lightweight, secure web application for uploading,
---
# Features
## Features
- **Multiple File/Folder Uploads with Progress:**
- Users can select and upload multiple files & folders at once.

35
index.html
View File

@@ -151,10 +151,17 @@
</div>
</div>
</div>
<!-- Folder Management Card: 50% width on medium, 42% on large -->
<!-- Folder Management Card -->
<div class="col-md-6 col-lg-5 d-flex">
<div class="card flex-fill" style="max-width: 900px; width: 100%;">
<div class="card-header">Folder Navigation &amp; Management</div>
<div class="card flex-fill" style="max-width: 900px; width: 100%; position: relative;">
<!-- Card header with folder management title and help icon -->
<div class="card-header" style="display: flex; justify-content: space-between; align-items: center;">
<span>Folder Navigation &amp; Management</span>
<button id="folderHelpBtn" class="btn btn-link" title="Folder Help" style="padding: 0; border: none; background: none;">
<i class="material-icons folder-help-icon" style="font-size: 24px;">info</i>
</button>
</div>
<div class="card-body custom-folder-card-body">
<div class="form-group d-flex align-items-top" style="padding-top:0; margin-bottom:0;">
<div id="folderTreeContainer"></div>
@@ -204,19 +211,15 @@
</div>
</div>
</div>
<div id="folderExplanation" class="folder-explanation">
<details class="folder-help-details">
<summary class="folder-help-summary">
<i class="material-icons folder-help-icon">info</i>
Folder Navigation &amp; Management Help Info
</summary>
<ul class="folder-help-list">
<li>Click on a folder in the tree to view its files.</li>
<li>Use [-] to collapse and [+] to expand folders.</li>
<li>Select a folder and click "Create Folder" to add a subfolder.</li>
<li>To rename or delete a folder, select it and then click the appropriate button.</li>
</ul>
</details>
<!-- Help Tooltip: Initially hidden -->
<div id="folderHelpTooltip" class="folder-help-tooltip"
style="display: none; position: absolute; top: 50px; right: 15px; background: #fff; border: 1px solid #ccc; padding: 10px; z-index: 1000; box-shadow: 2px 2px 6px rgba(0,0,0,0.2);">
<ul class="folder-help-list" style="margin: 0; padding-left: 20px;">
<li>Click on a folder in the tree to view its files.</li>
<li>Use [-] to collapse and [+] to expand folders.</li>
<li>Select a folder and click "Create Folder" to add a subfolder.</li>
<li>To rename or delete a folder, select it and then click the appropriate button.</li>
</ul>
</div>
</div>
</div>

19
main.js
View File

@@ -123,6 +123,21 @@ document.addEventListener("DOMContentLoaded", function () {
initFileActions();
initUpload();
loadFolderTree();
const helpBtn = document.getElementById("folderHelpBtn");
const helpTooltip = document.getElementById("folderHelpTooltip");
helpBtn.addEventListener("click", function () {
// Toggle display of the tooltip.
if (helpTooltip.style.display === "none" || helpTooltip.style.display === "") {
helpTooltip.style.display = "block";
} else {
helpTooltip.style.display = "none";
}
// Set the icon color based on dark mode.
const helpIcon = document.querySelector("#folderHelpBtn > i.material-icons.folder-help-icon");
if (helpIcon) {
helpIcon.style.color = document.body.classList.contains("dark-mode") ? "#ffa500" : "orange";
}
});
} else {
console.warn("User not authenticated. Data loading deferred.");
}
@@ -131,9 +146,9 @@ document.addEventListener("DOMContentLoaded", function () {
// --- Auto-scroll During Drag ---
// Adjust these values as needed:
const SCROLL_THRESHOLD = 50; // pixels from edge to start scrolling
const SCROLL_SPEED = 10; // pixels to scroll per event
const SCROLL_SPEED = 20; // pixels to scroll per event
document.addEventListener("dragover", function(e) {
document.addEventListener("dragover", function (e) {
if (e.clientY < SCROLL_THRESHOLD) {
window.scrollBy(0, -SCROLL_SPEED);
} else if (e.clientY > window.innerHeight - SCROLL_THRESHOLD) {

44
styles.css
View File

@@ -183,6 +183,30 @@ body.dark-mode header {
background-color: rgba(255, 255, 255, 0.2);
}
/* Folder Help Tooltip - Light Mode */
.folder-help-tooltip {
background-color: #fff;
color: #333;
border: 1px solid #ccc;
border-radius: 4px;
padding: 10px;
box-shadow: 2px 2px 6px rgba(0,0,0,0.2);
}
/* Folder Help Tooltip - Dark Mode */
body.dark-mode .folder-help-tooltip {
background-color: #333 !important;
color: #eee !important;
border: 1px solid #555 !important;
}
#folderHelpBtn i.material-icons.folder-help-icon {
-webkit-text-fill-color: orange !important;
color: inherit !important;
}
body.dark-mode #folderHelpBtn i.material-icons.folder-help-icon {
-webkit-text-fill-color: #ffa500 !important; /* or another color for dark mode */
}
/************************************************************/
/* RESPONSIVE HEADER FIXES */
/************************************************************/
@@ -1561,21 +1585,6 @@ body.dark-mode #searchInput {
border: 1px solid #555;
}
.folder-explanation {
margin-top: 5px;
padding: 5px;
font-size: 12px;
color: #555;
background-color: solid transparent;
border: 1px solid transparent;
border-radius: 2px;
}
body.dark-mode .folder-explanation {
color: #ddd;
background-color: solid transparent;
border: 1px solid transparent;
}
body.dark-mode .CodeMirror {
background: #1e1e1e !important;
@@ -1636,3 +1645,8 @@ body.dark-mode .CodeMirror-matchingbracket {
background-color: #e0e0e0;
border: 1px dashed #666;
}
body.dark-mode .drop-hover {
background-color: rgba(255, 255, 255, 0.1) !important;
border-bottom: 1px dashed #ffffff !important;
}