Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dashboard big screen support with staggered grid layout for cards #13079

Draft
wants to merge 4 commits into
base: trunk
Choose a base branch
from
+184 −124
Draft

Dashboard big screen support with staggered grid layout for cards #13079

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
9939969
Adds grid layout for bigger screens
JorgeMucientes Oct 31, 2024
83227a1
Extract dashboard container out of the xml NestedScroll and SwipeToRe…
JorgeMucientes Dec 5, 2024
0eca83c
Add a composable implementation of swipe to refresh
JorgeMucientes Dec 5, 2024
2b7fbfc
Clean xml layout and ensure we keep the same logic in the DashboardFr…
JorgeMucientes Dec 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion ...erce/src/androidTest/kotlin/com/woocommerce/android/e2e/screens/mystore/StatsComponent.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import com.woocommerce.android.R
import com.woocommerce.android.e2e.helpers.util.Screen
import com.woocommerce.android.ui.dashboard.stats.DashboardStatsTestTags

class StatsComponent : Screen(R.id.dashboardStats_root) {
class StatsComponent : Screen(R.id.my_store_stats_container) {
override fun recover() {
super.recover()
clickOn(R.id.dashboard)
Expand Down
2 changes: 1 addition & 1 deletion .../androidTest/kotlin/com/woocommerce/android/e2e/screens/mystore/TopPerformersComponent.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import com.woocommerce.android.R
import com.woocommerce.android.e2e.helpers.util.Screen
import com.woocommerce.android.ui.dashboard.stats.DashboardStatsTestTags

class TopPerformersComponent : Screen(R.id.dashboardStats_root) {
class TopPerformersComponent : Screen(R.id.my_store_stats_container) {
override fun recover() {
super.recover()
clickOn(R.id.dashboard)
Expand Down
179 changes: 127 additions & 52 deletions WooCommerce/src/main/kotlin/com/woocommerce/android/ui/dashboard/DashboardContainer.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,21 +5,33 @@
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.lazy.staggeredgrid.LazyVerticalStaggeredGrid
import androidx.compose.foundation.lazy.staggeredgrid.StaggeredGridCells
import androidx.compose.foundation.lazy.staggeredgrid.items
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.ExperimentalMaterialApi
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Text
import androidx.compose.material.pullrefresh.PullRefreshIndicator
import androidx.compose.material.pullrefresh.pullRefresh
import androidx.compose.material.pullrefresh.rememberPullRefreshState
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.livedata.observeAsState
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.input.nestedscroll.nestedScroll
import androidx.compose.ui.platform.rememberNestedScrollInteropConnection
import androidx.compose.ui.res.colorResource
import androidx.compose.ui.res.dimensionResource
import androidx.compose.ui.res.painterResource
Expand All @@ -28,11 +40,17 @@
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import com.woocommerce.android.R
import com.woocommerce.android.extensions.WindowSizeClass
import com.woocommerce.android.model.DashboardWidget
import com.woocommerce.android.ui.blaze.creation.BlazeCampaignCreationDispatcher
import com.woocommerce.android.ui.compose.component.WCColoredButton
import com.woocommerce.android.ui.compose.component.WCOutlinedButton
import com.woocommerce.android.ui.dashboard.DashboardViewModel.DashboardEvent.OpenRangePicker
import com.woocommerce.android.ui.dashboard.DashboardViewModel.DashboardWidgetUiModel
import com.woocommerce.android.ui.dashboard.DashboardViewModel.DashboardWidgetUiModel.ConfigurableWidget
import com.woocommerce.android.ui.dashboard.DashboardViewModel.DashboardWidgetUiModel.FeedbackWidget
import com.woocommerce.android.ui.dashboard.DashboardViewModel.DashboardWidgetUiModel.NewWidgetsCard
import com.woocommerce.android.ui.dashboard.DashboardViewModel.DashboardWidgetUiModel.ShareStoreWidget
import com.woocommerce.android.ui.dashboard.blaze.DashboardBlazeCard
import com.woocommerce.android.ui.dashboard.coupons.DashboardCouponsCard
import com.woocommerce.android.ui.dashboard.google.DashboardGoogleAdsCard
Expand All @@ -45,75 +63,132 @@
import com.woocommerce.android.ui.dashboard.topperformers.DashboardTopPerformersWidgetCard
import com.woocommerce.android.ui.main.MainActivityViewModel

@OptIn(ExperimentalMaterialApi::class)
@Composable
fun DashboardContainer(
mainActivityViewModel: MainActivityViewModel,
dashboardViewModel: DashboardViewModel,
blazeCampaignCreationDispatcher: BlazeCampaignCreationDispatcher
blazeCampaignCreationDispatcher: BlazeCampaignCreationDispatcher,
windowSizeClass: WindowSizeClass,
) {
dashboardViewModel.dashboardWidgets.observeAsState().value?.let { widgets ->
WidgetList(
widgetUiModels = widgets,
mainActivityViewModel = mainActivityViewModel,
dashboardViewModel = dashboardViewModel,
blazeCampaignCreationDispatcher = blazeCampaignCreationDispatcher
)
dashboardViewModel.dashboardCardsState.observeAsState().value?.let { state ->

val pullRefreshState = rememberPullRefreshState(state.isRefreshing, dashboardViewModel::onPullToRefresh)
Box(Modifier.pullRefresh(pullRefreshState)) {
DashboardWidgets(
widgetUiModels = state.widgets,
mainActivityViewModel = mainActivityViewModel,
dashboardViewModel = dashboardViewModel,
blazeCampaignCreationDispatcher = blazeCampaignCreationDispatcher,
modifier = Modifier
.fillMaxSize()
.background(MaterialTheme.colors.surface)
.padding(vertical = dimensionResource(id = R.dimen.major_100)),
numberOfColumns = if (windowSizeClass != WindowSizeClass.Compact) 2 else 1
)

PullRefreshIndicator(
refreshing = state.isRefreshing,
state = pullRefreshState,
modifier = Modifier.align(Alignment.TopCenter),
contentColor = MaterialTheme.colors.primary,
)
}
}
}

@Composable
private fun WidgetList(
private fun DashboardWidgets(
widgetUiModels: List<DashboardViewModel.DashboardWidgetUiModel>,
mainActivityViewModel: MainActivityViewModel,
dashboardViewModel: DashboardViewModel,
blazeCampaignCreationDispatcher: BlazeCampaignCreationDispatcher
blazeCampaignCreationDispatcher: BlazeCampaignCreationDispatcher,
modifier: Modifier = Modifier,
numberOfColumns: Int = 1
) {
Column(
verticalArrangement = Arrangement.spacedBy(dimensionResource(id = R.dimen.major_100)),
modifier = Modifier
.fillMaxSize()
.background(MaterialTheme.colors.surface)
.padding(vertical = dimensionResource(id = R.dimen.major_100))
) {
val widgetModifier = Modifier
.fillMaxWidth()
.padding(horizontal = 16.dp)
widgetUiModels.forEach {
AnimatedVisibility(it.isVisible) {
when (it) {
is DashboardViewModel.DashboardWidgetUiModel.ConfigurableWidget -> {
ConfigurableWidgetCard(
widgetUiModel = it,
mainActivityViewModel = mainActivityViewModel,
dashboardViewModel = dashboardViewModel,
blazeCampaignCreationDispatcher = blazeCampaignCreationDispatcher,
modifier = widgetModifier
)
}

is DashboardViewModel.DashboardWidgetUiModel.ShareStoreWidget -> {
ShareStoreCard(
onShareClicked = it.onShareClicked,
modifier = widgetModifier
)
}

is DashboardViewModel.DashboardWidgetUiModel.FeedbackWidget -> {
FeedbackCard(
widget = it,
modifier = widgetModifier
)
}
val widgetModifier = Modifier
.fillMaxWidth()
.padding(horizontal = 16.dp)
val nestedScrollInterop = rememberNestedScrollInteropConnection()

is DashboardViewModel.DashboardWidgetUiModel.NewWidgetsCard -> {
NewWidgetsCard(
state = it,
modifier = widgetModifier
)
}
if (numberOfColumns == 1) {
LazyColumn(
modifier = modifier.nestedScroll(nestedScrollInterop),
verticalArrangement = Arrangement.spacedBy(16.dp),
) {
items(widgetUiModels) { widget ->
AnimatedVisibility(widget.isVisible) {
DashboardWidgetCard(
widget,
mainActivityViewModel,
dashboardViewModel,
blazeCampaignCreationDispatcher,
widgetModifier
)
}
}
}
} else {
LazyVerticalStaggeredGrid(
modifier = modifier.nestedScroll(nestedScrollInterop),
columns = StaggeredGridCells.Adaptive(400.dp),
verticalItemSpacing = 16.dp,
horizontalArrangement = Arrangement.SpaceEvenly,
) {
items(widgetUiModels) { widget ->
AnimatedVisibility(widget.isVisible) {
DashboardWidgetCard(
widget,
mainActivityViewModel,
dashboardViewModel,
blazeCampaignCreationDispatcher,
widgetModifier
)
}
}
}
}
}

@Composable
private fun DashboardWidgetCard(
it: DashboardWidgetUiModel,
mainActivityViewModel: MainActivityViewModel,
dashboardViewModel: DashboardViewModel,
blazeCampaignCreationDispatcher: BlazeCampaignCreationDispatcher,
widgetModifier: Modifier

Check warning

Code scanning / Android Lint

Guidelines for Modifier parameters in a Composable function Warning

Modifier parameter should be named modifier
) {
when (it) {
is ConfigurableWidget -> {
ConfigurableWidgetCard(
widgetUiModel = it,
mainActivityViewModel = mainActivityViewModel,
dashboardViewModel = dashboardViewModel,
blazeCampaignCreationDispatcher = blazeCampaignCreationDispatcher,
modifier = widgetModifier
)
}

is ShareStoreWidget -> {
ShareStoreCard(
onShareClicked = it.onShareClicked,
modifier = widgetModifier
)
}

is FeedbackWidget -> {
FeedbackCard(
widget = it,
modifier = widgetModifier
)
}

is NewWidgetsCard -> {
NewWidgetsCard(
state = it,
modifier = widgetModifier
)
}
}
}

Expand Down
35 changes: 13 additions & 22 deletions WooCommerce/src/main/kotlin/com/woocommerce/android/ui/dashboard/DashboardFragment.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,10 +30,10 @@ import com.woocommerce.android.extensions.getColorCompat
import com.woocommerce.android.extensions.handleNotice
import com.woocommerce.android.extensions.handleResult
import com.woocommerce.android.extensions.navigateSafely
import com.woocommerce.android.extensions.scrollStartEvents
import com.woocommerce.android.extensions.showDateRangePicker
import com.woocommerce.android.extensions.startHelpActivity
import com.woocommerce.android.extensions.verticalOffsetChanges
import com.woocommerce.android.extensions.windowSizeClass
import com.woocommerce.android.model.DashboardWidget
import com.woocommerce.android.support.help.HelpOrigin
import com.woocommerce.android.tools.SelectedSite
Expand All @@ -51,6 +51,7 @@ import com.woocommerce.android.ui.dashboard.DashboardViewModel.DashboardEvent.Fe
import com.woocommerce.android.ui.dashboard.DashboardViewModel.DashboardEvent.FeedbackPositiveAction
import com.woocommerce.android.ui.dashboard.DashboardViewModel.DashboardEvent.OpenEditWidgets
import com.woocommerce.android.ui.dashboard.DashboardViewModel.DashboardEvent.OpenRangePicker
import com.woocommerce.android.ui.dashboard.DashboardViewModel.DashboardEvent.RefreshJitm
import com.woocommerce.android.ui.dashboard.DashboardViewModel.DashboardEvent.ShareStore
import com.woocommerce.android.ui.dashboard.DashboardViewModel.DashboardEvent.ShowPrivacyBanner
import com.woocommerce.android.ui.dashboard.DashboardViewModel.DashboardWidgetUiModel
Expand Down Expand Up @@ -137,24 +138,15 @@ class DashboardFragment :
DashboardContainer(
mainActivityViewModel = mainActivityViewModel,
dashboardViewModel = dashboardViewModel,
blazeCampaignCreationDispatcher = blazeCampaignCreationDispatcher
blazeCampaignCreationDispatcher = blazeCampaignCreationDispatcher,
windowSizeClass = requireContext().windowSizeClass
)
}
}
}

binding.myStoreRefreshLayout.setOnRefreshListener {
binding.myStoreRefreshLayout.isRefreshing = false
dashboardViewModel.onPullToRefresh()
refreshJitm()
}

prepareJetpackBenefitsBanner()

binding.statsScrollView.scrollStartEvents()
.onEach { usageTracksEventEmitter.interacted() }
.launchIn(viewLifecycleOwner.lifecycleScope)

setupStateObservers()
setupResultHandlers()
}
Expand Down Expand Up @@ -188,6 +180,8 @@ class DashboardFragment :

is ShowSnackbar -> ToastUtils.showToast(requireContext(), event.message)

is RefreshJitm -> refreshJitm()

else -> event.isHandled = false
}
}
Expand All @@ -197,10 +191,10 @@ class DashboardFragment :
dashboardViewModel.jetpackBenefitsBannerState.observe(viewLifecycleOwner) { jetpackBenefitsBanner ->
onVisitorStatsUnavailable(jetpackBenefitsBanner)
}
dashboardViewModel.dashboardWidgets.observe(viewLifecycleOwner) { widgets ->
dashboardViewModel.dashboardCardsState.observe(viewLifecycleOwner) { state ->
// Show banners only if onboarding list is NOT displayed
if (
widgets.none {
state.widgets.none {
(it as? DashboardWidgetUiModel.ConfigurableWidget)?.widget?.type == DashboardWidget.Type.ONBOARDING
}
) {
Expand All @@ -210,9 +204,6 @@ class DashboardFragment :
dashboardViewModel.hasNewWidgets.observe(viewLifecycleOwner) { hasNewWidgets ->
editButtonBadge.isVisible = hasNewWidgets
}
dashboardViewModel.isRefreshingOnBackground.observe(viewLifecycleOwner) { isRefreshing ->
binding.myStoreRefreshLayout.isRefreshing = isRefreshing
}
}

private fun setupResultHandlers() {
Expand Down Expand Up @@ -325,10 +316,6 @@ class DashboardFragment :

override fun getFragmentSubtitle(): String = dashboardViewModel.storeName.value ?: ""

override fun scrollToTop() {
binding.statsScrollView.smoothScrollTo(0, 0)
}

private fun handleFeedbackRequestPositiveClick() {
// Request a ReviewInfo object from the Google Reviews API. If this fails
// we just move on as there isn't anything we can do.
Expand Down Expand Up @@ -362,7 +349,11 @@ class DashboardFragment :
)
}

override fun shouldExpandToolbar() = binding.statsScrollView.scrollY == 0
override fun shouldExpandToolbar() = true
Copy link
Contributor Author

Choose a reason for hiding this comment

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

This is a small issue I'm not sure it can be resolved with the current implementation. This callback handles showing the toolbar collapsed/expanded properly when navigating back and forth from dashboard. Using LazyColumn or LazyStaggered grid we don't have access to scroll position and thus we won't be able to tell if the toolbar should be expanded or collapsed. By default we'll show it expanded and as soon as the user scrolls it will adjust accordingly:

toolbarExpandedDefault.mp4

I think this is an acceptable tradeoff if we get proper support for tablet screens.


override fun scrollToTop() {
return
}

@OptIn(ExperimentalBadgeUtils::class)
override fun onCreateMenu(menu: Menu, menuInflater: MenuInflater) {
Expand Down
Loading
Loading