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

Issue/11750 dashboard big screen support #13488

Open
wants to merge 14 commits into
base: trunk
Choose a base branch
from
+252 −159
Open

Issue/11750 dashboard big screen support #13488

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
14 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
8d9bedf
Merge branch 'trunk' into issue/11750-dashboard-big-screen-support
JorgeMucientes Jan 14, 2025
86bb062
Merge branch 'trunk' into issue/11750-dashboard-big-screen-support
JorgeMucientes Feb 6, 2025
4bbe083
Refactor: Adapt Dashboard card columns to Window Size Classes
JorgeMucientes Feb 6, 2025
c72ece0
Fix unit tests after adding composable pull to refresh implementation
JorgeMucientes Feb 7, 2025
3189ad8
Remove animation when cards are displayed in multiple columns
JorgeMucientes Feb 7, 2025
5244644
Update release notes
JorgeMucientes Feb 7, 2025
8c52d0c
Adjust dashboard card paddings
JorgeMucientes Feb 7, 2025
581d2e9
Fix the unexisting UI component reference.
pachlava Feb 7, 2025
42aa734
Merge branch 'trunk' into issue/11750-dashboard-big-screen-support
JorgeMucientes Feb 7, 2025
3259fb8
Update release notes
JorgeMucientes Feb 7, 2025
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
3 changes: 2 additions & 1 deletion WooCommerce/build.gradle
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ fladle {
"notPackage com.woocommerce.android.e2e.tests.screenshot"
]
devices = [
[ "model": "Pixel2.arm", "version": "30" ]
["model": "Pixel2.arm", "version": "30"]
]
localResultsDir = "$rootDir/build/instrumented-tests"

Expand Down Expand Up @@ -411,6 +411,7 @@ dependencies {
implementation(libs.androidx.compose.material.icons.extended)
implementation(libs.androidx.compose.ui.text.google.fonts)
implementation(libs.androidx.navigation.compose)
implementation(libs.androidx.adaptive.android)
Copy link
Contributor Author

@JorgeMucientes JorgeMucientes Feb 7, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

Added this dependency to rely on official library to categorize screen size. We currently have a custom implmentation of WindowSizeClass but I think we should be using the official one. Also the custom implementation of WindowSizeClass currently only exposes windowHeightSizeClass but not windowWidthSizeClass. So instead of manually adding windowWidthSizeClass, I figured we could use the official size class library for it.


implementation(libs.androidx.hilt.navigation.compose)
implementation(libs.androidx.constraintlayout.compose)
Expand Down
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
211 changes: 156 additions & 55 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,34 +5,50 @@
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.rememberScrollState
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.verticalScroll
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
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.window.core.layout.WindowSizeClass
import androidx.window.core.layout.WindowWidthSizeClass
import com.woocommerce.android.R
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,81 +61,166 @@
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 = when (windowSizeClass.windowWidthSizeClass) {
Copy link
Member

Choose a reason for hiding this comment

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

Should we coerce the numberOfColumns to the number of available cards (coerceIn(maximumValue = state.widgets.size)? For example if I have only one card, and I use the app in landscape, it will appear like this:

Screenshot_20250210_185256

WindowWidthSizeClass.COMPACT -> 1
WindowWidthSizeClass.MEDIUM -> 2
WindowWidthSizeClass.EXPANDED -> 3
else -> 1
}
)

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

@Composable
private fun WidgetList(
widgetUiModels: List<DashboardViewModel.DashboardWidgetUiModel>,
private fun DashboardWidgets(
widgetUiModels: List<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
)
}
val widgetModifier = Modifier
.fillMaxWidth()
.padding(horizontal = 16.dp)
val nestedScrollInterop = rememberNestedScrollInteropConnection()

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

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

is DashboardViewModel.DashboardWidgetUiModel.NewWidgetsCard -> {
NewWidgetsCard(
state = it,
modifier = widgetModifier
)
if (numberOfColumns == 1) {
Column(
modifier = modifier
.nestedScroll(nestedScrollInterop)
.verticalScroll(rememberScrollState()),
verticalArrangement = Arrangement.spacedBy(16.dp),
) {
widgetUiModels.forEach { widget ->
AnimatedVisibility(widget.isVisible) {
DashboardWidgetCard(
widget,
mainActivityViewModel,
dashboardViewModel,
blazeCampaignCreationDispatcher,
widgetModifier
)
}
}
}
} else {
val widgetColumns = splitWidgetsIntoColumns(
numberOfColumns = numberOfColumns,
visibleUiWidgets = widgetUiModels.filter { it.isVisible }
)
Row(
modifier = modifier
.nestedScroll(nestedScrollInterop)
.verticalScroll(rememberScrollState())
) {
widgetColumns.forEach { columnWidgets ->
Column(
modifier = Modifier.weight(1f),
verticalArrangement = Arrangement.spacedBy(8.dp)
) {
columnWidgets.forEach { widget ->
AnimatedVisibility(widget.isVisible) {
DashboardWidgetCard(
widget,
mainActivityViewModel,
dashboardViewModel,
blazeCampaignCreationDispatcher,
widgetModifier
)
}
}
}
}
}
}
}

private fun splitWidgetsIntoColumns(
numberOfColumns: Int,
visibleUiWidgets: List<DashboardWidgetUiModel>
): MutableList<MutableList<DashboardWidgetUiModel>> {
val widgetColumns = MutableList<MutableList<DashboardWidgetUiModel>>(numberOfColumns) { mutableListOf() }
for ((index, item) in visibleUiWidgets.withIndex()) {
widgetColumns[index % numberOfColumns].add(item)
}
return widgetColumns
}

@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
)
}
}
}

@Composable
private fun ConfigurableWidgetCard(
widgetUiModel: DashboardViewModel.DashboardWidgetUiModel.ConfigurableWidget,
widgetUiModel: DashboardWidgetUiModel.ConfigurableWidget,
mainActivityViewModel: MainActivityViewModel,
dashboardViewModel: DashboardViewModel,
blazeCampaignCreationDispatcher: BlazeCampaignCreationDispatcher,
Expand Down Expand Up @@ -227,7 +328,7 @@

@Composable
private fun FeedbackCard(
widget: DashboardViewModel.DashboardWidgetUiModel.FeedbackWidget,
widget: DashboardWidgetUiModel.FeedbackWidget,
modifier: Modifier
) {
LaunchedEffect(Unit) {
Expand Down Expand Up @@ -271,7 +372,7 @@

@Composable
private fun NewWidgetsCard(
state: DashboardViewModel.DashboardWidgetUiModel.NewWidgetsCard,
state: DashboardWidgetUiModel.NewWidgetsCard,
modifier: Modifier
) {
Column(
Expand Down
Loading