Skip to content

Commit

Permalink
feat: [ANDROAPP-5905] Update ListCard component Title and description (…
Browse files Browse the repository at this point in the history 
…#188)

* feat: [ANDROAPP-5905] add description to listCard and allow for different Textstyle and colors for title and description

* feat: [ANDROAPP-5905] fix test

* feat: [ANDROAPP-5905] correct font provision
  • Loading branch information
@xavimolloy
xavimolloy authored Feb 8, 2024
1 parent b61ce4a commit e83729e
Show file tree
Hide file tree
Showing 5 changed files with 204 additions and 37 deletions.
107 changes: 91 additions & 16 deletions common/src/commonMain/kotlin/org/hisp/dhis/common/screens/ListCardScreen.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,11 @@ import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.size
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.CheckCircle
import androidx.compose.material.icons.outlined.Event
import androidx.compose.material.icons.outlined.Sync
import androidx.compose.material.icons.outlined.SyncProblem
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateListOf
Expand All @@ -32,6 +34,8 @@ import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer
import org.hisp.dhis.mobile.ui.designsystem.component.InfoBar
import org.hisp.dhis.mobile.ui.designsystem.component.InfoBarData
import org.hisp.dhis.mobile.ui.designsystem.component.ListCard
import org.hisp.dhis.mobile.ui.designsystem.component.ListCardDescriptionModel
import org.hisp.dhis.mobile.ui.designsystem.component.ListCardTitleModel
import org.hisp.dhis.mobile.ui.designsystem.component.MetadataAvatar
import org.hisp.dhis.mobile.ui.designsystem.component.SubTitle
import org.hisp.dhis.mobile.ui.designsystem.resource.provideDHIS2Icon
Expand Down Expand Up @@ -92,7 +96,7 @@ fun ListCardScreen() {
style = AvatarStyle.TEXT,
)
},
title = "Palak Khanna, F, 61",
title = ListCardTitleModel(text = "Palak Khanna, F, 61"),
lastUpdated = "5 hours",
additionalInfoList = basicAdditionalItemList.toMutableList(),
actionButton = {
Expand Down Expand Up @@ -123,7 +127,7 @@ fun ListCardScreen() {
style = AvatarStyle.IMAGE,
)
},
title = "Kunal Choudary, M, 55",
title = ListCardTitleModel(text = "Kunal Choudary, M, 55"),
lastUpdated = "24 min",
additionalInfoList = enrollmentCompletedList.toMutableList(),
actionButton = {
Expand Down Expand Up @@ -167,7 +171,7 @@ fun ListCardScreen() {
style = AvatarStyle.METADATA,
)
},
title = "Anita Mathews, F, 72",
title = ListCardTitleModel(text = "Anita Mathews, F, 72"),
lastUpdated = "5 hours",
additionalInfoList = fullItemList.toMutableList(),
actionButton = {
Expand Down Expand Up @@ -225,7 +229,7 @@ fun ListCardScreen() {
style = AvatarStyle.TEXT,
)
},
title = "Aditi Singh, F, 61",
title = ListCardTitleModel(text = "Aditi Singh, F, 61"),
lastUpdated = "5 hours",
additionalInfoList = errorList,
actionButton = {
Expand Down Expand Up @@ -258,7 +262,7 @@ fun ListCardScreen() {
SubTitle("With shadow:")

ListCard(
title = "12/18/2021",
title = ListCardTitleModel(text = "12/18/2021"),
lastUpdated = "now",
additionalInfoList = basicAdditionalItemList,
actionButton = {
Expand All @@ -283,7 +287,7 @@ fun ListCardScreen() {

ListCard(
shadow = false,
title = "12/18/2021",
title = ListCardTitleModel(text = "12/18/2021"),
lastUpdated = "now",
additionalInfoList = basicAdditionalItemList,
actionButton = {
Expand Down Expand Up @@ -326,7 +330,7 @@ fun ListCardScreen() {
style = AvatarStyle.METADATA,
)
},
title = "12/18/2021 at 16:30",
title = ListCardTitleModel(text = "12/18/2021 at 16:30"),
lastUpdated = "now",
additionalInfoList = eventsTimelineTeiDashboardList,
actionButton = {
Expand Down Expand Up @@ -369,25 +373,96 @@ fun ListCardScreen() {
style = AvatarStyle.METADATA,
)
},
title = "12/18/2021 at 16:30",
title = ListCardTitleModel(text = "12/18/2021 at 16:30"),
lastUpdated = "now",
additionalInfoList = eventsTimelineTeiDashboardList,
actionButton = {
Button(
style = ButtonStyle.TONAL,
text = "Retry sync",
onCardClick = {},
)

SubTitle("ListCards for events displayed in TEI dashboard:")

val eventsInTeiDashboardTitleStyle = MaterialTheme.typography.titleSmall

ListCard(

title = ListCardTitleModel(text = "Scheduled for 09/18/2021", style = eventsInTeiDashboardTitleStyle, color = TextColor.OnSurface),
additionalInfoList = listOf(
AdditionalInfoItem(
icon = {
Icon(
imageVector = Icons.Outlined.Sync,
imageVector = Icons.Outlined.Event,
contentDescription = "Icon Button",
tint = TextColor.OnPrimaryContainer,
tint = AdditionalInfoItemColor.SUCCESS.color,
)
},
onClick = {},
modifier = Modifier.fillMaxWidth(),
value = "In 60 days",
color = AdditionalInfoItemColor.SUCCESS.color,
isConstantItem = true,
),

),
onCardClick = {},
)

ListCard(

title = ListCardTitleModel(text = "09/18/2021", style = eventsInTeiDashboardTitleStyle, color = TextColor.OnSurface),
description = ListCardDescriptionModel(text = "Treatment visits"),
additionalInfoList = listOf(
AdditionalInfoItem(
icon = {
Icon(
imageVector = Icons.Outlined.Event,
contentDescription = "Icon Button",
tint = AdditionalInfoItemColor.SUCCESS.color,
)
},
value = "In 60 days",
color = AdditionalInfoItemColor.SUCCESS.color,
isConstantItem = true,
),
AdditionalInfoItem(key = "Drug resistance:", value = "Monoresistance"),
AdditionalInfoItem(key = "treatment:", value = "Initial regiment- first-line drugs"),
),

onCardClick = {},
)
ListCard(
listAvatar = {
Avatar(
metadataAvatar = {
MetadataAvatar(
icon = {
Icon(
painter = provideDHIS2Icon("dhis2_microscope_outline"),
contentDescription = "Button",
tint = SurfaceColor.Primary,
)
},
)
},
style = AvatarStyle.METADATA,
)
},
title = ListCardTitleModel(text = "Scheduled for 09/18/2021", style = eventsInTeiDashboardTitleStyle, color = TextColor.OnSurface),
additionalInfoList = listOf(
AdditionalInfoItem(
icon = {
Icon(
imageVector = Icons.Outlined.Event,
contentDescription = "Icon Button",
tint = AdditionalInfoItemColor.SUCCESS.color,
)
},
value = "In 60 days",
color = AdditionalInfoItemColor.SUCCESS.color,
isConstantItem = true,
),
AdditionalInfoItem(key = "Drug resistance:", value = "Monoresistance"),
AdditionalInfoItem(key = "treatment:", value = "Initial regiment- first-line drugs"),
),
onCardClick = {},
)
Spacer(Modifier.size(Spacing.Spacing16))
}
}
26 changes: 23 additions & 3 deletions ...gnsystem/src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/ListCard.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ import androidx.compose.ui.graphics.painter.Painter
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.platform.testTag
import androidx.compose.ui.semantics.Role
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.unit.dp
import org.hisp.dhis.mobile.ui.designsystem.component.internal.conditional
import org.hisp.dhis.mobile.ui.designsystem.resource.provideDHIS2Icon
Expand Down Expand Up @@ -73,7 +74,8 @@ import org.hisp.dhis.mobile.ui.designsystem.theme.listCardShadow
@Composable
fun ListCard(
listAvatar: (@Composable () -> Unit)? = null,
title: String,
title: ListCardTitleModel,
description: ListCardDescriptionModel? = null,
lastUpdated: String? = null,
additionalInfoList: List<AdditionalInfoItem>,
actionButton: @Composable (() -> Unit)? = null,
Expand Down Expand Up @@ -101,7 +103,7 @@ fun ListCard(
.conditional(shadow, {
listCardShadow(modifier)
})
.background(color = TextColor.OnPrimary)
.background(color = TextColor.OnPrimary, shape = RoundedCornerShape(Radius.S))
.clip(shape = RoundedCornerShape(Radius.S))
.clickable(
role = Role.Button,
Expand All @@ -121,11 +123,15 @@ fun ListCard(
Column(Modifier.fillMaxWidth().weight(1f)) {
Row(horizontalArrangement = Arrangement.SpaceBetween) {
// Row with header and last updated
ListCardTitle(text = title, modifier.weight(1f))
ListCardTitle(title = title, modifier.weight(1f).padding(bottom = if (description?.text != null) Spacing.Spacing0 else Spacing4))
if (lastUpdated != null) {
ListCardLastUpdated(lastUpdated)
}
}
description?.let {
ListCardDescription(it, Modifier)
}

AdditionalInfoColumn(
expandableItems = expandableItemList,
constantItems = constantItemList,
Expand Down Expand Up @@ -507,6 +513,20 @@ data class AdditionalInfoItem(
val action: (() -> Unit)? = null,
)

data class ListCardTitleModel(
val style: TextStyle? = null,
val color: Color? = TextColor.OnPrimaryContainer,
val text: String,
val modifier: Modifier = Modifier,
)

data class ListCardDescriptionModel(
val style: TextStyle? = null,
val color: Color? = TextColor.OnSurface,
val text: String? = null,
val modifier: Modifier = Modifier,
)

enum class AdditionalInfoItemColor(val color: Color) {
DEFAULT_KEY(TextColor.OnSurfaceLight),
DEFAULT_VALUE(TextColor.OnSurface),
Expand Down
25 changes: 20 additions & 5 deletions designsystem/src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/Text.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,17 +133,32 @@ fun Description(

@Composable
internal fun ListCardTitle(
text: String,
title: ListCardTitleModel,
modifier: Modifier = Modifier,
) {
Text(
text,
color = TextColor.OnPrimaryContainer,
style = MaterialTheme.typography.titleMedium.copy(fontWeight = FontWeight.Bold),
modifier = modifier.padding(bottom = Spacing.Spacing4),
title.text,
color = title.color ?: TextColor.OnPrimaryContainer,
style = title.style ?: MaterialTheme.typography.titleMedium.copy(fontWeight = FontWeight.Bold),
modifier = modifier,
)
}

@Composable
internal fun ListCardDescription(
description: ListCardDescriptionModel,
modifier: Modifier = Modifier,
) {
description.text?.let {
Text(
description.text,
color = description.color ?: TextColor.OnSurface,
style = description.style ?: MaterialTheme.typography.bodyMedium,
modifier = modifier.padding(bottom = Spacing.Spacing8),
)
}
}

@Composable
internal fun TEIDetailTitle(
text: String,
Expand Down
Loading

0 comments on commit e83729e

Please sign in to comment.