Improve dialog screen by displaying more info

2022-10-23 20:01:24 +02:00 · 2022-10-23 20:01:24 +02:00 · 51ef704cf7
parent 17d7805654
commit 51ef704cf7
10 changed files with 161 additions and 17 deletions
--- a/app/src/main/java/dev/lonami/talaria/data/DialogRepository.kt
+++ b/app/src/main/java/dev/lonami/talaria/data/DialogRepository.kt
@ -2,6 +2,9 @@ package dev.lonami.talaria.data

 import dev.lonami.talaria.bindings.Native
 import dev.lonami.talaria.models.Dialog
+import dev.lonami.talaria.models.MessageAck
+import dev.lonami.talaria.models.MessagePreview
+import java.time.LocalDateTime

 interface DialogRepository {
    fun loadDialogs(): List<Dialog>;
@ -16,9 +19,14 @@ class NativeDialogRepository : DialogRepository {
        for (i in 0 until dialogCount) {
            dialogs.add(
                Dialog(
-                    Native.dialogTitle(dialogPtr, i),
-                    Native.dialogPacked(dialogPtr, i),
-                    false
+                    title = Native.dialogTitle(dialogPtr, i),
+                    lastMessage = MessagePreview(
+                        sender = "",
+                        text = Native.dialogPacked(dialogPtr, i),
+                        date = LocalDateTime.now(),
+                        ack = MessageAck.RECEIVED
+                    ),
+                    pinned = false
                )
            )
        }
@ -32,7 +40,35 @@ class MockDialogRepository : DialogRepository {
    override fun loadDialogs(): List<Dialog> {
        val dialogs = mutableListOf<Dialog>()
        for (i in 0 until 10) {
-            dialogs.add(Dialog("Sample Dialog $i", "Sample Message $i", i == 0))
+            dialogs.add(
+                Dialog(
+                    title = "Sample Dialog $i",
+                    lastMessage = if (i % 4 == 3) {
+                        null
+                    } else {
+                        MessagePreview(
+                            sender = if (i % 2 == 0) {
+                                "Sender A"
+                            } else {
+                                "Sender B"
+                            },
+                            text = if (i % 3 == 2) {
+                                "Very Long Sample Message $i, with a Lot of Text, which makes it hard to Preview"
+                            } else {
+                                "Sample Message $i"
+                            },
+                            date = LocalDateTime.now(),
+                            ack = when (i % 3) {
+                                0 -> MessageAck.RECEIVED
+                                1 -> MessageAck.SENT
+                                2 -> MessageAck.SEEN
+                                else -> throw RuntimeException()
+                            }
+                        )
+                    },
+                    pinned = i < 4
+                )
+            )
        }
        return dialogs
    }
--- a/app/src/main/java/dev/lonami/talaria/models/Dialog.kt
+++ b/app/src/main/java/dev/lonami/talaria/models/Dialog.kt
@ -1,3 +1,7 @@
 package dev.lonami.talaria.models

-data class Dialog(val title: String, val lastMessage: String, val pinned: Boolean)
+data class Dialog(
+    val title: String,
+    val lastMessage: MessagePreview?,
+    val pinned: Boolean
+)
--- a/app/src/main/java/dev/lonami/talaria/models/MessageAck.kt
+++ b/app/src/main/java/dev/lonami/talaria/models/MessageAck.kt
@ -0,0 +1,7 @@
+package dev.lonami.talaria.models
+
+enum class MessageAck {
+    RECEIVED,
+    SENT,
+    SEEN,
+}
--- a/app/src/main/java/dev/lonami/talaria/models/MessagePreview.kt
+++ b/app/src/main/java/dev/lonami/talaria/models/MessagePreview.kt
@ -0,0 +1,10 @@
+package dev.lonami.talaria.models
+
+import java.time.LocalDateTime
+
+data class MessagePreview(
+    val sender: String,
+    val text: String,
+    val date: LocalDateTime,
+    val ack: MessageAck
+)
--- a/app/src/main/java/dev/lonami/talaria/ui/screens/DialogScreen.kt
+++ b/app/src/main/java/dev/lonami/talaria/ui/screens/DialogScreen.kt
@ -2,48 +2,101 @@ package dev.lonami.talaria.ui.screens

 import androidx.compose.foundation.Image
 import androidx.compose.foundation.clickable
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.material.Card
-import androidx.compose.material.Switch
+import androidx.compose.material.Icon
+import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.lifecycle.viewmodel.compose.viewModel
 import dev.lonami.talaria.R
 import dev.lonami.talaria.data.MockDialogRepository
 import dev.lonami.talaria.models.Dialog
+import dev.lonami.talaria.models.MessageAck
 import dev.lonami.talaria.ui.state.DialogViewModel
 import dev.lonami.talaria.ui.theme.TalariaTheme
+import java.time.format.DateTimeFormatter
+import java.time.format.FormatStyle

@Composable
 fun DialogCard(dialog: Dialog, onDialogSelected: () -> Unit) {
    Card(
+        shape = MaterialTheme.shapes.large,
        modifier = Modifier
            .fillMaxWidth()
-            .padding(8.dp, 16.dp)
+            .padding(0.dp, 2.dp)
            .clickable(onClick = onDialogSelected)
    ) {
-        Row {
+        Row(modifier = Modifier.padding(4.dp)) {
            Image(
                painter = painterResource(R.drawable.ic_launcher_foreground),
                contentDescription = stringResource(R.string.profile_photo),
+                contentScale = ContentScale.Fit,
+                modifier = Modifier.height(48.dp),
            )
            Column(modifier = Modifier.weight(1.0f)) {
-                Text(dialog.title, fontWeight = FontWeight.Bold)
-                Text(dialog.lastMessage)
+                Text(
+                    dialog.title,
+                    fontWeight = FontWeight.SemiBold,
+                    maxLines = 1,
+                    overflow = TextOverflow.Ellipsis
+                )
+                if (dialog.lastMessage != null) {
+                    Text(
+                        stringResource(
+                            R.string.message_preview,
+                            dialog.lastMessage.sender,
+                            dialog.lastMessage.text
+                        ),
+                        maxLines = 1,
+                        overflow = TextOverflow.Ellipsis,
+                    )
+                }
+            }
+            Column {
+                if (dialog.lastMessage != null) {
+                    Row {
+                        when (dialog.lastMessage.ack) {
+                            MessageAck.RECEIVED -> {}
+                            MessageAck.SENT -> Icon(
+                                painterResource(R.drawable.sent),
+                                stringResource(R.string.sent)
+                            )
+                            MessageAck.SEEN -> Icon(
+                                painterResource(R.drawable.seen),
+                                stringResource(R.string.seen)
+                            )
+                        }
+                        Spacer(Modifier.width(8.dp))
+                        Text(
+                            dialog.lastMessage.date.format(
+                                DateTimeFormatter.ofLocalizedTime(
+                                    FormatStyle.SHORT
+                                )
+                            ),
+                        )
+                    }
+                }
+                if (dialog.pinned) {
+                    Icon(
+                        painterResource(R.drawable.tack),
+                        stringResource(R.string.pinned),
+                        modifier = Modifier.align(Alignment.End)
+                    )
+                }
            }
-            Switch(dialog.pinned, enabled = false, onCheckedChange = null)
        }
    }
 }
@ -53,7 +106,7 @@ fun DialogList(dialogs: List<Dialog>, onDialogSelected: (String) -> Unit) {
    LazyColumn {
        items(dialogs.size) {
            DialogCard(dialogs[it], onDialogSelected = {
-                onDialogSelected(dialogs[it].lastMessage)
+                onDialogSelected(dialogs[it].lastMessage!!.text)
            })
        }
    }
--- a/app/src/main/java/dev/lonami/talaria/ui/theme/Theme.kt
+++ b/app/src/main/java/dev/lonami/talaria/ui/theme/Theme.kt
@ -41,4 +41,4 @@ fun TalariaTheme(darkTheme: Boolean = isSystemInDarkTheme(), content: @Composabl
            shapes = Shapes,
            content = content
    )
-}
+}
--- a/app/src/main/res/drawable/seen.xml
+++ b/app/src/main/res/drawable/seen.xml
@ -0,0 +1,12 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+    <path
+        android:pathData="m11,16 l2,2 9,-9C23,8 22,7 21,8l-8,8 -1,-1z"
+        android:fillColor="@color/black" />
+    <path
+        android:pathData="m3,14 l4,4 9,-9C17,8 16,7 15,8L7,16 4,13C3,12 2,13 3,14Z"
+        android:fillColor="@color/black" />
+</vector>
--- a/app/src/main/res/drawable/sent.xml
+++ b/app/src/main/res/drawable/sent.xml
@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+    <path
+        android:pathData="m6,14 l4,4 9,-9C20,8 19,7 18,8L10,16 7,13C6,12 5,13 6,14Z"
+        android:fillColor="@color/black" />
+</vector>
--- a/app/src/main/res/drawable/tack.xml
+++ b/app/src/main/res/drawable/tack.xml
@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+    <path
+        android:pathData="m14,4 l-5,5 -6,1 5,5 -5,7 7,-5 5,5 1,-6 5,-5c1,-1 1,-1 0,-2L16,4C15,3 15,3 14,4Z"
+        android:fillColor="@color/black" />
+</vector>
--- a/app/src/main/res/values/strings.xml
+++ b/app/src/main/res/values/strings.xml
@ -15,4 +15,8 @@
    <string name="back_button">Back</string>
    <string name="dialog">All chats</string>
    <string name="chat">Messages</string>
+    <string name="pinned">Pinned</string>
+    <string name="sent">Sent</string>
+    <string name="seen">Seen</string>
+    <string name="message_preview"><em>%s</em>: %s</string>
 </resources>