From 0a6c03079cb74a483ecdf19168884fbd43503762 Mon Sep 17 00:00:00 2001 From: Evgeny Poberezkin <2769109+epoberezkin@users.noreply.github.com> Date: Tue, 22 Feb 2022 08:07:27 +0000 Subject: [PATCH] android: use IconButton (#346) --- .../chat/simplex/app/views/TerminalView.kt | 9 ++-- .../chat/simplex/app/views/chat/ChatView.kt | 39 +++++++++------- .../app/views/chatlist/ChatListView.kt | 46 +++++++++---------- .../app/views/helpers/CloseSheetBar.kt | 24 +++++----- 4 files changed, 60 insertions(+), 58 deletions(-) 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 fa40d11e63..09da357636 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 @@ -3,12 +3,11 @@ package chat.simplex.app.views 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.material.* -import androidx.compose.runtime.* +import androidx.compose.runtime.Composable +import androidx.compose.runtime.rememberCoroutineScope 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 @@ -17,15 +16,13 @@ import androidx.compose.ui.unit.sp import androidx.navigation.NavController import chat.simplex.app.model.* 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.chat.SendMsgView 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 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 9db853c249..c1215a5280 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,14 +1,18 @@ package chat.simplex.app.views.chat -import androidx.compose.foundation.* +import androidx.compose.foundation.background +import androidx.compose.foundation.clickable import androidx.compose.foundation.layout.* 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.* -import androidx.compose.ui.* +import androidx.compose.runtime.Composable +import androidx.compose.runtime.rememberCoroutineScope +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier 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.navigation.NavController @@ -19,7 +23,8 @@ import chat.simplex.app.views.chat.item.ChatItemView import chat.simplex.app.views.helpers.ChatInfoImage import chat.simplex.app.views.helpers.withApi import com.google.accompanist.insets.* -import kotlinx.coroutines.* +import kotlinx.coroutines.DelicateCoroutinesApi +import kotlinx.coroutines.launch import kotlinx.datetime.Clock @ExperimentalAnimatedInsets @@ -79,19 +84,19 @@ fun ChatLayout( @Composable fun ChatInfoToolbar(chat: Chat, back: () -> Unit, info: () -> Unit) { - Box(Modifier.height(60.dp), + Box(Modifier.height(60.dp).padding(horizontal = 8.dp), contentAlignment = Alignment.CenterStart ) { - Icon( - Icons.Outlined.ArrowBack, - "Back", - tint = MaterialTheme.colors.primary, - modifier = Modifier - .clickable(onClick = back) - .padding(start = 16.dp) - ) + IconButton(onClick = back) { + Icon( + Icons.Outlined.ArrowBack, + "Back", + tint = MaterialTheme.colors.primary, + modifier = Modifier.padding(10.dp) + ) + } Row(Modifier - .padding(horizontal = 40.dp) + .padding(horizontal = 68.dp) .fillMaxWidth() .clickable(onClick = info), horizontalArrangement = Arrangement.Center, @@ -102,9 +107,11 @@ fun ChatInfoToolbar(chat: Chat, back: () -> Unit, info: () -> Unit) { Column(Modifier.padding(start = 8.dp), horizontalAlignment = Alignment.CenterHorizontally ) { - Text(cInfo.displayName, fontWeight = FontWeight.Bold) + Text(cInfo.displayName, fontWeight = FontWeight.Bold, + maxLines = 1, overflow = TextOverflow.Ellipsis) if (cInfo.fullName != "" && cInfo.fullName != cInfo.displayName) { - Text(cInfo.fullName) + Text(cInfo.fullName, + maxLines = 1, overflow = TextOverflow.Ellipsis) } } } diff --git a/apps/android/app/src/main/java/chat/simplex/app/views/chatlist/ChatListView.kt b/apps/android/app/src/main/java/chat/simplex/app/views/chatlist/ChatListView.kt index 9b52c930ae..397932bea5 100644 --- a/apps/android/app/src/main/java/chat/simplex/app/views/chatlist/ChatListView.kt +++ b/apps/android/app/src/main/java/chat/simplex/app/views/chatlist/ChatListView.kt @@ -52,6 +52,7 @@ fun ChatListView(chatModel: ChatModel, nav: NavController) { val newChatCtrl = scaffoldController() BottomSheetScaffold( scaffoldState = newChatCtrl.state, + topBar = { ChatListToolbar(newChatCtrl, settings = { nav.navigate(Pages.Settings.route) }) }, sheetPeekHeight = 0.dp, sheetContent = { NewChatSheet(chatModel, newChatCtrl, nav) }, sheetShape = RoundedCornerShape(topStart = 18.dp, topEnd = 18.dp), @@ -63,15 +64,13 @@ fun ChatListView(chatModel: ChatModel, nav: NavController) { .fillMaxSize() .background(MaterialTheme.colors.background) ) { - ChatListToolbar( - newChatCtrl, - settings = { nav.navigate(Pages.Settings.route) }) ChatList(chatModel, nav) } if (newChatCtrl.state.bottomSheetState.isExpanded) { - Surface(Modifier - .fillMaxSize() - .clickable { newChatCtrl.collapse() }, + Surface( + Modifier + .fillMaxSize() + .clickable { newChatCtrl.collapse() }, color = Color.Black.copy(alpha = 0.12F) ) {} } @@ -87,29 +86,30 @@ fun ChatListToolbar(newChatSheetCtrl: ScaffoldController, settings: () -> Unit) verticalAlignment = Alignment.CenterVertically, modifier = Modifier .fillMaxWidth() - .height(40.dp)) { - Icon( - Icons.Outlined.Settings, - "Settings Cog", - tint = MaterialTheme.colors.primary, - modifier = Modifier - .padding(horizontal = 10.dp) - .clickable(onClick = settings) - ) + .padding(horizontal = 8.dp) + .height(60.dp)) { + IconButton(onClick = settings) { + Icon( + Icons.Outlined.Settings, + "Settings", + tint = MaterialTheme.colors.primary, + modifier = Modifier.padding(10.dp) + ) + } Text( "Your chats", color = MaterialTheme.colors.onBackground, fontWeight = FontWeight.Bold, modifier = Modifier.padding(5.dp) ) - Icon( - Icons.Outlined.PersonAdd, - "Add Contact", - tint = MaterialTheme.colors.primary, - modifier = Modifier - .padding(horizontal = 10.dp) - .clickable { newChatSheetCtrl.toggle() } - ) + IconButton(onClick = { newChatSheetCtrl.toggle() }) { + Icon( + Icons.Outlined.PersonAdd, + "Add Contact", + tint = MaterialTheme.colors.primary, + modifier = Modifier.padding(10.dp) + ) + } } } diff --git a/apps/android/app/src/main/java/chat/simplex/app/views/helpers/CloseSheetBar.kt b/apps/android/app/src/main/java/chat/simplex/app/views/helpers/CloseSheetBar.kt index 90199cd953..1946536b14 100644 --- a/apps/android/app/src/main/java/chat/simplex/app/views/helpers/CloseSheetBar.kt +++ b/apps/android/app/src/main/java/chat/simplex/app/views/helpers/CloseSheetBar.kt @@ -1,9 +1,7 @@ package chat.simplex.app.views.helpers -import androidx.compose.foundation.clickable import androidx.compose.foundation.layout.* -import androidx.compose.material.Icon -import androidx.compose.material.MaterialTheme +import androidx.compose.material.* import androidx.compose.material.icons.Icons import androidx.compose.material.icons.outlined.Close import androidx.compose.runtime.Composable @@ -18,22 +16,22 @@ fun CloseSheetBar(close: () -> Unit) { Row ( Modifier .fillMaxWidth() - .height(40.dp), + .height(60.dp), horizontalArrangement = Arrangement.End, verticalAlignment = Alignment.CenterVertically ) { - Icon( - Icons.Outlined.Close, - "Close button", - tint = MaterialTheme.colors.primary, - modifier = Modifier - .padding(vertical = 10.dp) - .clickable { close() } - ) + IconButton(onClick = close) { + Icon( + Icons.Outlined.Close, + "Close button", + tint = MaterialTheme.colors.primary, + modifier = Modifier.padding(10.dp) + ) + } } } -@Preview +@Preview(showBackground = true) @Composable fun PreviewCloseSheetBar() { SimpleXTheme {