Appearance
BDD-142 — Amélioration de l'expérience visuelle du bloc note
Contexte
Le bloc note (WorkflowTextCanvasNode) permet d'annoter les blocs d'un workflow. Ce ticket améliore son expérience visuelle : auto-resize, compteur de caractères, placeholder, états vide/rempli et choix de couleur.
Critères d'acceptance
| # | Critère | Couvert par |
|---|---|---|
| 1 | La textarea s'agrandit automatiquement en hauteur selon le contenu (pas de scrollbar interne) | WorkflowTextCanvasNode.vue — autoResizeTextarea() via scrollHeight |
| 2 | Un compteur de caractères est affiché en bas à droite (ex : 12 / 5000) | WorkflowTextCanvasNode.vue — contentLength computed |
| 3 | Un placeholder descriptif s'affiche quand la note est vide | WorkflowTextCanvasNode.vue — attribut placeholder |
| 4 | L'état vide affiche une bordure en pointillés et un fond légèrement grisé | CSS class canvas-node--text__textarea--empty |
| 5 | L'état rempli affiche une bordure pleine et un fond blanc | CSS par défaut sur la textarea |
| 6 | L'utilisateur peut choisir parmi 4 couleurs de fond (gris, jaune, bleu, vert) | TEXT_NODE_COLORS dans config + color picker dans le header |
Fichiers modifiés
| Fichier | Rôle |
|---|---|
front/src/pages/admin/workflows/workflow-text-node-config.js | Ajout de TEXT_NODE_COLORS, TEXT_NODE_DEFAULT_COLOR, champ color dans config, resolveTextNodeStyle étendu |
front/src/components/workflows/WorkflowTextCanvasNode.vue | Implémentation des 5 améliorations visuelles |
front/src/__tests__/pages/admin/workflows/workflow-text-node-config.spec.js | Tests unitaires couvrant les nouveaux comportements |
Détails techniques
Auto-resize
La textarea utilise overflow-y: hidden et un handler JavaScript qui positionne el.style.height = el.scrollHeight + 'px' à chaque saisie. Le conteneur parent passe de height fixe à minHeight, ce qui lui permet de grandir avec le contenu.
Couleurs
Quatre options définies dans TEXT_NODE_COLORS (chacune avec une clé, un bg et un border) :
| Clé | Fond | Bordure gauche |
|---|---|---|
gray | #f8fafc | #64748b |
yellow | #fefce8 | #ca8a04 |
blue | #eff6ff | #3b82f6 |
green | #f0fdf4 | #16a34a |
La couleur sélectionnée est persistée dans config.color via patch-config. resolveTextNodeStyle injecte backgroundColor et borderLeftColor dans le style inline du nœud.
États textarea
- Vide (
isEmpty === true) : classe CSScanvas-node--text__textarea--empty→ bordure pointillée + fond gris clair. - Rempli : style par défaut → bordure pleine + fond blanc.
- Focus : bordure bleue + ombre légère (comportement inchangé).