Hi all,
I hope I'm doing this right, as it's my first time "posting" to a (development) mailing list. Let me introduce myself first; I'm Rachid (Saiyato on the forums) and I've been working on a new WUI theme, right now it's a bit bloated compared to the other skins, but it also features a lot; especially in terms of icons. I'm not a developer by profession, but I do understand some languages (C#, python, perl, javascript), the only problem is that I lack pattern knowledge, which means my code might not be a neat as I would like it to be. So please do correct my erroneous code when you see it 😉 I do strive to use as little code as possible and combine/re-use portions, as well as google for the best options (if I can find the right keywords). If you have any questions, don't hesitate to contact me, I live in the Netherlands, so Nederlands, English or Deutsch is fine.
As for the WUI, I used the bootstrap/adminlte framework, which was fairly easy to implement, I threw in some fonts for icons, so it's quite easy to fancy-up your config pages. As this point I did implement an override script for some parts of the existing UI's, this way I could 'integrate' those pages better, but feel free to provide me with better ways/tip 'n tricks.
As you might see I'm struggling with naming... Pascal, camel... all low... What should I do best in the IPFire ecosystem?
The attached screenshot give an impression of the UI, I did remove the map though... it caused all sorts of resizing issues and I'm not sure what kind of reporting actually makes sense on the dash. So that's still an open issue. I uploaded the whole lot to github (https://github.com/Saiyato/ipfire-skin-dashboard) and created some issues for known problems, it also features an installation script, which automatically sets the skin (~/main/settings[@THEME]). Since it's bootstrap, it will resize on phones and still remain responsive and modern looking.
Most of the values are displaying real info, I used various cgi's to copy code from. The only dummy values are the statistics box (since I'm not sure what makes sense to show there) and guest wifi (maybe someone will make an addon for that, right now it's not supported out-of-the-box, correct me if I'm wrong).
Happy holidays to all and a happy new year in advance!
Cheers, Rachid
PS: something went wrong attaching the images, so one attachment might be corrupt, mea culpa.
Hello Rachid,
Thank you for writing and apologies for the late reply from me.
Although many people have talked to me about your email in person, nobody had the time to respond.
On 24 Dec 2018, at 10:32, Rachid Groeneveld rachidgroeneveld@hotmail.nl wrote:
Hi all,
I hope I'm doing this right, as it's my first time "posting" to a (development) mailing list.
Welcome :)
Let me introduce myself first; I'm Rachid (Saiyato on the forums) and I've been working on a new WUI theme, right now it's a bit bloated compared to the other skins, but it also features a lot; especially in terms of icons. I'm not a developer by profession, but I do understand some languages (C#, python, perl, javascript), the only problem is that I lack pattern knowledge, which means my code might not be a neat as I would like it to be. So please do correct my erroneous code when you see it 😉 I do strive to use as little code as possible and combine/re-use portions, as well as google for the best options (if I can find the right keywords). If you have any questions, don't hesitate to contact me, I live in the Netherlands, so Nederlands, English or Deutsch is fine.
English is perfect.
As for the WUI, I used the bootstrap/adminlte framework, which was fairly easy to implement, I threw in some fonts for icons, so it's quite easy to fancy-up your config pages. As this point I did implement an override script for some parts of the existing UI's, this way I could 'integrate' those pages better, but feel free to provide me with better ways/tip 'n tricks.
As you might see I'm struggling with naming... Pascal, camel... all low... What should I do best in the IPFire ecosystem?
I usually do the all_lowercase_and_underline_format. Some legacy code UsesTheCamelCaseNotation.
The attached screenshot give an impression of the UI, I did remove the map though... it caused all sorts of resizing issues and I'm not sure what kind of reporting actually makes sense on the dash. So that's still an open issue. I uploaded the whole lot to github (https://github.com/Saiyato/ipfire-skin-dashboard) and created some issues for known problems, it also features an installation script, which automatically sets the skin (~/main/settings[@THEME]). Since it's bootstrap, it will resize on phones and still remain responsive and modern looking.
Most of the values are displaying real info, I used various cgi's to copy code from. The only dummy values are the statistics box (since I'm not sure what makes sense to show there) and guest wifi (maybe someone will make an addon for that, right now it's not supported out-of-the-box, correct me if I'm wrong).
My question would be: Where are you going with this? You have added a new dashboard which looks modern and so on. The entire IPFire UI is very old though and I am not sure what can be achieved with pure CSS to make it look any better. That is works on mobile is nice, but not a priority.
So, what do the old pages look like?
We have some ideas for an entirely new design on the artwork mailing list. Have a look. I think this already has many similarities.
Best, -Michael
Happy holidays to all and a happy new year in advance!
P.S. Happy New Year!
Cheers, Rachid
PS: something went wrong attaching the images, so one attachment might be corrupt, mea culpa. <ipfire_new_skin.png><ipfire_new_skin_phone_menu_open.png>
Hi all,
I must say I still have to read into the artwork thread, I've been wrapping up some loose ends on the basic dashboard page. It now features the possibility to add widgets and re-arrange them, the widgets are loaded from a SQLite db, not sure if flat config files are any better though. Tinkerers will be able to easily add widgets in the db (use any SQLite management tool). I've wrapped the widgets in packages, which are loaded dynamically, hence the only requirement to add them to the db and placing the package files in the correct directory: /srv/web/ipfire/html/themes/dashboard/include/widgets.
While it seems like a little bump, I did change quite a lot. Anyways, I've been thinking and maybe I ought to tend to IPF3 instead and work on that WUI (if I still want a dashboard).
As for the old pages question, they fit in the new framework, but they have a lot of inline styling, which makes it a little difficult to fit them into the theme. Unless you say those pages are quite static, then I could take a look at it. I would only be editing the layout parts, so functionality shouldn't be impacted.
Finally the big why, I wanted the most basic info on one page and if possible have it look nice as well. So basically I want to have some sort of status report of the instance and place widgets of info that I find interesting on the dashboard. This would enable me to see what's happening in one glance at the dash.
There is still one bug, the graphs are not showing properly, they seem to be limited to 300x300 in the dashboard skin. The rest of the content seems to be showing in the correct order, the styling is just not suited for this full-screen skin.
However I agree, it doesn’t add much functionality, so it's basically just because I want a fancy dashboard. 😉
Have a good evening all.
Cheers, Rachid
-----Original Message----- From: Michael Tremer michael.tremer@ipfire.org Sent: maandag 7 januari 2019 15:13 To: Rachid Groeneveld rachidgroeneveld@hotmail.nl Cc: development@lists.ipfire.org Subject: Re: New bootstrap/jQuery WUI theme - based on adminlte
Hello Rachid,
Thank you for writing and apologies for the late reply from me.
Although many people have talked to me about your email in person, nobody had the time to respond.
On 24 Dec 2018, at 10:32, Rachid Groeneveld rachidgroeneveld@hotmail.nl wrote:
Hi all,
I hope I'm doing this right, as it's my first time "posting" to a (development) mailing list.
Welcome :)
Let me introduce myself first; I'm Rachid (Saiyato on the forums) and I've been working on a new WUI theme, right now it's a bit bloated compared to the other skins, but it also features a lot; especially in terms of icons. I'm not a developer by profession, but I do understand some languages (C#, python, perl, javascript), the only problem is that I lack pattern knowledge, which means my code might not be a neat as I would like it to be. So please do correct my erroneous code when you see it 😉 I do strive to use as little code as possible and combine/re-use portions, as well as google for the best options (if I can find the right keywords). If you have any questions, don't hesitate to contact me, I live in the Netherlands, so Nederlands, English or Deutsch is fine.
English is perfect.
As for the WUI, I used the bootstrap/adminlte framework, which was fairly easy to implement, I threw in some fonts for icons, so it's quite easy to fancy-up your config pages. As this point I did implement an override script for some parts of the existing UI's, this way I could 'integrate' those pages better, but feel free to provide me with better ways/tip 'n tricks.
As you might see I'm struggling with naming... Pascal, camel... all low... What should I do best in the IPFire ecosystem?
I usually do the all_lowercase_and_underline_format. Some legacy code UsesTheCamelCaseNotation.
The attached screenshot give an impression of the UI, I did remove the map though... it caused all sorts of resizing issues and I'm not sure what kind of reporting actually makes sense on the dash. So that's still an open issue. I uploaded the whole lot to github (https://github.com/Saiyato/ipfire-skin-dashboard) and created some issues for known problems, it also features an installation script, which automatically sets the skin (~/main/settings[@THEME]). Since it's bootstrap, it will resize on phones and still remain responsive and modern looking.
Most of the values are displaying real info, I used various cgi's to copy code from. The only dummy values are the statistics box (since I'm not sure what makes sense to show there) and guest wifi (maybe someone will make an addon for that, right now it's not supported out-of-the-box, correct me if I'm wrong).
My question would be: Where are you going with this? You have added a new dashboard which looks modern and so on. The entire IPFire UI is very old though and I am not sure what can be achieved with pure CSS to make it look any better. That is works on mobile is nice, but not a priority.
So, what do the old pages look like?
We have some ideas for an entirely new design on the artwork mailing list. Have a look. I think this already has many similarities.
Best, -Michael
Happy holidays to all and a happy new year in advance!
P.S. Happy New Year!
Cheers, Rachid
PS: something went wrong attaching the images, so one attachment might be corrupt, mea culpa. <ipfire_new_skin.png><ipfire_new_skin_phone_menu_open.png>