mgonzalez/project.linkedcorp.net
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): reemplaza panel-debajo-del-listado por DetailPopup de tamaño fijo

Browse Source 
El detalle de un item de listado (actividad, departamento, usuario, proyecto nuevo,
catalogo) ya no se apila debajo ni al costado del listado: ahora abre en un popup que
cubre la ventana, deja el listado inactivo detras, nunca se cierra con clic afuera (solo
con el boton Cerrar o una accion explicita del formulario) y mantiene un alto FIJO por
instancia para que cambiar de pestaña interna (Info/Subtareas/Dependencias/Comentarios/
Documentos) no reajuste su tamaño.

De paso corrige un bug real de stacking: ContentDialog no usaba portal a document.body,
así que un dialogo de confirmacion abierto desde dentro de un DetailPopup quedaba oculto
detras de este. Ahora ambos son portales con una jerarquia de z-index explicita
(Flyout 100 < DetailPopup 200 < ContentDialog 250 < Toast 300).

En el detalle de actividad, Subtareas y Dependencias pasan de estar apiladas dentro de la
pestaña Info a ser cada una su propia pestaña.

Regla documentada en project-md-templates/UI-UX-WINDOWS.md (componente DetailPopup) para
que aplique a futuros proyectos de escritorio Windows del grupo.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Milton Gonzalez
2026-09-03 11:21:07 -05:00
parent 1d22adc42e
commit 1e6e7fecdd
10 changed files with 224 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/styles/app.css
+23 -2
View File
@@ -130,7 +130,8 @@ button { font-family: inherit; }
table.list-table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.list-table th {
text-align: left; padding: 10px 12px; font-size: .7rem; text-transform: uppercase; letter-spacing: .03em;
color: rgb(var(--muted)); border-bottom: 1px solid rgb(var(--line)); cursor: pointer; user-select: none;
color: rgb(var(--muted)); border-bottom: 1px solid rgb(var(--line)); cursor: pointer;
-webkit-user-select: none; user-select: none;
white-space: nowrap;
}
.list-table th:hover { color: rgb(var(--body)); }
@@ -174,7 +175,7 @@ table.list-table { width: 100%; border-collapse: collapse; font-size: .8rem; }
/* --- ContentDialog --- */
.dialog-overlay {
position: fixed; inset: 0; background: rgb(0 0 0 / .5);
display: flex; align-items: center; justify-content: center; z-index: 200; padding: 16px;
display: flex; align-items: center; justify-content: center; z-index: 250; padding: 16px;
}
.dialog-surface {
width: 420px; max-width: 100%; background: rgb(var(--surface)); border-radius: var(--r-lg);
@@ -258,6 +259,26 @@ table.list-table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.login-title { font-size: 1.1rem; font-weight: 700; }
.login-error { color: rgb(var(--danger)); font-size: .78rem; margin-bottom: 10px; }
/* --- DetailPopup (ver DetailPopup.jsx) ---
Al elegir un item de un listado, la lista queda inactiva detras del overlay y el popup
presenta la pantalla de info/edicion completa. Regla dura: NUNCA se cierra con clic afuera
(a diferencia de Flyout); solo con el boton "Cerrar" o una accion explicita del formulario. */
.detail-popup-overlay {
position: fixed; inset: 0; background: rgb(0 0 0 / .55);
display: flex; align-items: center; justify-content: center; z-index: 200; padding: 24px;
}
.detail-popup {
width: 100%; background: rgb(var(--surface)); border-radius: var(--r-lg);
box-shadow: 0 24px 64px rgb(0 0 0 / .45);
max-height: 90vh; display: flex; flex-direction: column; overflow: hidden;
}
.detail-popup-header {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 16px 20px; border-bottom: 1px solid rgb(var(--line)); flex: none;
}
.detail-popup-title { font-weight: 700; font-size: 1rem; }
.detail-popup-body { padding: 20px; overflow-y: auto; flex: 1; }
/* --- Expander (Configuracion) --- */
.expander { border: 1px solid rgb(var(--line)); border-radius: var(--r-lg); margin-bottom: 10px; overflow: hidden; }
.expander-header { display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; background: rgb(var(--surface)); }