63 lines
4.0 KiB
Markdown
63 lines
4.0 KiB
Markdown
---
|
||
issueRef: "#177"
|
||
version: 5
|
||
updatedBy: {"kind":"agent","agent_id":"57695b92-24d0-4876-837c-76116e70a6ae"}
|
||
updatedAt: 1785321673419
|
||
---
|
||
|
||
## #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.
|
||
|
||
```text
|
||
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 suivante` seul, `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 boutons `Expanded` cô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 :
|
||
|
||
```dart
|
||
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.
|