Yo dawg, we heard you liked themes...

Just an update on current progress in the new Bootstrap/jQuery theme for Virtualmin/Webmin/Cloudmin/Usermin.

Bootstrap themes (like those from Bootswatch) are working pretty well now, so I thought I’d share some screenshots of what that’ll be like (sort of). So click away, and get a tiny taste of the flexibility of the new theme:

Amelia theme

Readable theme

Slate theme

Cerulean theme

United theme (That orange looks familiar…)

You’ll note that the themes (especially Slate) gives a lot clearer indication of what has been converted to bootstrap styles and what remains of the old. I’m working my way through it all one UI element at a time. Just the ui-lib has hundreds of tags and classes to be updated…not to mention all the modules that haven’t yet been converted to using ui-lib. This is going to be a long, tedious, slog, to get everything converted…but, it’s going much more rapidly than every other attempt I’ve made to AJAX-ify Webmin over the past several years, and I’ve already defeated all of the really hard problems I ran into in those previous attempts.

A lot of the work of the past week has been behind the scenes, or at least visible only on a few select pages. Getting the UI consistent across all pages has been my goal all week, and I’m pretty close to having every element in Virtualmin converted. That still leaves a couple hundred of the standard Webmin modules…but, it’s coming along.

I think we’re still only schedule to have an alpha version of this available for testing (but not production use!) within the next week or so, and a usable (but still imperfect) beta in less than a month.

Cheers,
Joe

Hello Joe,

Those themes look awesome… I cant wait to download them and install them. Thanks…

Regards,

Sidd

Great news!

I like slate! Look forward to it.

Thank you for the hard work.

Any idea when these will be made available to the public? I’m really looking forward to Readable.

Great news on great themes! I think would be even better to gather all our kudos and feedbacks in one topic instead of three different:

http://virtualmin.com/node/29823
http://virtualmin.com/node/30047
http://virtualmin.com/node/29797

Hi Joe,

I am really looking forward to these awesome themes. Do we have any progress updates or an approximate release date?

Thanks…

It’s still moving forward. I’m working on back button functionality right now (which is trickier than I expected, and without a functioning back button, the UI feels horrible). There’s also several bits where events aren’t attached, so clicking things doesn’t work. We’re getting closer, but it’s a bigger job than even I realized (and I’ve tried this major AJAX-y type of overhaul twice in the past). But, so far, I’ve been able to resolve all the issues we had in the past…so we’re over the showstoppers we had with previous revisions.

So, maybe another week or two (I know I said that several weeks ago, but it’s happening, if slower than expected). If anybody is a JavaScript fu master that wants to help me make history API work, or help figure out how to deal with converting forms to a single-page app model, hit me up! If not, i’ll definitely get it sorted…it just may take a little longer.

I wish I could contribute my time and my knowledge of java-script (close to non-existent), but at least I would like to support your always great work financially. Can I send you a little PayPal bounty and to which address?

Hey joe. I have deep experience in Jquery, jQuery UI, some jquery mobile and have worked with bootstrap. I can give you some time and assist you on the js end if you need. Very interested in getting this theme made.

I am currently in #virtualmin on freenode.

Hi joe. If I had the knowledge I would help, but unfortunately I don’t have that. But I would to tell you this: it looks great! Good job! Can’t wait to use these themes.

Howdy! So my hesitation to buying an unlimited/lifetime package is the ugliness of the UI as is (please take no offense; but compared to today’s standards for UI, well, I think you probably know or else wouldn’t be doing this theme adventure). I’m also wanting to be able to offer my clients a webmin login (or at least advertise it), but feared the UI would scare them away :slight_smile: But the idea of finally having an jquery/bootstrapped UI may just push me over the edge.

So, any update on where the progress is on these themes? Looking good!

Hey any idea on when it will be released ? I really want this theme :smiley:

Hi Joe… Has this project been shelved? Really looking forward to these themes… Any updates on the release date?

Thanks…

Sidd

