OPNsense Forum

English Forums => Development and Code Review => Topic started by: opnsenseuser on August 17, 2018, 12:40:23 pm

Title: new sidebar-> hover?
Post by: opnsenseuser on August 17, 2018, 12:40:23 pm
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!
Title: Re: new sidebar-> changing font-size from 11px to 12px for better reading experience
Post by: franco on August 17, 2018, 01:57:30 pm
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
Title: Re: new sidebar-> changing font-size from 11px to 12px for better reading experience
Post by: opnsenseuser on August 17, 2018, 03:20:49 pm
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é
Title: Re: new sidebar-> changing font-size from 11px to 12px for better reading experience
Post by: franco on August 17, 2018, 09:21:59 pm
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
Title: Re: new sidebar-> changing font-size from 11px to 12px for better reading experience
Post by: opnsenseuser on August 17, 2018, 11:37:12 pm
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?
Title: Re: new sidebar-> changing font-size from 11px to 12px for better reading experience
Post by: franco on August 18, 2018, 05:23:18 am
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
Title: Re: new sidebar-> changing font-size from 11px to 12px for better reading experience
Post by: opnsenseuser on August 18, 2018, 03:07:13 pm
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!
Title: Re: new sidebar-> changing font-size from 11px to 12px for better reading experience
Post by: opnsenseuser on August 18, 2018, 07:14:25 pm
I think it all takes place in bootstrap.js or bootstrap.min.js.

Can anyone confirm that?
Title: Re: new sidebar-> changing font-size from 11px to 12px for better reading experience
Post by: opnsenseuser on August 19, 2018, 09:19:40 am
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!
Title: Re: new sidebar-> changing font-size from 11px to 12px for better reading experience
Post by: opnsenseuser on September 02, 2018, 10:47:49 am
@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?
Title: Re: new sidebar-> changing font-size from 11px to 12px for better reading experience
Post by: fabian on September 02, 2018, 11:10:41 am
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;
Title: Re: new sidebar-> changing font-size from 11px to 12px for better reading experience
Post by: opnsenseuser on September 02, 2018, 11:36:19 am
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!
Title: Re: new sidebar-> changing font-size from 11px to 12px for better reading experience
Post by: opnsenseuser on September 04, 2018, 07:02:32 am
Would like to announce only a small intermediate.   :D

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

I need a little more time.

regards rené
Title: Re: New sidebar-> hover?
Post by: opnsenseuser on September 09, 2018, 08:28:16 pm
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!
Title: Re: new sidebar-> hover?
Post by: opnsenseuser on September 17, 2018, 06:54:54 am
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!  8)

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! ;)