From 16e8490b3045cbac83f65e8c978fe5196f1fa0c7 Mon Sep 17 00:00:00 2001 From: pika Date: Mon, 24 Mar 2025 14:38:18 +0100 Subject: [PATCH] wip --- app/static/css/modal.css | 10 +++- app/static/css/styles.css | 115 ++++++++++++++++++++++++++++++++++++++ app/static/css/upload.css | 115 ++++++++++++++++++++++++++++++++++++++ app/static/js/main.js | 50 ++++++++--------- app/static/js/upload.js | 37 +++++++----- app/templates/base.html | 93 +++++++++++++++--------------- 6 files changed, 330 insertions(+), 90 deletions(-) diff --git a/app/static/css/modal.css b/app/static/css/modal.css index b664de1..f103e45 100644 --- a/app/static/css/modal.css +++ b/app/static/css/modal.css @@ -1,5 +1,7 @@ -/* Beautiful modal styles */ -.modal { +/* Modal Styles */ +.modal, +.upload-modal, +[class*="-modal"] { display: none; position: fixed; top: 0; @@ -13,7 +15,9 @@ transition: opacity 0.3s ease, visibility 0.3s ease; } -.modal.active { +.modal.active, +.upload-modal.active, +[class*="-modal"].active { display: flex; opacity: 1; visibility: visible; diff --git a/app/static/css/styles.css b/app/static/css/styles.css index fc94d64..5b56afd 100644 --- a/app/static/css/styles.css +++ b/app/static/css/styles.css @@ -1149,4 +1149,119 @@ body { display: flex; justify-content: flex-end; gap: 10px; +} + +/* Upload Files Panel */ +.upload-files-panel { + position: fixed; + top: 0; + right: 0; + width: 320px; + height: 100%; + background-color: var(--card-bg); + box-shadow: -2px 0 10px rgba(0, 0, 0, 0.2); + z-index: 1000; + transform: translateX(100%); + transition: transform 0.3s ease; + overflow: hidden; + display: flex; + flex-direction: column; +} + +.upload-files-panel.active { + transform: translateX(0); +} + +.upload-files-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 15px; + border-bottom: 1px solid var(--border-color); +} + +.upload-files-header h3 { + margin: 0; + font-size: 1.2rem; + color: var(--text-color); +} + +.upload-files-header .close-btn { + background: none; + border: none; + color: var(--text-muted); + font-size: 1.2rem; + cursor: pointer; + transition: color 0.2s ease; +} + +.upload-files-header .close-btn:hover { + color: var(--danger-color); +} + +.upload-files-content { + flex: 1; + padding: 15px; + overflow-y: auto; +} + +.upload-drop-area { + border: 2px dashed var(--border-color); + border-radius: 8px; + padding: 30px 20px; + text-align: center; + margin-bottom: 20px; + transition: border-color 0.2s ease, background-color 0.2s ease; +} + +.upload-drop-area.drag-over { + border-color: var(--primary-color); + background-color: rgba(var(--primary-rgb), 0.05); +} + +.upload-drop-area i { + font-size: 2.5rem; + color: var(--text-muted); + margin-bottom: 10px; +} + +.upload-drop-area p { + margin: 10px 0; + color: var(--text-color); +} + +.upload-files-footer { + padding: 15px; + border-top: 1px solid var(--border-color); +} + +.upload-progress { + margin-bottom: 15px; +} + +.upload-progress-label { + display: flex; + justify-content: space-between; + margin-bottom: 5px; + font-size: 0.9rem; + color: var(--text-muted); +} + +.upload-progress-bar { + height: 6px; + background-color: var(--border-color); + border-radius: 3px; + overflow: hidden; +} + +.upload-progress-bar-fill { + height: 100%; + background-color: var(--primary-color); + width: 0%; + transition: width 0.3s ease; +} + +.upload-actions { + display: flex; + justify-content: space-between; } \ No newline at end of file diff --git a/app/static/css/upload.css b/app/static/css/upload.css index acc4563..797d24f 100644 --- a/app/static/css/upload.css +++ b/app/static/css/upload.css @@ -299,4 +299,119 @@ transform: translateX(100%); opacity: 0; } +} + +/* Upload Files Panel */ +.upload-files-panel { + position: fixed; + top: 0; + right: 0; + width: 320px; + height: 100%; + background-color: var(--card-bg); + box-shadow: -2px 0 10px rgba(0, 0, 0, 0.2); + z-index: 1000; + transform: translateX(100%); + transition: transform 0.3s ease; + overflow: hidden; + display: flex; + flex-direction: column; +} + +.upload-files-panel.active { + transform: translateX(0); +} + +.upload-files-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 15px; + border-bottom: 1px solid var(--border-color); +} + +.upload-files-header h3 { + margin: 0; + font-size: 1.2rem; + color: var(--text-color); +} + +.upload-files-header .close-btn { + background: none; + border: none; + color: var(--text-muted); + font-size: 1.2rem; + cursor: pointer; + transition: color 0.2s ease; +} + +.upload-files-header .close-btn:hover { + color: var(--danger-color); +} + +.upload-files-content { + flex: 1; + padding: 15px; + overflow-y: auto; +} + +.upload-drop-area { + border: 2px dashed var(--border-color); + border-radius: 8px; + padding: 30px 20px; + text-align: center; + margin-bottom: 20px; + transition: border-color 0.2s ease, background-color 0.2s ease; +} + +.upload-drop-area.drag-over { + border-color: var(--primary-color); + background-color: rgba(var(--primary-rgb), 0.05); +} + +.upload-drop-area i { + font-size: 2.5rem; + color: var(--text-muted); + margin-bottom: 10px; +} + +.upload-drop-area p { + margin: 10px 0; + color: var(--text-color); +} + +.upload-files-footer { + padding: 15px; + border-top: 1px solid var(--border-color); +} + +.upload-progress { + margin-bottom: 15px; +} + +.upload-progress-label { + display: flex; + justify-content: space-between; + margin-bottom: 5px; + font-size: 0.9rem; + color: var(--text-muted); +} + +.upload-progress-bar { + height: 6px; + background-color: var(--border-color); + border-radius: 3px; + overflow: hidden; +} + +.upload-progress-bar-fill { + height: 100%; + background-color: var(--primary-color); + width: 0%; + transition: width 0.3s ease; +} + +.upload-actions { + display: flex; + justify-content: space-between; } \ No newline at end of file diff --git a/app/static/js/main.js b/app/static/js/main.js index cf75aa7..e1aa0d9 100644 --- a/app/static/js/main.js +++ b/app/static/js/main.js @@ -88,38 +88,38 @@ function initializeFolderNavigation() { // Modal handling function initializeModals() { - // New folder modal - const newFolderBtn = document.getElementById('new-folder-btn'); - const newFolderModal = document.getElementById('new-folder-modal'); - const emptyNewFolderBtn = document.getElementById('empty-new-folder-btn'); + // Hide all modals by default + document.querySelectorAll('.modal, .upload-modal, [class*="-modal"]').forEach(modal => { + modal.style.display = 'none'; + modal.style.opacity = '0'; + modal.style.visibility = 'hidden'; - if (newFolderBtn && newFolderModal) { - newFolderBtn.addEventListener('click', function () { - newFolderModal.style.display = 'flex'; - document.getElementById('folder-name').focus(); - }); - - if (emptyNewFolderBtn) { - emptyNewFolderBtn.addEventListener('click', function () { - newFolderModal.style.display = 'flex'; - document.getElementById('folder-name').focus(); - }); - } - - // Close modal - document.querySelectorAll('.modal-close, .modal-cancel').forEach(btn => { + // Get close buttons + const closeButtons = modal.querySelectorAll('.modal-close, .close-btn, .modal-cancel'); + closeButtons.forEach(btn => { btn.addEventListener('click', function () { - newFolderModal.style.display = 'none'; + modal.classList.remove('active'); }); }); - // Close on click outside - window.addEventListener('click', function (event) { - if (event.target === newFolderModal) { - newFolderModal.style.display = 'none'; + // Close when clicking outside + modal.addEventListener('click', function (e) { + if (e.target === modal) { + modal.classList.remove('active'); } }); - } + }); + + // Setup modal triggers + document.querySelectorAll('[data-modal]').forEach(trigger => { + trigger.addEventListener('click', function () { + const modalId = this.dataset.modal; + const modal = document.getElementById(modalId); + if (modal) { + modal.classList.add('active'); + } + }); + }); } // Context menu for right-click on files/folders diff --git a/app/static/js/upload.js b/app/static/js/upload.js index c8b942f..3337282 100644 --- a/app/static/js/upload.js +++ b/app/static/js/upload.js @@ -472,29 +472,40 @@ document.addEventListener('DOMContentLoaded', function () { } // File upload functionality - const uploadBtn = document.querySelector('.btn.primary [class*="fa-upload"]'); - const fileInput = document.getElementById('file-upload'); + const uploadButton = document.getElementById('upload-button'); + const uploadModal = document.querySelector('.upload-modal'); - // Check if we're on upload page or have upload elements - if (uploadBtn && fileInput) { - uploadBtn.addEventListener('click', function (e) { - // Trigger the hidden file input + // Hide upload modal by default if it exists + if (uploadModal) { + uploadModal.style.display = 'none'; + uploadModal.style.opacity = '0'; + uploadModal.style.visibility = 'hidden'; + } + + // Setup upload button + if (uploadButton && fileInput) { + uploadButton.addEventListener('click', function () { fileInput.click(); }); fileInput.addEventListener('change', function () { - if (this.files.length) { + if (this.files.length > 0) { + // Handle file upload handleFileUpload(this.files); } }); - - // Setup drag and drop zone if exists - const dropzone = document.getElementById('dropzone'); - if (dropzone) { - setupDragAndDrop(dropzone); - } } + // Close upload modal when close button is clicked + const closeButtons = document.querySelectorAll('.upload-modal .close-btn, .upload-modal .modal-close'); + closeButtons.forEach(btn => { + btn.addEventListener('click', function () { + if (uploadModal) { + uploadModal.classList.remove('active'); + } + }); + }); + // Handle file upload process function handleFileUpload(files) { // Show progress indicator diff --git a/app/templates/base.html b/app/templates/base.html index 0285b78..e700a3d 100644 --- a/app/templates/base.html +++ b/app/templates/base.html @@ -59,6 +59,50 @@ + + +
+
+

Upload Files

+ +
+ +
+
+ +

Drag & drop files or folders here

+

or

+ + +
+ +
+

Upload Queue

+
+ +
+
+
+ +
+
+
+ Overall Progress + 0% +
+
+
+
+
+ +
+ + +
+
+
{% endif %} @@ -168,55 +212,6 @@ {% include 'components/mobile_menu.html' %} {% endif %} - -
-
-
-

Upload Files

- -
- -
-
- -

Drag & drop files or folders here

-

or

-
- - -
-
- -
-

Upload Queue

-
-
- -
-
- Overall Progress - 0% -
-
-
-
-
-
- -
- - -
-
-
-