[Site Design Revamp] Enlarges design thumbnails

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<LayoutsItemViewHolder>() {
+class LayoutCategoryAdapter(
+    private var nestedScrollStates: Bundle,
+    private val thumbDimensionProvider: ThumbDimensionProvider
+) : Adapter<LayoutsItemViewHolder>() {
     private var items: List<LayoutCategoryUiState> = listOf()
 
     fun update(newItems: List<LayoutCategoryUiState>) {
@@ -34,7 +37,11 @@ class LayoutCategoryAdapter(private var nestedScrollStates: Bundle) : Adapter<La
     }
 
     override fun onCreateViewHolder(parent: ViewGroup, viewType: Int) =
-            LayoutsItemViewHolder(parent = parent, nestedScrollStates = nestedScrollStates)
+            LayoutsItemViewHolder(
+                    parent = parent,
+                    nestedScrollStates = nestedScrollStates,
+                    thumbDimensionProvider = thumbDimensionProvider
+            )
 
     fun onRestoreInstanceState(savedInstanceState: Bundle) {
         nestedScrollStates = savedInstanceState

WordPress/src/main/java/org/wordpress/android/ui/layoutpicker/LayoutViewHolder.kt

@@ -3,6 +3,7 @@ package org.wordpress.android.ui.layoutpicker
 import android.graphics.drawable.Drawable
 import android.view.LayoutInflater
 import android.view.ViewGroup
+import androidx.core.view.updateLayoutParams
 import androidx.recyclerview.widget.RecyclerView
 import org.wordpress.android.R
 import org.wordpress.android.databinding.ModalLayoutPickerLayoutsCardBinding
@@ -16,7 +17,8 @@ import org.wordpress.android.util.extensions.setVisible
  */
 class LayoutViewHolder(
     private val parent: ViewGroup,
-    private val binding: ModalLayoutPickerLayoutsCardBinding
+    private val binding: ModalLayoutPickerLayoutsCardBinding,
+    private val thumbDimensionProvider: ThumbDimensionProvider
 ) : RecyclerView.ViewHolder(binding.root) {
     fun onBind(
         uiState: LayoutListItemUiState,
@@ -33,6 +35,10 @@ class LayoutViewHolder(
                 })
 
         binding.selectedOverlay.setVisible(uiState.selectedOverlayVisible)
+        binding.preview.updateLayoutParams {
+            height = thumbDimensionProvider.previewHeight
+            width = thumbDimensionProvider.previewWidth
+        }
         binding.preview.contentDescription = parent.context.getString(uiState.contentDescriptionResId, uiState.title)
         binding.preview.context?.let { ctx ->
             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)
         }
     }
 }

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<LayoutViewHolder>() {
+class LayoutsAdapter(
+    context: Context,
+    private val thumbDimensionProvider: ThumbDimensionProvider
+) : RecyclerView.Adapter<LayoutViewHolder>() {
     @Inject lateinit var imageManager: ImageManager
 
     private var layouts: List<LayoutListItemUiState> = listOf()
@@ -26,7 +29,8 @@ class LayoutsAdapter(context: Context) : RecyclerView.Adapter<LayoutViewHolder>(
         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
 

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,14 +28,17 @@ class LayoutsItemViewHolder(
     private var currentItem: LayoutCategoryUiState? = null
 
     private val recycler: RecyclerView by lazy {
+        itemView.updateLayoutParams {
+            height = thumbDimensionProvider.rowHeight
+        }
         itemView.findViewById<RecyclerView>(R.id.layouts_recycler_view).apply {
             layoutManager = LinearLayoutManager(
                     context,
                     RecyclerView.HORIZONTAL,
                     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) {

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
 }

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

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)

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() {

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

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<OnStarterDesignsFetched>? = null
 

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,

WordPress/src/main/res/layout/modal_layout_picker_layouts_skeleton.xml

@@ -29,6 +29,7 @@
                 android:background="?attr/categoriesButtonBackground" />
 
             <com.google.android.material.card.MaterialCardView
+                android:id="@+id/skeletonCardView"
                 style="@style/LayoutCardView"
                 android:layout_width="@dimen/mlp_layout_card_width"
                 android:layout_height="@dimen/mlp_layout_card_height"

WordPress/src/main/res/values-sw600dp/dimens.xml

@@ -11,4 +11,9 @@
     <dimen name="prologue_intro_content_max_width">600dp</dimen>
 
     <dimen name="prologue_promo_title_size">38sp</dimen>
+
+    <!-- Site Design Picker -->
+    <dimen name="hpp_layout_card_height">325dp</dimen>
+    <dimen name="hpp_layout_card_width">250dp</dimen>
+    <dimen name="hpp_layouts_row_height">400dp</dimen>
 </resources>

WordPress/src/main/res/values/dimens.xml

@@ -646,8 +646,11 @@
     <dimen name="mlp_layout_skeleton_line_height">24dp</dimen>
     <dimen name="mlp_layout_skeleton_line_width">100dp</dimen>
 
-    <!-- Home Page Picker -->
+    <!-- Site Design Picker -->
     <dimen name="hpp_title_padding_start">@dimen/margin_none</dimen>
+    <dimen name="hpp_layout_card_height">260dp</dimen>
+    <dimen name="hpp_layout_card_width">200dp</dimen>
+    <dimen name="hpp_layouts_row_height">330dp</dimen>
 
     <!-- Site Intent Question -->
     <dimen name="siq_title_padding_start">@dimen/margin_extra_extra_large</dimen>

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<Action<SuggestDomainsPayload>>

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