[WOOMOB-1421] List-Details layout for bookings on tablet #14720
Conversation
There was a problem hiding this comment.
Pull Request Overview
This PR implements a split-pane layout for the bookings tab on tablet devices, enabling users to view the booking list and details simultaneously. The implementation follows similar patterns used in the Products tab functionality.
- Added tablet layout support with list-detail split view for larger screens
- Modified booking navigation to support different display modes (empty state vs showing specific booking)
- Implemented responsive behavior for configuration changes between single and split-pane layouts
Reviewed Changes
Copilot reviewed 15 out of 15 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| BookingListViewModelTest.kt | Added tests for tablet-specific navigation behavior and booking selection |
| BookingDetailsViewModelTest.kt | Updated tests to use new Mode parameter instead of direct bookingId |
| strings.xml | Added "Booking not selected" string for empty state |
| nav_graph_bookings_details.xml | New navigation graph for booking details with Mode argument |
| nav_graph_bookings.xml | Updated to use new details navigation graph |
| fragment_booking_list.xml | Added split-pane layout with list and details containers |
| TabletLayoutSetupHelper.kt | Added configuration flag for automatic layout adjustment |
| ProductListFragment.kt | Updated to support new layout adjustment configuration |
| DetailsPanePadding.kt | New utility for consistent padding in split-pane details |
| BookingListViewModel.kt | Added tablet-specific logic for auto-opening first booking |
| BookingListFragment.kt | Implemented split-pane functionality and configuration change handling |
| BookingDetailsViewModel.kt | Updated to handle empty mode and nullable booking scenarios |
| BookingDetailsScreen.kt | Added empty state UI and split-pane responsive design |
| BookingDetailsFragment.kt | Added Mode sealed class and configuration change handling |
| BookingsCommunicationViewModel.kt | New communication layer between list and details in split-pane mode |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
| topBar = { | ||
| Toolbar( | ||
| title = viewState.toolbarTitle, | ||
| navigationIcon = if (context.isTwoPanesShouldBeUsed) null else Icons.AutoMirrored.Filled.ArrowBack, |
There was a problem hiding this comment.
[nitpick] Consider extracting the conditional navigation icon logic into a separate function or computed property to improve readability and maintainability.
Copilot uses AI. Check for mistakes.
| override fun onSaveInstanceState(outState: Bundle) { | ||
| outState.putBoolean( | ||
| TWO_PANES_WERE_SHOWN_BEFORE_CONFIG_CHANGE_KEY, | ||
| _binding?.detailNavContainer?.isVisible == true && _binding?.listPaneContainer?.isVisible == true |
There was a problem hiding this comment.
[nitpick] The null-safe checking with _binding?. followed by == true is redundant. Consider using _binding?.detailNavContainer?.isVisible == true or create a helper property to simplify this logic.
Copilot uses AI. Check for mistakes.
Generated by 🚫 Danger |
📲 You can test the changes from this Pull Request in WooCommerce-Wear Android by scanning the QR code below to install the corresponding build.
|
|
|
||
| private fun adjustLayoutForNonTablet(screen: Screen) { | ||
| if (screen.twoPanesWereShownBeforeConfigChange) { | ||
| if (screen.twoPanesWereShownBeforeConfigChange && screen.automaticallyAdjustLayoutAfterConfigChange) { |
There was a problem hiding this comment.
I don't like this logic when switching from split pane to single pane. It shows the detail pane, and we end up with a different navigation stack compared to if we opened the booking details from the list in a single pane from the beginning. This causes some issues with back navigation.
I wanted an option to disable this and handle it separately in the BookingListFragment.
| @@ -0,0 +1,25 @@ | |||
| <?xml version="1.0" encoding="utf-8"?> | |||
| <navigation xmlns:android="http://schemas.android.com/apk/res/android" | |||
There was a problem hiding this comment.
This was separated from the nav_graph_bookings so that I can use this for the details pane.
| * The padding mirrors the margin calculations used in TabletLayoutSetupHelper.setDetailsMargins. | ||
| */ | ||
| @Composable | ||
| fun Modifier.detailsPanePadding(): Modifier { |
There was a problem hiding this comment.
TabletLayoutSetupHelper.setDetailsMargins doesn't work with ComposeView and even if we wrap the ComposeView in a ViewGroup we end up with the whole screen paddes horizontally, including the compose Toolbar. This is not how the details screen look on other tabs, so I've added this modifier to set directly on the booking details content composable.
|
📲 You can test the changes from this Pull Request in WooCommerce Android by scanning the QR code below to install the corresponding build.
|
…split pane The TabletLayoutSetupHelper sets proper margins, but if the root view is a ComposeView it doesn't work.
… to the detail pane in compose
AdamGrzybkowski
force-pushed
the
issue/WOOMOB-1421_booking_details_slit_pane
branch
from
b8c2ec8 to
bc28f65
Compare
3 participants
WOOMOB-1421
Description
This PR adds support for split pane layout on the bookings tab for bigger screens. The implementations mostly follow the Products tab logic. I highly recommend reviewing commit by commit, where I tried to fix issues one by one.
Steps to reproduce
Testing information
Test orientation change, back button behavior etc.
The tests that have been performed
The above
Images/gif
RELEASE-NOTES.txtif necessary. Use the "[Internal]" label for non-user-facing changes.