Core: dashboard: sidebar menu

[fichtner]

• [x] deselect icon after click
• [x] change gyphicons to fontawesome icons
• [x] on MVC pages the toggle is reversed after page load #2596
• [x] support default theme #2555
• [x] wrong colours in default theme #2601
• [x] save preference in local session (people will complain if it's not sticky)
• [x] footer gap on minified view #2626
• [x] toggle disappears (in Chrome) when developer tools are open -- due to height requirement, fix resize back to original preference #2628
• [x] delay / click behaviour (hover should probably trigger menu instantly) #2727
• [x] tooltips for full/minified button toggle #2742
• [x] presentation: scrap transparency in the overlay #2755
• [x] proportions: logos vs. submenus is too drastic
• [x] remove expansion delay / animation
• [x] hover in and out resets same elements instead of reopening them
• [x] sticky sub-submenu on mouseout when next item does not have a sub-submenu #2782
• [x] positioning of submenu may be cropped due to small height #2865

[marjohn56]

Default theme #2555

[fichtner]

@opnsenseuser you can push all your notes here... we don't need at ticket for each issue :)

[opnsenseuser]

@franco font-size, color, (no transparent) and hover modification!

https://github.com/opnsense/core/pull/2728

[opnsenseuser]

@franco .js hover update
https://github.com/opnsense/core/pull/2727

[opnsenseuser]

@franco tooltip for sidebar
https://github.com/opnsense/core/pull/2742

[fichtner]

@opnsenseuser thanks, I'll merge this over the weekend when I have a clear head for this :)

[opnsenseuser]

@franco great thx. Please its also Important to merge all themes. Like opnsense, cicada, tukan and the dark theme. All pr‘s are already done! Thx , regards rene

[opnsenseuser]

@franco have now cleaned up both themes (tukan and cicada) completely and as Martin all tokenize2 and nv.d3 - css stuff divided into seperate files. besides, I've tried correcting all tabs and wrong spaces. It took a lot of effort, but I wanted to make fabian a pleasure. He was right, but I had no time for it so far. Greetings René... hope you can merge it soon!!! thx - nice day!!

[fichtner]

@opnsenseuser almost done :)

What do you think about 14px for the menu font? I'm also pondering about the click behaviour that undoes the "transition" effect. If we had it open instantly the click to remove would feel more natural. Right now it opens and habit clicks which makes the opening menu disappear again.

What do you think?

[opnsenseuser]

@franco

the font-size on 14px is okay. the problem is the submenu.
if it is too high it would be outside the viewports.
Then you could only do it as the dropdown menus work -> go up if there is not enough space.
If there was no space here then we would face another problem.
Freenas simply added a scroll bar to each submenu and set the height of the submenu to a fixed value.
I think that's not very user friendly and looks very strange.

It is not easy to find a really good solution.
In any case, we already have a very good starting point on which we can build.
I have to think about it.

Interesting would be the opinion of Fabian or others. Ideas are always good.

[opnsenseuser]

@fichtner
I do not know if that is possible but would be very interesting to do a survey. and everyone who tests the sidebar to ask what bothers them or what they would like. I do not know if that's possible. I always find the other's feedback very interesting!

[fichtner]

sure, you can make a survey for the plugin theme users (cicada, rebellion, tukan). we'll release the current state for those in 18.7.4. the default theme needs some extra care for compatibility testing later on, but there's time for that.

[opnsenseuser]

@fichtner Because of your second question I wanted to ask you again.
Did I understand correctly that you can imagine with one click the submenu to close?
So the click event should be limited to running menu items and closing the submenu? Is this correct?

[fichtner]

@opnsenseuser the clicks work fine, but when it's still expanding on hover and you click it removes the opening menu

[opnsenseuser]

@fichtner ok. I'll take a look. :-)

[opnsenseuser]

@fichtner
yes, thats great! :-)
I like it-> It also fits better to the original navigation!
Should i make the modifications for tukan and cicada too?

