From 206bb7f2d6338340e69541dd6d6ac651b3d00b94 Mon Sep 17 00:00:00 2001 From: root Date: Mon, 17 Mar 2025 21:33:16 +0100 Subject: [PATCH] adding features --- static/index.html | 274 ++++++++++++++++++++++++++++++++++++---------- 1 file changed, 217 insertions(+), 57 deletions(-) diff --git a/static/index.html b/static/index.html index 974b0135..54356e8d 100644 --- a/static/index.html +++ b/static/index.html @@ -35,7 +35,6 @@ padding: 20px; display: flex; align-items: center; - justify-content: flex-start; margin-bottom: 20px; } @@ -143,7 +142,7 @@ border-bottom: 1px solid #e6e6e6; display: flex; align-items: center; - padding: 0 20px; + padding: 0 30px; justify-content: space-between; } @@ -151,6 +150,7 @@ flex-grow: 1; max-width: 500px; position: relative; + margin-right: 20px; } .search-container input { @@ -160,6 +160,7 @@ border: none; background-color: #f0f3f7; font-size: 14px; + height: 40px; } .search-icon { @@ -168,6 +169,7 @@ top: 50%; transform: translateY(-50%); color: #8895a7; + font-size: 16px; } .user-controls { @@ -177,7 +179,7 @@ .language-selector { margin-right: 15px; - padding: 8px 12px; + padding: 5px 12px; background-color: #f0f3f7; border-radius: 6px; cursor: pointer; @@ -188,8 +190,9 @@ .language-selector::after { content: "▼"; - font-size: 10px; + font-size: 8px; margin-left: 5px; + color: #718096; } .user-avatar { @@ -301,18 +304,108 @@ border: 2px dashed #ffc107; } - .file-icon { + /* Estilos para las carpetas como en el mockup */ + .file-icon.folder-icon { width: 100px; height: 70px; - margin-bottom: 15px; + background-color: #ffeaa7; /* Color amarillo claro */ + border-radius: 8px; + position: relative; + margin-bottom: 10px; display: flex; align-items: center; justify-content: center; - font-size: 32px; } - .folder-icon { - color: #ffc107; + .file-icon.folder-icon::before { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 20px; + background-color: #fdcb6e; /* Color amarillo más oscuro para la pestaña */ + border-radius: 8px 8px 0 0; + } + + .file-icon.folder-icon i { + display: none; /* Ocultar el icono Font Awesome */ + } + + /* Estilo para documentos */ + .file-icon.doc-icon { + width: 100px; + height: 70px; + background-color: #e2e8f0; /* Fondo gris claro */ + border-radius: 4px; + position: relative; + margin-bottom: 10px; + } + + .file-icon.doc-icon::before { + content: ""; + position: absolute; + top: 15px; + left: 20px; + right: 20px; + height: 4px; + background-color: #a0aec0; + border-radius: 2px; + } + + .file-icon.doc-icon::after { + content: ""; + position: absolute; + top: 25px; + left: 20px; + right: 30px; + height: 4px; + background-color: #a0aec0; + border-radius: 2px; + } + + /* Estilo para imágenes */ + .file-icon.image-icon { + width: 100px; + height: 70px; + background-color: #74b9ff; /* Fondo azul claro */ + border-radius: 4px; + position: relative; + margin-bottom: 10px; + overflow: hidden; + } + + .file-icon.image-icon::before { + content: ""; + position: absolute; + top: 10px; + left: 15px; + width: 20px; + height: 20px; + background-color: #ffda79; /* Círculo amarillo como un sol */ + border-radius: 50%; + } + + /* Estilo para videos */ + .file-icon.video-icon { + width: 100px; + height: 70px; + background-color: #111; /* Fondo negro */ + border-radius: 4px; + position: relative; + margin-bottom: 10px; + display: flex; + align-items: center; + justify-content: center; + } + + .file-icon.video-icon::before { + content: ""; + width: 0; + height: 0; + border-top: 15px solid transparent; + border-bottom: 15px solid transparent; + border-left: 20px solid white; /* Triángulo de reproducción */ } .file-name { @@ -532,6 +625,63 @@ color: #718096; } + /* Compartir diálogo */ + .share-dialog { + position: absolute; + top: 50%; + right: 50px; + width: 250px; + background-color: white; + border-radius: 8px; + box-shadow: 0 5px 20px rgba(0,0,0,0.15); + z-index: 1000; + padding: 15px; + } + + .share-title { + font-weight: bold; + margin-bottom: 15px; + color: #2d3748; + padding-bottom: 10px; + border-bottom: 1px solid #e0e6ed; + } + + .share-user { + display: flex; + align-items: center; + margin-bottom: 10px; + } + + .user-avatar-small { + width: 24px; + height: 24px; + border-radius: 50%; + background-color: #dfe4ea; + display: flex; + align-items: center; + justify-content: center; + font-size: 12px; + margin-right: 10px; + } + + .user-name { + font-size: 13px; + color: #2d3748; + } + + .add-user { + display: flex; + align-items: center; + justify-content: center; + padding: 8px; + margin-top: 10px; + background-color: #f0f3f7; + border-radius: 50px; + cursor: pointer; + font-size: 13px; + color: #718096; + } + /* Responsive */ @media (max-width: 768px) { .sidebar { @@ -559,6 +709,7 @@ + @@ -630,7 +781,7 @@
-
+
ES
MR
@@ -702,54 +853,22 @@ // Wait for i18n to initialize setTimeout(function() { if (window.i18n) { - // English - if (!window.i18n.t('files.view_grid')) { - // Add view_grid and view_list translations to existing English translations - const enTranslations = { - 'files.view_grid': 'Grid view', - 'files.view_list': 'List view' - }; - - // Add them to the i18n system (if possible) - for (const key in enTranslations) { - // We're simulating adding translations to the cache - // This is a workaround and might need adaptation for your actual i18n system - const baseObj = window.i18n._getBaseObjectForKey ? - window.i18n._getBaseObjectForKey('en', key) : null; - - if (baseObj) { - const lastKey = key.split('.').pop(); - baseObj[lastKey] = enTranslations[key]; - } - } - } + // Add translations for view_grid and view_list if they're missing + window.i18n.viewGridTranslation = { + 'en': 'Grid view', + 'es': 'Vista de cuadrícula' + }; + window.i18n.viewListTranslation = { + 'en': 'List view', + 'es': 'Vista de lista' + }; - // Spanish - if (!window.i18n.t('files.view_grid')) { - // Add view_grid and view_list translations to existing Spanish translations - const esTranslations = { - 'files.view_grid': 'Vista de cuadrícula', - 'files.view_list': 'Vista de lista' - }; - - // Add them to the i18n system (if possible) - for (const key in esTranslations) { - // We're simulating adding translations to the cache - // This is a workaround and might need adaptation for your actual i18n system - const baseObj = window.i18n._getBaseObjectForKey ? - window.i18n._getBaseObjectForKey('es', key) : null; - - if (baseObj) { - const lastKey = key.split('.').pop(); - baseObj[lastKey] = esTranslations[key]; - } - } - } + // Apply titles to buttons + document.getElementById('grid-view-btn').title = + window.i18n.viewGridTranslation[window.i18n.getCurrentLocale()] || 'Grid view'; - // Re-translate the page - if (window.i18n.translatePage) { - window.i18n.translatePage(); - } + document.getElementById('list-view-btn').title = + window.i18n.viewListTranslation[window.i18n.getCurrentLocale()] || 'List view'; } }, 500); }); @@ -1535,11 +1654,52 @@ console.error('Error loading files:', error); // File API may not be implemented yet, so we silently ignore this error } + + // Actualizar los iconos de los archivos + updateFileIcons(); } catch (error) { console.error('Error loading files:', error); } } + /** + * Actualiza los iconos de archivos según su tipo + */ + function updateFileIcons() { + // Buscar todos los elementos de archivo + const fileCards = document.querySelectorAll('.file-card'); + + fileCards.forEach(card => { + // Obtener el nombre del archivo si existe + const fileName = card.querySelector('.file-name')?.textContent || ''; + + // Obtener el icono existente + const iconElement = card.querySelector('.file-icon'); + if (!iconElement) return; + + // Si ya tiene una clase específica, no hacer nada + if (iconElement.classList.contains('folder-icon')) { + // Es una carpeta, eliminar el icono de font-awesome + iconElement.innerHTML = ''; + } + // Si es un documento + else if (fileName.endsWith('.docx') || fileName.endsWith('.pdf') || fileName.endsWith('.txt') || fileName.endsWith('.xlsx')) { + iconElement.classList.add('doc-icon'); + iconElement.innerHTML = ''; // Eliminar el icono de font-awesome + } + // Si es una imagen + else if (fileName.endsWith('.jpg') || fileName.endsWith('.png') || fileName.endsWith('.gif') || fileName.endsWith('.jpeg')) { + iconElement.classList.add('image-icon'); + iconElement.innerHTML = ''; // Eliminar el icono de font-awesome + } + // Si es un video + else if (fileName.endsWith('.mp4') || fileName.endsWith('.avi') || fileName.endsWith('.mov') || fileName.endsWith('.mkv')) { + iconElement.classList.add('video-icon'); + iconElement.innerHTML = ''; // Eliminar el icono de font-awesome + } + }); + } + /** * Añade una carpeta a las vistas */ @@ -1782,7 +1942,7 @@
${file.name}
-
Modificado ${formattedDate}
+
Modificado ${formattedDate.split(' ')[0]}
`; // Atributos de datos para el archivo