android: Replace "make connection" screen with two buttons (#1091)

apps/android/app/src/main/java/chat/simplex/app/views/chatlist/ChatListView.kt

@@ -14,7 +14,10 @@ import androidx.compose.runtime.*
 import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.Path
+import androidx.compose.ui.platform.LocalUriHandler
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.capitalize
 import androidx.compose.ui.text.font.FontWeight
@@ -22,11 +25,12 @@ import androidx.compose.ui.text.intl.Locale
 import androidx.compose.ui.unit.dp
 import chat.simplex.app.R
 import chat.simplex.app.model.*
+import chat.simplex.app.ui.theme.HighOrLowlight
 import chat.simplex.app.ui.theme.Indigo
 import chat.simplex.app.views.helpers.*
 import chat.simplex.app.views.newchat.NewChatSheet
-import chat.simplex.app.views.onboarding.MakeConnection
 import chat.simplex.app.views.usersettings.SettingsView
+import chat.simplex.app.views.usersettings.simplexTeamUri
 import kotlinx.coroutines.CoroutineScope
 import kotlinx.coroutines.launch
 
@@ -91,7 +95,7 @@ fun ChatListView(chatModel: ChatModel, setPerformLA: (Boolean) -> Unit, stopped:
         if (chatModel.chats.isNotEmpty()) {
           ChatList(chatModel, search = searchInList)
         } else {
-          MakeConnection(chatModel)
+          OnboardingButtons(scaffoldCtrl)
         }
       }
       if (scaffoldCtrl.expanded.value) {
@@ -106,6 +110,50 @@ fun ChatListView(chatModel: ChatModel, setPerformLA: (Boolean) -> Unit, stopped:
   }
 }
 
+@Composable
+private fun OnboardingButtons(scaffoldCtrl: ScaffoldController) {
+  Box {
+    Column(Modifier.fillMaxSize().padding(6.dp), horizontalAlignment = Alignment.End) {
+      val color = MaterialTheme.colors.primary
+      Canvas(modifier = Modifier.width(30.dp).height(10.dp), onDraw = {
+        val trianglePath = Path().apply {
+          moveTo(8.dp.toPx(), 0f)
+          lineTo(16.dp.toPx(), 10.dp.toPx())
+          lineTo(0f, 10.dp.toPx())
+          lineTo(8.dp.toPx(), 0f)
+        }
+        drawPath(
+          color = color,
+          path = trianglePath
+        )
+      })
+
+      ConnectButton(generalGetString(R.string.tap_to_start_new_chat)) {
+        scaffoldCtrl.toggleSheet()
+      }
+      Spacer(Modifier.height(10.dp))
+      val uriHandler = LocalUriHandler.current
+      ConnectButton(generalGetString(R.string.chat_with_developers)) {
+        uriHandler.openUri(simplexTeamUri)
+      }
+    }
+    Text(stringResource(R.string.you_have_no_chats), Modifier.align(Alignment.Center), color = HighOrLowlight)
+  }
+}
+
+@Composable
+private fun ConnectButton(text: String, onClick: () -> Unit) {
+  Box(
+    Modifier
+      .clip(RoundedCornerShape(16.dp))
+      .background(MaterialTheme.colors.primary)
+      .clickable { onClick() }
+      .padding(vertical = 10.dp, horizontal = 20.dp),
+  ) {
+    Text(text, color = Color.White)
+  }
+}
+
 @Composable
 fun ChatListToolbar(chatModel: ChatModel, scaffoldCtrl: ScaffoldController, stopped: Boolean, onSearchValueChanged: (String) -> Unit) {
   var showSearch by rememberSaveable { mutableStateOf(false) }
@@ -125,7 +173,7 @@ fun ChatListToolbar(chatModel: ChatModel, scaffoldCtrl: ScaffoldController, stop
     barButtons.add {
       IconButton(onClick = { scaffoldCtrl.toggleSheet() }) {
         Icon(
-          Icons.Outlined.AddCircle,
+          Icons.Outlined.Edit,
           stringResource(R.string.add_contact),
           tint = MaterialTheme.colors.primary,
         )
@@ -133,8 +181,12 @@ fun ChatListToolbar(chatModel: ChatModel, scaffoldCtrl: ScaffoldController, stop
     }
   } else {
     barButtons.add {
-      IconButton(onClick = { AlertManager.shared.showAlertMsg(generalGetString(R.string.chat_is_stopped_indication),
-        generalGetString(R.string.you_can_start_chat_via_setting_or_by_restarting_the_app)) }) {
+      IconButton(onClick = {
+        AlertManager.shared.showAlertMsg(
+          generalGetString(R.string.chat_is_stopped_indication),
+          generalGetString(R.string.you_can_start_chat_via_setting_or_by_restarting_the_app)
+        )
+      }) {
         Icon(
           Icons.Filled.Report,
           generalGetString(R.string.chat_is_stopped_indication),

apps/android/app/src/main/java/chat/simplex/app/views/onboarding/MakeConnection.kt

@@ -1,172 +0,0 @@
-package chat.simplex.app.views.onboarding
-
-import android.Manifest
-import android.content.res.Configuration
-import androidx.annotation.StringRes
-import androidx.compose.foundation.background
-import androidx.compose.foundation.clickable
-import androidx.compose.foundation.layout.*
-import androidx.compose.material.*
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.outlined.*
-import androidx.compose.runtime.Composable
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.vector.ImageVector
-import androidx.compose.ui.platform.LocalUriHandler
-import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.tooling.preview.Preview
-import androidx.compose.ui.unit.dp
-import chat.simplex.app.R
-import chat.simplex.app.model.ChatModel
-import chat.simplex.app.model.User
-import chat.simplex.app.ui.theme.SimpleButton
-import chat.simplex.app.ui.theme.SimpleXTheme
-import chat.simplex.app.views.helpers.*
-import chat.simplex.app.views.newchat.*
-import chat.simplex.app.views.usersettings.simplexTeamUri
-import com.google.accompanist.permissions.rememberPermissionState
-
-@Composable
-fun MakeConnection(chatModel: ChatModel) {
-  val cameraPermissionState = rememberPermissionState(permission = Manifest.permission.CAMERA)
-  MakeConnectionLayout(
-    chatModel.currentUser.value,
-    createLink = {
-      withApi {
-        //        show spinner
-        chatModel.connReqInvitation = chatModel.controller.apiAddContact()
-        //        hide spinner
-        if (chatModel.connReqInvitation != null) {
-          ModalManager.shared.showModal { AddContactView(chatModel) }
-        }
-      }
-    },
-    pasteLink = {
-      ModalManager.shared.showCustomModal { close -> PasteToConnectView(chatModel, close) }
-    },
-    scanCode = {
-      ModalManager.shared.showCustomModal { close -> ScanToConnectView(chatModel, close) }
-      cameraPermissionState.launchPermissionRequest()
-    },
-    about = {
-      chatModel.onboardingStage.value = OnboardingStage.Step1_SimpleXInfo
-    }
-  )
-}
-
-@Composable
-fun MakeConnectionLayout(
-  user: User?,
-  createLink: () -> Unit,
-  pasteLink: () -> Unit,
-  scanCode: () -> Unit,
-  about: () -> Unit
-) {
-  Surface {
-    Column(
-      Modifier
-        .fillMaxSize()
-        .background(color = MaterialTheme.colors.background)
-        .padding(20.dp)
-    ) {
-      Text(
-        if (user == null) stringResource(R.string.make_private_connection)
-        else String.format(stringResource(R.string.personal_welcome), user.profile.displayName),
-        style = MaterialTheme.typography.h1,
-        modifier = Modifier.padding(bottom = 8.dp)
-      )
-      Text(
-        annotatedStringResource(R.string.to_make_your_first_private_connection_choose),
-        modifier = Modifier.padding(bottom = 16.dp)
-      )
-      ActionRow(
-        Icons.Outlined.AddLink,
-        R.string.create_1_time_link_qr_code,
-        R.string.it_s_secure_to_share__only_one_contact_can_use_it,
-        createLink
-      )
-      ActionRow(
-        Icons.Outlined.Article,
-        R.string.paste_the_link_you_received,
-        R.string.or_open_the_link_in_the_browser_and_tap_open_in_mobile,
-        pasteLink
-      )
-      ActionRow(
-        Icons.Outlined.QrCode,
-        R.string.scan_contact_s_qr_code,
-        R.string.in_person_or_via_a_video_call__the_most_secure_way_to_connect,
-        scanCode
-      )
-      Box(Modifier.fillMaxWidth().padding(bottom = 16.dp), contentAlignment = Alignment.Center) {
-        Text(stringResource(R.string.or))
-      }
-      val uriHandler = LocalUriHandler.current
-      ActionRow(
-        Icons.Outlined.Tag,
-        R.string.connect_with_the_developers,
-        R.string.to_ask_any_questions_and_to_receive_simplex_chat_updates,
-        { uriHandler.openUri(simplexTeamUri) }
-      )
-      Spacer(Modifier.fillMaxHeight().weight(1f))
-      SimpleButton(
-        text = stringResource(R.string.about_simplex),
-        icon = Icons.Outlined.ArrowBackIosNew,
-        click = about
-      )
-    }
-  }
-}
-
-@Composable
-private fun ActionRow(icon: ImageVector, @StringRes titleId: Int, @StringRes textId: Int, action: () -> Unit) {
-  Row(
-    Modifier
-      .clickable { action() }
-      .padding(bottom = 16.dp)
-  ) {
-    Icon(icon, stringResource(titleId), tint = MaterialTheme.colors.primary,
-      modifier = Modifier.padding(end = 10.dp).size(40.dp))
-    Column {
-      Text(stringResource(titleId), color = MaterialTheme.colors.primary)
-      Text(annotatedStringResource(textId))
-    }
-  }
-//  Button(action: action, label: {
-//    HStack(alignment: .top, spacing: 20) {
-//    Image(systemName: icon)
-//      .resizable()
-//      .scaledToFit()
-//      .frame(width: 30, height: 30)
-//    .padding(.leading, 4)
-//    .padding(.top, 6)
-//    VStack(alignment: .leading) {
-//    Group {
-//      Text(title).font(.headline)
-//      Text(text).foregroundColor(.primary)
-//    }
-//      .multilineTextAlignment(.leading)
-//  }
-//  }
-//  })
-//  .padding(.bottom)
-}
-
-@Preview(showBackground = true)
-@Preview(
-  uiMode = Configuration.UI_MODE_NIGHT_YES,
-  showBackground = true,
-  name = "Dark Mode"
-)
-@Composable
-fun PreviewMakeConnection() {
-  SimpleXTheme {
-    MakeConnectionLayout(
-      user = User.sampleData,
-      createLink = {},
-      pasteLink = {},
-      scanCode = {},
-      about = {}
-    )
-  }
-}

apps/android/app/src/main/res/values-ru/strings.xml

@@ -164,6 +164,9 @@
     <string name="group_preview_you_are_invited">вы приглашены в группу</string>
     <string name="group_preview_join_as">вступить как %s</string>
     <string name="group_connection_pending">соединяется…</string>
+    <string name="tap_to_start_new_chat">Нажмите, чтобы начать чат</string>
+    <string name="chat_with_developers">или соединитесь с разработчиками</string>
+    <string name="you_have_no_chats">У вас нет чатов</string>
 
     <!-- ComposeView.kt, helpers -->
     <string name="attach">Прикрепить</string>
@@ -447,18 +450,6 @@
     <string name="read_more_in_github">Узнайте больше из нашего GitHub репозитория.</string>
     <string name="read_more_in_github_with_link">Узнайте больше из нашего <font color="#0088ff">GitHub репозитория</font>.</string>
 
-    <!-- MakeConnection -->
-    <string name="to_make_your_first_private_connection_choose">Чтобы добавить ваш первый контакт, выберите <b>одно из</b>:</string>
-    <string name="create_1_time_link_qr_code">Создать ссылку / QR код</string>
-    <string name="it_s_secure_to_share__only_one_contact_can_use_it">Ей безопасно поделиться - только один контакт может использовать её.</string>
-    <string name="paste_the_link_you_received">Вставьте полученную ссылку</string>
-    <string name="or_open_the_link_in_the_browser_and_tap_open_in_mobile">Или откройте ссылку в браузере и нажмите <b>Open in mobile</b>.</string>
-    <string name="scan_contact_s_qr_code">Сосканировать QR код контакта</string>
-    <string name="in_person_or_via_a_video_call__the_most_secure_way_to_connect">При встрече или в видеозвонке – самый безопасный способ установить соединение</string>
-    <string name="or">или</string>
-    <string name="connect_with_the_developers">Соединиться с разработчиками</string>
-    <string name="to_ask_any_questions_and_to_receive_simplex_chat_updates">Чтобы задать вопросы и получать уведомления о <xliff:g id="appNameFull">SimpleX Chat</xliff:g>.</string>
-
     <!-- Call -->
     <string name="incoming_video_call">Входящий видеозвонок</string>
     <string name="incoming_audio_call">Входящий аудиозвонок</string>

apps/android/app/src/main/res/values/strings.xml

@@ -164,6 +164,9 @@
   <string name="group_preview_you_are_invited">you are invited to group</string>
   <string name="group_preview_join_as">join as %s</string>
   <string name="group_connection_pending">connecting…</string>
+  <string name="tap_to_start_new_chat">Tap to start a new chat</string>
+  <string name="chat_with_developers">or chat with the developers</string>
+  <string name="you_have_no_chats">You have no chats</string>
 
   <!-- ComposeView.kt, helpers -->
   <string name="attach">Attach</string>
@@ -448,18 +451,6 @@
   <string name="read_more_in_github">Read more in our GitHub repository.</string>
   <string name="read_more_in_github_with_link">Read more in our <font color="#0088ff">GitHub repository</font>.</string>
 
-  <!-- MakeConnection -->
-  <string name="to_make_your_first_private_connection_choose">To make your first private connection, choose <b>one of the following</b>:</string>
-  <string name="create_1_time_link_qr_code">Create 1-time link / QR code</string>
-  <string name="it_s_secure_to_share__only_one_contact_can_use_it">It\'s secure to share - only one contact can use it.</string>
-  <string name="paste_the_link_you_received">Paste the link you received</string>
-  <string name="or_open_the_link_in_the_browser_and_tap_open_in_mobile">Or open the link in the browser and tap <b>Open in mobile</b>.</string>
-  <string name="scan_contact_s_qr_code">Scan contact\'s QR code</string>
-  <string name="in_person_or_via_a_video_call__the_most_secure_way_to_connect">In person or via a video call – the most secure way to connect.</string>
-  <string name="or">or</string>
-  <string name="connect_with_the_developers">Connect with the developers</string>
-  <string name="to_ask_any_questions_and_to_receive_simplex_chat_updates">To ask any questions and to receive <xliff:g id="appNameFull">SimpleX Chat</xliff:g> updates.</string>
-
   <!-- Call -->
   <string name="incoming_video_call">Incoming video call</string>
   <string name="incoming_audio_call">Incoming audio call</string>