|
// Original idea by https://twitter.com/raffichill/status/1781492309500027206 |
|
|
|
// Tried to make it vanilla as possible |
|
|
|
@Composable |
|
fun EditMenu() { |
|
var isExpanded by remember { |
|
mutableStateOf(false) |
|
} |
|
val scale by animateFloatAsState( |
|
targetValue = if (isExpanded) 1f else 0.2f, |
|
animationSpec = tween(durationMillis = 220), |
|
label = "ANIM_SCALE_EDITMENU" |
|
) |
|
|
|
Box { |
|
AnimatedVisibility( |
|
visible = !isExpanded, |
|
enter = scaleIn() + fadeIn(), |
|
exit = scaleOut() + fadeOut(), |
|
modifier = Modifier |
|
.align(Alignment.CenterEnd) |
|
.padding(start = 82.dp) |
|
|
|
) { |
|
EditButton(imgVector = Icons.Filled.Clear, |
|
isExpanded = true, |
|
tint = Color.Black, |
|
backgroundColor = Color(0xffe7e7e7), |
|
onClick = { }) |
|
} |
|
Row(horizontalArrangement = Arrangement.spacedBy(12.dp), |
|
verticalAlignment = Alignment.CenterVertically, |
|
modifier = Modifier |
|
.clickable(indication = null, |
|
enabled = !isExpanded, |
|
interactionSource = remember { MutableInteractionSource() }) { |
|
isExpanded = true |
|
} |
|
.align(Alignment.Center) |
|
.graphicsLayer { |
|
scaleX = scale |
|
scaleY = scale |
|
transformOrigin = TransformOrigin.Center |
|
}) { |
|
EditButton(imgVector = Icons.Filled.Edit, |
|
isExpanded = isExpanded, |
|
tint = if (isExpanded) Color.Black else Color.Transparent, |
|
backgroundColor = if (isExpanded) Color(0xffe7e7e7) else Color.Black, |
|
onClick = { if (!isExpanded) isExpanded = true }) |
|
EditButton( |
|
imgVector = Icons.Default.Delete, |
|
isExpanded = isExpanded, |
|
onClick = { if (!isExpanded) isExpanded = true }, |
|
tint = Color.Red, |
|
backgroundColor = if (isExpanded) Color(0xB7FF6F6F) else Color.Black |
|
) |
|
EditButton(imgVector = Icons.Default.ArrowBack, |
|
isExpanded = isExpanded, |
|
tint = if (isExpanded) Color.Black else Color.Transparent, |
|
backgroundColor = if (isExpanded) Color(0xffe7e7e7) else Color.Black, |
|
onClick = { isExpanded = !isExpanded }) |
|
} |
|
} |
|
} |
|
|
|
@Composable |
|
fun EditButton( |
|
imgVector: ImageVector, |
|
isExpanded: Boolean, |
|
onClick: () -> Unit, |
|
tint: Color = Color.Transparent, |
|
backgroundColor: Color = Color.Black |
|
) { |
|
Box(modifier = Modifier |
|
.background(if (isExpanded) backgroundColor else Color.Gray, CircleShape) |
|
.clickable(indication = null, interactionSource = remember { MutableInteractionSource() }) { |
|
onClick() |
|
}) { |
|
Icon( |
|
imageVector = imgVector, |
|
contentDescription = null, |
|
tint = if (isExpanded) tint else Color.Transparent, |
|
modifier = Modifier |
|
.align(Alignment.Center) |
|
.size(if (isExpanded) 45.dp else 24.dp) |
|
.padding(8.dp) |
|
) |
|
} |
|
} |