New Theme

[ElLorans]

We currently have 7 open PRs labelled theme.
Of these, 2 are about Bootstrap 5:

1. Added support for Bootstrap 5 #2432
2. feat: Initial Bootstrap 5 theme implementation - foundational UI port #2642

And 2 are about an entirely new theme:

1. Initial attempt for Tabler Template Mode #2444
2. [Theme] New theme: FomanticUI [beta] #2643

Can we join forces and try focusing the efforts to land a new theme?
Bootstrap 4 reached end of life on January 1, 2023, and we use outdated version of datetimerangepicker which causes issues (#1746). I am happy to hear the PR authors' thoughts.

[ElLorans]

@hasansezertasan, @princerb, what do you think?

[hasansezertasan]

I actually got pretty far with the Tabler implementation, but I wasn’t entirely comfortable with the developer environment. I feel right at home now—huge thanks for the awesome work! 🚀✨

Projects like SQLAdmin, Starlette Admin, and FastAPI Admin really inspired me to dive into this. I genuinely enjoy working with Tabler. 😄

I’ll probably need to revisit my progress on that branch, tidy up the setup a bit, and put together a bullet list to track everything. 📝

A “kitchensink” example could be super helpful to showcase all the features in one place, making sure we don’t miss anything from the previous template modes. 🍲🔍

And a UI Test suite arround this kitchensink example would be awesome.

[princerb]

Yes, the current existing theme is very outdated and buggy.

Personally, I've got bored with Bootstrap, that's why I wanted to apply FomanticUI. In my PR I forgot to say that:

FomanticUI theme will only need 2 libraries:

• Latest FomanticUI
• Latest jQuery

Overall only 3 scripts will be enough - jquery.js, semantic.js, semantic.css.

So no extra or dead scripts like select2, datetimepicker, editable etc - FomanticUI has support on all of those features out of scope.

Well, since my PR can do yet still might need some security improvements later, now I was thinking about adding FomanticUI to 2.0 and see it as a beta version?

[princerb]

A “kitchensink” example could be super helpful to showcase all the features in one place, making sure we don’t miss anything from the previous template modes. 🍲🔍

And a UI Test suite arround this kitchensink example would be awesome.

Oh, where is that "kitchensink" example by the way 😃? I've been writing like a brand new whole CRM system to test my theme 😂🤦‍♂️

[hasansezertasan]

Oh, where is that "kitchensink" example by the way 😃? I've been writing like a brand new whole CRM system to test my theme 😂🤦‍♂️

🤣, I feel you. I've been there before.

---

I don't want to go off the rails here, but I really think Flask-Admin could benefit from having an online demo — something like what other projects already offer (e.g. Flask AppBuilder, FastAPI Admin, FastAPI Amis Admin, etc) 🤓.

I always liked Starlette Admin's Demo. That said, I think I'm going to open source my own little kitchensink/playground repo when I get the chance. It's been a handy way to try out features and configurations, and hopefully it can help others too. 🚀

[ElLorans]

I would also love a demo (and snapshots in the readme). But if you have an example, we can add it to the examples folder and convert it into a test, maybe.

[princerb]

🚀 Checkout the beta FomanticUI theme:

docker pull thomasstacey2/fa-fomantic:latest
docker run -p 5000:5000 -p 6379:6379 thomasstacey2/fa-fomantic:latest

[princerb]

Hey guys,
If you've tried/seen my PR FomanticUI theme #2643, I didn't touch any backend code to ensure compatibility and sidestep potential conflicts with the backend dependencies (select2, x-editable etc) that Flask-Admin currently relies on.

And also I think other upcoming/existing themes require some dissimilar backend code and widget/template implementations - but if everyone writes them in different ways (e.g. see this), this might lead to inconsistent interfaces across all other themes and potential breaking changes.

I suggest we discuss standardizing those parameters for universal theme handling and compatibility, after some approval maybe. So they can be used independently - without relying on other needs (select2js, ...) originally.

[hasansezertasan]

Hey guys, If you've tried/seen my PR FomanticUI theme #2643, I didn't touch any backend code to ensure compatibility and sidestep potential conflicts with the backend dependencies (select2, x-editable etc) that Flask-Admin currently relies on.

I haven't find any time to try it out but I'll definetly do it when I get the chance 🤓.

I suggest we discuss standardizing those parameters for universal theme handling and compatibility, after some approval maybe. So they can be used independently - without relying on other needs (select2js, ...) originally.

I couldn't agree more. My initial taught was removing those theme-related JS dependencies for interactive UI using HTMX or Datastar. Check out aminalaee/sqladmin#678 for more information.

Starting with https://github.com/pallets-eco/flask-admin/blob/32e11e2c03b1e408fb5bc9dd13cdd036a33a0a42/flask_admin/static/admin/js/rediscli.js. I actually did some work to re-implement Redis Console in SQLAdmin using HTMX. You can check out the diff: aminalaee/sqladmin@main...hasansezertasan:sqladmin:contrib/rediscli.

I think we can replace select2 and x-editable with HTMX/Datastar and we can also remove some JS files with this approach and it would be bootstrap/tabler/tailwind/fomanticui agnostic.

---

I think we'd might be better if we just rewrite our frontend from scratch using pyhat-stack - though I don't have much experience with tailwind...

[hasansezertasan]

Just re-read my last comment, it seems a lot 🤣.

Other notes:

• x-editable is deprecated. More on that at Replacement for X-editable?  #1615, and at Initial attempt for Tabler Template Mode #2444 I had to use a fork to make it work with Tabler.
• daterangepicker didn't receive any updates in the past 5 years.
• There is bootstrap-5-multi-level-dropdown but it didn't receive any updates in the past 2 years.
• With HTMX or Datastar, we can stop using JQuery.

Some tools:

• https://basecoatui.com/
• https://devdojo.com/pines

[hasansezertasan]

Starting with 32e11e2/flask_admin/static/admin/js/rediscli.js. I actually did some work to re-implement Redis Console in SQLAdmin using HTMX. You can check out the diff: aminalaee/[email protected]:sqladmin:contrib/rediscli.

I think I am gonna implement a RedisCLI frontend with the current theme using htmx and demo it to you guys 🤓.

[ElLorans]

That would be awesome, but I think it would be even better to finish one of the frontend PRs

[hasansezertasan]

That would be awesome, but I think it would be even better to finish one of the frontend PRs

You're right, I'll try to finish my Tabler implementation ASAP 🔢.