From 38aea7c4557576e9bb0d97bb80e03ce740eb5381 Mon Sep 17 00:00:00 2001 From: IanRDavies Date: Thu, 10 Mar 2022 10:36:21 +0000 Subject: [PATCH] use relative sizing when scaling the QR code (#417) * use relative sizing when scaling the QR code * linting * properly implement image scaling * remove extra horizontal padding Co-authored-by: Evgeny Poberezkin <2769109+epoberezkin@users.noreply.github.com> --- .../app/views/newchat/AddContactView.kt | 68 +++++++++++-------- .../chat/simplex/app/views/newchat/QRCode.kt | 6 +- .../app/views/usersettings/UserAddressView.kt | 16 ++--- 3 files changed, 51 insertions(+), 39 deletions(-) diff --git a/apps/android/app/src/main/java/chat/simplex/app/views/newchat/AddContactView.kt b/apps/android/app/src/main/java/chat/simplex/app/views/newchat/AddContactView.kt index be27d1d6e0..d3a416c0d4 100644 --- a/apps/android/app/src/main/java/chat/simplex/app/views/newchat/AddContactView.kt +++ b/apps/android/app/src/main/java/chat/simplex/app/views/newchat/AddContactView.kt @@ -15,6 +15,7 @@ import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp +import androidx.compose.ui.unit.sp import chat.simplex.app.model.ChatModel import chat.simplex.app.ui.theme.SimpleButton import chat.simplex.app.ui.theme.SimpleXTheme @@ -34,35 +35,44 @@ fun AddContactView(chatModel: ChatModel) { @Composable fun AddContactLayout(connReq: String, share: () -> Unit) { - Column( - horizontalAlignment = Alignment.CenterHorizontally, - verticalArrangement = Arrangement.spacedBy(12.dp) - ) { - Text( - "Add contact", - style = MaterialTheme.typography.h1, - ) - Text( - "Show QR code to your contact\nto scan from the app", - style = MaterialTheme.typography.h2, - textAlign = TextAlign.Center, - ) - QRCode(connReq) - Text( - buildAnnotatedString { - append("If you cannot meet in person, you can ") - withStyle(SpanStyle(fontWeight = FontWeight.Bold)) { - append("scan QR code in the video call") - } - append(", or you can share the invitation link via any other channel.") - }, - textAlign = TextAlign.Center, - style = MaterialTheme.typography.caption, - modifier = Modifier - .padding(horizontal = 16.dp) - .padding(bottom = 16.dp) - ) - SimpleButton("Share invitation link", icon = Icons.Outlined.Share, click = share) + BoxWithConstraints { + val screenHeight = maxHeight + Column( + horizontalAlignment = Alignment.CenterHorizontally, + verticalArrangement = Arrangement.SpaceBetween, + ) { + Text( + "Add contact", + style = MaterialTheme.typography.h1, + ) + Text( + "Show QR code to your contact\nto scan from the app", + style = MaterialTheme.typography.h2.copy(fontSize = if(screenHeight > 600.dp) 26.sp else 20.sp), + textAlign = TextAlign.Center, + ) + QRCode( + connReq, Modifier + .weight(1f, fill = false) + .aspectRatio(1f) + .padding(vertical = 3.dp) + ) + Text( + buildAnnotatedString { + append("If you cannot meet in person, you can ") + withStyle(SpanStyle(fontWeight = FontWeight.Bold)) { + append("scan QR code in the video call") + } + append(", or you can share the invitation link via any other channel.") + }, + textAlign = TextAlign.Center, + style = MaterialTheme.typography.caption.copy(fontSize=if(screenHeight > 600.dp) 20.sp else 16.sp), + modifier = Modifier + .padding(horizontal = 16.dp) + .padding(bottom = if(screenHeight > 600.dp) 16.dp else 8.dp) + ) + SimpleButton("Share invitation link", icon = Icons.Outlined.Share, click = share) + Spacer(Modifier.height(10.dp)) + } } } diff --git a/apps/android/app/src/main/java/chat/simplex/app/views/newchat/QRCode.kt b/apps/android/app/src/main/java/chat/simplex/app/views/newchat/QRCode.kt index 6dee26d107..cbc56268f4 100644 --- a/apps/android/app/src/main/java/chat/simplex/app/views/newchat/QRCode.kt +++ b/apps/android/app/src/main/java/chat/simplex/app/views/newchat/QRCode.kt @@ -4,6 +4,7 @@ import android.graphics.Bitmap import android.graphics.Color import androidx.compose.foundation.Image import androidx.compose.runtime.Composable +import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.asImageBitmap import androidx.compose.ui.tooling.preview.Preview import chat.simplex.app.ui.theme.SimpleXTheme @@ -12,10 +13,11 @@ import com.google.zxing.EncodeHintType import com.google.zxing.qrcode.QRCodeWriter @Composable -fun QRCode(connReq: String) { +fun QRCode(connReq: String, modifier: Modifier = Modifier) { Image( bitmap = qrCodeBitmap(connReq, 1024).asImageBitmap(), - contentDescription = "QR Code" + contentDescription = "QR Code", + modifier = modifier ) } diff --git a/apps/android/app/src/main/java/chat/simplex/app/views/usersettings/UserAddressView.kt b/apps/android/app/src/main/java/chat/simplex/app/views/usersettings/UserAddressView.kt index a6a36bf16f..7c40fad557 100644 --- a/apps/android/app/src/main/java/chat/simplex/app/views/usersettings/UserAddressView.kt +++ b/apps/android/app/src/main/java/chat/simplex/app/views/usersettings/UserAddressView.kt @@ -59,27 +59,27 @@ fun UserAddressLayout( ) { Text( "Your chat address", - Modifier.padding(bottom = 24.dp), + Modifier.padding(bottom = 16.dp), style = MaterialTheme.typography.h1, ) Text( "You can share your address as a link or as a QR code - anybody will be able to connect to you, " + "and if you later delete it - you won't lose your contacts.", - Modifier.padding(bottom = 24.dp), + Modifier.padding(bottom = 12.dp), ) Column( - Modifier - .fillMaxWidth() - .padding(top = 12.dp), + Modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally, - verticalArrangement = Arrangement.spacedBy(24.dp) + verticalArrangement = Arrangement.SpaceEvenly ) { if (userAddress == null) { SimpleButton("Create address", icon = Icons.Outlined.QrCode, click = createAddress) } else { - QRCode(userAddress) + QRCode(userAddress, Modifier.weight(1f, fill = false).aspectRatio(1f)) Row( - horizontalArrangement = Arrangement.spacedBy(12.dp) + horizontalArrangement = Arrangement.spacedBy(10.dp), + verticalAlignment = Alignment.CenterVertically, + modifier = Modifier.padding(vertical = 10.dp) ) { SimpleButton( "Share link",