From 4c2aa11c03642968dbdd99dfe83e09759408485e Mon Sep 17 00:00:00 2001 From: David Date: Fri, 9 Oct 2026 21:32:41 +0200 Subject: [PATCH] =?UTF-8?q?A=C3=B1adir=20estilos=20de=20enlace=20comunes?= =?UTF-8?q?=20y=20mejorar=20la=20navegaci=C3=B3n=20en=20componentes=20de?= =?UTF-8?q?=20la=20aplicaci=C3=B3n?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/web/src/global.css | 25 +++++++++++++++++++ docs/componentes-de-interfaz.md | 6 +++++ .../list/ui/asset-relationships.tsx | 2 +- .../src/web/assets/list/ui/inventory-page.tsx | 2 +- .../web/catalog/shared/ui/catalog-name.tsx | 2 +- .../list/ui/workstations-page.tsx | 2 +- .../ui/application-configurations-page.tsx | 2 +- .../ui/certificate-configurations-page.tsx | 2 +- .../companies/detail/ui/company-detail.tsx | 4 +-- .../web/companies/list/ui/companies-page.tsx | 2 +- .../shared/ui/dashboard-navigation-button.tsx | 2 +- .../dashboard/shared/ui/dashboard-panel.tsx | 7 +++++- .../list/ui/folder-mappings-page.tsx | 2 +- .../list/ui/interventions-page.tsx | 4 +-- .../list/ui/mail-configurations-page.tsx | 2 +- .../src/web/people/list/ui/people-section.tsx | 2 +- .../list/ui/printer-configurations-page.tsx | 2 +- .../web/processes/list/ui/processes-page.tsx | 2 +- .../list/ui/remote-connections-page.tsx | 2 +- .../list/ui/telework-authorizations-page.tsx | 2 +- .../src/web/tickets/list/ui/tickets-page.tsx | 4 +-- .../list/ui/work-profiles-page.tsx | 2 +- .../workspace/shared/ui/route-feedback.tsx | 4 +-- .../web/navigation/shared/ui/browser-link.tsx | 8 +++++- .../workspace/view/ui/custom-workspace.tsx | 4 +-- .../web/catalog/shared/ui/catalog-name.tsx | 2 +- .../web/resources/list/ui/resources-page.tsx | 2 +- 27 files changed, 70 insertions(+), 32 deletions(-) diff --git a/apps/web/src/global.css b/apps/web/src/global.css index 5411e88..bc98082 100644 --- a/apps/web/src/global.css +++ b/apps/web/src/global.css @@ -58,3 +58,28 @@ --spacing-shell-avatar: 35px; --shadow-shell-popover: 0 3px 12px rgb(12 40 80 / 8%); } + +/* Enlaces de contenido y controles que navegan: criterio común en toda la aplicación. */ +@layer components { + .app-link { + color: var(--primary); + cursor: pointer; + text-underline-offset: 4px; + } + + .app-link:hover { + text-decoration-line: underline; + } + + .app-link:focus-visible { + outline: 2px solid var(--ring); + outline-offset: 3px; + } + + .app-link:disabled, + .app-link[data-disabled], + .app-link[aria-disabled="true"] { + cursor: default; + text-decoration-line: none; + } +} diff --git a/docs/componentes-de-interfaz.md b/docs/componentes-de-interfaz.md index fefe15f..d5b454c 100644 --- a/docs/componentes-de-interfaz.md +++ b/docs/componentes-de-interfaz.md @@ -309,3 +309,9 @@ Las secciones de consulta evitan recuadros anidados y rellenos laterales: usan t `DetailSection` ofrece agrupación plegable nativa (`details/summary`), abierta inicialmente, accesible por teclado. `DetailField` devuelve una fila semántica `dt/dd` para incluir en un `dl`: etiqueta y valor se alinean horizontalmente cuando el contenedor dispone de al menos 240 px y se apilan en espacios menores. El consumidor aporta los enlaces; el componente común les aplica cursor de enlace, color semántico y subrayado al pasar el puntero. Los valores ausentes permanecen como texto. La ficha lateral de activos utiliza un ancho adaptable entre 320 y 400 px, acciones debajo del título y bloques de identificación, ubicación/asignación, características, observaciones, relaciones y asistencia. Conserva las secciones capturadas de la plantilla, incluyendo la compatibilidad con especificaciones antiguas sin agrupación; no modifica valores ni instantáneas. Las relaciones llevan a destinos existentes: persona y activo relacionado a su ficha; sede, puesto y plantilla a sus listados/catálogos actuales. La vista completa e historial mantienen sus funciones. Las fichas de recursos reutilizan las filas de características. No se crean nuevas fichas laterales ni nuevas rutas. + +## Enlaces y controles de navegación + +Los enlaces de contenido usan `app-link`: color semántico `primary`, cursor de mano, subrayado al pasar el puntero y foco visible por teclado. `BrowserLink` lo incorpora de forma predeterminada, conservando la navegación interna, los clics modificados, destinos externos y descargas. Los botones que presentan nombres navegables o «Ver todos» comparten este estilo sin alterar sus callbacks. Los controles deshabilitados no muestran cursor de enlace ni subrayado. La navegación lateral y los enlaces presentados como botones conservan los colores de su contexto para mantener contraste; las acciones de guardar, editar o cancelar mantienen su presentación de botón. + +En el menú de secciones de una compañía, los elementos utilizan el color normal de texto y solo destacan su texto al pasar el puntero. Se mantienen el cursor de mano, el foco por teclado y el indicador de la sección actual. Esta excepción no afecta a enlaces dentro de listados, fichas o bloques del dashboard. diff --git a/modules/assets/src/web/asset-relationships/list/ui/asset-relationships.tsx b/modules/assets/src/web/asset-relationships/list/ui/asset-relationships.tsx index 949bd72..392636d 100644 --- a/modules/assets/src/web/asset-relationships/list/ui/asset-relationships.tsx +++ b/modules/assets/src/web/asset-relationships/list/ui/asset-relationships.tsx @@ -22,7 +22,7 @@ export function AssetRelationships(props: AssetRelationshipsProps) {

