fun/Task-Management
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance note-taking features by adding label support, improving modal styles, and refining CSS for better responsiveness. Update login page title and adjust password management UI for better usability.

Browse Source
This commit is contained in:
root
2026-03-27 20:04:52 +07:00
parent 937033ea07
commit 99f948ba5d
5 changed files with 188 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
views/projects.php
View File

@@ -138,17 +138,6 @@ function get_file_icon($name, $is_folder) {
<input type="hidden" name="item_id" id="delete-item-id">
</form>
<div class="header" style="margin-bottom:0.75rem;">
<h1 style="font-size:1.5rem; font-weight:700;">📁 Project Explorer</h1>
<div style="display:flex; gap:0.5rem; flex-wrap:wrap;">
<label class="btn btn-secondary" style="cursor:pointer;">
<i class="fa fa-arrow-up-from-bracket"></i> Upload File
<input type="file" id="file-upload-input" style="display:none;" onchange="handleFileSelect(this)">
</label>
<button class="btn" onclick="showNewFolderDialog()"><i class="fa fa-folder-plus"></i> New Folder</button>
</div>
</div>
<!-- Hidden folder create form -->
<form method="POST" id="new-folder-form" style="display:none;">
<input type="hidden" name="create_folder" value="1">
@@ -156,7 +145,7 @@ function get_file_icon($name, $is_folder) {
</form>
<!-- Explorer Toolbar / Breadcrumb -->
<div class="explorer-toolbar">
<div class="explorer-toolbar" style="margin-bottom:0.75rem;">
<a href="?action=projects" class="btn btn-secondary btn-sm" title="Home">
<i class="fa fa-house"></i>
</a>
@@ -173,21 +162,24 @@ function get_file_icon($name, $is_folder) {
<?php endforeach; ?>
</div>
<!-- Search -->
<input type="text" id="explorer-search" placeholder="Search..." class="form-control" style="width:180px; padding:0.4rem 0.6rem; font-size:0.85rem;" oninput="filterExplorer(this.value)">
<label class="btn btn-secondary btn-sm" style="cursor:pointer;">
<i class="fa fa-arrow-up-from-bracket"></i> Upload File
<input type="file" id="file-upload-input" style="display:none;" onchange="handleFileSelect(this)">
</label>
<button class="btn btn-sm" onclick="showNewFolderDialog()"><i class="fa fa-folder-plus"></i> New Folder</button>
</div>
<!-- Drop Zone -->
<div id="dropzone" class="dropzone" style="padding:1.5rem; margin-bottom:0.75rem;"
ondragover="this.classList.add('dragover'); return false;"
ondragleave="this.classList.remove('dragover');"
ondrop="handleDrop(event)">
<i class="fa fa-cloud-arrow-up" style="font-size:1.5rem; margin-bottom:0.5rem; display:block;"></i>
Drag & drop files here to upload
<div id="drag-upload-overlay" style="position:fixed; inset:0; z-index:1200; display:none; align-items:center; justify-content:center; pointer-events:none; background:rgba(15,23,42,0.45); backdrop-filter:blur(2px);">
<div style="background:var(--surface); border:2px dashed var(--primary); border-radius:1rem; padding:2rem 2.5rem; color:var(--text); text-align:center; box-shadow:0 12px 30px rgba(0,0,0,0.2);">
<i class="fa fa-cloud-arrow-up" style="font-size:2rem; margin-bottom:0.6rem; display:block; color:var(--primary);"></i>
<div style="font-weight:700; margin-bottom:0.2rem;">Drop files to upload</div>
<div style="font-size:0.84rem; color:var(--text-light);">Release your file anywhere on this page</div>
</div>
</div>
<!-- Detail Table -->
<div class="card" style="padding:0; overflow:hidden;">
<div class="card" style="padding:0; overflow:hidden; min-height:calc(100vh - 190px);">
<table class="explorer-table" id="explorer-table">
<thead>
<tr>
@@ -305,7 +297,7 @@ function handleFileSelect(input) {
function handleDrop(e) {
e.preventDefault();
e.currentTarget.classList.remove('dragover');
hideDragOverlay();
if(e.dataTransfer.files.length > 0) uploadFile(e.dataTransfer.files[0]);
}
@@ -318,6 +310,35 @@ function uploadFile(file) {
.then(() => window.location.reload());
}
let dragCounter = 0;
const dragOverlay = document.getElementById('drag-upload-overlay');
function showDragOverlay() {
if(dragOverlay) dragOverlay.style.display = 'flex';
}
function hideDragOverlay() {
if(dragOverlay) dragOverlay.style.display = 'none';
}
document.addEventListener('dragenter', (e) => {
if(!e.dataTransfer || !Array.from(e.dataTransfer.types || []).includes('Files')) return;
dragCounter++;
showDragOverlay();
});
document.addEventListener('dragover', (e) => {
if(!e.dataTransfer || !Array.from(e.dataTransfer.types || []).includes('Files')) return;
e.preventDefault();
});
document.addEventListener('dragleave', (e) => {
if(!e.dataTransfer || !Array.from(e.dataTransfer.types || []).includes('Files')) return;
dragCounter = Math.max(0, dragCounter - 1);
if(dragCounter === 0) hideDragOverlay();
});
document.addEventListener('drop', (e) => {
if(!e.dataTransfer || !Array.from(e.dataTransfer.types || []).includes('Files')) return;
e.preventDefault();
dragCounter = 0;
handleDrop(e);
});
// ── Select all ────────────────────────────────────────────────────────────────
function explorerSelectAll(chk) {
document.querySelectorAll('.explorer-check').forEach(c => c.checked = chk.checked);