Accueil Blog A propos Contact Connexion
Retour à la liste des articles Customiser Easyadmin

Customiser Easyadmin

Olivier Prieur | il y a 2 ans | il y a 7 jours Développement web | 1 | 5555

Ajouter un logo dans la sidebar

Dans src/Controller/Admin/DashboardController.php

Ici j'ai modifié la fonction setTitle() et ajouté du HTML + CSS.

->renderContentMaximized() permet au dashboard de prendre tout l'écran.

public function configureDashboard(): Dashboard

 {

      return Dashboard::new()

      //->setTitle('MonBlog')

      ->setTitle('<img src="assets/img/logo.png" class="img-fluid d-block mx-auto" style="max-width:100px; width:100%;"><h2 class="mt-3 fw-bold text-white text-center">MonBlog</h2>')

      ->renderContentMaximized()

      ;

 }


Afficher l'avatar du User dans Easyadmin

Dans src/Controller/Admin/DashboardController.php

Par défaut, une fois connecté à Easyadmin, vous voyez votre pseudo (ou email) et un avatar par défaut. Mais il est possible de changer cet avatar... par le votre.

Si, dans votre entité User, vous disposez d'un champ avatar ou image, etc., vous pouvez récupérer cet avatar et l'afficher avec le code suivant.

Rien de bien compliqué non plus, mais attention de bien indiquer le bon chemin pour l'image de l'avatar et vous utiliserez la fonction ->setAvatarUrl()

public function configureUserMenu(UserInterface $user): UserMenu

 {

     if (!$user instanceof User) {

        throw new \Exception('Wrong user');

     }


    $image = 'assets/img/users/' . $user->getAvatar();

    return parent::configureUserMenu($user)

     ->setAvatarUrl($image);

 }


Modifier les crud

Dans src/controller/Admin/MyEntityCrudController.php

fonction configureFields()

Vous pouvez ajouter des grands titres de sections avec une icone Font Awesome afin de séparer les différentes parties.

Par exemple :

FormField::addPanel('Info')->setIcon('fas fa-info-circle')

... ajoutera un Titre Info avec une icone Info

Modifiez la largeur de colonne, comme dans Bootstrap

Vous pouvez modifier la largeur de la "col", comme dans boostrap, pour permettre à un input, un tableau ou un textarea de faire la moitié, le quart... ou l'intégralité de l'écran.

Rien de plus imple avec par exemple

EmailField::new('email', 'Email address')

    ->setColumns(3),


Evidemment, ->setColumns(12) prendra toute la largeur de la colonne.

Changer les couleurs, background, etc.

Il va falloir intervenir dans plusieurs fichiers.

Avec WebpackEncore, créez un fichier admin.css dans assets/styles et ajouter le code suivant :

:root {

     /* background du body principal - toutes pages */

     --body-bg: #ffffff;


    /* taille de la sidebar par défaut (230px par défaut) */

     --sidebar-max-width: 250px;


    /* couleur du background de la sidebar */

     --sidebar-bg: #283a5a;


    /* border de la sidebar */

     --sidebar-border-color: #9b0c04;


    /* couleur du titre principal si pas de logo image */

     --sidebar-logo-color: #fff;


    /* couleur des submenus */

     --sidebar-menu-submenu-color: #fff;


    /* couleur de la police des cruds */

     --sidebar-menu-color: #95969e;


    /* couleur des sections */

     --sidebar-menu-header-color: #00e1ff;


    /* couleur des icons font-awesome */

     --sidebar-menu-icon-color: #849bff;


    /* couleur du background des boutons actifs = lien sélectionné */

     --sidebar-menu-active-item-bg: #ffffff;


    /* couleur police des boutons actifs */

     --sidebar-menu-active-item-color: #283a5a;


    /*  */

     --sidebar-menu-badge-active-color: #000;

 }


Les commentaires sont, je pense, assez précis pour que vous puissiez vous y retrouver. Il existe évidemment plein d'autres possibilités.

Puis dans src/Controller/Admin/DashboardController.php, ajouter en fin de fichier :

public function configureAssets(): Assets

{

     return parent::configureAssets()

     ->addWebpackEncoreEntry('admin');

}


Nous allons donc ici créer une nouvelle "entry" dans Webpack. Il va donc falloir ajouter cette ligne :

.addStyleEntry('admin', './assets/styles/admin.css')

Puis recompilez tout ça : yarn build

 ... et rechargez la page du Dashboard easyadmin... vous devriez vois quelques changements ;)

Modifier le tri, la pagination et l'affichage de certains menus

Dans src/Controller/Admin/DashboardController.php

Dans la fonction configureCrud(), vous pouvez ajouter ces options :

->setDefaultSort(['id' => 'DESC'])

->setPaginatorPageSize(15)

->showEntityActionsInlined(true)


Explications :

 ->setDefaultSort() triera évidemment vos infos (ici, le tri s'effectue avec l'ID, du plus grand au plus petit)

 ->setPaginatorPageSize() vous permet de "jouer" sur la pagination...

 ->showEntityActionsInlined(true) va vous permettre de modifier le petit menu à droite de chaque ligne (les 3 petits points). En fait, ce la va enlever les 3 petits points pour mettre un mot ou une icone à la place. Il faudra donc ensuite configurer les "actions" afin de d'afficher la bonne icone ou le bon mot...

Olivier Prieur

Olivier Prieur

Geek quinqua nivernais fan d'ovalie, de musique, de linuxeries et de Net.
Portfolio : https://www.olivierprieur.fr

Commentaires

En soumettant ce formulaire, j’accepte que ce site conserve mes données personnelles via ce formulaire. Aucune exploitation commerciale ne sera faite des données conservées.

Aurelie

il y a 1 an

Bonjour !
Exactement ce que je cherchais à savoir, du CSS dans un Controller c'est possible 😁
Merci ! Super post

A la une

Utiliser TailwindCSS dans un projet Symfony 7

Lire l'article

Symfony 7 avec Docker

Lire l'article

Customiser Easyadmin (2) : avec AssetMapper

Lire l'article

Je recherche un nouveau job !

Lire l'article

Les plus lus

Symfony : barre de recherche dans la sidebar 19385

Lire l'article

Débuter avec Symfony 5 : le fichier .env 11930

Lire l'article

VSCode : 10 raccourcis clavier indispensables (Linux) 11595

Lire l'article

GIT / GITHUB : aide-mémoire pour "les nuls" 10191

Lire l'article