From 2b78ab0c4caeb065f5e457604bc154b9d99d9b81 Mon Sep 17 00:00:00 2001 From: MM20 <15646950+MM2-0@users.noreply.github.com> Date: Sat, 15 Jun 2024 00:58:43 +0200 Subject: [PATCH] Calendar item design changes --- .../launcher/search/calendar/CalendarItem.kt | 141 +++++++++++------- .../launcher/search/common/list/ListItem.kt | 3 +- 2 files changed, 85 insertions(+), 59 deletions(-) diff --git a/app/ui/src/main/java/de/mm20/launcher2/ui/launcher/search/calendar/CalendarItem.kt b/app/ui/src/main/java/de/mm20/launcher2/ui/launcher/search/calendar/CalendarItem.kt index 7e026c2a..2d36c2a6 100644 --- a/app/ui/src/main/java/de/mm20/launcher2/ui/launcher/search/calendar/CalendarItem.kt +++ b/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( - modifier = modifier - .drawBehind { - val color = TonalPalette - .fromInt(calendar.color ?: secondaryColor.toArgb()) - .tone( - if (darkMode) 80 else 40 - ) - drawRect(Color(color), Offset.Zero, this.size.copy(width = 8.dp.toPx())) - } - .padding(start = 8.dp), - ) { - Column( - modifier = Modifier.weight(1f) - ) { - Row { - val padding by animateDpAsState(if (showDetails) 16.dp else 12.dp) - Column( - modifier = Modifier.padding( - top = padding, - start = padding, - bottom = 12.dp, - end = padding - ) - ) { - val textStyle by animateTextStyleAsState( - if (showDetails) MaterialTheme.typography.titleMedium - else MaterialTheme.typography.titleSmall - ) - Text(text = calendar.labelOverride ?: calendar.label, style = textStyle) - AnimatedVisibility(!showDetails) { + val eventColor = Color( + TonalPalette + .fromInt(calendar.color ?: secondaryColor.toArgb()) + .tone( + if (darkMode) 80 else 40 + ) + ) + + SharedTransitionLayout { + AnimatedContent(showDetails) { showDetails -> + if (showDetails) { + Column { + Row( + verticalAlignment = Alignment.CenterVertically, + modifier = Modifier.padding(vertical = 16.dp) + ) { + Box( + modifier = Modifier + .padding(horizontal = 14.dp) + .size(24.dp) + .sharedBounds( + rememberSharedContentState("color"), + this@AnimatedContent + ) + .background(eventColor, MaterialTheme.shapes.extraSmall) + ) + Text( - modifier = Modifier.padding(top = 2.dp), - text = calendar.getSummary(context), - style = MaterialTheme.typography.bodySmall + modifier = Modifier + .padding(start = 4.dp) + .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() 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 + ) + } + + } } } } diff --git a/app/ui/src/main/java/de/mm20/launcher2/ui/launcher/search/common/list/ListItem.kt b/app/ui/src/main/java/de/mm20/launcher2/ui/launcher/search/common/list/ListItem.kt index 6d47f654..04ac0f22 100644 --- a/app/ui/src/main/java/de/mm20/launcher2/ui/launcher/search/common/list/ListItem.kt +++ b/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) }