[Modal Layout Picker] "Create Page" button functionality

WordPress/src/main/java/org/wordpress/android/ui/ActivityLauncher.java

@@ -769,24 +769,28 @@ public static void editPageForResult(Intent intent, @NonNull Fragment fragment,
     public static void addNewPageForResult(
             @NonNull Activity activity,
             @NonNull SiteModel site,
+            @NonNull String content,
             @NonNull PagePostCreationSourcesDetail source
     ) {
         Intent intent = new Intent(activity, EditPostActivity.class);
         intent.putExtra(WordPress.SITE, site);
         intent.putExtra(EditPostActivity.EXTRA_IS_PAGE, true);
         intent.putExtra(EditPostActivity.EXTRA_IS_PROMO, false);
+        intent.putExtra(EditPostActivity.EXTRA_PAGE_CONTENT, content);
         intent.putExtra(AnalyticsUtils.EXTRA_CREATION_SOURCE_DETAIL, source);
         activity.startActivityForResult(intent, RequestCodes.EDIT_POST);
     }
 
     public static void addNewPageForResult(
             @NonNull Fragment fragment,
             @NonNull SiteModel site,
+            @NonNull String content,
             @NonNull PagePostCreationSourcesDetail source) {
         Intent intent = new Intent(fragment.getContext(), EditPostActivity.class);
         intent.putExtra(WordPress.SITE, site);
         intent.putExtra(EditPostActivity.EXTRA_IS_PAGE, true);
         intent.putExtra(EditPostActivity.EXTRA_IS_PROMO, false);
+        intent.putExtra(EditPostActivity.EXTRA_PAGE_CONTENT, content);
         intent.putExtra(AnalyticsUtils.EXTRA_CREATION_SOURCE_DETAIL, source);
         fragment.startActivityForResult(intent, RequestCodes.EDIT_POST);
     }

WordPress/src/main/java/org/wordpress/android/ui/main/WPMainActivity.java

@@ -441,7 +441,7 @@ private void initViewModel() {
                     if (mModalLayoutPickerFeatureConfig.isEnabled()) {
                         mMLPViewModel.show();
                     } else {
-                        handleNewPageAction(PagePostCreationSourcesDetail.PAGE_FROM_MY_SITE);
+                        handleNewPageAction(""/*empty page*/, PagePostCreationSourcesDetail.PAGE_FROM_MY_SITE);
                     }
                     break;
                 case CREATE_NEW_STORY:
@@ -464,8 +464,8 @@ private void initViewModel() {
             }
         });
 
