Merge pull request #489 from angeles-bilbao6/issue487/jetsnack-button-state

[Jetsnack] Create styles for different button states

Author: nickbutcher

Jetsnack/app/src/main/java/com/example/jetsnack/ui/components/Filters.kt

@@ -17,6 +17,9 @@
 package com.example.jetsnack.ui.components
 
 import androidx.compose.animation.animateColorAsState
+import androidx.compose.foundation.background
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.interaction.collectIsPressedAsState
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.PaddingValues
@@ -35,8 +38,10 @@ import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.rounded.FilterList
 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.graphics.Shape
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
@@ -46,10 +51,11 @@ import com.example.jetsnack.ui.theme.JetsnackTheme
 
 @Composable
 fun FilterBar(filters: List<Filter>) {
+
     LazyRow(
         verticalAlignment = Alignment.CenterVertically,
         horizontalArrangement = Arrangement.spacedBy(8.dp),
-        contentPadding = PaddingValues(start = 8.dp, end = 8.dp),
+        contentPadding = PaddingValues(start = 12.dp, end = 8.dp),
         modifier = Modifier.heightIn(min = 56.dp)
     ) {
         item {
@@ -79,31 +85,49 @@ fun FilterChip(
 ) {
     val (selected, setSelected) = filter.enabled
     val backgroundColor by animateColorAsState(
-        if (selected) JetsnackTheme.colors.brand else JetsnackTheme.colors.uiBackground
+        if (selected) JetsnackTheme.colors.brandSecondary else JetsnackTheme.colors.uiBackground
     )
     val border = Modifier.fadeInDiagonalGradientBorder(
         showBorder = !selected,
         colors = JetsnackTheme.colors.interactiveSecondary,
         shape = shape
     )
     val textColor by animateColorAsState(
-        if (selected) JetsnackTheme.colors.textInteractive else JetsnackTheme.colors.textSecondary
+        if (selected) Color.Black else JetsnackTheme.colors.textSecondary
     )
+
     JetsnackSurface(
-        modifier = modifier
-            .height(28.dp)
-            .then(border),
+        modifier = modifier.height(28.dp),
         color = backgroundColor,
         contentColor = textColor,
         shape = shape,
         elevation = 2.dp
     ) {
+        val interactionSource = remember { MutableInteractionSource() }
+
+        val pressed by interactionSource.collectIsPressedAsState()
+        val backgroundPressed =
+            if (pressed) {
+                Modifier.offsetGradientBackground(
+                    JetsnackTheme.colors.interactiveSecondary,
+                    200f,
+                    0f
+                )
+            } else {
+                Modifier.background(Color.Transparent)
+            }
         Box(
-            modifier = Modifier.toggleable(
-                value = selected,
-                onValueChange = setSelected
-            )
+            modifier = Modifier
+                .toggleable(
+                    value = selected,
+                    onValueChange = setSelected,
+                    interactionSource = interactionSource,
+                    indication = null
+                )
+                .then(backgroundPressed)
+                .then(border),
         ) {
+
             Text(
                 text = filter.name,
                 style = MaterialTheme.typography.caption,

Jetsnack/app/src/main/java/com/example/jetsnack/ui/components/GradientTintedIconButton.kt

@@ -16,10 +16,18 @@
 
 package com.example.jetsnack.ui.components
 
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.interaction.collectIsPressedAsState
+import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material.Icon
-import androidx.compose.material.IconButton
+import androidx.compose.material.Surface
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.BlendMode
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.vector.ImageVector
@@ -33,16 +41,51 @@ fun JetsnackGradientTintedIconButton(
     modifier: Modifier = Modifier,
     colors: List<Color> = JetsnackTheme.colors.interactiveSecondary
 ) {
+    val interactionSource = remember { MutableInteractionSource() }
+
     // This should use a layer + srcIn but needs investigation
+    val border = Modifier.fadeInDiagonalGradientBorder(
+        showBorder = true,
+        colors = JetsnackTheme.colors.interactiveSecondary,
+        shape = CircleShape
+    )
+    val pressed by interactionSource.collectIsPressedAsState()
+    val background = if (pressed) {
+        Modifier.offsetGradientBackground(colors, 200f, 0f)
+    } else {
+        Modifier.background(JetsnackTheme.colors.uiBackground)
+    }
     val blendMode = if (JetsnackTheme.colors.isDark) BlendMode.Darken else BlendMode.Plus
-    IconButton(onClick = onClick, modifier) {
+    val modifierColor = if (pressed) {
+        Modifier.diagonalGradientTint(
+            colors = listOf(
+                JetsnackTheme.colors.textSecondary,
+                JetsnackTheme.colors.textSecondary
+            ),
+            blendMode = blendMode
+        )
+    } else {
+        Modifier.diagonalGradientTint(
+            colors = colors,
+            blendMode = blendMode
+        )
+    }
+    Surface(
+        modifier = modifier
+            .clickable(
+                onClick = onClick,
+                interactionSource = interactionSource,
+                indication = null
+            )
+            .clip(CircleShape)
+            .then(border)
+            .then(background),
+        color = Color.Transparent
+    ) {
         Icon(
             imageVector = imageVector,
             contentDescription = contentDescription,
-            modifier = Modifier.diagonalGradientTint(
-                colors = colors,
-                blendMode = blendMode
-            )
+            modifier = modifierColor
         )
     }
 }

Jetsnack/app/src/main/java/com/example/jetsnack/ui/components/QuantitySelector.kt

@@ -17,14 +17,15 @@
 package com.example.jetsnack.ui.components
 
 import androidx.compose.animation.Crossfade
+import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.widthIn
 import androidx.compose.material.ContentAlpha
 import androidx.compose.material.LocalContentAlpha
 import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Text
 import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.outlined.AddCircleOutline
-import androidx.compose.material.icons.outlined.RemoveCircleOutline
+import androidx.compose.material.icons.filled.Add
+import androidx.compose.material.icons.filled.Remove
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.ui.Modifier
@@ -53,14 +54,16 @@ fun QuantitySelector(
                 text = stringResource(R.string.quantity),
                 style = MaterialTheme.typography.subtitle1,
                 color = JetsnackTheme.colors.textSecondary,
-                modifier = Modifier.constrainAs(qty) {
-                    start.linkTo(parent.start)
-                    linkTo(top = parent.top, bottom = parent.bottom)
-                }
+                modifier = Modifier
+                    .padding(end = 18.dp)
+                    .constrainAs(qty) {
+                        start.linkTo(parent.start)
+                        linkTo(top = parent.top, bottom = parent.bottom)
+                    }
             )
         }
         JetsnackGradientTintedIconButton(
-            imageVector = Icons.Outlined.RemoveCircleOutline,
+            imageVector = Icons.Default.Remove,
             onClick = decreaseItemCount,
             contentDescription = stringResource(R.string.label_decrease),
             modifier = Modifier.constrainAs(minus) {
@@ -83,7 +86,7 @@ fun QuantitySelector(
             )
         }
         JetsnackGradientTintedIconButton(
-            imageVector = Icons.Outlined.AddCircleOutline,
+            imageVector = Icons.Default.Add,
             onClick = increaseItemCount,
             contentDescription = stringResource(R.string.label_increase),
             modifier = Modifier.constrainAs(plus) {