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.

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 ⚠️

📢 Thoughts on this report? Let us know!

[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

[GVodyanov]

/backport to stable6.0

[backportbot]

The backport to stable6.0 failed. Please do this backport manually.

# Switch to the target branch and update it
git checkout stable6.0
git pull origin stable6.0

# Create the new backport branch
git checkout -b backport/7682/stable6.0

# Cherry pick the change from the commit sha1 of the change against the default branch
# This might cause conflicts, resolve them
git cherry-pick 4ec261cf

# Push the cherry pick commit to the remote repository and open a pull request
git push origin backport/7682/stable6.0

Error: Failed to cherry pick commits: error: no cherry-pick or revert in progress
fatal: cherry-pick failed

---

Learn more about backports at https://docs.nextcloud.com/server/stable/go.php?to=developer-backports.