OPNsense Forum

English Forums => Development and Code Review => Topic started by: opnsenseuser on May 05, 2018, 07:32:10 pm

Title: Collapse Dashboard like on FreeNAS Beta UI ?
Post by: opnsenseuser on May 05, 2018, 07:32:10 pm
The new freenas beta-ui has a nice feature that I can imagine very well with opnsense, especially in terms of monitoring in which it would be a great advantage to have plenty of room on the dashboard. (see my screenshots)
Title: Re: Collapse Dashboard like on FreeNAS Beta UI ?
Post by: franco on May 06, 2018, 07:40:04 pm
Hello,

Yes, this was discussed a long time ago and would still be a nice addition even though it was closed because nobody worked on it:

https://github.com/opnsense/core/issues/83

We should always: keep defaults, make the collapse optional and easily accessible, maybe add an auto-expand on hover/click. Keeping only the symbols at the left would seem like a good solution for hover/click expand when needed.

I do like your theme work very much and would like to see some of these improvements integrated into the main theme in core in small iterations. What do you think? :)


Thanks,
Franco
Title: Re: Collapse Dashboard like on FreeNAS Beta UI ?
Post by: opnsenseuser on May 06, 2018, 08:11:38 pm
thank you for your trust. that's very nice of you. I really appreciate that.

I have to familiarize myself with the main core.
but since i work alone i would like to bring the two UI-themes first into the main project of opnsense and then i will approach the collapse problem carefully.
Martin supports me very much with the ui-themes and without his help I would not be so fast!

Collapse Dashboard -> I think I can do that.
best regards. :-)
Title: Re: Collapse Dashboard like on FreeNAS Beta UI ?
Post by: franco on May 07, 2018, 12:18:29 am
With the latest changes having dropped for os-theme-cicada I think with your ok we can release it as 1.0 in 18.1.8 to all users so it also shows in the firmware plugins.

os-theme-tukan should be merged soon, there was a review question open by Fabian, but I'm sure that'll also be merged not too far out.

If you have questions regarding the menu code you can drop them here. It's probably split between the static and MVC pages.... maybe best to pick the MVC code and we work on static integration when the MVC code is done and merged, otherwise it complicates the process. Sounds good?


Cheers,
Franco
Title: Re: Collapse Dashboard like on FreeNAS Beta UI ?
Post by: opnsenseuser on May 07, 2018, 05:48:20 am
could not sound better. I'm excited.lets do it like this. Big thx  :)
Title: Re: Collapse Dashboard like on FreeNAS Beta UI ?
Post by: opnsenseuser on May 07, 2018, 12:37:24 pm
The task is very nice but I would ask you to give me some time for it. I have to read a little bit and currently I do not have that much time.

I wanted to ask you if there is a change to integrate the tukan theme too at the next opnsense update?
Code technically they are ident

Thanks for your support.

best regards, rene
Title: Re: Collapse Dashboard like on FreeNAS Beta UI ?
Post by: franco on May 07, 2018, 06:39:45 pm
Hi René,

I've bumped os-theme-cicada to 1.0 as discussed:

https://github.com/opnsense/plugins/commit/ac2f2d4f59

os-theme-tukan was merged just now and will appear as a development plugin 0.1.

Take your time on the menu change. There is no rush. :)


Cheers,
Franco
Title: Re: Collapse Dashboard like on FreeNAS Beta UI ?
Post by: opnsenseuser on May 07, 2018, 07:12:25 pm
That's great. I thank you. Can not believe it. ITS ONLINE :-) -> You saved my day.
I hope "tukan" will soon be in production too.

I will do my best to integrate the collapse navigation according to your specifications best possible in opnsense.
I will inform you about any news!

big thanx! ;D

best regards, rene
Title: Re: Collapse Dashboard like on FreeNAS Beta UI ?
Post by: franco on May 08, 2018, 07:19:28 am
Keep in mind it'll take 18.1.8 to render these changes visibly in the online repository.