[fichtner]

@opnsenseuser let's reevaluate in a day or two to see this in action for a bit... if you like it you can adjust your themes accordingly of course

[opnsenseuser]

@fichtner ok, you a right. we wait one or two days!!
In the mean time i start working on the click behavior for sidebar!

regards, rené

[fichtner]

take a break, let it sink in, enjoy the evening. :)

cheers,
Franco

[opnsenseuser]

👍

[opnsenseuser]

@marjohn56 -> What do you think about this Martin?
https://github.com/opnsense/core/commit/70ea12a3340fc105cd23cc05117c677f90161488

[marjohn56]

Very busy with real work for the next few months as I’ve had some very large projects pushed in my direction, so I have very little time to play with OPNsense. Can you send me an image of what the changes look like?

[opnsenseuser]

@marjohn56

icons are smaller (28px to 20px now)
font-size larger (12px to 14px now)

What do you think?

Cicada:

Opnsense:

[opnsenseuser]

@marjohn56 I like it-> It also fits better to the original navigation!

what do you think?

[opnsenseuser]

@marjohn56
@fichtner

the only thing I do not like if you select 14px is the text of the main menu sticks so much to the edges!
A good alternative or a compromise would be 13 px. It would be easy to read and does not stick so much to the edges? what do you all mean ?

Cicada:

Opnsense:

[marjohn56]

Graphical look has never been my speciality, ask some of my work colleagues. :)

I'd go with the second series, 13 point I think you said.

[fichtner]

cicada and tukan are now 13px for 18.7.4. we'll keep the default theme at 14px for now. entirely unsure... :)

[opnsenseuser]

@fichtner 👍

[opnsenseuser]

@fichtner we should find a common denominator up to version 19.1. but there is still time.

[opnsenseuser]

@fichtner
@marjohn56 for Tukan and Cicada i set the font-size to 13px, for better reading experience and fixed the padding a little. it´s on you if you deside to choose 14px or 13px. the org theme is set to 14px. noone is shure whats the better option!
if it´s not to late, I would modify the dark theme for you if you want to change something and do a pr.

[fichtner]

it would have to be in the next few ours to be able to land in 18.7.4... builds are almost finished for tomorrows release. we still need to test so that takes a day roughly

[opnsenseuser]

@fichtner thats impossible for me. I get back from work in 8 Hours.
@marjohn56

[fichtner]

no worries, there's always 18.7.5

[opnsenseuser]

@fichtner I almost forgot that ;-)

[opnsenseuser]

Also freenas is currently not perfect (beta3), but also on a good way.
I'm posting this just to have a little input and maybe more ideas to develop.

best regards rené

[fichtner]

@opnsenseuser surprise, all your patches landed in 18.7.4 since I had to redo the build partially :)

I wanted to solve the positioning so that it goes up instead of down to avoid as much cropping as possible but I've not yet understood the JS magic involved.

[opnsenseuser]

@fichtner you are the best. I wanted to thank you anyway, but I'm also in the process of making some improvements at the sidebar.

"but I have not understood the JS magic involved." -> I would be very surprised if you did not understand that. Or the sidebar is so poorly "programmed" by me, that it does not understand a proper programmer. I can not explain that otherwise! ;-)

[mimugmail]

@opnsenseuser @marjohn56

I'm on OPNsense 19.1.a_288-amd64 using Sidebar with default theme and I'm getting into scaling issues with long lists. See screenshot where Services get's cut off.

Also, my mouse hovers over "Nut", but the sub-menu open is from Nginx. Everytime where the next below entry does not have a sub-menu, it sticks with the one above.

[opnsenseuser]

@mimugmail I have already talked to franco about it some time ago. the idea would be to do it as with the dropdown menus. so there is not enough space down the menu should go up. the only question remains ... What do we do if there is not enough space up there?

[opnsenseuser]

@mimugmail
@fichtner
@marjohn56
That's why I decided to leave the font size of the sidebar at 13px. so that the legibility is right and you have more space upstairs.

