Upgrade adminLTE to v3

[jordisala1991]

Subject

I am targeting this branch, because this breaks BC.

Changelog

### Added
- Added support for AdminLTE v3
- Added support for jQuery v3

[VincentLanglet]

It requires to target 5.x, isn't it ?

[jordisala1991]

For the moment there are some PR on the frontend that didn't land in 5.x yet (I think). Also I would like to understand what changes are needed to be compatible with AdminLTE 3. This way we can decide if it is worth to do it on 4.x or 5.x. Of coure it will be done probably on 5.x since it will require a lot of changes. Still I don't know yet how many things needs to be changed.

[VincentLanglet]

For the moment there are some PR on the frontend that didn't land in 5.x yet (I think). Also I would like to understand what changes are needed to be compatible with AdminLTE 3. This way we can decide if it is worth to do it on 4.x or 5.x. Of coure it will be done probably on 5.x since it will require a lot of changes. Still I don't know yet how many things needs to be changed.

Dropping bootstrap3 in favor of bootstrap4 is a BC-break to me since it can break the html/css a user added on a custom templates. Also, we're dropping xeditable and the related feature. So it will be 5.x.

But I'm curious to see how hard it is to have this update. Do you try this on a custom project ? Having screenshot would be interesting :)

[jordisala1991]

For the moment there are some PR on the frontend that didn't land in 5.x yet (I think). Also I would like to understand what changes are needed to be compatible with AdminLTE 3. This way we can decide if it is worth to do it on 4.x or 5.x. Of coure it will be done probably on 5.x since it will require a lot of changes. Still I don't know yet how many things needs to be changed.

Dropping bootstrap3 in favor of bootstrap4 is a BC-break to me since it can break the html/css a user added on a custom templates. Also, we're dropping xeditable and the related feature. So it will be 5.x.

But I'm curious to see how hard it is to have this update. Do you try this on a custom project ? Having screenshot would be interesting :)

For now I did the changes needed to be able to compile assets, my next step would be to install this version on a custom project to see how it renders

As you said it will be landing on 5.x unless something magic happens like something like this working great: https://www.npmjs.com/package/bootstrap-4-migrate

[eerison]

Hey @jordisala1991 I tried to use your branch to see how the new admin looks like, but I saw many things are not working

questions

• could you list what is finished and what is missing
• what you are fixing ATM
• if I fix something how can I put in your branch? should I open a PR to your branch?

Edit 1: or do you think is easier just one person work on that

[eerison]

@jordisala1991 I'm fixing the sidebar menu on the left side

old one:

new one:

what is missing

• [x] fix the show/hide menu
• [ ] sub menus

when I fix that I can open a MR for your branch

[eerison]

I need to override this submenu's <li> I guess it's from KNP menu, but do you have any easy way to change this? if not I'll search a bit ;)

I need to add class="nav-item"

cc @VincentLanglet

[VincentLanglet]

I need to override this submenu's

I guess it's from KNP menu, but do you have any easy way to change this? if not I'll search a bit ;)

You should look at Menu/sonata_menu.html.twig. Maybe the {% block item %}

[eerison]

Ok just an update!

the layout is basically done, I'm with a problem to make this treeview/dropdown work, I'm not sure if it's missing some js ...

[core23]

When updating to admin lte, maybe you can look for some custom html attributes like sonata-filter which should be data-sonata-filter.

I tried this few years ago: https://github.com/sonata-project/SonataAdminBundle/pull/3312/files

This would close https://github.com/sonata-project/SonataAdminBundle/issues/5132

[SonataCI]

Could you please rebase your PR and fix merge conflicts?

[eerison]

As expected the frontend pipelines is still break :'(

[jordisala1991]

As expected the frontend pipelines is still break :'(

Fixed the build, probably this is because you didn't compile assets with the same version of things a our CI, those are the exact commands I executed:

nvm use 16
npm clean-install
npx encore production

[eerison]

As expected the frontend pipelines is still break :'(

Fixed the build, probably this is because you didn't compile assets with the same version of things a our CI, those are the exact commands I executed:

nvm use 16
npm clean-install
npx encore production

ohhh true, yeah i used a different version, good to know!

thanks :)

[jordisala1991]

I am working on the header nav bar now, and will finish the sidebar last touches

[eerison]

I am working on the header nav bar now, and will finish the sidebar last touches

Nice 👏👏

[jordisala1991]

Fixed sidebar, now it opens and closes. Also minor fixes on styles for the sidebar and the header bar. The main sonata dashboard is fixed too (there are more widgets that need to be tested tho) The main sonata form now looks better.

There is still a lot of work to do.

[SonataCI]

Could you please rebase your PR and fix merge conflicts?

[github-actions[bot]]

This PR has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[eerison]

👀

[core23]

Hi @jordisala1991, can you give a short update what parts were missing / done?

I'd like to continue on this topic in the next weeks.

[jordisala1991]

This pr was missing a lot of things, but it is really old, I cant remember exactly. My last attempt was with bootstrap directly, last released version contains everything that we might need. Adminlte is no longer needed imho.