Cheers,
Franco
Title: Re: Collapse Dashboard like on FreeNAS Beta UI ?
Post by: opnsenseuser on May 08, 2018, 10:48:18 am
Yes, sure. Thank you
Title: Re: Collapse Dashboard like on FreeNAS Beta UI ?
Post by: opnsenseuser on May 10, 2018, 11:58:27 pm
With the latest changes having dropped for os-theme-cicada I think with your ok we can release it as 1.0 in 18.1.8 to all users so it also shows in the firmware plugins.

os-theme-tukan should be merged soon, there was a review question open by Fabian, but I'm sure that'll also be merged not too far out.

If you have questions regarding the menu code you can drop them here. It's probably split between the static and MVC pages.... maybe best to pick the MVC code and we work on static integration when the MVC code is done and merged, otherwise it complicates the process. Sounds good?


Cheers,
Franco

Hi Franco,

I'm just trying to find my way around the mvc and looking for the right file in which the navigation is located. I found three files there. I'm not sure which is the right one.

usr \ local \ opnsense \ MVC \ app \ views \ layout_partials \ base_menu_system.volt

or

usr \ local \ opnsense \ MVC \ app \ cache \ _usr_local_opnsense_mvc_app_views_layout_partials_base_menu_system.volt.php

or

usr \ local \ www \ fbegin.inc

Please do not be angry. I have to get used to the framework first. php, js, etc. I know, but with bootstrap, asp, etc. I have not done anything yet. this is new territory for me. But I'm totally interested. Can you help me?

Best regards,
René

p.s. i bought a book about bootstrap two days ago :-)
Title: Re: Collapse Dashboard like on FreeNAS Beta UI ?
Post by: franco on May 14, 2018, 10:07:27 am
Hi René,

> usr \ local \ opnsense \ MVC \ app \ views \ layout_partials \ base_menu_system.volt

This is the MVC menu template, yes, you want to adjust this one.

> usr \ local \ opnsense \ MVC \ app \ cache \ _usr_local_opnsense_mvc_app_views_layout_partials_base_menu_system.volt.php

This is the MVC cache file, it will be generated from the template above. This does not need to be edited.

> usr \ local \ www \ fbegin.inc

This is the static file, we will add collapsible menu support to this file together in a later stage after the MVC has been adjusted.


Cheers,
Franco
Title: Re: Collapse Dashboard like on FreeNAS Beta UI ?
Post by: opnsenseuser on May 14, 2018, 01:06:32 pm
Hi René,

> usr \ local \ opnsense \ MVC \ app \ views \ layout_partials \ base_menu_system.volt

This is the MVC menu template, yes, you want to adjust this one.

> usr \ local \ opnsense \ MVC \ app \ cache \ _usr_local_opnsense_mvc_app_views_layout_partials_base_menu_system.volt.php

This is the MVC cache file, it will be generated from the template above. This does not need to be edited.

> usr \ local \ www \ fbegin.inc

This is the static file, we will add collapsible menu support to this file together in a later stage after the MVC has been adjusted.


Cheers,
Franco


Thank you for your explanation and your help!

best regards
René
Title: Re: Collapse Dashboard like on FreeNAS Beta UI ?
Post by: opnsenseuser on May 15, 2018, 05:17:04 pm
Hi René,

> usr \ local \ opnsense \ MVC \ app \ views \ layout_partials \ base_menu_system.volt

This is the MVC menu template, yes, you want to adjust this one.

> usr \ local \ opnsense \ MVC \ app \ cache \ _usr_local_opnsense_mvc_app_views_layout_partials_base_menu_system.volt.php

This is the MVC cache file, it will be generated from the template above. This does not need to be edited.

> usr \ local \ www \ fbegin.inc

This is the static file, we will add collapsible menu support to this file together in a later stage after the MVC has been adjusted.


Cheers,
Franco

hi franco,

I have another question.

Is it possible to include or use a class or div of your own in the core or are you only allowed to use the classes or divisions of bootstrap?

best regards
rené
Title: Re: Collapse Dashboard like on FreeNAS Beta UI ?
Post by: franco on May 15, 2018, 07:38:00 pm
It solely depends on the problem it tries to solve. What are you trying to solve?


