|
|
# Plan de Diseño Web: Claridad de interacción, “tareas mías”, deadlines e identidad visual por grupo
|
|
|
|
|
|
Objetivos
|
|
|
- Distinguir de un vistazo qué elementos son clicables (box-shadow y estados).
|
|
|
- Señalar cuando “tú” estás entre los responsables (acento visual claro).
|
|
|
- Sustituir el emoji de calendario por un icono más entendible de “fecha límite” (SVG consistente).
|
|
|
- Dar color estable y reconocible a las pills de grupo con una paleta accesible y determinista.
|
|
|
|
|
|
Fases
|
|
|
|
|
|
Fase B1 — Paleta determinista de grupos (COMPLETADA)
|
|
|
- Idea: asignar una de 12–15 combinaciones (border, fondo tenue, texto) por group_id usando un hash determinista (mod N). Si hay más grupos que colores, se repiten.
|
|
|
- Paleta sugerida (AA sobre fondo claro):
|
|
|
1) Blue: border #2563EB, fondo #DBEAFE, texto #1E3A8A
|
|
|
2) Indigo: border #4F46E5, fondo #E0E7FF, texto #312E81
|
|
|
3) Violet: border #7C3AED, fondo #EDE9FE, texto #4C1D95
|
|
|
4) Purple: border #9333EA, fondo #F3E8FF, texto #581C87
|
|
|
5) Fuchsia: border #C026D3, fondo #FAE8FF, texto #701A75
|
|
|
6) Pink: border #DB2777, fondo #FCE7F3, texto #831843
|
|
|
7) Rose: border #E11D48, fondo #FFE4E6, texto #881337
|
|
|
8) Red: border #DC2626, fondo #FEE2E2, texto #7F1D1D
|
|
|
9) Orange: border #EA580C, fondo #FFE7D1 (aprox.), texto #7C2D12
|
|
|
10) Amber: border #D97706, fondo #FEF3C7, texto #78350F
|
|
|
11) Green: border #16A34A, fondo #DCFCE7, texto #14532D
|
|
|
12) Teal: border #0D9488, fondo #CCFBF1, texto #134E4A
|
|
|
- Implementación:
|
|
|
- Crear apps/web/src/lib/utils/groupColor.ts con una función colorForGroup(groupId) → { border, bg, text } usando hash ligero (p. ej., sumatoria de charCodes) y modulo N.
|
|
|
- Aplicar en la pill de grupo de TaskItem.svelte y donde aparezcan chips/etiquetas de grupo.
|
|
|
|
|
|
Fase B2 — Icono de “fecha límite” en SVG (COMPLETADA)
|
|
|
- Sustituir emoji de calendario por un icono más semántico:
|
|
|
- Recomendación: “clock” (reloj) o “hourglass” (arena).
|
|
|
- Implementación:
|
|
|
- Crear apps/web/src/lib/ui/icons/Clock.svelte (y/o Hourglass.svelte) como SVG inline con fill="currentColor", tamaño 16–18px.
|
|
|
- Reemplazar en TaskItem.svelte donde se muestra due_date. Mantener aria-label/tooltip pertinentes.
|
|
|
|
|
|
Fase B3 — Indicador cuando “tú” estás asignado
|
|
|
- Mantener icono/contador de responsables y añadir acento visual si el usuario actual está entre los assignees:
|
|
|
- Anillo/borde con el color primario alrededor del icono/badge o un pequeño dot superpuesto.
|
|
|
- aria-label dinámico: “n responsables; tú incluido” | “n responsables; tú excluido”.
|
|
|
- Tooltip opcional en desktop.
|
|
|
- Implementación:
|
|
|
- En TaskItem.svelte, derivar isMine comprobando si App.locals.userId (o prop userId) ∈ assignees[] y aplicar clase/modificador que active el acento.
|
|
|
|
|
|
Fase B4 — Box-shadow solo en elementos interactivos
|
|
|
- Principio: toda superficie clicable debe tener pistas visuales coherentes (cursor, sombra/hover, focus visible). Superficies no interactivas no deben tener sombra.
|
|
|
- Implementación:
|
|
|
- apps/web/src/lib/styles/tokens.css: definir variables de sombras (--shadow-sm, --shadow-md, --shadow-focus).
|
|
|
- apps/web/src/lib/styles/base.css: patrones de hover/focus/active para botones, links con rol=button y chips clicables (sombra sutil en reposo, incremento ligero en hover/focus-visible, compresión en active).
|
|
|
- Mantener focus-visible claro (ring) y contraste AA.
|
|
|
- QA: verificar en móvil ≤480px que no haya desbordes; mantener targets ~44px sin inflar paddings.
|
|
|
|
|
|
Accesibilidad
|
|
|
- Contraste AA para texto sobre fondo en las pills de grupo.
|
|
|
- Focus visible en todos los elementos interactivos.
|
|
|
- aria-label correcto en iconos y tooltips; roles adecuados si se usan popovers/modales.
|
|
|
|
|
|
Archivos a editar/crear
|
|
|
|
|
|
Crear
|
|
|
- apps/web/src/lib/utils/groupColor.ts (hash + paleta).
|
|
|
- apps/web/src/lib/ui/icons/Clock.svelte (y/u Hourglass.svelte) (SVG).
|
|
|
|
|
|
Editar
|
|
|
- apps/web/src/lib/ui/data/TaskItem.svelte
|
|
|
- Aplicar paleta determinista en pill de grupo.
|
|
|
- Sustituir emoji de fecha por SVG “deadline”.
|
|
|
- Añadir acento visual “isMine” en el indicador de responsables con aria/tooltip.
|
|
|
- apps/web/src/lib/styles/tokens.css
|
|
|
- Añadir variables de sombras y, si procede, refinar escala de colores.
|
|
|
- apps/web/src/lib/styles/base.css
|
|
|
- Estados interactivos con sombras coherentes y cursor correcto.
|
|
|
- apps/web/src/lib/ui/layout/Card.svelte (opcional)
|
|
|
- Ajustar padding vertical si hiciese falta para mantener densidad.
|
|
|
|
|
|
Criterios de aceptación
|
|
|
- Elementos interactivos distinguibles de un vistazo (sombra + cursor + focus).
|
|
|
- El indicador de responsables comunica “es mía” sin leer texto.
|
|
|
- El icono de due se interpreta como “fecha límite”.
|
|
|
- Las pills de grupo mantienen color estable sesión tras sesión.
|
|
|
|
|
|
Caveats
|
|
|
- Evitar sombras en contenedores no interactivos para no elevar ruido visual.
|
|
|
- Mantener densidad: no incrementar la altura de filas.
|
|
|
- Si hay dark-mode en el futuro, revisar la paleta para asegurar contraste.
|
|
|
|
|
|
Orden de entrega sugerido
|
|
|
- B1 + B2 primero (impacto alto, bajo riesgo).
|
|
|
- B3 después (requiere condicionar por userId).
|
|
|
- B4 al final (pulido transversal + QA de accesibilidad).
|
|
|
|
|
|
Notas operativas
|
|
|
- Para aplicar estos cambios, comparte en este chat los archivos UI relevantes (TaskItem.svelte, tokens.css, base.css y/o componentes de iconos) y propondré los parches en bloques SEARCH/REPLACE.
|