feat(Settings): redesign to new vue components

[GVodyanov]

Fix #7558

The only difference from the design spec is the NcSelect not being grey and not having the label "inside" the border, but those require nextcloud vue changes.

Updated screenshots:

[SebastianKrupinski]

Looks great! Is this ready for testing?

Can you also rebase to the latest calendar version, it will fix some of the CI errors

[kra-mo]

Just a small note before reviewing the whole thing: I updated the mockup in the issue to use the (future) NcFormBoxSelectNative component for the default reminder and density.

[GVodyanov]

Looks great! Is this ready for testing?

Can you also rebase to the latest calendar version, it will fix some of the CI errors

Yep, it should work... CI tho...

[SebastianKrupinski]

Looking good so far!

But there are a couple glitches

A, Is everything supposed to be highlighted in dark mode?
B. Switch states are not changing when switched (look at Birthday Calendar and Task Calendar)

[kra-mo]

Looks really nice :)

A couple of issues:

• Boxes and groups are not used correctly. "Availability settings" has a low border radius and the CalDAV settings are separated. The discussion here might be useful.
• Default reminder should be above Simple event editor in Editing unless there was a reason not to put it there.
• The keyboard shortcuts should use the new component as well. It's fine if it will be in a followup PR, but it should be done too.

[kra-mo]

A, Is everything supposed to be highlighted in dark mode?

This is the styling we went with for the components themselves, but indeed, dark mode was definitely not thought out very much and should probably be adjusted.

[kra-mo]

I opened nextcloud-libraries/nextcloud-vue#7853

[kra-mo]

B. Switch states are not changing when switched (look at Birthday Calendar and Task Calendar)

And I think this one should be fixed by nextcloud-libraries/nextcloud-vue#7851

[GVodyanov]

A, Is everything supposed to be highlighted in dark mode?

This should fix it, it's a Nextcloud vue thing

B. Switch states are not changing when switched (look at Birthday Calendar and Task Calendar)

Fixed!, will push in a second

[GVodyanov]

@kra-mo

The keyboard shortcuts should use the new component as well. It's fine if it will be in a followup PR, but it should be done too.

These are using NcKbd, isn't that the new component?

[ShGKme]

These are using NcKbd, isn't that the new component?

See: https://nextcloud-vue-components.netlify.app/#/Components/App%20containers/NcAppContent/NcAppSettings?id=ncappsettingsshortcutssection

Inside there is <NcKbd>, but new components include complete hotkey list with even a special AppSettings dialog section

[codecov]

Codecov Report

❌ Patch coverage is 0% with 61 lines in your changes missing coverage. Please review.
✅ Project coverage is 11.09%. Comparing base (859d7d8) to head (4ec261c).
⚠️ Report is 11 commits behind head on main.

Files with missing lines	Patch %	Lines
...onents/AppNavigation/Settings/ShortcutOverview.vue	0.00%	31 Missing ⚠️
src/components/AppNavigation/Settings.vue	0.00%	26 Missing ⚠️
...pNavigation/Settings/SettingsAttachmentsFolder.vue	0.00%	4 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #7682      +/-   ##
==========================================
- Coverage   11.10%   11.09%   -0.01%     
==========================================
  Files         328      328              
  Lines       62162    62174      +12     
  Branches      919      919              
==========================================
  Hits         6901     6901              
- Misses      55125    55137      +12     
  Partials      136      136              

Flag	Coverage Δ
javascript	11.09% <0.00%> (-0.01%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[kra-mo]

@GVodyanov could you please update the screenshots?

[GVodyanov]

@GVodyanov could you please update the screenshots?

Updated!

[kra-mo]

Thank you, looks good :)

The only thing now is that keys for keyboard shortcuts should be capital letters, like on a real keyboard.

[GVodyanov]

Here ya go:

@kra-mo @ShGKme

[ShGKme]

Approving from the component usage side

[ShGKme]

Still approved

[SebastianKrupinski]

Look good, Merge it when you're ready

[ShGKme]

🎉

[GVodyanov]

/backport to stable6.0

[ChristophWurst]

/backport to stable6.0 please