{source ? link.values.name : link.values.inverseName} ·{" "} {nameOf(source ? link.values.targetId : link.values.sourceId)} diff --git a/modules/assets/src/web/assets/list/ui/inventory-page.tsx b/modules/assets/src/web/assets/list/ui/inventory-page.tsx index 3bf697d..f2e80ed 100644 --- a/modules/assets/src/web/assets/list/ui/inventory-page.tsx +++ b/modules/assets/src/web/assets/list/ui/inventory-page.tsx @@ -100,7 +100,7 @@ export function AssetInventoryPage(props: AssetInventoryPageProps) { render: (asset) => ( setDetailOpen(true)} > diff --git a/modules/assets/src/web/catalog/shared/ui/catalog-name.tsx b/modules/assets/src/web/catalog/shared/ui/catalog-name.tsx index fcac15d..07e0743 100644 --- a/modules/assets/src/web/catalog/shared/ui/catalog-name.tsx +++ b/modules/assets/src/web/catalog/shared/ui/catalog-name.tsx @@ -21,7 +21,7 @@ export function CatalogName({ return ( <> diff --git a/modules/companies/src/web/folder-mappings/list/ui/folder-mappings-page.tsx b/modules/companies/src/web/folder-mappings/list/ui/folder-mappings-page.tsx index 844bbc2..bca9d05 100644 --- a/modules/companies/src/web/folder-mappings/list/ui/folder-mappings-page.tsx +++ b/modules/companies/src/web/folder-mappings/list/ui/folder-mappings-page.tsx @@ -73,7 +73,7 @@ export function FolderMappingsPage(props: FolderMappingsPageProps) { hideable: false, render: (item) => (