Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Upgrade adminLTE to v3 #7740

Closed

Conversation

jordisala1991
Copy link
Member

@jordisala1991 jordisala1991 commented Feb 13, 2022

Subject

I am targeting this branch, because this breaks BC.

Changelog

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

@VincentLanglet
Copy link
Member

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

@jordisala1991
Copy link
Member Author

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
Copy link
Member

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
Copy link
Member Author

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
Copy link
Contributor

eerison commented Feb 28, 2022

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
Copy link
Contributor

eerison commented Feb 28, 2022

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

old one:

Screenshot 2022-02-28 at 15 19 17

new one:
Screenshot 2022-02-28 at 21 13 00

what is missing

  • fix the show/hide menu
  • sub menus

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

@eerison
Copy link
Contributor

eerison commented Feb 28, 2022

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 ;)

Screenshot 2022-02-28 at 21 47 17

I need to add class="nav-item"

cc @VincentLanglet

@VincentLanglet
Copy link
Member

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
    Copy link
    Contributor

    eerison commented Mar 2, 2022

    Screenshot 2022-03-02 at 22 29 12

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

    @@ -53,11 +53,6 @@ Encore.setOutputPath('./src/Resources/public')

    .copyFiles([
    { from: './assets/images/', pattern: /\.(png|gif)$/, to: 'images/[name].[ext]' },
    {
    Copy link
    Contributor

    Choose a reason for hiding this comment

    The reason will be displayed to describe this comment to others. Learn more.

    I guess it's important to skins?

    because I'm getting this error

    GET http://localhost:8001/bundles/sonataadmin/admin-lte-skins/skin-black.min.css net::ERR_ABORTED 404 (Not Found)
    

    Copy link
    Member Author

    Choose a reason for hiding this comment

    The reason will be displayed to describe this comment to others. Learn more.

    I didn't find the skins on the admin-lte v3, maybe we need to remove that feature too.

    Copy link
    Contributor

    @eerison eerison Mar 17, 2022

    Choose a reason for hiding this comment

    The reason will be displayed to describe this comment to others. Learn more.

    @core23
    Copy link
    Member

    core23 commented Mar 4, 2022

    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 #5132

    @SonataCI
    Copy link
    Collaborator

    SonataCI commented Mar 7, 2022

    Could you please rebase your PR and fix merge conflicts?

    @eerison
    Copy link
    Contributor

    eerison commented Mar 30, 2022

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

    Nice 👏👏

    @jordisala1991
    Copy link
    Member Author

    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
    Copy link
    Collaborator

    Could you please rebase your PR and fix merge conflicts?

    @github-actions
    Copy link

    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.

    @github-actions github-actions bot added the stale label Oct 25, 2022
    @github-actions github-actions bot closed this Nov 1, 2022
    @eerison
    Copy link
    Contributor

    eerison commented Nov 1, 2022

    👀

    @VincentLanglet VincentLanglet mentioned this pull request Dec 27, 2022
    5 tasks
    @core23
    Copy link
    Member

    core23 commented Aug 27, 2023

    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
    Copy link
    Member Author

    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.

    Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
    Projects
    None yet
    Development

    Successfully merging this pull request may close these issues.

    None yet

    5 participants