8 nov. 2024 | Connexion

Blog

Customiser Easyadmin

Customiser Easyadmin

Développement web
Symfony Twig CSS

il y a 2 ans citizenz7 1 commentaire 4733 lectures

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...

1 commentaire


Aurelie, le 13-01-2024 à 05:34:09

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

Nb d'articles actifs : 50 | Nb de commentaires : 39 | Nb de catégories : 8 | Nb de tags : 32 | Nb total de lectures : 220 876
2024 citizenz.info • Some rights reserved GPLv3 • Version 3.3.5

C'est pas moi qu'explique mal, c'est les autres qui sont cons ! (Kaamelott, Livre IV, Perceval Fait Raitournelle)