From 7f24686b8e473dac9b725df66c2ea5c2bfaf1eec Mon Sep 17 00:00:00 2001 From: Rooney Date: Fri, 6 Sep 2024 18:17:51 -0400 Subject: [PATCH 01/13] Animate in frmo the top --- .../android/ui/woopos/home/cart/WooPosCartScreen.kt | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/cart/WooPosCartScreen.kt b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/cart/WooPosCartScreen.kt index a1c08461797..47b73a93ad6 100644 --- a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/cart/WooPosCartScreen.kt +++ b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/cart/WooPosCartScreen.kt @@ -23,6 +23,7 @@ import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.offset import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.width @@ -410,6 +411,16 @@ private fun ProductItem( label = "alpha" ) + val offsetY by animateDpAsState( + targetValue = if (hasAnimationStarted) 0.dp else (-50).dp, + animationSpec = tween( + durationMillis = 200, + easing = LinearEasing + ), + label = "offsetY" + ) + + val itemContentDescription = stringResource( id = R.string.woopos_cart_item_content_description, item.name, @@ -425,6 +436,7 @@ private fun ProductItem( Card( modifier = modifier .height(64.dp) + .offset(y = offsetY) .semantics { contentDescription = itemContentDescription } .graphicsLayer(alpha = alpha), elevation = elevation, From 0299d06cff2e3fd5b596061a8801816111424766 Mon Sep 17 00:00:00 2001 From: Rooney Date: Mon, 9 Sep 2024 10:36:54 -0400 Subject: [PATCH 02/13] AnimatedVisibility --- .../ui/woopos/home/cart/WooPosCartScreen.kt | 191 +++++++++--------- 1 file changed, 101 insertions(+), 90 deletions(-) diff --git a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/cart/WooPosCartScreen.kt b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/cart/WooPosCartScreen.kt index 47b73a93ad6..6a637077d98 100644 --- a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/cart/WooPosCartScreen.kt +++ b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/cart/WooPosCartScreen.kt @@ -8,9 +8,11 @@ import androidx.compose.animation.core.animateDpAsState import androidx.compose.animation.core.animateFloatAsState import androidx.compose.animation.core.tween import androidx.compose.animation.expandHorizontally +import androidx.compose.animation.expandVertically import androidx.compose.animation.fadeIn import androidx.compose.animation.fadeOut import androidx.compose.animation.shrinkHorizontally +import androidx.compose.animation.shrinkVertically import androidx.compose.foundation.ExperimentalFoundationApi import androidx.compose.foundation.Image import androidx.compose.foundation.background @@ -392,119 +394,128 @@ private fun ProductItem( onUIEvent: (WooPosCartUIEvent) -> Unit, ) { var hasAnimationStarted by remember { mutableStateOf(item.isAppearanceAnimationPlayed) } + var visible by remember { mutableStateOf(false) } + LaunchedEffect(Unit) { + visible = true hasAnimationStarted = true } - val elevation by animateDpAsState( - targetValue = if (hasAnimationStarted) 4.dp else 0.dp, - animationSpec = tween(durationMillis = 200, delayMillis = 100), - label = "elevation" - ) - - val alpha by animateFloatAsState( - targetValue = if (hasAnimationStarted) 1f else 0f, - animationSpec = tween( - durationMillis = 200, - easing = LinearEasing - ), - label = "alpha" - ) + AnimatedVisibility( + visible = visible, + enter = fadeIn() + expandVertically(), + exit = fadeOut() + shrinkVertically() + ) { + val elevation by animateDpAsState( + targetValue = if (hasAnimationStarted) 4.dp else 0.dp, + animationSpec = tween(durationMillis = 200, delayMillis = 100), + label = "elevation" + ) - val offsetY by animateDpAsState( - targetValue = if (hasAnimationStarted) 0.dp else (-50).dp, - animationSpec = tween( - durationMillis = 200, - easing = LinearEasing - ), - label = "offsetY" - ) + val alpha by animateFloatAsState( + targetValue = if (hasAnimationStarted) 1f else 0f, + animationSpec = tween( + durationMillis = 200, + easing = LinearEasing + ), + label = "alpha" + ) + val offsetY by animateDpAsState( + targetValue = if (hasAnimationStarted) 0.dp else (-50).dp, + animationSpec = tween( + durationMillis = 200, + easing = LinearEasing + ), + label = "offsetY" + ) - val itemContentDescription = stringResource( - id = R.string.woopos_cart_item_content_description, - item.name, - item.price - ) + val itemContentDescription = stringResource( + id = R.string.woopos_cart_item_content_description, + item.name, + item.price + ) - LaunchedEffect(alpha) { - if (alpha == 1f) { - onUIEvent(WooPosCartUIEvent.OnCartItemAppearanceAnimationPlayed(item)) + LaunchedEffect(alpha) { + if (alpha == 1f) { + onUIEvent(WooPosCartUIEvent.OnCartItemAppearanceAnimationPlayed(item)) + } } - } - Card( - modifier = modifier - .height(64.dp) - .offset(y = offsetY) - .semantics { contentDescription = itemContentDescription } - .graphicsLayer(alpha = alpha), - elevation = elevation, - shape = RoundedCornerShape(8.dp), - ) { - Row( - horizontalArrangement = Arrangement.SpaceBetween, - verticalAlignment = Alignment.CenterVertically + Card( + modifier = modifier + .height(64.dp) + .offset(y = offsetY) + .semantics { contentDescription = itemContentDescription } + .graphicsLayer(alpha = alpha), + elevation = elevation, + shape = RoundedCornerShape(8.dp), ) { - AsyncImage( - model = ImageRequest.Builder(LocalContext.current) - .data(item.imageUrl) - .crossfade(true) - .build(), - fallback = ColorPainter(WooPosTheme.colors.loadingSkeleton), - error = ColorPainter(WooPosTheme.colors.loadingSkeleton), - placeholder = ColorPainter(WooPosTheme.colors.loadingSkeleton), - contentDescription = null, - contentScale = ContentScale.Crop, - modifier = Modifier.size(64.dp) - ) - - Spacer(modifier = Modifier.width(16.dp.toAdaptivePadding())) - - Column( - modifier = Modifier.weight(1f) + Row( + horizontalArrangement = Arrangement.SpaceBetween, + verticalAlignment = Alignment.CenterVertically ) { - Text( - text = item.name, - style = MaterialTheme.typography.body1, - fontWeight = FontWeight.SemiBold, - maxLines = 1, - overflow = TextOverflow.Ellipsis, - modifier = Modifier.clearAndSetSemantics { } - ) - Spacer(modifier = Modifier.height(4.dp.toAdaptivePadding())) - Text( - text = item.price, - style = MaterialTheme.typography.body1, - modifier = Modifier.clearAndSetSemantics { } + AsyncImage( + model = ImageRequest.Builder(LocalContext.current) + .data(item.imageUrl) + .crossfade(true) + .build(), + fallback = ColorPainter(WooPosTheme.colors.loadingSkeleton), + error = ColorPainter(WooPosTheme.colors.loadingSkeleton), + placeholder = ColorPainter(WooPosTheme.colors.loadingSkeleton), + contentDescription = null, + contentScale = ContentScale.Crop, + modifier = Modifier.size(64.dp) ) - } - if (canRemoveItems) { - Spacer(modifier = Modifier.width(8.dp.toAdaptivePadding())) + Spacer(modifier = Modifier.width(16.dp.toAdaptivePadding())) - val removeButtonContentDescription = stringResource( - id = R.string.woopos_remove_item_button_from_cart_content_description, - item.name - ) - IconButton( - onClick = { onUIEvent(WooPosCartUIEvent.ItemRemovedFromCart(item)) }, - modifier = Modifier - .size(24.dp) - .semantics { contentDescription = removeButtonContentDescription } + Column( + modifier = Modifier.weight(1f) ) { - Icon( - painter = painterResource(id = R.drawable.ic_pos_remove_cart_item), - tint = MaterialTheme.colors.onBackground, - contentDescription = null, + Text( + text = item.name, + style = MaterialTheme.typography.body1, + fontWeight = FontWeight.SemiBold, + maxLines = 1, + overflow = TextOverflow.Ellipsis, + modifier = Modifier.clearAndSetSemantics { } + ) + Spacer(modifier = Modifier.height(4.dp.toAdaptivePadding())) + Text( + text = item.price, + style = MaterialTheme.typography.body1, + modifier = Modifier.clearAndSetSemantics { } ) } + + if (canRemoveItems) { + Spacer(modifier = Modifier.width(8.dp.toAdaptivePadding())) + + val removeButtonContentDescription = stringResource( + id = R.string.woopos_remove_item_button_from_cart_content_description, + item.name + ) + IconButton( + onClick = { onUIEvent(WooPosCartUIEvent.ItemRemovedFromCart(item)) }, + modifier = Modifier + .size(24.dp) + .semantics { contentDescription = removeButtonContentDescription } + ) { + Icon( + painter = painterResource(id = R.drawable.ic_pos_remove_cart_item), + tint = MaterialTheme.colors.onBackground, + contentDescription = null, + ) + } + } + Spacer(modifier = Modifier.width(16.dp.toAdaptivePadding())) } - Spacer(modifier = Modifier.width(16.dp.toAdaptivePadding())) } } } + @Composable @WooPosPreview fun WooPosCartScreenProductsPreview(modifier: Modifier = Modifier) { From 33ed073f90c8b08aa1bf220efbe69567a5c9e4ed Mon Sep 17 00:00:00 2001 From: Rooney Date: Mon, 9 Sep 2024 10:40:46 -0400 Subject: [PATCH 03/13] Don't need this --- .../android/ui/woopos/home/cart/WooPosCartScreen.kt | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/cart/WooPosCartScreen.kt b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/cart/WooPosCartScreen.kt index 6a637077d98..3d1b666198b 100644 --- a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/cart/WooPosCartScreen.kt +++ b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/cart/WooPosCartScreen.kt @@ -421,15 +421,6 @@ private fun ProductItem( label = "alpha" ) - val offsetY by animateDpAsState( - targetValue = if (hasAnimationStarted) 0.dp else (-50).dp, - animationSpec = tween( - durationMillis = 200, - easing = LinearEasing - ), - label = "offsetY" - ) - val itemContentDescription = stringResource( id = R.string.woopos_cart_item_content_description, item.name, @@ -445,7 +436,6 @@ private fun ProductItem( Card( modifier = modifier .height(64.dp) - .offset(y = offsetY) .semantics { contentDescription = itemContentDescription } .graphicsLayer(alpha = alpha), elevation = elevation, From b6eff213d8edd489bf29b06b8503ba6fe6178920 Mon Sep 17 00:00:00 2001 From: Rooney Date: Mon, 9 Sep 2024 10:55:05 -0400 Subject: [PATCH 04/13] Detekt --- .../woocommerce/android/ui/woopos/home/cart/WooPosCartScreen.kt | 2 -- 1 file changed, 2 deletions(-) diff --git a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/cart/WooPosCartScreen.kt b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/cart/WooPosCartScreen.kt index 3d1b666198b..d14741396f2 100644 --- a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/cart/WooPosCartScreen.kt +++ b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/cart/WooPosCartScreen.kt @@ -25,7 +25,6 @@ import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height -import androidx.compose.foundation.layout.offset import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.width @@ -505,7 +504,6 @@ private fun ProductItem( } } - @Composable @WooPosPreview fun WooPosCartScreenProductsPreview(modifier: Modifier = Modifier) { From 68e51aefbbeca3907ccfbafe1226d063ddcee741 Mon Sep 17 00:00:00 2001 From: Rooney Date: Tue, 10 Sep 2024 13:10:38 -0400 Subject: [PATCH 05/13] Use VM state for compose animation --- .../android/ui/woopos/home/cart/WooPosCartScreen.kt | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/cart/WooPosCartScreen.kt b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/cart/WooPosCartScreen.kt index d14741396f2..0a503efd3c5 100644 --- a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/cart/WooPosCartScreen.kt +++ b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/cart/WooPosCartScreen.kt @@ -393,15 +393,12 @@ private fun ProductItem( onUIEvent: (WooPosCartUIEvent) -> Unit, ) { var hasAnimationStarted by remember { mutableStateOf(item.isAppearanceAnimationPlayed) } - var visible by remember { mutableStateOf(false) } - LaunchedEffect(Unit) { - visible = true hasAnimationStarted = true } AnimatedVisibility( - visible = visible, + visible = hasAnimationStarted, enter = fadeIn() + expandVertically(), exit = fadeOut() + shrinkVertically() ) { From 80981b73ba99e8d1e5656ed351d932c45f2ec880 Mon Sep 17 00:00:00 2001 From: Rooney Date: Tue, 10 Sep 2024 13:27:47 -0400 Subject: [PATCH 06/13] Detekt --- .../woocommerce/android/ui/woopos/home/cart/WooPosCartScreen.kt | 1 - 1 file changed, 1 deletion(-) diff --git a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/cart/WooPosCartScreen.kt b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/cart/WooPosCartScreen.kt index abcc44b8c5c..af15fab9f98 100644 --- a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/cart/WooPosCartScreen.kt +++ b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/cart/WooPosCartScreen.kt @@ -32,7 +32,6 @@ import androidx.compose.foundation.lazy.LazyListState import androidx.compose.foundation.lazy.items import androidx.compose.foundation.lazy.rememberLazyListState import androidx.compose.foundation.shape.RoundedCornerShape -import androidx.compose.material.Card import androidx.compose.material.Icon import androidx.compose.material.IconButton import androidx.compose.material.MaterialTheme From 6c0d7d72772c01060b83bbec2b8b970092ac4ae9 Mon Sep 17 00:00:00 2001 From: Rooney Date: Tue, 10 Sep 2024 13:35:16 -0400 Subject: [PATCH 07/13] Detekt --- .../woocommerce/android/ui/woopos/home/cart/WooPosCartScreen.kt | 1 + 1 file changed, 1 insertion(+) diff --git a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/cart/WooPosCartScreen.kt b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/cart/WooPosCartScreen.kt index af15fab9f98..6dd709e0c63 100644 --- a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/cart/WooPosCartScreen.kt +++ b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/cart/WooPosCartScreen.kt @@ -457,6 +457,7 @@ private fun ProductItem( contentScale = ContentScale.Crop, modifier = Modifier.size(64.dp) ) + Spacer(modifier = Modifier.width(16.dp.toAdaptivePadding())) Column( From 8b9c9631ba02eb6ba6d39c7ef4944d3d26e263c8 Mon Sep 17 00:00:00 2001 From: Rooney Date: Wed, 11 Sep 2024 15:00:55 -0400 Subject: [PATCH 08/13] Merge in trunk --- .../ui/woopos/home/cart/WooPosCartScreen.kt | 120 +++++++++--------- 1 file changed, 63 insertions(+), 57 deletions(-) diff --git a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/cart/WooPosCartScreen.kt b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/cart/WooPosCartScreen.kt index f4ee973cbc0..95bd684ebdc 100644 --- a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/cart/WooPosCartScreen.kt +++ b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/cart/WooPosCartScreen.kt @@ -425,73 +425,79 @@ private fun ProductItem( } } - WooPosCard( - modifier = modifier - .height(64.dp) - .semantics { contentDescription = itemContentDescription } - .graphicsLayer(alpha = alpha), - elevation = elevation, - shape = RoundedCornerShape(8.dp), + AnimatedVisibility( + visible = hasAnimationStarted, + enter = fadeIn() + expandVertically(), + exit = fadeOut() + shrinkVertically() ) { - Row( - horizontalArrangement = Arrangement.SpaceBetween, - verticalAlignment = Alignment.CenterVertically + WooPosCard( + modifier = modifier + .height(64.dp) + .semantics { contentDescription = itemContentDescription } + .graphicsLayer(alpha = alpha), + elevation = elevation, + shape = RoundedCornerShape(8.dp), ) { - AsyncImage( - model = ImageRequest.Builder(LocalContext.current) - .data(item.imageUrl) - .crossfade(true) - .build(), - fallback = ColorPainter(WooPosTheme.colors.loadingSkeleton), - error = ColorPainter(WooPosTheme.colors.loadingSkeleton), - placeholder = ColorPainter(WooPosTheme.colors.loadingSkeleton), - contentDescription = null, - contentScale = ContentScale.Crop, - modifier = Modifier.size(64.dp) - ) - - Spacer(modifier = Modifier.width(16.dp.toAdaptivePadding())) - - Column( - modifier = Modifier.weight(1f) + Row( + horizontalArrangement = Arrangement.SpaceBetween, + verticalAlignment = Alignment.CenterVertically ) { - Text( - text = item.name, - style = MaterialTheme.typography.body1, - fontWeight = FontWeight.SemiBold, - maxLines = 1, - overflow = TextOverflow.Ellipsis, - modifier = Modifier.clearAndSetSemantics { } + AsyncImage( + model = ImageRequest.Builder(LocalContext.current) + .data(item.imageUrl) + .crossfade(true) + .build(), + fallback = ColorPainter(WooPosTheme.colors.loadingSkeleton), + error = ColorPainter(WooPosTheme.colors.loadingSkeleton), + placeholder = ColorPainter(WooPosTheme.colors.loadingSkeleton), + contentDescription = null, + contentScale = ContentScale.Crop, + modifier = Modifier.size(64.dp) ) - Spacer(modifier = Modifier.height(4.dp.toAdaptivePadding())) - Text( - text = item.price, - style = MaterialTheme.typography.body1, - modifier = Modifier.clearAndSetSemantics { } - ) - } - if (canRemoveItems) { - Spacer(modifier = Modifier.width(8.dp.toAdaptivePadding())) + Spacer(modifier = Modifier.width(16.dp.toAdaptivePadding())) - val removeButtonContentDescription = stringResource( - id = R.string.woopos_remove_item_button_from_cart_content_description, - item.name - ) - IconButton( - onClick = { onUIEvent(WooPosCartUIEvent.ItemRemovedFromCart(item)) }, - modifier = Modifier - .size(24.dp) - .semantics { contentDescription = removeButtonContentDescription } + Column( + modifier = Modifier.weight(1f) ) { - Icon( - painter = painterResource(id = R.drawable.ic_pos_remove_cart_item), - tint = MaterialTheme.colors.onBackground, - contentDescription = null, + Text( + text = item.name, + style = MaterialTheme.typography.body1, + fontWeight = FontWeight.SemiBold, + maxLines = 1, + overflow = TextOverflow.Ellipsis, + modifier = Modifier.clearAndSetSemantics { } ) + Spacer(modifier = Modifier.height(4.dp.toAdaptivePadding())) + Text( + text = item.price, + style = MaterialTheme.typography.body1, + modifier = Modifier.clearAndSetSemantics { } + ) + } + + if (canRemoveItems) { + Spacer(modifier = Modifier.width(8.dp.toAdaptivePadding())) + + val removeButtonContentDescription = stringResource( + id = R.string.woopos_remove_item_button_from_cart_content_description, + item.name + ) + IconButton( + onClick = { onUIEvent(WooPosCartUIEvent.ItemRemovedFromCart(item)) }, + modifier = Modifier + .size(24.dp) + .semantics { contentDescription = removeButtonContentDescription } + ) { + Icon( + painter = painterResource(id = R.drawable.ic_pos_remove_cart_item), + tint = MaterialTheme.colors.onBackground, + contentDescription = null, + ) + } } + Spacer(modifier = Modifier.width(16.dp.toAdaptivePadding())) } - Spacer(modifier = Modifier.width(16.dp.toAdaptivePadding())) } } } From caec6f1adcc524dbf7207acb5a49184a70da39f3 Mon Sep 17 00:00:00 2001 From: Rooney Date: Wed, 11 Sep 2024 15:11:26 -0400 Subject: [PATCH 09/13] Detekt --- .../woocommerce/android/ui/woopos/home/cart/WooPosCartScreen.kt | 1 - 1 file changed, 1 deletion(-) diff --git a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/cart/WooPosCartScreen.kt b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/cart/WooPosCartScreen.kt index 95bd684ebdc..62bc1dab527 100644 --- a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/cart/WooPosCartScreen.kt +++ b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/cart/WooPosCartScreen.kt @@ -11,7 +11,6 @@ import androidx.compose.animation.fadeIn import androidx.compose.animation.fadeOut import androidx.compose.animation.shrinkHorizontally import androidx.compose.animation.shrinkVertically -import androidx.compose.foundation.ExperimentalFoundationApi import androidx.compose.foundation.Image import androidx.compose.foundation.background import androidx.compose.foundation.layout.Arrangement From c01be2709af802f2129d92da337ccaeb74ea6615 Mon Sep 17 00:00:00 2001 From: Rooney Date: Thu, 19 Sep 2024 09:30:33 -0400 Subject: [PATCH 10/13] Move and set animation times --- .../ui/woopos/home/cart/WooPosCartScreen.kt | 23 +++++-------------- 1 file changed, 6 insertions(+), 17 deletions(-) diff --git a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/cart/WooPosCartScreen.kt b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/cart/WooPosCartScreen.kt index d6d80781511..80ce771f90d 100644 --- a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/cart/WooPosCartScreen.kt +++ b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/cart/WooPosCartScreen.kt @@ -1,7 +1,6 @@ package com.woocommerce.android.ui.woopos.home.cart import androidx.compose.animation.AnimatedVisibility -import androidx.compose.animation.core.LinearEasing import androidx.compose.animation.core.animateDpAsState import androidx.compose.animation.core.animateFloatAsState import androidx.compose.animation.core.tween @@ -43,7 +42,6 @@ import androidx.compose.runtime.remember import androidx.compose.runtime.setValue import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier -import androidx.compose.ui.graphics.graphicsLayer import androidx.compose.ui.graphics.painter.ColorPainter import androidx.compose.ui.graphics.vector.ImageVector import androidx.compose.ui.layout.ContentScale @@ -409,41 +407,32 @@ private fun ProductItem( val elevation by animateDpAsState( targetValue = if (hasAnimationStarted) 4.dp else 0.dp, - animationSpec = tween(durationMillis = 250, delayMillis = 200), + animationSpec = tween(durationMillis = 150, delayMillis = 250), label = "elevation" ) - val alpha by animateFloatAsState( - targetValue = if (hasAnimationStarted) 1f else 0f, - animationSpec = tween( - durationMillis = 200, - easing = LinearEasing - ), - label = "alpha" - ) - val itemContentDescription = stringResource( id = R.string.woopos_cart_item_content_description, item.name, item.price ) - LaunchedEffect(alpha) { - if (alpha == 1f) { + LaunchedEffect(elevation) { + if (elevation == 4.dp) { onUIEvent(WooPosCartUIEvent.OnCartItemAppearanceAnimationPlayed(item)) } } AnimatedVisibility( visible = hasAnimationStarted, - enter = fadeIn() + expandVertically(), + enter = fadeIn(animationSpec = tween(durationMillis = 200)) + + expandVertically(animationSpec = tween(durationMillis = 200)), exit = fadeOut() + shrinkVertically() ) { WooPosCard( modifier = modifier .height(64.dp) - .semantics { contentDescription = itemContentDescription } - .graphicsLayer(alpha = alpha), + .semantics { contentDescription = itemContentDescription }, elevation = elevation, shape = RoundedCornerShape(8.dp), ) { From 90cc0cf420fa520264f5341448962f0c39a116ce Mon Sep 17 00:00:00 2001 From: Rooney Date: Thu, 19 Sep 2024 09:41:12 -0400 Subject: [PATCH 11/13] Remove fadein since it's not doing anything --- .../android/ui/woopos/home/cart/WooPosCartScreen.kt | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/cart/WooPosCartScreen.kt b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/cart/WooPosCartScreen.kt index 80ce771f90d..ca700295e94 100644 --- a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/cart/WooPosCartScreen.kt +++ b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/cart/WooPosCartScreen.kt @@ -425,8 +425,8 @@ private fun ProductItem( AnimatedVisibility( visible = hasAnimationStarted, - enter = fadeIn(animationSpec = tween(durationMillis = 200)) + - expandVertically(animationSpec = tween(durationMillis = 200)), + enter = + expandVertically(animationSpec = tween(durationMillis = 200)), exit = fadeOut() + shrinkVertically() ) { WooPosCard( From e4b9c85bde149c1ff77252a4539c4c312de9795f Mon Sep 17 00:00:00 2001 From: Rooney Date: Thu, 19 Sep 2024 09:44:33 -0400 Subject: [PATCH 12/13] Remove fadein and fade out since it's not doing anything --- .../android/ui/woopos/home/cart/WooPosCartScreen.kt | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/cart/WooPosCartScreen.kt b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/cart/WooPosCartScreen.kt index ca700295e94..fac0a1d506f 100644 --- a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/cart/WooPosCartScreen.kt +++ b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/cart/WooPosCartScreen.kt @@ -425,9 +425,8 @@ private fun ProductItem( AnimatedVisibility( visible = hasAnimationStarted, - enter = - expandVertically(animationSpec = tween(durationMillis = 200)), - exit = fadeOut() + shrinkVertically() + enter = expandVertically(animationSpec = tween(durationMillis = 200)), + exit = shrinkVertically() ) { WooPosCard( modifier = modifier From 3ca31c54bccee58254bc82072a11d507c07149b6 Mon Sep 17 00:00:00 2001 From: Rooney Date: Fri, 20 Sep 2024 09:55:14 -0400 Subject: [PATCH 13/13] Formatting change --- .../android/ui/woopos/home/cart/WooPosCartScreen.kt | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/cart/WooPosCartScreen.kt b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/cart/WooPosCartScreen.kt index fac0a1d506f..346ac7dd36e 100644 --- a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/cart/WooPosCartScreen.kt +++ b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/cart/WooPosCartScreen.kt @@ -425,7 +425,9 @@ private fun ProductItem( AnimatedVisibility( visible = hasAnimationStarted, - enter = expandVertically(animationSpec = tween(durationMillis = 200)), + enter = expandVertically( + animationSpec = tween(durationMillis = 200) + ), exit = shrinkVertically() ) { WooPosCard(