Communication: Redesign chat & alignment with iOS (#228)

Co-authored-by: Martin Felber <[email protected]>
ls1intum · Jan 6, 2025 · 4b27cd1 · 4b27cd1
1 parent ac6c6e4
commit 4b27cd1
Show file tree

Hide file tree

Showing 14 changed files with 508 additions and 220 deletions.
diff --git a/core/ui/src/main/kotlin/de/tum/informatics/www1/artemis/native_app/core/ui/Spacings.kt b/core/ui/src/main/kotlin/de/tum/informatics/www1/artemis/native_app/core/ui/Spacings.kt
@@ -4,6 +4,10 @@ import androidx.compose.ui.unit.dp
 
 object Spacings {
     val ScreenHorizontalSpacing = 16.dp
-
+    val ScreenHorizontalInnerSpacing = 8.dp
     val FabContentBottomPadding = 80.dp
+
+    object Post {
+        val innerSpacing = 8.dp
+    }
 }
diff --git a/...ui/src/main/kotlin/de/tum/informatics/www1/artemis/native_app/core/ui/date/DateFormats.kt b/...ui/src/main/kotlin/de/tum/informatics/www1/artemis/native_app/core/ui/date/DateFormats.kt
@@ -0,0 +1,16 @@
+package de.tum.informatics.www1.artemis.native_app.core.ui.date
+
+import android.icu.text.DateFormat
+import android.icu.text.SimpleDateFormat
+
+enum class DateFormats(val format: DateFormat) {
+    DefaultDateAndTime(SimpleDateFormat.getDateTimeInstance(
+        SimpleDateFormat.MEDIUM,
+        SimpleDateFormat.SHORT
+    )),
+    OnlyTime(SimpleDateFormat.getTimeInstance(SimpleDateFormat.SHORT)),
+    EditTimestamp(SimpleDateFormat.getDateTimeInstance(
+        SimpleDateFormat.SHORT,
+        SimpleDateFormat.SHORT
+    ))
+}
diff --git a/...i/src/main/kotlin/de/tum/informatics/www1/artemis/native_app/core/ui/date/relativeTime.kt b/...i/src/main/kotlin/de/tum/informatics/www1/artemis/native_app/core/ui/date/relativeTime.kt
@@ -1,6 +1,6 @@
 package de.tum.informatics.www1.artemis.native_app.core.ui.date
 
-import android.icu.text.SimpleDateFormat
+import android.icu.text.DateFormat
 import android.text.format.DateUtils
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
@@ -27,8 +27,12 @@ fun getRelativeTime(
     to: Instant,
     clock: Clock = Clock.System,
     formatSeconds: Boolean = false,
-    showDate: Boolean = true
+    showDate: Boolean = true,
+    showDateAndTime: Boolean = false
 ): CharSequence {
+    val isShowDateParameterCombinationIllegal = showDateAndTime && !showDate
+    require(!isShowDateParameterCombinationIllegal)
+
     val timeDifferenceBelowOneMinuteString =
         stringResource(id = R.string.time_difference_under_one_minute)
 
@@ -41,8 +45,11 @@ fun getRelativeTime(
 
                 if (timeDifference >= 1.days && !showDate) {
                     emit(
-                        SimpleDateFormat.getTimeInstance(SimpleDateFormat.SHORT)
-                            .format(Date.from(to.toJavaInstant()))
+                        to.format(DateFormats.OnlyTime.format)
+                    )
+                } else if (timeDifference >= 1.days && showDateAndTime) {
+                    emit(
+                        to.format(DateFormats.DefaultDateAndTime.format)
                     )
                 } else if (formatSeconds || timeDifference >= 1.minutes) {
                     emit(
@@ -81,4 +88,6 @@ fun getRelativeTime(
     }
 
     return flow.collectAsState(initial = "").value
-}
+}
+
+fun Instant.format(f: DateFormat) = f.format(Date.from(this.toJavaInstant()))
diff --git a/...n/kotlin/de/tum/informatics/www1/artemis/native_app/core/ui/material/colors/PostColors.kt b/...n/kotlin/de/tum/informatics/www1/artemis/native_app/core/ui/material/colors/PostColors.kt
@@ -1,5 +1,7 @@
 package de.tum.informatics.www1.artemis.native_app.core.ui.material.colors
 
+import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.graphics.Color
 
@@ -8,12 +10,33 @@ object PostColors {
         val delete: Color
             @Composable get() = Color(0xffdc3545)
     }
+
+    object Roles {
+        val tutor: Color
+            @Composable get() = Color(0xFFFD7E14)
+        val student: Color
+            @Composable get() = Color(0xFF0C9EB6)
+        val instructor: Color
+            @Composable get() = Color(0xFFB60000)
+    }
+
+    object StatusBackground {
+        val resolving: Color
+            @Composable get() = Color(0xFF28A745).copy(alpha = 0.2f)
+        val pinned: Color
+            @Composable get() = Color(0xFFFFA500).copy(alpha = 0.25f)
+    }
+
+    object EmojiChipColors {
+        val background: Color
+            @Composable get() = if (isSystemInDarkTheme()) Color(0xFF282C30) else Color(0xFFD0D2D8)
+        val selectedBackgound: Color
+            @Composable get() = MaterialTheme.colorScheme.primaryContainer.copy(alpha = 0.25f)
+    }
+
     val editedHintText: Color
         @Composable get() = Color.Gray
 
     val unsentMessageText: Color
         @Composable get() = Color.Gray
-
-    val pinnedMessageBackground: Color
-        @Composable get() = Color(0xFFFFA500).copy(alpha = 0.25f)
 }
diff --git a/...atics/www1/artemis/native_app/feature/metis/conversation/ui/ConversationChatListScreen.kt b/...atics/www1/artemis/native_app/feature/metis/conversation/ui/ConversationChatListScreen.kt
@@ -16,7 +16,7 @@ import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.automirrored.filled.ArrowBack
 import androidx.compose.material.icons.filled.Search
-import androidx.compose.material.icons.filled.Settings
+import androidx.compose.material.icons.outlined.Info
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
@@ -215,7 +215,7 @@ fun ConversationChatListScreen(
                         }
 
                         IconButton(onClick = onNavigateToSettings) {
-                            Icon(imageVector = Icons.Default.Settings, contentDescription = null)
+                            Icon(imageVector = Icons.Outlined.Info, contentDescription = null)
                         }
                     }
                 }

