diff --git a/WordPress/src/main/java/org/wordpress/android/ui/layoutpicker/LayoutCategoryAdapter.kt b/WordPress/src/main/java/org/wordpress/android/ui/layoutpicker/LayoutCategoryAdapter.kt index a6845f54657d..a68ffef2a441 100644 --- a/WordPress/src/main/java/org/wordpress/android/ui/layoutpicker/LayoutCategoryAdapter.kt +++ b/WordPress/src/main/java/org/wordpress/android/ui/layoutpicker/LayoutCategoryAdapter.kt @@ -8,7 +8,10 @@ import androidx.recyclerview.widget.RecyclerView.Adapter /** * Renders the layout categories */ -class LayoutCategoryAdapter(private var nestedScrollStates: Bundle) : Adapter() { +class LayoutCategoryAdapter( + private var nestedScrollStates: Bundle, + private val thumbDimensionProvider: ThumbDimensionProvider +) : Adapter() { private var items: List = listOf() fun update(newItems: List) { @@ -34,7 +37,11 @@ class LayoutCategoryAdapter(private var nestedScrollStates: Bundle) : Adapter binding.layoutContainer.strokeWidth = if (uiState.selectedOverlayVisible) { @@ -47,13 +53,13 @@ class LayoutViewHolder( } companion object { - fun from(parent: ViewGroup): LayoutViewHolder { + fun from(parent: ViewGroup, thumbDimensionProvider: ThumbDimensionProvider): LayoutViewHolder { val binding = ModalLayoutPickerLayoutsCardBinding.inflate( LayoutInflater.from(parent.context), parent, false ) - return LayoutViewHolder(parent, binding) + return LayoutViewHolder(parent, binding, thumbDimensionProvider) } } } diff --git a/WordPress/src/main/java/org/wordpress/android/ui/layoutpicker/LayoutsAdapter.kt b/WordPress/src/main/java/org/wordpress/android/ui/layoutpicker/LayoutsAdapter.kt index fc72126862a7..b285c91f2d28 100644 --- a/WordPress/src/main/java/org/wordpress/android/ui/layoutpicker/LayoutsAdapter.kt +++ b/WordPress/src/main/java/org/wordpress/android/ui/layoutpicker/LayoutsAdapter.kt @@ -11,7 +11,10 @@ import javax.inject.Inject /** * Renders the Layout cards */ -class LayoutsAdapter(context: Context) : RecyclerView.Adapter() { +class LayoutsAdapter( + context: Context, + private val thumbDimensionProvider: ThumbDimensionProvider +) : RecyclerView.Adapter() { @Inject lateinit var imageManager: ImageManager private var layouts: List = listOf() @@ -26,7 +29,8 @@ class LayoutsAdapter(context: Context) : RecyclerView.Adapter( diffResult.dispatchUpdatesTo(this) } - override fun onCreateViewHolder(parent: ViewGroup, viewType: Int) = LayoutViewHolder.from(parent) + override fun onCreateViewHolder(parent: ViewGroup, viewType: Int) = + LayoutViewHolder.from(parent, thumbDimensionProvider) override fun getItemCount(): Int = layouts.size diff --git a/WordPress/src/main/java/org/wordpress/android/ui/layoutpicker/LayoutsItemViewHolder.kt b/WordPress/src/main/java/org/wordpress/android/ui/layoutpicker/LayoutsItemViewHolder.kt index 9ecbfdc503da..ed52cfedf634 100644 --- a/WordPress/src/main/java/org/wordpress/android/ui/layoutpicker/LayoutsItemViewHolder.kt +++ b/WordPress/src/main/java/org/wordpress/android/ui/layoutpicker/LayoutsItemViewHolder.kt @@ -5,6 +5,7 @@ import android.os.Parcelable import android.view.LayoutInflater import android.view.ViewGroup import android.widget.TextView +import androidx.core.view.updateLayoutParams import androidx.recyclerview.widget.LinearLayoutManager import androidx.recyclerview.widget.RecyclerView import androidx.recyclerview.widget.RecyclerView.OnScrollListener @@ -16,7 +17,8 @@ import org.wordpress.android.R class LayoutsItemViewHolder( parent: ViewGroup, private val prefetchItemCount: Int = 4, - private var nestedScrollStates: Bundle + private var nestedScrollStates: Bundle, + private val thumbDimensionProvider: ThumbDimensionProvider ) : RecyclerView.ViewHolder( LayoutInflater.from( parent.context @@ -26,6 +28,9 @@ class LayoutsItemViewHolder( private var currentItem: LayoutCategoryUiState? = null private val recycler: RecyclerView by lazy { + itemView.updateLayoutParams { + height = thumbDimensionProvider.rowHeight + } itemView.findViewById(R.id.layouts_recycler_view).apply { layoutManager = LinearLayoutManager( context, @@ -33,7 +38,7 @@ class LayoutsItemViewHolder( false ).apply { initialPrefetchItemCount = prefetchItemCount } setRecycledViewPool(RecyclerView.RecycledViewPool()) - adapter = LayoutsAdapter(parent.context) + adapter = LayoutsAdapter(parent.context, thumbDimensionProvider) addOnScrollListener(object : OnScrollListener() { override fun onScrollStateChanged(recyclerView: RecyclerView, newState: Int) { diff --git a/WordPress/src/main/java/org/wordpress/android/ui/layoutpicker/ThumbDimensionProvider.kt b/WordPress/src/main/java/org/wordpress/android/ui/layoutpicker/ThumbDimensionProvider.kt index 09d257055200..43d3c64ecafa 100644 --- a/WordPress/src/main/java/org/wordpress/android/ui/layoutpicker/ThumbDimensionProvider.kt +++ b/WordPress/src/main/java/org/wordpress/android/ui/layoutpicker/ThumbDimensionProvider.kt @@ -1,15 +1,8 @@ package org.wordpress.android.ui.layoutpicker -import org.wordpress.android.R -import org.wordpress.android.viewmodel.ContextProvider -import javax.inject.Inject - -class ThumbDimensionProvider @Inject constructor(private val contextProvider: ContextProvider) { +interface ThumbDimensionProvider { val previewWidth: Int - get() = contextProvider.getContext().resources.getDimensionPixelSize(R.dimen.mlp_layout_card_width) - val previewHeight: Int - get() = contextProvider.getContext().resources.getDimensionPixelSize(R.dimen.mlp_layout_card_height) - - val scale: Double = 1.0 // Passing 1.0 and the rendered pixels per device in previewWidth + val scale: Double + val rowHeight: Int } diff --git a/WordPress/src/main/java/org/wordpress/android/ui/mlp/ModalLayoutPickerDimensionProvider.kt b/WordPress/src/main/java/org/wordpress/android/ui/mlp/ModalLayoutPickerDimensionProvider.kt new file mode 100644 index 000000000000..9e36f498052f --- /dev/null +++ b/WordPress/src/main/java/org/wordpress/android/ui/mlp/ModalLayoutPickerDimensionProvider.kt @@ -0,0 +1,20 @@ +package org.wordpress.android.ui.mlp + +import org.wordpress.android.R.dimen +import org.wordpress.android.ui.layoutpicker.ThumbDimensionProvider +import org.wordpress.android.viewmodel.ContextProvider +import javax.inject.Inject + +class ModalLayoutPickerDimensionProvider @Inject constructor(private val contextProvider: ContextProvider) : + ThumbDimensionProvider { + override val previewWidth: Int + get() = contextProvider.getContext().resources.getDimensionPixelSize(dimen.mlp_layout_card_width) + + override val previewHeight: Int + get() = contextProvider.getContext().resources.getDimensionPixelSize(dimen.mlp_layout_card_height) + + override val scale: Double = 1.0 // Passing 1.0 and the rendered pixels per device in previewWidth + + override val rowHeight: Int + get() = contextProvider.getContext().resources.getDimensionPixelSize(dimen.mlp_layouts_row_height) +} diff --git a/WordPress/src/main/java/org/wordpress/android/ui/mlp/ModalLayoutPickerFragment.kt b/WordPress/src/main/java/org/wordpress/android/ui/mlp/ModalLayoutPickerFragment.kt index 99a742eac9b4..8e0dc57405ec 100644 --- a/WordPress/src/main/java/org/wordpress/android/ui/mlp/ModalLayoutPickerFragment.kt +++ b/WordPress/src/main/java/org/wordpress/android/ui/mlp/ModalLayoutPickerFragment.kt @@ -6,6 +6,7 @@ import android.view.LayoutInflater import android.view.View import android.view.ViewGroup import androidx.core.view.ViewCompat +import androidx.core.view.updateLayoutParams import androidx.lifecycle.ViewModelProvider import androidx.recyclerview.widget.LinearLayoutManager import androidx.recyclerview.widget.RecyclerView @@ -38,6 +39,7 @@ import javax.inject.Inject class ModalLayoutPickerFragment : FullscreenBottomSheetDialogFragment() { @Inject internal lateinit var uiHelper: UiHelpers @Inject lateinit var viewModelFactory: ViewModelProvider.Factory + @Inject lateinit var thumbDimensionProvider: ModalLayoutPickerDimensionProvider private lateinit var viewModel: ModalLayoutPickerViewModel private lateinit var previewModeSelectorPopup: PreviewModeSelectorPopup @@ -73,7 +75,7 @@ class ModalLayoutPickerFragment : FullscreenBottomSheetDialogFragment() { layoutsRecyclerView.apply { layoutManager = LinearLayoutManager(requireActivity()) - adapter = LayoutCategoryAdapter(viewModel.nestedScrollStates) + adapter = LayoutCategoryAdapter(viewModel.nestedScrollStates, thumbDimensionProvider) } modalLayoutPickerTitlebar.backButton.setOnClickListener { @@ -96,6 +98,11 @@ class ModalLayoutPickerFragment : FullscreenBottomSheetDialogFragment() { viewModel.onThumbnailModePressed() } + modalLayoutPickerLayoutsSkeleton.skeletonCardView.updateLayoutParams { + height = thumbDimensionProvider.previewHeight + width = thumbDimensionProvider.previewWidth + } + setScrollListener() setupViewModel(savedInstanceState) diff --git a/WordPress/src/main/java/org/wordpress/android/ui/sitecreation/theme/HomePagePickerFragment.kt b/WordPress/src/main/java/org/wordpress/android/ui/sitecreation/theme/HomePagePickerFragment.kt index 2aa1f16caf6c..1f9be3492704 100644 --- a/WordPress/src/main/java/org/wordpress/android/ui/sitecreation/theme/HomePagePickerFragment.kt +++ b/WordPress/src/main/java/org/wordpress/android/ui/sitecreation/theme/HomePagePickerFragment.kt @@ -7,6 +7,7 @@ import android.view.View import android.view.ViewGroup import androidx.core.view.isGone import androidx.core.view.isInvisible +import androidx.core.view.updateLayoutParams import androidx.fragment.app.Fragment import androidx.lifecycle.ViewModelProvider import androidx.recyclerview.widget.LinearLayoutManager @@ -37,6 +38,7 @@ class HomePagePickerFragment : Fragment() { @Inject internal lateinit var uiHelper: UiHelpers @Inject lateinit var siteNameFeatureConfig: SiteNameFeatureConfig @Inject lateinit var viewModelFactory: ViewModelProvider.Factory + @Inject lateinit var thumbDimensionProvider: SiteDesignPickerDimensionProvider private lateinit var viewModel: HomePagePickerViewModel override fun onAttach(context: Context) { @@ -62,7 +64,7 @@ class HomePagePickerFragment : Fragment() { categoriesRecyclerView.isGone = true layoutsRecyclerView.apply { layoutManager = LinearLayoutManager(requireActivity()) - adapter = LayoutCategoryAdapter(viewModel.nestedScrollStates) + adapter = LayoutCategoryAdapter(viewModel.nestedScrollStates, thumbDimensionProvider) } setupUi() @@ -80,6 +82,10 @@ class HomePagePickerFragment : Fragment() { } modalLayoutPickerSubtitleRow?.root?.visibility = View.GONE } + modalLayoutPickerLayoutsSkeleton.skeletonCardView.updateLayoutParams { + height = thumbDimensionProvider.previewHeight + width = thumbDimensionProvider.previewWidth + } } private fun HomePagePickerFragmentBinding.setupViewModel() { diff --git a/WordPress/src/main/java/org/wordpress/android/ui/sitecreation/theme/SiteDesignPickerDimensionProvider.kt b/WordPress/src/main/java/org/wordpress/android/ui/sitecreation/theme/SiteDesignPickerDimensionProvider.kt new file mode 100644 index 000000000000..227cd54674c2 --- /dev/null +++ b/WordPress/src/main/java/org/wordpress/android/ui/sitecreation/theme/SiteDesignPickerDimensionProvider.kt @@ -0,0 +1,20 @@ +package org.wordpress.android.ui.sitecreation.theme + +import org.wordpress.android.R.dimen +import org.wordpress.android.ui.layoutpicker.ThumbDimensionProvider +import org.wordpress.android.viewmodel.ContextProvider +import javax.inject.Inject + +class SiteDesignPickerDimensionProvider @Inject constructor(private val contextProvider: ContextProvider) : + ThumbDimensionProvider { + override val previewWidth: Int + get() = contextProvider.getContext().resources.getDimensionPixelSize(dimen.hpp_layout_card_width) + + override val previewHeight: Int + get() = contextProvider.getContext().resources.getDimensionPixelSize(dimen.hpp_layout_card_height) + + override val scale: Double = 1.0 // Passing 1.0 and the rendered pixels per device in previewWidth + + override val rowHeight: Int + get() = contextProvider.getContext().resources.getDimensionPixelSize(dimen.hpp_layouts_row_height) +} diff --git a/WordPress/src/main/java/org/wordpress/android/ui/sitecreation/usecases/FetchHomePageLayoutsUseCase.kt b/WordPress/src/main/java/org/wordpress/android/ui/sitecreation/usecases/FetchHomePageLayoutsUseCase.kt index 5be0c0a5f270..9063df882406 100644 --- a/WordPress/src/main/java/org/wordpress/android/ui/sitecreation/usecases/FetchHomePageLayoutsUseCase.kt +++ b/WordPress/src/main/java/org/wordpress/android/ui/sitecreation/usecases/FetchHomePageLayoutsUseCase.kt @@ -7,7 +7,7 @@ import org.wordpress.android.fluxc.generated.ThemeActionBuilder import org.wordpress.android.fluxc.store.ThemeStore import org.wordpress.android.fluxc.store.ThemeStore.FetchStarterDesignsPayload import org.wordpress.android.fluxc.store.ThemeStore.OnStarterDesignsFetched -import org.wordpress.android.ui.layoutpicker.ThumbDimensionProvider +import org.wordpress.android.ui.sitecreation.theme.SiteDesignPickerDimensionProvider import javax.inject.Inject import kotlin.coroutines.Continuation import kotlin.coroutines.resume @@ -16,7 +16,7 @@ import kotlin.coroutines.suspendCoroutine class FetchHomePageLayoutsUseCase @Inject constructor( val dispatcher: Dispatcher, @Suppress("unused") val themeStore: ThemeStore, - private val thumbDimensionProvider: ThumbDimensionProvider + private val thumbDimensionProvider: SiteDesignPickerDimensionProvider ) { private var continuation: Continuation? = null diff --git a/WordPress/src/main/java/org/wordpress/android/viewmodel/mlp/ModalLayoutPickerViewModel.kt b/WordPress/src/main/java/org/wordpress/android/viewmodel/mlp/ModalLayoutPickerViewModel.kt index a7101ad944e6..2327a2d97793 100644 --- a/WordPress/src/main/java/org/wordpress/android/viewmodel/mlp/ModalLayoutPickerViewModel.kt +++ b/WordPress/src/main/java/org/wordpress/android/viewmodel/mlp/ModalLayoutPickerViewModel.kt @@ -20,7 +20,7 @@ import org.wordpress.android.ui.layoutpicker.LayoutPickerUiState.Content import org.wordpress.android.ui.layoutpicker.LayoutPickerUiState.Error import org.wordpress.android.ui.layoutpicker.LayoutPickerUiState.Loading import org.wordpress.android.ui.layoutpicker.LayoutPickerViewModel -import org.wordpress.android.ui.layoutpicker.ThumbDimensionProvider +import org.wordpress.android.ui.mlp.ModalLayoutPickerDimensionProvider import org.wordpress.android.ui.layoutpicker.toLayoutCategories import org.wordpress.android.ui.layoutpicker.toLayoutModels import org.wordpress.android.ui.mlp.ModalLayoutPickerTracker @@ -42,7 +42,7 @@ class ModalLayoutPickerViewModel @Inject constructor( private val siteStore: SiteStore, private val selectedSiteRepository: SelectedSiteRepository, private val supportedBlocksProvider: SupportedBlocksProvider, - private val thumbDimensionProvider: ThumbDimensionProvider, + private val thumbDimensionProvider: ModalLayoutPickerDimensionProvider, private val displayUtilsWrapper: DisplayUtilsWrapper, override val networkUtils: NetworkUtilsWrapper, private val analyticsTracker: ModalLayoutPickerTracker, diff --git a/WordPress/src/main/res/layout/modal_layout_picker_layouts_skeleton.xml b/WordPress/src/main/res/layout/modal_layout_picker_layouts_skeleton.xml index 795383146ef1..3eafa9306bc3 100644 --- a/WordPress/src/main/res/layout/modal_layout_picker_layouts_skeleton.xml +++ b/WordPress/src/main/res/layout/modal_layout_picker_layouts_skeleton.xml @@ -29,6 +29,7 @@ android:background="?attr/categoriesButtonBackground" /> 600dp 38sp + + + 325dp + 250dp + 400dp diff --git a/WordPress/src/main/res/values/dimens.xml b/WordPress/src/main/res/values/dimens.xml index d8fb6f1c755f..4787166012eb 100644 --- a/WordPress/src/main/res/values/dimens.xml +++ b/WordPress/src/main/res/values/dimens.xml @@ -646,8 +646,11 @@ 24dp 100dp - + @dimen/margin_none + 260dp + 200dp + 330dp @dimen/margin_extra_extra_large diff --git a/WordPress/src/test/java/org/wordpress/android/ui/sitecreation/theme/FetchHomePageLayoutsUseCaseTest.kt b/WordPress/src/test/java/org/wordpress/android/ui/sitecreation/theme/FetchHomePageLayoutsUseCaseTest.kt index d8406d78ff5f..2e1c4dd5a044 100644 --- a/WordPress/src/test/java/org/wordpress/android/ui/sitecreation/theme/FetchHomePageLayoutsUseCaseTest.kt +++ b/WordPress/src/test/java/org/wordpress/android/ui/sitecreation/theme/FetchHomePageLayoutsUseCaseTest.kt @@ -19,7 +19,6 @@ import org.wordpress.android.fluxc.store.SiteStore.SuggestDomainsPayload import org.wordpress.android.fluxc.store.ThemeStore import org.wordpress.android.fluxc.store.ThemeStore.OnStarterDesignsFetched import org.wordpress.android.test -import org.wordpress.android.ui.layoutpicker.ThumbDimensionProvider import org.wordpress.android.ui.sitecreation.usecases.FetchHomePageLayoutsUseCase @RunWith(MockitoJUnitRunner::class) @@ -29,7 +28,7 @@ class FetchHomePageLayoutsUseCaseTest { @Mock lateinit var dispatcher: Dispatcher @Mock lateinit var store: ThemeStore - @Mock lateinit var thumbDimensionProvider: ThumbDimensionProvider + @Mock lateinit var thumbDimensionProvider: SiteDesignPickerDimensionProvider private lateinit var useCase: FetchHomePageLayoutsUseCase private lateinit var dispatchCaptor: KArgumentCaptor> diff --git a/WordPress/src/test/java/org/wordpress/android/viewmodel/mlp/ModalLayoutPickerViewModelTest.kt b/WordPress/src/test/java/org/wordpress/android/viewmodel/mlp/ModalLayoutPickerViewModelTest.kt index 7e852f87b16f..e5a016b123cb 100644 --- a/WordPress/src/test/java/org/wordpress/android/viewmodel/mlp/ModalLayoutPickerViewModelTest.kt +++ b/WordPress/src/test/java/org/wordpress/android/viewmodel/mlp/ModalLayoutPickerViewModelTest.kt @@ -30,7 +30,7 @@ import org.wordpress.android.fluxc.store.SiteStore.SiteError import org.wordpress.android.fluxc.store.SiteStore.SiteErrorType.GENERIC_ERROR import org.wordpress.android.ui.layoutpicker.LayoutPickerUiState.Content import org.wordpress.android.ui.layoutpicker.LayoutPickerUiState.Error -import org.wordpress.android.ui.layoutpicker.ThumbDimensionProvider +import org.wordpress.android.ui.mlp.ModalLayoutPickerDimensionProvider import org.wordpress.android.ui.mlp.ModalLayoutPickerTracker import org.wordpress.android.ui.mlp.SupportedBlocks import org.wordpress.android.ui.mlp.SupportedBlocksProvider @@ -58,7 +58,7 @@ class ModalLayoutPickerViewModelTest { @Mock lateinit var siteStore: SiteStore @Mock lateinit var selectedSiteRepository: SelectedSiteRepository @Mock lateinit var supportedBlocksProvider: SupportedBlocksProvider - @Mock lateinit var thumbDimensionProvider: ThumbDimensionProvider + @Mock lateinit var thumbDimensionProvider: ModalLayoutPickerDimensionProvider @Mock lateinit var displayUtilsWrapper: DisplayUtilsWrapper @Mock lateinit var networkUtils: NetworkUtilsWrapper @Mock lateinit var analyticsTracker: ModalLayoutPickerTracker