Merge pull request #58 from Paulanerus/dev

Dev

Author: Paulanerus

gradle.properties

@@ -16,5 +16,5 @@ caffeine.version=3.2.2
 
 api.version=1.16.5
 core.version=1.18.14
-ui.version=1.19.5
-app.version=1.6.7
+ui.version=1.20.0
+app.version=1.7.0

ui/src/main/kotlin/dev/paulee/ui/components/SegmentButton.kt

@@ -1,21 +1,27 @@
 package dev.paulee.ui.components
 
-import androidx.compose.foundation.background
+import androidx.compose.animation.animateColorAsState
+import androidx.compose.animation.core.tween
+import androidx.compose.foundation.BorderStroke
 import androidx.compose.foundation.clickable
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.LocalTextStyle
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Surface
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.text.AnnotatedString
+import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.rememberTextMeasurer
+import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
 
 @Composable
 fun TwoSegmentButton(
@@ -26,46 +32,67 @@ fun TwoSegmentButton(
     modifier: Modifier = Modifier,
 ) {
     val textMeasurer = rememberTextMeasurer()
+    val density = LocalDensity.current
 
-    val leftWidth = textMeasurer.measure(
-        text = AnnotatedString(left),
-        style = LocalTextStyle.current
-    ).size.width
+    val style = LocalTextStyle.current.copy(fontSize = 13.sp, fontWeight = FontWeight.Medium)
 
-    val rightWidth = textMeasurer.measure(
-        text = AnnotatedString(right),
-        style = LocalTextStyle.current
-    ).size.width
+    val maxSegmentWidth = remember(left, right, style) {
+        val leftWidth = textMeasurer.measure(text = AnnotatedString(left), style = style).size.width
+        val rightWidth = textMeasurer.measure(text = AnnotatedString(right), style = style).size.width
 
-    val maxSegmentWidth = (maxOf(leftWidth, rightWidth) + 32).dp
+        with(density) { maxOf(leftWidth, rightWidth).toDp() + 30.dp }
+    }
 
-    Row(modifier = modifier) {
-        Box(
-            modifier = Modifier
-                .width(maxSegmentWidth)
-                .clickable { onClick(false) }
-                .background(
-                    if (!selected) Color.Gray else Color.LightGray,
-                    shape = RoundedCornerShape(topStart = 8.dp, bottomStart = 8.dp)
-                )
-                .padding(horizontal = 16.dp, vertical = 8.dp),
-            contentAlignment = Alignment.Center
+    Surface(
+        modifier = modifier,
+        shape = RoundedCornerShape(50.dp),
+        color = MaterialTheme.colors.onSurface.copy(alpha = 0.06f),
+        border = BorderStroke(1.dp, MaterialTheme.colors.onSurface.copy(alpha = 0.12f)),
+        elevation = 0.dp
+    ) {
+        Row(
+            modifier = Modifier.padding(3.dp),
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.spacedBy(3.dp)
         ) {
-            Text(text = left)
+            SegmentToggleItem(
+                text = left, width = maxSegmentWidth, selected = !selected, onClick = { onClick(false) })
+
+            SegmentToggleItem(
+                text = right, width = maxSegmentWidth, selected = selected, onClick = { onClick(true) })
         }
+    }
+}
+
+@Composable
+private fun SegmentToggleItem(
+    text: String,
+    width: Dp,
+    selected: Boolean,
+    onClick: () -> Unit,
+) {
+    val bg by animateColorAsState(
+        targetValue = if (selected) MaterialTheme.colors.primary.copy(alpha = 0.16f)
+        else MaterialTheme.colors.surface, animationSpec = tween(180)
+    )
+
+    val textColor by animateColorAsState(
+        targetValue = if (selected) MaterialTheme.colors.primary else MaterialTheme.colors.onSurface.copy(alpha = 0.8f),
+        animationSpec = tween(180)
+    )
 
+    Surface(
+        color = bg,
+        shape = RoundedCornerShape(50.dp),
+        border = BorderStroke(1.dp, MaterialTheme.colors.onSurface.copy(alpha = if (selected) 0.12f else 0.04f))
+    ) {
         Box(
-            modifier = Modifier
-                .width(maxSegmentWidth)
-                .clickable { onClick(true) }
-                .background(
-                    if (selected) Color.Gray else Color.LightGray,
-                    shape = RoundedCornerShape(topEnd = 8.dp, bottomEnd = 8.dp)
-                )
-                .padding(horizontal = 16.dp, vertical = 8.dp),
+            modifier = Modifier.width(width).clickable(onClick = onClick).padding(horizontal = 14.dp, vertical = 6.dp),
             contentAlignment = Alignment.Center
         ) {
-            Text(text = right)
+            Text(
+                text = text, color = textColor, fontSize = 13.sp, fontWeight = FontWeight.Medium
+            )
         }
     }
 }