Cheers,
Franco
Title: Re: Collapse Dashboard like on FreeNAS Beta UI ?
Post by: opnsenseuser on May 15, 2018, 08:48:54 pm
It solely depends on the problem it tries to solve. What are you trying to solve?


Cheers,
Franco

Actually, I just wanted to know what's possible. I'm just still scouting and reading in the mvc matter.
I have already considered two approaches.

One option would be to hover an arrow next to or below the navigation bar. just do not know exactly where and how this should look.
the second possibility would be as in freenas a symbol in the headline to display. this would then reduce or enlarge the navigation bar.

for the symbol in the header definitely a own class or a div would have to be generated so that it can be positioned. the same probably applies to the arrow next to or below or above the navigation bar.

at least that's my current idea.

best regards rené
Title: Re: Collapse Dashboard like on FreeNAS Beta UI ?
Post by: franco on May 17, 2018, 08:26:23 am
If we need classes in CSS for reuse or vital components (like the menu) that's fine. If this is about an arbitrary page that needs better styling it's best avoided (exceptions apply for specific reasons).

Second option sounds sensible, there's also an "opnsense" header symbol to collapse the full logo to and we already have the menu icons and skip the text. Easier said than done, but I hope you get what I mean to say. :)


Cheers,
Franco
Title: Re: Collapse Dashboard like on FreeNAS Beta UI ?
Post by: opnsenseuser on May 25, 2018, 10:07:24 am
If we need classes in CSS for reuse or vital components (like the menu) that's fine. If this is about an arbitrary page that needs better styling it's best avoided (exceptions apply for specific reasons).

Second option sounds sensible, there's also an "opnsense" header symbol to collapse the full logo to and we already have the menu icons and skip the text. Easier said than done, but I hope you get what I mean to say. :)


Cheers,
Franco

I do not want to bother you for long. but maybe you can help me or give a tip!

I'm currently coding the navigation collapse for the navigation sidebar by opnsense.
After I have dealt with the Grid System of bootstrap like col-xm-12, etc. and I understood how bootstrap works, I wanted to test a very simple button in the head div of opnsense.
I know that it depends on the columns used, etc. whether and from what resolution, etc. things displayed or not displayed.

But now I have a problem, that I can not explain myself.

If I insert a button in the default.volt or in the base_menu_system.volt, it will only be displayed on certain pages. no matter where I insert this. when i click on dashboard, the button never appears, but when i click for example on service "web-proxy" or service "hello world" the button appears. Why? where do I have to start here? see my screenshots.

I want the button to appear on every page! actually I would like to do it like freenas!

I would be grateful for every tip.

Regards rene
Title: Re: Collapse Dashboard like on FreeNAS Beta UI ?
Post by: franco on May 29, 2018, 08:13:51 am
Hi René,

The button only appears on MVC pages, the dashboard and others are not MVC pages, you can see from the *.php at the end. This is normal and why I said please focus on one type of pages, we will fix the others when the time comes. This is not a blocker.

The other code is in /usr/local/www/fbegin.inc


Cheers,
Franco

Title: Re: Collapse Dashboard like on FreeNAS Beta UI ?
Post by: opnsenseuser on June 14, 2018, 09:06:19 pm
I just wanted to show you the current interstate of my sidebar project.

The sidebar is enlarged to the original sidebar in a mouseover. if you leave the area of ​​the sidebar with the mouse, it will be collapsed again and the content will be wider. so I think it was desired.

I'm not quite finished yet. There have to be some visual and small technical adjustments.
I'm not completely satisfied yet.

Technically I use a short javascript and the rest is unchanged with bootstrap or css.

If I have more news, I will post it here again.

best regards to the whole community! :-)
Title: Re: Collapse Dashboard like on FreeNAS Beta UI ?
Post by: opnsenseuser on June 16, 2018, 11:13:30 am
I opted for another solution, but I think it is better.

Here is a new intermediate.

