New Virtualmin Bootstrap theme development github

Developers
1

Howdy all,

For historical reasons the Bootstrap theme development I’ve been working on has been happening in our private Virtualmin repository. There’s no good reason for that…it’s always been planned to make it Open Source under the same GPL license as Virtualmin GPL (and, potentially under the same BSD license as Webmin, if/when it becomes the default Webmin theme). So, I’ve made a new repo at github for theme work.

The theme is probably 80% finished, and is almost usable. Kinda.

See the README for discussion of what’s broken, and the WISHLIST for the list of tasks that need to be completed before this theme can be used for all of the core Webmin modules.

If you have some web development skills (HTML, JavaScript, and Perl) and want to help push this thing to completion, grab it an have a look!

Note that bug reports are not useful yet, so simply testing isn’t a useful action yet (so much doesn’t work yet, and so many things are simply unimplemented functionality that effects dozens or hundreds of elements, that bug reports aren’t going to be actionable information). But, if you can help fix the remaining big issues, please have at it!

Here’s the link:

https://github.com/virtualmin/virtualmin-bootstrap-theme

2

With a bit of great work from user DarkSoroush, the theme is much closer to being usable (the one remaining really big show-stopper in the theme itself that I was unable to fix has now been fixed), and it’s now in a state where it mostly needs a whole bunch of polishing and Webmin needs to have ui_lib conversion completed for stuff that breaks in a single-page app design.

I’m poking at re-organizing the Virtualmin menu a little bit based on suggestions we received during earlier discussion of UI improvements, as well as moving some more things into the upper bar rather than the left-hand menu (System Statistics is useful in all modes, Webmin/Virtualmin/Cloudmin, and so will probably go into the top menu bar, for example).

I’m still kinda overwhelmed at all of the code changes that are needed in Webmin itself to make this theme work completely…it’s ongoing, and Jamie has been doing updates with every new release. But, there’s still a long way to go. We will likely do an alpha release in a week or two that is designed only for use in a Virtualmin environment (ignoring any Webmin modules that are unlikely to be used in a web hosting system)…but, even that’s gonna take a monumental effort.

3

Hi Joe,
I can see that you updated read me file. Great

There is one thing that I didn’t understand, you said that back button doesn’t work very well, can you give me an example? A page in virtual min that has this problem so I can take a look at it? Cuz I failed to find any page with problem. :slight_smile:

4

I separated right and left panel by using two different scroll bars:
http://awesomescreenshot.com/0b92xabp81

I don’t know if this fits in your ideas for this theme but this was what I thought it was meant to be. Fortunately we can change it any time.

Other than that, I also think that we need to use Browser’s History API at least for right panel. But I will continue to fix back button’s problems one by one for now till then.

5

I’d rather we not replace the browser default scrolling behavior. I see the need for handling scrolling of the left menu, however, so I understand why you’ve gone this direction (it does solve a real problem)…but, replacing the browser default scroll isn’t the way to do it. Maybe we should rethink the left hand menu in some kind of way to insure it never needs to scroll…locking it, so that scrolling only makes the right div scroll (top menu can stick around, too). I’m not sure how to go about that. It’s already an accordion, so can’t expand a huge amount, but it’s still possible to pop it out large enough to require scrolling on smaller screens.

I was gonna say, let’s go see how Google solves this problem in GMail, but they seem to be using something similar…though it has native scroll bars, somehow. I’ll do some reading to see what they’re doing.

As for back button, yes, the problem is that we have no history. It’s not a show-stopper, but it’s annoying.

Edit: Found this link about how to get a scroll bar like GMail…seems to be a reasonable option, if I’m understanding it? http://www.dreamincode.net/forums/topic/242846-floating-menu-bar-like-gmail/

This would give us native scoll bars, but perform the same function as what you’ve done. I think. If we set both left and right divs to position:fixed.

6

Problem is not technical, we can change it in any way we want.
Problem is look and functionality. I also prefer default scroll bars but they are ugly in middle of page (for left menu).

What Google did with this problem was hiding it when mouse is not in left panel and showing it only when user wants to select something in there. If we found no other way to solve this problem we better at least do what Google did and hide the scroll bar of left panel when not needed.

The only other solution that I can think of is changing accordions style we used in left panel. Something like this:
http://www.shape5.com/demo/bridgeofhope/bridgeofhope2/images/accordionmenu.jpg

