new sidebar-> hover?

[opnsenseuser]

i would make cicada, tukan and opnsense theme changes if you agree with this idea!
Or should we stay with 11px ?

see screenshot for an example!

[franco]

Hi René,

I agree. I've made some more notes / suggestions here: https://github.com/opnsense/core/issues/2554

proportions: logos vs. submenus is too drastic

presentation: remove transparent effect and delay / better click behaviour (hover should probably trigger menu instantly)

tooltips for full/minified button toggle


Cheers,
Franco

[opnsenseuser]

Hi René,

I agree. I've made some more notes / suggestions here: https://github.com/opnsense/core/issues/2554

proportions: logos vs. submenus is too drastic

presentation: remove transparent effect and delay / better click behaviour (hover should probably trigger menu instantly)

tooltips for full/minified button toggle


Cheers,
Franco

ok - if you agree with me:

proportions: logos vs. submenus is too drastic -> 12 px should solve the problem! @franco for you ok?

presentation: remove transparent effect -> i will disable the transparent effect and choose the org color instead!
and delay/better click behaviour ->  I do not know if I have much influence on the speed. because it is also delayed in the original menu. but i will do my best!

tooltips for full/minified button toggle -> should I write the tooltip text hardcoded in the default.volt and in the fbegin.inc or does the text come from another file? and which text should I use?

thx rené

[franco]

Hi René,

Sounds good. Your minified menu is far better for quick, "click-less" navigation but we just need to bring it to that point. Both menu types work fundamentally different so using different approaches to them is fine.

I won't be available for two weeks, just to let you know.

Good luck and thanks,
Franco

[opnsenseuser]

Hi René,

Sounds good. Your minified menu is far better for quick, "click-less" navigation but we just need to bring it to that point. Both menu types work fundamentally different so using different approaches to them is fine.

I won't be available for two weeks, just to let you know.

Good luck and thanks,
Franco

So if i unterstand you right. You want me to do a Navigation that works by hover and not by click? is that correct?

[franco]

It's a suggestion, but it's up to you to decide if you want it and may be a long-term goal. The other items are more important for sure.

(Last post, see you in two weeks.)


Cheers,
Franco

[opnsenseuser]

Can someone give me a hint where I find the click event for the main menu control?

I would like to build a pure hover navigation for the new sidebar and for that I would have to find the beginning. So where do I have to start in the mvc!

[opnsenseuser]

I think it all takes place in bootstrap.js or bootstrap.min.js.

Can anyone confirm that?

[opnsenseuser]

ok. two things i figured out:

1. The delay comes through the class "collapsing", which uses bootstrap by default for animation! (bootstrap and min.js) ->

Code: [Select]

Collapse.TRANSITION_DURATION = 350If i set this to "0", there is no delay anymore!

2. To change the navigation to "hover" basis, we would have to modify a view things. ->

Code: [Select]

$(document).on('click
If we use mouseover and mouseout instead this should work!

In my opinion, we should do this but in a completely independent file and not in the original (bootstrap.js or bootstrap.min.js). For this we should use a query!

@Franco -> i need your help for some solutions and decisions!

[opnsenseuser]

@Franco im working hard on the hover solution. and I'm already going ahead. problem is, that the main menu structure is not made for hover.

but as i posted before to get rid of the latency we only have to modify this setting ->

Code: [Select]

Collapse.TRANSITION_DURATION = 350 to "0"

but i do not know how to override this only for the new sidebar?

[fabian]

noname12123: the usual way in javascript is to rebind it to a function which calculates it but it does not work here. Maybe you can patch it but I don't think this is a good idea. This is how you can override it:

Code: [Select]

$.fn.collapse.Constructor.TRANSITION_DURATION = 0;


[opnsenseuser]

noname12123: the usual way in javascript is to rebind it to a function which calculates it but it does not work here. Maybe you can patch it but I don't think this is a good idea. This is how you can override it:

Code: [Select]

$.fn.collapse.Constructor.TRANSITION_DURATION = 0;


@Fabian That works perfect!

@Franco for only one question we still need a decision! Should we make a new navigation structure for the hover nav or should i try to get it working with the current nav structure?

Currently i´m working with the original nav structure by modifying the opnsense-theme.js

But I do not want to work senselessly if you would anyway provide a different idea or a different approach for hover navigation!

I´m no PRO so i need a decision from a PRO!

[opnsenseuser]

Would like to announce only a small intermediate.   

I get ahead in small steps. I want to make it as perfect as possible.

I need a little more time.

regards rené

[opnsenseuser]

Sidebar is done -> was a lot of work and I learned a lot again. Above all, I should pay attention to the TABS and BREAKS when delivering the source code. Fabian has been able to explain me really well all the time. In the future I will get better here too. -> Fabian and Franco! -> I promise you!!!

To the sidebar itself:
Font has been enlarged, a few more things removed and from the point of "smoothness" and "usability" the hover function can certainly keep up with that of Freenas. But that's just my opinion ;-)

PR was made.

Thanks again to Fabian for the explanation and help!

[opnsenseuser]

I would like to thank Franco, Fabian and Martin for giving me the opportunity, despite some mistakes, to work for the opnsense project.
I am far from being a specialist for Github, but yesterday I learned how important it is to always choose the right branch! 

I'm really proud to be able to learn from the pros every day and enjoy my hobby a bit.
And im getting better and better every day!

Big thank you!