From d0ebd3533b0ed047156b7e4eb03bf6b2413769d0 Mon Sep 17 00:00:00 2001 From: Andrew Date: Tue, 4 Jun 2024 23:17:00 +0930 Subject: [PATCH] Reinstate landing chat animation --- .../securesms/onboarding/LandingActivity.kt | 106 ++++++++++++++---- 1 file changed, 87 insertions(+), 19 deletions(-) diff --git a/app/src/main/java/org/thoughtcrime/securesms/onboarding/LandingActivity.kt b/app/src/main/java/org/thoughtcrime/securesms/onboarding/LandingActivity.kt index 7d3a2b7be7..c7d252c516 100644 --- a/app/src/main/java/org/thoughtcrime/securesms/onboarding/LandingActivity.kt +++ b/app/src/main/java/org/thoughtcrime/securesms/onboarding/LandingActivity.kt @@ -3,18 +3,33 @@ package org.thoughtcrime.securesms.onboarding import android.content.Intent import android.net.Uri import android.os.Bundle +import androidx.annotation.StringRes +import androidx.compose.animation.AnimatedVisibility +import androidx.compose.animation.core.tween +import androidx.compose.animation.fadeIn +import androidx.compose.animation.slideInVertically +import androidx.compose.foundation.ExperimentalFoundationApi import androidx.compose.foundation.background +import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column -import androidx.compose.foundation.layout.ColumnScope import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.width +import androidx.compose.foundation.lazy.LazyColumn +import androidx.compose.foundation.lazy.items +import androidx.compose.foundation.lazy.rememberLazyListState import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material.MaterialTheme import androidx.compose.material.Text import androidx.compose.runtime.Composable +import androidx.compose.runtime.LaunchedEffect +import androidx.compose.runtime.getValue +import androidx.compose.runtime.mutableStateOf +import androidx.compose.runtime.remember +import androidx.compose.runtime.setValue import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color @@ -25,6 +40,7 @@ import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.tooling.preview.PreviewParameter import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp +import kotlinx.coroutines.delay import network.loki.messenger.R import org.session.libsession.utilities.TextSecurePreferences import org.thoughtcrime.securesms.BaseActionBarActivity @@ -40,9 +56,21 @@ import org.thoughtcrime.securesms.ui.OutlineButton import org.thoughtcrime.securesms.ui.PreviewTheme import org.thoughtcrime.securesms.ui.ThemeResPreviewParameterProvider import org.thoughtcrime.securesms.ui.classicDarkColors -import org.thoughtcrime.securesms.ui.contentDescription import org.thoughtcrime.securesms.ui.session_accent import org.thoughtcrime.securesms.util.setUpActionBarSessionLogo +import kotlin.time.Duration.Companion.milliseconds + +private data class TextData( + @StringRes val stringId: Int, + val isOutgoing: Boolean = false +) + +private val MESSAGES = listOf( + TextData(R.string.onboardingBubbleWelcomeToSession), + TextData(R.string.onboardingBubbleSessionIsEngineered, isOutgoing = true), + TextData(R.string.onboardingBubbleNoPhoneNumber), + TextData(R.string.onboardingBubbleCreatingAnAccountIsEasy, isOutgoing = true) +) class LandingActivity : BaseActionBarActivity() { @@ -75,19 +103,51 @@ class LandingActivity : BaseActionBarActivity() { } } + @OptIn(ExperimentalFoundationApi::class) @Composable private fun LandingScreen() { + + var count by remember { mutableStateOf(0) } + val listState = rememberLazyListState() + + LaunchedEffect(Unit) { + delay(500.milliseconds) + while(count < MESSAGES.size) { + count += 1 + listState.animateScrollToItem(0.coerceAtLeast((count - 1))) + delay(1500L) + } + } + Column(modifier = Modifier.padding(horizontal = 36.dp)) { Spacer(modifier = Modifier.weight(1f)) - Text(stringResource(R.string.onboardingBubblePrivacyInYourPocket), modifier = Modifier.align(Alignment.CenterHorizontally), style = MaterialTheme.typography.h4, textAlign = TextAlign.Center) + Text( + stringResource(R.string.onboardingBubblePrivacyInYourPocket), + modifier = Modifier.align(Alignment.CenterHorizontally), + style = MaterialTheme.typography.h4, + textAlign = TextAlign.Center + ) Spacer(modifier = Modifier.height(24.dp)) - IncomingText(stringResource(R.string.onboardingBubbleWelcomeToSession)) - Spacer(modifier = Modifier.height(14.dp)) - OutgoingText(stringResource(R.string.onboardingBubbleSessionIsEngineered)) - Spacer(modifier = Modifier.height(14.dp)) - IncomingText(stringResource(R.string.onboardingBubbleNoPhoneNumber)) - Spacer(modifier = Modifier.height(14.dp)) - OutgoingText(stringResource(R.string.onboardingBubbleCreatingAnAccountIsEasy)) + + LazyColumn( + state = listState, + modifier = Modifier + .fillMaxWidth() + .weight(1f), + verticalArrangement = Arrangement.spacedBy(16.dp) + ) { + items( + MESSAGES.take(count), + key = { it.stringId } + ) { item -> + MessageText( + stringResource(item.stringId), + item.isOutgoing, + modifier = Modifier.animateItemPlacement() + ) + } + } + Spacer(modifier = Modifier.weight(1f)) OutlineButton( @@ -139,21 +199,29 @@ class LandingActivity : BaseActionBarActivity() { } @Composable - private fun IncomingText(text: String) { + private fun MessageText(text: String, isOutgoing: Boolean, modifier: Modifier) { + if (isOutgoing) OutgoingText(text, modifier) else IncomingText(text, modifier) + } + + @Composable + private fun IncomingText(text: String, modifier: Modifier) { ChatText( text, - color = classicDarkColors[2] + color = classicDarkColors[2], + modifier = modifier ) } @Composable - private fun ColumnScope.OutgoingText(text: String) { - ChatText( - text, - color = session_accent, - textColor = MaterialTheme.colors.primary, - modifier = Modifier.align(Alignment.End) - ) + private fun OutgoingText(text: String, modifier: Modifier) { + Box(modifier = modifier then Modifier.fillMaxWidth()) { + ChatText( + text, + color = session_accent, + textColor = MaterialTheme.colors.primary, + modifier = Modifier.align(Alignment.TopEnd) + ) + } } @Composable