4.0 KiB
issueRef, version, updatedBy, updatedAt
| issueRef | version | updatedBy | updatedAt | ||||
|---|---|---|---|---|---|---|---|
| #177 | 4 |
|
1785318789682 |
#177 — Cadrage UX (2026-07-29)
Statut : cadrage exploitable, révision du lot #171 déjà livré — même fichier/zone (_CurrentStepPane, branche générale reps-only, workout_execution_screen.dart L2851-2899). Le retour utilisateur porte sur le résultat visuel de la correction apportée pour #171 (suppression du scroll), pas sur une régression fonctionnelle : la rangée [Passer l'étape] [···] [Étape suivante] tient sur une ligne mais rend mal (trois éléments hétérogènes — deux boutons pleine largeur + un bouton icône carré — écrasés côte à côte).
Diagnostic
Le défaut n'est pas l'absence de place, c'est la hiérarchie plate : Passer l'étape (contournement, cas rare) et Étape suivante (action attendue, cas fréquent) ont exactement le même poids visuel, et le menu ··· (encore plus secondaire : passer le passage/la séquence) est coincé entre les deux au lieu d'être clairement rattaché à l'action secondaire. Cette rangée plate contredit le principe déjà appliqué ailleurs dans ce lot UI (montre, #166) : une seule action principale, mise en avant ; les actions de contournement reléguées, jamais au même niveau visuel.
Comportement attendu
Séparer en deux rangées, primaire au-dessus / secondaire en dessous — reprend la hiérarchie déjà utilisée par la montre (#166) : action attendue mise en avant, contournement discret en dessous.
Pompes tempo
10
RÉPÉTITIONS
[ ✓ Étape suivante ] ← rangée 1 : pleine largeur, action principale
[ Passer l'étape ] [···] ← rangée 2 : secondaire, inchangée
- Rangée 1 (nouvelle) :
Étape suivanteseul,FilledButton.icon, pleine largeur (Size.fromHeight(48)), pas de partage de ligne avec un autre bouton. C'est l'action que l'utilisateur va faire dans l'immense majorité des cas (terminer ses répétitions) — elle mérite tout l'espace et toute l'attention. - Rangée 2 (existante, inchangée) :
Passer l'étape(Expanded) + menu···(Passer ce passage/Passer la séquence), exactement le layout déjà en place pour les étapes sans reps (cas général sans le boutonÉtape suivante, L2851-2884) — donc pas de nouveau composant, juste la suppression du 3ᵉ élément qui polluait cette rangée. - Écart vertical entre les deux rangées :
SizedBox(height: 8), cohérent avec les autres espacements de ce fichier (cf. L2774, L2840). - Mutualisation : ce becomes le layout standard des boutons de bas d'écran pour toute étape ayant une action de complétion explicite (reps sans chrono aujourd'hui ; potentiellement d'autres cas futurs) — une rangée pleine largeur pour l'action principale, une rangée dédiée aux actions de contournement en dessous. Le cas
hasRepsWithStopwatchScore(L2775-2799, deux boutonsExpandedcôte à côte) reste inchangé : ce cas a déjà validé son propre layout à deux boutons de poids égal (pas de···), pas concerné par cette révision.
Implémentation
Dans la branche générale (L2851-2899), remplacer le Row unique conditionnel par :
if (step.type == ExerciseStepType.reps) ...[
FilledButton.icon(
onPressed: onCompleteStep,
style: FilledButton.styleFrom(minimumSize: const Size.fromHeight(48)),
icon: const Icon(Icons.check),
label: const Text('Étape suivante'),
),
const SizedBox(height: 8),
],
Row(
children: [
Expanded(
child: OutlinedButton(
onPressed: onSkipStep,
style: OutlinedButton.styleFrom(minimumSize: const Size.fromHeight(44)),
child: const Text('Passer l’étape'),
),
),
const SizedBox(width: 8),
PopupMenuButton<_StepSkipAction>(/* inchangé */),
],
),
Aucune nouvelle donnée, aucun nouveau contrat — pur remaniement de présentation, réutilisation de composants et de styles déjà en place dans le fichier.