From 80e02778059e6186a8f320c0d8721b81e07b846b Mon Sep 17 00:00:00 2001 From: Andy Valdez Date: Thu, 6 Jun 2024 17:08:10 -0400 Subject: [PATCH 1/7] [Bug] Fixed broken button spacing on foldables. Additionally also fixed an issue where the app would not poperly layout in tablet landscape mode. This occurred due to the portrait limitation on the login activity. --- .../android/ui/accounts/login/LoginPrologueRevampedFragment.kt | 1 + .../android/ui/accounts/login/components/PrimaryButton.kt | 2 ++ WordPress/src/main/AndroidManifest.xml | 1 - .../ui/compose/components/ColumnWithFrostedGlassBackground.kt | 3 ++- WordPress/src/main/res/values-w600dp/dimens.xml | 3 --- WordPress/src/main/res/values/dimens.xml | 1 + 6 files changed, 6 insertions(+), 5 deletions(-) diff --git a/WordPress/src/jetpack/java/org/wordpress/android/ui/accounts/login/LoginPrologueRevampedFragment.kt b/WordPress/src/jetpack/java/org/wordpress/android/ui/accounts/login/LoginPrologueRevampedFragment.kt index 5f0f26b0967d..2bd26b2682df 100644 --- a/WordPress/src/jetpack/java/org/wordpress/android/ui/accounts/login/LoginPrologueRevampedFragment.kt +++ b/WordPress/src/jetpack/java/org/wordpress/android/ui/accounts/login/LoginPrologueRevampedFragment.kt @@ -148,6 +148,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() { diff --git a/WordPress/src/jetpack/java/org/wordpress/android/ui/accounts/login/components/PrimaryButton.kt b/WordPress/src/jetpack/java/org/wordpress/android/ui/accounts/login/components/PrimaryButton.kt index d9cd6bd25b9e..3652b4c9bfda 100644 --- a/WordPress/src/jetpack/java/org/wordpress/android/ui/accounts/login/components/PrimaryButton.kt +++ b/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( diff --git a/WordPress/src/main/AndroidManifest.xml b/WordPress/src/main/AndroidManifest.xml index 81c3975ea3ad..03c61c943650 100644 --- a/WordPress/src/main/AndroidManifest.xml +++ b/WordPress/src/main/AndroidManifest.xml @@ -112,7 +112,6 @@ Unit ) { Column( - modifier = Modifier.background(backgroundColor) + modifier = Modifier.background(backgroundColor), horizontalAlignment = Alignment.CenterHorizontally ) { Divider( color = borderColor, diff --git a/WordPress/src/main/res/values-w600dp/dimens.xml b/WordPress/src/main/res/values-w600dp/dimens.xml index 289ab5a6d619..30d9ac6dad3d 100644 --- a/WordPress/src/main/res/values-w600dp/dimens.xml +++ b/WordPress/src/main/res/values-w600dp/dimens.xml @@ -10,7 +10,4 @@ @dimen/content_margin_tablet @dimen/content_margin_tablet @dimen/margin_extra_extra_large - - - 250dp diff --git a/WordPress/src/main/res/values/dimens.xml b/WordPress/src/main/res/values/dimens.xml index 921a63906006..39a99e5f99ec 100644 --- a/WordPress/src/main/res/values/dimens.xml +++ b/WordPress/src/main/res/values/dimens.xml @@ -678,6 +678,7 @@ 140dp 160dp 20dp + 600dp 5dp From 515b32d28b21ca8f046cdc745a339cf123752eae Mon Sep 17 00:00:00 2001 From: Andy Valdez Date: Fri, 7 Jun 2024 12:52:33 -0400 Subject: [PATCH 2/7] [UI] Adaptive navigation view when on phone vs tablet or foldables. --- .../android/ui/main/WPMainNavigationView.kt | 40 +++++---- .../main/res/layout-sw600dp/main_activity.xml | 85 +++++++++++++++++++ .../layout-sw600dp/main_navigation_view.xml | 11 +++ .../main/res/layout/main_navigation_view.xml | 11 +++ 4 files changed, 129 insertions(+), 18 deletions(-) create mode 100644 WordPress/src/main/res/layout-sw600dp/main_activity.xml create mode 100644 WordPress/src/main/res/layout-sw600dp/main_navigation_view.xml create mode 100644 WordPress/src/main/res/layout/main_navigation_view.xml diff --git a/WordPress/src/main/java/org/wordpress/android/ui/main/WPMainNavigationView.kt b/WordPress/src/main/java/org/wordpress/android/ui/main/WPMainNavigationView.kt index 57138416e919..d88ffd50ab53 100644 --- a/WordPress/src/main/java/org/wordpress/android/ui/main/WPMainNavigationView.kt +++ b/WordPress/src/main/java/org/wordpress/android/ui/main/WPMainNavigationView.kt @@ -10,6 +10,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 @@ -20,9 +21,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 @@ -64,7 +64,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 @@ -75,6 +75,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) }) @@ -86,14 +87,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 { @@ -106,17 +107,20 @@ 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) + 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(R.id.nav_label) @@ -198,16 +202,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 { @@ -275,7 +279,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) } @@ -372,10 +376,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 } diff --git a/WordPress/src/main/res/layout-sw600dp/main_activity.xml b/WordPress/src/main/res/layout-sw600dp/main_activity.xml new file mode 100644 index 000000000000..eeccc6435b20 --- /dev/null +++ b/WordPress/src/main/res/layout-sw600dp/main_activity.xml @@ -0,0 +1,85 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/WordPress/src/main/res/layout-sw600dp/main_navigation_view.xml b/WordPress/src/main/res/layout-sw600dp/main_navigation_view.xml new file mode 100644 index 000000000000..e80bd74670e1 --- /dev/null +++ b/WordPress/src/main/res/layout-sw600dp/main_navigation_view.xml @@ -0,0 +1,11 @@ + + diff --git a/WordPress/src/main/res/layout/main_navigation_view.xml b/WordPress/src/main/res/layout/main_navigation_view.xml new file mode 100644 index 000000000000..9ad3b1342baa --- /dev/null +++ b/WordPress/src/main/res/layout/main_navigation_view.xml @@ -0,0 +1,11 @@ + + From 7d8f03b69258da0d2be6b449fc82af837046f5f6 Mon Sep 17 00:00:00 2001 From: Andy Valdez Date: Fri, 14 Jun 2024 15:34:24 -0400 Subject: [PATCH 3/7] Improved phone landscape spacing on logos. --- .../android/ui/accounts/login/LoginPrologueRevampedFragment.kt | 3 ++- WordPress/src/main/res/values-land/dimens.xml | 2 ++ WordPress/src/main/res/values-sw600dp-land/dimens.xml | 2 ++ WordPress/src/main/res/values/dimens.xml | 1 + 4 files changed, 7 insertions(+), 1 deletion(-) diff --git a/WordPress/src/jetpack/java/org/wordpress/android/ui/accounts/login/LoginPrologueRevampedFragment.kt b/WordPress/src/jetpack/java/org/wordpress/android/ui/accounts/login/LoginPrologueRevampedFragment.kt index 2bd26b2682df..bf6afe890008 100644 --- a/WordPress/src/jetpack/java/org/wordpress/android/ui/accounts/login/LoginPrologueRevampedFragment.kt +++ b/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) ) diff --git a/WordPress/src/main/res/values-land/dimens.xml b/WordPress/src/main/res/values-land/dimens.xml index 0a2ec43b918c..f8a9d4171309 100644 --- a/WordPress/src/main/res/values-land/dimens.xml +++ b/WordPress/src/main/res/values-land/dimens.xml @@ -16,4 +16,6 @@ 160dp + 25dp + diff --git a/WordPress/src/main/res/values-sw600dp-land/dimens.xml b/WordPress/src/main/res/values-sw600dp-land/dimens.xml index 4fd176a6882f..1c1d4c59633a 100644 --- a/WordPress/src/main/res/values-sw600dp-land/dimens.xml +++ b/WordPress/src/main/res/values-sw600dp-land/dimens.xml @@ -2,4 +2,6 @@ @dimen/reader_detail_margin_tablet_landscape 512dp + + 135dp diff --git a/WordPress/src/main/res/values/dimens.xml b/WordPress/src/main/res/values/dimens.xml index 39a99e5f99ec..a8866fd63e9f 100644 --- a/WordPress/src/main/res/values/dimens.xml +++ b/WordPress/src/main/res/values/dimens.xml @@ -679,6 +679,7 @@ 160dp 20dp 600dp + 135dp 5dp From 758bc87dc088243ba5611c53407df0596e4466ae Mon Sep 17 00:00:00 2001 From: Andy Valdez Date: Fri, 14 Jun 2024 16:13:40 -0400 Subject: [PATCH 4/7] Added material spec padding within navigation rail. --- .../java/org/wordpress/android/ui/main/WPMainNavigationView.kt | 2 ++ WordPress/src/main/res/values-w600dp/dimens.xml | 1 + WordPress/src/main/res/values/dimens.xml | 1 + 3 files changed, 4 insertions(+) diff --git a/WordPress/src/main/java/org/wordpress/android/ui/main/WPMainNavigationView.kt b/WordPress/src/main/java/org/wordpress/android/ui/main/WPMainNavigationView.kt index d88ffd50ab53..a68462b0799b 100644 --- a/WordPress/src/main/java/org/wordpress/android/ui/main/WPMainNavigationView.kt +++ b/WordPress/src/main/java/org/wordpress/android/ui/main/WPMainNavigationView.kt @@ -110,6 +110,8 @@ class WPMainNavigationView @JvmOverloads constructor( 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) diff --git a/WordPress/src/main/res/values-w600dp/dimens.xml b/WordPress/src/main/res/values-w600dp/dimens.xml index 30d9ac6dad3d..da95c8944ac5 100644 --- a/WordPress/src/main/res/values-w600dp/dimens.xml +++ b/WordPress/src/main/res/values-w600dp/dimens.xml @@ -10,4 +10,5 @@ @dimen/content_margin_tablet @dimen/content_margin_tablet @dimen/margin_extra_extra_large + 12dp diff --git a/WordPress/src/main/res/values/dimens.xml b/WordPress/src/main/res/values/dimens.xml index a8866fd63e9f..dd0fb9dd4b4d 100644 --- a/WordPress/src/main/res/values/dimens.xml +++ b/WordPress/src/main/res/values/dimens.xml @@ -761,6 +761,7 @@ 14dp 18dp + 0dp 16dp From dfe0c68baedf2d04805579b486944e1d0aa2edb6 Mon Sep 17 00:00:00 2001 From: Andy Valdez Date: Fri, 14 Jun 2024 16:54:23 -0400 Subject: [PATCH 5/7] Fix overdrawing --- WordPress/src/main/res/layout/main_activity.xml | 1 - 1 file changed, 1 deletion(-) diff --git a/WordPress/src/main/res/layout/main_activity.xml b/WordPress/src/main/res/layout/main_activity.xml index 3148c3789915..bd503c98d01d 100644 --- a/WordPress/src/main/res/layout/main_activity.xml +++ b/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" /> From 3ddb706293c6711b770c5cc2476f137eef6edd11 Mon Sep 17 00:00:00 2001 From: Andy Valdez Date: Mon, 17 Jun 2024 14:28:41 -0400 Subject: [PATCH 6/7] [Theme] Update base theme to use DayNight instead of Bridge. --- WordPress/src/main/res/layout-sw600dp/main_navigation_view.xml | 1 - WordPress/src/main/res/layout/main_navigation_view.xml | 1 - WordPress/src/main/res/values-night/styles.xml | 2 +- WordPress/src/main/res/values/styles.xml | 2 +- 4 files changed, 2 insertions(+), 4 deletions(-) diff --git a/WordPress/src/main/res/layout-sw600dp/main_navigation_view.xml b/WordPress/src/main/res/layout-sw600dp/main_navigation_view.xml index e80bd74670e1..77f807402a0f 100644 --- a/WordPress/src/main/res/layout-sw600dp/main_navigation_view.xml +++ b/WordPress/src/main/res/layout-sw600dp/main_navigation_view.xml @@ -5,7 +5,6 @@ android:id="@+id/main_navigation_bar_view" android:layout_width="80dp" android:layout_height="match_parent" - android:background="?attr/colorSurface" app:elevation="@dimen/navbar_elevation" android:visibility="visible" app:menu="@menu/bottom_nav_main"/> diff --git a/WordPress/src/main/res/layout/main_navigation_view.xml b/WordPress/src/main/res/layout/main_navigation_view.xml index 9ad3b1342baa..df36f86798e8 100644 --- a/WordPress/src/main/res/layout/main_navigation_view.xml +++ b/WordPress/src/main/res/layout/main_navigation_view.xml @@ -5,7 +5,6 @@ android:id="@+id/main_navigation_bar_view" 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"/> diff --git a/WordPress/src/main/res/values-night/styles.xml b/WordPress/src/main/res/values-night/styles.xml index db3e1b794ff8..b7854701f430 100644 --- a/WordPress/src/main/res/values-night/styles.xml +++ b/WordPress/src/main/res/values-night/styles.xml @@ -1,7 +1,7 @@ -