Skip to content

[Woo POS] Adapt the UI to be usable on smaller devices #11940

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

Merged
kidinov merged 15 commits into from
Jul 12, 2024
Merged

[Woo POS] Adapt the UI to be usable on smaller devices #11940

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
482931a
Preview to simualte min supported device size
kidinov Jul 8, 2024
91ec0e5
Simulate home screen situation for the cart
kidinov Jul 8, 2024
3512308
Cart adopted for nerow screens
kidinov Jul 8, 2024
b1af679
Adaptive margisn for home screen
kidinov Jul 8, 2024
a901362
Fixed items showing on the totals screen
kidinov Jul 8, 2024
5920f74
Adaptive margins to the totals screen
kidinov Jul 8, 2024
a801070
Adaptive margins to the cart screen
kidinov Jul 8, 2024
bbc0790
Adaptive margins to the payment success screen
kidinov Jul 8, 2024
0a2fd63
Removed adaptive margin from the icon size
kidinov Jul 8, 2024
63489a8
Adaptive padding to the toolbar
kidinov Jul 8, 2024
de9ff71
Fixed formatting
kidinov Jul 8, 2024
6baaf09
Merge branch 'refs/heads/11895-woo-pos-entry-point-eligibility-condit…
kidinov Jul 8, 2024
0ad2907
Merge branch 'refs/heads/11895-woo-pos-entry-point-eligibility-condit…
kidinov Jul 9, 2024
1c4591d
Merge branch '11895-woo-pos-entry-point-eligibility-conditions-improv…
backwardstruck Jul 10, 2024
ca81f37
Merge branch 'trunk' into 11937-woo-pos-adapt-the-ui-to-be-usable-on-…
kidinov Jul 12, 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 ...tlin/com/woocommerce/android/ui/woopos/common/composeui/WooPosComposePreviewAnnotation.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ import androidx.compose.ui.tooling.preview.Preview
@Preview(
name = "Tablet Small",
showSystemUi = true,
device = "spec:width=440dp,height=920dp,dpi=420,isRound=false,chinSize=0dp,orientation=landscape",
device = "spec:width=674dp,height=800dp,dpi=420,isRound=false,chinSize=0dp,orientation=landscape",
uiMode = Configuration.UI_MODE_TYPE_NORMAL
)
annotation class WooPosPreview
35 changes: 35 additions & 0 deletions ...ommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/common/composeui/WooPosSizes.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
package com.woocommerce.android.ui.woopos.common.composeui

import androidx.compose.runtime.Composable
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import com.woocommerce.android.ui.woopos.util.ext.getLongestScreenSideDp

@Composable
fun Dp.toAdaptivePadding(): Dp {
Copy link
Contributor

@backwardstruck backwardstruck Jul 8, 2024

Choose a reason for hiding this comment

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

Nice way to ensure padding is adjusted based on screen size.

Copy link
Contributor Author

@kidinov kidinov Jul 9, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

@samiuelson wdyt about this approach? That's kinda naive, but it seems to be working

Also, if we go with this, we should not forget to use that on all the paddings

val longestSide = LocalContext.current.getLongestScreenSideDp()
return when {
longestSide < 880.dp -> {
val calculatedMargin = this * 0.5f
calculatedMargin.makeDividableByFour()
}

longestSide < 1200.dp -> {
val calculatedMargin = this * 0.75f
calculatedMargin.makeDividableByFour()
}

else -> this
}
}

@Composable
private fun Dp.makeDividableByFour(): Dp {
val remainder = this.value % 4
return if (remainder == 0f) {
this
} else {
this + (4 - remainder).dp
}
}
33 changes: 17 additions & 16 deletions WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/WooPosHomeScreen.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ import androidx.compose.ui.unit.dp
import androidx.hilt.navigation.compose.hiltViewModel
import com.woocommerce.android.ui.woopos.common.composeui.WooPosPreview
import com.woocommerce.android.ui.woopos.common.composeui.WooPosTheme
import com.woocommerce.android.ui.woopos.common.composeui.toAdaptivePadding
import com.woocommerce.android.ui.woopos.home.cart.WooPosCartScreen
import com.woocommerce.android.ui.woopos.home.products.WooPosProductsScreen
import com.woocommerce.android.ui.woopos.home.totals.WooPosTotalsScreen
Expand Down Expand Up @@ -100,9 +101,9 @@ private fun WooPosHomeScreen(
when (state) {
WooPosHomeState.Cart.Empty,
WooPosHomeState.Cart.NotEmpty,
WooPosHomeState.Checkout.NotPaid -> 0.dp
WooPosHomeState.Checkout.NotPaid -> 0.dp.toAdaptivePadding()

WooPosHomeState.Checkout.Paid -> 24.dp
WooPosHomeState.Checkout.Paid -> 24.dp.toAdaptivePadding()
},
label = "totalsStartPaddingAnimatedDp"
)
Expand Down Expand Up @@ -133,43 +134,43 @@ private fun WooPosHomeScreen(
.fillMaxWidth(),
) {
Row(modifier = Modifier.width(productsWidthDp)) {
Spacer(modifier = Modifier.width(40.dp))
Spacer(modifier = Modifier.width(40.dp.toAdaptivePadding()))
WooPosProductsScreen(
modifier = Modifier
.width(productsWidthDp - 56.dp)
.padding(top = 36.dp)
.width(productsWidthDp - 56.dp.toAdaptivePadding())
.padding(top = 36.dp.toAdaptivePadding())
)
Spacer(modifier = Modifier.width(16.dp))
Spacer(modifier = Modifier.width(16.dp.toAdaptivePadding()))
}
Row(modifier = Modifier.width(cartWidthDp)) {
Spacer(modifier = Modifier.width(24.dp))
Spacer(modifier = Modifier.width(24.dp.toAdaptivePadding()))
Box {
WooPosCartScreen(
Modifier
.width(cartWidthDp - 48.dp)
.padding(vertical = 24.dp)
.width(cartWidthDp - 48.dp.toAdaptivePadding())
.padding(vertical = 24.dp.toAdaptivePadding())
)
Box(
modifier = Modifier
.width(cartWidthDp - 48.dp)
.padding(vertical = 24.dp)
.width(cartWidthDp - 48.dp.toAdaptivePadding())
.padding(vertical = 24.dp.toAdaptivePadding())
.fillMaxHeight()
.background(
color = MaterialTheme.colors.background.copy(alpha = cartOverlayIntensity),
shape = RoundedCornerShape(16.dp)
shape = RoundedCornerShape(16.dp.toAdaptivePadding())
)
)
}
Spacer(modifier = Modifier.width(24.dp))
Spacer(modifier = Modifier.width(24.dp.toAdaptivePadding()))
}
Row(modifier = Modifier.width(totalsWidthDp)) {
Spacer(modifier = Modifier.width(totalsStartPaddingDp))
WooPosTotalsScreen(
modifier = Modifier
.width(totalsWidthDp - 24.dp - totalsStartPaddingDp)
.padding(vertical = 24.dp)
.width(totalsWidthDp - 24.dp.toAdaptivePadding() - totalsStartPaddingDp)
.padding(vertical = 24.dp.toAdaptivePadding())
)
Spacer(modifier = Modifier.width(24.dp))
Spacer(modifier = Modifier.width(24.dp.toAdaptivePadding()))
}
}
}
Expand Down
Loading