From 1f2194cc3e922718752977e02d2780ae4fd45223 Mon Sep 17 00:00:00 2001
From: Nik Clayton <nik@ngo.org.uk>
Date: Sat, 22 Jun 2024 16:55:57 +0200
Subject: [PATCH] fix: Ensure text in nav menu account header is legible (#773)

The user might have set a profile header image that is close to the
colour of the text in the account header in the left navigation menu.
This can make the text difficult or impossible to see.

Work around this by drawing a partially transparent scrim behind the
text so it's always displayed over a background that makes the text
legible.

Fixes #298
---
 app/src/main/java/app/pachli/MainActivity.kt          |  5 ++---
 app/src/main/res/layout/material_drawer_header.xml    | 11 +++++++++++
 .../src/main/res/values-night/theme_colors.xml        |  2 ++
 core/designsystem/src/main/res/values/colors.xml      |  1 +
 4 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/app/src/main/java/app/pachli/MainActivity.kt b/app/src/main/java/app/pachli/MainActivity.kt
index f05793c0e..b4595aafe 100644
--- a/app/src/main/java/app/pachli/MainActivity.kt
+++ b/app/src/main/java/app/pachli/MainActivity.kt
@@ -140,6 +140,7 @@ import com.mikepenz.iconics.IconicsSize
 import com.mikepenz.iconics.typeface.library.googlematerial.GoogleMaterial
 import com.mikepenz.materialdrawer.holder.BadgeStyle
 import com.mikepenz.materialdrawer.holder.ColorHolder
+import com.mikepenz.materialdrawer.holder.ImageHolder
 import com.mikepenz.materialdrawer.holder.StringHolder
 import com.mikepenz.materialdrawer.iconics.iconicsIcon
 import com.mikepenz.materialdrawer.model.AbstractDrawerItem
@@ -1057,9 +1058,7 @@ class MainActivity : BottomSheetActivity(), ActionButtonActivity, MenuProvider {
     }
 
     private fun onFetchUserInfoSuccess(me: Account) {
-        glide.asBitmap()
-            .load(me.header)
-            .into(header.accountHeaderBackground)
+        header.headerBackground = ImageHolder(me.header)
 
         loadDrawerAvatar(me.avatar, false)
 
diff --git a/app/src/main/res/layout/material_drawer_header.xml b/app/src/main/res/layout/material_drawer_header.xml
index 019a0d330..d86e714c9 100644
--- a/app/src/main/res/layout/material_drawer_header.xml
+++ b/app/src/main/res/layout/material_drawer_header.xml
@@ -18,6 +18,17 @@
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintTop_toTopOf="parent" />
 
+    <!-- Partially transparent scrim so the text is visible whatever the background is -->
+    <ImageView
+        android:layout_width="0dp"
+        android:layout_height="0dp"
+        android:contentDescription="@null"
+        android:foreground="@color/account_header_scrim"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toBottomOf="@id/material_drawer_text_guideline" />
+
     <androidx.constraintlayout.widget.Guideline
         android:id="@+id/material_drawer_statusbar_guideline"
         android:layout_width="wrap_content"
diff --git a/core/designsystem/src/main/res/values-night/theme_colors.xml b/core/designsystem/src/main/res/values-night/theme_colors.xml
index 1cb754864..65c0bcd66 100644
--- a/core/designsystem/src/main/res/values-night/theme_colors.xml
+++ b/core/designsystem/src/main/res/values-night/theme_colors.xml
@@ -7,4 +7,6 @@
     <!-- colors used to show inserted/deleted text -->
     <color name="view_edits_background_insert">#00731B</color>
     <color name="view_edits_background_delete">#DF0000</color>
+
+    <color name="account_header_scrim">#8f000000</color>
 </resources>
diff --git a/core/designsystem/src/main/res/values/colors.xml b/core/designsystem/src/main/res/values/colors.xml
index 5fb7a2cec..8354264d8 100644
--- a/core/designsystem/src/main/res/values/colors.xml
+++ b/core/designsystem/src/main/res/values/colors.xml
@@ -91,6 +91,7 @@
     <color name="transparent_tusky_blue">#8c2b90d9</color>
     <color name="transparent_black">#8f000000</color>
     <color name="transparent_statusbar_background">#44000000</color>
+    <color name="account_header_scrim">#8fffffff</color>
 
     <!-- colors used in the app icon -->
     <color name="icon_background">#09497b</color>