[opnsenseuser]

@mimugmail
@fichtner
@marjohn56
we would have to try all possibilities once. The last resort is of course the simplest though visually and usability technically the worst -> we build a scrollbar.
freenas did that too. But as already written is not easy to use and looks very strange. html5 and css3 but can overwrite the color of the scrollbar, which went before html5 and css3 only with javascript. -> at least, but still not nice!

[opnsenseuser]

@mimugmail
@fichtner
@marjohn56
Of course, the "routing tab" (in your screenshot) for the rest of the viewport gives even less space down. This should not be a reproach, but it is of course even less space down.
Another option would of course be to reorganize the main menu items.
For example, to push reporting under the services. This is just another idea and serves as an additional opportunity that I want to lead here.

[opnsenseuser]

@mimugmail
@fichtner
@marjohn56

(screenshot)
one more option would be to let the submenus start higher up and thus to adjust them by hover. I did something fast here. it is not perfect. Of course in the original it would have to be single colored or completely transparent, but it would be another possibility. best regards rené

[fichtner]

@opnsenseuser this looks light the right direction.

Let's go back to the drawing board for a second to consider design choices. There are a couple of methods to resolve the cropped situation:

1. fixed max height containers with scroll bar
2. multi-column layout if not enough space
3. expand upwards
4. More ideas for this list?

I personally don't like the scroll bar approach and wouldn't mind a combination of several other approaches that allows for "one click" navigation with the sidebar with ideally a straight horizontal movement in the best case. What do you think?

[opnsenseuser]

@fichtner I do not quite understand you. would you like a general remodeling? So, all submenus open horizontally? it would be easier for me if you could give me a very simple draft in the form of a simple sketch. very simple. just so I can empathize your imagination better. best regards, rene

[franco]

@opnsenseuser: @franco != @fichtner. Thanks!

[opnsenseuser]

@opnsenseuser: @franco != @fichtner. Thanks

that happens to me now all the time. I'm sorry.

[fichtner]

No, just trying to push what we have to the next level... best case horizontal menu navigation:

move cropped menu up by detecting end of screen:

[opnsenseuser]

@fichtner ok, so you mean, if the submenu is too long then should the submenu open to the right?

[opnsenseuser]

@fichtner fix for "hover in and out resets same elements instead of reopening them"
https://github.com/opnsense/core/pull/2770/commits/e8dad84793c2f998a0b1ade118fb10b266168eca

[opnsenseuser]

@mimugmail
@fichtner

If the "routing" entry is copied to the main menu "master" as shown by @mimugmail, the space upwards should be sufficient for a submenu to open up if there is not enough space left. will the "routing" entry be taken over in the master?

[opnsenseuser]

@fichtner
@mimugmail
I also think that 13px is sufficient for the font size in the sidebar. It's hardly a difference, but it gives you a lot of space!

[opnsenseuser]

@fichtner @mimugmail
I have also changed the tukan and cicada template to 14px. Also, I have slightly increased the width of the submenu. Entries that previously required two lines now only need one line. That creates space. I will then do the PR's! please give me some time so that I can modify everything. I will make a pr then. best regards René

[mimugmail]

@opnsenseuser the routing menu is only displayed when you install plugin FRR. You easily install it to test against. I dont remember the discussion why we put it in main and not under services.

[opnsenseuser]

@fichtner all PR´s for opnsense, cicada and tukan 14px (width and so on) done;
also the js modification for bigger submenu width!

now only "positioning of submenu may be cropped due to small height" is missing. I'm working on that now and I'll see what's possible.
would be great if you could "merge" everything.
Thanks and have a nice day!
best regards rené

[fichtner]

I don't know about the routing menu yet. I'd wish it became a standard, but that requires more work and lobbying from my side. Hopefully have it all worked out for 19.1.

[mimugmail]

When downloading a backup of the configuration it does not minimize (latest master)

[opnsenseuser]

