BOUNTY: Web GUI reprogramming

[iFloris]

@kelsen:

Hey guys, i'd like to know if someone tested this new interface, I've added the slide menu  effect right now.

yesterday I tried to get it working but I found it hard to see what files needed to be replaced. Might give it a shot again next week because it sure looks great in your screenshots.

[kelsen]

I've made the changes to my repository https://github.com/kelsen/pfsense/tree/metrolabTheme it must be easier now.

[Clear-Pixel]

Anyone testing the Metrolab Theme?

If so, any bugs?

[JeGr]

I'd really like to test, but as with the GIT repository I'm not quite sure, how to install it right (and to only install the theme without any unnecessary parts). It would be a real blast, if that could be packaged and installed via the package manager…

[iFloris]

@JeGr you only have to look at the modified dates; everything modified yesterday (mostly in /usr/www) is related to the new theme.

[JeGr]

Yeah, the "mostly" is where it's going to blast. I really like git. But it's just not "practical" for me to go through your repository to cherry pick files i hope will be the right ones. I don't even know if the theme required changes to other templates or files outside of /usr/www, so sorry, that's just not usable for me while not developing on the project myself and having a GIT clone of my own I can check against. If you could provide an archive with the required files against a default 2.1-release installation base, I'll be happy to test them on my lab devices, as the theme(s) in this thread look really promising and awesome ;) but I don't have the time to copy and select single files, sorry :)

That's why I was hoping it could perhaps be done with a package installation routine.

[Clear-Pixel]

I have to say also its not efficient at all for everyone that wishes to test, have to pick through the files on Git and hope everything is in order.

What the creator could do for the time being is simply place the files which have been modified in a zip file and upload it to a drop box somewhere …... the tester than can upload and overwrite the files in pfsense in the appropriate directory's.

If a zip is prepared I will do some testing before I do a fresh reinstall of Pfsense in a few weeks.

I would also like to give a wise suggestion to charlie0440 and Kelsen ...... You two need to work together and merge your creations together even on Git ...... If your looking for recognition you have it ......  but merge the branches ....... A Team can achieve so much more working together.

Linux is a good example of similar problems ....... If Linux had not branched out into so many distributions, Linux distributions would be much further ahead today than what they are now.

[charlie0440]

@Clear-Pixel

I agree a zip is best for testing but we also need github to see what has been changed.

In regards to working together, I believe we are after 2 different things. I was not working on a nice looking fancy theme (that was the original goal). I moved my goal to trying to figure out a way to integrate bootstrap into pfsense existing GUI without breaking the existing themes. Which is where I believe I have hit a brick wall. It works fine (my version) but to make it better would mean editing a lot of the existing code which would probably effect the other themes, I hope to revisit it soon, been really busy recently.

I haven't tested or properly looked at Kelsen code but I'm pretty sure it breaks the other themes. Perhaps Kelsen or someone who has tried it can confirm? Also I suggested a few posts back that he forked one of my branches from my repo as it would make the most sense as he was working off of my theme, but he choose pfsense master.

[kelsen]

Here is the files needed https://www.dropbox.com/s/24c2wv45mdk769w/metrolab.tar.gz and a script to automate the process https://www.dropbox.com/s/7448ymuughld7f9/theme.sh …
Uncompress and run the script.
As it is unproductive, please note the repository for updates.

I haven't tested or properly looked at Kelsen code but I'm pretty sure it breaks the other themes. Perhaps Kelsen or someone who has tried it can confirm?

Completely!

Also I suggested a few posts back that he forked one of my branches from my repo as it would make the most sense as he was working off of my theme, but he choose pfsense master.

This implies something? Maybe I can do it again and fork your branch, if it's needed.

[JeGr]

Thanks, I'll gladly try it on a lab-installation

[Clear-Pixel]

@kelsen & charlie0440
Forget about the issue that it breaks the other themes for now ….. Make Metro the new Modern Standard.

---

@charlie0440
Your script adding and subtracting column rows

&

@kelsen
Tweeter boot strap with vertical expandable menu

With both combined why would you want any other theme? The tweeter boot strap kelsen setup you can change the color theme.

In the majority of all cases the most productive menus are the expanding vertical side menu ...... you cant defeat hard facts.

If this can be accomplished set it up as a package. If the user wishes to convert back to the standard Pfsense themes ....... have the package upon installing to backup the original Pfsense files and a restore button to remove the custom Metro theme and reinstall the original Pfsense files if the user has issues.

[JeGr]

I have to agree with Clear-Pixel here, if the theme is awesome on it's own (and can easily be customized in terms of an e.g. own logo and a color scheme), why want another? The screens from Kelsen's ans Charlie's efforts seem like such is the case, so I fully agree to perhaps deliver that as a package that - on uninstall - reverts back to the original theme files and structure.

I can remember at least one or two packages, that were built the same way in 1.2.x times. If you installed it, it would knowingly "break" another feature (more or less it replaces it) and on uninstall recovers the old feature. AFAIK the TinyDNS package works that way (or worked) and in the old times before there was the dashboard, you could install the dashboard "over" the status page and it was replaced by that. You even had to reinstall if you wanted the old status back. And with all the capabilities of scripting now, making a backup of certain files should be possible - as long as other packages don't break them.

That's another point: Kelsen/Charlie do you know if your theme(s) work with additional packages that bring their own config pages?

