Skip to content

Comments

feat: Replace 3-dots menu with horizontal buttons (fixes #366)#1756

Open
jacksbox-cassandra wants to merge 1 commit intonextcloud:mainfrom
jacksbox-cassandra:feature/explode-menu-ui-366
Open

feat: Replace 3-dots menu with horizontal buttons (fixes #366)#1756
jacksbox-cassandra wants to merge 1 commit intonextcloud:mainfrom
jacksbox-cassandra:feature/explode-menu-ui-366

Conversation

@jacksbox-cassandra
Copy link

@jacksbox-cassandra jacksbox-cassandra commented Feb 20, 2026

Replace 3-dots menu with horizontal buttons

Summary

This PR implements the UI improvement requested in issue #366 by replacing the 3-dots dropdown menu in the note editor with individual horizontal buttons.

Changes Made

UI Changes

  • Removed dropdown menu: Replaced NcActions dropdown with individual NcButton components
  • Horizontal layout: Arranged Preview/Edit and Fullscreen buttons side-by-side
  • Icon-only buttons: Removed text labels, using tooltips instead (accessible via v-tooltip)
  • Maintained functionality: All existing features preserved including keyboard shortcuts

Technical Changes

  • Updated NotePlain.vue component structure
  • Added CSS for .action-buttons-horizontal layout with proper spacing
  • Imported NcButton component from @nextcloud/vue
  • Added accessibility attributes (aria-label) for screen readers
  • Preserved error state displays for readonly, save errors, and conflicts

User Experience Improvements

  • Faster preview toggling: Users can now quickly switch between Edit/Preview modes with a single click
  • Better visual clarity: Actions are immediately visible without menu interaction
  • Maintained accessibility: CTRL+/ keyboard shortcut still works, plus tooltip assistance
  • Responsive design: Buttons adapt to different screen sizes

Testing Performed

Manual Testing Checklist

  • Preview/Edit toggle button works correctly
  • Fullscreen toggle button works correctly
  • Tooltips display on hover
  • Keyboard shortcuts still functional (CTRL+/)
  • Error states display correctly (readonly, save errors, conflicts)
  • Responsive behavior maintained
  • Accessibility attributes present

Code Quality

  • Vue component syntax validated
  • CSS styling follows Nextcloud design patterns
  • Import statements updated correctly
  • No breaking changes to existing functionality

Fixes

Closes #366

Screenshots

Note: Screenshots would be added here showing before/after comparison of the UI

Before: 3-dots dropdown menu
After: Horizontal icon buttons with tooltips

Additional Notes

  • The "Details" button mentioned in the original issue is prepared for future implementation (currently hidden with showDetailsMenu: false)
  • All existing error handling and state management preserved
  • Change is backward compatible - no API changes required

@jacksbox-cassandra
feat: Replace 3-dots menu with horizontal buttons (fixes nextcloud#366)
f142c56 
- Replace dropdown NcActions menu with individual NcButton components
- Arrange Preview/Edit and Fullscreen buttons horizontally
- Add tooltips for accessibility (v-tooltip directive)
- Maintain all existing functionality and keyboard shortcuts
- Preserve error state displays for readonly/save/conflict states
- Update CSS for horizontal button layout with proper spacing

This improves UX by making Preview toggle more accessible as requested
in issue nextcloud#366, removing unnecessary menu indirection for quick actions.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@JuliaKirschenheuter JuliaKirschenheuter Awaiting requested review from JuliaKirschenheuter JuliaKirschenheuter is a code owner

@enjeck enjeck Awaiting requested review from enjeck enjeck is a code owner

At least 1 approving review is required to merge this pull request.

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

explode the 3 dots menu

1 participant

@jacksbox-cassandra