@mimugmail
@fichtner
I think we need you unfortunately!

[fichtner]

I tried reproducing, but didn't work in Chrome. Which browser is this? What steps?

[opnsenseuser]

@fichtner
hi franco. I just wanted to let you know that I am working on a solution for "cropped due to small height". I'm trying everything out right now.
Please be patient.

by the way......Do you have any information when you will be providing the Intel Denverton issue (https://github.com/opnsense/core/issues/2473) in the development release?.
I do not want to cause you any stress but would just like to know so I can test it myself on my C3558. Thank you
Best regards, René

[mimugmail]

Franco keeps it rolling :)
https://github.com/opnsense/tools/commits/master

[fichtner]

@opnsenseuser @mimugmail yes, when 18.7.5 is released we have a working src.git master branch for 19.1, but I'm not sure how we will do a public beta test yet.

[opnsenseuser]

@fichtner thank you for the information.

so if it works in the future, how can i install the opnsense in the dev Version ? otherwise it does not work, because the hard drive in the prod version is not recognized.
best regards rené

[fichtner]

@opnsenseuser I'll be issuing images based on 18.7.5 with the newer 19.1-BETA operating system update so you can do a clean install. But it takes 18.7.5 to get there. :)

[opnsenseuser]

@fichtner
thanks franco. That's a great news!
I think there are some opnsense users who are already waiting to test this.
ingenious!.
just one thing. In opnsense theme i still have found a small error in the sidebar Navigation css that I will then quickly register tomorrow on github. Thats just for your Information.

Thx,
Regards
Rene

[fabianfrz]

I am not sure if this is already fixed but it opens the wrong submenu on hover:

[opnsenseuser]

@fabianfrz Everything works as it should for me.
What do you click and what happens then?
I only use the click function and that does not do anything else than I would click on the element with the mouse.

[fabianfrz]

Clicking works as expected but hover does not.

[opnsenseuser]

@fichtner
@fabianfrz
Everything works without problems for me. maybe franco can detect something.

[opnsenseuser]

@marjohn56
can you confirm that Martin?

[marjohn56]

Hold on I'll need to bring my test system up to date.

[marjohn56]

I have just done a code-core etc and it all looks fine to me, the correct sub menus are opening as expected.

menus.zip

Not the best capture in the world but it proves a point. ;->

[opnsenseuser]

@marjohn56 Thanks Martin for your support. I also could not find anything. everything perfect so far

[fabianfrz]

@opnsenseuser I took that screenshot on a Arch Linux machine running latest Firefox if that helps.

[opnsenseuser]

@fabianfrz ok, that was a valuable note. I'll take a look.

do you have the chance to test it under debian or other distributions? That would be great. thanks, best regards, rene

[opnsenseuser]

@fichtner
@fabianfrz
@marjohn56 Does anyone have the opportunity to test it without much effort among other distributions or Plattforms like mac os, redhat, debian, manjaro and so on. many thanks, best regards, rene

[fichtner]

I am not sure if this is already fixed but it opens the wrong submenu on hover:

I'm sorry to say that without stating which version you are running this report is totally useless. :)

[mimugmail]

I can test Debian, elementaryOS and Ubuntu later today. But they are all Debian based :)

[opnsenseuser]

@mimugmail thx for your Support!

[opnsenseuser]

I will test it under redhat and suse.
the more results I have the better.

thanks again for the support.

[mimugmail]

It works for me in elementaryOS under Firefox 62, Chromium 69 and Epiphany 3.8.11.
But with all I have a cropped menu in Services (and this time it's 24 inch display) .. see screenshot

[opnsenseuser]

@mimugmail the cropped menu is still under developement!
see ->

[mimugmail]

Ah, good to see you're still on it. I don't read every commit, but happy to help where I can 👍

[opnsenseuser]

you helped me a lot with your test. 👍
If you could still test debian I would be very grateful.
best regards rené

[mimugmail]

Sure, Debian 7, FF 52.8 works

[opnsenseuser]

And Suse and Redhat will be tested by me later on. Have a lot of work to do today. (real work)!

[fabianfrz]

@opnsenseuser you don't need to test manjaro - that is Arch Linux based where we currently have 62.0.2 (64-Bit)

CentOS 7: the bug is reproducable:

Also here clicking works. Firefox 52.7.0 ESR

[fichtner]

Which OPNsense version? I'll just keep asking. ;)

[fabianfrz]

good point was 18.7.2 - on OPNsense 19.1.a_288-amd64 everything is fine. Arch Linux and CentOS 7.

[opnsenseuser]

@fichtner just for you as information -> I am working on the last problem. I just have to keep busy with other things in between to have a more neutral approach. But do not worry I'll have a solution soon.

[fichtner]

@opnsenseuser ok, thanks for all your work on this. the sidebar has come a really long way thanks to you! :)

I removed the border addition https://github.com/opnsense/core/commit/724f41dad as it does not fit the current main theme in the menu which doesn't use separators when collapsed. I only noticed this morning. Sorry for not noticing it earlier.

[opnsenseuser]

@opnsenseuser I'll be issuing images based on 18.7.5 with the newer 19.1-BETA operating system update so you can do a clean install. But it takes 18.7.5 to get there. :)

@fichtner
hi franco,
18.7.5 works great. please, can you tell where i can download 18.7.5 with the included 19.1. beta for testing the denverton intel as you told me?

regards rené

[fichtner]

I'll send the link privately via mail in a second

[opnsenseuser]

@fichtner
thx, i already tried that one.
but it ends up with "Enter full pathname of shell or RETURN for /bin/sh

[fichtner]

awkwardly strange, which image type is this?

[opnsenseuser]

OPNsense-19.1.b-OpenSSL-vga-amd64.img

Von: Franco Fichtner [e-mail]
Gesendet: Mittwoch, 17. Oktober 2018 21:31
An: opnsense/core [e-mail]
Cc: René [e-mail]; Mention [e-mail]
Betreff: Re: [opnsense/core] dashboard: sidebar menu (#2554)

awkwardly strange, which image type is this?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub https://github.com/opnsense/core/issues/2554#issuecomment-430758466 , or mute the thread https://github.com/notifications/unsubscribe-auth/Ag_9eGkX1Vp2k80Vtnl1Qze33JuDOJxWks5ul4VegaJpZM4VTm2o . https://github.com/notifications/beacon/Ag_9eBTb1ONdgXPawqvmhMn2HKmfXXGOks5ul4VegaJpZM4VTm2o.gif

[fichtner]

@AdSchellevis is this because of https://github.com/opnsense/core/commit/2d360a391b ?

[AdSchellevis]

@fichtner not very likely, I don't see how, but if there's a reproducible scenario using something I can boot in a vm, I can check.

[opnsenseuser]

once again!
positioning of submenu may be cropped due to small height!
https://github.com/opnsense/core/pull/2865

[fichtner]

@AdSchellevis @mimugmail the last fix went in via @opnsenseuser -- what do you think?

It could still be too small in the worst case, but I do think this ready for general release (it's enabled in the plugin themes already). The choice is not to use it if space is too small.... ;)

[AdSchellevis]

@fichtner I'll have to check, also for backwards compatibility if these additions aren't installed. Let me get back on this.

[fichtner]

no rush, 19.1 for default theme is also fine IMO

[opnsenseuser]

I agree. Gives us more time to test and optimize!

[mimugmail]

Installed latest master .. when I hover from Services to Web Proxy and then go up, the Administratio and Logging sub menu stays.

[mimugmail]

Screenshot enclosed .. sub menu of Unbound behind Web Proxy, also the list it cut off at the top now instead of below.

[fichtner]

indeed, that bug seems to be back. thanks for spotting it :) expand up is ok, though?

[opnsenseuser]

I can only Test in the evening.

[opnsenseuser]

Could be old bug Problem or Cache (Firewall,Browser) and so on....

[opnsenseuser]

I know that it should work. Tested it on all themes

[opnsenseuser]

Tested it On the latest 19.1 Version yesterday

[opnsenseuser]

Only real Problem i know is the memory or cpu demand of jquery. Therefore i need help

[opnsenseuser]

Also could be, that the Orginal theme has the wrong z-Index set for Submenus. It should overlab the Head div.

[opnsenseuser]

@fichtner
@mimugmail
yes, unfortunately .... you have too many elements, the space is not enough. Some things can be solved, but some unfortunately not. I think we can not avoid the scrollbar!

maybe the solution in such a case would be to downsize the font. This would also reduce the div levels.
whether one can dazzle the submenu above the header, I must first determine. Since we work here partially with fixed positions, it seems to be difficult.

z-index description:
Items can have only one z-index if they have an item of position that differs from static or if they are flex-items

[opnsenseuser]

We can also consider, if the div is too long to switch back to the standard navigation!

[opnsenseuser]

@fichtner did you Test it. Is there a bug you wrote?

[opnsenseuser]

@fichtner
@mimugmail i have a solution for the "cut off" problem and will post this soon!

[opnsenseuser]

@fichtner
@mimugmail
solution:

[mimugmail]

If you want me to test just tell me your repo/branch :)

