From a0a45490458c9d67a54897a1dcec9b2b6e8ba159 Mon Sep 17 00:00:00 2001
From: Evgeny Poberezkin <2769109+epoberezkin@users.noreply.github.com>
Date: Tue, 22 Feb 2022 07:46:42 +0000
Subject: [PATCH] android: improve chat, chat info, console (#344)
* bigger fonts, text entry layout
* resize scroll area when keyboard appears; automatically scroll on new messages
* fix message entry in dark mode
* imporove console layout
* fix chat info with dark mode
* fix typo
* clean up
* remove unused time formatter
---
apps/android/.idea/codeStyles/Project.xml | 12 +--
apps/android/app/build.gradle | 3 +-
apps/android/app/src/main/AndroidManifest.xml | 1 +
.../java/chat/simplex/app/MainActivity.kt | 3 +
.../java/chat/simplex/app/model/SimpleXAPI.kt | 4 +-
.../java/chat/simplex/app/ui/theme/Theme.kt | 8 +-
.../java/chat/simplex/app/ui/theme/Type.kt | 10 +-
.../chat/simplex/app/views/TerminalView.kt | 99 ++++++++++++++-----
.../simplex/app/views/chat/ChatInfoView.kt | 6 ++
.../chat/simplex/app/views/chat/ChatView.kt | 59 ++++++-----
.../simplex/app/views/chat/SendMsgView.kt | 88 +++++++++++------
.../app/views/chatlist/ChatPreviewView.kt | 49 ++++++---
.../app/views/helpers/ChatInfoImage.kt | 8 +-
13 files changed, 234 insertions(+), 116 deletions(-)
diff --git a/apps/android/.idea/codeStyles/Project.xml b/apps/android/.idea/codeStyles/Project.xml
index 5d7a0c0f3e..1901f77e30 100644
--- a/apps/android/.idea/codeStyles/Project.xml
+++ b/apps/android/.idea/codeStyles/Project.xml
@@ -3,13 +3,8 @@
-
-
-
-
-
-
+
@@ -125,14 +120,11 @@
+
-
-
-
-
diff --git a/apps/android/app/build.gradle b/apps/android/app/build.gradle
index b5dc59627c..940748b83f 100644
--- a/apps/android/app/build.gradle
+++ b/apps/android/app/build.gradle
@@ -71,6 +71,7 @@ dependencies {
implementation 'org.jetbrains.kotlinx:kotlinx-serialization-json:1.3.2'
implementation "androidx.compose.material:material-icons-extended:$compose_version"
implementation "androidx.navigation:navigation-compose:2.4.1"
+ implementation "com.google.accompanist:accompanist-insets:0.23.0"
def camerax_version = "1.1.0-beta01"
implementation "androidx.camera:camera-core:${camerax_version}"
@@ -81,7 +82,7 @@ dependencies {
implementation 'com.google.zxing:core:3.4.0'
implementation 'com.google.mlkit:barcode-scanning:17.0.2'
//Camera Permission
- implementation "com.google.accompanist:accompanist-permissions:0.19.0"
+ implementation "com.google.accompanist:accompanist-permissions:0.23.0"
testImplementation 'junit:junit:4.13.2'
androidTestImplementation 'androidx.test.ext:junit:1.1.3'
diff --git a/apps/android/app/src/main/AndroidManifest.xml b/apps/android/app/src/main/AndroidManifest.xml
index 4df768a83c..af887b7f75 100644
--- a/apps/android/app/src/main/AndroidManifest.xml
+++ b/apps/android/app/src/main/AndroidManifest.xml
@@ -20,6 +20,7 @@
android:name=".MainActivity"
android:exported="true"
android:label="@string/app_name"
+ android:windowSoftInputMode="adjustResize"
android:theme="@style/Theme.SimpleX">
diff --git a/apps/android/app/src/main/java/chat/simplex/app/MainActivity.kt b/apps/android/app/src/main/java/chat/simplex/app/MainActivity.kt
index f00c39610c..083405159b 100644
--- a/apps/android/app/src/main/java/chat/simplex/app/MainActivity.kt
+++ b/apps/android/app/src/main/java/chat/simplex/app/MainActivity.kt
@@ -23,10 +23,12 @@ import chat.simplex.app.views.helpers.withApi
import chat.simplex.app.views.newchat.*
import chat.simplex.app.views.usersettings.SettingsView
import chat.simplex.app.views.usersettings.UserProfileView
+import com.google.accompanist.insets.ExperimentalAnimatedInsets
import com.google.accompanist.permissions.ExperimentalPermissionsApi
import kotlinx.coroutines.DelicateCoroutinesApi
@DelicateCoroutinesApi
+@ExperimentalAnimatedInsets
@ExperimentalPermissionsApi
@ExperimentalMaterialApi
class MainActivity: ComponentActivity() {
@@ -60,6 +62,7 @@ fun MainPage(chatModel: ChatModel, nav: NavController) {
}
}
+@ExperimentalAnimatedInsets
@DelicateCoroutinesApi
@ExperimentalPermissionsApi
@ExperimentalMaterialApi
diff --git a/apps/android/app/src/main/java/chat/simplex/app/model/SimpleXAPI.kt b/apps/android/app/src/main/java/chat/simplex/app/model/SimpleXAPI.kt
index 26fc56e069..a5b5a0e9a9 100644
--- a/apps/android/app/src/main/java/chat/simplex/app/model/SimpleXAPI.kt
+++ b/apps/android/app/src/main/java/chat/simplex/app/model/SimpleXAPI.kt
@@ -4,10 +4,10 @@ import android.util.Log
import androidx.compose.runtime.mutableStateOf
import chat.simplex.app.*
import kotlinx.coroutines.*
+import kotlinx.datetime.*
import kotlinx.serialization.*
import kotlinx.serialization.json.Json
import kotlinx.serialization.json.jsonObject
-import java.util.*
import kotlin.concurrent.thread
typealias ChatCtrl = Long
@@ -481,7 +481,7 @@ sealed class CR {
abstract class TerminalItem {
abstract val id: Long
- val date = Date()
+ val date: Instant = Clock.System.now()
abstract val label: String
abstract val details: String
diff --git a/apps/android/app/src/main/java/chat/simplex/app/ui/theme/Theme.kt b/apps/android/app/src/main/java/chat/simplex/app/ui/theme/Theme.kt
index 26669f83a0..5ec0745e02 100644
--- a/apps/android/app/src/main/java/chat/simplex/app/ui/theme/Theme.kt
+++ b/apps/android/app/src/main/java/chat/simplex/app/ui/theme/Theme.kt
@@ -9,8 +9,8 @@ private val DarkColorPalette = darkColors(
primary = SimplexBlue,
primaryVariant = SimplexGreen,
secondary = DarkGray,
- background = Color.Black,
- surface = Color.Black
+// background = Color.Black,
+// surface = Color.Black
/*
background: Color = Color(0xFF121212),
surface: Color = Color(0xFF121212),
@@ -27,8 +27,8 @@ private val LightColorPalette = lightColors(
primary = SimplexBlue,
primaryVariant = SimplexGreen,
secondary = LightGray,
- background = Color.White,
- surface = Color.White
+// background = Color.White,
+// surface = Color.White
/* Other default colors to override
surface = Color.White,
onPrimary = Color.White,
diff --git a/apps/android/app/src/main/java/chat/simplex/app/ui/theme/Type.kt b/apps/android/app/src/main/java/chat/simplex/app/ui/theme/Type.kt
index 10408878a6..e60d0eee08 100644
--- a/apps/android/app/src/main/java/chat/simplex/app/ui/theme/Type.kt
+++ b/apps/android/app/src/main/java/chat/simplex/app/ui/theme/Type.kt
@@ -1,5 +1,6 @@
package chat.simplex.app.ui.theme
+import androidx.compose.material.MaterialTheme
import androidx.compose.material.Typography
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontFamily
@@ -18,15 +19,20 @@ val Typography = Typography(
fontWeight = FontWeight.Normal,
fontSize = 24.sp
),
+ h3 = TextStyle(
+ fontFamily = FontFamily.Default,
+ fontWeight = FontWeight.Normal,
+ fontSize = 20.sp
+ ),
body1 = TextStyle(
fontFamily = FontFamily.Default,
fontWeight = FontWeight.Normal,
- fontSize = 16.sp
+ fontSize = 18.sp
),
body2 = TextStyle(
fontFamily = FontFamily.Default,
fontWeight = FontWeight.Normal,
- fontSize = 14.sp
+ fontSize = 16.sp
),
button = TextStyle(
fontFamily = FontFamily.Default,
diff --git a/apps/android/app/src/main/java/chat/simplex/app/views/TerminalView.kt b/apps/android/app/src/main/java/chat/simplex/app/views/TerminalView.kt
index 8dfdd66316..fa40d11e63 100644
--- a/apps/android/app/src/main/java/chat/simplex/app/views/TerminalView.kt
+++ b/apps/android/app/src/main/java/chat/simplex/app/views/TerminalView.kt
@@ -1,49 +1,81 @@
package chat.simplex.app.views
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.lazy.LazyColumn
-import androidx.compose.foundation.lazy.items
-import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.*
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.lazy.*
import androidx.compose.foundation.text.ClickableText
import androidx.compose.foundation.text.selection.SelectionContainer
-import androidx.compose.foundation.verticalScroll
-import androidx.compose.material.Button
-import androidx.compose.material.Text
-import androidx.compose.runtime.Composable
+import androidx.compose.material.*
+import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.AnnotatedString
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontFamily
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
import androidx.navigation.NavController
import chat.simplex.app.model.*
-import chat.simplex.app.views.chat.SendMsgView
+import chat.simplex.app.ui.theme.SimpleXTheme
+import chat.simplex.app.views.chat.*
+import chat.simplex.app.views.chat.item.ChatItemView
+import chat.simplex.app.views.helpers.CloseSheetBar
import chat.simplex.app.views.helpers.withApi
+import com.google.accompanist.insets.ProvideWindowInsets
+import com.google.accompanist.insets.navigationBarsWithImePadding
import kotlinx.coroutines.DelicateCoroutinesApi
+import kotlinx.coroutines.launch
+import java.time.format.DateTimeFormatter
@DelicateCoroutinesApi
@Composable
-fun TerminalView(chatModel: ChatModel, navController: NavController) {
- Column {
- Button(onClick = { navController.popBackStack() }) {
- Text("Back")
+fun TerminalView(chatModel: ChatModel, nav: NavController) {
+ TerminalLayout(chatModel.terminalItems, nav::popBackStack, nav::navigate) { cmd ->
+ withApi {
+ // show "in progress"
+ chatModel.controller.sendCmd(CC.Console(cmd))
+ // hide "in progress"
}
- TerminalLog(chatModel.terminalItems, navController)
- SendMsgView(sendMessage = { cmd ->
- withApi {
- // show "in progress"
- chatModel.controller.sendCmd(CC.Console(cmd))
- // hide "in progress"
- }
- })
}
}
@Composable
-fun TerminalLog(terminalItems: List, navController: NavController) {
- LazyColumn {
+fun TerminalLayout(terminalItems: List , close: () -> Unit, navigate: (String) -> Unit,
+ sendCommand: (String) -> Unit) {
+ ProvideWindowInsets(windowInsetsAnimationsEnabled = true) {
+ Scaffold(
+ topBar = { CloseSheetBar(close) },
+ bottomBar = { SendMsgView(sendCommand) },
+ modifier = Modifier.navigationBarsWithImePadding()
+ ) { contentPadding ->
+ Box(
+ modifier = Modifier
+ .padding(contentPadding)
+ .fillMaxWidth()
+ .background(MaterialTheme.colors.background)
+ ) {
+ TerminalLog(terminalItems, navigate)
+ }
+ }
+ }
+}
+
+@Composable
+fun TerminalLog(terminalItems: List, navigate: (String) -> Unit) {
+ val listState = rememberLazyListState()
+ val scope = rememberCoroutineScope()
+ LazyColumn(state = listState) {
items(terminalItems) { item ->
- ClickableText(
- AnnotatedString(item.label),
- onClick = { navController.navigate("details/${item.id}") }
- )
+ Text("${item.date.toString().subSequence(11, 19)} ${item.label}",
+ style = TextStyle(fontFamily = FontFamily.Monospace, fontSize = 18.sp, color = MaterialTheme.colors.primary),
+ modifier = Modifier.padding(horizontal = 8.dp, vertical = 4.dp)
+ .clickable { navigate("details/${item.id}") })
+ }
+ val len = terminalItems.count()
+ if (len > 1) {
+ scope.launch {
+ listState.animateScrollToItem(len - 1)
+ }
}
}
}
@@ -61,3 +93,16 @@ fun DetailView(identifier: Long, terminalItems: List, navControlle
}
}
}
+
+@Preview(showBackground = true)
+@Composable
+fun PreviewTerminalLayout() {
+ SimpleXTheme {
+ TerminalLayout(
+ terminalItems = TerminalItem.sampleData,
+ close = {},
+ navigate = {},
+ sendCommand = {}
+ )
+ }
+}
diff --git a/apps/android/app/src/main/java/chat/simplex/app/views/chat/ChatInfoView.kt b/apps/android/app/src/main/java/chat/simplex/app/views/chat/ChatInfoView.kt
index bb9036b428..4f1dc1b823 100644
--- a/apps/android/app/src/main/java/chat/simplex/app/views/chat/ChatInfoView.kt
+++ b/apps/android/app/src/main/java/chat/simplex/app/views/chat/ChatInfoView.kt
@@ -1,5 +1,6 @@
package chat.simplex.app.views.chat
+import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
@@ -52,6 +53,7 @@ fun ChatInfoView(chatModel: ChatModel, nav: NavController) {
fun ChatInfoLayout(chat: Chat, close: () -> Unit, deleteContact: () -> Unit) {
Column(Modifier
.fillMaxSize()
+ .background(MaterialTheme.colors.background)
.padding(horizontal = 8.dp),
horizontalAlignment = Alignment.CenterHorizontally
) {
@@ -61,10 +63,12 @@ fun ChatInfoLayout(chat: Chat, close: () -> Unit, deleteContact: () -> Unit) {
val cInfo = chat.chatInfo
Text(
cInfo.displayName, style = MaterialTheme.typography.h1,
+ color = MaterialTheme.colors.onBackground,
modifier = Modifier.padding(top = 32.dp).padding(bottom = 8.dp)
)
Text(
cInfo.fullName, style = MaterialTheme.typography.h2,
+ color = MaterialTheme.colors.onBackground,
modifier = Modifier.padding(bottom = 16.dp)
)
@@ -75,12 +79,14 @@ fun ChatInfoLayout(chat: Chat, close: () -> Unit, deleteContact: () -> Unit) {
Text(
chat.serverInfo.networkStatus.statusString,
textAlign = TextAlign.Center,
+ color = MaterialTheme.colors.onBackground,
modifier = Modifier.padding(start = 8.dp)
)
}
Text(
chat.serverInfo.networkStatus.statusExplanation,
style = MaterialTheme.typography.body2,
+ color = MaterialTheme.colors.onBackground,
textAlign = TextAlign.Center,
modifier = Modifier.padding(top = 16.dp).padding(horizontal = 16.dp)
)
diff --git a/apps/android/app/src/main/java/chat/simplex/app/views/chat/ChatView.kt b/apps/android/app/src/main/java/chat/simplex/app/views/chat/ChatView.kt
index b2bb96331c..9db853c249 100644
--- a/apps/android/app/src/main/java/chat/simplex/app/views/chat/ChatView.kt
+++ b/apps/android/app/src/main/java/chat/simplex/app/views/chat/ChatView.kt
@@ -1,16 +1,13 @@
package chat.simplex.app.views.chat
-import androidx.compose.foundation.background
-import androidx.compose.foundation.clickable
+import androidx.compose.foundation.*
import androidx.compose.foundation.layout.*
-import androidx.compose.foundation.lazy.LazyColumn
-import androidx.compose.foundation.lazy.items
+import androidx.compose.foundation.lazy.*
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.outlined.ArrowBack
-import androidx.compose.runtime.Composable
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.Modifier
+import androidx.compose.runtime.*
+import androidx.compose.ui.*
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
@@ -21,9 +18,11 @@ import chat.simplex.app.ui.theme.SimpleXTheme
import chat.simplex.app.views.chat.item.ChatItemView
import chat.simplex.app.views.helpers.ChatInfoImage
import chat.simplex.app.views.helpers.withApi
-import kotlinx.coroutines.DelicateCoroutinesApi
+import com.google.accompanist.insets.*
+import kotlinx.coroutines.*
import kotlinx.datetime.Clock
+@ExperimentalAnimatedInsets
@DelicateCoroutinesApi
@Composable
fun ChatView(chatModel: ChatModel, nav: NavController) {
@@ -51,6 +50,8 @@ fun ChatView(chatModel: ChatModel, nav: NavController) {
}
}
+@DelicateCoroutinesApi
+@ExperimentalAnimatedInsets
@Composable
fun ChatLayout(
chat: Chat, chatItems: List,
@@ -58,26 +59,27 @@ fun ChatLayout(
info: () -> Unit,
sendMessage: (String) -> Unit
) {
- Scaffold(
- topBar = { ChatInfoToolbar(chat, back, info) },
- bottomBar = { SendMsgView(sendMessage) }
- ) { contentPadding ->
- Box(
- modifier = Modifier
- .padding(contentPadding)
- .fillMaxWidth()
- .background(MaterialTheme.colors.background)
- ) {
- ChatItemsList(chatItems)
+ ProvideWindowInsets(windowInsetsAnimationsEnabled = true) {
+ Scaffold(
+ topBar = { ChatInfoToolbar(chat, back, info) },
+ bottomBar = { SendMsgView(sendMessage) },
+ modifier = Modifier.navigationBarsWithImePadding()
+ ) { contentPadding ->
+ Box(
+ modifier = Modifier
+ .padding(contentPadding)
+ .fillMaxWidth()
+ .background(MaterialTheme.colors.background)
+ ) {
+ ChatItemsList(chatItems)
+ }
}
}
}
@Composable
fun ChatInfoToolbar(chat: Chat, back: () -> Unit, info: () -> Unit) {
- Box(Modifier
- .fillMaxWidth()
- .height(60.dp),
+ Box(Modifier.height(60.dp),
contentAlignment = Alignment.CenterStart
) {
Icon(
@@ -109,15 +111,26 @@ fun ChatInfoToolbar(chat: Chat, back: () -> Unit, info: () -> Unit) {
}
}
+@DelicateCoroutinesApi
+@ExperimentalAnimatedInsets
@Composable
fun ChatItemsList(chatItems: List) {
- LazyColumn {
+ val listState = rememberLazyListState()
+ val scope = rememberCoroutineScope()
+ LazyColumn(state = listState) {
items(chatItems) { cItem ->
ChatItemView(cItem)
}
+ val len = chatItems.count()
+ if (len > 1) {
+ scope.launch {
+ listState.animateScrollToItem(len - 1)
+ }
+ }
}
}
+@ExperimentalAnimatedInsets
@Preview(showBackground = true)
@Composable
fun PreviewChatLayout() {
diff --git a/apps/android/app/src/main/java/chat/simplex/app/views/chat/SendMsgView.kt b/apps/android/app/src/main/java/chat/simplex/app/views/chat/SendMsgView.kt
index 8c51172d82..e0504cc7cc 100644
--- a/apps/android/app/src/main/java/chat/simplex/app/views/chat/SendMsgView.kt
+++ b/apps/android/app/src/main/java/chat/simplex/app/views/chat/SendMsgView.kt
@@ -1,51 +1,81 @@
package chat.simplex.app.views.chat
-import androidx.compose.foundation.background
-import androidx.compose.foundation.clickable
+import androidx.compose.foundation.*
import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.text.BasicTextField
+import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.outlined.ArrowUpward
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.focus.FocusState
+import androidx.compose.ui.focus.onFocusChanged
import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.input.*
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
-import chat.simplex.app.ui.theme.SimpleXTheme
+import chat.simplex.app.ui.theme.*
@Composable
fun SendMsgView(sendMessage: (String) -> Unit) {
var cmd by remember { mutableStateOf("") }
- Box(
- modifier = Modifier.fillMaxWidth(),
- contentAlignment = Alignment.CenterEnd
- ) {
- TextField(
- value = cmd,
- onValueChange = { cmd = it },
- modifier = Modifier
- .height(60.dp)
- .fillMaxWidth()
- .padding(end = 40.dp)
- .background(MaterialTheme.colors.background)
- )
- val tint = if (cmd.isNotEmpty()) MaterialTheme.colors.primary else Color.Gray
- Icon(
- Icons.Outlined.ArrowUpward,
- "Send Message",
- tint = tint,
- modifier = Modifier
- .width(40.dp)
- .clickable {
- sendMessage(cmd)
- cmd = ""
+ BasicTextField(
+ value = cmd,
+ onValueChange = { cmd = it },
+ textStyle = MaterialTheme.typography.body1.copy(color = MaterialTheme.colors.onBackground),
+ maxLines = 16,
+ keyboardOptions = KeyboardOptions.Default.copy(
+ capitalization = KeyboardCapitalization.Sentences,
+ autoCorrect = true
+ ),
+ modifier = Modifier.padding(8.dp),
+ decorationBox = { innerTextField ->
+ Surface(
+ shape = RoundedCornerShape(18.dp),
+ border = BorderStroke(1.dp, MaterialTheme.colors.secondary)
+ ) {
+ Row(
+ Modifier.background(MaterialTheme.colors.background),
+ verticalAlignment = Alignment.Bottom
+ ) {
+ Box(
+ Modifier
+ .weight(1f)
+ .padding(horizontal = 12.dp)
+ .padding(top = 5.dp)
+ .padding(bottom = 7.dp)
+ ) {
+ innerTextField()
+ }
+ val color = if (cmd.isNotEmpty()) MaterialTheme.colors.primary else Color.Gray
+ Icon(
+ Icons.Outlined.ArrowUpward,
+ "Send Message",
+ tint = Color.White,
+ modifier = Modifier
+ .size(36.dp)
+ .padding(4.dp)
+ .clip(CircleShape)
+ .background(color)
+ .clickable {
+ if (cmd.isNotEmpty()) {
+ sendMessage(cmd)
+ cmd = ""
+ }
+ }
+ )
}
- )
- }
+ }
+ }
+ )
}
-@Preview
+@Preview(showBackground = true)
@Composable
fun PreviewSendMsgView() {
SimpleXTheme {
diff --git a/apps/android/app/src/main/java/chat/simplex/app/views/chatlist/ChatPreviewView.kt b/apps/android/app/src/main/java/chat/simplex/app/views/chatlist/ChatPreviewView.kt
index f48ddeba93..87b6b0815c 100644
--- a/apps/android/app/src/main/java/chat/simplex/app/views/chatlist/ChatPreviewView.kt
+++ b/apps/android/app/src/main/java/chat/simplex/app/views/chatlist/ChatPreviewView.kt
@@ -5,7 +5,9 @@ import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.material.*
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.text.font.FontWeight
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.tooling.preview.Preview
@@ -14,6 +16,7 @@ import chat.simplex.app.model.*
import chat.simplex.app.ui.theme.HighOrLowlight
import chat.simplex.app.ui.theme.SimpleXTheme
import chat.simplex.app.views.helpers.ChatInfoImage
+import kotlinx.datetime.Clock
@Composable
fun ChatPreviewView(chat: Chat, goToChat: () -> Unit) {
@@ -22,31 +25,44 @@ fun ChatPreviewView(chat: Chat, goToChat: () -> Unit) {
modifier = Modifier
.fillMaxWidth()
.clickable(onClick = goToChat)
- .height(80.dp)
+ .height(88.dp)
) {
Row(
modifier = Modifier
.fillMaxWidth()
- .padding(horizontal = 14.dp),
+ .padding(vertical = 8.dp)
+ .padding(start = 8.dp)
+ .padding(end = 12.dp),
+ verticalAlignment = Alignment.Top
) {
- Column(verticalArrangement = Arrangement.Center, modifier = Modifier.fillMaxHeight()) {
- ChatInfoImage(chat, size = 60.dp)
- }
- Spacer(modifier = Modifier.width(6.dp))
- Column(modifier = Modifier.padding(all = 8.dp)) {
- Row(horizontalArrangement = Arrangement.SpaceBetween, modifier = Modifier.fillMaxWidth()) {
- Text(chat.chatInfo.chatViewName, fontWeight = FontWeight.Bold)
- val ts = chat.chatItems.lastOrNull()?.timestampText ?: getTimestampText(chat.chatInfo.createdAt)
- Text(ts, color = HighOrLowlight, style = MaterialTheme.typography.body2)
- }
+ ChatInfoImage(chat, size = 72.dp)
+ Column(modifier = Modifier
+ .padding(horizontal = 8.dp)
+ .weight(1F)) {
+ Text(
+ chat.chatInfo.chatViewName,
+ maxLines = 1,
+ overflow = TextOverflow.Ellipsis,
+ style = MaterialTheme.typography.h3,
+ fontWeight = FontWeight.Bold
+ )
if (chat.chatItems.count() > 0) {
Text(
chat.chatItems.last().content.text,
maxLines = 2,
- overflow = TextOverflow.Ellipsis,
+ overflow = TextOverflow.Ellipsis
)
}
}
+ val ts = chat.chatItems.lastOrNull()?.timestampText ?: getTimestampText(chat.chatInfo.createdAt)
+ Column(Modifier.fillMaxHeight(),
+ verticalArrangement = Arrangement.Top) {
+ Text(ts,
+ color = HighOrLowlight,
+ style = MaterialTheme.typography.body2
+ )
+ // TODO unread count
+ }
}
}
}
@@ -58,7 +74,12 @@ fun ChatPreviewViewExample() {
ChatPreviewView(
chat = Chat(
chatInfo = ChatInfo.Direct.sampleData,
- chatItems = listOf(),
+ chatItems = listOf(ChatItem.getSampleData(
+ 1,
+ CIDirection.DirectSnd(),
+ Clock.System.now(),
+ "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
+ )),
chatStats = Chat.ChatStats()
),
goToChat = {}
diff --git a/apps/android/app/src/main/java/chat/simplex/app/views/helpers/ChatInfoImage.kt b/apps/android/app/src/main/java/chat/simplex/app/views/helpers/ChatInfoImage.kt
index 4bcd4352b8..27eac8842b 100644
--- a/apps/android/app/src/main/java/chat/simplex/app/views/helpers/ChatInfoImage.kt
+++ b/apps/android/app/src/main/java/chat/simplex/app/views/helpers/ChatInfoImage.kt
@@ -1,6 +1,7 @@
package chat.simplex.app.views.helpers
import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.Icon
import androidx.compose.material.MaterialTheme
import androidx.compose.material.icons.Icons
@@ -8,6 +9,8 @@ import androidx.compose.material.icons.filled.AccountCircle
import androidx.compose.material.icons.filled.SupervisedUserCircle
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.RectangleShape
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
@@ -24,10 +27,7 @@ fun ChatInfoImage(chat: Chat, size: Dp) {
Icon(icon,
contentDescription = "Avatar Placeholder",
tint = MaterialTheme.colors.secondary,
- modifier = Modifier.fillMaxSize(),
-// .clip(CircleShape)
-// .border(1.5.dp, MaterialTheme.colors.secondary, CircleShape)
-// .background(MaterialTheme.colors.secondary)
+ modifier = Modifier.fillMaxSize()
)
}
}