From 6f7cd7be4d21c8320a085820ffbaa63f6a575949 Mon Sep 17 00:00:00 2001 From: Sasikanth Miriyampalli Date: Fri, 2 Feb 2024 12:36:04 +0530 Subject: [PATCH] ANDROAPP-5889-mobile-ui-indicator-component (#182) * Add indicator input * Fix corner radius not applying to start of indicator input --- .../kotlin/org/hisp/dhis/common/App.kt | 4 +- .../hisp/dhis/common/screens/Components.kt | 1 + .../common/screens/IndicatorInputScreen.kt | 36 +++++++++++ .../designsystem/component/IndicatorInput.kt | 60 +++++++++++++++++++ 4 files changed, 100 insertions(+), 1 deletion(-) create mode 100644 common/src/commonMain/kotlin/org/hisp/dhis/common/screens/IndicatorInputScreen.kt create mode 100644 designsystem/src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/IndicatorInput.kt diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/App.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/App.kt index 1ec4017ac..be4a6c74d 100644 --- a/common/src/commonMain/kotlin/org/hisp/dhis/common/App.kt +++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/App.kt @@ -36,6 +36,7 @@ import org.hisp.dhis.common.screens.FormsComponentsScreen import org.hisp.dhis.common.screens.FullScreenImageScreen import org.hisp.dhis.common.screens.IconButtonScreen import org.hisp.dhis.common.screens.ImageBlockScreen +import org.hisp.dhis.common.screens.IndicatorInputScreen import org.hisp.dhis.common.screens.InputAgeScreen import org.hisp.dhis.common.screens.InputBarCodeScreen import org.hisp.dhis.common.screens.InputCheckBoxScreen @@ -93,7 +94,7 @@ fun App() { @Composable fun Main() { - val currentScreen = remember { mutableStateOf(Components.ORG_TREE_BOTTOM_SHEET) } + val currentScreen = remember { mutableStateOf(Components.INDICATOR_INPUT) } var expanded by remember { mutableStateOf(false) } Column( @@ -199,6 +200,7 @@ fun Main() { Components.INPUT_NOT_SUPPORTED -> InputNotSupportedScreen() Components.FULL_SCREEN_IMAGE -> FullScreenImageScreen() Components.ORG_TREE_BOTTOM_SHEET -> OrgTreeBottomSheetScreen() + Components.INDICATOR_INPUT -> IndicatorInputScreen() } } } diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/Components.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/Components.kt index 2292b8cad..947314413 100644 --- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/Components.kt +++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/Components.kt @@ -60,4 +60,5 @@ enum class Components(val label: String) { INPUT_NOT_SUPPORTED("Input Not Supported"), FULL_SCREEN_IMAGE("Full Screen Image"), ORG_TREE_BOTTOM_SHEET("Org Tree Bottom Sheet"), + INDICATOR_INPUT("Indicator Input"), } diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/IndicatorInputScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/IndicatorInputScreen.kt new file mode 100644 index 000000000..d32cbbacb --- /dev/null +++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/IndicatorInputScreen.kt @@ -0,0 +1,36 @@ +package org.hisp.dhis.common.screens + +import androidx.compose.runtime.Composable +import androidx.compose.ui.graphics.Color +import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer +import org.hisp.dhis.mobile.ui.designsystem.component.IndicatorInput + +@Composable +fun IndicatorInputScreen() { + ColumnComponentContainer { + IndicatorInput( + title = "Systolic and diastolic pressure", + content = "120 mmHg / 80 mmHg", + indicatorColor = Color(0xFF00A940), + ) + IndicatorInput( + title = "Heart rate", + content = "160 bpm", + indicatorColor = Color(0xFFE12F58), + ) + IndicatorInput( + title = "Cholesterol", + content = "190 mg/dL", + indicatorColor = Color(0xFFFADB14), + ) + IndicatorInput( + title = "Blood Oxygen Level", + content = "96%", + indicatorColor = Color(0xFFFFF7C7), + ) + IndicatorInput( + title = "Cholesterol", + content = "190 mg/dL", + ) + } +} diff --git a/designsystem/src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/IndicatorInput.kt b/designsystem/src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/IndicatorInput.kt new file mode 100644 index 000000000..4889e308d --- /dev/null +++ b/designsystem/src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/IndicatorInput.kt @@ -0,0 +1,60 @@ +package org.hisp.dhis.mobile.ui.designsystem.component + +import androidx.compose.foundation.background +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.IntrinsicSize +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.fillMaxHeight +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.requiredWidth +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.material3.MaterialTheme +import androidx.compose.material3.Text +import androidx.compose.runtime.Composable +import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.clip +import androidx.compose.ui.graphics.Color +import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing +import org.hisp.dhis.mobile.ui.designsystem.theme.SurfaceColor + +@Composable +fun IndicatorInput( + title: String, + content: String, + modifier: Modifier = Modifier, + indicatorColor: Color = SurfaceColor.Container, +) { + val backgroundColor = indicatorColor.copy(alpha = 0.1f) + + Row( + modifier = modifier.fillMaxWidth() + .height(IntrinsicSize.Max) + .clip(RoundedCornerShape(Spacing.Spacing8)) + .background(backgroundColor), + ) { + Box( + Modifier.padding( + horizontal = Spacing.Spacing16, + vertical = Spacing.Spacing8, + ).weight(1f), + ) { + Column { + Text( + text = title, + style = MaterialTheme.typography.bodyMedium, + modifier = Modifier.fillMaxWidth(), + ) + Text( + text = content, + style = MaterialTheme.typography.bodyLarge, + modifier = Modifier.fillMaxWidth(), + ) + } + } + + Box(Modifier.background(indicatorColor).requiredWidth(Spacing.Spacing16).fillMaxHeight()) + } +}