Filas de categoría: un menú y capturando un Blink directamente en una categoría
Qué cambió
Cada fila de categoría — en Blinks, Goals, Projects y Businesses — solía llevar cinco controles: el nombre, una insignia de conteo y botones para Perfil, Editar y Eliminar, además de un “+” para añadir una subcategoría. En un teléfono, esos botones se enrollaban en una segunda línea y la fila se veía desordenada.
Ahora una fila muestra dosp cosas después del nombre y el conteo:
- un icono de capturar un Blink, que archiva un nuevo Blink directamente en esa categoría;
- un “…” menú que contiene Perfil, Editar, Añadir subcategoría y Eliminar.
Así que la fila ganó una característica y perdió tres controles al mismo tiempo. Eliminar se encuentra al final en el menú con un separador encima, porque una acción destructiva nunca debe ser la que tu pulgar encuentra por accidente.
| Ancho | Cómo se ve una fila |
|---|---|
| Escritorio | # Trabajo Todo para el trabajo diario 12 Blinks (↓) (…) |
| Teléfono | # Trabajo 12 (↓) (…) — el nombre se acorta y la insignia mantiene el número, dejando caer la palabra |
Capturando un Blink en una categoría
Haz clic en el icono de captura en cualquier fila y se abre el formulario normal de Blink con esa categoría ya elegida en la pestaña de Vinculación. Rellénalo como de costumbre. Cuando guardas, vuelves a la página de la categoría de la que partiste, para que puedas archivar otro de inmediato sin tener que navegar de vuelta.
No hay nada que cambie en el formulario — es la misma página, los mismos campos y la misma guardado. La única diferencia es dónde comenzaste y dónde aterrizas.
Qué aplicaciones tienen qué
La fila tranquila y el “…” menú están en todas las cuatro aplicaciones, porque comparten un componente de fila. Dos elementos del menú aparecen solo donde realmente pueden funcionar:
- Añadir subcategoría — Blinks solo por ahora. Las páginas de creación de las otras tres aplicaciones no pueden aún aceptar una categoría principal, y ofrecer un control que silenciosamente no hace nada es peor que no ofrecerlo.
- El icono de captura — Blinks solo por ahora, por la misma razón: solo el formulario de Blink puede actualmente abrirse con una categoría preseleccionada. Cada una de las otras aplicaciones puede activarlo más tarde pasando un valor extra a la fila; no se necesita ningún código nuevo para el comportamiento en sí.
Teclado y lectores de pantalla
Ambos iconos llevan el nombre de la categoría en su etiqueta — “Capturar un Blink en Trabajo”, “Más acciones para Trabajo” — porque alguien que escucha la página una fila a la vez necesita saber qué fila está hablando. El menú se abre con el teclado, se cierra con Escape y mueve el foco a través de sus elementos. Hacer clic en el nombre de la categoría aún abre la página de la categoría, exactamente como antes.
Para desarrolladores
| Pieza | Dónde |
|---|---|
| La fila (compartida por cuatro aplicaciones) | templates/_shared/_category_row_inner.html |
| Nodo de árbol (el “+” solía estar aquí) | templates/_shared/_category_node.html |
| Estilos | static/css/orbitingfox-ui.css § 23t |
| Preselección de categoría + ruta de retorno | blink/views.py (?category=, siguiente → siguiente_url) |
| Pruebas | config/test_category_row_actions.py, config/test_capture_return_path.py |
El menú es un desplegable de Bootstrap con la apariencia del existente .of-dropdown-menu — no un
sexto patrón de expandir/colapsar. Un menú no es una divulgación: <details> no puede flotar por encima de la
fila, así que empujaría la lista hacia arriba en lugar de superponerla.
La ruta de retorno se valida en ambos extremos. El valor siguiente llega en una cadena de consulta,
por lo que es elegido por el atacante: se rechaza a menos que sea una ruta del mismo sitio tanto cuando el formulario es
renderizado como cuando la guardado redirige. Un //host relativo a esquema también es rechazado —
comienza con una diagonal y pasaría una verificación ingenua.
Dos trampas encontradas mientras construía esto, que vale la pena saber: min-w-0 no es una clase en este
código base (la de la casa es of-min-w-0), y cinco no-ops silenciosos fueron la razón por la cual la
fila desbordó en un teléfono; y btn-outline-* son clases de color de Bootstrap que el repaso de diseño no
cuenta actualmente, por lo que pueden acumularse sin que se note.
This guide was translated automatically. Read the English original.