Use large border-radius in AppNavigation

[quentinguidee]

Border-radius! Now for the AppNavigation (closes #2460).

Change(s) to do before merging this PR

• Rework the AppNavigationItem with children: the children have to be outside of the main element to get border-radius working correctly (Put the children of AppNavigationItem outside of the main item #2704).
  Check AppNavigationCaption not released yet
• Check AppNavigationSettings

[quentinguidee]

Before #2572

After #2572

2571.mov

[GretaD]

Hey @quentinguidee, thank you for initiating this. Do you need any help to finish it?

[quentinguidee]

Hi @GretaD, I don't have much time right now, but from what I had deduced, this PR first requires #2572 to work. But after that feel free to improve this PR!

Also, these two PR are made only using the styleguide. Don't hesitate to check if they work with Nextcloud without breaking anything ^^

[GretaD]

Hi @GretaD, I don't have much time right now, but from what I had deduced, this PR first requires #2572 to work. But after that feel free to improve this PR!

Also, these two PR are made only using the styleguide. Don't hesitate to check if they work with Nextcloud without breaking anything ^^

thank you very much for the quick follow up, i will review them both and help you

[GretaD]

What is left now is the Action Buttons, should i add those here or open a new pr?

[raimund-schluessler]

What is left now is the Action Buttons, should i add those here or open a new pr?

I would vote for a separate PR. Makes reviewing and testing easier.

[GretaD]

@raimund-schluessler can you please be the second reviewer?

[raimund-schluessler]

I think this is to much padding. It looks a bit weird to me.
With padding:

And without (proposed):

@jancborchardt @nimishavijay

Besides the that, it works as expected.

[jancborchardt]

Agree the padding on right and left is a tad much, but it also should not be none.

How much is it in Talk, 4px @marcoambrosini? We should do the same, and the padding on the top of the list should be same as on sides.

[raimund-schluessler]

Agree the padding on right and left is a tad much, but it also should not be none.

How much is it in Talk, 4px @marcoambrosini? We should do the same, and the padding on the top of the list should be same as on sides.

4px sounds good. We use the same in the Actions dropdown now.

[marcoambrosini]

Yes that sounds good. Mail is not a good benchmark here because the hover and active feedbacks of the listitem actually touches the edge, and that should never happen. Basically we should avoid visual tangents at all costs, as they create tension and discomfort.

[raimund-schluessler]

I rebased the branch and adjusted the padding. This is how it looks now (with the new Action menu as reference):

[marcoambrosini]

very nice!

although the element will need a height increase of 8px to avoid the tangents of the action element hover feedback, but it's a separate issue

[jancborchardt]

Is there a related pull request in Files for this? @PVince81 @skjnldsv or does it use the Vue components already?