BOUNTY: Web GUI reprogramming

charlie0440

A little update…

The theme I created "pfsense_ng_fs" was merged into master last month, unfortunately this was too late for 2.1 but will be in 2.2 and once 2.1 is released everyone can test it via a nightly build ;)

Since the merge I have made a small change to the theme and a number of cosmetic changes to the dashboard / widgets to improve how they scale with the theme ie when creating more or deleting columns and some generic tidying up in places. List of changes available here.

On my 1080p screen 6 columns is in my opinion the viable maximum number of columns but 5 gives me the most usability. I coded it so that the maximum number of columns is 10 (this is obviously now hardcoded into pfsense) mainly to accommodate users with a 2k and above screen resolution (lucky buggers). It is also written so any themes whose name ends in "_fs" can add/delete columns so more widescreen themes can be created. Any request for a theme to become full screen with additional columns? I assume the "pgsense_ng" theme is the most popular which mine was based on.

I suspect that all the existing widescreen packages will break with the changes committed to master (2.2) but then hopefully these will not be needed as pfsense core now has a widescreen theme.

All feedback welcome. But I guess I will have to wait until 2.1 is released first for major testing.

preview

View some more screenshots here > http://imgur.com/a/NMZOc

I realise this is probably not the best thread to post this in, but this is where the discussion started. I have not made the changes as set out in this thread and am therefore not looking for the bouty. Just helping out where I can :)

Edit: If you haven't tried the theme you create / delete new columns from some buttons under the add widget buttons. View the screenshots to understand what I am talking about.

c0urier

~~Since I had to recover to a previous backup, because the newly released August 6th package broke/stopped all IPv4 traffic. I've noticed a funny thing when recovering:
2.1-RC0 (amd64) - built on Wed Jun 12 06:19:17 EDT 2013

Then I reapplied the package and the gateway keeps counting up when I refresh the page. The Normal ms is: 12.4ms to HEgw and 1.2ms to WAN_DHCP.~~

Related to apinger.

// c0urier

pfSense_gateway.png_thumb

jmelett

Thanks a lot charlie0440 and everyone else who contributed to the GUI redesign. Is the "Twitter Bootstrap" version on a git-repo somewhere? I'd like to continue (or fork it) if that's fine.

charlie0440

no I gave up on the bootstrap. It worked fine, but I only see it viable as a package and it effects the core. I did try integrating it as a theme but it was really hacky using loads of jquery to replace code. Your best bet is to find my last post in this thread about it with an attachment and work from there (http://forum.pfsense.org/index.php/topic,48140.msg334532.html#msg334532). Sorry its not on github so you can't even see the diff :(

Just had a quick flick through. I think the only changes in head.inc was adding bootstrap code:

guiconfig: I have no idea what I changed

fend.inc: I think I just changed the css on some divs

fbegin.inc: is where most the code was ie new menu structure, luckily I commented that one with a code block:
..........
You will find the script>bootstrap.min.js <script.. import="" line="" in="" there.="" i="" tried="" it="" various="" locations="" files="" but="" found="" only="" worked="" that="" one="" place!<br="">system_information.widget.php: I had to change the progress bars as the defaults ones didn't render properly

Sorry I can't be much help. I am looking for a little project to get involved, can't think of any more dashboard spring cleaning, so if you can think of some way to get this working with pfsense without ruining its core I'm willing to help. Good luck.</script..>

charlie0440

@jmelett and anyone else who wants to help. I revisited the twitter bootstrap theme today. I nearly have it sussed. Menus are working properly and are responsive. The only issue is that some tables are spilling over the window width. If someone wants to sort it out and fix it fork my repo branch newTheme:

https://github.com/CharlieMarshall/pfsense/tree/newTheme

Otherwise when I get some time I will look into it some more

kelsen

Hi @charlie0440, I've done some changes on your theme, take a look http://forum.pfsense.org/index.php/topic,67167.0.html

iFloris

@kelsen:

Hi @charlie0440, I've done some changes on your theme, take a look http://forum.pfsense.org/index.php/topic,67167.0.html

Looks really interesting!

charlie0440

yeah that looks sweet. I haven't had time to visit the theme I started. Is it working ie being responsive? I believe mine had an issue with the "Edit File page" & the "command page". Are you seeing these?

c0urier

Looks really good - Will you share it with us?

kelsen

@charlie0440:

I believe mine had an issue with the "Edit File page" & the "command page". Are you seeing these?

I still had not seen, "File Edit page" really had an issue, but is resolved.
@charlie0440:

Is it working ie being responsive?

I didn't saw much difference, maybe my computer is too weak to feel the difference.
@c0urier:

Looks really good - Will you share it with us?

Sure I will, just making some repairs like the one that @charlie0440 pointed.

charlie0440

can you commit your work to github so we can see/add to it

kelsen

here it is https://github.com/kelsen/pfsense .. I don't know how to work well with github, if something is wrong or missing, forgive me.

iFloris

@kelsen:

here it is https://github.com/kelsen/pfsense .. I don't know how to work well with github, if something is wrong or missing, forgive me.

thanks!

kelsen

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

c0urier

I tested it shortly but reverted back to the widescreen theme.

Is it possible for you to add the possibility of using several boxes besides each other like in the widescreen package?

kelsen

@c0urier:

I tested it shortly but reverted back to the widescreen theme.

Is it possible for you to add the possibility of using several boxes besides each other like in the widescreen package?

I think @charlie0440 already did it, perhaps he can pull it to my github repository.

charlie0440

yes I could add that. But really you should sort out your github, its really hard to see what you've done. I know you said your new to it, so heres what you should do:

First Delete your existing pfsense repo from github.

Second you need to fork a repo. Either pfsense master or one of my branches if thats what you've based your work on.

Assuming your cloning pfsense master go to https://github.com/pfsense/pfsense and click "Fork" this will create a pfsense repo for you. If you use mine click fork from my github webpage. This creates a copy of the repo for you to amend.

Now clone this repo to your PC ie git clone https://github.com/kelsen/pfsense.git

cd into the pfsense folder

Switch to a branch you based your work on via 'git checkout BRANCHNAME'

make a new branch to commit your changes to (git checkout -b myTheme). You shouldn't use master, master should emulate the fork.

Now edit the files that you have made. git add those files, commit them & push the files you changed (git push origin myTheme). Ideally use informative commit messages when you make commits, I like to make small commits, but your free to do as you like.

If you get that done. I'll add multiple columns.

Good luck

kelsen

Thank you for your tips.
I'll do that tomorrow.

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.