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

[2 pane layout] Tablet mode detection logic change #13228

Merged
merged 10 commits into from
Jan 30, 2025
Merged

[2 pane layout] Tablet mode detection logic change #13228

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
b45041b
Change the window size detection logic so that we consider both width…
AnirudhBhat Dec 31, 2024
62428af
Remove needless blank line
AnirudhBhat Dec 31, 2024
e0b9d62
Add release notes
AnirudhBhat Jan 2, 2025
f43bda8
Remove mixing of window size logic and our custom two pane layout logic
AnirudhBhat Jan 28, 2025
f4e100c
Fix detekt errors
AnirudhBhat Jan 28, 2025
e74ef96
Merge branch 'refs/heads/trunk' into issue/12861-windowsize-detection…
AnirudhBhat Jan 28, 2025
3f8497f
Remove unused imports and add necessary import
AnirudhBhat Jan 28, 2025
dd61dda
Update release notes
AnirudhBhat Jan 28, 2025
91c4324
Rename variable names used in analytics for better understanding.
AnirudhBhat Jan 30, 2025
7e2c9bc
Merge branch 'refs/heads/trunk' into issue/12861-windowsize-detection…
AnirudhBhat Jan 30, 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
1 change: 1 addition & 0 deletions RELEASE-NOTES.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
*** For entries which are touching the Android Wear app's, start entry with `[WEAR]` too.
21.6
-----
- [*] Updated tablet detection logic to consider both width and height dimensions, enhancing compatibility with larger phones and tablets, particularly in landscape mode [https://github.com/woocommerce/woocommerce-android/pull/13228]


21.5
Expand Down
5 changes: 2 additions & 3 deletions WooCommerce/src/main/kotlin/com/woocommerce/android/analytics/AnalyticsExt.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,11 @@ package com.woocommerce.android.analytics
import android.content.Context
import com.woocommerce.android.analytics.AnalyticsTracker.Companion.VALUE_DEVICE_TYPE_COMPACT
import com.woocommerce.android.analytics.AnalyticsTracker.Companion.VALUE_DEVICE_TYPE_REGULAR
import com.woocommerce.android.extensions.WindowSizeClass
import com.woocommerce.android.extensions.windowSizeClass
import com.woocommerce.android.extensions.isTwoPanesShouldBeUsed

val Context.deviceTypeToAnalyticsString: String
get() = buildAnalyticsDeviceTypeValue(
IsScreenLargerThanCompactValue(value = windowSizeClass != WindowSizeClass.Compact)
IsScreenLargerThanCompactValue(value = isTwoPanesShouldBeUsed)
Copy link
Contributor

Choose a reason for hiding this comment

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

IsScreenLargerThanCompactValue should probably be renamed? I see that we track:

const val VALUE_DEVICE_TYPE_REGULAR = "regular"
        const val VALUE_DEVICE_TYPE_COMPACT = "compact"

But is this the same as 2 panes and 1 pane?

Copy link
Contributor

Choose a reason for hiding this comment

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

Logically it seems that what we want to track -> either 2 panes or 1 pane used, but naming is old so maybe confusing. Wdyt regarding this?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I've renamed variables used for analytics here: 91c4324

I've commented for more clarity on why we had kept the values for analytics as it is.

)

val IsScreenLargerThanCompactValue.deviceTypeToAnalyticsString: String
Expand Down
26 changes: 18 additions & 8 deletions WooCommerce/src/main/kotlin/com/woocommerce/android/extensions/ContextExt.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,19 +15,29 @@ import androidx.annotation.ColorRes
import androidx.core.content.ContextCompat
import com.woocommerce.android.util.SystemVersionUtils
import kotlinx.parcelize.Parcelize
import kotlin.math.max
import kotlin.math.min

val Context.windowSizeClass: WindowSizeClass
get() = determineWindowWidthSizeClassByGivenSize(resources.configuration.screenWidthDp)
val Context.isTwoPanesShouldBeUsed: Boolean
get() = determineIfTwoPanesShouldBeUsed(
resources.configuration.screenWidthDp,
resources.configuration.screenHeightDp
)

val Context.windowHeightSizeClass: WindowSizeClass
get() = determineWindowHeightSizeClassByGivenSize(resources.configuration.screenHeightDp)

private fun determineWindowWidthSizeClassByGivenSize(sizeDp: Int): WindowSizeClass {
return when {
sizeDp < WindowSizeClass.Compact.maxWidthDp -> WindowSizeClass.Compact
sizeDp < WindowSizeClass.Medium.maxWidthDp -> WindowSizeClass.Medium
else -> WindowSizeClass.ExpandedAndBigger
}
private const val MIN_SCREEN_SHORT_SIZE_DP = 674
private const val MIN_SCREEN_LONG_SIZE_DP = 800

private fun determineIfTwoPanesShouldBeUsed(widthDp: Int, heightDp: Int): Boolean {
val minScreenShortSizeDP = MIN_SCREEN_SHORT_SIZE_DP
val minScreenLongSizeDP = MIN_SCREEN_LONG_SIZE_DP

val shortSize = min(widthDp, heightDp)
val longSize = max(widthDp, heightDp)

return shortSize >= minScreenShortSizeDP && longSize >= minScreenLongSizeDP
}

private fun determineWindowHeightSizeClassByGivenSize(sizeDp: Int): WindowSizeClass {
Expand Down
33 changes: 15 additions & 18 deletions ...src/main/kotlin/com/woocommerce/android/ui/orders/creation/OrderCreateEditFormFragment.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,16 +37,15 @@ import com.woocommerce.android.R
import com.woocommerce.android.databinding.FragmentOrderCreateEditFormBinding
import com.woocommerce.android.databinding.LayoutOrderCreationCustomerInfoBinding
import com.woocommerce.android.databinding.OrderCreationAdditionalInfoCollectionSectionBinding
import com.woocommerce.android.extensions.WindowSizeClass
import com.woocommerce.android.extensions.handleDialogNotice
import com.woocommerce.android.extensions.handleDialogResult
import com.woocommerce.android.extensions.handleResult
import com.woocommerce.android.extensions.hide
import com.woocommerce.android.extensions.isNotNullOrEmpty
import com.woocommerce.android.extensions.isTwoPanesShouldBeUsed
import com.woocommerce.android.extensions.navigateSafely
import com.woocommerce.android.extensions.show
import com.woocommerce.android.extensions.takeIfNotEqualTo
import com.woocommerce.android.extensions.windowSizeClass
import com.woocommerce.android.model.Address
import com.woocommerce.android.model.Order
import com.woocommerce.android.ui.barcodescanner.BarcodeScanningFragment
Expand Down Expand Up @@ -119,7 +118,6 @@ class OrderCreateEditFormFragment :
BackPressListener {
private companion object {
private const val TABLET_PANES_WIDTH_RATIO = 0.5F
private const val XL_TABLET_PANES_WIDTH_RATIO = 0.6F
}
private val viewModel by fixedHiltNavGraphViewModels<OrderCreateEditViewModel>(R.id.nav_graph_order_creations)
private val sharedViewModel: ProductSelectorSharedViewModel by activityViewModels()
Expand Down Expand Up @@ -171,8 +169,8 @@ class OrderCreateEditFormFragment :
viewModel.addCoupon(it)
}
handleTaxRateSelectionResult()
viewModel.onDeviceConfigurationChanged(requireContext().windowSizeClass)
if (requireContext().windowSizeClass != WindowSizeClass.Compact) syncSelectedItems()
viewModel.onDeviceConfigurationChanged(requireContext().isTwoPanesShouldBeUsed)
if (requireContext().isTwoPanesShouldBeUsed) syncSelectedItems()
}

private fun syncSelectedItems() {
Expand Down Expand Up @@ -229,13 +227,12 @@ class OrderCreateEditFormFragment :
}

private fun FragmentOrderCreateEditFormBinding.adjustUIForScreenSize() {
productSelectorNavContainer.isVisible = requireContext().windowSizeClass != WindowSizeClass.Compact
when (requireContext().windowSizeClass) {
WindowSizeClass.Compact -> twoPaneLayoutGuideline.setGuidelinePercent(0.0f)
WindowSizeClass.Medium -> twoPaneLayoutGuideline.setGuidelinePercent(TABLET_PANES_WIDTH_RATIO)
WindowSizeClass.ExpandedAndBigger -> twoPaneLayoutGuideline.setGuidelinePercent(XL_TABLET_PANES_WIDTH_RATIO)
productSelectorNavContainer.isVisible = requireContext().isTwoPanesShouldBeUsed
when (requireContext().isTwoPanesShouldBeUsed) {
false -> twoPaneLayoutGuideline.setGuidelinePercent(0.0f)
true -> twoPaneLayoutGuideline.setGuidelinePercent(TABLET_PANES_WIDTH_RATIO)
}
setupToolbars(requireContext().windowSizeClass != WindowSizeClass.Compact)
setupToolbars(requireContext().isTwoPanesShouldBeUsed)
}

private fun FragmentOrderCreateEditFormBinding.setupToolbars(isTablet: Boolean) {
Expand Down Expand Up @@ -605,7 +602,7 @@ class OrderCreateEditFormFragment :
binding.productsSection.hideAddProductsHeaderActions()
binding.productsSection.hideHeader()
binding.productsSection.content = null
if (requireContext().windowSizeClass == WindowSizeClass.Compact) {
if (!requireContext().isTwoPanesShouldBeUsed) {
binding.productsSection.setProductSectionButtons(
addProductsButton = AddButton(
text = getString(R.string.order_creation_add_products),
Expand All @@ -631,7 +628,7 @@ class OrderCreateEditFormFragment :
private fun productAddedCustomAmountUnset(binding: FragmentOrderCreateEditFormBinding) {
val isEditable = viewModel.viewStateData.liveData.value?.isEditable == true
if (isEditable) {
if (requireContext().windowSizeClass == WindowSizeClass.Compact) {
if (!requireContext().isTwoPanesShouldBeUsed) {
binding.productsSection.showAddProductsHeaderActions()
} else {
binding.productsSection.hideAddProductsHeaderActions()
Expand Down Expand Up @@ -662,7 +659,7 @@ class OrderCreateEditFormFragment :
binding.customAmountsSection.removeCustomSectionButtons()
binding.customAmountsSection.showHeader()
if (viewModel.viewStateData.liveData.value?.isEditable == true) {
if (requireContext().windowSizeClass == WindowSizeClass.Compact) {
if (!requireContext().isTwoPanesShouldBeUsed) {
binding.productsSection.showAddProductsHeaderActions()
} else {
binding.productsSection.hideAddProductsHeaderActions()
Expand All @@ -684,7 +681,7 @@ class OrderCreateEditFormFragment :
}

private fun FragmentOrderCreateEditFormBinding.renderDefaultProductsSectionButtons() {
if (requireContext().windowSizeClass == WindowSizeClass.Compact) {
if (!requireContext().isTwoPanesShouldBeUsed) {
productsSection.setProductSectionButtons(
addProductsButton = AddButton(
text = getString(R.string.order_creation_add_products),
Expand Down Expand Up @@ -1223,7 +1220,7 @@ class OrderCreateEditFormFragment :
}

is OnSelectedProductsSyncRequested -> {
if (requireContext().windowSizeClass != WindowSizeClass.Compact) {
if (requireContext().isTwoPanesShouldBeUsed) {
sharedViewModel.selectedItems.value.let { viewModel.onProductsSelected(it) }
}
}
Expand Down Expand Up @@ -1310,7 +1307,7 @@ class OrderCreateEditFormFragment :
isEachAddButtonEnabled = true
content.customAmountAdapter?.isLocked = false
}
if (requireContext().windowSizeClass != WindowSizeClass.Compact) {
if (requireContext().isTwoPanesShouldBeUsed) {
sharedViewModel.onProductSelectionStateChanged(true)
}
}
Expand Down Expand Up @@ -1340,7 +1337,7 @@ class OrderCreateEditFormFragment :
isEachAddButtonEnabled = false
content.customAmountAdapter?.isLocked = true
}
if (requireContext().windowSizeClass != WindowSizeClass.Compact) {
if (requireContext().isTwoPanesShouldBeUsed) {
sharedViewModel.onProductSelectionStateChanged(false)
}
}
Expand Down
Loading
Loading