Skip to content

[stable8] fix(NcAppSettingsDialog): Polish dialog navigation and close button#8593

Open
nfebe wants to merge 3 commits into
stable8from
fix/8526-redesign-followups
Open

[stable8] fix(NcAppSettingsDialog): Polish dialog navigation and close button#8593
nfebe wants to merge 3 commits into
stable8from
fix/8526-redesign-followups

Conversation

@nfebe

@nfebe nfebe commented Jun 2, 2026

Copy link
Copy Markdown
Contributor

Addresses the remaining Settings Dialog follow-ups from #8526:

  • Hovering an item and switching the selected item now animate smoothly instead of snapping.
  • The selection pill matches the regular navigation height, so it no longer clips into the rounded corners of the item.
  • The close button sits on a tinted background, so content scrolling underneath no longer bleeds through behind it.

🖼️ Screenshots

🏚️ Before 🏡 After
close-b4 close-After
before-chevron after-chevron

nfebe added 2 commits June 2, 2026 16:29
The dialog's navigation sidebar now mirrors the main app navigation:

- Hovering an item and switching the selected item animate
  smoothly instead of snapping.
- The selection pill matches the regular navigation height, so
  it no longer clips into the rounded corners of the item.

Refs #8526

Signed-off-by: nfebe <fenn25.fn@gmail.com>
The close button now sits on a tinted surface, so content
scrolling underneath no longer bleeds through behind it.

Refs #8526

Signed-off-by: nfebe <fenn25.fn@gmail.com>
@codecov

codecov Bot commented Jun 2, 2026

Copy link
Copy Markdown

Codecov Report

❌ Patch coverage is 87.50000% with 1 line in your changes missing coverage. Please review.
✅ Project coverage is 46.85%. Comparing base (60766f8) to head (783dd8c).
⚠️ Report is 2 commits behind head on stable8.

Files with missing lines Patch % Lines
...onents/NcAppSettingsDialog/NcAppSettingsDialog.vue 85.71% 1 Missing ⚠️
Additional details and impacted files
@@           Coverage Diff            @@
##           stable8    #8593   +/-   ##
========================================
  Coverage    46.85%   46.85%           
========================================
  Files          195      195           
  Lines         4926     4926           
  Branches      1205     1205           
========================================
  Hits          2308     2308           
  Misses        2531     2531           
  Partials        87       87           

☔ 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.

On the NC 34+ design, the collapse chevron of an active item with
sub-sections was rendering white on a lightly tinted background and
its hover state inherited legacy colors. The parent now forces the
chevron icon to use the main text color so it stays readable, and
the chevron's legacy hover backgrounds are scoped to legacy only,
so on the new design the chevron picks up the tertiary button hover
tint and looks consistent across active and idle items.

Refs #8526

Signed-off-by: nfebe <fenn25.fn@gmail.com>
@nfebe nfebe marked this pull request as ready for review June 2, 2026 16:17
@susnux

susnux commented Jun 2, 2026

Copy link
Copy Markdown
Contributor

What about main?

@nfebe

nfebe commented Jun 2, 2026

Copy link
Copy Markdown
Contributor Author

What about main?

We can backport from here once approved.

@jancborchardt jancborchardt left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good, but I would say the close button should have color-main-background rather than being tinted, as the tint calls too much attention to the button.

Comment thread src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue

@kra-mo kra-mo left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good from the screenshots aside from the close button background. I would also like to see how the animations look though. Could you attach a screen recording?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants