Symfony Publié le

Régler le style des badges d'EasyAdmin

Les badges d'EasyAdmin séparent la couleur (color) du style (variant) ; depuis la 5.8, le style se règle d'un coup pour tout le back-office ou pour un seul contrôleur CRUD.

Notions abordées : EasyAdminTwig

Nouveau dans EasyAdmin 5.8. Les badges d'EasyAdmin (les petites étiquettes colorées d'un statut ou d'un type) ont été repensés. Le composant <twig:ea:Badge> sépare deux réglages qui étaient confondus : la couleur (color) et le style (variant). Cette séparation a commencé en 5.7 ; la 5.8 y ajoute un réglage du style pour tout un back-office. Il existe quatre styles : light (le défaut, avec une fine bordure), solid (plein), outline (contour seul) et dot (un point coloré devant le texte).

Avant

{# variant portait la couleur #}
<twig:ea:Badge variant="success">Confirmée</twig:ea:Badge>

Aujourd'hui

<twig:ea:Badge color="success">Confirmée</twig:ea:Badge>
<twig:ea:Badge variant="solid" color="danger">Annulée</twig:ea:Badge>
<twig:ea:Badge variant="dot" color="warning">En attente</twig:ea:Badge>

Le style par défaut ne se répète pas sur chaque badge : il se règle une fois sur l'objet Crud, avec setBadgeVariant() :

public function configureCrud(): Crud
{
    // dans le tableau de bord : pour tout le back-office
    return Crud::new()->setBadgeVariant('solid');
}

Appelé dans un contrôleur CRUD, le réglage ne vaut que pour lui, et l'emporte sur celui du tableau de bord. Un badge qui donne lui-même son variant le garde dans tous les cas. Les badges qu'EasyAdmin dessine lui-même, ceux de ChoiceField::renderAsBadges() par exemple, suivent aussi ce réglage.

Passer une couleur dans variant fonctionne encore, mais c'est déprécié depuis la 5.7.

À faire

Le back-office d'un gîte affiche le statut de chaque réservation avec un gabarit maison, écrit avec l'ancienne syntaxe. Mettez-le à jour :

  1. Dans templates/admin/reservation/badge.html.twig, donnez la couleur de chaque badge avec color.
  2. Rendez pleins (solid) tous les badges du back-office : ceux des réservations comme ceux du type de client, dans la liste des clients. ClientCrudController ne se modifie pas : le réglage se fait dans le tableau de bord.
  3. Dans la liste des réservations seulement, faites-en des points colorés (dot).
  4. Le badge « Annulée » doit sauter aux yeux : il reste plein, même dans la liste des réservations.