android: use IconButton (#346)

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

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)
         }
       }
     }

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)
+      )
+    }
   }
 }
 

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 {