From 8d672579aa4942ad10e1f9a2ac3248d2ccb0fd3d Mon Sep 17 00:00:00 2001 From: Flavia Handrea Date: Wed, 21 Aug 2024 16:49:05 +0300 Subject: [PATCH] Welcome page with invitations tablet implementation. --- .../archiveOnboarding/compose/WelcomePage.kt | 101 +++++++++++--- .../ui/composeComponents/ArchiveItem.kt | 129 +++++++++++++++--- app/src/main/res/layout/fragment_archives.xml | 2 +- app/src/main/res/values/strings.xml | 2 +- 4 files changed, 191 insertions(+), 43 deletions(-) diff --git a/app/src/main/java/org/permanent/permanent/ui/archiveOnboarding/compose/WelcomePage.kt b/app/src/main/java/org/permanent/permanent/ui/archiveOnboarding/compose/WelcomePage.kt index 40e7ca43..2b72b9f0 100644 --- a/app/src/main/java/org/permanent/permanent/ui/archiveOnboarding/compose/WelcomePage.kt +++ b/app/src/main/java/org/permanent/permanent/ui/archiveOnboarding/compose/WelcomePage.kt @@ -12,7 +12,8 @@ import androidx.compose.foundation.layout.fillMaxSize 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.itemsIndexed import androidx.compose.foundation.pager.PagerState import androidx.compose.foundation.rememberScrollState import androidx.compose.foundation.verticalScroll @@ -40,10 +41,10 @@ import kotlinx.coroutines.launch import org.permanent.permanent.R import org.permanent.permanent.models.Archive import org.permanent.permanent.models.Status +import org.permanent.permanent.models.ThumbStatus import org.permanent.permanent.ui.composeComponents.ArchiveItem import org.permanent.permanent.ui.composeComponents.ButtonColor import org.permanent.permanent.ui.composeComponents.SmallTextAndIconButton -import org.permanent.permanent.ui.composeComponents.TextAndIconButton import org.permanent.permanent.viewmodels.ArchiveOnboardingViewModel @Composable @@ -86,7 +87,8 @@ private fun TabletBody( Column( modifier = Modifier .fillMaxWidth() - .weight(1f) + .weight(1f), + verticalArrangement = Arrangement.spacedBy(32.dp) ) { accountName?.let { val welcomeTitleText = stringResource(id = R.string.welcome_to_permanent_title, it) @@ -106,6 +108,16 @@ private fun TabletBody( color = Color.White, fontFamily = regularFont ) + + if (archives.isNotEmpty()) { + Text( + text = stringResource(id = R.string.welcome_to_permanent_with_archives_description), + fontSize = 16.sp, + lineHeight = 24.sp, + color = Color.White, + fontFamily = regularFont + ) + } } } @@ -114,26 +126,76 @@ private fun TabletBody( .fillMaxWidth() .weight(1f), horizontalAlignment = Alignment.End ) { - Text( - text = stringResource(id = R.string.welcome_to_permanent_description), - fontSize = 16.sp, - lineHeight = 24.sp, - color = Color.White, - fontFamily = regularFont - ) + if (archives.isEmpty()) { + Text( + text = stringResource(id = R.string.welcome_to_permanent_description), + fontSize = 16.sp, + lineHeight = 24.sp, + color = Color.White, + fontFamily = regularFont + ) + } - Spacer(modifier = Modifier.weight(1.0f)) + LazyColumn( + modifier = Modifier.weight(1f) + ) { + itemsIndexed(archives) { index, archive -> + val archiveName = archive.fullName + val archiveAccessRole = archive.accessRole - Box( - modifier = Modifier.width(168.dp) + if (archiveName != null && archiveAccessRole != null) { + ArchiveItem( + isTablet = true, + isForWelcomePage = true, + iconURL = if (archive.thumbStatus == ThumbStatus.OK) archive.thumbURL200 else null, + title = archiveName, + accessRole = archiveAccessRole, + showSubtitle = true, + showSeparator = index != archives.lastIndex, + showAcceptButton = archive.status == Status.PENDING, + showAcceptedLabel = archive.status == Status.OK + ) { + viewModel.onAcceptBtnClick(archive) + } + } + } + } + + Row( + modifier = Modifier.fillMaxWidth(), + horizontalArrangement = Arrangement.spacedBy(32.dp) ) { - TextAndIconButton( - ButtonColor.LIGHT, - text = stringResource(id = R.string.get_started), - showButtonEnabled = true + Box( + modifier = Modifier.weight(1f) ) { - coroutineScope.launch { - pagerState.animateScrollToPage(OnboardingPage.ARCHIVE_TYPE.value) + if (archives.isNotEmpty()) { + SmallTextAndIconButton( + buttonColor = ButtonColor.TRANSPARENT, + text = stringResource(id = R.string.create_new_archive), + icon = painterResource(id = R.drawable.ic_plus_white) + ) { + coroutineScope.launch { + pagerState.animateScrollToPage(OnboardingPage.ARCHIVE_TYPE.value) + } + } + } + } + + Box( + modifier = Modifier.weight(1f) + ) { + SmallTextAndIconButton(buttonColor = ButtonColor.LIGHT, + text = stringResource(id = if (archives.isEmpty()) R.string.get_started else R.string.next), + showButtonEnabled = archives.isEmpty() || archives.any { it.status == Status.OK }) { + val nextPage = + if (archives.isEmpty()) OnboardingPage.ARCHIVE_TYPE.value else { + viewModel.setAcceptedArchiveFlow() + OnboardingPage.GOALS.value + } + + coroutineScope.launch { + pagerState.animateScrollToPage(nextPage) + } } } } @@ -219,7 +281,6 @@ private fun PhoneBody( } } } - } Spacer(modifier = Modifier diff --git a/app/src/main/java/org/permanent/permanent/ui/composeComponents/ArchiveItem.kt b/app/src/main/java/org/permanent/permanent/ui/composeComponents/ArchiveItem.kt index d5d09027..75580110 100644 --- a/app/src/main/java/org/permanent/permanent/ui/composeComponents/ArchiveItem.kt +++ b/app/src/main/java/org/permanent/permanent/ui/composeComponents/ArchiveItem.kt @@ -40,6 +40,101 @@ fun ArchiveItem( showAcceptButton: Boolean = false, showAcceptedLabel: Boolean = false, onButtonClick: () -> Unit? = {} +) { + if (isTablet && isForWelcomePage) { + TabletBodyForWelcomePage( + iconURL, + title, + accessRole, + showSeparator, + showAcceptButton, + showAcceptedLabel, + onButtonClick + ) + } else { + Column(modifier = Modifier.fillMaxWidth()) { + Row( + modifier = Modifier.fillMaxWidth(), verticalAlignment = Alignment.CenterVertically + ) { + if (iconURL == null) { + Image( + painter = painterResource(id = if (isTablet) R.drawable.ic_archive_placeholder_multicolor else R.drawable.ic_archive_gradient), + contentDescription = "", + modifier = Modifier.size(if (isTablet) 48.dp else 18.dp) + ) + } else { + AsyncImage( + model = iconURL, + contentDescription = null, + modifier = Modifier + .size(48.dp) + .clip(RoundedCornerShape(4.dp)) + ) + } + + Column( + modifier = Modifier + .padding(horizontal = 16.dp, vertical = if (isTablet) 32.dp else 24.dp) + .weight(1.0f, fill = true), + horizontalAlignment = Alignment.Start, + ) { + Text( + text = title, + fontSize = if (isTablet) 18.sp else 14.sp, + lineHeight = 24.sp, + color = Color.White, + fontFamily = FontFamily(Font(R.font.open_sans_bold_ttf)) + ) + if (!isTablet && showSubtitle) { + Text( + text = (if (isForWelcomePage) stringResource(id = R.string.invited_as) + " " else "") + (accessRole?.toTitleCase() + ?: ""), + fontSize = 12.sp, + lineHeight = 16.sp, + color = Color.White.copy(alpha = 0.5f), + fontFamily = FontFamily(Font(R.font.open_sans_regular_ttf)) + ) + } + } + if (isTablet) { + AccessRoleLabel(accessRole = accessRole) + } + if (showAcceptButton) { + Box( + modifier = Modifier + .width(88.dp) + .height(40.dp) + ) { + SmallTextAndIconButton( + buttonColor = ButtonColor.TRANSPARENT, + text = stringResource(id = R.string.accept), + fontSize = 12.sp, + icon = null + ) { + onButtonClick() + } + } + } + if (showAcceptedLabel) { + AcceptedLabel() + } + } + if (showSeparator) { + HorizontalDivider(color = Color.White.copy(alpha = 0.16f)) + } + } + } +} + +@Composable +private fun TabletBodyForWelcomePage( + iconURL: String? = null, + title: String, + accessRole: AccessRole?, + showSeparator: Boolean = true, + showAcceptButton: Boolean = false, + showAcceptedLabel: Boolean = false, + onButtonClick: () -> Unit? = {} ) { Column(modifier = Modifier.fillMaxWidth()) { Row( @@ -47,9 +142,9 @@ fun ArchiveItem( ) { if (iconURL == null) { Image( - painter = painterResource(id = if (isTablet) R.drawable.ic_archive_placeholder_multicolor else R.drawable.ic_archive_gradient), + painter = painterResource(id = R.drawable.ic_archive_placeholder_multicolor), contentDescription = "", - modifier = Modifier.size(if (isTablet) 48.dp else 18.dp) + modifier = Modifier.size(48.dp) ) } else { AsyncImage( @@ -63,38 +158,30 @@ fun ArchiveItem( Column( modifier = Modifier - .padding( - horizontal = 16.dp, vertical = if (isTablet) 32.dp else 24.dp - ) + .padding(horizontal = 16.dp, vertical = 32.dp) .weight(1.0f, fill = true), horizontalAlignment = Alignment.Start, ) { Text( text = title, - fontSize = if (isTablet) 18.sp else 14.sp, + fontSize = 14.sp, lineHeight = 24.sp, color = Color.White, fontFamily = FontFamily(Font(R.font.open_sans_bold_ttf)) ) - if (!isTablet && showSubtitle) { - Text( - text = (if (isForWelcomePage) stringResource(id = R.string.invited_as) + " " else "") + - (accessRole?.toTitleCase() ?: ""), - fontSize = 12.sp, - lineHeight = 16.sp, - color = Color.White.copy(alpha = 0.5f), - fontFamily = FontFamily(Font(R.font.open_sans_regular_ttf)) - ) - } - } - if (isTablet) { - AccessRoleLabel(accessRole = accessRole) + Text( + text = stringResource(id = R.string.invited_as) + " " + accessRole?.toTitleCase(), + fontSize = 14.sp, + lineHeight = 24.sp, + color = Color.White.copy(alpha = 0.5f), + fontFamily = FontFamily(Font(R.font.open_sans_regular_ttf)) + ) } if (showAcceptButton) { Box( modifier = Modifier - .width(88.dp) - .height(40.dp) + .width(96.dp) + .height(48.dp) ) { SmallTextAndIconButton( buttonColor = ButtonColor.TRANSPARENT, diff --git a/app/src/main/res/layout/fragment_archives.xml b/app/src/main/res/layout/fragment_archives.xml index edceb0fa..e745290e 100644 --- a/app/src/main/res/layout/fragment_archives.xml +++ b/app/src/main/res/layout/fragment_archives.xml @@ -183,7 +183,7 @@ android:layout_height="wrap_content" android:layout_marginBottom="24dp" android:onClick="@{()-> viewModel.onCreateNewArchiveBtnClick()}" - android:text="@string/button_create_new_archive" + android:text="@string/create_new_archive" android:visibility="@{viewModel.showScreenSimplified ? View.GONE : View.VISIBLE}" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml index 91176ad0..1ff8bee0 100644 --- a/app/src/main/res/values/strings.xml +++ b/app/src/main/res/values/strings.xml @@ -476,7 +476,7 @@ Current Archive Pending Archives: Choose Archive: - Create New Archive + Create new Archive Archive accepted successfully. Archive declined successfully. Archive switched successfully.