It definitely has not been shelved! It is my primary job every day. We’re currently working on converting all of Webmin to use ui-lib.pl function calls, and also converting all bare links into ui_link function calls (both of these things have to happen for the theme to work with all of Webmin and Virtualmin). It’s time consuming, and tedious, but we have at least one volunteer helping out with it and me and Jamie have mostly stopped all other work to focus on this (so no new features will happen in Virtualmin or Cloudmin for the next couple of weeks while we finish this job).

If anyone knows how to use git/github and knows a little Perl and a little HTML and wants to help out…we could speed this thing up a bit if we had more hands on deck. It’s mostly easy coding, but, so far, we haven’t been able to automate it. The ui_link conversion really ought to be automated, but it has proven beyond my regex-fu thus far. The other ui-lib conversion stuff requires human labor. Webmin is just so big that it takes a long time to do anything that requires changes in every module, as this new theme does.

Progress has actually been pretty good this week. I fixed a number of forms, and figured out that some of the other showstoppers can be resolved by the ongoing ui-lib and ui_link work (i.e. the things I was trying to solve in hard ways by writing substitutions in JavaScript can be solved in easy ways in the underlying Perl code).

Anyway, don’t dispair: This time the new theme will make it out the door. I’m already using it on my personal systems…with the awareness that it breaks a lot, because of modules that haven’t been updated, as well as some buggy bits in the form handling (I need to attach form submit events to the individual buttons rather than the form itself…haven’t figured out how to do this yet, so forms are still buggy if there’s more than one button).

Cheers,
Joe

I’m more than happy to have a look at this and do what I can find. I’m pretty handy with awk and sed, so I may be able to help with the ui_link part at least. Is this all stored in a public forkable git repo? I could fork, make some changes (hopefully working ones), and just submit a git patch if it’d help.

Joe, I would help out on this if I could talk over Skype. E-Mail for me isn’t the fastest communication, and you never seem to want to be on IRC :P.

I know Perl decently, PHP, HTML, jQuery, and bootstrap. I am also pretty exp’ed with regex.

Add pcfreak30 on Skype and I can help. i am on IRC some too as well if you decide to go on.

Yes, the Webmin repo is open and here: https://github.com/webmin/webmin

On the ui_link translation, we’re taking something like this line in acl/edit_group.cgi:

@grid = map { $_ =~ /^\@(.*)$/ ? "$1" : "$_" } @{$group{'members'}};

And converting it to:

@grid = map { $_ =~ /^\@(.*)$/ ? ui_link("edit_group.cgi?group=$1", "$1") : ui_link("edit_user.cgi?user=$_", $_) } @{$group{'members'}};

This is a simpler example than some, and they often span multiple lines. My sed-fu isn’t bad, but this one is gonna take me a lot more than a few minutes to figure out.

I’ll see if I can remember my login details for IRC, and will come hang out there to chat about it.

And, to put into perspective how much more complicated this conversion can look, this is the very next a href found in the edit_group.cgi file:

$label = sprintf "%s\n", &urlize($m->{'dir'}), "group", &urlize($in{'group'}), $m->{'desc'};

I’m having a hard time reasoning that one out by hand! (Which may be what needs to happen for more complex examples like this…if we ended up with, say, 100 instances that have to be updated by hand instead of thousands, that’d still be a big win. But, that would mean the sed or perl script that does the automated substitution would need to recognize when it was out of its league and needs to skip this particular a href tag. I think this problem is actually well above my pay grade when it comes to regexes.

And, just for reference that example might become something like this (and this is what I’m about to check in):

$label = ui_link("edit_acl.cgi?" . "mod=" . urlize($m->{'dir'}) . "&group=". urlize($in{'group'}), $m->{'desc'}) . "\n";

The sprint isn’t really useful since ui_link leads to simpler code. The “\n” gets a little weirder looking, since it hangs off the end outside of the function. But, the a href bit gets shorter and somewhat clearer. We plan to clean up the ui-lib.pl in the Webmin 2.0 branch, but for now, we just want to get this theme fully functional and out the door!