From 2590a2e5941c3bee8ead18b92ff8a4504a7b8b0a Mon Sep 17 00:00:00 2001 From: AdalbertoCV <34152734@uaz.edu.mx> Date: Fri, 18 Oct 2024 12:41:24 -0600 Subject: [PATCH] Estilos de componente reusableTable actualizados --- cosiap_frontend/src/App.css | 153 +++++++++++++----- .../src/components/admin/HistorialAdmin.jsx | 2 +- .../src/components/admin/TablaUsuarios.jsx | 49 ++++-- .../components/common/utility/SearchInput.jsx | 19 +++ .../components/common/utility/UserIcon.jsx | 29 ++++ 5 files changed, 196 insertions(+), 56 deletions(-) create mode 100644 cosiap_frontend/src/components/common/utility/SearchInput.jsx create mode 100644 cosiap_frontend/src/components/common/utility/UserIcon.jsx diff --git a/cosiap_frontend/src/App.css b/cosiap_frontend/src/App.css index 6551f0b..7daa584 100644 --- a/cosiap_frontend/src/App.css +++ b/cosiap_frontend/src/App.css @@ -663,14 +663,11 @@ font-size: 16px; background-color: #4CAF50; } - - - - .button:hover { +.button:hover { background-color: var(--secundario-f); - } +} - .alert { +.alert { position: fixed; top: 20px; /* Distancia desde la parte superior */ left: 50%; @@ -820,59 +817,66 @@ font-size: 16px; } .table-container { - border-radius: 15px; - overflow: hidden; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px; - background-color: #fff; + border-radius: 10px; + overflow: hidden; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } .table { + position: relative; width: 100%; border-collapse: collapse; + text-align: left; + font-family: 'Arial', sans-serif; } -.table th { - background-color: brown; - color: #fff; - padding: 12px; - text-align: left; - font-size: 16px; +thead tr { + background-color: #f28b8b; /* Rojo claro */ + color: white; + font-weight: bold; } -.table td { +thead th { padding: 12px; - text-align: left; - font-size: 14px; - border-bottom: 1px solid #ddd; + border-bottom: 2px solid #e0e0e0; +} + +tbody tr { + background-color: #e8e8e8; + border-bottom: 1px solid #d0d0d0; + transition: background-color 0.2s; +} + +tbody tr:nth-child(even) { + background-color: #d3d3d3; } -.table tr:nth-child(even) { - background-color: #f9f9f9; /* Color para filas pares */ +tbody tr:hover { + background-color: #cfcfcf; } -/* Contenedor de la barra de búsqueda */ +td { + padding: 10px; +} + +/* Contenedor del input de búsqueda */ .search-container { display: flex; - justify-content: center; - align-items: center; - width: 400px; - margin: 50px auto; - border: 2px solid #333; + width: 100%; + justify-content: flex-start; + max-width: 600px; + margin: 20px auto; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); border-radius: 25px; - background-color: #f0f0f0; - box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1); - transition: box-shadow 0.3s ease; -} - -.search-container:hover { - box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); + overflow: hidden; + background-color: #f2f2f2; } /* Estilo del input */ .search-input { flex: 1; - border:#938c8c; + border: none; background: none; padding: 15px; font-size: 16px; @@ -903,6 +907,8 @@ font-size: 16px; background-color: #555; } + + .table-container { overflow-x: auto; max-width: 100%; @@ -923,27 +929,48 @@ th, td { .context-menu { position: absolute; - background-color: rgb(232, 230, 230); - border: 1px solid #ccc; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); - padding: 8px; + background-color: #ffffff; + border: 1px solid #e0e0e0; + border-radius: 8px; /* Bordes redondeados */ + box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15); /* Sombra más suave */ + padding: 10px 0; /* Espacio vertical adicional */ z-index: 100; + min-width: 180px; /* Ancho mínimo para alineación adecuada */ + animation: fadeIn 0.2s ease-in-out; /* Animación de entrada */ } .context-menu button { display: block; width: 100%; - padding: 8px; + padding: 12px 16px; /* Espacio más generoso */ border: none; background: none; text-align: left; cursor: pointer; + font-family: 'Arial', sans-serif; + font-size: 16px; + color: #333; + transition: background-color 0.3s, color 0.3s; /* Efecto suave al pasar el ratón */ } .context-menu button:hover { - background-color: #f0f0f0; + background-color: #939aa1; + color: white; + border-radius: 4px; } +@keyframes fadeIn { + from { + opacity: 0; + transform: translateY(-10px); /* Aparece desde arriba */ + } + to { + opacity: 1; + transform: translateY(0); + } +} + + /* Agrega estos estilos a tu archivo CSS */ .confirm-delete-menu { position: fixed; /* Cambiado a fixed para centrar en la pantalla */ @@ -986,3 +1013,45 @@ th, td { opacity: 0.9; /* Efecto hover */ } +.user-icon-container { + position: relative; + display: inline-block; +} + +.user-card { + position: absolute; + top: 200px; + left: 300px; + background-color: white; + border: 1px solid #ddd; + border-radius: 8px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + padding: 20px; + width: 200px; + z-index: 9999; +} + +.user-card h3 { + margin-top: 0; + font-size: 18px; +} + +.user-card p { + margin: 5px 0; + font-size: 14px; +} + +.close-btn { + position: absolute; + top: 5px; + right: 5px; + background: none; + border: none; + font-size: 18px; + cursor: pointer; + color: #999; +} + +.close-btn:hover { + color: black; +} diff --git a/cosiap_frontend/src/components/admin/HistorialAdmin.jsx b/cosiap_frontend/src/components/admin/HistorialAdmin.jsx index aa9232c..a448551 100644 --- a/cosiap_frontend/src/components/admin/HistorialAdmin.jsx +++ b/cosiap_frontend/src/components/admin/HistorialAdmin.jsx @@ -109,7 +109,7 @@ const ListaSolicitudesSolicitante = () => { ]; return ( - +
diff --git a/cosiap_frontend/src/components/admin/TablaUsuarios.jsx b/cosiap_frontend/src/components/admin/TablaUsuarios.jsx index ebaeef7..6ed5335 100644 --- a/cosiap_frontend/src/components/admin/TablaUsuarios.jsx +++ b/cosiap_frontend/src/components/admin/TablaUsuarios.jsx @@ -4,6 +4,8 @@ import Tabla from "../common/utility/ReusableTable"; import MainContainer from "../common/utility/MainContainer"; import '@/App.css'; import { useNavigate } from "react-router-dom"; +import SearchInput from '@/components/common/utility/SearchInput' +import UserIcon from "@/components/common/utility/UserIcon"; const ListaUsuarios = () => { const [usuarios, setUsuarios] = useState([]); @@ -16,6 +18,10 @@ const ListaUsuarios = () => { const [isSuccess, setIsSuccess] = useState(false); const [selectedRow, setSelectedRow] = useState(null); // Para abrir el menú contextual const [isConfirmingDelete, setIsConfirmingDelete] = useState(false); // Estado para controlar la confirmación de eliminación + const [showCard, setShowCard] = useState(false); + const [curpActual, setCurpActual] = useState(''); + const [nombreActual, setNombreActual] = useState(''); + const [emailActual, setEmailActual] = useState(''); const navigate = useNavigate(); useEffect(() => { @@ -67,6 +73,20 @@ const ListaUsuarios = () => { handleCloseMenu(); // Cierra el menú después de eliminar }; + const handleCloseInfo = () => { + setShowCard(false) + setCurpActual(null) + setNombreActual(null) + setEmailActual(null) + }; + + const handleClickIcon = (curp, nombre, email) => { + setShowCard(true) + setCurpActual(curp) + setNombreActual(nombre) + setEmailActual(email) + } + useEffect(() => { const handleClickOutside = (event) => { if (tableContainerRef.current?.contains(event.target)) { @@ -102,6 +122,10 @@ const ListaUsuarios = () => { }; const columnas = [ + { + label: "", + render: (fila) => , + }, { label: "CURP", render: (fila) => renderCell(fila, "curp") }, { label: "Nombre", render: (fila) => renderCell(fila, "nombre") }, { label: "Apellido Paterno", render: (fila) => renderCell(fila, "ap_paterno") }, @@ -181,24 +205,13 @@ const ListaUsuarios = () => { }; return ( - + {alertMessage && (
{alertMessage}
)} -
- - -
+
{selectedRow && !isConfirmingDelete && ( @@ -218,6 +231,16 @@ const ListaUsuarios = () => {
)} + {/* Tarjeta emergente */} + {showCard && ( +
+ +

Información del Usuario

+

Nombre: {nombreActual}

+

CURP: {curpActual}

+

Email: {emailActual}

+
+ )} ); diff --git a/cosiap_frontend/src/components/common/utility/SearchInput.jsx b/cosiap_frontend/src/components/common/utility/SearchInput.jsx new file mode 100644 index 0000000..6eb9ea3 --- /dev/null +++ b/cosiap_frontend/src/components/common/utility/SearchInput.jsx @@ -0,0 +1,19 @@ +import '@/App.css'; + +const SearchInput = ({ placeholder = "Buscar...", onSearch, onChange }) => { + return ( +
+ + +
+ ); +}; + +export default SearchInput; \ No newline at end of file diff --git a/cosiap_frontend/src/components/common/utility/UserIcon.jsx b/cosiap_frontend/src/components/common/utility/UserIcon.jsx new file mode 100644 index 0000000..5ec69f7 --- /dev/null +++ b/cosiap_frontend/src/components/common/utility/UserIcon.jsx @@ -0,0 +1,29 @@ + +import "@/App.css" + +const UserIcon = ({ nombre, curp, email, onClick}) => { + + return ( +
+ {/* Ícono SVG con evento onClick */} + onClick(curp, nombre, email)} + xmlns="http://www.w3.org/2000/svg" + enableBackground="new 0 0 24 24" + height="24px" + viewBox="0 0 24 24" + width="24px" + fill="black" + style={{ cursor: 'pointer' }} + > + + + + + + +
+ ); +}; + +export default UserIcon; \ No newline at end of file -- GitLab