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
This commit is contained in:
Nik Clayton 2024-06-22 16:55:57 +02:00 committed by GitHub
parent 0574c2100d
commit 1f2194cc3e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 16 additions and 3 deletions

View File

@ -140,6 +140,7 @@ import com.mikepenz.iconics.IconicsSize
import com.mikepenz.iconics.typeface.library.googlematerial.GoogleMaterial import com.mikepenz.iconics.typeface.library.googlematerial.GoogleMaterial
import com.mikepenz.materialdrawer.holder.BadgeStyle import com.mikepenz.materialdrawer.holder.BadgeStyle
import com.mikepenz.materialdrawer.holder.ColorHolder import com.mikepenz.materialdrawer.holder.ColorHolder
import com.mikepenz.materialdrawer.holder.ImageHolder
import com.mikepenz.materialdrawer.holder.StringHolder import com.mikepenz.materialdrawer.holder.StringHolder
import com.mikepenz.materialdrawer.iconics.iconicsIcon import com.mikepenz.materialdrawer.iconics.iconicsIcon
import com.mikepenz.materialdrawer.model.AbstractDrawerItem import com.mikepenz.materialdrawer.model.AbstractDrawerItem
@ -1057,9 +1058,7 @@ class MainActivity : BottomSheetActivity(), ActionButtonActivity, MenuProvider {
} }
private fun onFetchUserInfoSuccess(me: Account) { private fun onFetchUserInfoSuccess(me: Account) {
glide.asBitmap() header.headerBackground = ImageHolder(me.header)
.load(me.header)
.into(header.accountHeaderBackground)
loadDrawerAvatar(me.avatar, false) loadDrawerAvatar(me.avatar, false)

View File

@ -18,6 +18,17 @@
app:layout_constraintStart_toStartOf="parent" app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="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 <androidx.constraintlayout.widget.Guideline
android:id="@+id/material_drawer_statusbar_guideline" android:id="@+id/material_drawer_statusbar_guideline"
android:layout_width="wrap_content" android:layout_width="wrap_content"

View File

@ -7,4 +7,6 @@
<!-- colors used to show inserted/deleted text --> <!-- colors used to show inserted/deleted text -->
<color name="view_edits_background_insert">#00731B</color> <color name="view_edits_background_insert">#00731B</color>
<color name="view_edits_background_delete">#DF0000</color> <color name="view_edits_background_delete">#DF0000</color>
<color name="account_header_scrim">#8f000000</color>
</resources> </resources>

View File

@ -91,6 +91,7 @@
<color name="transparent_tusky_blue">#8c2b90d9</color> <color name="transparent_tusky_blue">#8c2b90d9</color>
<color name="transparent_black">#8f000000</color> <color name="transparent_black">#8f000000</color>
<color name="transparent_statusbar_background">#44000000</color> <color name="transparent_statusbar_background">#44000000</color>
<color name="account_header_scrim">#8fffffff</color>
<!-- colors used in the app icon --> <!-- colors used in the app icon -->
<color name="icon_background">#09497b</color> <color name="icon_background">#09497b</color>