-
Notifications
You must be signed in to change notification settings - Fork 991
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[MBL-1229] Add Compose Views for Add-ons screen (#1964)
* WIP - add ons scrren and container * minor updates to add-ons * add more add on screen functionality, further testing needed when implemented * lint * add spacing at bottom of list
- Loading branch information
Showing
4 changed files
with
543 additions
and
6 deletions.
There are no files selected for viewing
211 changes: 211 additions & 0 deletions
211
app/src/main/java/com/kickstarter/ui/activities/compose/projectpage/AddOnsContainer.kt
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,211 @@ | ||
| package com.kickstarter.ui.activities.compose.projectpage | ||
|
|
||
| import android.content.res.Configuration | ||
| import androidx.compose.foundation.background | ||
| import androidx.compose.foundation.border | ||
| import androidx.compose.foundation.layout.Arrangement | ||
| import androidx.compose.foundation.layout.Box | ||
| import androidx.compose.foundation.layout.Column | ||
| import androidx.compose.foundation.layout.Row | ||
| 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.size | ||
| import androidx.compose.foundation.layout.width | ||
| import androidx.compose.foundation.shape.CircleShape | ||
| import androidx.compose.material.Card | ||
| import androidx.compose.material.Text | ||
| import androidx.compose.runtime.Composable | ||
| import androidx.compose.runtime.getValue | ||
| import androidx.compose.runtime.mutableStateOf | ||
| import androidx.compose.runtime.saveable.rememberSaveable | ||
| import androidx.compose.runtime.setValue | ||
| import androidx.compose.ui.Alignment | ||
| import androidx.compose.ui.Modifier | ||
| import androidx.compose.ui.tooling.preview.Preview | ||
| import com.kickstarter.ui.compose.designsystem.KSCoralBadge | ||
| import com.kickstarter.ui.compose.designsystem.KSDividerLineGrey | ||
| import com.kickstarter.ui.compose.designsystem.KSPrimaryBlackButton | ||
| import com.kickstarter.ui.compose.designsystem.KSStepper | ||
| import com.kickstarter.ui.compose.designsystem.KSTheme | ||
| import com.kickstarter.ui.compose.designsystem.KSTheme.colors | ||
| import com.kickstarter.ui.compose.designsystem.KSTheme.dimensions | ||
| import com.kickstarter.ui.compose.designsystem.KSTheme.typography | ||
| import com.kickstarter.ui.compose.designsystem.shapes | ||
|
|
||
| @Composable | ||
| @Preview(name = "Light", uiMode = Configuration.UI_MODE_NIGHT_NO) | ||
| @Preview(name = "Dark", uiMode = Configuration.UI_MODE_NIGHT_YES) | ||
| private fun AddOnsContainerPreview() { | ||
| KSTheme { | ||
| AddOnsContainer( | ||
| title = "This Is A Test", | ||
| amount = "$500", | ||
| shippingAmount = "$5 shipping each", | ||
| conversionAmount = "About $500", | ||
| description = "This is just a test, don't worry about it, This is just a test, don't worry about it, This is just a test, don't worry about it, This is just a test, don't worry about it", | ||
| includesList = listOf("this is item 1", "this is item 2", "this is item 3"), | ||
| limit = 10, | ||
| buttonEnabled = true, | ||
| buttonText = "Add", | ||
| onItemAddedOrRemoved = { count -> | ||
| } | ||
| ) | ||
| } | ||
| } | ||
|
|
||
| @Composable | ||
| fun AddOnsContainer( | ||
| title: String, | ||
| amount: String, | ||
| shippingAmount: String? = null, | ||
| conversionAmount: String? = null, | ||
| description: String, | ||
| includesList: List<String> = listOf(), | ||
| limit: Int = -1, | ||
| buttonEnabled: Boolean, | ||
| buttonText: String, | ||
| onItemAddedOrRemoved: (count: Int) -> Unit | ||
| ) { | ||
| var addOnCount by rememberSaveable { mutableStateOf(0) } | ||
|
|
||
| Card( | ||
| modifier = Modifier.fillMaxWidth(), | ||
| backgroundColor = colors.kds_white, | ||
| shape = shapes.medium | ||
| ) { | ||
| Column( | ||
| modifier = Modifier | ||
| .fillMaxWidth() | ||
| .padding(dimensions.paddingMediumLarge) | ||
| ) { | ||
|
|
||
| Text(text = title, style = typography.title2Bold, color = colors.kds_black) | ||
|
|
||
| Row { | ||
| Text(text = amount, style = typography.callout, color = colors.textAccentGreen) | ||
|
|
||
| if (!shippingAmount.isNullOrEmpty()) { | ||
| Text( | ||
| text = " + $shippingAmount", | ||
| style = typography.callout, | ||
| color = colors.textAccentGreen | ||
| ) | ||
| } | ||
| } | ||
|
|
||
| if (!conversionAmount.isNullOrEmpty()) { | ||
| Text( | ||
| modifier = Modifier.padding(top = dimensions.paddingXSmall), | ||
| text = conversionAmount, | ||
| style = typography.footnoteMedium, | ||
| color = colors.textSecondary | ||
| ) | ||
| } | ||
|
|
||
| Spacer(modifier = Modifier.height(dimensions.paddingMediumLarge)) | ||
|
|
||
| Text(text = description, style = typography.body2, color = colors.textPrimary) | ||
|
|
||
| Spacer(modifier = Modifier.height(dimensions.paddingMedium)) | ||
|
|
||
| KSDividerLineGrey() | ||
|
|
||
| Spacer(modifier = Modifier.height(dimensions.paddingMedium)) | ||
|
|
||
| if (includesList.isNotEmpty()) { | ||
| Text( | ||
| text = "Includes", | ||
| style = typography.calloutMedium, | ||
| color = colors.textSecondary | ||
| ) | ||
|
|
||
| includesList.forEachIndexed { index, itemDescription -> | ||
| Row(verticalAlignment = Alignment.CenterVertically) { | ||
| Spacer(modifier = Modifier.width(dimensions.paddingMediumSmall)) | ||
|
|
||
| Box( | ||
| modifier = Modifier | ||
| .padding(end = dimensions.paddingSmall) | ||
| .size(dimensions.dottedListDotSize) | ||
| .background(color = colors.textPrimary, shape = CircleShape), | ||
| ) | ||
|
|
||
| Text( | ||
| text = itemDescription, | ||
| style = typography.body2, | ||
| color = colors.textPrimary | ||
| ) | ||
|
|
||
| Spacer(modifier = Modifier.width(dimensions.paddingMediumSmall)) | ||
| } | ||
|
|
||
| if (index != includesList.lastIndex) KSDividerLineGrey() | ||
| } | ||
| } | ||
|
|
||
| if (limit > 0) { | ||
| Spacer(Modifier.height(dimensions.paddingMedium)) | ||
|
|
||
| KSCoralBadge(text = "Limit $limit") | ||
| } | ||
|
|
||
| Spacer(Modifier.height(dimensions.paddingLarge)) | ||
|
|
||
| when (addOnCount) { | ||
| 0 -> { | ||
| KSPrimaryBlackButton( | ||
| onClickAction = { | ||
| addOnCount++ | ||
| onItemAddedOrRemoved(addOnCount) | ||
| }, | ||
| text = buttonText, | ||
| isEnabled = buttonEnabled | ||
| ) | ||
| } | ||
| else -> { | ||
| Row( | ||
| modifier = Modifier.fillMaxWidth(), | ||
| verticalAlignment = Alignment.CenterVertically, | ||
| horizontalArrangement = Arrangement.SpaceBetween | ||
| ) { | ||
| KSStepper( | ||
| onPlusClicked = { | ||
| addOnCount++ | ||
| onItemAddedOrRemoved(addOnCount) | ||
| }, | ||
| isPlusEnabled = addOnCount < limit, | ||
| onMinusClicked = { | ||
| addOnCount-- | ||
| onItemAddedOrRemoved(addOnCount) | ||
| }, | ||
| isMinusEnabled = true | ||
| ) | ||
|
|
||
| Box( | ||
| modifier = Modifier | ||
| .border( | ||
| width = dimensions.dividerThickness, | ||
| color = colors.textSecondary, | ||
| shape = shapes.small | ||
| ) | ||
| .padding( | ||
| top = dimensions.paddingSmall, | ||
| bottom = dimensions.paddingSmall, | ||
| start = dimensions.paddingMedium, | ||
| end = dimensions.paddingMedium | ||
| ) | ||
| ) { | ||
| Text( | ||
| text = "$addOnCount", | ||
| style = typography.callout, | ||
| color = colors.textPrimary | ||
| ) | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } |
Oops, something went wrong.