Skip to content

Commit

Permalink
Merge pull request #294 from PermanentOrg/feature/VSP-1431
Browse files Browse the repository at this point in the history
Welcome page with invitations tablet implementation.
  • Loading branch information
flaviahandrea-vsp authored Aug 22, 2024
2 parents 63b7bbc + 8d67257 commit b1d7759
Show file tree
Hide file tree
Showing 4 changed files with 191 additions and 43 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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)
Expand All @@ -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
)
}
}
}

Expand All @@ -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)
}
}
}
}
Expand Down Expand Up @@ -219,7 +281,6 @@ private fun PhoneBody(
}
}
}

}

Spacer(modifier = Modifier
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -40,16 +40,111 @@ 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(
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),
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(
Expand All @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion app/src/main/res/layout/fragment_archives.xml
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
2 changes: 1 addition & 1 deletion app/src/main/res/values/strings.xml
Original file line number Diff line number Diff line change
Expand Up @@ -476,7 +476,7 @@
<string name="archive_current_archive">Current Archive</string>
<string name="archive_pending_archives">Pending Archives:</string>
<string name="archive_choose_archive">Choose Archive:</string>
<string name="button_create_new_archive">Create New Archive</string>
<string name="create_new_archive">Create new Archive</string>
<string name="archive_accept_pending_archive_success">Archive accepted successfully.</string>
<string name="archive_decline_pending_archive_success">Archive declined successfully.</string>
<string name="archive_current_archive_switch_success">Archive switched successfully.</string>
Expand Down

0 comments on commit b1d7759

Please sign in to comment.