From 023409d8cfed9390b8dcce45392935a8e521bb1a Mon Sep 17 00:00:00 2001 From: Adam Brown Date: Fri, 21 Jan 2022 17:10:28 +0000 Subject: [PATCH 1/6] updating use case icons to match designs - programmatically creates a layer drawable to avoid introducing new colours into the palette --- .../im/vector/app/core/extensions/Context.kt | 23 ++++++++ .../im/vector/app/core/extensions/TextView.kt | 7 ++- .../ftueauth/FtueAuthUseCaseFragment.kt | 52 +++++++++++++++++-- .../src/main/res/drawable/bg_feature_icon.xml | 9 ++++ .../src/main/res/drawable/ic_communities.xml | 18 ------- .../res/drawable/ic_friends_and_family.xml | 16 ------ vector/src/main/res/drawable/ic_teams.xml | 26 ---------- .../res/drawable/ic_use_case_communities.xml | 10 ++++ .../main/res/drawable/ic_use_case_friends.xml | 10 ++++ .../main/res/drawable/ic_use_case_teams.xml | 10 ++++ .../layout/fragment_ftue_auth_use_case.xml | 3 -- 11 files changed, 115 insertions(+), 69 deletions(-) create mode 100644 vector/src/main/res/drawable/bg_feature_icon.xml delete mode 100644 vector/src/main/res/drawable/ic_communities.xml delete mode 100644 vector/src/main/res/drawable/ic_friends_and_family.xml delete mode 100644 vector/src/main/res/drawable/ic_teams.xml create mode 100644 vector/src/main/res/drawable/ic_use_case_communities.xml create mode 100644 vector/src/main/res/drawable/ic_use_case_friends.xml create mode 100644 vector/src/main/res/drawable/ic_use_case_teams.xml diff --git a/vector/src/main/java/im/vector/app/core/extensions/Context.kt b/vector/src/main/java/im/vector/app/core/extensions/Context.kt index 59847da7c9..758bbe9b07 100644 --- a/vector/src/main/java/im/vector/app/core/extensions/Context.kt +++ b/vector/src/main/java/im/vector/app/core/extensions/Context.kt @@ -17,9 +17,32 @@ package im.vector.app.core.extensions import android.content.Context +import android.graphics.drawable.Drawable +import androidx.annotation.ColorInt +import androidx.annotation.ColorRes +import androidx.annotation.DrawableRes +import androidx.core.content.ContextCompat import dagger.hilt.EntryPoints import im.vector.app.core.di.SingletonEntryPoint +import kotlin.math.round fun Context.singletonEntryPoint(): SingletonEntryPoint { return EntryPoints.get(applicationContext, SingletonEntryPoint::class.java) } + +fun Context.getResTintedDrawable(@DrawableRes drawableRes: Int, @ColorRes tint: Int, alpha: Float? = null): Drawable? { + return getTintedDrawable(drawableRes, ContextCompat.getColor(this, tint), alpha) +} + +fun Context.getTintedDrawable(@DrawableRes drawableRes: Int, @ColorInt tint: Int, alpha: Float? = null) = ContextCompat.getDrawable(this, drawableRes) + ?.mutate() + ?.also { drawable -> + drawable.setTint(tint) + alpha?.let { + drawable.alpha = it.toAndroidAlpha() + } + } + +private fun Float.toAndroidAlpha(): Int { + return round(this * 255).toInt() +} diff --git a/vector/src/main/java/im/vector/app/core/extensions/TextView.kt b/vector/src/main/java/im/vector/app/core/extensions/TextView.kt index 048dddf9e5..cb34b95fa1 100644 --- a/vector/src/main/java/im/vector/app/core/extensions/TextView.kt +++ b/vector/src/main/java/im/vector/app/core/extensions/TextView.kt @@ -16,6 +16,7 @@ package im.vector.app.core.extensions +import android.graphics.drawable.Drawable import android.text.Spannable import android.text.SpannableString import android.text.TextPaint @@ -121,7 +122,11 @@ fun TextView.setLeftDrawable(@DrawableRes iconRes: Int, @AttrRes tintColor: Int? } else { ContextCompat.getDrawable(context, iconRes) } - setCompoundDrawablesWithIntrinsicBounds(icon, null, null, null) + setLeftDrawable(icon) +} + +fun TextView.setLeftDrawable(drawable: Drawable?) { + setCompoundDrawablesWithIntrinsicBounds(drawable, null, null, null) } /** diff --git a/vector/src/main/java/im/vector/app/features/onboarding/ftueauth/FtueAuthUseCaseFragment.kt b/vector/src/main/java/im/vector/app/features/onboarding/ftueauth/FtueAuthUseCaseFragment.kt index 6310eaea95..5325b25e93 100644 --- a/vector/src/main/java/im/vector/app/features/onboarding/ftueauth/FtueAuthUseCaseFragment.kt +++ b/vector/src/main/java/im/vector/app/features/onboarding/ftueauth/FtueAuthUseCaseFragment.kt @@ -16,21 +16,36 @@ package im.vector.app.features.onboarding.ftueauth +import android.graphics.Color +import android.graphics.drawable.Drawable +import android.graphics.drawable.LayerDrawable import android.os.Bundle import android.view.LayoutInflater import android.view.View import android.view.ViewGroup import android.widget.TextView +import androidx.annotation.ColorRes +import androidx.annotation.DrawableRes import androidx.annotation.StringRes +import androidx.core.content.ContextCompat import im.vector.app.R +import im.vector.app.core.extensions.getResTintedDrawable +import im.vector.app.core.extensions.getTintedDrawable +import im.vector.app.core.extensions.setLeftDrawable import im.vector.app.core.extensions.setTextWithColoredPart import im.vector.app.databinding.FragmentFtueAuthUseCaseBinding import im.vector.app.features.login.ServerType import im.vector.app.features.onboarding.FtueUseCase import im.vector.app.features.onboarding.OnboardingAction +import im.vector.app.features.themes.ThemeProvider import javax.inject.Inject -class FtueAuthUseCaseFragment @Inject constructor() : AbstractFtueAuthFragment() { +private const val DARK_MODE_ICON_BACKGROUND_ALPHA = 0.30f +private const val LIGHT_MODE_ICON_BACKGROUND_ALPHA = 0.15f + +class FtueAuthUseCaseFragment @Inject constructor( + private val themeProvider: ThemeProvider +) : AbstractFtueAuthFragment() { override fun getBinding(inflater: LayoutInflater, container: ViewGroup?): FragmentFtueAuthUseCaseBinding { return FragmentFtueAuthUseCaseBinding.inflate(inflater, container, false) @@ -42,9 +57,24 @@ class FtueAuthUseCaseFragment @Inject constructor() : AbstractFtueAuthFragment LIGHT_MODE_ICON_BACKGROUND_ALPHA + false -> DARK_MODE_ICON_BACKGROUND_ALPHA + } + val iconBackground = context.getResTintedDrawable(R.drawable.bg_feature_icon, tint, alpha = alpha) + val whiteLayer = context.getTintedDrawable(R.drawable.bg_feature_icon, Color.WHITE) + return LayerDrawable(arrayOf(whiteLayer, iconBackground, ContextCompat.getDrawable(context, icon))) + } } diff --git a/vector/src/main/res/drawable/bg_feature_icon.xml b/vector/src/main/res/drawable/bg_feature_icon.xml new file mode 100644 index 0000000000..299f1a4a2e --- /dev/null +++ b/vector/src/main/res/drawable/bg_feature_icon.xml @@ -0,0 +1,9 @@ + + + diff --git a/vector/src/main/res/drawable/ic_communities.xml b/vector/src/main/res/drawable/ic_communities.xml deleted file mode 100644 index f550de8106..0000000000 --- a/vector/src/main/res/drawable/ic_communities.xml +++ /dev/null @@ -1,18 +0,0 @@ - - - - - - diff --git a/vector/src/main/res/drawable/ic_friends_and_family.xml b/vector/src/main/res/drawable/ic_friends_and_family.xml deleted file mode 100644 index d7ac86f240..0000000000 --- a/vector/src/main/res/drawable/ic_friends_and_family.xml +++ /dev/null @@ -1,16 +0,0 @@ - - - - - diff --git a/vector/src/main/res/drawable/ic_teams.xml b/vector/src/main/res/drawable/ic_teams.xml deleted file mode 100644 index 8745cfd2d4..0000000000 --- a/vector/src/main/res/drawable/ic_teams.xml +++ /dev/null @@ -1,26 +0,0 @@ - - - - - - - - - diff --git a/vector/src/main/res/drawable/ic_use_case_communities.xml b/vector/src/main/res/drawable/ic_use_case_communities.xml new file mode 100644 index 0000000000..a511da6d2e --- /dev/null +++ b/vector/src/main/res/drawable/ic_use_case_communities.xml @@ -0,0 +1,10 @@ + + + diff --git a/vector/src/main/res/drawable/ic_use_case_friends.xml b/vector/src/main/res/drawable/ic_use_case_friends.xml new file mode 100644 index 0000000000..e4dea36774 --- /dev/null +++ b/vector/src/main/res/drawable/ic_use_case_friends.xml @@ -0,0 +1,10 @@ + + + diff --git a/vector/src/main/res/drawable/ic_use_case_teams.xml b/vector/src/main/res/drawable/ic_use_case_teams.xml new file mode 100644 index 0000000000..29b3def8cb --- /dev/null +++ b/vector/src/main/res/drawable/ic_use_case_teams.xml @@ -0,0 +1,10 @@ + + + diff --git a/vector/src/main/res/layout/fragment_ftue_auth_use_case.xml b/vector/src/main/res/layout/fragment_ftue_auth_use_case.xml index 594fc80696..d7e7bdc31a 100644 --- a/vector/src/main/res/layout/fragment_ftue_auth_use_case.xml +++ b/vector/src/main/res/layout/fragment_ftue_auth_use_case.xml @@ -89,7 +89,6 @@ android:padding="16dp" android:text="@string/ftue_auth_use_case_option_one" android:textColor="?vctr_content_primary" - app:drawableStartCompat="@drawable/ic_friends_and_family" app:layout_constraintBottom_toTopOf="@id/useCaseOptionTwo" app:layout_constraintEnd_toEndOf="@id/useCaseGutterEnd" app:layout_constraintStart_toStartOf="@id/useCaseGutterStart" @@ -107,7 +106,6 @@ android:padding="16dp" android:text="@string/ftue_auth_use_case_option_two" android:textColor="?vctr_content_primary" - app:drawableStartCompat="@drawable/ic_teams" app:layout_constraintBottom_toTopOf="@id/useCaseOptionThree" app:layout_constraintEnd_toEndOf="@id/useCaseGutterEnd" app:layout_constraintStart_toStartOf="@id/useCaseGutterStart" @@ -125,7 +123,6 @@ android:padding="16dp" android:text="@string/ftue_auth_use_case_option_three" android:textColor="?vctr_content_primary" - app:drawableStartCompat="@drawable/ic_communities" app:layout_constraintBottom_toTopOf="@id/useCaseSkip" app:layout_constraintEnd_toEndOf="@id/useCaseGutterEnd" app:layout_constraintStart_toStartOf="@id/useCaseGutterStart" From 3866cfeabc15f45c9c465692602c3ec39bbea072 Mon Sep 17 00:00:00 2001 From: Adam Brown Date: Fri, 21 Jan 2022 17:21:00 +0000 Subject: [PATCH 2/6] adding changelog entry --- changelog.d/5025.wip | 1 + 1 file changed, 1 insertion(+) create mode 100644 changelog.d/5025.wip diff --git a/changelog.d/5025.wip b/changelog.d/5025.wip new file mode 100644 index 0000000000..7d0aad7d9c --- /dev/null +++ b/changelog.d/5025.wip @@ -0,0 +1 @@ +Updating the FTUE use case icons \ No newline at end of file From f8e65f5872054cf277e66c298dfc44f6b792d501 Mon Sep 17 00:00:00 2001 From: Adam Brown Date: Mon, 24 Jan 2022 17:47:15 +0000 Subject: [PATCH 3/6] avoiding nullable param and supplying a range for the tint alpha --- .../src/main/java/im/vector/app/core/extensions/Context.kt | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/vector/src/main/java/im/vector/app/core/extensions/Context.kt b/vector/src/main/java/im/vector/app/core/extensions/Context.kt index 758bbe9b07..37c3ae927f 100644 --- a/vector/src/main/java/im/vector/app/core/extensions/Context.kt +++ b/vector/src/main/java/im/vector/app/core/extensions/Context.kt @@ -21,6 +21,7 @@ import android.graphics.drawable.Drawable import androidx.annotation.ColorInt import androidx.annotation.ColorRes import androidx.annotation.DrawableRes +import androidx.annotation.FloatRange import androidx.core.content.ContextCompat import dagger.hilt.EntryPoints import im.vector.app.core.di.SingletonEntryPoint @@ -30,15 +31,15 @@ fun Context.singletonEntryPoint(): SingletonEntryPoint { return EntryPoints.get(applicationContext, SingletonEntryPoint::class.java) } -fun Context.getResTintedDrawable(@DrawableRes drawableRes: Int, @ColorRes tint: Int, alpha: Float? = null): Drawable? { +fun Context.getResTintedDrawable(@DrawableRes drawableRes: Int, @ColorRes tint: Int, @FloatRange(from = 0.0, to = 1.0) alpha: Float = 1f): Drawable? { return getTintedDrawable(drawableRes, ContextCompat.getColor(this, tint), alpha) } -fun Context.getTintedDrawable(@DrawableRes drawableRes: Int, @ColorInt tint: Int, alpha: Float? = null) = ContextCompat.getDrawable(this, drawableRes) +fun Context.getTintedDrawable(@DrawableRes drawableRes: Int, @ColorInt tint: Int, @FloatRange(from = 0.0, to = 1.0) alpha: Float = 1f) = ContextCompat.getDrawable(this, drawableRes) ?.mutate() ?.also { drawable -> drawable.setTint(tint) - alpha?.let { + alpha.let { drawable.alpha = it.toAndroidAlpha() } } From 57be0ba91387a18d70ff073d4b6c538bc9f6f745 Mon Sep 17 00:00:00 2001 From: Adam Brown Date: Mon, 24 Jan 2022 17:50:22 +0000 Subject: [PATCH 4/6] making use of roundToInt to avoid separate rounding and toInt --- vector/src/main/java/im/vector/app/core/extensions/Context.kt | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/vector/src/main/java/im/vector/app/core/extensions/Context.kt b/vector/src/main/java/im/vector/app/core/extensions/Context.kt index 37c3ae927f..a2e8e05273 100644 --- a/vector/src/main/java/im/vector/app/core/extensions/Context.kt +++ b/vector/src/main/java/im/vector/app/core/extensions/Context.kt @@ -26,6 +26,7 @@ import androidx.core.content.ContextCompat import dagger.hilt.EntryPoints import im.vector.app.core.di.SingletonEntryPoint import kotlin.math.round +import kotlin.math.roundToInt fun Context.singletonEntryPoint(): SingletonEntryPoint { return EntryPoints.get(applicationContext, SingletonEntryPoint::class.java) @@ -45,5 +46,5 @@ fun Context.getTintedDrawable(@DrawableRes drawableRes: Int, @ColorInt tint: Int } private fun Float.toAndroidAlpha(): Int { - return round(this * 255).toInt() + return (this * 255).roundToInt() } From 203c7e0cd7268b4a488d2cba45647a7d5c05fde9 Mon Sep 17 00:00:00 2001 From: Adam Brown Date: Mon, 24 Jan 2022 17:53:40 +0000 Subject: [PATCH 5/6] adding tools preview for the use case option icons - this is only the background layer though as the real image is programatically constructed --- .../java/im/vector/app/core/extensions/Context.kt | 1 - .../main/res/layout/fragment_ftue_auth_use_case.xml | 11 +++++++---- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/vector/src/main/java/im/vector/app/core/extensions/Context.kt b/vector/src/main/java/im/vector/app/core/extensions/Context.kt index a2e8e05273..8407d691a6 100644 --- a/vector/src/main/java/im/vector/app/core/extensions/Context.kt +++ b/vector/src/main/java/im/vector/app/core/extensions/Context.kt @@ -25,7 +25,6 @@ import androidx.annotation.FloatRange import androidx.core.content.ContextCompat import dagger.hilt.EntryPoints import im.vector.app.core.di.SingletonEntryPoint -import kotlin.math.round import kotlin.math.roundToInt fun Context.singletonEntryPoint(): SingletonEntryPoint { diff --git a/vector/src/main/res/layout/fragment_ftue_auth_use_case.xml b/vector/src/main/res/layout/fragment_ftue_auth_use_case.xml index d7e7bdc31a..21a70ded6e 100644 --- a/vector/src/main/res/layout/fragment_ftue_auth_use_case.xml +++ b/vector/src/main/res/layout/fragment_ftue_auth_use_case.xml @@ -33,8 +33,8 @@ android:id="@+id/useCaseHeaderIcon" android:layout_width="wrap_content" android:layout_height="wrap_content" - android:contentDescription="@null" android:layout_marginTop="52dp" + android:contentDescription="@null" android:src="@drawable/ic_onboarding_use_case_icon" app:layout_constraintBottom_toTopOf="@id/useCaseHeaderTitle" app:layout_constraintEnd_toEndOf="@id/useCaseGutterEnd" @@ -92,7 +92,8 @@ app:layout_constraintBottom_toTopOf="@id/useCaseOptionTwo" app:layout_constraintEnd_toEndOf="@id/useCaseGutterEnd" app:layout_constraintStart_toStartOf="@id/useCaseGutterStart" - app:layout_constraintTop_toBottomOf="@id/titleContentSpacing" /> + app:layout_constraintTop_toBottomOf="@id/titleContentSpacing" + tools:drawableStartCompat="@drawable/bg_feature_icon" /> + app:layout_constraintTop_toBottomOf="@id/useCaseOptionOne" + tools:drawableStartCompat="@drawable/bg_feature_icon" /> + app:layout_constraintTop_toBottomOf="@id/useCaseOptionTwo" + tools:drawableStartCompat="@drawable/bg_feature_icon" /> Date: Tue, 25 Jan 2022 13:14:32 +0000 Subject: [PATCH 6/6] fixing line length --- .../src/main/java/im/vector/app/core/extensions/Context.kt | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/vector/src/main/java/im/vector/app/core/extensions/Context.kt b/vector/src/main/java/im/vector/app/core/extensions/Context.kt index 8407d691a6..1063d30a41 100644 --- a/vector/src/main/java/im/vector/app/core/extensions/Context.kt +++ b/vector/src/main/java/im/vector/app/core/extensions/Context.kt @@ -35,7 +35,10 @@ fun Context.getResTintedDrawable(@DrawableRes drawableRes: Int, @ColorRes tint: return getTintedDrawable(drawableRes, ContextCompat.getColor(this, tint), alpha) } -fun Context.getTintedDrawable(@DrawableRes drawableRes: Int, @ColorInt tint: Int, @FloatRange(from = 0.0, to = 1.0) alpha: Float = 1f) = ContextCompat.getDrawable(this, drawableRes) +fun Context.getTintedDrawable(@DrawableRes drawableRes: Int, + @ColorInt tint: Int, + @FloatRange(from = 0.0, to = 1.0) alpha: Float = 1f +) = ContextCompat.getDrawable(this, drawableRes) ?.mutate() ?.also { drawable -> drawable.setTint(tint)