cjw/Oxicloud
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

refactor(ui): use hidden class for upload + menu

Browse Source
This commit is contained in:
Edouard Vanbelle
2026-04-25 00:50:09 +02:00
parent 35fc9a0619
commit e148a92f5d
6 changed files with 23 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/css/components/spinner.css
+1 -1
View File
@@ -53,7 +53,7 @@
.upload-progress { .upload-progress {
margin-top: 15px; margin-top: 15px;
width: 100%; width: 100%;
display: none; display: block;
} }
.progress-bar { .progress-bar {
static/css/components/uploadDropdown.css
+1 -5
View File
@@ -11,7 +11,7 @@
} }
.upload-dropdown-menu { .upload-dropdown-menu {
display: none; display: block;
position: absolute; position: absolute;
top: calc(100% + 6px); top: calc(100% + 6px);
left: 0; left: 0;
@@ -25,10 +25,6 @@
animation: dropdownFadeIn 0.15s ease-out; animation: dropdownFadeIn 0.15s ease-out;
} }
.upload-dropdown-menu.show {
display: block;
}
@keyframes dropdownFadeIn { @keyframes dropdownFadeIn {
from { from {
opacity: 0; opacity: 0;
static/index.html
+1 -1
View File
@@ -221,7 +221,7 @@
<p data-i18n="dropzone.drag_files">Drag files here or click to select</p> <p data-i18n="dropzone.drag_files">Drag files here or click to select</p>
<input type="file" id="file-input" class="hidden" multiple> <input type="file" id="file-input" class="hidden" multiple>
<input type="file" id="folder-input" class="hidden" webkitdirectory directory multiple> <input type="file" id="folder-input" class="hidden" webkitdirectory directory multiple>
<div class="upload-progress"> <div class="upload-progress hidden">
<div class="progress-bar"> <div class="progress-bar">
<div class="progress-fill"></div> <div class="progress-fill"></div>
</div> </div>
static/js/app/main.js
+9 -9
View File
@@ -89,7 +89,7 @@ const ACTIONS_BAR_TEMPLATES = {
<span data-i18n="actions.upload">Upload</span> <span data-i18n="actions.upload">Upload</span>
<i class="fas fa-caret-down icon-ml"></i> <i class="fas fa-caret-down icon-ml"></i>
</button> </button>
<div class="upload-dropdown-menu" id="upload-dropdown-menu"> <div class="upload-dropdown-menu hidden" id="upload-dropdown-menu">
<button class="upload-dropdown-item" id="upload-files-btn"> <button class="upload-dropdown-item" id="upload-files-btn">
<i class="fas fa-file"></i> <i class="fas fa-file"></i>
<span data-i18n="actions.upload_files">Upload files</span> <span data-i18n="actions.upload_files">Upload files</span>
@@ -187,14 +187,14 @@ function setupActionsBarDelegation() {
case 'upload-files-btn': { case 'upload-files-btn': {
e.stopPropagation(); e.stopPropagation();
const menu = document.getElementById('upload-dropdown-menu'); const menu = document.getElementById('upload-dropdown-menu');
if (menu) menu.classList.remove('show'); if (menu) menu.classList.add('hidden');
if (elements.fileInput) elements.fileInput.click(); if (elements.fileInput) elements.fileInput.click();
break; break;
} }
case 'upload-folder-btn': { case 'upload-folder-btn': {
e.stopPropagation(); e.stopPropagation();
const menu = document.getElementById('upload-dropdown-menu'); const menu = document.getElementById('upload-dropdown-menu');
if (menu) menu.classList.remove('show'); if (menu) menu.classList.add('hidden');
const folderInput = document.getElementById('folder-input'); const folderInput = document.getElementById('folder-input');
if (folderInput) folderInput.click(); if (folderInput) folderInput.click();
break; break;
@@ -456,13 +456,13 @@ function setupUploadDropdown() {
'click', 'click',
(e) => { (e) => {
e.stopPropagation(); e.stopPropagation();
const isOpen = menu.classList.contains('show'); const isOpen = !menu.classList.contains('hidden');
// Close any other open dropdowns // Close any other open dropdowns
document.querySelectorAll('.upload-dropdown-menu.show').forEach((m) => { document.querySelectorAll('.upload-dropdown-menu').forEach((m) => {
m.classList.remove('show'); m.classList.add('hidden');
}); });
if (!isOpen) { if (!isOpen) {
menu.classList.add('show'); menu.classList.remove('hidden');
} }
}, },
{ signal } { signal }
@@ -475,8 +475,8 @@ function setupUploadDropdown() {
} }
uploadDropdownDocumentClickHandler = (e) => { uploadDropdownDocumentClickHandler = (e) => {
if (e.target.closest('#upload-dropdown')) return; if (e.target.closest('#upload-dropdown')) return;
document.querySelectorAll('.upload-dropdown-menu.show').forEach((m) => { document.querySelectorAll('.upload-dropdown-menu').forEach((m) => {
m.classList.remove('show'); m.classList.add('hidden');
}); });
}; };
document.addEventListener('click', uploadDropdownDocumentClickHandler); document.addEventListener('click', uploadDropdownDocumentClickHandler);
static/js/app/uiNotifications.js
+3 -3
View File
@@ -41,7 +41,7 @@ const uiNotifications = {
let notification = document.querySelector('.notification'); let notification = document.querySelector('.notification');
if (!notification) { if (!notification) {
notification = document.createElement('div'); notification = document.createElement('div');
notification.className = 'notification'; notification.classList.add('notification', 'hidden');
notification.innerHTML = ` notification.innerHTML = `
<div class="notification-title">${title}</div> <div class="notification-title">${title}</div>
<div class="notification-message">${message}</div> <div class="notification-message">${message}</div>
@@ -52,10 +52,10 @@ const uiNotifications = {
notification.querySelector('.notification-message').textContent = message; notification.querySelector('.notification-message').textContent = message;
} }
notification.style.display = 'block'; notification.classList.remove('hidden');
setTimeout(() => { setTimeout(() => {
notification.style.display = 'none'; notification.classList.add('hidden');
}, 5000); }, 5000);
} }
}; };
static/js/features/files/fileOperations.js
+8 -8
View File
@@ -289,7 +289,7 @@ const fileOps = {
const progressBar = document.querySelector('.progress-fill'); const progressBar = document.querySelector('.progress-fill');
const uploadProgressDiv = document.querySelector('.upload-progress'); const uploadProgressDiv = document.querySelector('.upload-progress');
if (uploadProgressDiv) { if (uploadProgressDiv) {
uploadProgressDiv.style.display = 'block'; uploadProgressDiv.classList.remove('hidden');
} }
if (progressBar) { if (progressBar) {
progressBar.style.width = '0%'; progressBar.style.width = '0%';
@@ -322,7 +322,7 @@ const fileOps = {
} }
if (totalFiles === 0) { if (totalFiles === 0) {
if (uploadProgressDiv) uploadProgressDiv.style.display = 'none'; if (uploadProgressDiv) uploadProgressDiv.classList.add('hidden');
this._isUploading = false; this._isUploading = false;
return; return;
} }
@@ -412,8 +412,8 @@ const fileOps = {
} }
const dropzone = document.getElementById('dropzone'); const dropzone = document.getElementById('dropzone');
if (dropzone) dropzone.style.display = 'none'; if (dropzone) dropzone.classList.add('hidden');
if (uploadProgressDiv) uploadProgressDiv.style.display = 'none'; if (uploadProgressDiv) uploadProgressDiv.classList.add('hidden');
} finally { } finally {
this._isUploading = false; this._isUploading = false;
} }
@@ -450,7 +450,7 @@ const fileOps = {
const progressBar = document.querySelector('.progress-fill'); const progressBar = document.querySelector('.progress-fill');
const uploadProgressDiv = document.querySelector('.upload-progress'); const uploadProgressDiv = document.querySelector('.upload-progress');
if (uploadProgressDiv) { if (uploadProgressDiv) {
uploadProgressDiv.style.display = 'block'; uploadProgressDiv.classList.remove('hidden');
} }
if (progressBar) { if (progressBar) {
progressBar.style.width = '0%'; progressBar.style.width = '0%';
@@ -468,7 +468,7 @@ const fileOps = {
const totalFiles = validEntries.length; const totalFiles = validEntries.length;
if (totalFiles === 0) { if (totalFiles === 0) {
if (uploadProgressDiv) uploadProgressDiv.style.display = 'none'; if (uploadProgressDiv) uploadProgressDiv.classList.add('hidden');
return; return;
} }
@@ -678,8 +678,8 @@ const fileOps = {
} }
const dropzone = document.getElementById('dropzone'); const dropzone = document.getElementById('dropzone');
if (dropzone) dropzone.style.display = 'none'; if (dropzone) dropzone.classList.add('hidden');
if (uploadProgressDiv) uploadProgressDiv.style.display = 'none'; if (uploadProgressDiv) uploadProgressDiv.classList.add('hidden');
} finally { } finally {
this._isUploading = false; this._isUploading = false;
} }