Settings redesign to use new vue components

[GVodyanov]

Fix #11910

And with mailvelope enabled:

[ShGKme]

Reviewed from a smartphone in a bed, will recheck in the morning 😅

In general looks good, some small comments/typos

[ShGKme]

Looks good to me.

For the designers (cc @kra-mo):

1. The icon on the account settings feels like a link file it acts like a button (it changes the settings dialog content)
   
2. It seems like the design for the account settings is missing

[ChristophWurst]

Code looks good!

I like the diff balance +427 −1,006 🪶

[kra-mo]

The icon on the account settings feels like a link file it acts like a button (it changes the settings dialog content)

The current dialog content? Originally, it opened a separate dialog. If so, an icon like arrow_forward can be used to indicate navigation instead.

[kra-mo]

This got merged before I got to review it but I have some comments about things that should change.

Overall, it looks really nice :)

but:

• Plus icons are missing from + New text block and + Add internal address
• The + Add mail account button has rounded top corners, as opposed to on the mockup.
• The text in lists is not aligned with that of form components cc @ShGKme (how) can this be done?
• There are wording discrepancies that I outlined

[ShGKme]

The current dialog content? Originally, it opened a separate dialog. If so, an icon like arrow_forward can be used to indicate navigation instead.

It opens a new dialog, but exactly the same size on the same place closing the previous settings dialog. So for the user it almost looks like changing content in the dialog, IMO. But not opening a link.

[jancborchardt]

@GVodyanov @ChristophWurst could you make sure that @kra-mo’s design feedback gets addressed? :)

[ShGKme]

• The + Add mail account button has rounded top corners, as opposed to on the mockup.

I missed it.

It can be fixed in 2 ways:

1. We say that having a classic NcButton is an expected case for the form boxes and makes it work out of the box (in @nextcloud/vue)
2. We call it an edge/advanced case and apply it manually:

<NcFormBox v-slot="{ itemClass }">
  <NcButton :class="itemClass" />
</NcFormBox>

@kra-mo Would you say it should work by default and an expected scenario?

[GVodyanov]

I'll make a follow up PR

[kra-mo]

@kra-mo Would you say it should work by default and an expected scenario?

I think it is expected, yes. A "classic" NcButton can still be used for less informational one-off actions.

[ShGKme]

Then the border radius on the NcButton will be fixed by the nextcloud-vue. ETA 1h cc @GVodyanov

[ShGKme]

• The text in lists is not aligned with that of form components cc @ShGKme (how) can this be done?

I'll have a look in an hour and tell if we can have it asap

[GVodyanov]

I'll make a follow up PR

#12046