App navigation flex

[skjnldsv]

Flex on app-navigation to finish the reorganisation of the app-navigation done on february by me.
Still some old code to clean.

[codecov]

Codecov Report

Merging #6399 into master will increase coverage by <.01%.
The diff coverage is 50%.

@@             Coverage Diff              @@
##             master    #6399      +/-   ##
============================================
+ Coverage     53.06%   53.06%   +<.01%     
- Complexity    22552    22553       +1     
============================================
  Files          1414     1414              
  Lines         87741    87745       +4     
  Branches       1340     1340              
============================================
+ Hits          46557    46564       +7     
+ Misses        41184    41181       -3

Impacted Files	Coverage Δ	Complexity Δ
apps/files/templates/appnavigation.php	0% <0%> (ø)	0 <0> (ø)	⬇️
apps/files_trashbin/appinfo/app.php	100% <100%> (ø)	0 <0> (ø)	⬇️
lib/private/NavigationManager.php	79.38% <100%> (+0.31%)	43 <0> (+1)	⬆️
apps/files_trashbin/lib/Expiration.php	90.32% <0%> (-1.62%)	29% <0%> (ø)
core/js/js.js	61.83% <0%> (+0.55%)	0% <0%> (ø)	⬇️

[nickvergessen]

I guess this will break a lot of apps again...

[skjnldsv]

@nickvergessen I will try my best to help reestablishing everything again. But would you prefer we do nothing and leave this mess around? 😞

And btw, there is a lot of feature announced on the css guidelines that don't work even before the scss switch. So it's time to have something usable again!

[nickvergessen]

No, of course progress is good. But maybe you can post in the forum in the dev section that there changes about this incoming, so people can check their apps and update them when necessary ;)

[skjnldsv]

I will check other apps myself.
I already have @ChristophWurst's request to do the mail menu, I will pr all the needed others :)

[MorrisJobke]

One thing that annoys me from time to time, is that the app content container is the actual scrolling part and the navigation around it is fixed. That also means, that mobile browsers don't properly detect if you scroll in there as a "page scroll" and don't hide the header of the browser. That means that it is unusable screen space. Does this PR here addresses this or does it only change stuff in the header/menu itself?

[skjnldsv]

@MorrisJobke not in this pr. But it's indeed an issue I'd like very much to investigate. Is there an opened one already?

[MorrisJobke]

Is there an opened one already?

I don't think so :/

[skjnldsv]

For testing, here is a test app which show all of the possibilities for the app-navigation.
templatetest.tar.gz

[skjnldsv]

@nextcloud/designers Please review!
I introduced some new stuff, based on the current guidelines.
Please take a look at the template test app which contains all possibilities and combination for the menu.
Tell me what you think!

[skjnldsv]

We should probably add a feedback on the submenus of a deletable entry. Right now we only get the confirmation on the main a content. We could set an opacity to 0.5? or something?

[juliushaertl]

@skjnldsv Looks really nice. One small issue I found while testing is that collapsed menus are only working when you click on the text. I think they should also collapse/expand when clicking the arrow symbol:

[jancborchardt]

One small issue I found while testing is that collapsed menus are only working when you click on the text. I think they should also collapse/expand when clicking the arrow symbol:

Every entry should be clickable on the whole height/width (extending to the left edge of the viewport, and to the right to the edge of the navigation, minus the action icons of course).

[skjnldsv]

@juliushaertl It's because of my javascript! ^^
I made it as simple as I could, becuse i didn't wanted to bother too much.

@jancborchardt there isn't any js in core to handle the app-navigation doesn't it?

[jancborchardt]

@skjnldsv not sure about the JS part but the clickable area is a pure CSS thing, no? Any idea ^ @BernhardPosselt @nextcloud/javascript?

[skjnldsv]

The clickable area is yes. I need to fix a small think indeed so the link gets above the collapse button.
We could also get rid of that button entirely and add it css only, it could be usefull since it will simplify what the user needs to set-up for the menu! :)

[skjnldsv]

🎉
Thank you everyone! Next stop: cleanup and documentation!! 🚋🚋🚋

[pixelipo]

Great work with this PR, @skjnldsv ! Just a small note - SVG should be optimized with Scour and it's missing viewbox="0 0 16 16" tag.

[skjnldsv]

I used the scour command provided by the nextcloud optimise bash script :p

[pixelipo]

Hmmm, that's strange, because it should remove the <xml> element as well as linebreaks....

[skjnldsv]

scour --create-groups --enable-id-stripping --enable-comment-stripping --shorten-ids --remove-metadata apps/files/img/quota.svg > apps/files/img/quota-opt.svg

[pixelipo]

That's old, @skjnldsv - you missed #5423 😉

[skjnldsv]

Damn it!!! 😅

[pixelipo]

only 3 declarations left in this file - can we move them somewhere else?

[skjnldsv]

@MorrisJobke @jancborchardt Should we backport?
I think we should. We can't have apps supporting only 13+, 12 should be good at least.

[MorrisJobke]

As it is a feature I would say no - and for my opinion it is too much changed code for a back port

[skjnldsv]

Damn, I should have done that earlier.
Should I publish a simple patch to fit the old guidelines and fix the potentials flaws of a migrated app? For retro compatibility?

[MorrisJobke]

May be better - we only need to be careful about potential breakages of apps in the existing versions

[jancborchardt]

Yeah, this can absolutely not be backported unfortunately. :\ But yes, a drop-in CSS file for apps while they need to support older versions still might be best.

[skjnldsv]

Okay, I will provide a patch after I finished upgrading the other apps. When is 13 due?

[MorrisJobke]

When is 13 due?

~ 1 month feature freeze
~ 2 months release

[skjnldsv]

Meep meep! 📯
Time to speed up @skjnldsv ^^