regards rené
Title: Re: Collapse Dashboard like on FreeNAS Beta UI ?
Post by: fvanroie on June 16, 2018, 02:15:53 pm
Neat! That looks very cool indeed. Good job!
Title: Re: Collapse Dashboard like on FreeNAS Beta UI ?
Post by: marjohn56 on June 18, 2018, 01:59:24 pm
Very cool indeed... Nice work René 8)
Title: Re: Collapse Dashboard like on FreeNAS Beta UI ?
Post by: opnsenseuser on June 18, 2018, 05:38:29 pm
I have now put my idea in a nutshell.
I do not know if that is desirable at all, but it would be the logical progression for me if you want a collapsed sidebar.
What do you think?

see my screenshots
Title: Re: Collapse Dashboard like on FreeNAS Beta UI ?
Post by: marjohn56 on June 18, 2018, 06:02:12 pm
Well I like it... but that's just me. I'm easily pleased. :)
Title: Re: Collapse Dashboard like on FreeNAS Beta UI ?
Post by: opnsenseuser on June 18, 2018, 06:12:13 pm
Well I like it... but that's just me. I'm easily pleased. :)

thank you, Martin
I wonder if this is also what Franco and the community want, or should I just reduce the layout to the sidebar?

best regards, rene

By the way....this Sidebar is fully working
Title: Re: Collapse Dashboard like on FreeNAS Beta UI ?
Post by: marjohn56 on June 18, 2018, 06:30:11 pm
I'm sure Franco, Ad and all the others will chime in with their thoughts.
Title: Re: Collapse Dashboard like on FreeNAS Beta UI ?
Post by: opnsenseuser on June 18, 2018, 08:06:09 pm
Technical description:

With the arrow in the "head" area you can switch between the normal sidebar and the collapsed sidebar.

Currently you can select by hover the main menu and by clicking on this you get as usual in the next level->This is what i would like to change.
Would be very happy to serve the sidebar only by hover.
So also to reach the lower levels.

But to all left, all sublinks which have one or more sublinks have to get a visual support.
Otherwise you would have to select each link per hover to determine where there are more submenus.

Of course, I have also taken on the Tablet view, which is already integrated in opnsense, taken into account. So if the window size is smaller than a certain value, the arrow disappears in the head area and the Tablet dropdown menu button appears as before.

So what do you think franco? What do you think community ?

Please give me your thoughts and inspiration ?

regards rené

Title: Re: Collapse Dashboard like on FreeNAS Beta UI ?
Post by: franco on June 21, 2018, 10:51:50 am
Hi René,

I really like it!

The collapsible option is certainly best. We can store it in the browser session so it's remembered for all pages and also offer a default setting for normal or collapsed so it's that way always after login.

Are you ready for a PR? :)


Cheers,
Franco
Title: Re: Collapse Dashboard like on FreeNAS Beta UI ?
Post by: opnsenseuser on June 21, 2018, 06:05:33 pm
Hi Franco,

please give me until Sunday time. I want to fix a few things.
And I would ask you if you find something that does not fit in the source code or should be changed, change or tell me. I am not perfect. Besides, I'm sure you can tweak it. Maybe some pros can test and tweak the thing.

thanks franco.
I will contact you on sunday and will then send the individual files main.css main.scss and the default.volt and the fbegin.inc to Martin. Is that alright for you if we do that?

best regards
René
Title: Re: Collapse Dashboard like on FreeNAS Beta UI ?
Post by: marjohn56 on June 21, 2018, 06:28:11 pm
Fine by me.
Title: Re: Collapse Dashboard like on FreeNAS Beta UI ?
Post by: opnsenseuser on June 21, 2018, 06:41:18 pm
Fine by me.

 :)
Title: Re: Collapse Dashboard like on FreeNAS Beta UI ?
Post by: opnsenseuser on June 24, 2018, 02:34:20 pm
hi Guys.

Unfortunately I am not finished yet. Had a busy weekend.
But I will be ready in 2 weeks at the latest.
I hope you are not angry with me since.

