Calendar item design changes

app/ui/src/main/java/de/mm20/launcher2/ui/launcher/search/calendar/CalendarItem.kt

@@ -2,20 +2,23 @@ package de.mm20.launcher2.ui.launcher.search.calendar
 
 import android.content.Context
 import android.text.format.DateUtils
+import androidx.compose.animation.AnimatedContent
 import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.SharedTransitionLayout
 import androidx.compose.animation.core.MutableTransitionState
-import androidx.compose.animation.core.animateDpAsState
 import androidx.compose.animation.core.tween
 import androidx.compose.animation.expandIn
 import androidx.compose.animation.shrinkOut
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
 import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.rounded.ArrowBack
+import androidx.compose.material.icons.automirrored.rounded.ArrowBack
 import androidx.compose.material.icons.rounded.Edit
 import androidx.compose.material.icons.rounded.Notes
 import androidx.compose.material.icons.rounded.OpenInNew
@@ -37,20 +40,17 @@ import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.drawBehind
-import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.geometry.Rect
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.toArgb
 import androidx.compose.ui.platform.LocalContext
-import androidx.compose.ui.platform.LocalLifecycleOwner
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.roundToIntRect
+import androidx.lifecycle.compose.LocalLifecycleOwner
 import androidx.lifecycle.lifecycleScope
 import de.mm20.launcher2.search.CalendarEvent
 import de.mm20.launcher2.ui.R
-import de.mm20.launcher2.ui.animation.animateTextStyleAsState
 import de.mm20.launcher2.ui.component.DefaultToolbarAction
 import de.mm20.launcher2.ui.component.Toolbar
 import de.mm20.launcher2.ui.component.ToolbarAction
@@ -86,58 +86,44 @@ fun CalendarItem(
     val darkMode = LocalDarkTheme.current
     val secondaryColor = MaterialTheme.colorScheme.secondary
 
-    Row(
+    val eventColor = Color(
-        modifier = modifier
+        TonalPalette
-            .drawBehind {
+            .fromInt(calendar.color ?: secondaryColor.toArgb())
-                val color = TonalPalette
+            .tone(
-                    .fromInt(calendar.color ?: secondaryColor.toArgb())
+                if (darkMode) 80 else 40
-                    .tone(
+            )
-                        if (darkMode) 80 else 40
+    )
-                    )
+
-                drawRect(Color(color), Offset.Zero, this.size.copy(width = 8.dp.toPx()))
+    SharedTransitionLayout {
-            }
+        AnimatedContent(showDetails) { showDetails ->
-            .padding(start = 8.dp),
+            if (showDetails) {
-    ) {
+                Column {
-        Column(
+                    Row(
-            modifier = Modifier.weight(1f)
+                        verticalAlignment = Alignment.CenterVertically,
-        ) {
+                        modifier = Modifier.padding(vertical = 16.dp)
-            Row {
+                    ) {
-                val padding by animateDpAsState(if (showDetails) 16.dp else 12.dp)
+                        Box(
-                Column(
+                            modifier = Modifier
-                    modifier = Modifier.padding(
+                                .padding(horizontal = 14.dp)
-                        top = padding,
+                                .size(24.dp)
-                        start = padding,
+                                .sharedBounds(
-                        bottom = 12.dp,
+                                    rememberSharedContentState("color"),
-                        end = padding
+                                    this@AnimatedContent
-                    )
+                                )
-                ) {
+                                .background(eventColor, MaterialTheme.shapes.extraSmall)
-                    val textStyle by animateTextStyleAsState(
+                        )
-                        if (showDetails) MaterialTheme.typography.titleMedium
+
-                        else MaterialTheme.typography.titleSmall
-                    )
-                    Text(text = calendar.labelOverride ?: calendar.label, style = textStyle)
-                    AnimatedVisibility(!showDetails) {
                         Text(
-                            modifier = Modifier.padding(top = 2.dp),
+                            modifier = Modifier
-                            text = calendar.getSummary(context),
+                                .padding(start = 4.dp)
-                            style = MaterialTheme.typography.bodySmall
+                                .sharedBounds(
+                                    rememberSharedContentState("label"),
+                                    this@AnimatedContent
+                                ),
+                            text = calendar.labelOverride ?: calendar.label,
+                            style = MaterialTheme.typography.titleMedium
                         )
                     }
-                    AnimatedVisibility(showDetails) {
-                        val tags by viewModel.tags.collectAsState(emptyList())
-                        if (tags.isNotEmpty()) {
-                            Text(
-                                modifier = Modifier.padding(top = 1.dp, bottom = 4.dp),
-                                text = tags.joinToString(separator = " #", prefix = "#"),
-                                color = MaterialTheme.colorScheme.secondary,
-                                style = MaterialTheme.typography.labelSmall
-                            )
-                        }
-                    }
-                }
-            }
-            AnimatedVisibility(showDetails) {
-                Column {
                     Row(
                         Modifier
                             .fillMaxWidth(),
@@ -149,6 +135,11 @@ fun CalendarItem(
                             contentDescription = null
                         )
                         Text(
+                            modifier = Modifier
+                                .sharedBounds(
+                                    rememberSharedContentState("date"),
+                                    this@AnimatedContent
+                                ),
                             text = calendar.formatTime(context),
                             style = MaterialTheme.typography.bodySmall
                         )
@@ -207,7 +198,6 @@ fun CalendarItem(
                             )
                         }
                     }
-
                     val toolbarActions = mutableListOf<ToolbarAction>()
 
                     if (LocalFavoritesEnabled.current) {
@@ -288,7 +278,7 @@ fun CalendarItem(
                         leftActions = listOf(
                             DefaultToolbarAction(
                                 label = stringResource(id = R.string.menu_back),
-                                icon = Icons.Rounded.ArrowBack
+                                icon = Icons.AutoMirrored.Rounded.ArrowBack
                             ) {
                                 onBack()
                             }
@@ -296,6 +286,43 @@ fun CalendarItem(
                         rightActions = toolbarActions
                     )
                 }
+            } else {
+                Row(
+                    verticalAlignment = Alignment.CenterVertically,
+                    modifier = modifier
+                        .padding(16.dp)
+                ) {
+                    Box(
+                        modifier = Modifier
+                            .padding(end = 16.dp)
+                            .size(20.dp)
+                            .sharedBounds(
+                                rememberSharedContentState("color"),
+                                this@AnimatedContent
+                            )
+                            .background(eventColor, MaterialTheme.shapes.extraSmall)
+                    )
+                    Column {
+                        Text(
+                            modifier = Modifier.sharedBounds(
+                                rememberSharedContentState("label"),
+                                this@AnimatedContent
+                            ),
+                            text = calendar.labelOverride ?: calendar.label,
+                            style = MaterialTheme.typography.titleSmall
+                        )
+                        Text(
+                            modifier = Modifier.padding(top = 2.dp)
+                                .sharedBounds(
+                                    rememberSharedContentState("date"),
+                                    this@AnimatedContent
+                                ),
+                            text = calendar.getSummary(context),
+                            style = MaterialTheme.typography.bodySmall
+                        )
+                    }
+
+                }
             }
         }
     }

app/ui/src/main/java/de/mm20/launcher2/ui/launcher/search/common/list/ListItem.kt

@@ -123,8 +123,7 @@ fun ListItem(
                                 enabled = !showDetails,
                                 onClick = { onShowDetails(true) },
                                 onLongClick = { onShowDetails(true) }
-                            )
+                            ),
-                            .padding(top = 4.dp, end = 4.dp, bottom = 4.dp),
                         calendar = item,
                         showDetails = showDetails,
                         onBack = { onShowDetails(false) }