Merge pull request #20957 from wordpress-mobile/andy/tablet-hacks

[UI] Make the login screen and bottom navigation view more tablet friendly.

WordPress/src/jetpack/java/org/wordpress/android/ui/accounts/login/LoginPrologueRevampedFragment.kt

@@ -19,6 +19,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.ComposeView
 import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.res.colorResource
+import androidx.compose.ui.res.dimensionResource
 import androidx.compose.ui.tooling.preview.Devices
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
@@ -127,7 +128,7 @@ private fun LoginScreenRevamped(
         TopLinearGradient()
         WordpressJetpackLogo(
             modifier = Modifier
-                .padding(top = 135.dp)
+                .padding(top = dimensionResource(id = R.dimen.login_prologue_logo_top_padding))
                 .width(132.dp)
                 .align(Alignment.TopCenter)
         )
@@ -148,6 +149,7 @@ private fun LoginScreenRevamped(
 
 @Preview(showBackground = true, device = Devices.PIXEL_4_XL)
 @Preview(showBackground = true, device = Devices.PIXEL_4_XL, uiMode = UI_MODE_NIGHT_YES)
+@Preview(showBackground = true, device = Devices.FOLDABLE)
 @Preview(showBackground = true, device = Devices.TABLET)
 @Composable
 fun PreviewLoginScreenRevamped() {

WordPress/src/jetpack/java/org/wordpress/android/ui/accounts/login/components/PrimaryButton.kt

@@ -2,6 +2,7 @@ package org.wordpress.android.ui.accounts.login.components
 
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.widthIn
 import androidx.compose.material.Button
 import androidx.compose.material.ButtonDefaults
 import androidx.compose.material.Text
@@ -35,6 +36,7 @@ fun PrimaryButton(
         modifier = modifier
             .padding(horizontal = dimensionResource(R.dimen.login_prologue_revamped_buttons_padding))
             .padding(top = Margin.ExtraLarge.value)
+            .widthIn(0.dp, dimensionResource(R.dimen.login_prologue_revamped_buttons_max_width))
             .fillMaxWidth(),
     ) {
         Text(

WordPress/src/jetpack/res/values-land/dimens.xml

@@ -0,0 +1,3 @@
+<resources>
+    <dimen name="login_prologue_logo_top_padding">25dp</dimen>
+</resources>

WordPress/src/jetpack/res/values-sw600dp-land/dimens.xml

@@ -0,0 +1,3 @@
+<resources>
+    <dimen name="login_prologue_logo_top_padding">135dp</dimen>
+</resources>

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

@@ -1,4 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
     <dimen name="login_prologue_revamped_prompts_padding">20dp</dimen>
+    <dimen name="login_prologue_revamped_buttons_max_width">600dp</dimen>
+    <dimen name="login_prologue_logo_top_padding">135dp</dimen>
 </resources>

WordPress/src/main/AndroidManifest.xml

@@ -113,9 +113,7 @@
         <activity
             android:name=".ui.accounts.LoginActivity"
             android:theme="@style/LoginTheme.TransparentSystemBars"
-            android:screenOrientation="portrait"
-            android:windowSoftInputMode="adjustResize"
-            tools:ignore="DiscouragedApi" />
+            android:windowSoftInputMode="adjustResize" />
 
         <activity
             android:name=".ui.accounts.LoginMagicLinkInterceptActivity"

WordPress/src/main/java/org/wordpress/android/ui/compose/components/ColumnWithFrostedGlassBackground.kt

@@ -7,6 +7,7 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.ColumnScope
 import androidx.compose.material.Divider
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.BlurredEdgeTreatment
 import androidx.compose.ui.draw.alpha
@@ -40,7 +41,7 @@ fun ColumnWithTopGlassBorder(
     content: @Composable ColumnScope.() -> Unit
 ) {
     Column(
-        modifier = Modifier.background(backgroundColor)
+        modifier = Modifier.background(backgroundColor), horizontalAlignment = Alignment.CenterHorizontally
     ) {
         Divider(
             color = borderColor,

WordPress/src/main/java/org/wordpress/android/ui/main/WPMainNavigationView.kt

@@ -11,6 +11,7 @@ import android.view.LayoutInflater
 import android.view.MenuItem
 import android.view.View
 import android.view.animation.AnimationUtils
+import android.widget.FrameLayout
 import android.widget.ImageView
 import android.widget.TextView
 import androidx.annotation.DrawableRes
@@ -21,9 +22,8 @@ import androidx.core.view.setPadding
 import androidx.core.widget.ImageViewCompat
 import androidx.fragment.app.Fragment
 import androidx.fragment.app.FragmentManager
-import com.google.android.material.bottomnavigation.BottomNavigationItemView
-import com.google.android.material.bottomnavigation.BottomNavigationMenuView
-import com.google.android.material.bottomnavigation.BottomNavigationView
+import com.google.android.material.navigation.NavigationBarItemView
+import com.google.android.material.navigation.NavigationBarMenuView
 import com.google.android.material.navigation.NavigationBarView
 import com.google.android.material.navigation.NavigationBarView.OnItemReselectedListener
 import com.google.android.material.navigation.NavigationBarView.OnItemSelectedListener
@@ -66,7 +66,7 @@ class WPMainNavigationView @JvmOverloads constructor(
     context: Context,
     attrs: AttributeSet? = null,
     defStyleAttr: Int = 0
-) : BottomNavigationView(context, attrs, defStyleAttr),
+) : FrameLayout(context, attrs, defStyleAttr),
     OnItemSelectedListener, OnItemReselectedListener {
     private lateinit var navAdapter: NavAdapter
     private var fragmentManager: FragmentManager? = null
@@ -77,6 +77,7 @@ class WPMainNavigationView @JvmOverloads constructor(
         resources,
         MaterialR.dimen.material_emphasis_disabled
     )
+    private lateinit var navigationBarView: NavigationBarView
 
     val disabledColorFilter = ColorMatrixColorFilter(ColorMatrix().apply { setSaturation(0f) })
     val enabledColorFilter = ColorMatrixColorFilter(ColorMatrix().apply { setSaturation(1f) })
@@ -88,14 +89,14 @@ class WPMainNavigationView @JvmOverloads constructor(
     lateinit var accountStore: AccountStore
 
     private var currentPosition: Int
-        get() = getPositionForItemId(selectedItemId)
+        get() = getPositionForItemId(navigationBarView.selectedItemId)
         set(position) = updateCurrentPosition(position)
 
     val activeFragment: Fragment?
         get() = navAdapter.getFragment(currentPosition)
 
     var currentSelectedPage: PageType
-        get() = getPageForItemId(selectedItemId)
+        get() = getPageForItemId(navigationBarView.selectedItemId)
         set(pageType) = updateCurrentPosition(pages().indexOf(pageType))
 
     interface OnPageListener {
@@ -108,17 +109,22 @@ class WPMainNavigationView @JvmOverloads constructor(
         pageListener = listener
         jetpackFeatureRemovalPhaseHelper = helper
 
+        val inflater = LayoutInflater.from(context)
+        inflater.inflate(R.layout.main_navigation_view, this, true)
+        navigationBarView = findViewById(R.id.main_navigation_bar_view)
+        val horizontalPadding: Int = context.resources.getDimensionPixelSize(R.dimen.my_site_navigation_rail_padding)
+        navigationBarView.setPadding(horizontalPadding, 0, horizontalPadding, 0)
+
         navAdapter = NavAdapter()
         assignNavigationListeners(true)
         disableShiftMode()
 
         // overlay each item with our custom view
-        val menuView = getChildAt(0) as BottomNavigationMenuView
+        val menuView = navigationBarView.getChildAt(0) as NavigationBarMenuView
         if (!BuildConfig.ENABLE_READER) hideReaderTab()
 
-        val inflater = LayoutInflater.from(context)
-        for (i in 0 until menu.size()) {
-            val itemView = menuView.getChildAt(i) as BottomNavigationItemView
+        for (i in 0 until navigationBarView.menu.size()) {
+            val itemView = menuView.getChildAt(i) as NavigationBarItemView
             val customView: View = inflater.inflate(R.layout.navbar_item, menuView, false)
 
             val txtLabel = customView.findViewById<TextView>(R.id.nav_label)
@@ -200,16 +206,16 @@ class WPMainNavigationView @JvmOverloads constructor(
     }
 
     private fun hideReaderTab() {
-        menu.removeItem(R.id.nav_reader)
+        navigationBarView.menu.removeItem(R.id.nav_reader)
     }
 
     private fun disableShiftMode() {
-        labelVisibilityMode = NavigationBarView.LABEL_VISIBILITY_LABELED
+        navigationBarView.labelVisibilityMode = NavigationBarView.LABEL_VISIBILITY_LABELED
     }
 
     private fun assignNavigationListeners(assign: Boolean) {
-        setOnItemSelectedListener(if (assign) this else null)
-        setOnItemReselectedListener(if (assign) this else null)
+        navigationBarView.setOnItemSelectedListener(if (assign) this else null)
+        navigationBarView.setOnItemReselectedListener(if (assign) this else null)
     }
 
     override fun onNavigationItemSelected(item: MenuItem): Boolean {
@@ -277,7 +283,7 @@ class WPMainNavigationView @JvmOverloads constructor(
         // temporarily disable the nav listeners so they don't fire when we change the selected page
         assignNavigationListeners(false)
         try {
-            selectedItemId = getItemIdForPosition(position)
+            navigationBarView.selectedItemId = getItemIdForPosition(position)
         } finally {
             assignNavigationListeners(true)
         }
@@ -374,10 +380,10 @@ class WPMainNavigationView @JvmOverloads constructor(
 
     fun getFragment(pageType: PageType) = navAdapter.getFragmentIfExists(getPosition(pageType))
 
-    private fun getItemView(position: Int): BottomNavigationItemView? {
+    private fun getItemView(position: Int): NavigationBarItemView? {
         if (isValidPosition(position)) {
-            val menuView = getChildAt(0) as BottomNavigationMenuView
-            return menuView.getChildAt(position) as BottomNavigationItemView
+            val menuView = navigationBarView.getChildAt(0) as NavigationBarMenuView
+            return menuView.getChildAt(position) as NavigationBarItemView
         }
         return null
     }

WordPress/src/main/res/layout-sw600dp/main_activity.xml

@@ -0,0 +1,85 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- used to host quick start focus view - must be RelativeLayout or FrameLayout -->
+<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:id="@+id/root_view_main"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    android:clipChildren="false">
+
+    <FrameLayout
+        android:id="@+id/fragment_container"
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"
+        android:layout_toEndOf="@+id/bottom_navigation"
+        android:layout_alignParentEnd="true"/>
+
+    <org.wordpress.android.ui.main.WPMainNavigationView
+        android:id="@+id/bottom_navigation"
+        android:layout_width="wrap_content"
+        android:layout_height="match_parent"
+        android:visibility="visible"
+        android:layout_alignParentStart="true" />
+
+    <!-- this coordinator exists only for snackbars -->
+    <androidx.coordinatorlayout.widget.CoordinatorLayout
+        android:id="@+id/coordinator"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:layout_above="@+id/bottom_container"
+        android:layout_toEndOf="@id/bottom_navigation"/>
+
+    <LinearLayout
+        android:id="@+id/bottom_container"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:layout_alignParentBottom="true"
+        android:layout_toEndOf="@id/bottom_navigation"
+        android:orientation="vertical">
+
+        <org.wordpress.android.widgets.WPTextView
+            android:id="@+id/connection_bar"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:background="?attr/wpColorWarningDark"
+            android:gravity="center"
+            android:paddingBottom="@dimen/margin_medium"
+            android:paddingTop="@dimen/margin_medium"
+            android:text="@string/connectionbar_no_connection"
+            android:textAllCaps="true"
+            android:textAppearance="?attr/textAppearanceCaption"
+            android:textColor="?attr/colorOnPrimarySurface"
+            android:visibility="gone"
+            tools:visibility="visible" />
+
+        <View
+            android:id="@+id/navbar_separator"
+            android:layout_width="match_parent"
+            android:layout_height="@dimen/divider_size"
+            android:background="?android:attr/listDivider" />
+    </LinearLayout>
+
+    <RelativeLayout
+        android:id="@+id/fab_container"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_above="@+id/coordinator"
+        android:layout_alignParentEnd="true"
+        android:layout_marginBottom="@dimen/fab_margin"
+        android:layout_marginEnd="@dimen/fab_margin"
+        android:clipChildren="false"
+        android:clipToPadding="false">
+
+        <com.google.android.material.floatingactionbutton.FloatingActionButton
+            android:id="@+id/fab_button"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:contentDescription="@string/create_post_page_fab_tooltip"
+            android:src="@drawable/ic_plus_white_24dp"
+            android:visibility="gone"
+            app:borderWidth="0dp"
+            tools:visibility="visible" />
+    </RelativeLayout>
+
+</RelativeLayout>

WordPress/src/main/res/layout-sw600dp/main_navigation_view.xml

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<com.google.android.material.navigationrail.NavigationRailView
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    android:id="@+id/main_navigation_bar_view"
+    android:layout_width="80dp"
+    android:layout_height="match_parent"
+    app:elevation="@dimen/navbar_elevation"
+    android:visibility="visible"
+    app:menu="@menu/bottom_nav_main"/>

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

@@ -53,7 +53,6 @@
             android:id="@+id/bottom_navigation"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
-            android:background="?attr/colorSurface"
             app:elevation="@dimen/navbar_elevation"
             android:visibility="visible"
             app:menu="@menu/bottom_nav_main" />

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

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<com.google.android.material.bottomnavigation.BottomNavigationView
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    android:id="@+id/main_navigation_bar_view"
+    android:layout_width="match_parent"
+    android:layout_height="wrap_content"
+    app:elevation="@dimen/navbar_elevation"
+    android:visibility="visible"
+    app:menu="@menu/bottom_nav_main"/>

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

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources xmlns:tools="http://schemas.android.com/tools">
 
-    <style name="Base.Wordpress" parent="Theme.MaterialComponents.DayNight.Bridge">
+    <style name="Base.Wordpress" parent="Theme.MaterialComponents.DayNight">
         <item name="colorPrimary">@color/colorPrimary</item>
         <item name="colorPrimaryVariant">@color/colorPrimaryVariant</item>
         <item name="colorSecondary">@color/colorSecondary</item>

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

@@ -10,7 +10,5 @@
     <dimen name="site_creation_content_margin">@dimen/content_margin_tablet</dimen>
     <dimen name="post_list_content_margin_standard">@dimen/content_margin_tablet</dimen>
     <dimen name="interests_content_margin">@dimen/margin_extra_extra_large</dimen>
-
-    <!-- Login Prologue -->
-    <dimen name="login_prologue_revamped_buttons_padding">250dp</dimen>
+    <dimen name="my_site_navigation_rail_padding">12dp</dimen>
 </resources>

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

@@ -759,6 +759,7 @@
     </item>
     <dimen name="my_site_dashboard_card_page_create_page_top_padding">14dp</dimen>
     <dimen name="my_site_dashboard_card_page_create_page_divider_top_padding">18dp</dimen>
+    <dimen name="my_site_navigation_rail_padding">0dp</dimen>
 
     <!-- Dashboard card plans -->
     <dimen name="dashboard_card_plans_layout_padding">16dp</dimen>

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

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources xmlns:android="http://schemas.android.com/apk/res/android">
 
-    <style name="Base.Wordpress" parent="Theme.MaterialComponents.Light.DarkActionBar.Bridge">
+    <style name="Base.Wordpress" parent="Theme.MaterialComponents.DayNight">
         <!-- Material theme -->
         <item name="colorPrimary">@color/colorPrimary</item>
         <item name="colorPrimaryVariant">@color/colorPrimaryVariant</item>