feat(posts): different colors for like and dislike

This commit is contained in:
Diego Beraldin 2023-09-02 15:10:41 +02:00
parent 689a24dade
commit c2b245f4ec
8 changed files with 66 additions and 52 deletions

View File

@ -331,7 +331,6 @@ class CommunityDetailScreen(
} }
} }
items(uiState.posts, key = { it.id.toString() + it.myVote }) { post -> items(uiState.posts, key = { it.id.toString() + it.myVote }) { post ->
val activeColor = MaterialTheme.colorScheme.secondary
SwipeableCard( SwipeableCard(
modifier = Modifier.fillMaxWidth(), modifier = Modifier.fillMaxWidth(),
directions = if (isOnOtherInstance) { directions = if (isOnOtherInstance) {
@ -344,8 +343,8 @@ class CommunityDetailScreen(
}, },
backgroundColor = { backgroundColor = {
when (it) { when (it) {
DismissValue.DismissedToEnd -> activeColor DismissValue.DismissedToStart -> MaterialTheme.colorScheme.secondary
DismissValue.DismissedToStart -> activeColor DismissValue.DismissedToEnd -> MaterialTheme.colorScheme.tertiary
else -> Color.Transparent else -> Color.Transparent
} }
}, },
@ -359,14 +358,14 @@ class CommunityDetailScreen(
Modifier.background( Modifier.background(
color = Color.Transparent, color = Color.Transparent,
shape = CircleShape, shape = CircleShape,
) to MaterialTheme.colorScheme.onSecondary ) to MaterialTheme.colorScheme.onTertiary
} }
direction == DismissDirection.StartToEnd -> { direction == DismissDirection.StartToEnd -> {
Modifier.background( Modifier.background(
color = MaterialTheme.colorScheme.onSecondary, color = MaterialTheme.colorScheme.onTertiary,
shape = CircleShape, shape = CircleShape,
) to MaterialTheme.colorScheme.secondary ) to MaterialTheme.colorScheme.tertiary
} }
direction == DismissDirection.EndToStart && post.myVote > 0 -> { direction == DismissDirection.EndToStart && post.myVote > 0 -> {

View File

@ -34,8 +34,8 @@ fun SwipeableCard(
DismissDirection.EndToStart, DismissDirection.EndToStart,
), ),
content: @Composable () -> Unit, content: @Composable () -> Unit,
swipeContent: (@Composable (DismissDirection) -> Unit), swipeContent: @Composable (DismissDirection) -> Unit,
backgroundColor: (DismissValue) -> Color, backgroundColor: @Composable (DismissValue) -> Color,
onGestureBegin: (() -> Unit) = {}, onGestureBegin: (() -> Unit) = {},
onDismissToEnd: (() -> Unit) = {}, onDismissToEnd: (() -> Unit) = {},
onDismissToStart: (() -> Unit) = {}, onDismissToStart: (() -> Unit) = {},
@ -95,8 +95,7 @@ fun SwipeableCard(
DismissDirection.EndToStart -> Alignment.CenterEnd DismissDirection.EndToStart -> Alignment.CenterEnd
} }
Box( Box(
Modifier.fillMaxSize().background(bgColor) Modifier.fillMaxSize().background(bgColor).padding(horizontal = 20.dp),
.padding(horizontal = 20.dp),
contentAlignment = alignment, contentAlignment = alignment,
) { ) {
swipeContent(direction) swipeContent(direction)

View File

@ -189,13 +189,12 @@ class PostDetailScreen(
) )
} }
items(uiState.comments, key = { it.id.toString() + it.myVote }) { comment -> items(uiState.comments, key = { it.id.toString() + it.myVote }) { comment ->
val activeColor = MaterialTheme.colorScheme.secondary
SwipeableCard( SwipeableCard(
modifier = Modifier.fillMaxWidth(), modifier = Modifier.fillMaxWidth(),
backgroundColor = { backgroundColor = {
when (it) { when (it) {
DismissValue.DismissedToEnd -> activeColor DismissValue.DismissedToStart -> MaterialTheme.colorScheme.secondary
DismissValue.DismissedToStart -> activeColor DismissValue.DismissedToEnd -> MaterialTheme.colorScheme.tertiary
DismissValue.Default -> Color.Transparent DismissValue.Default -> Color.Transparent
} }
}, },
@ -226,14 +225,14 @@ class PostDetailScreen(
Modifier.background( Modifier.background(
color = Color.Transparent, color = Color.Transparent,
shape = CircleShape, shape = CircleShape,
) to MaterialTheme.colorScheme.onSecondary ) to MaterialTheme.colorScheme.onTertiary
} }
direction == DismissDirection.StartToEnd -> { direction == DismissDirection.StartToEnd -> {
Modifier.background( Modifier.background(
color = MaterialTheme.colorScheme.onSecondary, color = MaterialTheme.colorScheme.onTertiary,
shape = CircleShape, shape = CircleShape,
) to MaterialTheme.colorScheme.secondary ) to MaterialTheme.colorScheme.tertiary
} }
direction == DismissDirection.EndToStart && post.myVote > 0 -> { direction == DismissDirection.EndToStart && post.myVote > 0 -> {

View File

@ -113,13 +113,12 @@ internal class UserDetailCommentsScreen(
} }
} }
items(uiState.comments, key = { it.id.toString() + it.myVote }) { comment -> items(uiState.comments, key = { it.id.toString() + it.myVote }) { comment ->
val activeColor = MaterialTheme.colorScheme.secondary
SwipeableCard( SwipeableCard(
modifier = Modifier.fillMaxWidth(), modifier = Modifier.fillMaxWidth(),
backgroundColor = { backgroundColor = {
when (it) { when (it) {
DismissValue.DismissedToEnd -> activeColor DismissValue.DismissedToStart -> MaterialTheme.colorScheme.secondary
DismissValue.DismissedToStart -> activeColor DismissValue.DismissedToEnd -> MaterialTheme.colorScheme.tertiary
else -> Color.Transparent else -> Color.Transparent
} }
}, },
@ -138,16 +137,16 @@ internal class UserDetailCommentsScreen(
direction == DismissDirection.StartToEnd -> { direction == DismissDirection.StartToEnd -> {
Modifier.background( Modifier.background(
color = MaterialTheme.colorScheme.onSecondary, color = MaterialTheme.colorScheme.onTertiary,
shape = CircleShape, shape = CircleShape,
) to MaterialTheme.colorScheme.secondary ) to MaterialTheme.colorScheme.tertiary
} }
direction == DismissDirection.EndToStart && comment.myVote > 0 -> { direction == DismissDirection.EndToStart && comment.myVote > 0 -> {
Modifier.background( Modifier.background(
color = Color.Transparent, color = Color.Transparent,
shape = CircleShape, shape = CircleShape,
) to MaterialTheme.colorScheme.onSecondary ) to MaterialTheme.colorScheme.onTertiary
} }
else -> { else -> {

View File

@ -122,13 +122,12 @@ internal class UserDetailPostsScreen(
} }
} }
items(uiState.posts, key = { it.id.toString() + it.myVote }) { post -> items(uiState.posts, key = { it.id.toString() + it.myVote }) { post ->
val activeColor = MaterialTheme.colorScheme.secondary
SwipeableCard( SwipeableCard(
modifier = Modifier.fillMaxWidth(), modifier = Modifier.fillMaxWidth(),
backgroundColor = { backgroundColor = {
when (it) { when (it) {
DismissValue.DismissedToEnd -> activeColor DismissValue.DismissedToStart -> MaterialTheme.colorScheme.secondary
DismissValue.DismissedToStart -> activeColor DismissValue.DismissedToEnd -> MaterialTheme.colorScheme.tertiary
else -> Color.Transparent else -> Color.Transparent
} }
}, },
@ -142,14 +141,14 @@ internal class UserDetailPostsScreen(
Modifier.background( Modifier.background(
color = Color.Transparent, color = Color.Transparent,
shape = CircleShape, shape = CircleShape,
) to MaterialTheme.colorScheme.onSecondary ) to MaterialTheme.colorScheme.onTertiary
} }
direction == DismissDirection.StartToEnd -> { direction == DismissDirection.StartToEnd -> {
Modifier.background( Modifier.background(
color = MaterialTheme.colorScheme.onSecondary, color = MaterialTheme.colorScheme.onTertiary,
shape = CircleShape, shape = CircleShape,
) to MaterialTheme.colorScheme.secondary ) to MaterialTheme.colorScheme.tertiary
} }
direction == DismissDirection.EndToStart && post.myVote > 0 -> { direction == DismissDirection.EndToStart && post.myVote > 0 -> {

View File

@ -106,7 +106,6 @@ class PostListScreen : Screen {
verticalArrangement = Arrangement.spacedBy(Spacing.xs), verticalArrangement = Arrangement.spacedBy(Spacing.xs),
) { ) {
items(uiState.posts, key = { it.id.toString() + it.myVote }) { post -> items(uiState.posts, key = { it.id.toString() + it.myVote }) { post ->
val activeColor = MaterialTheme.colorScheme.secondary
SwipeableCard( SwipeableCard(
modifier = Modifier.fillMaxWidth(), modifier = Modifier.fillMaxWidth(),
onGestureBegin = { onGestureBegin = {
@ -120,8 +119,8 @@ class PostListScreen : Screen {
}, },
backgroundColor = { backgroundColor = {
when (it) { when (it) {
DismissValue.DismissedToEnd -> activeColor DismissValue.DismissedToStart -> MaterialTheme.colorScheme.secondary
DismissValue.DismissedToStart -> activeColor DismissValue.DismissedToEnd -> MaterialTheme.colorScheme.tertiary
else -> Color.Transparent else -> Color.Transparent
} }
}, },
@ -135,14 +134,14 @@ class PostListScreen : Screen {
Modifier.background( Modifier.background(
color = Color.Transparent, color = Color.Transparent,
shape = CircleShape, shape = CircleShape,
) to MaterialTheme.colorScheme.onSecondary ) to MaterialTheme.colorScheme.onTertiary
} }
direction == DismissDirection.StartToEnd -> { direction == DismissDirection.StartToEnd -> {
Modifier.background( Modifier.background(
color = MaterialTheme.colorScheme.onSecondary, color = MaterialTheme.colorScheme.onTertiary,
shape = CircleShape, shape = CircleShape,
) to MaterialTheme.colorScheme.secondary ) to MaterialTheme.colorScheme.tertiary
} }
direction == DismissDirection.EndToStart && post.myVote > 0 -> { direction == DismissDirection.EndToStart && post.myVote > 0 -> {

View File

@ -92,13 +92,12 @@ class InboxMentionsScreen(
verticalArrangement = Arrangement.spacedBy(Spacing.xs), verticalArrangement = Arrangement.spacedBy(Spacing.xs),
) { ) {
items(uiState.mentions, key = { it.id }) { mention -> items(uiState.mentions, key = { it.id }) { mention ->
val activeColor = MaterialTheme.colorScheme.secondary
SwipeableCard( SwipeableCard(
modifier = Modifier.fillMaxWidth(), modifier = Modifier.fillMaxWidth(),
backgroundColor = { backgroundColor = {
when (it) { when (it) {
DismissValue.DismissedToEnd -> activeColor DismissValue.DismissedToStart -> MaterialTheme.colorScheme.secondary
DismissValue.DismissedToStart -> activeColor DismissValue.DismissedToEnd -> MaterialTheme.colorScheme.tertiary
else -> Color.Transparent else -> Color.Transparent
} }
}, },
@ -126,13 +125,24 @@ class InboxMentionsScreen(
DismissDirection.StartToEnd -> Icons.Default.MarkChatUnread DismissDirection.StartToEnd -> Icons.Default.MarkChatUnread
DismissDirection.EndToStart -> Icons.Default.MarkChatRead DismissDirection.EndToStart -> Icons.Default.MarkChatRead
} }
val iconModifier = Modifier.background( val (iconModifier, iconTint) = when (direction) {
color = MaterialTheme.colorScheme.onSecondary, DismissDirection.StartToEnd -> {
shape = CircleShape, Modifier.background(
) color = MaterialTheme.colorScheme.onTertiary,
val iconTint = MaterialTheme.colorScheme.secondary shape = CircleShape,
) to MaterialTheme.colorScheme.tertiary
}
else -> {
Modifier.background(
color = MaterialTheme.colorScheme.onSecondary,
shape = CircleShape,
) to MaterialTheme.colorScheme.secondary
}
}
Icon( Icon(
modifier = iconModifier, modifier = iconModifier.padding(Spacing.xs),
imageVector = icon, imageVector = icon,
contentDescription = null, contentDescription = null,
tint = iconTint, tint = iconTint,

View File

@ -92,13 +92,12 @@ class InboxRepliesScreen(
verticalArrangement = Arrangement.spacedBy(Spacing.xs), verticalArrangement = Arrangement.spacedBy(Spacing.xs),
) { ) {
items(uiState.mentions, key = { it.id }) { mention -> items(uiState.mentions, key = { it.id }) { mention ->
val activeColor = MaterialTheme.colorScheme.secondary
SwipeableCard( SwipeableCard(
modifier = Modifier.fillMaxWidth(), modifier = Modifier.fillMaxWidth(),
backgroundColor = { backgroundColor = {
when (it) { when (it) {
DismissValue.DismissedToEnd -> activeColor DismissValue.DismissedToStart -> MaterialTheme.colorScheme.secondary
DismissValue.DismissedToStart -> activeColor DismissValue.DismissedToEnd -> MaterialTheme.colorScheme.tertiary
else -> Color.Transparent else -> Color.Transparent
} }
}, },
@ -126,13 +125,24 @@ class InboxRepliesScreen(
DismissDirection.StartToEnd -> Icons.Default.MarkChatUnread DismissDirection.StartToEnd -> Icons.Default.MarkChatUnread
DismissDirection.EndToStart -> Icons.Default.MarkChatRead DismissDirection.EndToStart -> Icons.Default.MarkChatRead
} }
val iconModifier = Modifier.background( val (iconModifier, iconTint) = when (direction) {
color = MaterialTheme.colorScheme.onSecondary, DismissDirection.StartToEnd -> {
shape = CircleShape, Modifier.background(
) color = MaterialTheme.colorScheme.onTertiary,
val iconTint = MaterialTheme.colorScheme.secondary shape = CircleShape,
) to MaterialTheme.colorScheme.tertiary
}
else -> {
Modifier.background(
color = MaterialTheme.colorScheme.onSecondary,
shape = CircleShape,
) to MaterialTheme.colorScheme.secondary
}
}
Icon( Icon(
modifier = iconModifier, modifier = iconModifier.padding(Spacing.xs),
imageVector = icon, imageVector = icon,
contentDescription = null, contentDescription = null,
tint = iconTint, tint = iconTint,