diff --git a/WordPress/src/main/java/org/wordpress/android/ui/layoutpicker/LayoutListItemUiState.kt b/WordPress/src/main/java/org/wordpress/android/ui/layoutpicker/LayoutListItemUiState.kt index f775acdc946f..b1b54da0286c 100644 --- a/WordPress/src/main/java/org/wordpress/android/ui/layoutpicker/LayoutListItemUiState.kt +++ b/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) diff --git a/WordPress/src/main/java/org/wordpress/android/ui/layoutpicker/LayoutPickerTracker.kt b/WordPress/src/main/java/org/wordpress/android/ui/layoutpicker/LayoutPickerTracker.kt index dde4ded7b34f..d57f0b4c1ac0 100644 --- a/WordPress/src/main/java/org/wordpress/android/ui/layoutpicker/LayoutPickerTracker.kt +++ b/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) diff --git a/WordPress/src/main/java/org/wordpress/android/ui/layoutpicker/LayoutPickerViewModel.kt b/WordPress/src/main/java/org/wordpress/android/ui/layoutpicker/LayoutPickerViewModel.kt index d8cf46b5fdf0..314aa04cfcb1 100644 --- a/WordPress/src/main/java/org/wordpress/android/ui/layoutpicker/LayoutPickerViewModel.kt +++ b/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 diff --git a/WordPress/src/main/java/org/wordpress/android/ui/layoutpicker/LayoutViewHolder.kt b/WordPress/src/main/java/org/wordpress/android/ui/layoutpicker/LayoutViewHolder.kt index bc615cd39068..a39cb00e387f 100644 --- a/WordPress/src/main/java/org/wordpress/android/ui/layoutpicker/LayoutViewHolder.kt +++ b/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 { override fun onLoadFailed(e: Exception?, model: Any?) { } 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 b3b172fce2ff..99a742eac9b4 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 @@ -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) { diff --git a/WordPress/src/main/java/org/wordpress/android/ui/sitecreation/misc/SiteCreationTracker.kt b/WordPress/src/main/java/org/wordpress/android/ui/sitecreation/misc/SiteCreationTracker.kt index 927007df38c5..33423b588c96 100644 --- a/WordPress/src/main/java/org/wordpress/android/ui/sitecreation/misc/SiteCreationTracker.kt +++ b/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) 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 d301592cdf65..1fcb01902c87 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 @@ -15,7 +15,6 @@ 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 @@ -23,7 +22,6 @@ import org.wordpress.android.ui.layoutpicker.LayoutPickerViewModel.DesignPreview 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() } diff --git a/WordPress/src/main/java/org/wordpress/android/ui/sitecreation/theme/HomePagePickerViewModel.kt b/WordPress/src/main/java/org/wordpress/android/ui/sitecreation/theme/HomePagePickerViewModel.kt index 074a87baa8de..96241ca69415 100644 --- a/WordPress/src/main/java/org/wordpress/android/ui/sitecreation/theme/HomePagePickerViewModel.kt +++ b/WordPress/src/main/java/org/wordpress/android/ui/sitecreation/theme/HomePagePickerViewModel.kt @@ -41,6 +41,7 @@ class HomePagePickerViewModel @Inject constructor( val onBackButtonPressed: LiveData = _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) 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 6b0a09c48a0e..a7101ad944e6 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 @@ -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 -> diff --git a/WordPress/src/main/res/layout-sw600dp/home_page_picker_bottom_toolbar.xml b/WordPress/src/main/res/layout-sw600dp/home_page_picker_bottom_toolbar.xml deleted file mode 100644 index b9ea6d9eb1b5..000000000000 --- a/WordPress/src/main/res/layout-sw600dp/home_page_picker_bottom_toolbar.xml +++ /dev/null @@ -1,40 +0,0 @@ - - - - - - - - - - - - - diff --git a/WordPress/src/main/res/layout/home_page_picker_bottom_toolbar.xml b/WordPress/src/main/res/layout/home_page_picker_bottom_toolbar.xml deleted file mode 100644 index b937dd3838f2..000000000000 --- a/WordPress/src/main/res/layout/home_page_picker_bottom_toolbar.xml +++ /dev/null @@ -1,42 +0,0 @@ - - - - - - - - - - - - - diff --git a/WordPress/src/main/res/layout/home_page_picker_fragment.xml b/WordPress/src/main/res/layout/home_page_picker_fragment.xml index afb5d4960868..c9d401cc8da7 100644 --- a/WordPress/src/main/res/layout/home_page_picker_fragment.xml +++ b/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" /> - - diff --git a/WordPress/src/main/res/layout/home_page_picker_titlebar.xml b/WordPress/src/main/res/layout/home_page_picker_titlebar.xml index c5584a073539..1cca93fc5537 100644 --- a/WordPress/src/main/res/layout/home_page_picker_titlebar.xml +++ b/WordPress/src/main/res/layout/home_page_picker_titlebar.xml @@ -22,16 +22,6 @@ android:paddingEnd="0dp" android:text="@string/hpp_title" /> - -