diff --git a/...formatics/www1/artemis/native_app/feature/metis/conversation/ui/chatlist/MetisChatList.kt b/...formatics/www1/artemis/native_app/feature/metis/conversation/ui/chatlist/MetisChatList.kt
@@ -5,7 +5,6 @@ import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
-import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
@@ -38,6 +37,7 @@ import de.tum.informatics.www1.artemis.native_app.feature.metis.conversation.ui.
 import de.tum.informatics.www1.artemis.native_app.feature.metis.conversation.ui.post.DisplayPostOrder
 import de.tum.informatics.www1.artemis.native_app.feature.metis.conversation.ui.post.PostItemViewType
 import de.tum.informatics.www1.artemis.native_app.feature.metis.conversation.ui.post.PostWithBottomSheet
+import de.tum.informatics.www1.artemis.native_app.feature.metis.conversation.ui.post.determinePostItemViewJoinedType
 import de.tum.informatics.www1.artemis.native_app.feature.metis.conversation.ui.post.post_actions.PostActionFlags
 import de.tum.informatics.www1.artemis.native_app.feature.metis.conversation.ui.post.post_actions.rememberPostActions
 import de.tum.informatics.www1.artemis.native_app.feature.metis.conversation.ui.post.shouldDisplayHeader
@@ -171,6 +171,7 @@ fun MetisChatList(
             MetisPostListHandler(
                 modifier = Modifier
                     .fillMaxWidth()
+                    .padding(horizontal = 8.dp)
                     .weight(1f),
                 serverUrl = serverUrl,
                 courseId = courseId,
@@ -249,7 +250,6 @@ private fun ChatList(
 ) {
     LazyColumn(
         modifier = modifier,
-        verticalArrangement = Arrangement.spacedBy(4.dp),
         contentPadding = listContentPadding,
         state = state,
         reverseLayout = true
@@ -318,6 +318,18 @@ private fun ChatList(
                                 }
                             }
                         ),
+                        joinedItemType = determinePostItemViewJoinedType(
+                                index = index,
+                                post = post,
+                                postCount = posts.itemCount,
+                                order = DisplayPostOrder.REVERSED,
+                                getPost = { getPostIndex ->
+                                    when (val entry = posts.peek(getPostIndex)) {
+                                        is ChatListItem.PostChatListItem -> entry.post
+                                        else -> null
+                                    }
+                                }
+                            ),
                         onClick = {
                             val standalonePostId = post?.standalonePostId
 
@@ -400,13 +412,10 @@ private fun DateDivider(modifier: Modifier, date: LocalDate) {
         )
     }
 
-    Row(
-        modifier = modifier,
-        horizontalArrangement = Arrangement.spacedBy(4.dp),
-        verticalAlignment = Alignment.CenterVertically
+    Column(
+        modifier = modifier.padding(vertical = 8.dp),
+        verticalArrangement = Arrangement.spacedBy(4.dp)
     ) {
-        HorizontalDivider(modifier = Modifier.weight(1f))
-
         Text(
             text = dateAsString,
             style = MaterialTheme.typography.bodyMedium,