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.

Sign up for GitHub

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

Jump to bottom

Symfony UX integration #4012

Closed
javiereguiluz opened this issue Dec 3, 2020 · 6 comments
Closed

Symfony UX integration #4012

javiereguiluz opened this issue Dec 3, 2020 · 6 comments
Labels
feature
Milestone
3.x

Comments

@javiereguiluz
Copy link
Collaborator

javiereguiluz commented Dec 3, 2020 •
edited
Loading

Symfony project has just unveiled the new Symfony UX initiative created by the amazing Symfony Team, specially @tgalopin.

In #4011 we explained some changes we want to introduce to EasyAdmin UI. So, this is related in a way. I want to add to EasyAdmin as many Symfony UX components as it makes sense. These are the components so far:

  • Chartjs: this is easy to understand: it integrates that popular charting library. We're going to use this when creating a full dashboard. We're not going to do that very soon, but we'll do it. I'd like to finish A new theme and UI kit for EasyAdmin #4011 first.
  • Cropperjs: this is to crop uploaded images. I think we can integrate this one very easily right now.
  • Dropzone: this is to allow drag-and-drop behavior in fields like "file upload" so you can just drop the files you want to upload. We need to take a look at how it actually works, but this one should also be very nice to integrate soon.
  • LazyImage: this creates minimal "blurred thumbnails" for images using a very smart technique. I'd love to implement this soon too because right now in data tables we load the images fully, so this can create problems when they are huge.
  • Swup: this is like Turbolinks and makes the application very snappy because browsers don't reload pages entirely. A few months ago I tried to use Turbolinks but I failed. I'd like to use this soon too, but we need to be very careful because we might need to do some changes in the way we load/run some JS in the pages.

So, thanks Symfony Team for Symfony UX. I hope we can start using these (and future) UX components in EasyAdmin to improve things. Please, share your thoughts and comments. Thanks!
@javiereguiluz javiereguiluz added this to the 3.x milestone Dec 3, 2020
@malteschlueter
Copy link
Contributor

Great idea to integrate the new components in easyadmin 👍

To Swup: As you say we have to be careful. Would it be possible to add a new block to the body to edit the attributes at the beginning? So people who already want to use it can do it. Like this:

{% block body_attributes %}
    {{ parent() }}

    data-controller="@symfony/ux-swup/swup"
    data-containers="#main .main-sidebar"
{% endblock %}

In the src/Resources/views/layout.html.twig would be look like this:

<body {% block body_attributes %}id="{% block body_id %}{% endblock %}" class="ea {% block body_class %}{% endblock %}"{% endblock %}>

@javiereguiluz
Copy link
Collaborator Author

Some update: I've tried to add Symfony UX Lazy Load. First, it's not straightforward to use this inside a reusable bundle instead of a Symfony app, and there's no much doc yet, so I struggled a bit.

However, I've decided to not use this for now. The gains are small for a private backend (in a normal website it's great, I encourage you to try it). Moreoever, it requires that the images exist as physical files and the hardcoded image dimensions required by BlurHash are very unfortunate because we always define max width/height to accommodate all kinds of images.

But don't worry, I'll keep working on adding other UX components.

@tgalopin
Copy link

tgalopin commented Dec 5, 2020

@javiereguiluz regarding your remarks about LazyImage, I agree indeed. For now, the LazyImage component is focused on the specific things that was important for the demo and to show how it could work, but it's made to be improved.

@mahono
Copy link

mahono commented Dec 8, 2020

Maybe there could also be integration (or rather some work) in the other direction: There are already nice integrations in EasyAdminBundle that could become UX bundles like the integrations for Trix, CodeMirror, select2.

Once these are turned into UX and easily useable in bundles, it could make sense to move these integrations from EasyAdmin to UX.

@tgalopin
Copy link

tgalopin commented Dec 8, 2020

One thing I'm wary about is to not have too big of a final bundle size, and jQuery is heavy. I tend to avoid select2 and libraries based on jQuery in general for this reason. Trix and CodeMirror are great ideas though, there is a discussion about WYSIWYG on the UX repo: symfony/ux#1

@javiereguiluz
Copy link
Collaborator Author

I'm closing this issue because now I'm not sure about adding these components. Only chart.js would make clear sense ... but if we had those components to create charts, which we won't have for some time. Don't worry, we'll revisit this idea in the future 👍

@Ctucker9233 Ctucker9233 mentioned this issue Nov 28, 2023
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
feature
Projects
None yet
Milestone
3.x
Development

No branches or pull requests
4 participants
@javiereguiluz @mahono @tgalopin @malteschlueter