-
Notifications
You must be signed in to change notification settings - Fork 1.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Refactor DynamicCardComposable to split composables
- Loading branch information
Artyom Vlasov
committed
Dec 12, 2023
1 parent
08eef4c
commit 2d34dfa
Showing
5 changed files
with
214 additions
and
140 deletions.
There are no files selected for viewing
28 changes: 28 additions & 0 deletions
28
...n/java/org/wordpress/android/ui/mysite/cards/dynamiccard/DynamicCardCallToActionButton.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,28 @@ | ||
package org.wordpress.android.ui.mysite.cards.dynamiccard | ||
|
||
import androidx.compose.foundation.layout.padding | ||
import androidx.compose.material3.MaterialTheme | ||
import androidx.compose.material3.Text | ||
import androidx.compose.material3.TextButton | ||
import androidx.compose.runtime.Composable | ||
import androidx.compose.ui.Modifier | ||
import androidx.compose.ui.unit.dp | ||
import org.wordpress.android.ui.domains.management.success | ||
|
||
@Composable | ||
fun DynamicCardCallToActionButton( | ||
text: String, | ||
onClicked: () -> Unit | ||
) { | ||
TextButton( | ||
modifier = Modifier.padding(start = 4.dp), | ||
onClick = onClicked, | ||
) { | ||
Text( | ||
text = text, | ||
style = MaterialTheme.typography.bodyMedium.copy( | ||
color = MaterialTheme.colorScheme.success | ||
), | ||
) | ||
} | ||
} |
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
29 changes: 29 additions & 0 deletions
29
...rc/main/java/org/wordpress/android/ui/mysite/cards/dynamiccard/DynamicCardFeatureImage.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,29 @@ | ||
package org.wordpress.android.ui.mysite.cards.dynamiccard | ||
|
||
import androidx.compose.foundation.layout.aspectRatio | ||
import androidx.compose.foundation.layout.fillMaxWidth | ||
import androidx.compose.foundation.layout.padding | ||
import androidx.compose.foundation.shape.RoundedCornerShape | ||
import androidx.compose.runtime.Composable | ||
import androidx.compose.ui.Modifier | ||
import androidx.compose.ui.draw.clip | ||
import androidx.compose.ui.graphics.painter.ColorPainter | ||
import androidx.compose.ui.layout.ContentScale | ||
import androidx.compose.ui.unit.dp | ||
import coil.compose.AsyncImage | ||
import org.wordpress.android.ui.compose.theme.AppColor | ||
|
||
@Composable | ||
fun DynamicCardFeatureImage(imageUrl: String) { | ||
AsyncImage( | ||
model = imageUrl, | ||
contentDescription = null, | ||
contentScale = ContentScale.Crop, | ||
placeholder = ColorPainter(AppColor.Gray30), | ||
modifier = Modifier | ||
.padding(start = 16.dp, end = 16.dp) | ||
.clip(RoundedCornerShape(6.dp)) | ||
.fillMaxWidth() | ||
.aspectRatio(2f) | ||
) | ||
} |
67 changes: 67 additions & 0 deletions
67
...ress/src/main/java/org/wordpress/android/ui/mysite/cards/dynamiccard/DynamicCardHeader.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,67 @@ | ||
package org.wordpress.android.ui.mysite.cards.dynamiccard | ||
|
||
import androidx.compose.foundation.layout.Box | ||
import androidx.compose.foundation.layout.Row | ||
import androidx.compose.foundation.layout.padding | ||
import androidx.compose.foundation.layout.size | ||
import androidx.compose.material.ContentAlpha | ||
import androidx.compose.material.icons.Icons | ||
import androidx.compose.material.icons.rounded.MoreVert | ||
import androidx.compose.material3.Icon | ||
import androidx.compose.material3.IconButton | ||
import androidx.compose.material3.MaterialTheme | ||
import androidx.compose.material3.Text | ||
import androidx.compose.runtime.Composable | ||
import androidx.compose.ui.Alignment | ||
import androidx.compose.ui.Modifier | ||
import androidx.compose.ui.res.stringResource | ||
import androidx.compose.ui.text.font.FontWeight | ||
import androidx.compose.ui.unit.dp | ||
import org.wordpress.android.R | ||
|
||
@Composable | ||
fun DynamicCardHeader( | ||
title: String?, | ||
onHideMenuClicked: () -> Unit, | ||
modifier: Modifier = Modifier, | ||
) { | ||
Row( | ||
modifier = modifier.padding(start = 16.dp, end = 16.dp, bottom = 8.dp), | ||
verticalAlignment = Alignment.CenterVertically | ||
) { | ||
Title(title = title, modifier = Modifier.weight(1f)) | ||
Menu(onHideMenuClicked) | ||
} | ||
} | ||
|
||
@Composable | ||
private fun Title(title: String?, modifier: Modifier = Modifier) { | ||
Box( | ||
modifier = modifier.padding(end = 16.dp), | ||
content = { | ||
title?.let { title -> | ||
Text( | ||
text = title, | ||
style = MaterialTheme.typography.titleMedium.copy( | ||
fontWeight = FontWeight.Medium, | ||
color = MaterialTheme.colorScheme.onSurface | ||
), | ||
) | ||
} | ||
} | ||
) | ||
} | ||
|
||
@Composable | ||
private fun Menu(onHideMenuClicked: () -> Unit) { | ||
IconButton( | ||
modifier = Modifier.size(32.dp), // to match the icon in my_site_card_toolbar.xml | ||
onClick = onHideMenuClicked | ||
) { | ||
Icon( | ||
imageVector = Icons.Rounded.MoreVert, | ||
contentDescription = stringResource(id = R.string.more), | ||
tint = MaterialTheme.colorScheme.onSurface.copy(alpha = ContentAlpha.medium), | ||
) | ||
} | ||
} |
82 changes: 82 additions & 0 deletions
82
WordPress/src/main/java/org/wordpress/android/ui/mysite/cards/dynamiccard/DynamicCardRows.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,82 @@ | ||
package org.wordpress.android.ui.mysite.cards.dynamiccard | ||
|
||
import androidx.compose.foundation.layout.Arrangement | ||
import androidx.compose.foundation.layout.Column | ||
import androidx.compose.foundation.layout.Row | ||
import androidx.compose.foundation.layout.padding | ||
import androidx.compose.foundation.layout.size | ||
import androidx.compose.foundation.lazy.LazyColumn | ||
import androidx.compose.foundation.lazy.items | ||
import androidx.compose.material.ContentAlpha | ||
import androidx.compose.material3.MaterialTheme | ||
import androidx.compose.material3.Text | ||
import androidx.compose.runtime.Composable | ||
import androidx.compose.ui.Alignment | ||
import androidx.compose.ui.Modifier | ||
import androidx.compose.ui.graphics.painter.ColorPainter | ||
import androidx.compose.ui.layout.ContentScale | ||
import androidx.compose.ui.text.font.FontWeight | ||
import androidx.compose.ui.unit.dp | ||
import coil.compose.AsyncImage | ||
import org.wordpress.android.ui.compose.theme.AppColor | ||
import org.wordpress.android.ui.mysite.MySiteCardAndItem | ||
|
||
@Composable | ||
fun DynamicCardRows(rows: List<MySiteCardAndItem.Card.Dynamic.Row>) { | ||
LazyColumn( | ||
verticalArrangement = Arrangement.spacedBy(8.dp), | ||
modifier = Modifier.padding(top = 8.dp, start = 16.dp, end = 16.dp) | ||
) { | ||
items(items = rows) { row -> Item(row) } | ||
} | ||
} | ||
|
||
@Composable | ||
private fun Item(row: MySiteCardAndItem.Card.Dynamic.Row) { | ||
Row(verticalAlignment = Alignment.CenterVertically) { | ||
row.iconUrl?.let { iconUrl -> | ||
Icon(iconUrl) | ||
} | ||
Column(modifier = Modifier.padding(start = row.iconUrl?.run { 12.dp } ?: 0.dp)) { | ||
row.title?.let { title -> | ||
Title(title) | ||
} | ||
row.description?.let { description -> | ||
Description(description) | ||
} | ||
} | ||
} | ||
} | ||
|
||
@Composable | ||
private fun Icon(iconUrl: String) { | ||
AsyncImage( | ||
model = iconUrl, | ||
contentDescription = null, | ||
contentScale = ContentScale.Fit, | ||
placeholder = ColorPainter(AppColor.Gray30), | ||
modifier = Modifier.size(48.dp), | ||
) | ||
} | ||
|
||
@Composable | ||
private fun Title(title: String) { | ||
Text( | ||
text = title, | ||
style = MaterialTheme.typography.bodyLarge.copy( | ||
fontWeight = FontWeight.SemiBold, | ||
color = MaterialTheme.colorScheme.onSurface | ||
) | ||
) | ||
} | ||
|
||
@Composable | ||
private fun Description(description: String) { | ||
Text( | ||
text = description, | ||
style = MaterialTheme.typography.bodyMedium.copy( | ||
fontWeight = FontWeight.Light, | ||
color = MaterialTheme.colorScheme.onSurface.copy(alpha = ContentAlpha.medium) | ||
) | ||
) | ||
} |