In this case we can move the scrollbar inside the menu and only for submenus. It is much more acceptable.

Then we need to think and find a way for phone’s browsers.

I also tried to use history api to save our states in my fork. You can take a look before I merge it to the main repo. I think we also need a “dev” branch for repo even though project it-self is in developing phase.

7

There seems to be a fundamental issue with loading pages. If I do a package update it hangs with no update until after its done all updates due to the ajax. Because of this you could have it be loading for 30 minutes.

8

About @pcfreak30’s problem,

Webmin’s core don’t expect loading via Ajax. It believes that user’s browser can show the data even before finishing of sending process. This is a problem for us.

In Javascript part, we CAN read the data before completion of sending process via XMLHttpRequest2 (>=IE10, other modern browsers) and XDocumentRequest (>=IE8) in pretty much all browsers (we need to write ajax part ourself and forget jQuery in this case. not a problem and easy task) except for IE7 and any other older version of IE which we only can do what we currently do.

But at server side we need some changes as well. We need to send like 2kb of random or empty data (space or any other) for XMLHttpRequest2 and XDocumentRequest to work like this. I dont know if this is hard or simple as I am not familiar with webmin’s core code or perl very well.

But any way, even if we do this, it is not a real solution. The correct way is to edit webmin’s core and make these requests ajax friendly which I believe is a hard and time consuming work.

9

The scrolling change you made looks great! We may want to fiddle with the way the right div padding/margin is set to make the right scrollbar hit the side of the browser, but it’s not bad as it is now.

Yes, phones right now are non-functional, as the menu behavior doesn’t fit the responsive design (right now, it shrinks down into a menu, but then that menu doesn’t actually work right, and because it takes the whole screen, the user can’t see that the menu does anything at all without scrolling).

I need to figure out how cherrypicking of merge requests works. I know Linus designed git to handle the situation well, but I have never used those features…that would resolve (maybe) the need for a dev branch beyond whatever you’re working on in your local repo.

10

Webmin can already send data in little sips, for long running processes (and does so for things like package updates). I don’t know how to make that work in a single page AJAX app, however. It was low on my priority list (since so many other things are broken), but now that some of those bigger problems have been resolved I can take another look.

In most cases, if Webmin core needs to be modified in a single location (like the web server needs to handle some other HTTP method or feature or something), we can pass it to Jamie and it’ll likely get done in a few hours. The problem situations in Webmin core are with things that require a huge number of changes…those are the things that are gonna be problematic for getting the theme rolled out to everyone, and the things that there is no easy solution for, except slowly plodding through and fixing the bits that aren’t compatible with a single page app (like links being relative and hard-coded in the modules instead of using the ui_link function, or similar theme-able function).

11

  1. Yes it does send the data in little sips. But use one connection for sending data. Better design is to send the result in different connections (made by client). For example client ask each 5 sec for what happened since the first request. I know this is probably hard to implement now. So the second best thing we can do about it is to keep the current design but add 2K padding to all AJAX requests. Can we do that? adding 2K of empty data before sending anything? Then I can modify the Javascript part and solve this problem.

  2. I have a question. There are two css files, theme.css and webmin.css. I want to know what you had in mind for these two files?

  3. We need to change select all / select none and invert selection code. I may be able to fix them in JS but correct way is to fix the problem fundamentally. I think that you can fix it by a simple search and replace.

  4. I think that we need to merge left menu with top menu in phones somehow. Or if not possible we need to find a way to hide it.

  5. Just for info, what each of these files do: right.cgi, left.cgi and theme.pl

12

Also how are href=“javascript:blah” links supposed to be handled. Im going and converting to ui_link via regex on the webmin git. Presently I have 394 more occurrences to fix. Regex is a powerful thing but mine are getting complex for doing it.

If anyone is interested to see the complexity: http://pastie.org/private/bwkpad09ctmer9hnij48na

The script is crude but works.

13

Github webmin issue for ui_links: https://github.com/webmin/webmin/issues/155

