Développement web
Symfony
Twig
CSS
il y a 2 ans citizenz7 1 commentaire 4609 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...
Bonjour ! Exactement ce que je cherchais à savoir, du CSS dans un Controller c'est possible 😁 Merci ! Super post
Blog d'un geek quinqua nivernais fan d'ovalie, de linuxerie, de musique et de Net
@Kilenge22 De rien ;)...
citizenz
19-08-2024
Salut et merci vraiment ...
Kilenge22
18-08-2024
@Denny, c'est à dire ?...
citizenz
10-08-2024
N'empêche que chez nous, on sait construire ! Les aqueducs, c'est quand même un petit peu plus classe que vos murs en merde séchée… Enfin, je dis ça, je dis tout ! (Caius Camillus, Kaamelott, Livre I, 56 : Le Dernier Empereur)