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

refactor(ui): modal: use hidden class

Browse Source
This commit is contained in:
Edouard Vanbelle
2026-04-24 23:37:14 +02:00
parent a38bcc01de
commit fc8e529e7d
7 changed files with 32 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/css/components/contextMenu.css
+1 -1
View File
@@ -10,7 +10,7 @@
padding: 6px; padding: 6px;
min-width: 200px; min-width: 200px;
z-index: 2000; z-index: 2000;
display: none; display: block;
animation: contextMenuIn 0.15s ease-out; animation: contextMenuIn 0.15s ease-out;
} }
static/css/components/modals.css
+1 -1
View File
@@ -126,7 +126,7 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: var(--color-overlay); background-color: var(--color-overlay);
display: none; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
z-index: 3000; z-index: 3000;
static/css/components/spinner.css
+1 -1
View File
@@ -37,7 +37,7 @@
text-align: center; text-align: center;
margin: 20px 0; margin: 20px 0;
color: var(--color-text-medium); color: var(--color-text-medium);
display: none; display: block;
} }
.dropzone-icon { .dropzone-icon {
static/index.html
+1 -1
View File
@@ -216,7 +216,7 @@
<span class="breadcrumb-item" data-i18n="breadcrumb.home">Home</span> <span class="breadcrumb-item" data-i18n="breadcrumb.home">Home</span>
</div> </div>
<div class="dropzone" id="dropzone"> <div class="dropzone hidden" id="dropzone">
<i class="fas fa-cloud-upload-alt dropzone-icon"></i> <i class="fas fa-cloud-upload-alt dropzone-icon"></i>
<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>
static/js/app/main.js
+3 -4
View File
@@ -663,13 +663,12 @@ function setupEventListeners() {
// Global events to close context menus and deselect cards // Global events to close context menus and deselect cards
document.addEventListener('click', (e) => { document.addEventListener('click', (e) => {
const folderMenu = document.getElementById('folder-context-menu'); const folderMenu = document.getElementById('folder-context-menu');
const fileMenu = document.getElementById('file-context-menu'); if (folderMenu && !folderMenu.classList.contains('hidden') && !folderMenu.contains(e.target)) {
if (folderMenu && folderMenu.style.display === 'block' && !folderMenu.contains(e.target)) {
ui.closeContextMenu(); ui.closeContextMenu();
} }
if (fileMenu && fileMenu.style.display === 'block' && !fileMenu.contains(e.target)) { const fileMenu = document.getElementById('file-context-menu');
if (fileMenu && !fileMenu.classList.contains('hidden') && !fileMenu.contains(e.target)) {
ui.closeFileContextMenu(); ui.closeFileContextMenu();
} }
}); });
static/js/app/ui.js
+14 -14
View File
@@ -38,7 +38,7 @@ const ui = {
// Folder context menu // Folder context menu
if (!document.getElementById('folder-context-menu')) { if (!document.getElementById('folder-context-menu')) {
const folderMenu = document.createElement('div'); const folderMenu = document.createElement('div');
folderMenu.className = 'context-menu'; folderMenu.classList.add('context-menu', 'hidden');
folderMenu.id = 'folder-context-menu'; folderMenu.id = 'folder-context-menu';
folderMenu.innerHTML = ` folderMenu.innerHTML = `
<div class="context-menu-item" id="download-folder-option"> <div class="context-menu-item" id="download-folder-option">
@@ -68,7 +68,7 @@ const ui = {
// File context menu // File context menu
if (!document.getElementById('file-context-menu')) { if (!document.getElementById('file-context-menu')) {
const fileMenu = document.createElement('div'); const fileMenu = document.createElement('div');
fileMenu.className = 'context-menu'; fileMenu.classList.add('context-menu', 'hidden');
fileMenu.id = 'file-context-menu'; fileMenu.id = 'file-context-menu';
fileMenu.innerHTML = ` fileMenu.innerHTML = `
<div class="context-menu-item" id="view-file-option"> <div class="context-menu-item" id="view-file-option">
@@ -426,7 +426,7 @@ const ui = {
fileOps.uploadFiles(droppedEntries.map((x) => x.file)); fileOps.uploadFiles(droppedEntries.map((x) => x.file));
} }
setTimeout(() => { setTimeout(() => {
dropzone.style.display = 'none'; dropzone?.classList.add('hidden');
}, 500); }, 500);
return; return;
} }
@@ -440,7 +440,7 @@ const ui = {
} }
} }
setTimeout(() => { setTimeout(() => {
dropzone.style.display = 'none'; dropzone?.classList.add('hidden');
}, 500); }, 500);
}); });
@@ -448,8 +448,8 @@ const ui = {
document.addEventListener('dragover', (e) => { document.addEventListener('dragover', (e) => {
e.preventDefault(); e.preventDefault();
if (e.dataTransfer.types.includes('Files')) { if (e.dataTransfer.types.includes('Files')) {
dropzone.style.display = 'block'; dropzone?.classList.remove('hidden');
dropzone.classList.add('active'); dropzone?.classList.add('active');
} }
}); });
@@ -458,7 +458,7 @@ const ui = {
dropzone.classList.remove('active'); dropzone.classList.remove('active');
setTimeout(() => { setTimeout(() => {
if (!dropzone.classList.contains('active')) { if (!dropzone.classList.contains('active')) {
dropzone.style.display = 'none'; dropzone?.classList.add('hidden');
} }
}, 100); }, 100);
} }
@@ -482,7 +482,7 @@ const ui = {
fileOps.uploadFiles(droppedEntries.map((x) => x.file)); fileOps.uploadFiles(droppedEntries.map((x) => x.file));
} }
setTimeout(() => { setTimeout(() => {
dropzone.style.display = 'none'; dropzone?.classList.add('hidden');
}, 500); }, 500);
return; return;
} }
@@ -497,7 +497,7 @@ const ui = {
} }
setTimeout(() => { setTimeout(() => {
dropzone.style.display = 'none'; dropzone?.classList.add('hidden');
}, 500); }, 500);
}); });
}, },
@@ -676,7 +676,7 @@ const ui = {
closeContextMenu() { closeContextMenu() {
const menu = document.getElementById('folder-context-menu'); const menu = document.getElementById('folder-context-menu');
if (menu) { if (menu) {
menu.style.display = 'none'; menu.classList.add('hidden');
app.contextMenuTargetFolder = null; app.contextMenuTargetFolder = null;
} }
}, },
@@ -687,7 +687,7 @@ const ui = {
closeFileContextMenu() { closeFileContextMenu() {
const menu = document.getElementById('file-context-menu'); const menu = document.getElementById('file-context-menu');
if (menu) { if (menu) {
menu.style.display = 'none'; menu.classList.add('hidden');
app.contextMenuTargetFile = null; app.contextMenuTargetFile = null;
} }
}, },
@@ -1003,7 +1003,7 @@ const ui = {
} }
menu.style.left = `${e.pageX}px`; menu.style.left = `${e.pageX}px`;
menu.style.top = `${e.pageY}px`; menu.style.top = `${e.pageY}px`;
menu.style.display = 'block'; menu?.classList.remove('hidden');
}); });
// dragstart // dragstart
@@ -1469,7 +1469,7 @@ function toggleCardSelection(card, event) {
function showContextMenuAtElement(triggerElement, menuId) { function showContextMenuAtElement(triggerElement, menuId) {
// Hide any open menus first // Hide any open menus first
document.querySelectorAll('.context-menu').forEach((m) => { document.querySelectorAll('.context-menu').forEach((m) => {
m.style.display = 'none'; m.classList.add('hidden');
}); });
const menu = document.getElementById(menuId); const menu = document.getElementById(menuId);
@@ -1500,7 +1500,7 @@ function showContextMenuAtElement(triggerElement, menuId) {
menu.style.left = `${left}px`; menu.style.left = `${left}px`;
menu.style.top = `${top}px`; menu.style.top = `${top}px`;
menu.style.display = 'block'; menu.classList.remove('hidden');
} }
/** /**
static/js/core/modal.js
+11 -2
View File
@@ -8,14 +8,23 @@ import { replaceIconsInElement } from './icons.js';
const Modal = { const Modal = {
// Modal element references // Modal element references
/** @private @type {HTMLElement | null} */
overlay: null, overlay: null,
// FIXME: unused ?
container: null, container: null,
/** @private @type {HTMLElement | null} */
icon: null, icon: null,
/** @private @type {HTMLElement | null} */
title: null, title: null,
/** @private @type {HTMLElement | null} */
label: null, label: null,
/** @private @type {HTMLElement | null} */
input: null, input: null,
/** @private @type {HTMLElement | null} */
cancelBtn: null, cancelBtn: null,
/** @private @type {HTMLElement | null} */
confirmBtn: null, confirmBtn: null,
/** @private @type {HTMLElement | null} */
closeBtn: null, closeBtn: null,
// Current callback // Current callback
@@ -169,7 +178,7 @@ const Modal = {
if (!this.overlay) return; if (!this.overlay) return;
// Show overlay // Show overlay
this.overlay.style.display = 'flex'; this.overlay.classList.remove('hidden');
// Trigger animation // Trigger animation
requestAnimationFrame(() => { requestAnimationFrame(() => {
@@ -206,7 +215,7 @@ const Modal = {
this.overlay.classList.remove('active'); this.overlay.classList.remove('active');
setTimeout(() => { setTimeout(() => {
this.overlay.style.display = 'none'; this.overlay.classList.add('hidden');
if (!confirmed && this.onCancel) { if (!confirmed && this.onCancel) {
this.onCancel(); this.onCancel();