Skip to content

feat: Add animation effect for navigation entries#8685

Draft
jancborchardt wants to merge 1 commit into
mainfrom
feat/animate-app-navigation-highlight
Draft

feat: Add animation effect for navigation entries#8685
jancborchardt wants to merge 1 commit into
mainfrom
feat/animate-app-navigation-highlight

Conversation

@jancborchardt

Copy link
Copy Markdown
Contributor

Assisted-by: ClaudeCode:claude-opus-4-8

☑️ Resolves

It would be nice to have an animation of the hover feedback highlight of the NcAppNavigation. This makes it feel nicer and smoother, like you are actually interacting with something.

This is a prototype to see how that could look like. Has been tested in the styleguide.
@susnux @ShGKme please check if this would this be good as a base, or should take a different approach.

nextcloud/server#61621 adds global handling for the animation-quick and animation-slow variables to be zeroed under prefers-reduced-motion.

🖼️ Screenshots

🏚️ Before

Screencast.From.2026-06-27.01-40-20.webm

🏡 After

Screencast.From.2026-06-27.01-34-40.webm

🏁 Checklist

  • ⛑️ Tests are included or are not applicable
  • 📘 Component documentation has been extended, updated or is not applicable
  • 2️⃣ Backport to stable8 for maintained Vue 2 version or not applicable

Assisted-by: ClaudeCode:claude-opus-4-8
Signed-off-by: Jan C. Borchardt <925062+jancborchardt@users.noreply.github.com>
@jancborchardt jancborchardt self-assigned this Jun 26, 2026
@jancborchardt jancborchardt added enhancement New feature or request 3. to review Waiting for reviews feature: app-navigation Related to the app-navigation component design Design, UX, interface and interaction design labels Jun 26, 2026
@jancborchardt jancborchardt moved this to 🏗️ At engineering in 🖍 Design team Jun 26, 2026
@codecov

codecov Bot commented Jun 26, 2026

Copy link
Copy Markdown

Codecov Report

❌ Patch coverage is 1.38889% with 71 lines in your changes missing coverage. Please review.
✅ Project coverage is 52.97%. Comparing base (f54323d) to head (47d32da).
⚠️ Report is 15 commits behind head on main.

Files with missing lines Patch % Lines
...onents/NcAppNavigationList/NcAppNavigationList.vue 1.38% 59 Missing and 12 partials ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##             main    #8685      +/-   ##
==========================================
- Coverage   54.06%   52.97%   -1.10%     
==========================================
  Files         106      106              
  Lines        3479     3549      +70     
  Branches     1008     1022      +14     
==========================================
- Hits         1881     1880       -1     
- Misses       1354     1413      +59     
- Partials      244      256      +12     

☔ View full report in Codecov by Harness.
📢 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.

@susnux

susnux commented Jun 27, 2026

Copy link
Copy Markdown
Contributor

I do not see anything in the "after" screencast that requires JS changes, that should be possible with pure CSS so no heavy mutation observer is required, no?

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

Labels

3. to review Waiting for reviews design Design, UX, interface and interaction design enhancement New feature or request feature: app-navigation Related to the app-navigation component

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants