Fix MessageList colors for better contrast

This removes the custom color attributes and replaces them by Material 3 colors.
thunderbird · Nov 25, 2024 · d81acaa · d81acaa
1 parent 7fe8346
commit d81acaa
Show file tree

Hide file tree

Showing 10 changed files with 33 additions and 89 deletions.
diff --git a/app-k9mail/src/main/res/values/themes.xml b/app-k9mail/src/main/res/values/themes.xml
@@ -15,13 +15,6 @@
         <item name="textColorPrimaryRecipientDropdown">@android:color/primary_text_light</item>
         <item name="textColorSecondaryRecipientDropdown">@android:color/secondary_text_light</item>
 
-        <item name="messageListRegularItemBackgroundColor">?android:attr/windowBackground</item>
-        <item name="messageListReadItemBackgroundColor">#ffd8d8d8</item>
-        <item name="messageListUnreadItemBackgroundColor">?attr/messageListRegularItemBackgroundColor</item>
-        <item name="messageListActiveItemBackgroundColor">?attr/colorSecondaryVariant</item>
-        <item name="messageListActiveItemBackgroundAlphaFraction">60%</item>
-        <item name="messageListActiveItemBackgroundAlphaBackground">?attr/colorSurface</item>
-
         <item name="messageListSwipeSelectColor">@color/material_blue_600</item>
         <item name="messageListSwipeToggleReadColor">@color/material_blue_600</item>
         <item name="messageListSwipeToggleStarColor">@color/material_orange_600</item>
@@ -59,13 +52,6 @@
         <item name="textColorPrimaryRecipientDropdown">@android:color/primary_text_dark</item>
         <item name="textColorSecondaryRecipientDropdown">@android:color/secondary_text_dark</item>
 
-        <item name="messageListRegularItemBackgroundColor">?android:attr/windowBackground</item>
-        <item name="messageListReadItemBackgroundColor">?attr/messageListRegularItemBackgroundColor</item>
-        <item name="messageListUnreadItemBackgroundColor">#ff505050</item>
-        <item name="messageListActiveItemBackgroundColor">?attr/colorSecondaryVariant</item>
-        <item name="messageListActiveItemBackgroundAlphaFraction">50%</item>
-        <item name="messageListActiveItemBackgroundAlphaBackground">?attr/colorSurface</item>
-
         <item name="messageListSwipeSelectColor">@color/material_blue_700</item>
         <item name="messageListSwipeToggleReadColor">@color/material_blue_700</item>
         <item name="messageListSwipeToggleStarColor">@color/material_orange_700</item>

diff --git a/app-thunderbird/src/main/res/values/themes.xml b/app-thunderbird/src/main/res/values/themes.xml
@@ -15,13 +15,6 @@
         <item name="textColorPrimaryRecipientDropdown">@android:color/primary_text_light</item>
         <item name="textColorSecondaryRecipientDropdown">@android:color/secondary_text_light</item>
 
-        <item name="messageListRegularItemBackgroundColor">?android:attr/windowBackground</item>
-        <item name="messageListReadItemBackgroundColor">#ffd8d8d8</item>
-        <item name="messageListUnreadItemBackgroundColor">?attr/messageListRegularItemBackgroundColor</item>
-        <item name="messageListActiveItemBackgroundColor">?attr/colorSecondaryVariant</item>
-        <item name="messageListActiveItemBackgroundAlphaFraction">60%</item>
-        <item name="messageListActiveItemBackgroundAlphaBackground">?attr/colorSurface</item>
-
         <item name="messageListSwipeSelectColor">@color/material_blue_600</item>
         <item name="messageListSwipeToggleReadColor">@color/material_blue_600</item>
         <item name="messageListSwipeToggleStarColor">@color/material_orange_600</item>
@@ -59,13 +52,6 @@
         <item name="textColorPrimaryRecipientDropdown">@android:color/primary_text_dark</item>
         <item name="textColorSecondaryRecipientDropdown">@android:color/secondary_text_dark</item>
 
-        <item name="messageListRegularItemBackgroundColor">?android:attr/windowBackground</item>
-        <item name="messageListReadItemBackgroundColor">?attr/messageListRegularItemBackgroundColor</item>
-        <item name="messageListUnreadItemBackgroundColor">#ff505050</item>
-        <item name="messageListActiveItemBackgroundColor">?attr/colorSecondaryVariant</item>
-        <item name="messageListActiveItemBackgroundAlphaFraction">50%</item>
-        <item name="messageListActiveItemBackgroundAlphaBackground">?attr/colorSurface</item>
-
         <item name="messageListSwipeSelectColor">@color/material_blue_700</item>
         <item name="messageListSwipeToggleReadColor">@color/material_blue_700</item>
         <item name="messageListSwipeToggleStarColor">@color/material_orange_700</item>

