dhonti/ANDROID-15405-postercard:

- Update TopAction components background according to Mistica color values and make them clickables
Telefonica · Nov 27, 2024 · ef9ca70 · ef9ca70
1 parent faf034f
commit ef9ca70
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 35 deletions.
diff --git a/catalog/src/main/java/com/telefonica/mistica/catalog/ui/compose/components/PosterCards.kt b/catalog/src/main/java/com/telefonica/mistica/catalog/ui/compose/components/PosterCards.kt
@@ -194,27 +194,15 @@ private enum class TopActionsType(val info: PosterCardTopActionInfo? = null) {
     ONE_ACTION_DISMISS(
         info = PosterCardTopActionInfo(
             topActionsList = listOf(
-                TopActionData(
-                    iconRes = R.drawable.ic_close_regular,
-                    backgroundColor = Color.White,
-                    iconTint = Color.DarkGray,
-                )
+                TopActionData(iconRes = R.drawable.ic_close_regular)
             )
         )
     ),
     TWO_ACTIONS(
         info = PosterCardTopActionInfo(
             topActionsList = listOf(
-                TopActionData(
-                    iconRes = R.drawable.icn_visibility,
-                    backgroundColor = Color.White,
-                    iconTint = Color.Gray
-                ),
-                TopActionData(
-                    iconRes = R.drawable.ic_close_regular,
-                    backgroundColor = Color.White,
-                    iconTint = Color.DarkGray
-                )
+                TopActionData(iconRes = R.drawable.icn_visibility),
+                TopActionData(iconRes = R.drawable.ic_close_regular)
             )
         )
     )

diff --git a/library/src/main/java/com/telefonica/mistica/compose/card/postercard/PosterCard.kt b/library/src/main/java/com/telefonica/mistica/compose/card/postercard/PosterCard.kt
@@ -38,7 +38,7 @@ fun PosterCard(
             shape = RoundedCornerShape(MisticaTheme.radius.containerBorderRadius),
             modifier = Modifier
                 .width(maxWidth)
-                .clickable(enabled = onClickAction != null) {
+                .clickable(enabled = onClickAction!=null) {
                     onClickAction?.invoke()
                 }
                 .heightIn(

diff --git a/library/src/main/java/com/telefonica/mistica/compose/card/postercard/PosterCardPreviews.kt b/library/src/main/java/com/telefonica/mistica/compose/card/postercard/PosterCardPreviews.kt
@@ -43,16 +43,8 @@ internal fun PosterCardGradientColor() {
     MisticaTheme(brand = TuBrand) {
         PosterCard(
             topActionsList = listOf(
-                TopActionData(
-                    iconRes = R.drawable.icn_visibility,
-                    backgroundColor = MisticaTheme.colors.backgroundAlternative,
-                    iconTint = MisticaTheme.colors.brand,
-                ),
-                TopActionData(
-                    iconRes = R.drawable.ic_close_regular,
-                    backgroundColor = MisticaTheme.colors.backgroundAlternative,
-                    iconTint = MisticaTheme.colors.brand,
-                )
+                TopActionData(iconRes = R.drawable.icn_visibility),
+                TopActionData(iconRes = R.drawable.ic_close_regular)
             ),
             aspectRatio = PosterCardAspectRatio.AR_16_9,
             backgroundType = PosterCardBackgroundType.Color(

diff --git a/library/src/main/java/com/telefonica/mistica/compose/card/postercard/PosterCardTopActions.kt b/library/src/main/java/com/telefonica/mistica/compose/card/postercard/PosterCardTopActions.kt
@@ -23,6 +23,7 @@ import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.unit.dp
+import com.telefonica.mistica.compose.theme.MisticaTheme
 
 @Composable
 internal fun PosterCardTopActions(modifier: Modifier = Modifier, topActionsList: List<TopActionData>) {
@@ -35,7 +36,7 @@ internal fun PosterCardTopActions(modifier: Modifier = Modifier, topActionsList:
     ) {
         topActionsList.forEachIndexed { index, topActionData ->
             TopAction(topActionData = topActionData)
-            if( index!=topActionsList.lastIndex ){
+            if (index != topActionsList.lastIndex) {
                 Spacer(modifier = Modifier.width(16.dp))
             }
         }
@@ -50,17 +51,27 @@ internal fun TopAction(topActionData: TopActionData) {
                 .testTag(testTag.orEmpty())
                 .size(40.dp)
                 .clip(CircleShape)
-                .clickable(enabled = onClick != null) {
-                    onClick?.invoke()
-                }
-                .background(color = backgroundColor)
+                .clickable { onClick() }
+                .background(
+                    color = when {
+                        isInverse -> Color.Transparent
+                        withBackground -> MisticaTheme.colors.inverse.copy(alpha = 0.8f)
+                        else -> Color.Transparent
+                    }
+                )
                 .wrapContentSize(align = Alignment.Center)
 
         ) {
             Image(
                 painter = painterResource(id = iconRes),
                 contentDescription = contentDescription,
-                colorFilter = iconTint?.let { ColorFilter.tint(it) },
+                colorFilter = ColorFilter.tint(
+                    if (isInverse) {
+                        MisticaTheme.colors.inverse
+                    } else {
+                        MisticaTheme.colors.neutralHigh
+                    }
+                ),
                 contentScale = ContentScale.Crop
             )
         }
@@ -69,9 +80,9 @@ internal fun TopAction(topActionData: TopActionData) {
 
 data class TopActionData(
     val iconRes: Int,
-    val backgroundColor: Color = Color.Transparent,
     val contentDescription: String = "",
-    val iconTint: Color? = null,
     val testTag: String? = null,
-    val onClick: (() -> Unit)? = null,
+    val withBackground: Boolean = true,
+    val isInverse: Boolean = false,
+    val onClick: () -> Unit = {},
 )