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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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