Skip to content

Communication: Redesign chat & alignment with iOS #228

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

Merged
merged 18 commits into from
Jan 6, 2025
Merged

Communication: Redesign chat & alignment with iOS #228

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
61f0044
changed arrangement of items in post item and added PostItemViewJoine…
julian-wls Dec 16, 2024
389de55
added colors for role badges
julian-wls Dec 16, 2024
05476de
adjusted post header
julian-wls Dec 16, 2024
1d97c10
minor changes
julian-wls Dec 16, 2024
456321f
changed time formatting
julian-wls Dec 16, 2024
117ecf7
added reply icon
julian-wls Dec 16, 2024
7a22896
redesigned DateDivider
julian-wls Dec 16, 2024
49a3fe5
added emojiDialogButton to posts that already have reactions and pare…
julian-wls Dec 16, 2024
fc66b76
changed chat settings icon
julian-wls Dec 16, 2024
d5cc2a9
changed changed resolving label location and added date to answer posts
julian-wls Dec 17, 2024
415fba8
made adjustments and resolved merge conflicts
julian-wls Dec 20, 2024
5a48839
Merge branch 'develop' into general/communication/redesign-chat
julian-wls Jan 3, 2025
c8ef563
added DateFormats
julian-wls Jan 3, 2025
bb3ca21
Merge branch 'develop' into general/communication/redesign-chat
FelberMartin Jan 3, 2025
a9c4075
fixed postHeadlineHeight and added require statement to getRelativeTime
julian-wls Jan 4, 2025
0aca9f3
fixed background color for selected emoji chips
julian-wls Jan 4, 2025
8e47364
`Bugfix`: Fix author role changing when updating post (#266)
julian-wls Jan 4, 2025
a9e54d7
adjusted inner spacing for posts
julian-wls Jan 4, 2025
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
6 changes: 5 additions & 1 deletion core/ui/src/main/kotlin/de/tum/informatics/www1/artemis/native_app/core/ui/Spacings.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
}
16 changes: 16 additions & 0 deletions ...ui/src/main/kotlin/de/tum/informatics/www1/artemis/native_app/core/ui/date/DateFormats.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
))
}
19 changes: 14 additions & 5 deletions ...i/src/main/kotlin/de/tum/informatics/www1/artemis/native_app/core/ui/date/relativeTime.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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)

Expand All @@ -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(
Expand Down Expand Up @@ -81,4 +88,6 @@ fun getRelativeTime(
}

return flow.collectAsState(initial = "").value
}
}

fun Instant.format(f: DateFormat) = f.format(Date.from(this.toJavaInstant()))
29 changes: 26 additions & 3 deletions ...n/kotlin/de/tum/informatics/www1/artemis/native_app/core/ui/material/colors/PostColors.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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

Expand All @@ -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)
}
4 changes: 2 additions & 2 deletions ...atics/www1/artemis/native_app/feature/metis/conversation/ui/ConversationChatListScreen.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -215,7 +215,7 @@ fun ConversationChatListScreen(
}

IconButton(onClick = onNavigateToSettings) {
Icon(imageVector = Icons.Default.Settings, contentDescription = null)
Icon(imageVector = Icons.Outlined.Info, contentDescription = null)
}
}
}
Expand Down
25 changes: 17 additions & 8 deletions ...formatics/www1/artemis/native_app/feature/metis/conversation/ui/chatlist/MetisChatList.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -171,6 +171,7 @@ fun MetisChatList(
MetisPostListHandler(
modifier = Modifier
.fillMaxWidth()
.padding(horizontal = 8.dp)
.weight(1f),
serverUrl = serverUrl,
courseId = courseId,
Expand Down Expand Up @@ -249,7 +250,6 @@ private fun ChatList(
) {
LazyColumn(
modifier = modifier,
verticalArrangement = Arrangement.spacedBy(4.dp),
contentPadding = listContentPadding,
state = state,
reverseLayout = true
Expand Down Expand Up @@ -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

Expand Down Expand Up @@ -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,
Expand Down
Loading
Loading