Jonathan Lahijani Posted January 18 Share Posted January 18 For fun, I've been working on what you would call AdminThemeBootstrap to get a deeper understanding of ProcessWire's admin framework (maybe I'll release it one day but it's more of a pet project). As you may know, the current admin system has a deep dependency on jQuery and jQuery UI (which is now deprecated in maintenance mode). Things like the navbar dropdowns, tabs and accordions are jQuery UI based components, not (for example) UIkit's dropdown or Bootstrap's dropdown. This has gotten me thinking about if there was (not that it's necessary) a comprehensive re-thinking of the admin, what libraries in today's world would be the ideal fit for a project like ProcessWire? 9 Link to comment Share on other sites More sharing options...
Ivan Gretsky Posted January 19 Share Posted January 19 The next major upgrade to admin in general would be to support saving without reloading IMHO. This could be a SPA. But maybe unpoly or htmx would fit PW spirit better. Anyway, this seems like a gigantic task to tackle. And surely Ryan should decide if he is willing to do it now or ever. 3 Link to comment Share on other sites More sharing options...
da² Posted January 19 Share Posted January 19 Hello, Angular may be a possibility. But it would be a full admin replacement, not just modifying the existing. Link to comment Share on other sites More sharing options...
bernhard Posted January 19 Share Posted January 19 On 1/18/2024 at 10:09 PM, Jonathan Lahijani said: For fun, I've been working on what you would call AdminThemeBootstrap That sounds like a huge task 🙂 On 1/18/2024 at 10:09 PM, Jonathan Lahijani said: which is now deprecated Do you have any reference for that? From what I read it's "maintenance-only", so we'll not see any new features. That's a different story then I guess. But of course I agree that it would be nice to get a more modern looking/working backend. But compared to other CMSs I think it's still really not bad. And it's very well thought out for all the complexity it needs to handle. https://blog.jqueryui.com/2021/10/jquery-maintainers-update-and-transition-jquery-ui-as-part-of-overall-modernization-efforts/ But remembering when AdminThemeUikit was born I guess Ryan will come up with a genius solution once it is necessary 🙂 1 Link to comment Share on other sites More sharing options...
Jonathan Lahijani Posted January 19 Author Share Posted January 19 20 minutes ago, bernhard said: That sounds like a huge task 🙂 Actually I just did a find for 'uk-' and replaced it with '', then replaced 'Uikit' with 'Bootstrap' and I was done! Just kidding, it's a little more involved but I got very far and it's usable now. I still need to clean up a few things. Here's a screenshot (I need to style buttons among other things): To be more clear, while I won't use it immediately, another reason why I personally am making a Bootstrap based admin theme is because it could theoretically take advantage of the many Bootstrap-based admin themes and components (examples), or at least some of the screens and layouts they provide. That would be very convenient as I do see myself making more web-app type sites where it's purely using PW's backend. @bernhardYou're right, it's not deprecated, but in maintenance only mode. I don't know the inner-workings of jQuery UI but I would assume even though it's functional, browser capabilities are now much more robust and perhaps much of its capabilities are not using JavaScript's newer, native features? Don't quote me on that, but it feels very old. I see that CraftCMS uses jQuery UI as well. 1 Link to comment Share on other sites More sharing options...
MarkE Posted January 20 Share Posted January 20 1 hour ago, Jonathan Lahijani said: browser capabilities are now much more robust and perhaps much of its capabilities are not using JavaScript's newer, native features .. or even taking advantage of newer html5 developments. For example, <details><summary>. I guess the fundamental issue is that this is always a moving target, so it makes sense to not try and track the latest fashion, but to move when it is clear that the way forward is established and generally accepted. 2 Link to comment Share on other sites More sharing options...
Jonathan Lahijani Posted January 24 Author Share Posted January 24 On 1/19/2024 at 4:17 PM, MarkE said: .. or even taking advantage of newer html5 developments. For example, <details><summary>. I guess the fundamental issue is that this is always a moving target, so it makes sense to not try and track the latest fashion, but to move when it is clear that the way forward is established and generally accepted. Indeed. Pico CSS, which is a minimal CSS framework, takes that approach: https://v2.picocss.com/docs https://v2.picocss.com/docs/accordion I wish they supported tabs however. Link to comment Share on other sites More sharing options...
MarkE Posted January 24 Share Posted January 24 46 minutes ago, Jonathan Lahijani said: Pico CSS, which is a minimal CSS framework, takes that approach: Yeah. The only thing is that other items don't automatically close (assuming you want that). Unfortunately 'name' grouping does not seem to be fully implemented yet. 1 Link to comment Share on other sites More sharing options...
Denis Schultz Posted February 7 Share Posted February 7 As a note here: https://blog.jquery.com/2024/02/06/jquery-4-0-0-beta/ "Totgesagte leben länger" (those who were declared dead live longer) There also cut some old dependency. Maybe an interesting development. 2 Link to comment Share on other sites More sharing options...
matjazp Posted February 7 Share Posted February 7 Just to say, that 4.0 beta is working just fine. I had to tweak jquery migrate, but this issue will be fixed soon. 1 Link to comment Share on other sites More sharing options...
HMCB Posted March 4 Share Posted March 4 On 1/19/2024 at 5:34 PM, Jonathan Lahijani said: To be more clear, while I won't use it immediately, another reason why I personally am making a Bootstrap based admin theme is because it could theoretically take advantage of the many Bootstrap-based admin themes and components (examples), or at least some of the screens and layouts they provide. That would be very convenient as I do see myself making more web-app type sites where it's purely using PW's backend. I would love to swap out UIKit for Bootstrap. Big time. Link to comment Share on other sites More sharing options...
Mustafa-Online Posted Monday at 06:18 AM Share Posted Monday at 06:18 AM @Jonathan Lahijani Any updates on this? I really like to use a new theme based on Bootstrap. 1 Link to comment Share on other sites More sharing options...
Jonathan Lahijani Posted Monday at 10:59 PM Author Share Posted Monday at 10:59 PM @Mustafa-Online I made nice update today on this module after not having touched it in several weeks. It's now basically complete but before I release it I still need to clean up some old code that's left over, make it work more nicely with SelectizeAll and provide similar overriding capabilities that the UIkit theme has. This module includes Bootstrap Icons and it substitutes Font Awesome icons accordingly (I went through each one and found the equivalents!). It also uses the Bootstrap navbar and dropdowns. A side-effect of this is ajax-loaded dropdown content won't work in the first release. I may backtrack on using Bootstrap dropdowns depending on if that becomes difficult. Anyway, it's looking good overall. If anyone is wondering why use this as opposed to UIkit, it may be beneficial if you are doing a lot of custom admin stuff and want to use pre-made Bootstrap styled components since the Bootstrap ecosystem is much much larger than UIkit. Also, it feels a little more fresh, although my actual reason for creating this was to for a way for me to get a deeper understanding of how admin themes work. 6 Link to comment Share on other sites More sharing options...
Mustafa-Online Posted Tuesday at 05:25 AM Share Posted Tuesday at 05:25 AM @Jonathan Lahijani It's great you still working on this, can't wait to try it. I wish one day you make a tutorial on how to create an admin theme from scratch, as all forum's related content is outdated. 2 Link to comment Share on other sites More sharing options...
Jonathan Lahijani Posted Tuesday at 02:55 PM Author Share Posted Tuesday at 02:55 PM 11 hours ago, Mustafa-Online said: I wish one day you make a tutorial on how to create an admin theme from scratch If you truly want to make an admin theme from scratch like I'm doing, it's best to just take AdminThemeUikit, since that is the "official" and most supported theme and rip out UIkit and start replacing it with your own approach and just hack away at it. Keep in mind that ProcessWire makes heavy use of jQuery UI and a few other libraries so you'll have to play nicely with them unless you want to replace them too, but that takes it to another level. With Bootstrap, it's straight-forward enough given the similarities with UIkit, although this is turning out to be more work than I anticipated. But that was the point since I want it to force me into looking at how everything is interconnected. One idea for an admin theme is to do it with pure, modern CSS and as little JS as possible and as accessible as possible (good reason why here). 2 Link to comment Share on other sites More sharing options...
Jonathan Lahijani Posted Thursday at 04:45 PM Author Share Posted Thursday at 04:45 PM Just curious, does anyone know the approach @ryan uses to minify module JavaScript files? For example, how is he minifying this: https://github.com/processwire/processwire/blob/dev/wire/modules/AdminTheme/AdminThemeUikit/scripts/main.js to this: https://github.com/processwire/processwire/blob/dev/wire/modules/AdminTheme/AdminThemeUikit/scripts/main.min.js Ideally I want to use a CLI-based tool (Linux-based), but I want to avoid using a Node-based solution (such as https://github.com/terser/terser). Link to comment Share on other sites More sharing options...
Recommended Posts