diff --git a/core/ui/theme/api/src/main/kotlin/app/k9mail/core/ui/theme/api/ThemeColorHelper.kt b/core/ui/theme/api/src/main/kotlin/app/k9mail/core/ui/theme/api/ThemeColorHelper.kt
@@ -0,0 +1,20 @@
+package app.k9mail.core.ui.theme.api
+
+import androidx.annotation.ColorInt
+import androidx.core.graphics.ColorUtils
+
+const val SELECTED_COLOR_ALPHA = 0.1f
+const val ACTIVE_COLOR_ALPHA = 0.15f
+
+const val MAX_ALPHA = 255
+
+object ThemeColorHelper {
+
+    fun getSelectedColor(@ColorInt color: Int): Int {
+        return ColorUtils.setAlphaComponent(color, (SELECTED_COLOR_ALPHA * MAX_ALPHA).toInt())
+    }
+
+    fun getActiveColor(@ColorInt color: Int): Int {
+        return ColorUtils.setAlphaComponent(color, (ACTIVE_COLOR_ALPHA * MAX_ALPHA).toInt())
+    }
+}
diff --git a/legacy/ui/legacy/build.gradle.kts b/legacy/ui/legacy/build.gradle.kts
@@ -14,6 +14,7 @@ dependencies {
     implementation(projects.uiUtils.toolbarBottomSheet)
 
     implementation(projects.core.featureflags)
+    implementation(projects.core.ui.theme.api)
     implementation(projects.feature.launcher)
     implementation(projects.feature.navigation.drawer)
     // TODO: Remove AccountOauth dependency

diff --git a/legacy/ui/legacy/src/main/java/com/fsck/k9/ui/ThemeExtensions.kt b/legacy/ui/legacy/src/main/java/com/fsck/k9/ui/ThemeExtensions.kt
@@ -1,7 +1,6 @@
 package com.fsck.k9.ui
 
 import android.content.res.Resources.Theme
-import android.graphics.Color
 import android.util.TypedValue
 
 fun Theme.resolveColorAttribute(attrId: Int): Int {
@@ -15,32 +14,6 @@ fun Theme.resolveColorAttribute(attrId: Int): Int {
     return typedValue.data
 }
 
-fun Theme.resolveColorAttribute(colorAttrId: Int, alphaFractionAttrId: Int, backgroundColorAttrId: Int): Int {
-    val typedValue = TypedValue()
-
-    if (!resolveAttribute(colorAttrId, typedValue, true)) {
-        error("Couldn't resolve attribute ($colorAttrId)")
-    }
-    val color = typedValue.data
-
-    if (!resolveAttribute(alphaFractionAttrId, typedValue, true)) {
-        error("Couldn't resolve attribute ($alphaFractionAttrId)")
-    }
-    val colorPercentage = TypedValue.complexToFloat(typedValue.data)
-    val backgroundPercentage = 1 - colorPercentage
-
-    if (!resolveAttribute(backgroundColorAttrId, typedValue, true)) {
-        error("Couldn't resolve attribute ($colorAttrId)")
-    }
-    val backgroundColor = typedValue.data
-
-    val red = colorPercentage * Color.red(color) + backgroundPercentage * Color.red(backgroundColor)
-    val green = colorPercentage * Color.green(color) + backgroundPercentage * Color.green(backgroundColor)
-    val blue = colorPercentage * Color.blue(color) + backgroundPercentage * Color.blue(backgroundColor)
-
-    return Color.rgb(red.toInt(), green.toInt(), blue.toInt())
-}
-
 fun Theme.getIntArray(attrId: Int): IntArray {
     val typedValue = TypedValue()
 

diff --git a/legacy/ui/legacy/src/main/java/com/fsck/k9/ui/messagelist/MessageListAdapter.kt b/legacy/ui/legacy/src/main/java/com/fsck/k9/ui/messagelist/MessageListAdapter.kt
@@ -26,6 +26,7 @@ import androidx.recyclerview.widget.DiffUtil
 import androidx.recyclerview.widget.RecyclerView
 import androidx.recyclerview.widget.RecyclerView.NO_POSITION
 import app.k9mail.core.ui.legacy.designsystem.atom.icon.Icons
+import app.k9mail.core.ui.theme.api.ThemeColorHelper
 import app.k9mail.legacy.message.controller.MessageReference
 import com.fsck.k9.FontSizes
 import com.fsck.k9.UiDensity
@@ -57,21 +58,18 @@ class MessageListAdapter internal constructor(
     private val answeredIcon: Drawable = ResourcesCompat.getDrawable(res, Icons.Outlined.Reply, theme)!!
     private val forwardedAnsweredIcon: Drawable =
         ResourcesCompat.getDrawable(res, Icons.Outlined.CompareArrows, theme)!!
-    private val activeItemBackgroundColor: Int = theme.resolveColorAttribute(
-        colorAttrId = R.attr.messageListActiveItemBackgroundColor,
-        alphaFractionAttrId = R.attr.messageListActiveItemBackgroundAlphaFraction,
-        backgroundColorAttrId = R.attr.messageListActiveItemBackgroundAlphaBackground,
-    )
-    private val selectedItemBackgroundColor: Int =
-        theme.resolveColorAttribute(com.google.android.material.R.attr.colorSurfaceContainerHigh)
+    private val activeItemBackgroundColor: Int = ThemeColorHelper.getActiveColor(MaterialR.attr.colorPrimary)
+    private val selectedItemBackgroundColor: Int = ThemeColorHelper.getSelectedColor(MaterialR.attr.colorPrimary)
+
     private val regularItemBackgroundColor: Int =
-        theme.resolveColorAttribute(R.attr.messageListRegularItemBackgroundColor)
-    private val readItemBackgroundColor: Int = theme.resolveColorAttribute(R.attr.messageListReadItemBackgroundColor)
+        theme.resolveColorAttribute(MaterialR.attr.colorSurface)
+    private val readItemBackgroundColor: Int =
+        theme.resolveColorAttribute(MaterialR.attr.colorSurfaceContainerHigh)
     private val unreadItemBackgroundColor: Int =
-        theme.resolveColorAttribute(R.attr.messageListUnreadItemBackgroundColor)
+        theme.resolveColorAttribute(MaterialR.attr.colorSurface)
 
     private val unreadTextColor: Int = theme.resolveColorAttribute(MaterialR.attr.colorOnSurface)
-    private val readTextColor: Int = theme.resolveColorAttribute(MaterialR.attr.colorOnSurfaceVariant)
+    private val readTextColor: Int = theme.resolveColorAttribute(MaterialR.attr.colorOnSurface)
     private val previewTextColor: Int = theme.resolveColorAttribute(MaterialR.attr.colorOnSurfaceVariant)
 
     private val compactVerticalPadding = res.getDimensionPixelSize(R.dimen.messageListCompactVerticalPadding)
@@ -502,8 +500,8 @@ class MessageListAdapter internal constructor(
     private fun setBackgroundColor(view: View, selected: Boolean, read: Boolean, active: Boolean) {
         val backGroundAsReadIndicator = appearance.backGroundAsReadIndicator
         val backgroundColor = when {
-            active -> activeItemBackgroundColor
             selected -> selectedItemBackgroundColor
+            active -> activeItemBackgroundColor
             backGroundAsReadIndicator && read -> readItemBackgroundColor
             backGroundAsReadIndicator && !read -> unreadItemBackgroundColor
             else -> regularItemBackgroundColor

diff --git a/legacy/ui/legacy/src/main/res/layout/message_list_item_footer.xml b/legacy/ui/legacy/src/main/res/layout/message_list_item_footer.xml
@@ -4,7 +4,7 @@
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="fill_parent"
     android:layout_height="?android:attr/listPreferredItemHeight"
-    android:background="?attr/messageListRegularItemBackgroundColor"
+    android:background="?attr/colorSurface"
     android:foreground="?attr/selectableItemBackground"
     android:gravity="center"
     android:orientation="horizontal"

diff --git a/legacy/ui/legacy/src/main/res/values/attrs.xml b/legacy/ui/legacy/src/main/res/values/attrs.xml
@@ -4,12 +4,6 @@
     <declare-styleable name="K9Styles">
         <attr name="textColorPrimaryRecipientDropdown" format="reference" />
         <attr name="textColorSecondaryRecipientDropdown" format="reference" />
-        <attr name="messageListRegularItemBackgroundColor" format="reference|color" />
-        <attr name="messageListReadItemBackgroundColor" format="reference|color" />
-        <attr name="messageListUnreadItemBackgroundColor" format="reference|color" />
-        <attr name="messageListActiveItemBackgroundColor" format="reference|color" />
-        <attr name="messageListActiveItemBackgroundAlphaFraction" format="fraction" />
-        <attr name="messageListActiveItemBackgroundAlphaBackground" format="reference|color" />
         <attr name="messageListSwipeSelectColor" format="reference|color" />
         <attr name="messageListSwipeToggleReadColor" format="reference|color" />
         <attr name="messageListSwipeToggleStarColor" format="reference|color" />

diff --git a/legacy/ui/legacy/src/main/res/values/themes.xml b/legacy/ui/legacy/src/main/res/values/themes.xml
diff --git a/legacy/ui/legacy/src/test/java/com/fsck/k9/ui/messagelist/MessageListAdapterTest.kt b/legacy/ui/legacy/src/test/java/com/fsck/k9/ui/messagelist/MessageListAdapterTest.kt
@@ -38,7 +38,7 @@ private const val DATE_DEFAULT_FONT_SIZE = 14f
 
 class MessageListAdapterTest : RobolectricTest() {
     val activity = Robolectric.buildActivity(AppCompatActivity::class.java).create().get()
-    val context: Context = ContextThemeWrapper(activity, R.style.Theme_Legacy_Test)
+    val context: Context = ContextThemeWrapper(activity, com.google.android.material.R.style.Theme_Material3_Light)
 
     val contactsPictureLoader: ContactPictureLoader = mock()
     val listItemListener: MessageListItemActionListener = mock()