feat: enhance preview media controls layout and migrate to bubble menu - #3138
Merged
Conversation
Member
Author
|
@kulmann was thinking about using the same bubble menu like for the epub reader in a next iteration, worth a try ? also rearranged the grouping because it was kinda off, adding vertical lines helps the user to navigate 
|
AlexAndBear
changed the title
Member
|
@AlexAndBear bubble menu is worth a try, good idea. All the changes you already have are really helpful: mobile layout, grouping, vertical separator lines all improve the usability 馃挭 |
AlexAndBear
force-pushed
the
fix/preview-mobile-controls-layout
branch
from
August 17, 2026 06:45
9e6efb3 to
0c0a0be
Compare
Reorganize preview media controls into logical groups with improved mobile layout: - Keep navigation (previous/next) as full-width row on mobile - Add control groups: navigation, image actions, view actions, resource actions - Normalize spacing between control groups using gap utilities
Change fullscreen button visibility from md to sm breakpoint to match the navigation group behavior for consistent responsive layout.
Add visual dividers between control groups and wrap related controls: - Image actions group (shrink, zoom, rotate left, rotate right, reset) - View actions group (photo roll toggle, fullscreen) - Resource actions group (favorite, delete) - Use consistent gap-1 spacing within groups
Hide divider after navigation group on mobile to improve visual hierarchy, while keeping other dividers visible for better control grouping.
Replace custom styled container with OcBubbleMenu from design system for consistent styling and improved maintainability. Add horizontal padding (px-2) on mobile navigation group to prevent prev/next controls from touching container edges.
AlexAndBear
force-pushed
the
fix/preview-mobile-controls-layout
branch
from
August 17, 2026 06:54
0c0a0be to
1e3926e
Compare
AlexAndBear
changed the title
Member
Author
|
Increase horizontal padding from px-2 to px-4 to ensure hover backgrounds stay within the rounded bubble menu container.
AlexAndBear
force-pushed
the
fix/preview-mobile-controls-layout
branch
from
August 17, 2026 07:04
c38a50c to
7131833
Compare
Switch from shallowMount to mount in MediaControls.spec.ts to properly render child components (oc-bubble-menu, oc-button, oc-icon) and allow test selectors to find DOM elements.
AlexAndBear
force-pushed
the
fix/preview-mobile-controls-layout
branch
from
August 17, 2026 07:18
cfcf98e to
ee48813
Compare
JammingBen
approved these changes
Aug 17, 2026
github-project-automation
Bot
moved this from In Progress
to Done
in OpenCloud Team Board
kulmann
approved these changes
Aug 17, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Enhance the preview media controls by migrating to the
OcBubbleMenucomponent from the design system and improving the mobile layout behavior.Changes included:
OcBubbleMenufor consistent styling and improved maintainabilitysmto match navigation behaviorBefore
After
Related Issue
How Has This Been Tested?
pnpm test:unit --run packages/web-app-preview/tests/unit/components/MediaControls.spec.tspnpm exec prettier --check packages/web-app-preview/src/components/MediaControls.vueTypes of changes