14

  1. webmin.css is deprecated in this theme and will be going away completely. theme.css will be the bits of css we need in addition to what bootstrap provides. We’re trying to not set colors/fonts and other stylistic elements in our css, since the Bootstrap theme overlays wouldn’t look right anymore if we were doing significant styling in our theme.css. So, try to use bootstrap classes for anything stylistic. If that’s not possible, we’ll need to probably come up with some way to add sass to the toolchain to autogenerate all of the overlays, as well (which I’d rather not do).

  2. Yes, all of the Webmin JavaScript needs to be killed off. Can’t be killed in Webmin core, until themes all support not having it there. Which means, Webmin 2.0, and for now, we have to modify it in the theme.pl.

  3. Yes, a new menu style is the way to go…just adding the top menu items into one big menu, maybe.

  4. right.cgi is the system status page (the first page you see in the right css pane when loading up Webmin/Virtualmin), left.cgi is the left-hand menu (which includes code for Webmin, Virtualmin, Cloudmin, and Usermin menus…though the latter two are probably completely broken right now, as I haven’t been testing them; my focus is on getting everything for Virtualmin working, then Cloudmin, then the rest of Webmin, and finally Usermin), and theme.pl is the ui overlay functions.

theme.pl is the most interesting of them, probably. When a UI element is on the screen anywhere in Webmin/Virtualmin, there is a ui_ function called to create the HTML for it. So, a bunch of tabular data in MySQL module would call one of the ui_table functions. If there is a theme_ui_table overlay function available, it’ll be called instead of the standard Webmin ui-lib.pl function.

It’s worth mentioning that there’s 15+ years of old code in there, from several different layers of UI customizability in there (from before CSS existed, even), and from a lot of odd little detours Jamie (and me, later, when I started helping with the look and feel of Webmin) has taken over the years to achieve a variety of things (like highlighted rows, sortable tables, various colors of type for various purposes, etc.).

In many cases, when we talk about things that need to be changed “in Webmin” it is often actually possible to change it in theme.pl, which is almost always easy and quick (and, if you’re not familiar with Perl, I can always help with that part…I’m much better with Perl than JavaScript). But, then again, there are a number of things in Webmin that aren’t using ui_ functions…and those things have to be updated to use ui_ functions, or they simply won’t be something we can do much with, and can’t cover effectively with the new theme. This is the hard/long work that Jamie has been working on, and it sounds like pcfreak30 is now also working on (but I haven’t looked at his branch yet to see how that’s coming along). There will be other areas that need similar large efforts to convert…I just don’t know exactly what they are yet. Tables probably are gonna be a real bear, in the same sort of way as links.

I mentioned Webmin 2.0 above, so I’ll explain what that is (aside from “the next major revision of Webmin”). Jamie has never broken backward compatibility with modules or themes in Webmin in any significant way in its entire history. That means there’s a lot of weird stuff in there. It’s extremely modular, but there’s still some technical debt when having so much complexity in the repo. Webmin 2.0 will allow compatibility to break. It won’t be an intentional breakage, but the reality is there’s a lot of stuff that needs to go away and be re-factored to move forward at a good clip on a better user interface. So, that’s where we’re going. Webmin 2.0 will only promise compatibility with core modules, core themes, Virtualmin, and Cloudmin…all the other modules and themes out there will need to be updated (in small ways, probably). Security patches will be maintained in Webmin 1.x for a time after 2.0 is released. (And there will be a few months of 2.0 devel releases before a production version is released.)

15

That’s missing a ton of instances of this problem, unfortunately (if that were all we had to fix, it’d be done quick!). What command line are you using to come up with this list? Using ack with this command:

ack --type=perl “a href”

Brings back 950+ results. But that’s probably not all of them (and will have some that have already been fixed, as Jamie’s been working on it in his spare time for a few weeks now).

The regex is looking promising…though I’m nervous about unleashing it on the whole repo (without a human checking everything it does before sending it out in a Webmin release). But, if it can be made to only try to tackle the ones it understands, and if we can then come up with anothe regex to match what it hasn’t fixed, then it can get smarter with time.

16

The regex isnt one size fits all. I have been finding different cases of links and making specific regex’s to match ones with high numbers. The rest that are more complex can be manually changed.

I also used grep ‘a href’ -r . under the webmin GIT to scan for occurrences. I have had to manually scan every commit for errors too.

I have gotten a few hundred so far.

17

when will this bootstrap theme be released for development websites???

18

It is “released” in the sense that the code is available. It just is not fully functioning.

There is no ETA on it being “finished” and that is why it was put on Github.

19

Dear guys, hi!

I have just released new update for my Authentic theme and now it supports Virtualmin as well. Come and try please:

GitHub:

Best regards,
Ilia

20

Hi llia, just tried the new theme on a test server, well done, looks very nice.