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

improve(ui): dialog: add escape key on shared dialog + perfer hidden class

Browse Source
This commit is contained in:
Edouard Vanbelle
2026-04-24 23:07:04 +02:00
parent 24967489e1
commit 832c9ab577
3 changed files with 31 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/css/components/dialogs.css
+5 -5
View File
@@ -27,7 +27,7 @@
width: 100%;
height: 100%;
background-color: var(--color-overlay-light);
display: none;
display: flex;
align-items: center;
justify-content: center;
z-index: 3000;
@@ -106,7 +106,7 @@
width: 100%;
height: 100%;
background-color: var(--color-overlay-light);
display: none;
display: flex;
justify-content: center;
align-items: center;
z-index: 3000;
@@ -205,7 +205,7 @@
width: 100%;
height: 100%;
background-color: var(--color-overlay-light);
display: none;
display: flex;
justify-content: center;
align-items: center;
z-index: 3000;
@@ -512,7 +512,7 @@
width: 100%;
height: 100%;
background-color: var(--color-overlay-light);
display: none;
display: flex;
align-items: center;
justify-content: center;
z-index: 4000;
@@ -593,7 +593,7 @@
width: 100%;
height: 100%;
background-color: var(--color-overlay);
display: none;
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
static/js/app/ui.js
+13 -5
View File
@@ -111,7 +111,7 @@ const ui = {
// Rename dialog — modern
if (!document.getElementById('rename-dialog')) {
const renameDialog = document.createElement('div');
renameDialog.className = 'rename-dialog';
renameDialog.classList.add('rename-dialog', 'hidden');
renameDialog.id = 'rename-dialog';
renameDialog.innerHTML = `
<div class="rename-dialog-content">
@@ -134,7 +134,7 @@ const ui = {
// Move dialog — modern with navigation
if (!document.getElementById('move-file-dialog')) {
const moveDialog = document.createElement('div');
moveDialog.className = 'rename-dialog';
moveDialog.classList.add('rename-dialog', 'hidden');
moveDialog.id = 'move-file-dialog';
moveDialog.innerHTML = `
<div class="rename-dialog-content">
@@ -161,7 +161,7 @@ const ui = {
// Share dialog
if (!document.getElementById('share-dialog')) {
const shareDialog = document.createElement('div');
shareDialog.className = 'share-dialog';
shareDialog.classList.add('share-dialog', 'hidden');
shareDialog.id = 'share-dialog';
shareDialog.innerHTML = `
<div class="share-dialog-content">
@@ -252,12 +252,20 @@ const ui = {
const shareUrl = document.getElementById('generated-share-url').value;
contextMenus.showEmailNotificationDialog(shareUrl);
});
// FIXME make generic function (close all dialog / etc)
document.addEventListener('keydown', (e) => {
const dialog = document.getElementById('share-dialog');
if (e.key === 'Escape' && !dialog?.classList.contains('hidden')) {
contextMenus.closeShareDialog();
}
});
}
// Notification dialog
if (!document.getElementById('notification-dialog')) {
const notificationDialog = document.createElement('div');
notificationDialog.className = 'share-dialog';
notificationDialog.classList.add('share-dialog', 'hidden');
notificationDialog.id = 'notification-dialog';
notificationDialog.innerHTML = `
<div class="share-dialog-content">
@@ -299,7 +307,7 @@ const ui = {
// Playlist selection dialog
if (!document.getElementById('playlist-dialog')) {
const playlistDialog = document.createElement('div');
playlistDialog.className = 'share-dialog';
playlistDialog.classList.add('share-dialog', 'hidden');
playlistDialog.id = 'playlist-dialog';
playlistDialog.innerHTML = `
<div class="share-dialog-content">
static/js/features/files/contextMenus.js
+13 -13
View File
@@ -294,7 +294,7 @@ const contextMenus = {
// Each handler checks its own state, so multiple dialogs can be closed with multiple Escape presses
if (!_moveDialogEscapeHandler) {
_moveDialogEscapeHandler = (e) => {
if (e.key === 'Escape' && moveFileDialog.style.display === 'flex') {
if (e.key === 'Escape' && !moveFileDialog?.classList.contains('hidden')) {
this.closeMoveDialog();
}
};
@@ -383,7 +383,7 @@ const contextMenus = {
// Update header text
const headerSpan = renameDialog.querySelector('.rename-dialog-header span');
if (headerSpan) headerSpan.textContent = i18n ? i18n.t('dialogs.rename_folder') : 'Rename folder';
renameDialog.style.display = 'flex';
renameDialog?.classList.remove('hidden');
renameInput.focus();
renameInput.select();
},
@@ -403,7 +403,7 @@ const contextMenus = {
// Update header text
const headerSpan = renameDialog.querySelector('.rename-dialog-header span');
if (headerSpan) headerSpan.textContent = i18n ? i18n.t('dialogs.rename_file') : 'Rename file';
renameDialog.style.display = 'flex';
renameDialog?.classList.remove('hidden');
renameInput.focus();
renameInput.select();
},
@@ -412,7 +412,7 @@ const contextMenus = {
* Close rename dialog
*/
closeRenameDialog() {
document.getElementById('rename-dialog').style.display = 'none';
document.getElementById('rename-dialog')?.classList.add('hidden');
app.contextMenuTargetFolder = null;
app.renameTarget = null;
},
@@ -478,14 +478,14 @@ const contextMenus = {
await this.loadMoveDialogFolders(startFolderId);
// Show dialog
document.getElementById('move-file-dialog').style.display = 'flex';
document.getElementById('move-file-dialog')?.classList.remove('hidden');
},
/**
* Close move dialog
*/
closeMoveDialog() {
document.getElementById('move-file-dialog').style.display = 'none';
document.getElementById('move-file-dialog')?.classList.add('hidden');
app.contextMenuTargetFile = null;
app.contextMenuTargetFolder = null;
},
@@ -924,7 +924,7 @@ const contextMenus = {
if (newShareSection) newShareSection.classList.add('hidden');
// Show dialog
shareDialog.style.display = 'flex';
shareDialog.classList.remove('hidden');
console.log('Share dialog opened for', itemType, item.name);
} catch (error) {
console.error('Error opening share dialog:', error);
@@ -1021,7 +1021,7 @@ const contextMenus = {
app.notificationShareUrl = shareUrl;
// Show dialog
document.getElementById('notification-dialog').style.display = 'flex';
document.getElementById('notification-dialog')?.classList.remove('hidden');
},
/**
@@ -1046,7 +1046,7 @@ const contextMenus = {
try {
fileSharing.sendShareNotification(shareUrl, email, message);
document.getElementById('notification-dialog').style.display = 'none';
document.getElementById('notification-dialog')?.classList.add('hidden');
} catch (error) {
console.error('Error sending notification:', error);
ui.showNotification('Error', 'Could not send notification');
@@ -1058,7 +1058,7 @@ const contextMenus = {
*/
closeShareDialog() {
const dialog = document.getElementById('share-dialog');
if (dialog) dialog.style.display = 'none';
if (dialog) dialog.classList.add('hidden');
app.shareDialogItem = null;
app.shareDialogItemType = null;
},
@@ -1067,7 +1067,7 @@ const contextMenus = {
* Close notification dialog
*/
closeNotificationDialog() {
document.getElementById('notification-dialog').style.display = 'none';
document.getElementById('notification-dialog')?.classList.add('hidden');
app.notificationShareUrl = null;
},
@@ -1100,7 +1100,7 @@ const contextMenus = {
if (addBtn) addBtn.disabled = true;
// Show dialog
dialog.style.display = 'flex';
dialog.classList.remove('hidden');
requestAnimationFrame(() => dialog.classList.add('active'));
// Load playlists
@@ -1199,7 +1199,7 @@ const contextMenus = {
if (dialog) {
dialog.classList.remove('active');
setTimeout(() => {
dialog.style.display = 'none';
dialog.classList.add('hidden');
}, 200);
}
app.playlistDialogFiles = null;