From 7fb3ddc522aba629278179279880a6b6688cf2ae Mon Sep 17 00:00:00 2001 From: mtgriego Date: Wed, 11 Sep 2024 09:16:29 -0700 Subject: [PATCH] [No Ticket] UI tweaks for PPO (#2127) * make it so pull to refresh has an animation and loading is shown with the native spinner * UI tweak to have line spacing for single line project names --- .../pledgedprojectsoverview/ui/PPOCardView.kt | 4 +- .../ui/PledgedProjectsOverviewActivity.kt | 6 +- .../ui/PledgedProjectsOverviewScreen.kt | 91 +++++++++---------- 3 files changed, 48 insertions(+), 53 deletions(-) diff --git a/app/src/main/java/com/kickstarter/features/pledgedprojectsoverview/ui/PPOCardView.kt b/app/src/main/java/com/kickstarter/features/pledgedprojectsoverview/ui/PPOCardView.kt index 51878b3347..0cad3c05da 100644 --- a/app/src/main/java/com/kickstarter/features/pledgedprojectsoverview/ui/PPOCardView.kt +++ b/app/src/main/java/com/kickstarter/features/pledgedprojectsoverview/ui/PPOCardView.kt @@ -256,11 +256,11 @@ fun ProjectPledgeSummaryView( color = colors.textPrimary, style = typography.footnoteMedium, overflow = TextOverflow.Ellipsis, - minLines = 2, + minLines = 1, maxLines = 2 ) - Spacer(modifier = Modifier.weight(1f)) + Spacer(modifier = Modifier.height(dimensions.paddingXSmall)) Text( text = stringResource(id = R.string.pledge_amount_pledged_fpo).format("pledge_amount", pledgeAmount), diff --git a/app/src/main/java/com/kickstarter/features/pledgedprojectsoverview/ui/PledgedProjectsOverviewActivity.kt b/app/src/main/java/com/kickstarter/features/pledgedprojectsoverview/ui/PledgedProjectsOverviewActivity.kt index c017c9a48d..d9724b7330 100644 --- a/app/src/main/java/com/kickstarter/features/pledgedprojectsoverview/ui/PledgedProjectsOverviewActivity.kt +++ b/app/src/main/java/com/kickstarter/features/pledgedprojectsoverview/ui/PledgedProjectsOverviewActivity.kt @@ -102,7 +102,7 @@ class PledgedProjectsOverviewActivity : AppCompatActivity() { onSendMessageClick = { projectName, projectID, ppoCards, totalAlerts, creatorID -> viewModel.onMessageCreatorClicked(projectName = projectName, projectId = projectID, creatorID = creatorID, ppoCards = ppoCards, totalAlerts = totalAlerts) }, onProjectPledgeSummaryClick = { url -> openBackingDetailsWebView( - url = env.webEndpoint() + url, + url = url, resultLauncher = null ) }, @@ -134,7 +134,7 @@ class PledgedProjectsOverviewActivity : AppCompatActivity() { PPOCardViewType.OPEN_SURVEY -> { env.analytics()?.trackPPOOpenSurveyCTAClicked(PPOCard.projectId ?: "", ppoCardPagingSource.itemSnapshotList.items, totalAlerts, PPOCard.surveyID ?: "") openBackingDetailsWebView( - url = env.webEndpoint() + (PPOCard.backingDetailsUrl ?: ""), + url = PPOCard.backingDetailsUrl ?: "", resultLauncher = startForResult ) } @@ -142,7 +142,7 @@ class PledgedProjectsOverviewActivity : AppCompatActivity() { PPOCardViewType.CONFIRM_ADDRESS -> { env.analytics()?.trackPPOConfirmAddressEditCTAClicked(PPOCard.projectId ?: "", ppoCardPagingSource.itemSnapshotList.items, totalAlerts) openBackingDetailsWebView( - url = env.webEndpoint() + (PPOCard.backingDetailsUrl ?: ""), + url = PPOCard.backingDetailsUrl ?: "", resultLauncher = startForResult ) } diff --git a/app/src/main/java/com/kickstarter/features/pledgedprojectsoverview/ui/PledgedProjectsOverviewScreen.kt b/app/src/main/java/com/kickstarter/features/pledgedprojectsoverview/ui/PledgedProjectsOverviewScreen.kt index 5ff91dcf61..465d851be3 100644 --- a/app/src/main/java/com/kickstarter/features/pledgedprojectsoverview/ui/PledgedProjectsOverviewScreen.kt +++ b/app/src/main/java/com/kickstarter/features/pledgedprojectsoverview/ui/PledgedProjectsOverviewScreen.kt @@ -2,8 +2,6 @@ package com.kickstarter.features.pledgedprojectsoverview.ui import android.content.res.Configuration import androidx.compose.foundation.Image -import androidx.compose.foundation.background -import androidx.compose.foundation.clickable import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column @@ -23,6 +21,7 @@ import androidx.compose.material.Scaffold import androidx.compose.material.SnackbarHost import androidx.compose.material.SnackbarHostState import androidx.compose.material.Text +import androidx.compose.material.pullrefresh.PullRefreshIndicator import androidx.compose.material.pullrefresh.pullRefresh import androidx.compose.material.pullrefresh.rememberPullRefreshState import androidx.compose.runtime.Composable @@ -48,7 +47,6 @@ import com.kickstarter.libs.utils.RewardViewUtils import com.kickstarter.libs.utils.extensions.format import com.kickstarter.libs.utils.extensions.isNullOrZero import com.kickstarter.ui.compose.designsystem.KSAlertDialog -import com.kickstarter.ui.compose.designsystem.KSCircularProgressIndicator import com.kickstarter.ui.compose.designsystem.KSErrorSnackbar import com.kickstarter.ui.compose.designsystem.KSHeadsupSnackbar import com.kickstarter.ui.compose.designsystem.KSPrimaryGreenButton @@ -178,41 +176,41 @@ fun PledgedProjectsOverviewScreen( isLoading, pullRefreshCallback, ) - Box( - modifier = Modifier - .fillMaxSize() - .pullRefresh(pullRefreshState), - contentAlignment = Alignment.Center - ) { - Scaffold( - snackbarHost = { - SnackbarHost( - modifier = Modifier.padding(dimensions.paddingSmall), - hostState = errorSnackBarHostState, - snackbar = { data -> - // Action label is typically for the action on a snackbar, but we can - // leverage it and show different visuals depending on what we pass in - if (data.actionLabel == KSSnackbarTypes.KS_ERROR.name) { - KSErrorSnackbar(text = data.message) - } else { - KSHeadsupSnackbar(text = data.message) - } + Scaffold( + snackbarHost = { + SnackbarHost( + modifier = Modifier.padding(dimensions.paddingSmall), + hostState = errorSnackBarHostState, + snackbar = { data -> + // Action label is typically for the action on a snackbar, but we can + // leverage it and show different visuals depending on what we pass in + if (data.actionLabel == KSSnackbarTypes.KS_ERROR.name) { + KSErrorSnackbar(text = data.message) + } else { + KSHeadsupSnackbar(text = data.message) } - ) - }, - modifier = modifier, - topBar = { - TopToolBar( - title = stringResource(id = R.string.Project_alerts), - titleColor = colors.textPrimary, - leftOnClickAction = onBackPressed, - leftIconColor = colors.icon, - leftIconModifier = Modifier.testTag(PledgedProjectsOverviewScreenTestTag.BACK_BUTTON.name), - backgroundColor = colors.backgroundSurfacePrimary, - ) - }, - backgroundColor = colors.backgroundSurfacePrimary - ) { padding -> + } + ) + }, + modifier = modifier, + topBar = { + TopToolBar( + title = stringResource(id = R.string.Project_alerts), + titleColor = colors.textPrimary, + leftOnClickAction = onBackPressed, + leftIconColor = colors.icon, + leftIconModifier = Modifier.testTag(PledgedProjectsOverviewScreenTestTag.BACK_BUTTON.name), + backgroundColor = colors.backgroundSurfacePrimary, + ) + }, + backgroundColor = colors.backgroundSurfacePrimary + ) { padding -> + Box( + modifier = Modifier + .fillMaxSize() + .pullRefresh(pullRefreshState), + contentAlignment = Alignment.TopCenter + ) { if (isErrored) { PPOScreenErrorState() } else if (showEmptyState) { @@ -287,17 +285,14 @@ fun PledgedProjectsOverviewScreen( } } } - if (isLoading) { - Box( - modifier = Modifier - .fillMaxSize() - .background(KSTheme.colors.backgroundAccentGraySubtle.copy(alpha = 0.5f)) - .clickable(enabled = false) { }, - contentAlignment = Alignment.Center - ) { - KSCircularProgressIndicator() - } - } + + PullRefreshIndicator( + modifier = Modifier.align(Alignment.TopCenter), + refreshing = isLoading, + state = pullRefreshState, + backgroundColor = colors.backgroundAccentGraySubtle, + contentColor = colors.backgroundAccentGreenBold + ) } }