Greets
Jens

[charlie0440]

ok I see. I should be able to make the changes tonight. I'll make a PR to kelsen repo and he can update the zip.

I'll also list some other files he should try adding from master to the zip which might improve the theme (work already committed to master which didn't make it into 2.1, but will be in 2.2)

[charlie0440]

ok so this should have been a 5 minute job, but I cannot get this to work. Not sure if it is caused by some changes you (Kelsen) has made. I'm gonna leave it for you to investigate.

The index.php file you have inside your zip is from pfsense2.1 not master, therefore is needs some changes for this to work. loader.js, the other file required for multiple columns is already good to go.

The changes to index.php you can see in this commit: https://github.com/CharlieMarshall/pfsense/commit/cafb7dfe782cf9677ea5e24ba8dd8f9c014c2f91 & this one https://github.com/pfsense/pfsense/commit/bb38e8e5f970456e3430cb3a888a1abba5aa2b3b

the entire PR for your reference is here: https://github.com/pfsense/pfsense/pull/682

at this point it should be working, but it is not. The buttons are displayed fine but the columns are not connected together ie you can't drag and drop (jQueryui).  I'm not sure if its because there seems to be multiple jquery imports which may be conflicting:

I suspect this a jquery, jqueryUI issue that you'll have to hunt down.

–---------
On another note, I guess unrelated but you never know: there are prototype errors on the console:

Uncaught TypeError: Object [object Object] has no method 'dispatchEvent' prototype.js:5734
fire prototype.js:5734
_methodized prototype.js:438
fireContentLoadedEvent prototype.js:5820

You may have better performance if you add this commit: https://github.com/CharlieMarshall/pfsense/commit/5fa152f6f6b47054e7a04e9d79b94eab2916594c which fixes a conflict between bootstrap & prototype. This fixed some wierd behaviour on my theme.

Also you might want to try this commit which changes the progress bars on the system information widget: https://github.com/pfsense/pfsense/pull/772

Kelsen if you have time you could try applying your changes to this base https://github.com/CharlieMarshall/pfsense/commits/newTheme you would also have to take the index.php from there as well then you could find out what breaks the columns as you apply your code bit by bit.

–-------------
Finally your script to install, You need to cp the theme folder first and then apply the theme before copying the rest of the files, or at least thats the only way it worked for me.

[kelsen]

I managed to make the columns work but, somehow it's not saving the preference, may you (charlie0440) know why?!
https://github.com/kelsen/pfsense/commit/4cd4376bc90058c8830c9e406ca26e156b035fc4

You may have better performance if you add this commit: https://github.com/CharlieMarshall/pfsense/commit/5fa152f6f6b47054e7a04e9d79b94eab2916594c which fixes a conflict between bootstrap & prototype. This fixed some wierd behaviour on my theme.

There is no /usr/local/www/javascript/bootstrap.js

Finally your script to install, You need to cp the theme folder first and then apply the theme before copying the rest of the files, or at least thats the only way it worked for me.

That's right, I'm sorry if I have broke someone's pfSense.

[charlie0440]

@kelsen:

There is no /usr/local/www/javascript/bootstrap.js

I mean try making those changes to the bootstrap file in your case:
/usr/local/www/themes/twitter_bootstrap_fs/assets/bootstrap/js/bootstrap.min.js

[kelsen]

fine, but there is no line like yours in bootstrap.min.js
About the problem of saving the columns, do you have any clue what may be?

[charlie0440]

@kelsen, Ok think I found it. You'll using a too old version of jQueryUI, you need to update it. I tried it with 1.9.2 download here: http://jqueryui.com/download/#!version=1.9.2

–---------

On another note, Kelsen if you have based this on my previous work here is a more up to date version. There's quite a few files in there but a lot of the cosmetic changes have already been commited into pfsense master so I have included those. And for anyone else wanting to try this just unzip to your pc and copy the files to pfsense root "/" folder. The files are in the correct subfolders so a simple:

download zip > https://dl.dropboxusercontent.com/u/12367642/myTheme.tar.gz
tar -xvzf myTheme.tar.gz
cd myTheme/
scp -r * root@pfsenseIPaddress:/

#example:  scp -r * root@192.168.1.1:/

Then apply the theme "twitter_bootstrap_fs" in the general settings page. I recommend you test this on a virtual machine, boot the 2.1 live CD, login and enable SSH then perform the above steps.

Edit: some eyecandy: http://imgur.com/a/WK6re

Edit 2: Its not perfect but you get the idea.

Edit 3 (final one): Updated zip - Added my other theme "pfsense_ng_fs" (its not responsive but fullscreen with multiples columns on the dashboard)

Edit 4 (grr): Updated zip - Added fix to display "Diagnostics: Authentication" page (commit: https://github.com/pfsense/pfsense/commit/8ad84ebb49f86e791427110233382bd5e804d503)

[JeGr]

As it seems to me: you two (Kelsen/Charlie) should definetly work together and join forces on this, not only to prevent new themes from breaking old ones (if possible), but also to perhaps deliver a new default one or at least a framework/the groundwork for a theme infrastructure so other themes may be done without breaking others so they can be installed as packages :) Thumbs up!

[c0urier]

How can I fix, so that I can use the columns. I can't add any widget except in the first row.