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 {
margin-top: 15px;
width: 100%;
display: none;
display: block;
}
.progress-bar {
static/css/components/uploadDropdown.css
+1 -5
View File
@@ -11,7 +11,7 @@
}
.upload-dropdown-menu {
display: none;
display: block;
position: absolute;
top: calc(100% + 6px);
left: 0;
@@ -25,10 +25,6 @@
animation: dropdownFadeIn 0.15s ease-out;
}
.upload-dropdown-menu.show {
display: block;
}
@keyframes dropdownFadeIn {
from {
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>
<input type="file" id="file-input" class="hidden" 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-fill"></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>
<i class="fas fa-caret-down icon-ml"></i>
</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">
<i class="fas fa-file"></i>
<span data-i18n="actions.upload_files">Upload files</span>
@@ -187,14 +187,14 @@ function setupActionsBarDelegation() {
case 'upload-files-btn': {
e.stopPropagation();
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();
break;
}
case 'upload-folder-btn': {
e.stopPropagation();
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');
if (folderInput) folderInput.click();
break;
@@ -456,13 +456,13 @@ function setupUploadDropdown() {
'click',
(e) => {
e.stopPropagation();
const isOpen = menu.classList.contains('show');
const isOpen = !menu.classList.contains('hidden');
// Close any other open dropdowns
document.querySelectorAll('.upload-dropdown-menu.show').forEach((m) => {
m.classList.remove('show');
document.querySelectorAll('.upload-dropdown-menu').forEach((m) => {
m.classList.add('hidden');
});
if (!isOpen) {
menu.classList.add('show');
menu.classList.remove('hidden');
}
},
{ signal }
@@ -475,8 +475,8 @@ function setupUploadDropdown() {
}
uploadDropdownDocumentClickHandler = (e) => {
if (e.target.closest('#upload-dropdown')) return;
document.querySelectorAll('.upload-dropdown-menu.show').forEach((m) => {
m.classList.remove('show');
document.querySelectorAll('.upload-dropdown-menu').forEach((m) => {
m.classList.add('hidden');
});
};
document.addEventListener('click', uploadDropdownDocumentClickHandler);
static/js/app/uiNotifications.js
+3 -3
View File
@@ -41,7 +41,7 @@ const uiNotifications = {
let notification = document.querySelector('.notification');
if (!notification) {
notification = document.createElement('div');
notification.className = 'notification';
notification.classList.add('notification', 'hidden');
notification.innerHTML = `
<div class="notification-title">${title}</div>
<div class="notification-message">${message}</div>
@@ -52,10 +52,10 @@ const uiNotifications = {
notification.querySelector('.notification-message').textContent = message;
}
notification.style.display = 'block';
notification.classList.remove('hidden');
setTimeout(() => {
notification.style.display = 'none';
notification.classList.add('hidden');
}, 5000);
}
};
static/js/features/files/fileOperations.js
+8 -8
View File
@@ -289,7 +289,7 @@ const fileOps = {
const progressBar = document.querySelector('.progress-fill');
const uploadProgressDiv = document.querySelector('.upload-progress');
if (uploadProgressDiv) {
uploadProgressDiv.style.display = 'block';
uploadProgressDiv.classList.remove('hidden');
}
if (progressBar) {
progressBar.style.width = '0%';
@@ -322,7 +322,7 @@ const fileOps = {
}
if (totalFiles === 0) {
if (uploadProgressDiv) uploadProgressDiv.style.display = 'none';
if (uploadProgressDiv) uploadProgressDiv.classList.add('hidden');
this._isUploading = false;
return;
}
@@ -412,8 +412,8 @@ const fileOps = {
}
const dropzone = document.getElementById('dropzone');
if (dropzone) dropzone.style.display = 'none';
if (uploadProgressDiv) uploadProgressDiv.style.display = 'none';
if (dropzone) dropzone.classList.add('hidden');
if (uploadProgressDiv) uploadProgressDiv.classList.add('hidden');
} finally {
this._isUploading = false;
}
@@ -450,7 +450,7 @@ const fileOps = {
const progressBar = document.querySelector('.progress-fill');
const uploadProgressDiv = document.querySelector('.upload-progress');
if (uploadProgressDiv) {
uploadProgressDiv.style.display = 'block';
uploadProgressDiv.classList.remove('hidden');
}
if (progressBar) {
progressBar.style.width = '0%';
@@ -468,7 +468,7 @@ const fileOps = {
const totalFiles = validEntries.length;
if (totalFiles === 0) {
if (uploadProgressDiv) uploadProgressDiv.style.display = 'none';
if (uploadProgressDiv) uploadProgressDiv.classList.add('hidden');
return;
}
@@ -678,8 +678,8 @@ const fileOps = {
}
const dropzone = document.getElementById('dropzone');
if (dropzone) dropzone.style.display = 'none';
if (uploadProgressDiv) uploadProgressDiv.style.display = 'none';
if (dropzone) dropzone.classList.add('hidden');
if (uploadProgressDiv) uploadProgressDiv.classList.add('hidden');
} finally {
this._isUploading = false;
}