[opnsenseuser]

@fichtner
@mimugmail

opnsense theme mod (cut off problem fix)
https://github.com/opnsense/core/pull/2869

tukan cicada theme mod (cut off problem fix)
https://github.com/opnsense/plugins/pull/953

[opnsenseuser]

@mimugmail would be great if you could test this! regards rené

[opnsenseuser]

@fichtner
@mimugmail
sidebar - fix for some problems with sticky sub-submenu:
https://github.com/opnsense/core/pull/2872

[opnsenseuser]

i´m really proud of the last mods i did for sidebar and all themes. it looks and feels much much better now

[opnsenseuser]

I hope to see the mods at least for tukan and cicada in the next release. Thank you, best regards, René

[opnsenseuser]

@fichtner it would at least be important to merge the newest javascript as it fixes a major scrolling issue. best regards rené

[fichtner]

There's one small bug that I see if you install "vnstat" plugin. In the service menu, go to "web proxy", then move mouse up to "vnstat". "web proxy" is still extended and not closed. The other way around into "vnstat" seems to do that correctly for "unbound dns".

[opnsenseuser]

@fichtner thanks franco, i know i have been searching for this error for some days now. there is no apparent reason why this occurs. but I am working on it and will solve it as soon as possible. I still hope that you are satisfied with the work so far. best regards, rene

[fichtner]

yes, no worries, this is great work. just turns out to be very difficult to make it perfect 👍

[fabianfrz]

@fichtner the todo list is completed. Close?

[opnsenseuser]

👍

[fichtner]

ok, sure, thanks everyone ❤️

[opnsenseuser]

As I completed my first project with today's final public relations sidebar (https://github.com/opnsense/core/pull/2877), I'm looking for a new challenge.
You may now know about my level of knowledge.
I would be very happy about every new task. There is still much to do and I am full of energy.

Thanks again for your support in all matters!

René

[fabianfrz]

@opnsenseuser if you don't have an idea what you can improve, you can work on the docs as well. Users often ask for a chapter about the firewall section for example.

[opnsenseuser]

@fabianfrz I know, but I do not really feel at home.
When it comes to graphic work, I am always at your service!
Currently I imagine to make a kind of standard "Error / Info" proxy page or a default template for the captive portal. Something in the direction would be of great interest.

[opnsenseuser]

There's one small bug that I see if you install "vnstat" plugin. In the service menu, go to "web proxy", then move mouse up to "vnstat". "web proxy" is still extended and not closed. The other way around into "vnstat" seems to do that correctly for "unbound dns".

fix -> https://github.com/opnsense/core/pull/2877