[Site design revamp] Remove thumbnail mode selector

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

@@ -9,6 +9,7 @@ data class LayoutListItemUiState(
     val slug: String,
     val title: String,
     val preview: String,
+    val mShotPreview: String,
     val selected: Boolean,
     val onItemTapped: (() -> Unit),
     val onThumbnailReady: (() -> Unit)

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

@@ -3,7 +3,8 @@ package org.wordpress.android.ui.layoutpicker
 interface LayoutPickerTracker {
     fun trackPreviewModeChanged(mode: String)
 
-    fun trackThumbnailModeTapped(mode: String)
+    fun trackThumbnailModeTapped(mode: String) {
+    }
 
     fun trackPreviewModeTapped(mode: String)
 

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

@@ -64,6 +64,7 @@ abstract class LayoutPickerViewModel(
         }
 
     abstract val useCachedData: Boolean
+    abstract val shouldUseMobileThumbnail: Boolean
 
     var nestedScrollStates: Bundle = Bundle()
 
@@ -155,14 +156,17 @@ abstract class LayoutPickerViewModel(
             selectedCategories.forEach { category ->
 
                 val layouts = layouts.getFilteredLayouts(category.slug).map { layout ->
+                    val preview = when (_previewMode.value) {
+                        MOBILE -> layout.previewMobile
+                        TABLET -> layout.previewTablet
+                        else -> layout.preview
+                    }
+                    val thumbnailPreview = if (shouldUseMobileThumbnail) layout.previewMobile else preview
                     LayoutListItemUiState(
                             slug = layout.slug,
                             title = layout.title,
-                            preview = when (_previewMode.value) {
-                                MOBILE -> layout.previewMobile
-                                TABLET -> layout.previewTablet
-                                else -> layout.preview
-                            },
+                            preview = preview,
+                            mShotPreview = thumbnailPreview,
                             selected = layout.slug == state.selectedLayoutSlug,
                             onItemTapped = { onLayoutTapped(layoutSlug = layout.slug) },
                             onThumbnailReady = { onThumbnailReady(layoutSlug = layout.slug) }
@@ -187,7 +191,7 @@ abstract class LayoutPickerViewModel(
      * Layout tapped
      * @param layoutSlug the slug of the tapped layout
      */
-    fun onLayoutTapped(layoutSlug: String) {
+    open fun onLayoutTapped(layoutSlug: String) {
         (uiState.value as? Content)?.let { state ->
             if (!state.loadedThumbnailSlugs.contains(layoutSlug)) return // No action
             if (layoutSlug == state.selectedLayoutSlug) { // deselect

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

@@ -22,7 +22,7 @@ class LayoutViewHolder(
         uiState: LayoutListItemUiState,
         imageManager: ImageManager
     ) {
-        imageManager.loadWithResultListener(binding.preview, MShot(uiState.preview),
+        imageManager.loadWithResultListener(binding.preview, MShot(uiState.mShotPreview),
                 object : RequestListener<Drawable> {
                     override fun onLoadFailed(e: Exception?, model: Any?) {
                     }

WordPress/src/main/java/org/wordpress/android/ui/mlp/ModalLayoutPickerFragment.kt

@@ -118,7 +118,7 @@ class ModalLayoutPickerFragment : FullscreenBottomSheetDialogFragment() {
     private fun ModalLayoutPickerFragmentBinding.setupViewModel(savedInstanceState: Bundle?) {
         viewModel.loadSavedState(savedInstanceState)
 
-        viewModel.uiState.observe(this@ModalLayoutPickerFragment, { uiState ->
+        viewModel.uiState.observe(this@ModalLayoutPickerFragment) { uiState ->
             setHeaderVisibility(uiState.isHeaderVisible)
             setDescriptionVisibility(uiState.isDescriptionVisible)
             setButtonsVisibility(uiState.buttonsUiState)
@@ -135,13 +135,13 @@ class ModalLayoutPickerFragment : FullscreenBottomSheetDialogFragment() {
                     uiState.subtitle?.let { modalLayoutPickerError.actionableEmptyView.subtitle.setText(it) }
                 }
             }
-        })
+        }
 
-        viewModel.onThumbnailModeButtonPressed.observe(viewLifecycleOwner, {
+        viewModel.onThumbnailModeButtonPressed.observe(viewLifecycleOwner) {
             previewModeSelectorPopup.show(viewModel)
-        })
+        }
 
-        viewModel.onPreviewActionPressed.observe(viewLifecycleOwner, { action ->
+        viewModel.onPreviewActionPressed.observe(viewLifecycleOwner) { action ->
             activity?.supportFragmentManager?.let { fm ->
                 when (action) {
                     is Show -> {
@@ -153,11 +153,11 @@ class ModalLayoutPickerFragment : FullscreenBottomSheetDialogFragment() {
                     }
                 }
             }
-        })
+        }
 
-        viewModel.onCategorySelectionChanged.observeEvent(this@ModalLayoutPickerFragment, {
+        viewModel.onCategorySelectionChanged.observeEvent(this@ModalLayoutPickerFragment) {
             layoutsRecyclerView.smoothScrollToPosition(0)
-        })
+        }
     }
 
     private fun ModalLayoutPickerFragmentBinding.setHeaderVisibility(visible: Boolean) {

WordPress/src/main/java/org/wordpress/android/ui/sitecreation/misc/SiteCreationTracker.kt

@@ -167,13 +167,6 @@ class SiteCreationTracker @Inject constructor(val tracker: AnalyticsTrackerWrapp
         )
     }
 
-    override fun trackThumbnailModeTapped(mode: String) {
-        tracker.track(
-                AnalyticsTracker.Stat.ENHANCED_SITE_CREATION_SITE_DESIGN_THUMBNAIL_MODE_BUTTON_TAPPED,
-                mapOf(PREVIEW_MODE.key to mode)
-        )
-    }
-
     fun trackSiteDesignSkipped() {
         designSelectionSkipped = true
         tracker.track(AnalyticsTracker.Stat.ENHANCED_SITE_CREATION_SITE_DESIGN_SKIPPED)

WordPress/src/main/java/org/wordpress/android/ui/sitecreation/theme/HomePagePickerFragment.kt

@@ -15,15 +15,13 @@ import com.google.android.material.appbar.AppBarLayout
 import org.wordpress.android.R
 import org.wordpress.android.WordPress
 import org.wordpress.android.databinding.HomePagePickerFragmentBinding
-import org.wordpress.android.ui.PreviewModeSelectorPopup
 import org.wordpress.android.ui.layoutpicker.CategoriesAdapter
 import org.wordpress.android.ui.layoutpicker.LayoutCategoryAdapter
 import org.wordpress.android.ui.layoutpicker.LayoutPickerUiState
 import org.wordpress.android.ui.layoutpicker.LayoutPickerViewModel.DesignPreviewAction.Dismiss
 import org.wordpress.android.ui.layoutpicker.LayoutPickerViewModel.DesignPreviewAction.Show
 import org.wordpress.android.ui.sitecreation.theme.DesignPreviewFragment.Companion.DESIGN_PREVIEW_TAG
 import org.wordpress.android.ui.utils.UiHelpers
-import org.wordpress.android.util.AniUtils
 import org.wordpress.android.util.DisplayUtilsWrapper
 import org.wordpress.android.util.ToastUtils
 import org.wordpress.android.util.config.SiteNameFeatureConfig
@@ -43,7 +41,6 @@ class HomePagePickerFragment : Fragment() {
     @Inject lateinit var siteNameFeatureConfig: SiteNameFeatureConfig
     @Inject lateinit var viewModelFactory: ViewModelProvider.Factory
     private lateinit var viewModel: HomePagePickerViewModel
-    private lateinit var previewModeSelectorPopup: PreviewModeSelectorPopup
 
     override fun onAttach(context: Context) {
         super.onAttach(context)
@@ -83,28 +80,21 @@ class HomePagePickerFragment : Fragment() {
             setupUi()
             setupViewModel()
             setupActionListeners()
-            previewModeSelectorPopup = PreviewModeSelectorPopup(
-                    requireActivity(),
-                    homePagePickerTitlebar.previewTypeSelectorButton
-            )
         }
     }
 
     private fun HomePagePickerFragmentBinding.setupUi() {
         homePagePickerTitlebar.title.isInvisible = !displayUtils.isPhoneLandscape()
-        modalLayoutPickerHeaderSection.modalLayoutPickerTitleRow?.header?.setText(R.string.hpp_title)
-        modalLayoutPickerHeaderSection.modalLayoutPickerSubtitleRow?.description?.setText(R.string.hpp_subtitle)
-        if (siteNameFeatureConfig.isEnabled()) {
-            homePagePickerBottomToolbar.chooseButton.setText(R.string.hpp_choose_and_create_site)
+        with(modalLayoutPickerHeaderSection) {
+            modalLayoutPickerTitleRow?.header?.setText(R.string.hpp_title)
+            modalLayoutPickerSubtitleRow?.root?.visibility = View.GONE
         }
     }
 
     private fun HomePagePickerFragmentBinding.setupViewModel() {
-        viewModel.uiState.observe(viewLifecycleOwner, { uiState ->
+        viewModel.uiState.observe(viewLifecycleOwner) { uiState ->
             setHeaderVisibility(uiState.isHeaderVisible)
-            setDescriptionVisibility(uiState.isDescriptionVisible)
             setContentVisibility(uiState.loadingSkeletonVisible, uiState.errorViewVisible)
-            setToolbarVisibility(uiState.isToolbarVisible)
             when (uiState) {
                 is LayoutPickerUiState.Loading -> { // Nothing more to do here
                 }
@@ -116,9 +106,9 @@ class HomePagePickerFragment : Fragment() {
                     uiState.toast?.let { ToastUtils.showToast(requireContext(), it) }
                 }
             }
-        })
+        }
 
-        viewModel.onPreviewActionPressed.observe(viewLifecycleOwner, { action ->
+        viewModel.onPreviewActionPressed.observe(viewLifecycleOwner) { action ->
             activity?.supportFragmentManager?.let { fm ->
                 when (action) {
                     is Show -> {
@@ -130,15 +120,11 @@ class HomePagePickerFragment : Fragment() {
                     }
                 }
             }
-        })
-
-        viewModel.onThumbnailModeButtonPressed.observe(viewLifecycleOwner, {
-            previewModeSelectorPopup.show(viewModel)
-        })
+        }
 
-        viewModel.onCategorySelectionChanged.observeEvent(viewLifecycleOwner, {
+        viewModel.onCategorySelectionChanged.observeEvent(viewLifecycleOwner) {
             layoutsRecyclerView.smoothScrollToPosition(0)
-        })
+        }
 
         viewModel.start(displayUtils.isTablet())
     }
@@ -151,15 +137,6 @@ class HomePagePickerFragment : Fragment() {
         )
     }
 
-    /**
-     * Sets the header description visibility
-     * @param visible if true the description is visible else invisible
-     */
-    private fun HomePagePickerFragmentBinding.setDescriptionVisibility(visible: Boolean) {
-        modalLayoutPickerHeaderSection.modalLayoutPickerSubtitleRow?.description?.visibility =
-                if (visible) View.VISIBLE else View.INVISIBLE
-    }
-
     private fun HomePagePickerFragmentBinding.setContentVisibility(skeleton: Boolean, error: Boolean) {
         modalLayoutPickerCategoriesSkeleton.categoriesSkeleton.setVisible(skeleton)
         categoriesRecyclerView.setVisible(!skeleton && !error)
@@ -168,17 +145,10 @@ class HomePagePickerFragment : Fragment() {
         errorView.setVisible(error)
     }
 
-    private fun HomePagePickerFragmentBinding.setToolbarVisibility(visible: Boolean) {
-        AniUtils.animateBottomBar(homePagePickerBottomToolbar.bottomToolbar, visible)
-    }
-
     private fun HomePagePickerFragmentBinding.setupActionListeners() {
-        homePagePickerBottomToolbar.previewButton.setOnClickListener { viewModel.onPreviewTapped() }
-        homePagePickerBottomToolbar.chooseButton.setOnClickListener { viewModel.onChooseTapped() }
         homePagePickerTitlebar.skipButton.setOnClickListener { viewModel.onSkippedTapped() }
         errorView.button.setOnClickListener { viewModel.onRetryClicked() }
         homePagePickerTitlebar.backButton.setOnClickListener { viewModel.onBackPressed() }
-        homePagePickerTitlebar.previewTypeSelectorButton.setOnClickListener { viewModel.onThumbnailModePressed() }
         setScrollListener()
     }
 

WordPress/src/main/java/org/wordpress/android/ui/sitecreation/theme/HomePagePickerViewModel.kt

@@ -41,6 +41,7 @@ class HomePagePickerViewModel @Inject constructor(
     val onBackButtonPressed: LiveData<Unit> = _onBackButtonPressed
 
     override val useCachedData: Boolean = false
+    override val shouldUseMobileThumbnail = true
 
     sealed class DesignSelectionAction(val template: String) {
         object Skip : DesignSelectionAction(defaultTemplateSlug)
@@ -85,12 +86,20 @@ class HomePagePickerViewModel @Inject constructor(
         }
     }
 
+    override fun onLayoutTapped(layoutSlug: String) {
+        // TODO: open preview instead of updating uistate to make buttons and border visible
+        // The parent class function super.onPreviewTapped() does not accept a slug, so we if we use this here, we first
+        // need to set the selectedLayoutSlug in the uistate
+        super.onLayoutTapped(layoutSlug)
+    }
+
     override fun onPreviewChooseTapped() {
         super.onPreviewChooseTapped()
         onChooseTapped()
     }
 
     fun onChooseTapped() {
+        // TODO: adapt this to the new flow
         selectedLayout?.let { layout ->
             val template = layout.slug
             analyticsTracker.trackSiteDesignSelected(template)

WordPress/src/main/java/org/wordpress/android/viewmodel/mlp/ModalLayoutPickerViewModel.kt

@@ -66,6 +66,7 @@ class ModalLayoutPickerViewModel @Inject constructor(
     }
 
     override val useCachedData: Boolean = true
+    override val shouldUseMobileThumbnail = false
 
     override val selectedLayout: LayoutModel?
         get() = (uiState.value as? Content)?.let { state ->

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

@@ -105,12 +105,4 @@
         app:aevSubtitle="@string/hpp_error_subtitle"
         app:aevTitle="@string/hpp_error_title"
         app:layout_behavior="@string/appbar_scrolling_view_behavior" />
-
-    <include
-        android:id="@+id/home_page_picker_bottom_toolbar"
-        layout="@layout/home_page_picker_bottom_toolbar"
-        android:visibility="gone"
-        android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        android:layout_gravity="bottom" />
 </androidx.coordinatorlayout.widget.CoordinatorLayout>

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

@@ -22,16 +22,6 @@
         android:paddingEnd="0dp"
         android:text="@string/hpp_title" />
 
-    <ImageButton
-        android:id="@+id/previewTypeSelectorButton"
-        style="@style/WebPreviewNavbarButton"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:layout_gravity="center"
-        android:layout_weight="0"
-        android:contentDescription="@string/preview_type_desc"
-        android:src="@drawable/ic_devices_white_24dp" />
-
     <Button
         android:id="@+id/skipButton"
         style="@style/HomePagePickerSkipButton"