From bc4da2d4d3dc9d8739a3526df4b0932391efc4cd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Eyl=C3=BCl=20Naz=20Can?= Date: Sat, 14 Dec 2024 20:46:22 +0100 Subject: [PATCH 1/5] align channel structure and add bubble to channel icon for unread messages --- .../ui/common/ChannelIcons.kt | 31 ++++++++++++++++--- .../ui/common/CommunicationColors.kt | 14 +++++++++ .../conversation/overview/ConversationList.kt | 29 ++++++++--------- .../overview/ConversationOverviewBody.kt | 2 -- 4 files changed, 54 insertions(+), 22 deletions(-) create mode 100644 feature/metis/manage-conversations/src/main/kotlin/de/tum/informatics/www1/artemis/native_app/feature/metis/manageconversations/ui/common/CommunicationColors.kt diff --git a/feature/metis/manage-conversations/src/main/kotlin/de/tum/informatics/www1/artemis/native_app/feature/metis/manageconversations/ui/common/ChannelIcons.kt b/feature/metis/manage-conversations/src/main/kotlin/de/tum/informatics/www1/artemis/native_app/feature/metis/manageconversations/ui/common/ChannelIcons.kt index 0bc05f25a..ff6561966 100644 --- a/feature/metis/manage-conversations/src/main/kotlin/de/tum/informatics/www1/artemis/native_app/feature/metis/manageconversations/ui/common/ChannelIcons.kt +++ b/feature/metis/manage-conversations/src/main/kotlin/de/tum/informatics/www1/artemis/native_app/feature/metis/manageconversations/ui/common/ChannelIcons.kt @@ -1,6 +1,10 @@ package de.tum.informatics.www1.artemis.native_app.feature.metis.manageconversations.ui.common +import androidx.compose.foundation.background +import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.size +import androidx.compose.foundation.shape.CircleShape import androidx.compose.material.icons.Icons import androidx.compose.material.icons.filled.Archive import androidx.compose.material.icons.filled.Campaign @@ -8,17 +12,36 @@ import androidx.compose.material.icons.filled.Lock import androidx.compose.material.icons.filled.Numbers import androidx.compose.material3.Icon import androidx.compose.runtime.Composable +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.clip +import androidx.compose.ui.unit.dp import de.tum.informatics.www1.artemis.native_app.feature.metis.shared.content.dto.conversation.ChannelChat + @Composable -internal fun ChannelIcons(channelChat: ChannelChat) { - Row { - PrimaryChannelIcon(channelChat) +internal fun ChannelIcons(channelChat: ChannelChat, hasUnreadMessages: Boolean = false) { + Box { + if (channelChat.isArchived || channelChat.isAnnouncementChannel) { + ExtraChannelIcons(channelChat) + } else { + PrimaryChannelIcon(channelChat) + } - ExtraChannelIcons(channelChat) + if (hasUnreadMessages) { + Box( + modifier = Modifier + .size(8.dp) + .clip(CircleShape) + .background(CommunicationColors.ArtemisBlue) + .align(Alignment.TopEnd) + ) + } } } + + @Composable internal fun ExtraChannelIcons(channelChat: ChannelChat) { Row { diff --git a/feature/metis/manage-conversations/src/main/kotlin/de/tum/informatics/www1/artemis/native_app/feature/metis/manageconversations/ui/common/CommunicationColors.kt b/feature/metis/manage-conversations/src/main/kotlin/de/tum/informatics/www1/artemis/native_app/feature/metis/manageconversations/ui/common/CommunicationColors.kt new file mode 100644 index 000000000..856249f76 --- /dev/null +++ b/feature/metis/manage-conversations/src/main/kotlin/de/tum/informatics/www1/artemis/native_app/feature/metis/manageconversations/ui/common/CommunicationColors.kt @@ -0,0 +1,14 @@ +package de.tum.informatics.www1.artemis.native_app.feature.metis.manageconversations.ui.common + +import androidx.compose.foundation.isSystemInDarkTheme +import androidx.compose.runtime.Composable +import androidx.compose.ui.graphics.Color + +object CommunicationColors { + private val ArtemisMainBlue = Color(0xFF3E8ACC) + private val ArtemisLightBlue = Color(0xFFB5CEE4) + + val ArtemisBlue: Color + @Composable + get() = if (isSystemInDarkTheme()) ArtemisLightBlue else ArtemisMainBlue +} diff --git a/feature/metis/manage-conversations/src/main/kotlin/de/tum/informatics/www1/artemis/native_app/feature/metis/manageconversations/ui/conversation/overview/ConversationList.kt b/feature/metis/manage-conversations/src/main/kotlin/de/tum/informatics/www1/artemis/native_app/feature/metis/manageconversations/ui/conversation/overview/ConversationList.kt index 65b0ff1f5..b7dbc8f5a 100644 --- a/feature/metis/manage-conversations/src/main/kotlin/de/tum/informatics/www1/artemis/native_app/feature/metis/manageconversations/ui/conversation/overview/ConversationList.kt +++ b/feature/metis/manage-conversations/src/main/kotlin/de/tum/informatics/www1/artemis/native_app/feature/metis/manageconversations/ui/conversation/overview/ConversationList.kt @@ -35,7 +35,6 @@ import androidx.compose.material.icons.filled.Visibility import androidx.compose.material.icons.filled.VisibilityOff import androidx.compose.material3.DropdownMenu import androidx.compose.material3.DropdownMenuItem -import androidx.compose.material3.HorizontalDivider import androidx.compose.material3.Icon import androidx.compose.material3.IconButton import androidx.compose.material3.ListItem @@ -50,13 +49,14 @@ import androidx.compose.runtime.setValue import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.platform.testTag +import androidx.compose.ui.res.colorResource import androidx.compose.ui.res.stringResource import androidx.compose.ui.unit.DpOffset import androidx.compose.ui.unit.dp import de.tum.informatics.www1.artemis.native_app.feature.metis.manageconversations.ConversationCollections import de.tum.informatics.www1.artemis.native_app.feature.metis.manageconversations.R -import de.tum.informatics.www1.artemis.native_app.feature.metis.manageconversations.ui.common.ExtraChannelIcons -import de.tum.informatics.www1.artemis.native_app.feature.metis.manageconversations.ui.common.PrimaryChannelIcon +import de.tum.informatics.www1.artemis.native_app.feature.metis.manageconversations.ui.common.ChannelIcons +import de.tum.informatics.www1.artemis.native_app.feature.metis.manageconversations.ui.common.CommunicationColors import de.tum.informatics.www1.artemis.native_app.feature.metis.shared.content.dto.conversation.ChannelChat import de.tum.informatics.www1.artemis.native_app.feature.metis.shared.content.dto.conversation.Conversation import de.tum.informatics.www1.artemis.native_app.feature.metis.shared.content.dto.conversation.GroupChat @@ -217,7 +217,6 @@ private fun LazyListScope.conversationSectionHeader( .fillMaxWidth() .testTag(key) ) { - HorizontalDivider() Row( modifier = Modifier @@ -248,12 +247,12 @@ private fun LazyListScope.conversationSectionHeader( Icon( imageVector = if (isExpanded) Icons.Default.ArrowDropDown else Icons.AutoMirrored.Filled.ArrowRight, contentDescription = null, - modifier = Modifier.size(32.dp) + modifier = Modifier.size(32.dp), + tint = CommunicationColors.ArtemisBlue ) } } - HorizontalDivider() } } } @@ -338,19 +337,17 @@ private fun ConversationListItem( else -> conversation.humanReadableName } - Box(modifier = modifier) { + Box(modifier = modifier.padding(horizontal = 16.dp)) { when (conversation) { is ChannelChat -> { ListItem( - modifier = Modifier.clickable(onClick = onNavigateToConversation), + modifier = Modifier.clickable(onClick = onNavigateToConversation).padding(start = 8.dp), leadingContent = { - PrimaryChannelIcon(channelChat = conversation) + ChannelIcons(channelChat = conversation, hasUnreadMessages = unreadMessagesCount > 0) }, headlineContent = { Row(horizontalArrangement = Arrangement.spacedBy(16.dp)) { Text(text = displayName, maxLines = 1, color = headlineColor) - - ExtraChannelIcons(channelChat = conversation) } }, trailingContent = { @@ -361,7 +358,7 @@ private fun ConversationListItem( is GroupChat -> { ListItem( - modifier = Modifier.clickable(onClick = onNavigateToConversation), + modifier = Modifier.clickable(onClick = onNavigateToConversation).padding(start = 8.dp), headlineContent = { Text( displayName, @@ -379,7 +376,7 @@ private fun ConversationListItem( is OneToOneChat -> { ListItem( - modifier = Modifier.clickable(onClick = onNavigateToConversation), + modifier = Modifier.clickable(onClick = onNavigateToConversation).padding(start = 8.dp), headlineContent = { Text( displayName, @@ -500,18 +497,18 @@ private fun UnreadMessages(modifier: Modifier = Modifier, unreadMessagesCount: L if (unreadMessagesCount > 0) { Box( modifier = modifier - .padding(end = 24.dp) + .padding(end = 32.dp) .size(24.dp) .aspectRatio(1f) .background( - MaterialTheme.colorScheme.primaryContainer, + CommunicationColors.ArtemisBlue, CircleShape ), contentAlignment = Alignment.Center ) { Text( text = unreadMessagesCount.toString(), - color = MaterialTheme.colorScheme.onPrimaryContainer + color = MaterialTheme.colorScheme.onPrimary ) } } diff --git a/feature/metis/manage-conversations/src/main/kotlin/de/tum/informatics/www1/artemis/native_app/feature/metis/manageconversations/ui/conversation/overview/ConversationOverviewBody.kt b/feature/metis/manage-conversations/src/main/kotlin/de/tum/informatics/www1/artemis/native_app/feature/metis/manageconversations/ui/conversation/overview/ConversationOverviewBody.kt index 0b7c2c300..43d05c959 100644 --- a/feature/metis/manage-conversations/src/main/kotlin/de/tum/informatics/www1/artemis/native_app/feature/metis/manageconversations/ui/conversation/overview/ConversationOverviewBody.kt +++ b/feature/metis/manage-conversations/src/main/kotlin/de/tum/informatics/www1/artemis/native_app/feature/metis/manageconversations/ui/conversation/overview/ConversationOverviewBody.kt @@ -151,8 +151,6 @@ fun ConversationOverviewBody( onToggleHidden = viewModel::markConversationAsHidden, onToggleMuted = viewModel::markConversationAsMuted, trailingContent = { - item { HorizontalDivider() } - item(key = KEY_BUTTON_SHOW_COC) { Box( modifier = Modifier From a701742876322c4802034e1f710bb66dbcc41ca1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Eyl=C3=BCl=20Naz=20Can?= Date: Sat, 14 Dec 2024 20:47:58 +0100 Subject: [PATCH 2/5] remove unused imports --- .../feature/metis/manageconversations/ui/common/ChannelIcons.kt | 2 -- .../ui/conversation/overview/ConversationList.kt | 1 - .../ui/conversation/overview/ConversationOverviewBody.kt | 1 - 3 files changed, 4 deletions(-) diff --git a/feature/metis/manage-conversations/src/main/kotlin/de/tum/informatics/www1/artemis/native_app/feature/metis/manageconversations/ui/common/ChannelIcons.kt b/feature/metis/manage-conversations/src/main/kotlin/de/tum/informatics/www1/artemis/native_app/feature/metis/manageconversations/ui/common/ChannelIcons.kt index ff6561966..5fc453a61 100644 --- a/feature/metis/manage-conversations/src/main/kotlin/de/tum/informatics/www1/artemis/native_app/feature/metis/manageconversations/ui/common/ChannelIcons.kt +++ b/feature/metis/manage-conversations/src/main/kotlin/de/tum/informatics/www1/artemis/native_app/feature/metis/manageconversations/ui/common/ChannelIcons.kt @@ -40,8 +40,6 @@ internal fun ChannelIcons(channelChat: ChannelChat, hasUnreadMessages: Boolean = } } - - @Composable internal fun ExtraChannelIcons(channelChat: ChannelChat) { Row { diff --git a/feature/metis/manage-conversations/src/main/kotlin/de/tum/informatics/www1/artemis/native_app/feature/metis/manageconversations/ui/conversation/overview/ConversationList.kt b/feature/metis/manage-conversations/src/main/kotlin/de/tum/informatics/www1/artemis/native_app/feature/metis/manageconversations/ui/conversation/overview/ConversationList.kt index b7dbc8f5a..06904e729 100644 --- a/feature/metis/manage-conversations/src/main/kotlin/de/tum/informatics/www1/artemis/native_app/feature/metis/manageconversations/ui/conversation/overview/ConversationList.kt +++ b/feature/metis/manage-conversations/src/main/kotlin/de/tum/informatics/www1/artemis/native_app/feature/metis/manageconversations/ui/conversation/overview/ConversationList.kt @@ -49,7 +49,6 @@ import androidx.compose.runtime.setValue import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.platform.testTag -import androidx.compose.ui.res.colorResource import androidx.compose.ui.res.stringResource import androidx.compose.ui.unit.DpOffset import androidx.compose.ui.unit.dp diff --git a/feature/metis/manage-conversations/src/main/kotlin/de/tum/informatics/www1/artemis/native_app/feature/metis/manageconversations/ui/conversation/overview/ConversationOverviewBody.kt b/feature/metis/manage-conversations/src/main/kotlin/de/tum/informatics/www1/artemis/native_app/feature/metis/manageconversations/ui/conversation/overview/ConversationOverviewBody.kt index 43d05c959..d0a7bbf8d 100644 --- a/feature/metis/manage-conversations/src/main/kotlin/de/tum/informatics/www1/artemis/native_app/feature/metis/manageconversations/ui/conversation/overview/ConversationOverviewBody.kt +++ b/feature/metis/manage-conversations/src/main/kotlin/de/tum/informatics/www1/artemis/native_app/feature/metis/manageconversations/ui/conversation/overview/ConversationOverviewBody.kt @@ -28,7 +28,6 @@ import androidx.compose.material.icons.filled.WifiOff import androidx.compose.material3.DropdownMenu import androidx.compose.material3.DropdownMenuItem import androidx.compose.material3.FloatingActionButton -import androidx.compose.material3.HorizontalDivider import androidx.compose.material3.Icon import androidx.compose.material3.IconButton import androidx.compose.material3.MaterialTheme From 3a3afa8d8115f79e455088bfa10b539a7c9cf8fd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Eyl=C3=BCl=20Naz=20Can?= Date: Sun, 15 Dec 2024 21:03:27 +0100 Subject: [PATCH 3/5] change section and channel style --- .../conversation/overview/ConversationList.kt | 68 ++++++++++++------- 1 file changed, 42 insertions(+), 26 deletions(-) diff --git a/feature/metis/manage-conversations/src/main/kotlin/de/tum/informatics/www1/artemis/native_app/feature/metis/manageconversations/ui/conversation/overview/ConversationList.kt b/feature/metis/manage-conversations/src/main/kotlin/de/tum/informatics/www1/artemis/native_app/feature/metis/manageconversations/ui/conversation/overview/ConversationList.kt index 06904e729..970dd488d 100644 --- a/feature/metis/manage-conversations/src/main/kotlin/de/tum/informatics/www1/artemis/native_app/feature/metis/manageconversations/ui/conversation/overview/ConversationList.kt +++ b/feature/metis/manage-conversations/src/main/kotlin/de/tum/informatics/www1/artemis/native_app/feature/metis/manageconversations/ui/conversation/overview/ConversationList.kt @@ -7,6 +7,7 @@ import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.aspectRatio import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding @@ -50,6 +51,7 @@ import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.platform.testTag import androidx.compose.ui.res.stringResource +import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.unit.DpOffset import androidx.compose.ui.unit.dp import de.tum.informatics.www1.artemis.native_app.feature.metis.manageconversations.ConversationCollections @@ -235,7 +237,7 @@ private fun LazyListScope.conversationSectionHeader( .weight(1f) .padding(start = 8.dp), text = stringResource(id = text), - style = MaterialTheme.typography.titleSmall + style = MaterialTheme.typography.titleMedium.copy(fontWeight = FontWeight.Bold) ) } @@ -340,13 +342,20 @@ private fun ConversationListItem( when (conversation) { is ChannelChat -> { ListItem( - modifier = Modifier.clickable(onClick = onNavigateToConversation).padding(start = 8.dp), + modifier = Modifier + .clickable(onClick = onNavigateToConversation) + .padding(start = 8.dp), leadingContent = { ChannelIcons(channelChat = conversation, hasUnreadMessages = unreadMessagesCount > 0) }, headlineContent = { Row(horizontalArrangement = Arrangement.spacedBy(16.dp)) { - Text(text = displayName, maxLines = 1, color = headlineColor) + Text( + text = displayName, + maxLines = 1, + color = headlineColor, + style = MaterialTheme.typography.bodyLarge + ) } }, trailingContent = { @@ -357,11 +366,14 @@ private fun ConversationListItem( is GroupChat -> { ListItem( - modifier = Modifier.clickable(onClick = onNavigateToConversation).padding(start = 8.dp), + modifier = Modifier + .clickable(onClick = onNavigateToConversation) + .padding(start = 8.dp), headlineContent = { Text( - displayName, - color = headlineColor + text = displayName, + color = headlineColor, + style = MaterialTheme.typography.bodyLarge ) }, leadingContent = { @@ -375,11 +387,14 @@ private fun ConversationListItem( is OneToOneChat -> { ListItem( - modifier = Modifier.clickable(onClick = onNavigateToConversation).padding(start = 8.dp), + modifier = Modifier + .clickable(onClick = onNavigateToConversation) + .padding(start = 8.dp), headlineContent = { Text( - displayName, - color = headlineColor + text = displayName, + color = headlineColor, + style = MaterialTheme.typography.bodyLarge ) }, trailingContent = { @@ -389,27 +404,28 @@ private fun ConversationListItem( } } - IconButton( - modifier = Modifier - .align(Alignment.CenterEnd) - .testTag(tagForConversationOptions(itemBaseTag)), - onClick = { isContextDialogShown = true } - ) { - Icon(imageVector = Icons.Default.MoreHoriz, contentDescription = null) - } + Box(modifier = Modifier.align(Alignment.CenterEnd)) { + IconButton( + modifier = Modifier.testTag(tagForConversationOptions(itemBaseTag)), + onClick = { isContextDialogShown = true } + ) { + Icon(imageVector = Icons.Default.MoreHoriz, contentDescription = null) + } - ConversationListItemDropdownMenu( - modifier = Modifier.Companion.align(Alignment.TopEnd), - isContextDialogShown = isContextDialogShown, - onDismissRequest = onDismissRequest, - conversation = conversation, - onToggleMarkAsFavourite = onToggleMarkAsFavourite, - onToggleHidden = onToggleHidden, - onToggleMuted = onToggleMuted - ) + ConversationListItemDropdownMenu( + modifier = Modifier, + isContextDialogShown = isContextDialogShown, + onDismissRequest = onDismissRequest, + conversation = conversation, + onToggleMarkAsFavourite = onToggleMarkAsFavourite, + onToggleHidden = onToggleHidden, + onToggleMuted = onToggleMuted + ) + } } } + @Composable private fun ConversationListItemDropdownMenu( modifier: Modifier, From 6db77a192772c78bfbe8b0eecbdff49d5ed2f15e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Eyl=C3=BCl=20Naz=20Can?= Date: Sun, 15 Dec 2024 21:08:33 +0100 Subject: [PATCH 4/5] make conversation names bold for unread messages --- .../ui/conversation/overview/ConversationList.kt | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/feature/metis/manage-conversations/src/main/kotlin/de/tum/informatics/www1/artemis/native_app/feature/metis/manageconversations/ui/conversation/overview/ConversationList.kt b/feature/metis/manage-conversations/src/main/kotlin/de/tum/informatics/www1/artemis/native_app/feature/metis/manageconversations/ui/conversation/overview/ConversationList.kt index 970dd488d..f9e964cc2 100644 --- a/feature/metis/manage-conversations/src/main/kotlin/de/tum/informatics/www1/artemis/native_app/feature/metis/manageconversations/ui/conversation/overview/ConversationList.kt +++ b/feature/metis/manage-conversations/src/main/kotlin/de/tum/informatics/www1/artemis/native_app/feature/metis/manageconversations/ui/conversation/overview/ConversationList.kt @@ -7,7 +7,6 @@ import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row -import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.aspectRatio import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding @@ -354,7 +353,9 @@ private fun ConversationListItem( text = displayName, maxLines = 1, color = headlineColor, - style = MaterialTheme.typography.bodyLarge + style = MaterialTheme.typography.bodyLarge.copy( + fontWeight = if (unreadMessagesCount > 0) FontWeight.Bold else FontWeight.Normal + ) ) } }, @@ -373,7 +374,9 @@ private fun ConversationListItem( Text( text = displayName, color = headlineColor, - style = MaterialTheme.typography.bodyLarge + style = MaterialTheme.typography.bodyLarge.copy( + fontWeight = if (unreadMessagesCount > 0) FontWeight.Bold else FontWeight.Normal + ) ) }, leadingContent = { @@ -394,7 +397,9 @@ private fun ConversationListItem( Text( text = displayName, color = headlineColor, - style = MaterialTheme.typography.bodyLarge + style = MaterialTheme.typography.bodyLarge.copy( + fontWeight = if (unreadMessagesCount > 0) FontWeight.Bold else FontWeight.Normal + ) ) }, trailingContent = { From e01267eb3f1bdb6dff3ec7ca3b0d29dea1ee72b2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Eyl=C3=BCl=20Naz=20Can?= Date: Sun, 22 Dec 2024 13:58:01 +0100 Subject: [PATCH 5/5] ensured branch stability after merging changes from develop --- .../ui/common/ChannelIcons.kt | 70 ------------------- .../ui/common/CommunicationColors.kt | 14 ---- .../conversation/overview/ConversationList.kt | 53 ++++++++------ .../metis/shared/ui/ConversationIcon.kt | 36 ++++++++-- 4 files changed, 61 insertions(+), 112 deletions(-) delete mode 100644 feature/metis/manage-conversations/src/main/kotlin/de/tum/informatics/www1/artemis/native_app/feature/metis/manageconversations/ui/common/ChannelIcons.kt delete mode 100644 feature/metis/manage-conversations/src/main/kotlin/de/tum/informatics/www1/artemis/native_app/feature/metis/manageconversations/ui/common/CommunicationColors.kt diff --git a/feature/metis/manage-conversations/src/main/kotlin/de/tum/informatics/www1/artemis/native_app/feature/metis/manageconversations/ui/common/ChannelIcons.kt b/feature/metis/manage-conversations/src/main/kotlin/de/tum/informatics/www1/artemis/native_app/feature/metis/manageconversations/ui/common/ChannelIcons.kt deleted file mode 100644 index 5fc453a61..000000000 --- a/feature/metis/manage-conversations/src/main/kotlin/de/tum/informatics/www1/artemis/native_app/feature/metis/manageconversations/ui/common/ChannelIcons.kt +++ /dev/null @@ -1,70 +0,0 @@ -package de.tum.informatics.www1.artemis.native_app.feature.metis.manageconversations.ui.common - -import androidx.compose.foundation.background -import androidx.compose.foundation.layout.Box -import androidx.compose.foundation.layout.Row -import androidx.compose.foundation.layout.size -import androidx.compose.foundation.shape.CircleShape -import androidx.compose.material.icons.Icons -import androidx.compose.material.icons.filled.Archive -import androidx.compose.material.icons.filled.Campaign -import androidx.compose.material.icons.filled.Lock -import androidx.compose.material.icons.filled.Numbers -import androidx.compose.material3.Icon -import androidx.compose.runtime.Composable -import androidx.compose.ui.Alignment -import androidx.compose.ui.Modifier -import androidx.compose.ui.draw.clip -import androidx.compose.ui.unit.dp -import de.tum.informatics.www1.artemis.native_app.feature.metis.shared.content.dto.conversation.ChannelChat - - -@Composable -internal fun ChannelIcons(channelChat: ChannelChat, hasUnreadMessages: Boolean = false) { - Box { - if (channelChat.isArchived || channelChat.isAnnouncementChannel) { - ExtraChannelIcons(channelChat) - } else { - PrimaryChannelIcon(channelChat) - } - - if (hasUnreadMessages) { - Box( - modifier = Modifier - .size(8.dp) - .clip(CircleShape) - .background(CommunicationColors.ArtemisBlue) - .align(Alignment.TopEnd) - ) - } - } -} - -@Composable -internal fun ExtraChannelIcons(channelChat: ChannelChat) { - Row { - if (channelChat.isArchived) { - Icon( - imageVector = Icons.Default.Archive, - contentDescription = null - ) - } - - if (channelChat.isAnnouncementChannel) { - Icon( - imageVector = Icons.Default.Campaign, - contentDescription = null - ) - } - } - -} - -@Composable -internal fun PrimaryChannelIcon(channelChat: ChannelChat) { - Icon( - imageVector = if (channelChat.isPublic) Icons.Default.Numbers else Icons.Default.Lock, - contentDescription = null - ) -} - diff --git a/feature/metis/manage-conversations/src/main/kotlin/de/tum/informatics/www1/artemis/native_app/feature/metis/manageconversations/ui/common/CommunicationColors.kt b/feature/metis/manage-conversations/src/main/kotlin/de/tum/informatics/www1/artemis/native_app/feature/metis/manageconversations/ui/common/CommunicationColors.kt deleted file mode 100644 index 856249f76..000000000 --- a/feature/metis/manage-conversations/src/main/kotlin/de/tum/informatics/www1/artemis/native_app/feature/metis/manageconversations/ui/common/CommunicationColors.kt +++ /dev/null @@ -1,14 +0,0 @@ -package de.tum.informatics.www1.artemis.native_app.feature.metis.manageconversations.ui.common - -import androidx.compose.foundation.isSystemInDarkTheme -import androidx.compose.runtime.Composable -import androidx.compose.ui.graphics.Color - -object CommunicationColors { - private val ArtemisMainBlue = Color(0xFF3E8ACC) - private val ArtemisLightBlue = Color(0xFFB5CEE4) - - val ArtemisBlue: Color - @Composable - get() = if (isSystemInDarkTheme()) ArtemisLightBlue else ArtemisMainBlue -} diff --git a/feature/metis/manage-conversations/src/main/kotlin/de/tum/informatics/www1/artemis/native_app/feature/metis/manageconversations/ui/conversation/overview/ConversationList.kt b/feature/metis/manage-conversations/src/main/kotlin/de/tum/informatics/www1/artemis/native_app/feature/metis/manageconversations/ui/conversation/overview/ConversationList.kt index 4e01323d1..93b6aab92 100644 --- a/feature/metis/manage-conversations/src/main/kotlin/de/tum/informatics/www1/artemis/native_app/feature/metis/manageconversations/ui/conversation/overview/ConversationList.kt +++ b/feature/metis/manage-conversations/src/main/kotlin/de/tum/informatics/www1/artemis/native_app/feature/metis/manageconversations/ui/conversation/overview/ConversationList.kt @@ -34,7 +34,6 @@ import androidx.compose.material.icons.filled.Visibility import androidx.compose.material.icons.filled.VisibilityOff import androidx.compose.material3.DropdownMenu import androidx.compose.material3.DropdownMenuItem -import androidx.compose.material3.HorizontalDivider import androidx.compose.material3.Icon import androidx.compose.material3.IconButton import androidx.compose.material3.ListItem @@ -51,6 +50,7 @@ import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.platform.testTag import androidx.compose.ui.res.stringResource +import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.unit.DpOffset import androidx.compose.ui.unit.dp import de.tum.informatics.www1.artemis.native_app.feature.metis.manageconversations.ConversationCollections @@ -218,8 +218,6 @@ private fun LazyListScope.conversationSectionHeader( .fillMaxWidth() .testTag(key) ) { - HorizontalDivider() - Row( modifier = Modifier .fillMaxWidth() @@ -238,7 +236,7 @@ private fun LazyListScope.conversationSectionHeader( .weight(1f) .padding(start = 8.dp), text = stringResource(id = text), - style = MaterialTheme.typography.titleSmall + style = MaterialTheme.typography.titleMedium.copy(fontWeight = FontWeight.Bold) ) } @@ -249,12 +247,11 @@ private fun LazyListScope.conversationSectionHeader( Icon( imageVector = if (isExpanded) Icons.Default.ArrowDropDown else Icons.AutoMirrored.Filled.ArrowRight, contentDescription = null, - modifier = Modifier.size(32.dp) + modifier = Modifier.size(32.dp), + tint = MaterialTheme.colorScheme.primaryContainer ) } } - - HorizontalDivider() } } } @@ -331,6 +328,7 @@ private fun ConversationListItem( channelName.removeSectionPrefix() } } + is GroupChat, is OneToOneChat -> { val humanReadableTitle = conversation.humanReadableName if (showPrefix) { @@ -339,37 +337,46 @@ private fun ConversationListItem( humanReadableTitle.removeSectionPrefix() } } + else -> conversation.humanReadableName } - Box(modifier = modifier) { + Box(modifier = modifier.padding(horizontal = 16.dp)) { ListItem( - modifier = Modifier.clickable(onClick = onNavigateToConversation), + modifier = Modifier + .clickable(onClick = onNavigateToConversation) + .padding(start = 8.dp), leadingContent = { ConversationIcon( conversation = conversation, - clientId = clientId + clientId = clientId, + hasUnreadMessages = unreadMessagesCount > 0 ) }, headlineContent = { - Text( - text = displayName, - maxLines = 1, - color = headlineColor - ) + Row(horizontalArrangement = Arrangement.spacedBy(16.dp)) { + Text( + text = displayName, + maxLines = 1, + color = headlineColor, + style = MaterialTheme.typography.bodyLarge.copy( + fontWeight = if (unreadMessagesCount > 0) FontWeight.Bold else FontWeight.Normal + ) + ) + } }, trailingContent = { UnreadMessages(unreadMessagesCount = unreadMessagesCount) } ) - IconButton( - modifier = Modifier - .align(Alignment.CenterEnd) - .testTag(tagForConversationOptions(itemBaseTag)), - onClick = { isContextDialogShown = true } - ) { - Icon(imageVector = Icons.Default.MoreHoriz, contentDescription = null) + Box(modifier = Modifier.align(Alignment.CenterEnd)) { + IconButton( + modifier = Modifier.testTag(tagForConversationOptions(itemBaseTag)), + onClick = { isContextDialogShown = true } + ) { + Icon(imageVector = Icons.Default.MoreHoriz, contentDescription = null) + } } ConversationListItemDropdownMenu( @@ -470,7 +477,7 @@ private fun UnreadMessages(modifier: Modifier = Modifier, unreadMessagesCount: L if (unreadMessagesCount > 0) { Box( modifier = modifier - .padding(end = 24.dp) + .padding(end = 32.dp) .size(24.dp) .aspectRatio(1f) .background( diff --git a/feature/metis/shared/src/main/kotlin/de/tum/informatics/www1/artemis/native_app/feature/metis/shared/ui/ConversationIcon.kt b/feature/metis/shared/src/main/kotlin/de/tum/informatics/www1/artemis/native_app/feature/metis/shared/ui/ConversationIcon.kt index a4396300b..5783fb663 100644 --- a/feature/metis/shared/src/main/kotlin/de/tum/informatics/www1/artemis/native_app/feature/metis/shared/ui/ConversationIcon.kt +++ b/feature/metis/shared/src/main/kotlin/de/tum/informatics/www1/artemis/native_app/feature/metis/shared/ui/ConversationIcon.kt @@ -1,5 +1,9 @@ package de.tum.informatics.www1.artemis.native_app.feature.metis.shared.ui +import androidx.compose.foundation.background +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.size +import androidx.compose.foundation.shape.CircleShape import androidx.compose.material.icons.Icons import androidx.compose.material.icons.filled.Archive import androidx.compose.material.icons.filled.Campaign @@ -7,9 +11,13 @@ import androidx.compose.material.icons.filled.Groups2 import androidx.compose.material.icons.filled.Lock import androidx.compose.material.icons.filled.Numbers import androidx.compose.material3.Icon +import androidx.compose.material3.MaterialTheme import androidx.compose.runtime.Composable +import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.clip import androidx.compose.ui.graphics.vector.ImageVector +import androidx.compose.ui.unit.dp import de.tum.informatics.www1.artemis.native_app.feature.metis.shared.content.dto.conversation.ChannelChat import de.tum.informatics.www1.artemis.native_app.feature.metis.shared.content.dto.conversation.Conversation import de.tum.informatics.www1.artemis.native_app.feature.metis.shared.content.dto.conversation.GroupChat @@ -23,16 +31,24 @@ fun ConversationIcon( modifier: Modifier = Modifier, conversation: Conversation, clientId: Long, + hasUnreadMessages: Boolean = false, showDialogOnOneToOneChatClick: Boolean = false ) { - when(conversation) { - is ChannelChat -> ChannelChatIcon(modifier, conversation) - is GroupChat -> GroupChatIcon(modifier) - is OneToOneChat -> OneToOneChatIcon(modifier, conversation, clientId, showDialogOnOneToOneChatClick) + Box { + when (conversation) { + is ChannelChat -> ChannelChatIcon(modifier, conversation) + is GroupChat -> GroupChatIcon(modifier) + is OneToOneChat -> OneToOneChatIcon(modifier, conversation, clientId, showDialogOnOneToOneChatClick) + } + + if (hasUnreadMessages) { + UnreadMessagesIndicator( + modifier = Modifier.align(Alignment.TopEnd) + ) + } } } - @Composable fun ChannelChatIcon( modifier: Modifier = Modifier, @@ -87,3 +103,13 @@ fun OneToOneChatIcon( ) } } + +@Composable +fun UnreadMessagesIndicator(modifier: Modifier = Modifier) { + Box( + modifier = modifier + .size(8.dp) + .clip(CircleShape) + .background(MaterialTheme.colorScheme.primaryContainer) + ) +} \ No newline at end of file