Best regards, rene
Title: Re: Collapse Dashboard like on FreeNAS Beta UI ?
Post by: marjohn56 on June 24, 2018, 03:09:25 pm
Take your time...
Title: Re: Collapse Dashboard like on FreeNAS Beta UI ?
Post by: franco on June 25, 2018, 06:35:16 pm
Yes, no worries. Thanks for doing this!  :)
Title: Re: Collapse Dashboard like on FreeNAS Beta UI ?
Post by: opnsenseuser on July 01, 2018, 07:57:57 pm
Yes, no worries. Thanks for doing this!  :)

if you leave the active menu in the sidebar view with the mouse, the active menu closes and the focus is automatically on the main page.
if the active window is smaller than 669 pixels in height, it will automatically switch to the old menu and the toggel button disappears. The same applies to the width and the tablet view, which has not changed.
Only problem is if a popup menu is longer than the active window. For this I would like to move via jquery the popup window automatically into the visible view. that's the only thing missing. At the beginning of the next week I will be finished and will send the whole thing to Martin.

Thanks, regards René

Title: Re: Collapse Dashboard like on FreeNAS Beta UI ?
Post by: fabian on July 01, 2018, 08:14:11 pm
You can send it to me if you like to get a code review before the pull request is made.
Title: Re: Collapse Dashboard like on FreeNAS Beta UI ?
Post by: opnsenseuser on July 02, 2018, 03:39:44 pm
Thx. I will send it to you first.
Title: Re: Collapse Dashboard like on FreeNAS Beta UI ?
Post by: opnsenseuser on July 02, 2018, 08:17:44 pm
You can send it to me if you like to get a code review before the pull request is made.

Where should I send you the files? Email? Sorry, can´t PM you!
Title: Re: Collapse Dashboard like on FreeNAS Beta UI ?
Post by: opnsenseuser on July 04, 2018, 01:17:50 pm
Yes, no worries. Thanks for doing this!  :)

i have sent martin everything. but fabian wants to take a look on the sourcecode first.
tukan and cicada are in the package too i sent to martin.

KR
René
Title: Re: Collapse Dashboard like on FreeNAS Beta UI ?
Post by: marjohn56 on July 04, 2018, 06:04:01 pm
I have it working on my system... nice, VERY nice! : :)
Title: Re: Collapse Dashboard like on FreeNAS Beta UI ?
Post by: fabian on July 06, 2018, 06:13:32 pm
@marjohn have you the files somewhere - I cannot find them.
Title: Re: Collapse Dashboard like on FreeNAS Beta UI ?
Post by: franco on July 06, 2018, 11:15:01 pm
Martin will do a PR shortly, I'm sure. 8)


Cheers,
Franco
Title: Re: Collapse Dashboard like on FreeNAS Beta UI ?
Post by: opnsenseuser on July 06, 2018, 11:51:03 pm
Martin will do a PR shortly, I'm sure. 8)


Cheers,
Franco

Martin told me 2 days ago, that he has sent Fabian a Message with a Link to a cloudserver where the files are stored.

Regards
Rene
Title: Re: Collapse Dashboard like on FreeNAS Beta UI ?
Post by: marjohn56 on July 07, 2018, 12:18:26 am
@marjohn have you the files somewhere - I cannot find them.


Have a look at the PR of the doc for Orange France. You'll see I posted a link on there.
Title: Re: Collapse Dashboard like on FreeNAS Beta UI ?
Post by: fabian on July 07, 2018, 07:58:46 am
I took a quick look at it - there are two things: tabs are used (please convert to spaces) and both files contain a closing body tag, which probably does not belong there.
Title: Re: Collapse Dashboard like on FreeNAS Beta UI ?
Post by: marjohn56 on July 07, 2018, 08:16:32 am
@Fabian OK, I'll PR it today and we'll take it from there. I'll also PR the changes required for Rebellion and Opnsense themes on separate PR's.
Title: Re: Collapse Dashboard like on FreeNAS Beta UI ?
Post by: opnsenseuser on July 07, 2018, 08:58:56 am
I took a quick look at it - there are two things: tabs are used (please convert to spaces) and both files contain a closing body tag, which probably does not belong there.

if the new navigationmenu has survived all the tests and is accepted it would be a logical progression for me if we could extend the dashboard to 5 possible columns to have the possibility to add more widgets on the viewport (dashboard).