From 7799a1e260ea3fc05f724a92623e32a1e7c4a8fb Mon Sep 17 00:00:00 2001 From: Evgeny Poberezkin <2769109+epoberezkin@users.noreply.github.com> Date: Sun, 21 May 2023 00:07:06 +0200 Subject: [PATCH] android: improve onboarding layout (#2472) --- .../java/chat/simplex/app/views/WelcomeView.kt | 10 +++++----- .../simplex/app/views/helpers/SimpleButton.kt | 2 +- .../simplex/app/views/onboarding/HowItWorks.kt | 7 +++---- .../app/views/onboarding/OnboardingView.kt | 2 +- .../app/views/onboarding/SetNotificationsMode.kt | 15 ++++++++------- .../simplex/app/views/onboarding/SimpleXInfo.kt | 13 +++++-------- apps/android/app/src/main/res/values/strings.xml | 6 +++--- 7 files changed, 26 insertions(+), 29 deletions(-) diff --git a/apps/android/app/src/main/java/chat/simplex/app/views/WelcomeView.kt b/apps/android/app/src/main/java/chat/simplex/app/views/WelcomeView.kt index 88dc7165ab..aa89292cde 100644 --- a/apps/android/app/src/main/java/chat/simplex/app/views/WelcomeView.kt +++ b/apps/android/app/src/main/java/chat/simplex/app/views/WelcomeView.kt @@ -54,11 +54,11 @@ fun CreateProfilePanel(chatModel: ChatModel, close: () -> Unit) { close() } })*/ - Column(Modifier.padding(horizontal = DEFAULT_PADDING * 1f)) { - AppBarTitle(stringResource(R.string.create_profile)) - ReadableText(R.string.your_profile_is_stored_on_your_device, TextAlign.Center, padding = PaddingValues()) - ReadableText(R.string.profile_is_only_shared_with_your_contacts, TextAlign.Center) - Spacer(Modifier.height(DEFAULT_PADDING * 1.5f)) + Column(Modifier.padding(horizontal = DEFAULT_PADDING)) { + AppBarTitle(stringResource(R.string.create_profile), bottomPadding = DEFAULT_PADDING) + ReadableText(R.string.your_profile_is_stored_on_your_device, TextAlign.Center, padding = PaddingValues(), style = MaterialTheme.typography.body1) + ReadableText(R.string.profile_is_only_shared_with_your_contacts, TextAlign.Center, style = MaterialTheme.typography.body1) + Spacer(Modifier.height(DEFAULT_PADDING)) Row(Modifier.padding(bottom = DEFAULT_PADDING_HALF).fillMaxWidth(), horizontalArrangement = Arrangement.SpaceBetween) { Text( stringResource(R.string.display_name), diff --git a/apps/android/app/src/main/java/chat/simplex/app/views/helpers/SimpleButton.kt b/apps/android/app/src/main/java/chat/simplex/app/views/helpers/SimpleButton.kt index 779f51d9e3..9ae1ff7054 100644 --- a/apps/android/app/src/main/java/chat/simplex/app/views/helpers/SimpleButton.kt +++ b/apps/android/app/src/main/java/chat/simplex/app/views/helpers/SimpleButton.kt @@ -79,7 +79,7 @@ fun SimpleButtonIconEnded( } @Composable -fun SimpleButtonFrame(click: () -> Unit, modifier: Modifier = Modifier, disabled: Boolean = false, content: @Composable () -> Unit) { +fun SimpleButtonFrame(click: () -> Unit, modifier: Modifier = Modifier, disabled: Boolean = false, content: @Composable RowScope.() -> Unit) { Box(Modifier.clip(RoundedCornerShape(20.dp))) { val modifier = if (disabled) modifier else modifier.clickable { click() } Row( diff --git a/apps/android/app/src/main/java/chat/simplex/app/views/onboarding/HowItWorks.kt b/apps/android/app/src/main/java/chat/simplex/app/views/onboarding/HowItWorks.kt index ad7465fd38..e87254ac74 100644 --- a/apps/android/app/src/main/java/chat/simplex/app/views/onboarding/HowItWorks.kt +++ b/apps/android/app/src/main/java/chat/simplex/app/views/onboarding/HowItWorks.kt @@ -4,8 +4,7 @@ import android.content.res.Configuration import androidx.annotation.StringRes import androidx.compose.foundation.clickable import androidx.compose.foundation.layout.* -import androidx.compose.material.MaterialTheme -import androidx.compose.material.Text +import androidx.compose.material.* import androidx.compose.runtime.* import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier @@ -52,8 +51,8 @@ fun HowItWorks(user: User?, onboardingStage: MutableState? = n } @Composable -fun ReadableText(@StringRes stringResId: Int, textAlign: TextAlign = TextAlign.Start, padding: PaddingValues = PaddingValues(bottom = 12.dp)) { - Text(annotatedStringResource(stringResId), modifier = Modifier.padding(padding), textAlign = textAlign, lineHeight = 22.sp) +fun ReadableText(@StringRes stringResId: Int, textAlign: TextAlign = TextAlign.Start, padding: PaddingValues = PaddingValues(bottom = 12.dp), style: TextStyle = LocalTextStyle.current) { + Text(annotatedStringResource(stringResId), modifier = Modifier.padding(padding), textAlign = textAlign, lineHeight = 22.sp, style = style) } @Composable diff --git a/apps/android/app/src/main/java/chat/simplex/app/views/onboarding/OnboardingView.kt b/apps/android/app/src/main/java/chat/simplex/app/views/onboarding/OnboardingView.kt index baff692020..997d9edb4b 100644 --- a/apps/android/app/src/main/java/chat/simplex/app/views/onboarding/OnboardingView.kt +++ b/apps/android/app/src/main/java/chat/simplex/app/views/onboarding/OnboardingView.kt @@ -30,7 +30,7 @@ fun CreateProfile(chatModel: ChatModel, close: () -> Unit) { Box( modifier = Modifier .fillMaxSize() - .padding(20.dp) + .padding(top = 20.dp) ) { CreateProfilePanel(chatModel, close) LaunchedEffect(Unit) { diff --git a/apps/android/app/src/main/java/chat/simplex/app/views/onboarding/SetNotificationsMode.kt b/apps/android/app/src/main/java/chat/simplex/app/views/onboarding/SetNotificationsMode.kt index 9bf170cae2..8f08fe4cf4 100644 --- a/apps/android/app/src/main/java/chat/simplex/app/views/onboarding/SetNotificationsMode.kt +++ b/apps/android/app/src/main/java/chat/simplex/app/views/onboarding/SetNotificationsMode.kt @@ -40,13 +40,13 @@ fun SetNotificationsMode(m: ChatModel) { NotificationButton(currentMode, NotificationsMode.SERVICE, R.string.onboarding_notifications_mode_service, R.string.onboarding_notifications_mode_service_desc) } Spacer(Modifier.fillMaxHeight().weight(1f)) - Box(Modifier.fillMaxWidth().padding(bottom = DEFAULT_PADDING), contentAlignment = Alignment.Center) { - OnboardingActionButton(R.string.use_chat, OnboardingStage.OnboardingComplete, m.onboardingStage, false) { - changeNotificationsMode(currentMode.value, m) - } + Box(Modifier.fillMaxWidth().padding(bottom = DEFAULT_PADDING_HALF), contentAlignment = Alignment.Center) { + OnboardingActionButton(R.string.use_chat, OnboardingStage.OnboardingComplete, m.onboardingStage, false) { + changeNotificationsMode(currentMode.value, m) } - Spacer(Modifier.fillMaxHeight().weight(1f)) } + Spacer(Modifier.fillMaxHeight().weight(1f)) + } LaunchedEffect(Unit) { m.controller.ntfManager.createNtfChannelsMaybeShowAlert() } @@ -59,10 +59,10 @@ private fun NotificationButton(currentMode: MutableState, mod border = BorderStroke(1.dp, color = if (currentMode.value == mode) MaterialTheme.colors.primary else MaterialTheme.colors.secondary.copy(alpha = 0.5f)), shape = RoundedCornerShape(35.dp), ) { - Column(Modifier.padding(horizontal = 14.dp).padding(top = 4.dp, bottom = 8.dp)) { + Column(Modifier.padding(horizontal = 10.dp).padding(top = 4.dp, bottom = 8.dp)) { Text( stringResource(title), - style = MaterialTheme.typography.h2, + style = MaterialTheme.typography.h3, fontWeight = FontWeight.Medium, color = if (currentMode.value == mode) MaterialTheme.colors.primary else MaterialTheme.colors.secondary, modifier = Modifier.padding(bottom = 8.dp).align(Alignment.CenterHorizontally), @@ -70,6 +70,7 @@ private fun NotificationButton(currentMode: MutableState, mod ) Text(annotatedStringResource(description), Modifier.align(Alignment.CenterHorizontally), + fontSize = 15.sp, color = MaterialTheme.colors.onBackground, lineHeight = 24.sp, textAlign = TextAlign.Center diff --git a/apps/android/app/src/main/java/chat/simplex/app/views/onboarding/SimpleXInfo.kt b/apps/android/app/src/main/java/chat/simplex/app/views/onboarding/SimpleXInfo.kt index 8f48d7ac0b..7324f63421 100644 --- a/apps/android/app/src/main/java/chat/simplex/app/views/onboarding/SimpleXInfo.kt +++ b/apps/android/app/src/main/java/chat/simplex/app/views/onboarding/SimpleXInfo.kt @@ -43,13 +43,13 @@ fun SimpleXInfoLayout( Modifier .fillMaxSize() .verticalScroll(rememberScrollState()) - .padding(start = DEFAULT_PADDING * 1.5f, end = DEFAULT_PADDING * 1.5f, top = DEFAULT_PADDING * 4,/* bottom = DEFAULT_PADDING * 4*/), + .padding(start = DEFAULT_PADDING , end = DEFAULT_PADDING, top = DEFAULT_PADDING), ) { Box(Modifier.fillMaxWidth().padding(top = 8.dp, bottom = 10.dp), contentAlignment = Alignment.Center) { SimpleXLogo() } - Text(stringResource(R.string.next_generation_of_private_messaging), style = MaterialTheme.typography.h2, modifier = Modifier.padding(bottom = 60.dp).padding(horizontal = 48.dp), textAlign = TextAlign.Center) + Text(stringResource(R.string.next_generation_of_private_messaging), style = MaterialTheme.typography.h2, modifier = Modifier.padding(bottom = 48.dp).padding(horizontal = 36.dp), textAlign = TextAlign.Center) InfoRow(painterResource(R.drawable.privacy), R.string.privacy_redefined, R.string.first_platform_without_user_ids, width = 80.dp) InfoRow(painterResource(R.drawable.shield), R.string.immune_to_spam_and_abuse, R.string.people_can_connect_only_via_links_you_share) @@ -67,12 +67,11 @@ fun SimpleXInfoLayout( Box( Modifier .fillMaxWidth() - .padding(bottom = DEFAULT_PADDING, top = DEFAULT_PADDING), contentAlignment = Alignment.Center + .padding(bottom = DEFAULT_PADDING.times(1.5f), top = DEFAULT_PADDING), contentAlignment = Alignment.Center ) { SimpleButtonDecorated(text = stringResource(R.string.how_it_works), icon = painterResource(R.drawable.ic_info), click = showModal { HowItWorks(user, onboardingStage) }) } - Spacer(Modifier.weight(1f)) } } @@ -121,7 +120,7 @@ fun OnboardingActionButton( Modifier .border(border = BorderStroke(1.dp, MaterialTheme.colors.primary), shape = RoundedCornerShape(50)) .padding( - horizontal = DEFAULT_PADDING * 3, + horizontal = DEFAULT_PADDING * 2, vertical = 4.dp ) } else { @@ -138,9 +137,7 @@ fun OnboardingActionButton( Text(stringResource(labelId), style = MaterialTheme.typography.h2, color = MaterialTheme.colors.primary, fontSize = 20.sp) Icon( painterResource(R.drawable.ic_arrow_forward_ios), "next stage", tint = MaterialTheme.colors.primary, - modifier = Modifier - .padding(start = DEFAULT_PADDING, top = 5.dp) - .size(15.dp) + modifier = Modifier.padding(start = DEFAULT_PADDING.div(4)).size(20.dp) ) } } diff --git a/apps/android/app/src/main/res/values/strings.xml b/apps/android/app/src/main/res/values/strings.xml index c00d3bcd4f..325f74656e 100644 --- a/apps/android/app/src/main/res/values/strings.xml +++ b/apps/android/app/src/main/res/values/strings.xml @@ -727,9 +727,9 @@ When app is running Periodic Instant - Best for battery. You will receive notifications only when the app is running, background service will NOT be used. - Good for battery. Background service checks for new messages every 10 minutes. You may miss calls and urgent messages. - Uses more battery! Background service is always running – notifications will be shown as soon as the messages are available. + Best for battery. You will receive notifications only when the app is running (NO background service). + Good for battery. Background service checks messages every 10 minutes. You may miss calls or urgent messages. + Uses more battery! Background service always runs – notifications are shown as soon as messages are available. Paste received link