Lignes de catégorie : un menu, et attraper un Blink directement dans une catégorie

Ce qui a changé

Chaque ligne de catégorie — dans Blinks, Goals, Projects et Businesses — portait cinq contrôles : le nom, un badge de compte, et des boutons pour Profil, Éditer et Supprimer, plus un “+” pour ajouter une sous-catégorie. Sur un téléphone, ces boutons se retrouvaient sur une seconde ligne et la ligne avait l'air encombrée.

Une ligne affiche désormais deux choses après le nom et le compte :

• une icône attraper un Blink, qui classe un nouveau Blink directement dans cette catégorie ;
• un “…” menu contenant Profil, Éditer, Ajouter une sous-catégorie et Supprimer.

Ainsi, la ligne a gagné une fonctionnalité et perdu trois contrôles en même temps. Supprimer se trouve en dernier dans le menu avec un séparateur au-dessus, car une action destructive ne doit jamais être celle que votre pouce trouve par accident.

Attraper un Blink dans une catégorie

Cliquez sur l'icône d'attraper sur n'importe quelle ligne et le formulaire normal de Blink s'ouvre avec cette catégorie déjà choisie dans l'onglet Lien. Remplissez-le comme d'habitude. Lorsque vous sauvegardez, vous revenez à la page de catégorie d'où vous avez commencé, afin que vous puissiez ranger un autre immédiatement sans naviguer à nouveau.

Aucune partie du formulaire ne change — c'est la même page, les mêmes champs et la même sauvegarde. La seule différence est l'endroit où vous avez commencé et où vous atterrissez.

Quelles applications ont quoi

La ligne calme et le menu “…” sont présents dans les quatre applications, car elles partagent un élément de ligne. Deux éléments de menu apparaissent uniquement là où ils peuvent réellement fonctionner :

• Ajouter une sous-catégorie — Blinks uniquement pour l'instant. Les pages de création des trois autres applications ne peuvent pas encore accepter une catégorie parente, et offrir un contrôle qui ne fait rien en silence est pire que de ne pas l'offrir.
• L'icône d'attraper — Blinks uniquement pour l'instant, pour la même raison : seul le formulaire Blink peut actuellement s'ouvrir avec une catégorie présélectionnée. Chacune des autres applications peut l'activer plus tard en passant une valeur supplémentaire à la ligne ; aucun nouveau code n'est nécessaire pour le comportement lui-même.

Claviers et lecteurs d'écran

Les deux icônes portent le nom de la catégorie dans leur étiquette — “Attraper un Blink dans Travail”, “Plus d'actions pour Travail” — car quelqu'un écoutant la page une ligne à la fois doit savoir quelle ligne parle. Le menu s'ouvre avec le clavier, se ferme avec Échappe, et déplace le focus à travers ses éléments. Cliquer sur le nom de la catégorie ouvre toujours la page de la catégorie, exactement comme avant.

Pour les développeurs

Le menu est un dropdown Bootstrap habillé avec le existant .of-dropdown-menu — pas un sixième modèle d'expansion/réduction. Un menu n'est pas une divulgation : <details> ne peut pas flotter au-dessus de la ligne, donc cela pousserait la liste à s'ouvrir au lieu de se superposer.

Le chemin de retour est validé aux deux extrémités. La valeur next arrive dans une chaîne de requête, ce qui signifie qu'elle est choisie par l'attaquant : elle est refusée sauf si c'est un chemin du même site à la fois lorsque le formulaire est rendu et lorsque la sauvegarde redirige. Un //host relatif au schéma est également refusé — cela commence par une barre et passerait un contrôle naïf.

Deux pièges découverts lors de la construction de ceci, à connaître : min-w-0 n'est pas une classe dans ce codebase (la maison est of-min-w-0), et cinq opérations muettes étaient la raison pour laquelle la ligne débordait sur un téléphone ; et btn-outline-* sont des classes de couleur Bootstrap que le cran de conception ne compte actuellement pas, cela peut donc s'accumuler sans être remarqué.