Calendar item design changes
This commit is contained in:
MM20
parent
2cf48d42a3
commit
2b78ab0c4c
@ -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<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
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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) }
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user