update collapsible alert

ksharma-xyz · Nov 24, 2024 · 927ec01 · 927ec01
1 parent 108cdef
commit 927ec01
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 34 deletions.
diff --git a/feature/trip-planner/ui/src/androidMain/kotlin/HtmlText.kt b/feature/trip-planner/ui/src/androidMain/kotlin/HtmlText.kt
@@ -6,6 +6,7 @@ import android.widget.TextView
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.toArgb
 import androidx.compose.ui.platform.LocalFontFamilyResolver
 import androidx.compose.ui.text.font.FontFamily
@@ -20,16 +21,21 @@ import xyz.ksharma.krail.taj.theme.KrailTheme
  * Reference - https://developer.android.com/codelabs/jetpack-compose-migration#8
  */
 @Composable
-actual fun HtmlText(text: String, modifier: Modifier, onClick: () -> Unit) {
+actual fun HtmlText(
+    text: String,
+    modifier: Modifier,
+    onClick: () -> Unit,
+    color: Color,
+    urlColor: Color,
+) {
     // Remembers the HTML formatted description. Re-executes on a new description
     val htmlDescription = remember(text) {
         HtmlCompat.fromHtml(text, HtmlCompat.FROM_HTML_MODE_COMPACT)
     }
 
-    val textColor = KrailTheme.colors.label.toArgb()
+    val textColor = color.toArgb()
     val textStyle = KrailTheme.typography.bodyLarge
     val resolver: FontFamily.Resolver = LocalFontFamilyResolver.current
-    val urlColor = KrailTheme.colors.alert.toArgb()
 
     val textTypeface: Typeface = remember(resolver, textStyle) {
         resolver.resolve(
@@ -49,7 +55,7 @@ actual fun HtmlText(text: String, modifier: Modifier, onClick: () -> Unit) {
                 setTextColor(textColor)
                 setTextSize(android.util.TypedValue.COMPLEX_UNIT_SP, textStyle.fontSize.value)
                 typeface = textTypeface
-                setLinkTextColor(urlColor)
+                setLinkTextColor(urlColor.toArgb())
                 setOnClickListener {
                     onClick()
                 }

diff --git a/...ner/ui/src/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/alerts/CollapsibleAlert.kt b/...ner/ui/src/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/alerts/CollapsibleAlert.kt
@@ -1,12 +1,8 @@
 package xyz.ksharma.krail.trip.planner.ui.alerts
 
-import androidx.compose.animation.animateColorAsState
 import androidx.compose.animation.animateContentSize
-import androidx.compose.animation.core.LinearEasing
-import androidx.compose.animation.core.tween
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
-import androidx.compose.foundation.content.MediaType.Companion.HtmlText
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
@@ -25,13 +21,13 @@ import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
-import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
 import xyz.ksharma.krail.taj.LocalThemeColor
 import xyz.ksharma.krail.taj.components.Text
 import xyz.ksharma.krail.taj.theme.KrailTheme
+import xyz.ksharma.krail.taj.theme.getForegroundColor
 import xyz.ksharma.krail.taj.toAdaptiveSize
-import xyz.ksharma.krail.trip.planner.ui.components.themeBackgroundColor
 import xyz.ksharma.krail.trip.planner.ui.state.TransportMode
 import xyz.ksharma.krail.trip.planner.ui.state.alerts.ServiceAlert
 import xyz.ksharma.krail.trip.planner.ui.state.alerts.ServiceAlertPriority
@@ -44,32 +40,21 @@ fun CollapsibleAlert(
     modifier: Modifier = Modifier,
     collapsed: Boolean = true,
 ) {
-    val indexBackgroundColor by animateColorAsState(
-        targetValue = if (collapsed) themeBackgroundColor() else Color.Transparent,
-        label = "indexBackgroundColor",
-        animationSpec = tween(durationMillis = 300, easing = LinearEasing)
-    )
-
-    val parentBackgroundColor by animateColorAsState(
-        targetValue = if (collapsed) KrailTheme.colors.surface else themeBackgroundColor(),
-        label = "parentBackgroundColor",
-        animationSpec = tween(durationMillis = 300, easing = LinearEasing)
-    )
+    val backgroundColor = KrailTheme.colors.alert.copy(alpha = 0.7f)
 
     Column(
         modifier = modifier
             .fillMaxWidth()
             .background(
-                color = parentBackgroundColor,
-                shape = RoundedCornerShape(12.dp),
+                color = backgroundColor,
+                shape = RoundedCornerShape(16.dp),
             )
             .clickable(
                 indication = null,
                 interactionSource = remember { MutableInteractionSource() },
                 onClick = onClick,
             )
             .padding(vertical = 8.dp)
-            .padding(horizontal = 8.dp)
             .animateContentSize(),
         verticalArrangement = Arrangement.spacedBy(16.dp),
     ) {
@@ -81,21 +66,22 @@ fun CollapsibleAlert(
                 modifier = Modifier
                     .size(24.dp.toAdaptiveSize())
                     .clip(CircleShape)
-                    .background(
-                        color = indexBackgroundColor,
-                    ),
+                    .alignByBaseline(),
                 contentAlignment = Alignment.Center,
             ) {
                 Text(
-                    text = index.toString(),
+                    text = "$index",
                     style = KrailTheme.typography.titleSmall,
+                    color = getForegroundColor(backgroundColor),
+                    modifier = Modifier
                 )
             }
 
             Text(
                 text = serviceAlert.heading,
                 style = KrailTheme.typography.titleSmall,
-                modifier = Modifier.padding(start = 12.dp),
+                modifier = Modifier.padding(start = 12.dp).alignByBaseline(),
+                color = getForegroundColor(backgroundColor),
             )
         }
 
@@ -106,12 +92,36 @@ fun CollapsibleAlert(
                 )
             }
             if (isHtml) {
-                HtmlText(text = serviceAlert.message, onClick = onClick)
+                HtmlText(
+                    text = serviceAlert.message,
+                    onClick = onClick,
+                    color = getForegroundColor(backgroundColor),
+                    urlColor = getForegroundColor(backgroundColor),
+                    modifier = Modifier.padding(horizontal = 16.dp)
+                )
             } else {
                 Text(
                     text = serviceAlert.message,
                     style = KrailTheme.typography.body,
-                    modifier = Modifier.padding(vertical = 8.dp),
+                    color = getForegroundColor(backgroundColor),
+                    modifier = Modifier.padding(vertical = 8.dp, horizontal = 16.dp),
+                )
+            }
+        } else {
+            Box(
+                modifier = Modifier
+                    .padding(start = 12.dp + 24.dp.toAdaptiveSize(), bottom = 12.dp)
+                    .background(
+                        color = getForegroundColor(backgroundColor),
+                        shape = RoundedCornerShape(50),
+                    )
+                    .padding(horizontal = 16.dp, vertical = 2.dp),
+                contentAlignment = Alignment.Center,
+            ) {
+                Text(
+                    text = "Read More",
+                    style = KrailTheme.typography.bodySmall.copy(fontWeight = FontWeight.Bold),
+                    color = getForegroundColor(getForegroundColor(backgroundColor)),
                 )
             }
         }

diff --git a/...rip-planner/ui/src/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/alerts/HtmlText.kt b/...rip-planner/ui/src/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/alerts/HtmlText.kt
@@ -2,6 +2,13 @@ package xyz.ksharma.krail.trip.planner.ui.alerts
 
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 
 @Composable
-expect fun HtmlText(text: String, modifier: Modifier = Modifier, onClick: () -> Unit)
+expect fun HtmlText(
+    text: String,
+    modifier: Modifier = Modifier,
+    onClick: () -> Unit,
+    color: Color,
+    urlColor: Color,
+)
diff --git a/...r/ui/src/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/alerts/ServiceAlertScreen.kt b/...r/ui/src/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/alerts/ServiceAlertScreen.kt
@@ -24,6 +24,7 @@ import androidx.compose.ui.unit.dp
 import kotlinx.collections.immutable.ImmutableSet
 import kotlinx.collections.immutable.persistentSetOf
 import kotlinx.collections.immutable.toImmutableList
+import xyz.ksharma.krail.taj.components.Divider
 import xyz.ksharma.krail.taj.components.Text
 import xyz.ksharma.krail.taj.components.TitleBar
 import xyz.ksharma.krail.taj.theme.KrailTheme

diff --git a/feature/trip-planner/ui/src/iosMain/kotlin/HtmlText.kt b/feature/trip-planner/ui/src/iosMain/kotlin/HtmlText.kt
@@ -3,11 +3,18 @@ package xyz.ksharma.krail.trip.planner.ui.alerts
 import androidx.compose.foundation.clickable
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import xyz.ksharma.krail.taj.components.Text
 
 @Composable
-actual fun HtmlText(text: String, modifier: Modifier, onClick: () -> Unit) {
-    Text(text = replaceHtmlTags(text), modifier = Modifier.clickable { onClick() })
+actual fun HtmlText(
+    text: String,
+    modifier: Modifier,
+    onClick: () -> Unit,
+    color: Color,
+    urlColor: Color,
+) {
+    Text(text = replaceHtmlTags(text), modifier = Modifier.clickable { onClick() }, color = color)
 }
 
 // TODO - A workaround for iOS until https://issuetracker.google.com/issues/139326648 is fixed.