Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improvement: Adjust conversation overview alignments and styling #227

Open
wants to merge 8 commits into
base: develop
Choose a base branch
from
Open

Improvement: Adjust conversation overview alignments and styling #227

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
bc4da2d
align channel structure and add bubble to channel icon for unread mes…
eylulnc Dec 14, 2024
a701742
remove unused imports
eylulnc Dec 14, 2024
3a3afa8
change section and channel style
eylulnc Dec 15, 2024
6db77a1
make conversation names bold for unread messages
eylulnc Dec 15, 2024
e572454
Merge branch 'develop' into bugfix/communication/change-channel-align…
eylulnc Dec 16, 2024
7353cfa
Merge branch 'develop' of https://github.com/ls1intum/artemis-android…
eylulnc Dec 22, 2024
e01267e
ensured branch stability after merging changes from develop
eylulnc Dec 22, 2024
c7a829f
Merge remote-tracking branch 'origin/bugfix/communication/change-chan…
eylulnc Dec 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 25 additions & 4 deletions ...atics/www1/artemis/native_app/feature/metis/manageconversations/ui/common/ChannelIcons.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,42 @@
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) {
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)
)
}
}
}

Expand Down
14 changes: 14 additions & 0 deletions ...ww1/artemis/native_app/feature/metis/manageconversations/ui/common/CommunicationColors.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think you should use MaterialTheme.colorScheme.primary here to keep it consistent with the other blue elements.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I also discussed this with Eylül on Tuesday, I will try to see whether we can get closer to the "original" artemis colors by updating the Material 3 theme with a different seed color and / or different settings. As soon as I know more (hopefully today, but latest tomorrow), I will reach out to @eylulnc and discuss how we can tackle this :)

Copy link
Collaborator

@FelberMartin FelberMartin Dec 19, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So I checked with the official Material theme builder and using the ArtemisMainBlue color as a seed color (for the current theme used in the app, we used a slightly different seed color). Depending on whether you use the "Color match" option, the results looks like this:

Without Color match

image

With Color match

image

With the color match option enabled, we get quite close to the seed color by using the PrimaryContainer color.

In my opinion, this might be a good compromise between bringing the mobile app appearance closer together, while still complying to the Android Material3 design guidelines and keeping an Android look and feel. What do you guys think about that @eylulnc, @julian-wls ?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it look great, colors are more vibrant and it feels closer to the iOS as well. Also as you said we are still match to the Material3.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this would be a great solution.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesome, then lets use this solution and primaryContainer as the color for this PR, I will create a PR in the meantime to update the Theme accordingly :D

private val ArtemisLightBlue = Color(0xFFB5CEE4)

val ArtemisBlue: Color
@Composable
get() = if (isSystemInDarkTheme()) ArtemisLightBlue else ArtemisMainBlue
}
95 changes: 56 additions & 39 deletions ...native_app/feature/metis/manageconversations/ui/conversation/overview/ConversationList.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -51,12 +50,13 @@ 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
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
Expand Down Expand Up @@ -217,7 +217,6 @@ private fun LazyListScope.conversationSectionHeader(
.fillMaxWidth()
.testTag(key)
) {
HorizontalDivider()

Row(
modifier = Modifier
Expand All @@ -237,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)
)
}

Expand All @@ -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()
}
}
}
Expand Down Expand Up @@ -338,19 +337,26 @@ 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)
Text(
text = displayName,
maxLines = 1,
color = headlineColor,
style = MaterialTheme.typography.bodyLarge.copy(
fontWeight = if (unreadMessagesCount > 0) FontWeight.Bold else FontWeight.Normal
)
)
}
},
trailingContent = {
Expand All @@ -361,11 +367,16 @@ private fun ConversationListItem(

is GroupChat -> {
ListItem(
modifier = Modifier.clickable(onClick = onNavigateToConversation),
modifier = Modifier
.clickable(onClick = onNavigateToConversation)
.padding(start = 8.dp),
headlineContent = {
Text(
displayName,
color = headlineColor
text = displayName,
color = headlineColor,
style = MaterialTheme.typography.bodyLarge.copy(
fontWeight = if (unreadMessagesCount > 0) FontWeight.Bold else FontWeight.Normal
)
)
},
leadingContent = {
Expand All @@ -379,11 +390,16 @@ private fun ConversationListItem(

is OneToOneChat -> {
ListItem(
modifier = Modifier.clickable(onClick = onNavigateToConversation),
modifier = Modifier
.clickable(onClick = onNavigateToConversation)
.padding(start = 8.dp),
headlineContent = {
Text(
displayName,
color = headlineColor
text = displayName,
color = headlineColor,
style = MaterialTheme.typography.bodyLarge.copy(
fontWeight = if (unreadMessagesCount > 0) FontWeight.Bold else FontWeight.Normal
)
)
},
trailingContent = {
Expand All @@ -393,27 +409,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,
Expand Down Expand Up @@ -500,18 +517,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
)
}
}
Expand Down
3 changes: 0 additions & 3 deletions ...pp/feature/metis/manageconversations/ui/conversation/overview/ConversationOverviewBody.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -151,8 +150,6 @@ fun ConversationOverviewBody(
onToggleHidden = viewModel::markConversationAsHidden,
onToggleMuted = viewModel::markConversationAsMuted,
trailingContent = {
item { HorizontalDivider() }

item(key = KEY_BUTTON_SHOW_COC) {
Box(
modifier = Modifier
Expand Down
Loading