-        mMLPViewModel.getOnCreateNewPageRequested().observe(this, action -> {
-            handleNewPageAction(PagePostCreationSourcesDetail.PAGE_FROM_MY_SITE);
+        mMLPViewModel.getOnCreateNewPageRequested().observe(this, content -> {
+            handleNewPageAction(content, PagePostCreationSourcesDetail.PAGE_FROM_MY_SITE);
         });
 
         mViewModel.getOnFeatureAnnouncementRequested().observe(this, action -> {
@@ -880,7 +880,7 @@ public void onNewPostButtonClicked() {
         handleNewPostAction(PagePostCreationSourcesDetail.POST_FROM_NAV_BAR);
     }
 
-    private void handleNewPageAction(PagePostCreationSourcesDetail source) {
+    private void handleNewPageAction(String content, PagePostCreationSourcesDetail source) {
         if (!mSiteStore.hasSite()) {
             // No site yet - Move to My Sites fragment that shows the create new site screen
             mBottomNav.setCurrentSelectedPage(PageType.MY_SITE);
@@ -890,7 +890,7 @@ private void handleNewPageAction(PagePostCreationSourcesDetail source) {
         SiteModel site = getSelectedSite();
         if (site != null) {
             // TODO: evaluate to include the QuickStart logic like in the handleNewPostAction
-            ActivityLauncher.addNewPageForResult(this, site, source);
+            ActivityLauncher.addNewPageForResult(this, site, content, source);
         }
     }
 

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

@@ -81,10 +81,13 @@ class ModalLayoutPickerFragment : BottomSheetDialogFragment() {
         }
 
         createBlankPageButton.setOnClickListener {
+            viewModel.createPage()
             closeModal()
+        }
+        createPageButton.setOnClickListener {
             viewModel.createPage()
+            closeModal()
         }
-        createPageButton.setOnClickListener { /* TODO */ }
         previewButton.setOnClickListener { /* TODO */ }
 
         setScrollListener()
@@ -112,6 +115,7 @@ class ModalLayoutPickerFragment : BottomSheetDialogFragment() {
 
     override fun onCreateDialog(savedInstanceState: Bundle?) = BottomSheetDialog(requireContext(), getTheme()).apply {
         fillTheScreen(this)
+        window?.clearFlags(WindowManager.LayoutParams.FLAG_DIM_BEHIND)
     }
 
     override fun onAttach(context: Context) {
@@ -176,11 +180,8 @@ class ModalLayoutPickerFragment : BottomSheetDialogFragment() {
     }
 
     private fun fillTheScreen(dialog: BottomSheetDialog) {
-        dialog.setOnShowListener { dialogInterface ->
-            val bottomSheetDialog = dialogInterface as BottomSheetDialog
-            val parentLayout =
-                    bottomSheetDialog.findViewById<View>(com.google.android.material.R.id.design_bottom_sheet)
-            parentLayout?.let { it ->
+        dialog.setOnShowListener {
+            dialog.findViewById<View>(com.google.android.material.R.id.design_bottom_sheet)?.let {
                 val behaviour = BottomSheetBehavior.from(it)
                 setupFullHeight(it)
                 behaviour.skipCollapsed = true

WordPress/src/main/java/org/wordpress/android/ui/pages/PagesFragment.kt

@@ -354,8 +354,8 @@ class PagesFragment : Fragment(), ScrollableViewInitializedListener {
             }
         })
 
-        mlpViewModel.onCreateNewPageRequested.observe(viewLifecycleOwner, Observer {
-            createNewPage()
+        mlpViewModel.onCreateNewPageRequested.observe(viewLifecycleOwner, Observer { content ->
+            createNewPage(content)
         })
 
         viewModel.showSnackbarMessage.observe(viewLifecycleOwner, Observer { holder ->
@@ -490,11 +490,12 @@ class PagesFragment : Fragment(), ScrollableViewInitializedListener {
 
     /**
      * Triggers new page creation
+     * @param content the page content
      */
-    private fun createNewPage() {
+    private fun createNewPage(content: String = "") {
         QuickStartUtils.completeTaskAndRemindNextOne(quickStartStore, QuickStartTask.CREATE_NEW_PAGE, dispatcher,
                 viewModel.site, quickStartEvent, context)
-        ActivityLauncher.addNewPageForResult(this, viewModel.site, PAGE_FROM_PAGES_LIST)
+        ActivityLauncher.addNewPageForResult(this, viewModel.site, content, PAGE_FROM_PAGES_LIST)
     }
 
     override fun onCreateOptionsMenu(menu: Menu, inflater: MenuInflater) {

WordPress/src/main/java/org/wordpress/android/ui/posts/EditPostActivity.java

@@ -266,6 +266,7 @@ public class EditPostActivity extends LocaleAwareActivity implements
     public static final String EXTRA_REBLOG_POST_IMAGE = "reblogPostImage";
     public static final String EXTRA_REBLOG_POST_QUOTE = "reblogPostQuote";
     public static final String EXTRA_REBLOG_POST_CITATION = "reblogPostCitation";
+    public static final String EXTRA_PAGE_CONTENT = "pageContent";
     private static final String STATE_KEY_EDITOR_FRAGMENT = "editorFragment";
     private static final String STATE_KEY_DROPPED_MEDIA_URIS = "stateKeyDroppedMediaUri";
     private static final String STATE_KEY_POST_LOCAL_ID = "stateKeyPostModelLocalId";
@@ -2252,6 +2253,10 @@ private void fillContentEditorFields() {
             }
         }
 
+        if (mIsPage) {
+            setPageContent();
+        }
+
         // Set post title and content
         if (mEditPostRepository.hasPost()) {
             // don't avoid calling setContent() for GutenbergEditorFragment so RN gets initialized
@@ -2374,6 +2379,27 @@ private void setPostContentFromReblogAction() {
         }
     }
 
+    /**
+     * Sets the page content
+     */
+    private void setPageContent() {
+        Intent intent = getIntent();
+        final String content = intent.getStringExtra(EXTRA_PAGE_CONTENT);
+        if (content != null && !content.isEmpty()) {
+            mHasSetPostContent = true;
+            mEditPostRepository.updateAsync(postModel -> {
+                postModel.setContent(content);
+                mEditPostRepository.updatePublishDateIfShouldBePublishedImmediately(postModel);
+                return true;
+            }, (postModel, result) -> {
+                if (result == UpdatePostResult.Updated.INSTANCE) {
+                    mEditorFragment.setContent(postModel.getContent());
+                }
+                return null;
+            });
+        }
+    }
+
     @Override
     public void onActivityResult(int requestCode, int resultCode, Intent data) {
         super.onActivityResult(requestCode, resultCode, data);

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

@@ -56,8 +56,8 @@ class ModalLayoutPickerViewModel @Inject constructor(
     /**
      * Create new page event
      */
-    private val _onCreateNewPageRequested = SingleLiveEvent<Unit>()
-    val onCreateNewPageRequested: LiveData<Unit> = _onCreateNewPageRequested
+    private val _onCreateNewPageRequested = SingleLiveEvent<String>()
+    val onCreateNewPageRequested: LiveData<String> = _onCreateNewPageRequested
 
     init {
         dispatcher.register(this)
@@ -254,10 +254,15 @@ class ModalLayoutPickerViewModel @Inject constructor(
     }
 
     /**
-     * Triggers the creation of a new blank page
+     * Triggers the creation of a new page
      */
     fun createPage() {
-        _onCreateNewPageRequested.call()
+        (uiState.value as? ContentUiState)?.let { state ->
+            val selection = state.selectedLayoutSlug != null
+            _onCreateNewPageRequested.value = if (selection) {
+                layouts.layouts.firstOrNull { it.slug == state.selectedLayoutSlug }?.content ?: ""
+            } else ""
+        }
     }
 
     private fun updateUiState(uiState: UiState) {

WordPress/src/main/res/drawable/ic_layout_selection_overlay_148dp.xml

@@ -1,6 +1,7 @@
 <vector android:autoMirrored="true" android:height="230dp"
     android:viewportHeight="230" android:viewportWidth="148"
     android:width="148dp" xmlns:android="http://schemas.android.com/apk/res/android">
+    <path android:fillColor="@android:color/white" android:pathData="M128,20m-9.9,0a9.9,9.9 0,1 1,19.8 0a9.9,9.9 0,1 1,-19.8 0"/>
     <path android:fillColor="#00000000"
         android:pathData="M4,1L144,1A3,3 0,0 1,147 4L147,226A3,3 0,0 1,144 229L4,229A3,3 0,0 1,1 226L1,4A3,3 0,0 1,4 1z"
         android:strokeColor="@color/accent_50" android:strokeWidth="2"/>

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

@@ -2,6 +2,7 @@
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
+    android:background="?attr/categoriesBackground"
     android:gravity="center"
     android:orientation="horizontal"
     android:paddingBottom="@dimen/mlp_bottom_button_vertical_margin"

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

@@ -36,24 +36,25 @@
                 android:elevation="0dp"
                 app:layout_collapseMode="pin">
 
-                <LinearLayout
+                <FrameLayout
                     android:layout_width="match_parent"
-                    android:layout_height="wrap_content"
-                    android:layout_gravity="bottom"
+                    android:layout_height="@dimen/toolbar_height"
                     android:orientation="vertical">
 
                     <include
                         layout="@layout/bottom_sheet_handle_view"
                         android:layout_width="match_parent"
                         android:layout_height="wrap_content"
-                        android:layout_marginBottom="@dimen/mlp_layouts_handle_margin_bottom" />
+                        android:layout_marginEnd="@dimen/margin_extra_large"
+                        android:layout_gravity="top" />
 
                     <include
                         layout="@layout/modal_layout_picker_titlebar"
                         android:layout_width="match_parent"
+                        android:layout_gravity="center_vertical"
                         android:layout_height="wrap_content" />
 
-                </LinearLayout>
+                </FrameLayout>
 
             </com.google.android.material.appbar.MaterialToolbar>
 
@@ -89,7 +90,7 @@
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         android:background="?attr/categoriesBackground"
-        android:layout_marginBottom="@dimen/mlp_layouts_margin_bottom"
+        android:layout_marginBottom="@dimen/toolbar_content_offset"
         android:clipToPadding="false"
         android:descendantFocusability="beforeDescendants"
         android:scrollbars="vertical"
@@ -99,7 +100,6 @@
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:layout_gravity="bottom"
-        android:background="?attr/categoriesBackground"
         android:orientation="vertical">
 
         <View

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

@@ -7,6 +7,7 @@
         android:id="@+id/backButton"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
+        android:layout_marginStart="@dimen/negative_margin_medium"
         android:backgroundTint="@color/transparent"
         android:contentDescription="@string/navigate_back_desc"
         android:src="@drawable/ic_arrow_left_white_24dp"
@@ -15,5 +16,6 @@
     <TextView
         android:id="@+id/title"
         style="@style/ModalLayoutPickerHeader"
+        android:layout_marginEnd="@dimen/margin_medium"
         android:text="@string/mlp_choose_layout_title" />
 </FrameLayout>

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

@@ -554,14 +554,13 @@
     <dimen name="thumbnail_background_margin">10dp</dimen>
 
     <!-- Modal Layout Picker Styles -->
-    <dimen name="mlp_header_scroll_snap_threshold">-24dp</dimen>
-    <dimen name="mlp_layouts_handle_margin_bottom">@dimen/margin_medium</dimen>
+    <dimen name="mlp_header_scroll_snap_threshold">-36dp</dimen>
     <dimen name="mlp_layouts_row_height">281dp</dimen>
     <dimen name="mlp_bottom_shadow_height">@dimen/margin_medium</dimen>
     <dimen name="mlp_bottom_button_vertical_margin">@dimen/margin_extra_large</dimen>
     <dimen name="mlp_bottom_button_horizontal_margin">@dimen/mlp_layout_card_margin_start</dimen>
     <dimen name="mlp_bottom_button_horizontal_central_margin">@dimen/margin_extra_large</dimen>
-    <dimen name="mlp_categories_bar_height">52dp</dimen>
+    <dimen name="mlp_categories_bar_height">44dp</dimen>
     <dimen name="mlp_layout_card_height">204dp</dimen>
     <dimen name="mlp_layout_card_width">136dp</dimen>
     <dimen name="mlp_layout_card_margin_start">20dp</dimen>
@@ -571,11 +570,12 @@
     <dimen name="mlp_category_horizontal_central_margin">@dimen/margin_medium</dimen>
     <dimen name="mlp_categories_margin">@dimen/margin_medium</dimen>
     <dimen name="mlp_categories_emoji_size">18dp</dimen>
+    <dimen name="mlp_titles_top_margin">14dp</dimen>
+    <dimen name="mlp_titles_bottom_margin">28dp</dimen>
     <dimen name="mlp_layout_card_margin_end">@dimen/margin_medium</dimen>
     <dimen name="mlp_layout_card_margin_top">@dimen/margin_extra_large</dimen>
     <dimen name="mlp_layout_card_elevation">@dimen/margin_small</dimen>
     <dimen name="mlp_layout_card_radius">@dimen/margin_small</dimen>
-    <dimen name="mlp_layouts_margin_bottom">84dp</dimen>
     <dimen name="mlp_layouts_line_separator_height">@dimen/margin_extra_extra_small</dimen>
     <dimen name="mlp_layout_skeleton_line_height">24dp</dimen>
     <dimen name="mlp_layout_skeleton_line_width">100dp</dimen>

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

@@ -2874,7 +2874,7 @@
     <string name="content_description_logo">WordPress Logo</string>
 
     <!-- Modal Layout Picker -->
-    <string name="mlp_choose_layout_title">Choose a Layout</string>
+    <string name="mlp_choose_layout_title">Choose a layout</string>
     <string name="mlp_choose_layout_subtitle">Get started by choosing from a wide variety of pre-made page layouts. Or just start with a blank page.</string>
     <string name="mlp_create_blank_page">Create blank page</string>
     <string name="mlp_create_page">Create page</string>

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

@@ -1255,23 +1255,31 @@
 
     <style name="ModalLayoutPickerHeader" parent="ModalLayoutPickerText">
         <item name="android:textAppearance">?attr/textAppearanceHeadline6</item>
+        <item name="fontFamily">serif</item>
+        <item name="android:textStyle">bold</item>
     </style>
 
     <style name="ModalLayoutPickerTitle" parent="ModalLayoutPickerText">
         <item name="android:layout_width">match_parent</item>
         <item name="android:textAppearance">?attr/textAppearanceHeadline4</item>
         <item name="android:textStyle">bold</item>
         <item name="android:textColor">?attr/colorOnSurface</item>
+        <item name="android:paddingTop">@dimen/mlp_titles_top_margin</item>
+        <item name="android:paddingBottom">@dimen/margin_small_medium</item>
+        <item name="fontFamily">serif</item>
     </style>
 
     <style name="ModalLayoutPickerSubtitle" parent="ModalLayoutPickerTitle">
-        <item name="android:layout_margin">@dimen/margin_extra_extra_medium_large</item>
-        <item name="android:layout_marginTop">@dimen/margin_extra_large</item>
+        <item name="android:layout_marginEnd">@dimen/margin_extra_extra_medium_large</item>
+        <item name="android:layout_marginStart">@dimen/margin_extra_extra_medium_large</item>
+        <item name="android:paddingTop">@dimen/margin_small</item>
+        <item name="android:paddingBottom">@dimen/mlp_titles_bottom_margin</item>
         <item name="android:textAppearance">?attr/textAppearanceBody1</item>
         <item name="android:textColor">?attr/colorOnSurface</item>
         <item name="android:textStyle">normal</item>
         <item name="android:alpha">0.6</item>
         <item name="android:maxLines">5</item>
+        <item name="fontFamily">sans-serif</item>
     </style>
 
     <style name="Widget.ModalLayoutPicker.Button.Primary" parent="Widget.MaterialComponents.Button.UnelevatedButton">
@@ -1291,6 +1299,7 @@
         <item name="android:textSize">@dimen/text_sz_large</item>
         <item name="android:textStyle">bold</item>
         <item name="android:textAppearance">?attr/textAppearanceHeadline5</item>
+        <item name="fontFamily">serif</item>
     </style>
 
     <style name="ModalLayoutPickerLayoutsSeparatorLine">

WordPress/src/test/java/org/wordpress/android/viewmodel/mlp/ModalLayoutPickerViewModelTest.kt

@@ -37,7 +37,7 @@ class ModalLayoutPickerViewModelTest {
     @Mock lateinit var dispatcher: Dispatcher
     @Mock lateinit var siteStore: SiteStore
     @Mock lateinit var appPrefsWrapper: AppPrefsWrapper
-    @Mock lateinit var onCreateNewPageRequestedObserver: Observer<Unit>
+    @Mock lateinit var onCreateNewPageRequestedObserver: Observer<String>
 
     @Before
     fun setUp() {