diff --git a/android/src/main/java/org/hisp/dhis/android/MainActivity.kt b/android/src/main/java/org/hisp/dhis/android/MainActivity.kt index ef9acf5fe..b17de2cd7 100644 --- a/android/src/main/java/org/hisp/dhis/android/MainActivity.kt +++ b/android/src/main/java/org/hisp/dhis/android/MainActivity.kt @@ -3,10 +3,14 @@ package org.hisp.dhis.android import android.graphics.Bitmap import android.graphics.BitmapFactory import android.os.Bundle +import androidx.activity.ComponentActivity import androidx.activity.compose.setContent import androidx.appcompat.app.AppCompatActivity +import androidx.compose.runtime.Composable +import androidx.compose.runtime.SideEffect import androidx.compose.ui.graphics.asImageBitmap import androidx.compose.ui.platform.LocalContext +import androidx.core.view.WindowCompat import org.hisp.dhis.common.App class MainActivity : AppCompatActivity() { @@ -14,6 +18,7 @@ class MainActivity : AppCompatActivity() { super.onCreate(savedInstanceState) setContent { val res = LocalContext.current.resources + SetStatusBarColor() App( imageBitmapLoader = { BitmapFactory.decodeResource( @@ -27,3 +32,18 @@ class MainActivity : AppCompatActivity() { } } } + +@Composable +fun SetStatusBarColor() { + val context = LocalContext.current + val window = (context as? ComponentActivity)?.window + + SideEffect { + window?.let { + WindowCompat.getInsetsController(it, it.decorView).apply { + isAppearanceLightStatusBars = true + } + it.statusBarColor = 0xFFE2F2FF.toInt() + } + } +} 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 5d663b198..36503acb9 100644 --- a/common/src/commonMain/kotlin/org/hisp/dhis/common/App.kt +++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/App.kt @@ -5,12 +5,14 @@ import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.padding import androidx.compose.runtime.Composable +import androidx.compose.runtime.getValue import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember +import androidx.compose.runtime.setValue import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.ImageBitmap -import org.hisp.dhis.common.screens.Components +import org.hisp.dhis.common.screens.Groups import org.hisp.dhis.common.screens.NoComponentSelectedScreen import org.hisp.dhis.common.screens.actionInputs.ActionInputsScreen import org.hisp.dhis.common.screens.basicTextInputs.BasicTextInputsScreen @@ -31,8 +33,11 @@ import org.hisp.dhis.common.screens.toggleableInputs.ToggleableInputsScreen import org.hisp.dhis.mobile.ui.designsystem.component.DropdownItem import org.hisp.dhis.mobile.ui.designsystem.component.InputDropDown import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState +import org.hisp.dhis.mobile.ui.designsystem.component.InputStyle import org.hisp.dhis.mobile.ui.designsystem.theme.DHIS2Theme +import org.hisp.dhis.mobile.ui.designsystem.theme.Shape import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing +import org.hisp.dhis.mobile.ui.designsystem.theme.SurfaceColor @Composable fun App(imageBitmapLoader: (() -> ImageBitmap)? = null) { @@ -45,50 +50,66 @@ fun App(imageBitmapLoader: (() -> ImageBitmap)? = null) { fun Main( imageBitmapLoader: (() -> ImageBitmap)?, ) { - val currentScreen = remember { mutableStateOf(Components.CARDS) } + val currentScreen = remember { mutableStateOf(Groups.NO_GROUP_SELECTED) } + var isComponentSelected by remember { mutableStateOf(false) } Column( verticalArrangement = Arrangement.spacedBy(Spacing.Spacing16), modifier = Modifier - .background(Color.White) - .padding(Spacing.Spacing16), + .background(SurfaceColor.Container), ) { val screenDropdownItemList = mutableListOf() - Components.entries.forEach { + Groups.entries.forEach { screenDropdownItemList.add(DropdownItem(it.label)) } - InputDropDown( - "Components", - dropdownItems = screenDropdownItemList.toList(), - onItemSelected = { currentScreen.value = getCurrentScreen(it.label) }, - onResetButtonClicked = { currentScreen.value = Components.NO_COMPONENT_SELECTED }, - state = InputShellState.UNFOCUSED, - selectedItem = DropdownItem(currentScreen.value.label), - ) + if (isComponentSelected) { + InputDropDown( + modifier = Modifier.padding( + start = Spacing.Spacing16, + end = Spacing.Spacing16, + top = Spacing.Spacing16, + ), + title = "Group", + dropdownItems = screenDropdownItemList.toList(), + onItemSelected = { currentScreen.value = getCurrentScreen(it.label) }, + onResetButtonClicked = { currentScreen.value = Groups.NO_GROUP_SELECTED }, + state = InputShellState.UNFOCUSED, + expanded = true, + selectedItem = DropdownItem(currentScreen.value.label), + inputStyle = InputStyle.DataInputStyle().apply { backGroundColor = SurfaceColor.SurfaceBright }, + ) - when (currentScreen.value) { - Components.ACTION_INPUTS -> ActionInputsScreen() - Components.BADGES -> BadgesScreen() - Components.BASIC_TEXT_INPUTS -> BasicTextInputsScreen() - Components.BOTTOM_SHEETS -> BottomSheetsScreen() - Components.BUTTONS -> ButtonsScreen() - Components.CARDS -> CardsScreen() - Components.CHIPS -> ChipsScreen() - Components.INDICATOR -> IndicatorScreen() - Components.LEGEND -> LegendScreen() - Components.METADATA_AVATAR -> MetadataAvatarScreen() - Components.PROGRESS_INDICATOR -> ProgressScreen() - Components.PARAMETER_SELECTOR -> ParameterSelectorScreen() - Components.SECTIONS -> SectionScreen() - Components.TOGGLEABLE_INPUTS -> ToggleableInputsScreen(imageBitmapLoader) - Components.TAGS -> TagsScreen() - Components.SEARCH_BAR -> SearchBarScreen() - Components.NO_COMPONENT_SELECTED -> NoComponentSelectedScreen() + when (currentScreen.value) { + Groups.ACTION_INPUTS -> ActionInputsScreen() + Groups.BADGES -> BadgesScreen() + Groups.BASIC_TEXT_INPUTS -> BasicTextInputsScreen() + Groups.BOTTOM_SHEETS -> BottomSheetsScreen() + Groups.BUTTONS -> ButtonsScreen() + Groups.CARDS -> CardsScreen() + Groups.CHIPS -> ChipsScreen() + Groups.INDICATOR -> IndicatorScreen() + Groups.LEGEND -> LegendScreen() + Groups.METADATA_AVATAR -> MetadataAvatarScreen() + Groups.PROGRESS_INDICATOR -> ProgressScreen() + Groups.PARAMETER_SELECTOR -> ParameterSelectorScreen() + Groups.SECTIONS -> SectionScreen() + Groups.TOGGLEABLE_INPUTS -> ToggleableInputsScreen(imageBitmapLoader) + Groups.TAGS -> TagsScreen() + Groups.SEARCH_BAR -> SearchBarScreen() + Groups.NO_GROUP_SELECTED -> NoComponentSelectedScreen() + } + } else { + NoComponentSelectedScreen( + modifier = Modifier + .background(Color.White, Shape.NoRounding), + ) { + isComponentSelected = !isComponentSelected + } } } } -fun getCurrentScreen(label: String): Components { - return Components.entries.firstOrNull { it.label == label } ?: Components.ACTION_INPUTS +fun getCurrentScreen(label: String): Groups { + return Groups.entries.firstOrNull { it.label == label } ?: Groups.ACTION_INPUTS } diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/Components.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/Groups.kt similarity index 85% rename from common/src/commonMain/kotlin/org/hisp/dhis/common/screens/Components.kt rename to common/src/commonMain/kotlin/org/hisp/dhis/common/screens/Groups.kt index bf8fb927b..8c73b26df 100644 --- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/Components.kt +++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/Groups.kt @@ -1,6 +1,6 @@ package org.hisp.dhis.common.screens -enum class Components(val label: String) { +enum class Groups(val label: String) { ACTION_INPUTS("Action inputs"), BASIC_TEXT_INPUTS("Basic text Inputs"), BOTTOM_SHEETS("Bottom sheet components"), @@ -17,5 +17,5 @@ enum class Components(val label: String) { METADATA_AVATAR("Metadata Avatar"), INDICATOR("Indicators"), PARAMETER_SELECTOR("Parameter selector"), - NO_COMPONENT_SELECTED("No component selected"), + NO_GROUP_SELECTED("No group selected"), } diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/NoComponentSelectedScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/NoComponentSelectedScreen.kt index dbf29db36..478321b6a 100644 --- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/NoComponentSelectedScreen.kt +++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/NoComponentSelectedScreen.kt @@ -1,9 +1,7 @@ package org.hisp.dhis.common.screens import androidx.compose.foundation.layout.Arrangement -import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Spacer -import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.size import androidx.compose.material.icons.Icons import androidx.compose.material.icons.outlined.Category @@ -11,21 +9,27 @@ import androidx.compose.material3.Icon import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier +import org.hisp.dhis.mobile.ui.designsystem.component.Button +import org.hisp.dhis.mobile.ui.designsystem.component.ButtonStyle +import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer import org.hisp.dhis.mobile.ui.designsystem.component.Title import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing import org.hisp.dhis.mobile.ui.designsystem.theme.SurfaceColor import org.hisp.dhis.mobile.ui.designsystem.theme.TextColor @Composable -fun NoComponentSelectedScreen() { - Column( - modifier = Modifier.fillMaxSize(), +fun NoComponentSelectedScreen( + modifier: Modifier = Modifier, + onClick: (() -> Unit)? = null, +) { + ColumnScreenContainer( + modifier = modifier, verticalArrangement = Arrangement.Top, horizontalAlignment = Alignment.CenterHorizontally, ) { - Spacer(Modifier.size(Spacing.Spacing160)) + Spacer(Modifier.size(Spacing.Spacing120)) Icon( - modifier = Modifier.size(Spacing.Spacing80), + modifier = Modifier.size(Spacing.Spacing48), imageVector = Icons.Outlined.Category, tint = SurfaceColor.ContainerHighest, contentDescription = "Please choose an option", @@ -33,5 +37,22 @@ fun NoComponentSelectedScreen() { Spacer(Modifier.size(Spacing.Spacing16)) Title("Please select a component", textColor = TextColor.OnSurfaceLight) + + if (onClick != null) { + Spacer(Modifier.size(Spacing.Spacing24)) + + Button( + enabled = true, + style = ButtonStyle.KEYBOARDKEY, + text = "Select component", + icon = { + Icon( + imageVector = Icons.Outlined.Category, + contentDescription = "Please choose an option", + ) + }, + onClick = onClick, + ) + } } } diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/ActionInputsSreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/ActionInputsSreen.kt index d3033d3ad..2dacbbea7 100644 --- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/ActionInputsSreen.kt +++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/ActionInputsSreen.kt @@ -4,13 +4,12 @@ import androidx.compose.runtime.Composable import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import org.hisp.dhis.common.screens.NoComponentSelectedScreen +import org.hisp.dhis.common.screens.components.GroupComponentDropDown import org.hisp.dhis.mobile.ui.designsystem.component.DropdownItem -import org.hisp.dhis.mobile.ui.designsystem.component.InputDropDown -import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState @Composable fun ActionInputsScreen() { - val currentScreen = remember { mutableStateOf(ActionInputs.INPUT_AGE) } + val currentScreen = remember { mutableStateOf(ActionInputs.NO_COMPONENT_SELECTED) } val screenDropdownItemList = mutableListOf() ActionInputs.entries.forEach { @@ -18,13 +17,11 @@ fun ActionInputsScreen() { screenDropdownItemList.add(DropdownItem(it.label)) } } - InputDropDown( - "Display", + GroupComponentDropDown( dropdownItems = screenDropdownItemList.toList(), onItemSelected = { currentScreen.value = getCurrentScreen(it.label) }, onResetButtonClicked = { currentScreen.value = ActionInputs.NO_COMPONENT_SELECTED }, selectedItem = DropdownItem(currentScreen.value.label), - state = InputShellState.UNFOCUSED, ) when (currentScreen.value) { ActionInputs.INPUT_QR_CODE -> InputQRCodeScreen() @@ -46,20 +43,20 @@ fun ActionInputsScreen() { } enum class ActionInputs(val label: String) { - LOGIN("Login"), - INPUT_AGE("Input Age"), - INPUT_BARCODE("Input Barcode"), - INPUT_COORDINATE("Input Coordinate"), - INPUT_DATE_TIME("Input Date Time"), - INPUT_EMAIL("Input Email"), - INPUT_FILE_RESOURCE("Input File Resource"), - INPUT_IMAGE("Input Image"), - INPUT_LINK("Input Link"), - INPUT_ORG_UNIT("Input Org. Unit"), - INPUT_PHONE_NUMBER("Input Phone Number"), - INPUT_POLYGON("Input Polygon"), - INPUT_QR_CODE("Input QR code"), - INPUT_SIGNATURE("Input Signature"), + LOGIN("Login component"), + INPUT_AGE("Input Age component"), + INPUT_BARCODE("Input Barcode component"), + INPUT_COORDINATE("Input Coordinate component"), + INPUT_DATE_TIME("Input Date Time component"), + INPUT_EMAIL("Input Email component"), + INPUT_FILE_RESOURCE("Input File Resource component"), + INPUT_IMAGE("Input Image component"), + INPUT_LINK("Input Link component"), + INPUT_ORG_UNIT("Input Org. Unit component"), + INPUT_PHONE_NUMBER("Input Phone Number component"), + INPUT_POLYGON("Input Polygon component"), + INPUT_QR_CODE("Input QR code component"), + INPUT_SIGNATURE("Input Signature component"), NO_COMPONENT_SELECTED("No component selected"), } diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputAgeScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputAgeScreen.kt index b5565de6a..733b5a0ba 100644 --- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputAgeScreen.kt +++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputAgeScreen.kt @@ -9,116 +9,116 @@ import androidx.compose.ui.text.input.TextFieldValue import org.hisp.dhis.common.screens.previews.regularLegendList import org.hisp.dhis.mobile.ui.designsystem.component.AgeInputType import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer +import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer import org.hisp.dhis.mobile.ui.designsystem.component.InputAge import org.hisp.dhis.mobile.ui.designsystem.component.InputAgeModel import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState import org.hisp.dhis.mobile.ui.designsystem.component.LegendData -import org.hisp.dhis.mobile.ui.designsystem.component.SubTitle import org.hisp.dhis.mobile.ui.designsystem.component.TimeUnitValues import org.hisp.dhis.mobile.ui.designsystem.theme.SurfaceColor @Composable fun InputAgeScreen() { - ColumnComponentContainer { - SubTitle("Horizontal Age Field Helper") - SubTitle("Input Age Component - Idle") + ColumnScreenContainer(title = ActionInputs.INPUT_AGE.label) { var inputType by remember { mutableStateOf(AgeInputType.None) } - InputAge( - InputAgeModel( - title = "Label", - inputType = inputType, - onValueChanged = { newInputType -> - inputType = newInputType - }, - ), - - ) - - SubTitle("Input Age Component - Idle Disabled") - InputAge( - InputAgeModel( - title = "Label", - inputType = AgeInputType.None, - state = InputShellState.DISABLED, - onValueChanged = { newInputType -> - inputType = newInputType - }, - ), - ) - - SubTitle("Input Age Component - Date Of Birth") - InputAge( - InputAgeModel( - title = "Label", - inputType = AgeInputType.DateOfBirth(TextFieldValue("01011985")), - state = InputShellState.DISABLED, - - onValueChanged = { newInputType -> - inputType = newInputType - }, - ), - - ) - - SubTitle("Input Age Component - Date Of Birth Required Error") - InputAge( - InputAgeModel( - title = "Label", - inputType = AgeInputType.DateOfBirth(TextFieldValue("010")), - state = InputShellState.ERROR, - isRequired = true, - - onValueChanged = { - // no-op - }, - ), - - ) - - SubTitle("Input Age Component - Age Disabled") - InputAge( - InputAgeModel( - title = "Label", - inputType = AgeInputType.Age(value = TextFieldValue("56"), unit = TimeUnitValues.YEARS), - state = InputShellState.DISABLED, - - onValueChanged = { newInputType -> - inputType = newInputType - }, - ), - - ) - - SubTitle("Input Age Component - Age Required Error") - InputAge( - InputAgeModel( - title = "Label", - inputType = AgeInputType.Age(value = TextFieldValue("56"), unit = TimeUnitValues.YEARS), - state = InputShellState.ERROR, - isRequired = true, - - onValueChanged = { - // no-op - }, - ), - - ) - - SubTitle("Input Age Component - Legend") - InputAge( - InputAgeModel( - title = "Label", - inputType = AgeInputType.Age(value = TextFieldValue("56"), unit = TimeUnitValues.YEARS), - state = InputShellState.ERROR, - isRequired = true, - - onValueChanged = { - // no-op - }, - legendData = LegendData(SurfaceColor.CustomGreen, "Legend", popUpLegendDescriptionData = regularLegendList), - - ), - ) + ColumnComponentContainer("Input Age Component - Idle") { + InputAge( + InputAgeModel( + title = "Label", + inputType = inputType, + onValueChanged = { newInputType -> + inputType = newInputType + }, + ), + ) + } + + ColumnComponentContainer("Input Age Component - Idle Disabled") { + InputAge( + InputAgeModel( + title = "Label", + inputType = AgeInputType.None, + state = InputShellState.DISABLED, + onValueChanged = { newInputType -> + inputType = newInputType + }, + ), + ) + } + + ColumnComponentContainer("Input Age Component - Date Of Birth") { + InputAge( + InputAgeModel( + title = "Label", + inputType = AgeInputType.DateOfBirth(TextFieldValue("01011985")), + state = InputShellState.DISABLED, + + onValueChanged = { newInputType -> + inputType = newInputType + }, + ), + ) + } + + ColumnComponentContainer("Input Age Component - Date Of Birth Required Error") { + InputAge( + InputAgeModel( + title = "Label", + inputType = AgeInputType.DateOfBirth(TextFieldValue("010")), + state = InputShellState.ERROR, + isRequired = true, + + onValueChanged = { + // no-op + }, + ), + ) + } + + ColumnComponentContainer("Input Age Component - Age Disabled") { + InputAge( + InputAgeModel( + title = "Label", + inputType = AgeInputType.Age(value = TextFieldValue("56"), unit = TimeUnitValues.YEARS), + state = InputShellState.DISABLED, + + onValueChanged = { newInputType -> + inputType = newInputType + }, + ), + ) + } + + ColumnComponentContainer("Input Age Component - Age Required Error") { + InputAge( + InputAgeModel( + title = "Label", + inputType = AgeInputType.Age(value = TextFieldValue("56"), unit = TimeUnitValues.YEARS), + state = InputShellState.ERROR, + isRequired = true, + + onValueChanged = { + // no-op + }, + ), + ) + } + + ColumnComponentContainer("Input Age Component - Legend") { + InputAge( + InputAgeModel( + title = "Label", + inputType = AgeInputType.Age(value = TextFieldValue("56"), unit = TimeUnitValues.YEARS), + state = InputShellState.ERROR, + isRequired = true, + + onValueChanged = { + // no-op + }, + legendData = LegendData(SurfaceColor.CustomGreen, "Legend", popUpLegendDescriptionData = regularLegendList), + ), + ) + } } } diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputBarCodeScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputBarCodeScreen.kt index 7c27b478d..f22b74820 100644 --- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputBarCodeScreen.kt +++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputBarCodeScreen.kt @@ -2,8 +2,6 @@ package org.hisp.dhis.common.screens.actionInputs import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Row -import androidx.compose.foundation.layout.Spacer -import androidx.compose.foundation.layout.size import androidx.compose.material.icons.Icons import androidx.compose.material.icons.outlined.Info import androidx.compose.material3.HorizontalDivider @@ -21,107 +19,107 @@ import org.hisp.dhis.mobile.ui.designsystem.component.BarcodeBlock import org.hisp.dhis.mobile.ui.designsystem.component.BottomSheetShell import org.hisp.dhis.mobile.ui.designsystem.component.ButtonCarousel import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer -import org.hisp.dhis.mobile.ui.designsystem.component.Description +import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer import org.hisp.dhis.mobile.ui.designsystem.component.InputBarCode import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState import org.hisp.dhis.mobile.ui.designsystem.component.RowComponentContainer +import org.hisp.dhis.mobile.ui.designsystem.component.SubTitle import org.hisp.dhis.mobile.ui.designsystem.component.SupportingTextData import org.hisp.dhis.mobile.ui.designsystem.component.SupportingTextState import org.hisp.dhis.mobile.ui.designsystem.resource.provideStringResource -import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing import org.hisp.dhis.mobile.ui.designsystem.theme.SurfaceColor -import org.hisp.dhis.mobile.ui.designsystem.theme.TextColor @Composable fun InputBarCodeScreen() { - ColumnComponentContainer { - var inputValue1 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("889026a1-d01e-4d34-8209-81e8ed5c614b")) } - var showEnabledBarCodeBottomSheet by rememberSaveable { mutableStateOf(false) } + ColumnScreenContainer(title = ActionInputs.INPUT_BARCODE.label) { + ColumnComponentContainer("Default Input Barcode") { + var inputValue1 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("889026a1-d01e-4d34-8209-81e8ed5c614b")) } + var showEnabledBarCodeBottomSheet by rememberSaveable { mutableStateOf(false) } - Description("Default Input Barcode", textColor = TextColor.OnSurfaceVariant) - InputBarCode( - "label", - state = InputShellState.UNFOCUSED, - onActionButtonClicked = { - showEnabledBarCodeBottomSheet = !showEnabledBarCodeBottomSheet - }, - inputTextFieldValue = inputValue1, - onValueChanged = { - inputValue1 = it ?: TextFieldValue() - }, - ) + if (showEnabledBarCodeBottomSheet) { + BottomSheetShell( + modifier = Modifier.testTag("LEGEND_BOTTOM_SHEET"), + title = provideStringResource("qr_code"), + icon = { + Icon( + imageVector = Icons.Outlined.Info, + contentDescription = "Button", + tint = SurfaceColor.Primary, + ) + }, + content = { + Row(horizontalArrangement = Arrangement.Center) { + BarcodeBlock(data = inputValue1.text) + } + }, + buttonBlock = { + ButtonCarousel( + carouselButtonList = threeButtonCarousel, + ) + }, + ) { + showEnabledBarCodeBottomSheet = false + } + } - if (showEnabledBarCodeBottomSheet) { - BottomSheetShell( - modifier = Modifier.testTag("LEGEND_BOTTOM_SHEET"), - title = provideStringResource("qr_code"), - icon = { - Icon( - imageVector = Icons.Outlined.Info, - contentDescription = "Button", - tint = SurfaceColor.Primary, - ) - }, - content = { - Row(horizontalArrangement = Arrangement.Center) { - BarcodeBlock(data = inputValue1.text) - } + InputBarCode( + "label", + state = InputShellState.UNFOCUSED, + onActionButtonClicked = { + showEnabledBarCodeBottomSheet = !showEnabledBarCodeBottomSheet }, - buttonBlock = { - ButtonCarousel( - carouselButtonList = threeButtonCarousel, - ) + inputTextFieldValue = inputValue1, + onValueChanged = { + inputValue1 = it ?: TextFieldValue() }, - ) { - showEnabledBarCodeBottomSheet = false - } + ) } - Spacer(Modifier.size(Spacing.Spacing18)) - var inputValue2 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("")) } - Description("Required field Input Barcode", textColor = TextColor.OnSurfaceVariant) - InputBarCode( - "label", - state = InputShellState.ERROR, - onActionButtonClicked = { - }, - inputTextFieldValue = inputValue2, - onValueChanged = { - inputValue2 = it ?: TextFieldValue() - }, - isRequiredField = true, - supportingText = listOf(SupportingTextData("Required", SupportingTextState.ERROR)), - ) + ColumnComponentContainer("Required field Input Barcode") { + var inputValue2 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("")) } + InputBarCode( + "label", + state = InputShellState.ERROR, + onActionButtonClicked = { + }, + inputTextFieldValue = inputValue2, + onValueChanged = { + inputValue2 = it ?: TextFieldValue() + }, + isRequiredField = true, + supportingText = listOf(SupportingTextData("Required", SupportingTextState.ERROR)), + ) + } - Spacer(Modifier.size(Spacing.Spacing18)) - var inputValue by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("")) } - Description("Disabled Input Barcode", textColor = TextColor.OnSurfaceVariant) - InputBarCode( - "label", - state = InputShellState.DISABLED, - onActionButtonClicked = { - }, - inputTextFieldValue = inputValue, - onValueChanged = { - inputValue = it ?: TextFieldValue() - }, - ) + ColumnComponentContainer("Disabled Input Barcode") { + var inputValue by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("")) } + InputBarCode( + "label", + state = InputShellState.DISABLED, + onActionButtonClicked = { + }, + inputTextFieldValue = inputValue, + onValueChanged = { + inputValue = it ?: TextFieldValue() + }, + ) + } - Spacer(Modifier.size(Spacing.Spacing18)) - var inputValue3 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("889026a1-d01e-4d34-8209-81e8ed5c614b")) } - Description("Disabled Input Barcode with content", textColor = TextColor.OnSurfaceVariant) - InputBarCode( - "label", - state = InputShellState.DISABLED, - onActionButtonClicked = { - }, - inputTextFieldValue = inputValue3, - onValueChanged = { - inputValue3 = it ?: TextFieldValue() - }, - ) - Description("Barcode Block", textColor = TextColor.OnSurfaceVariant) + ColumnComponentContainer("Disabled Input Barcode with content") { + var inputValue3 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("889026a1-d01e-4d34-8209-81e8ed5c614b")) } + InputBarCode( + "label", + state = InputShellState.DISABLED, + onActionButtonClicked = { + }, + inputTextFieldValue = inputValue3, + onValueChanged = { + inputValue3 = it ?: TextFieldValue() + }, + ) + } + SubTitle("Barcode Block") BarcodeBlock(data = "Barcode value") HorizontalDivider() BarcodeBlock(data = "889026a1-d01e-4d34-8209-81e8ed5c614b") diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputCoordinateScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputCoordinateScreen.kt index 4d21dedee..3c928a852 100644 --- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputCoordinateScreen.kt +++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputCoordinateScreen.kt @@ -1,73 +1,64 @@ package org.hisp.dhis.common.screens.actionInputs -import androidx.compose.foundation.layout.Spacer -import androidx.compose.foundation.layout.size import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.runtime.setValue -import androidx.compose.ui.Modifier import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer +import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer import org.hisp.dhis.mobile.ui.designsystem.component.Coordinates import org.hisp.dhis.mobile.ui.designsystem.component.InputCoordinate import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState -import org.hisp.dhis.mobile.ui.designsystem.component.SubTitle -import org.hisp.dhis.mobile.ui.designsystem.component.Title -import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing -import org.hisp.dhis.mobile.ui.designsystem.theme.TextColor @Composable fun InputCoordinateScreen() { - ColumnComponentContainer { - Title("Input Coordinates", textColor = TextColor.OnSurfaceVariant) - - SubTitle("Basic Input Coordinates ", textColor = TextColor.OnSurfaceVariant) - var coordinates by remember { mutableStateOf(null) } - InputCoordinate( - title = "Label", - state = InputShellState.UNFOCUSED, - coordinates = coordinates, - onResetButtonClicked = { - coordinates = null - }, - onUpdateButtonClicked = { - coordinates = Coordinates(latitude = 39.46263, longitude = -0.33617) - }, - ) - Spacer(Modifier.size(Spacing.Spacing18)) + ColumnScreenContainer(title = ActionInputs.INPUT_COORDINATE.label) { + ColumnComponentContainer("Basic Input Coordinates ") { + var coordinates by remember { mutableStateOf(null) } + InputCoordinate( + title = "Label", + state = InputShellState.UNFOCUSED, + coordinates = coordinates, + onResetButtonClicked = { + coordinates = null + }, + onUpdateButtonClicked = { + coordinates = Coordinates(latitude = 39.46263, longitude = -0.33617) + }, + ) + } - SubTitle("Disabled Input Coordinates without data ", textColor = TextColor.OnSurfaceVariant) - var coordinates1 by remember { - mutableStateOf(null) + ColumnComponentContainer("Disabled Input Coordinates without data ") { + var coordinates1 by remember { mutableStateOf(null) } + InputCoordinate( + title = "Label", + state = InputShellState.DISABLED, + coordinates = coordinates1, + onResetButtonClicked = { + coordinates1 = null + }, + onUpdateButtonClicked = { + coordinates1 = Coordinates(latitude = 39.46263, longitude = -0.33617) + }, + ) } - InputCoordinate( - title = "Label", - state = InputShellState.DISABLED, - coordinates = coordinates1, - onResetButtonClicked = { - coordinates1 = null - }, - onUpdateButtonClicked = { - coordinates1 = Coordinates(latitude = 39.46263, longitude = -0.33617) - }, - ) - SubTitle("Disabled Input Coordinates with data ", textColor = TextColor.OnSurfaceVariant) - var coordinates2 by remember { - mutableStateOf(Coordinates(latitude = 39.46263, longitude = -0.33617)) + ColumnComponentContainer("Disabled Input Coordinates with data ") { + var coordinates2 by remember { + mutableStateOf(Coordinates(latitude = 39.46263, longitude = -0.33617)) + } + InputCoordinate( + title = "Label", + state = InputShellState.DISABLED, + coordinates = coordinates2, + onResetButtonClicked = { + coordinates2 = null + }, + onUpdateButtonClicked = { + coordinates2 = Coordinates(latitude = 39.46263, longitude = -0.33617) + }, + ) } - InputCoordinate( - title = "Label", - state = InputShellState.DISABLED, - coordinates = coordinates2, - onResetButtonClicked = { - coordinates2 = null - }, - onUpdateButtonClicked = { - coordinates2 = Coordinates(latitude = 39.46263, longitude = -0.33617) - }, - ) - Spacer(Modifier.size(Spacing.Spacing18)) } } diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputDateTimeScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputDateTimeScreen.kt index 16236f07b..4462bba47 100644 --- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputDateTimeScreen.kt +++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputDateTimeScreen.kt @@ -8,19 +8,19 @@ import androidx.compose.runtime.setValue import androidx.compose.ui.text.TextRange import androidx.compose.ui.text.input.TextFieldValue import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer +import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer import org.hisp.dhis.mobile.ui.designsystem.component.DateTimeActionType import org.hisp.dhis.mobile.ui.designsystem.component.InputDateTime import org.hisp.dhis.mobile.ui.designsystem.component.InputDateTimeModel import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState import org.hisp.dhis.mobile.ui.designsystem.component.SelectableDates -import org.hisp.dhis.mobile.ui.designsystem.component.SubTitle import org.hisp.dhis.mobile.ui.designsystem.component.internal.DateTimeTransformation import org.hisp.dhis.mobile.ui.designsystem.component.internal.DateTransformation import org.hisp.dhis.mobile.ui.designsystem.component.internal.TimeTransformation @Composable fun InputDateTimeScreen() { - ColumnComponentContainer { + ColumnScreenContainer(title = ActionInputs.INPUT_DATE_TIME.label) { var date by remember { mutableStateOf(TextFieldValue("18122024", selection = TextRange(8))) } var time by remember { mutableStateOf(TextFieldValue("0930")) } var dateTime by remember { mutableStateOf(TextFieldValue("121119910230")) } @@ -29,112 +29,108 @@ fun InputDateTimeScreen() { var dateTimenoInput by remember { mutableStateOf(TextFieldValue("11112014")) } var hour24time by remember { mutableStateOf(TextFieldValue("1630")) } - SubTitle("Date Input (allowed dates from 01/09/2024 to 12/12/2024)") - InputDateTime( - InputDateTimeModel( - title = "Label", - inputTextFieldValue = date, - visualTransformation = DateTransformation(), - actionType = DateTimeActionType.DATE, - onValueChanged = { date = it ?: TextFieldValue() }, - selectableDates = SelectableDates("01092024", "12122024"), - ), - ) - - SubTitle("Time Input") - - InputDateTime( - InputDateTimeModel( - title = "Label", - inputTextFieldValue = dateTimenoInput, - visualTransformation = DateTransformation(), - actionType = DateTimeActionType.DATE, - onValueChanged = { dateTimenoInput = it ?: TextFieldValue() }, - allowsManualInput = false, - ), - ) - SubTitle("24 hour format Time Input") - - InputDateTime( - InputDateTimeModel( - - title = "Label", - inputTextFieldValue = hour24time, - visualTransformation = TimeTransformation(), - actionType = DateTimeActionType.TIME, - onValueChanged = { hour24time = it ?: TextFieldValue() }, - is24hourFormat = true, - ), - - ) - - SubTitle("12 hour format Time Input") - InputDateTime( - InputDateTimeModel( - - title = "Label", - inputTextFieldValue = time, - visualTransformation = TimeTransformation(), - actionType = DateTimeActionType.TIME, - onValueChanged = { time = it ?: TextFieldValue() }, - - ), - - ) - - SubTitle("Date-Time Input") - - InputDateTime( - InputDateTimeModel( - - title = "Label", - inputTextFieldValue = dateTime, - visualTransformation = DateTimeTransformation(), - actionType = DateTimeActionType.DATE_TIME, - onValueChanged = { dateTime = it ?: TextFieldValue() }, - ), - ) - - SubTitle("Date-Time Input 24 hour ") - - InputDateTime( - InputDateTimeModel( - - title = "Label", - inputTextFieldValue = dateTime24hour, - visualTransformation = DateTimeTransformation(), - actionType = DateTimeActionType.DATE_TIME, - onValueChanged = { dateTime24hour = it ?: TextFieldValue() }, - is24hourFormat = true, - ), - ) - - SubTitle("Disabled") - - InputDateTime( - InputDateTimeModel( - - title = "Label", - inputTextFieldValue = TextFieldValue(), - state = InputShellState.DISABLED, - onValueChanged = { - // no-op - }, - - ), - ) - SubTitle("Error") - - InputDateTime( - InputDateTimeModel( - title = "Label", - inputTextFieldValue = TextFieldValue(), - isRequired = true, - state = InputShellState.ERROR, - onValueChanged = { - // no-op - }, - ), - ) + ColumnComponentContainer("Date Input (allowed dates from 01/09/2024 to 12/12/2024)") { + InputDateTime( + InputDateTimeModel( + title = "Label", + inputTextFieldValue = date, + visualTransformation = DateTransformation(), + actionType = DateTimeActionType.DATE, + onValueChanged = { date = it ?: TextFieldValue() }, + selectableDates = SelectableDates("01092024", "12122024"), + ), + ) + } + + ColumnComponentContainer("Time Input") { + InputDateTime( + InputDateTimeModel( + title = "Label", + inputTextFieldValue = dateTimenoInput, + visualTransformation = DateTransformation(), + actionType = DateTimeActionType.DATE, + onValueChanged = { dateTimenoInput = it ?: TextFieldValue() }, + allowsManualInput = false, + ), + ) + } + + ColumnComponentContainer("24 hour format Time Input") { + InputDateTime( + InputDateTimeModel( + + title = "Label", + inputTextFieldValue = hour24time, + visualTransformation = TimeTransformation(), + actionType = DateTimeActionType.TIME, + onValueChanged = { hour24time = it ?: TextFieldValue() }, + is24hourFormat = true, + ), + ) + } + + ColumnComponentContainer("12 hour format Time Input") { + InputDateTime( + InputDateTimeModel( + title = "Label", + inputTextFieldValue = time, + visualTransformation = TimeTransformation(), + actionType = DateTimeActionType.TIME, + onValueChanged = { time = it ?: TextFieldValue() }, + ), + ) + } + + ColumnComponentContainer("Date-Time Input") { + InputDateTime( + InputDateTimeModel( + title = "Label", + inputTextFieldValue = dateTime, + visualTransformation = DateTimeTransformation(), + actionType = DateTimeActionType.DATE_TIME, + onValueChanged = { dateTime = it ?: TextFieldValue() }, + ), + ) + } + + ColumnComponentContainer("Date-Time Input 24 hour ") { + InputDateTime( + InputDateTimeModel( + title = "Label", + inputTextFieldValue = dateTime24hour, + visualTransformation = DateTimeTransformation(), + actionType = DateTimeActionType.DATE_TIME, + onValueChanged = { dateTime24hour = it ?: TextFieldValue() }, + is24hourFormat = true, + ), + ) + } + + ColumnComponentContainer("Disabled") { + InputDateTime( + InputDateTimeModel( + title = "Label", + inputTextFieldValue = TextFieldValue(), + state = InputShellState.DISABLED, + onValueChanged = { + // no-op + }, + ), + ) + } + + ColumnComponentContainer("Error") { + InputDateTime( + InputDateTimeModel( + title = "Label", + inputTextFieldValue = TextFieldValue(), + isRequired = true, + state = InputShellState.ERROR, + onValueChanged = { + // no-op + }, + ), + ) + } } } diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputEmailScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputEmailScreen.kt index 9bd652228..93ab27ca6 100644 --- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputEmailScreen.kt +++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputEmailScreen.kt @@ -1,101 +1,95 @@ package org.hisp.dhis.common.screens.actionInputs -import androidx.compose.foundation.layout.Spacer -import androidx.compose.foundation.layout.size 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.Modifier import androidx.compose.ui.text.input.TextFieldValue import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer +import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer import org.hisp.dhis.mobile.ui.designsystem.component.InputEmail import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState -import org.hisp.dhis.mobile.ui.designsystem.component.SubTitle import org.hisp.dhis.mobile.ui.designsystem.component.SupportingTextData import org.hisp.dhis.mobile.ui.designsystem.component.SupportingTextState -import org.hisp.dhis.mobile.ui.designsystem.component.Title -import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing -import org.hisp.dhis.mobile.ui.designsystem.theme.TextColor @Composable fun InputEmailScreen() { - ColumnComponentContainer { - Title("Input Email component", textColor = TextColor.OnSurfaceVariant) - SubTitle("Basic Email ", textColor = TextColor.OnSurfaceVariant) - var inputText1 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("")) } + ColumnScreenContainer(ActionInputs.INPUT_EMAIL.label) { + ColumnComponentContainer("Basic Email ") { + var inputText1 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("")) } - InputEmail( - title = "Label", - supportingText = listOf(SupportingTextData("Example: name@example.com")), - inputTextFieldValue = inputText1, - onValueChanged = { - inputText1 = it ?: TextFieldValue() - }, - onEmailActionCLicked = {}, - state = InputShellState.UNFOCUSED, - ) - Spacer(Modifier.size(Spacing.Spacing18)) - - SubTitle("Basic Email with content ", textColor = TextColor.OnSurfaceVariant) - var inputText2 by rememberSaveable(stateSaver = TextFieldValue.Saver) { - mutableStateOf( - TextFieldValue("fatiman92@gmail.com"), + InputEmail( + title = "Label", + supportingText = listOf(SupportingTextData("Example: name@example.com")), + inputTextFieldValue = inputText1, + onValueChanged = { + inputText1 = it ?: TextFieldValue() + }, + onEmailActionCLicked = {}, + state = InputShellState.UNFOCUSED, ) } - InputEmail( - title = "Label", - supportingText = listOf(SupportingTextData("Example: name@example.com")), - inputTextFieldValue = inputText2, - onValueChanged = { - inputText2 = it ?: TextFieldValue() - }, - onEmailActionCLicked = {}, - state = InputShellState.UNFOCUSED, - ) - Spacer(Modifier.size(Spacing.Spacing18)) + ColumnComponentContainer("Basic Email with content ") { + var inputText2 by rememberSaveable(stateSaver = TextFieldValue.Saver) { + mutableStateOf( + TextFieldValue("fatiman92@gmail.com"), + ) + } - SubTitle("Error Email with content ", textColor = TextColor.OnSurfaceVariant) - var inputText3 by rememberSaveable(stateSaver = TextFieldValue.Saver) { - mutableStateOf( - TextFieldValue("fatiman92@gmail.com"), + InputEmail( + title = "Label", + supportingText = listOf(SupportingTextData("Example: name@example.com")), + inputTextFieldValue = inputText2, + onValueChanged = { + inputText2 = it ?: TextFieldValue() + }, + onEmailActionCLicked = {}, + state = InputShellState.UNFOCUSED, ) } - InputEmail( - title = "Label", - state = InputShellState.ERROR, - supportingText = listOf(SupportingTextData("Enter a valid email address", SupportingTextState.ERROR)), - inputTextFieldValue = inputText3, - onValueChanged = { - inputText3 = it ?: TextFieldValue() - }, - onEmailActionCLicked = {}, - ) - Spacer(Modifier.size(Spacing.Spacing18)) + ColumnComponentContainer("Error Email with content ") { + var inputText3 by rememberSaveable(stateSaver = TextFieldValue.Saver) { + mutableStateOf( + TextFieldValue("fatiman92@gmail.com"), + ) + } - SubTitle("Error Email required field ", textColor = TextColor.OnSurfaceVariant) - var inputText4 by rememberSaveable(stateSaver = TextFieldValue.Saver) { - mutableStateOf( - TextFieldValue(), + InputEmail( + title = "Label", + state = InputShellState.ERROR, + supportingText = listOf(SupportingTextData("Enter a valid email address", SupportingTextState.ERROR)), + inputTextFieldValue = inputText3, + onValueChanged = { + inputText3 = it ?: TextFieldValue() + }, + onEmailActionCLicked = {}, ) } - InputEmail( - title = "Label", - state = InputShellState.ERROR, - supportingText = listOf(SupportingTextData("Enter email address", SupportingTextState.ERROR)), - inputTextFieldValue = inputText4, - isRequiredField = true, - onValueChanged = { - inputText4 = it ?: TextFieldValue() - }, - onEmailActionCLicked = {}, - ) - Spacer(Modifier.size(Spacing.Spacing18)) - SubTitle("Disabled Email with content ", textColor = TextColor.OnSurfaceVariant) + ColumnComponentContainer("Error Email required field ") { + var inputText4 by rememberSaveable(stateSaver = TextFieldValue.Saver) { + mutableStateOf( + TextFieldValue(), + ) + } + InputEmail( + title = "Label", + state = InputShellState.ERROR, + supportingText = listOf(SupportingTextData("Enter email address", SupportingTextState.ERROR)), + inputTextFieldValue = inputText4, + isRequiredField = true, + onValueChanged = { + inputText4 = it ?: TextFieldValue() + }, + onEmailActionCLicked = {}, + ) + } + } + + ColumnComponentContainer("Disabled Email with content ") { var inputText5 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf( TextFieldValue("fatiman92@gmail.com"), diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputFileResourceScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputFileResourceScreen.kt index 4b575f1f2..1166a9274 100644 --- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputFileResourceScreen.kt +++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputFileResourceScreen.kt @@ -6,6 +6,7 @@ import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.runtime.setValue import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer +import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer import org.hisp.dhis.mobile.ui.designsystem.component.InputFileResource import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState import org.hisp.dhis.mobile.ui.designsystem.component.UploadFileState @@ -13,9 +14,7 @@ import org.hisp.dhis.mobile.ui.designsystem.resource.provideStringResource @Composable fun InputFileResourceScreen() { - ColumnComponentContainer( - title = "Input File Component", - ) { + ColumnScreenContainer(title = ActionInputs.INPUT_FILE_RESOURCE.label) { var currentFileName = "filename.extension" var currentFileWeight = "524kb" val currentFileName2 = "filename.extension" @@ -23,74 +22,77 @@ fun InputFileResourceScreen() { var inputFileResourceState by remember { mutableStateOf(UploadFileState.ADD) } - InputFileResource( - title = "Label", - buttonText = provideStringResource("add_file"), - fileName = currentFileName, - fileWeight = currentFileWeight, - uploadFileState = inputFileResourceState, - onSelectFile = { - inputFileResourceState = UploadFileState.LOADED - }, - onUploadFile = {}, - onClear = { - inputFileResourceState = UploadFileState.ADD - }, - ) - InputFileResource( - title = "Label", - buttonText = provideStringResource("add_file"), - fileName = currentFileName, - fileWeight = currentFileWeight, - onSelectFile = { - currentFileName = "file" - currentFileWeight = "weight" - }, - onUploadFile = {}, - ) - InputFileResource( - title = "Label", - buttonText = provideStringResource("add_file"), - fileName = currentFileName, - fileWeight = currentFileWeight, - uploadFileState = UploadFileState.UPLOADING, - inputShellState = InputShellState.FOCUSED, - onSelectFile = {}, - onUploadFile = {}, - ) - InputFileResource( - title = "Label", - buttonText = provideStringResource("add_file"), - fileName = currentFileName2, - fileWeight = currentFileWeight2, - uploadFileState = UploadFileState.LOADED, - onSelectFile = {}, - onUploadFile = {}, - ) - InputFileResource( - title = "Label", - buttonText = provideStringResource("add_file"), - fileName = currentFileName, - fileWeight = currentFileWeight, - inputShellState = InputShellState.DISABLED, - onSelectFile = { - currentFileName = "file" - currentFileWeight = "weight" - }, - onUploadFile = {}, - ) - InputFileResource( - title = "Label", - buttonText = provideStringResource("add_file"), - fileName = currentFileName, - fileWeight = currentFileWeight, - inputShellState = InputShellState.DISABLED, - uploadFileState = UploadFileState.LOADED, - onSelectFile = { - currentFileName = "file" - currentFileWeight = "weight" - }, - onUploadFile = {}, - ) + ColumnComponentContainer("Default state") { + InputFileResource( + title = "Label", + buttonText = provideStringResource("add_file"), + fileName = currentFileName, + fileWeight = currentFileWeight, + uploadFileState = inputFileResourceState, + onSelectFile = { + inputFileResourceState = UploadFileState.LOADED + }, + onUploadFile = {}, + onClear = { + inputFileResourceState = UploadFileState.ADD + }, + ) + } + + ColumnComponentContainer("Selected state") { + InputFileResource( + title = "Label", + buttonText = provideStringResource("add_file"), + fileName = currentFileName2, + fileWeight = currentFileWeight2, + uploadFileState = UploadFileState.LOADED, + onSelectFile = {}, + onUploadFile = {}, + ) + } + + ColumnComponentContainer("Loading state") { + InputFileResource( + title = "Label", + buttonText = provideStringResource("add_file"), + fileName = currentFileName, + fileWeight = currentFileWeight, + uploadFileState = UploadFileState.UPLOADING, + inputShellState = InputShellState.FOCUSED, + onSelectFile = {}, + onUploadFile = {}, + ) + } + + ColumnComponentContainer("Disabled state") { + InputFileResource( + title = "Label", + buttonText = provideStringResource("add_file"), + fileName = currentFileName, + fileWeight = currentFileWeight, + inputShellState = InputShellState.DISABLED, + onSelectFile = { + currentFileName = "file" + currentFileWeight = "weight" + }, + onUploadFile = {}, + ) + } + + ColumnComponentContainer("Disabled state with selected file") { + InputFileResource( + title = "Label", + buttonText = provideStringResource("add_file"), + fileName = currentFileName, + fileWeight = currentFileWeight, + inputShellState = InputShellState.DISABLED, + uploadFileState = UploadFileState.LOADED, + onSelectFile = { + currentFileName = "file" + currentFileWeight = "weight" + }, + onUploadFile = {}, + ) + } } } diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputImageScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputImageScreen.kt index 52526cd5f..1b47bc264 100644 --- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputImageScreen.kt +++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputImageScreen.kt @@ -1,97 +1,90 @@ package org.hisp.dhis.common.screens.actionInputs -import androidx.compose.foundation.layout.Spacer -import androidx.compose.foundation.layout.size import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.runtime.saveable.rememberSaveable import androidx.compose.runtime.setValue -import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.painter.Painter import mobile_ui.common.generated.resources.Res import mobile_ui.common.generated.resources.sample import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer +import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer import org.hisp.dhis.mobile.ui.designsystem.component.ImageBlock import org.hisp.dhis.mobile.ui.designsystem.component.InputImage import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState -import org.hisp.dhis.mobile.ui.designsystem.component.SubTitle -import org.hisp.dhis.mobile.ui.designsystem.component.Title import org.hisp.dhis.mobile.ui.designsystem.component.UploadState -import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing -import org.hisp.dhis.mobile.ui.designsystem.theme.TextColor import org.jetbrains.compose.resources.painterResource import java.util.Timer import kotlin.concurrent.schedule @Composable fun InputImageScreen() { - ColumnComponentContainer { - Title("Input Image", textColor = TextColor.OnSurfaceVariant) + ColumnScreenContainer(title = ActionInputs.INPUT_IMAGE.label) { + ColumnComponentContainer("Basic Input Image ") { + var uploadState by rememberSaveable { mutableStateOf(UploadState.ADD) } + val sampleImage = provideSampleImage() - SubTitle("Basic Input Image ", textColor = TextColor.OnSurfaceVariant) - var uploadState by rememberSaveable { mutableStateOf(UploadState.ADD) } - val sampleImage = provideSampleImage() + InputImage( + title = "Label", + uploadState = uploadState, + load = { sampleImage }, + painterFor = { remember { it } }, + onDownloadButtonClick = {}, + onShareButtonClick = {}, + onResetButtonClicked = { + uploadState = UploadState.ADD + }, + onAddButtonClicked = { + uploadState = UploadState.UPLOADING + Timer().schedule(1000) { + uploadState = UploadState.LOADED + } + }, + ) + } - InputImage( - title = "Label", - uploadState = uploadState, - load = { sampleImage }, - painterFor = { remember { it } }, - onDownloadButtonClick = {}, - onShareButtonClick = {}, - onResetButtonClicked = { - uploadState = UploadState.ADD - }, - onAddButtonClicked = { - uploadState = UploadState.UPLOADING - Timer().schedule(1000) { - uploadState = UploadState.LOADED - } - }, - ) - Spacer(Modifier.size(Spacing.Spacing18)) + ColumnComponentContainer("Disabled Input Image without data ") { + val uploadState1 by rememberSaveable { mutableStateOf(UploadState.ADD) } + InputImage( + title = "Label", + state = InputShellState.DISABLED, + uploadState = uploadState1, + load = { }, + onDownloadButtonClick = {}, + onShareButtonClick = {}, + onResetButtonClicked = {}, + onAddButtonClicked = {}, + ) + } - SubTitle("Disabled Input Image without data ", textColor = TextColor.OnSurfaceVariant) - val uploadState1 by rememberSaveable { mutableStateOf(UploadState.ADD) } - InputImage( - title = "Label", - state = InputShellState.DISABLED, - uploadState = uploadState1, - load = { }, - onDownloadButtonClick = {}, - onShareButtonClick = {}, - onResetButtonClicked = {}, - onAddButtonClicked = {}, - ) - Spacer(Modifier.size(Spacing.Spacing18)) + ColumnComponentContainer("Disabled Input Image with data ") { + val uploadState2 by rememberSaveable { mutableStateOf(UploadState.LOADED) } + val sampleImage2 = provideSampleImage() + InputImage( + title = "Label", + state = InputShellState.DISABLED, + uploadState = uploadState2, + load = { sampleImage2 }, + painterFor = { it }, + onDownloadButtonClick = {}, + onShareButtonClick = {}, + onResetButtonClicked = { }, + onAddButtonClicked = {}, + ) + } - SubTitle("Disabled Input Image with data ", textColor = TextColor.OnSurfaceVariant) - val uploadState2 by rememberSaveable { mutableStateOf(UploadState.LOADED) } - val sampleImage2 = provideSampleImage() - InputImage( - title = "Label", - state = InputShellState.DISABLED, - uploadState = uploadState2, - load = { sampleImage2 }, - painterFor = { it }, - onDownloadButtonClick = {}, - onShareButtonClick = {}, - onResetButtonClicked = { }, - onAddButtonClicked = {}, - ) - - SubTitle("Image Block", textColor = TextColor.OnSurfaceVariant) - - val sampleImage3 = provideSampleImage() - ImageBlock( - title = "Label", - load = { sampleImage3 }, - painterFor = { remember { it } }, - onDownloadButtonClick = {}, - onShareButtonClick = {}, - ) + ColumnComponentContainer("Image Block") { + val sampleImage3 = provideSampleImage() + ImageBlock( + title = "Label", + load = { sampleImage3 }, + painterFor = { remember { it } }, + onDownloadButtonClick = {}, + onShareButtonClick = {}, + ) + } } } diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputLinkScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputLinkScreen.kt index bd4b5bd9b..b1e515b85 100644 --- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputLinkScreen.kt +++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputLinkScreen.kt @@ -1,108 +1,102 @@ package org.hisp.dhis.common.screens.actionInputs -import androidx.compose.foundation.layout.Spacer -import androidx.compose.foundation.layout.size 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.Modifier import androidx.compose.ui.text.input.TextFieldValue import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer +import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer import org.hisp.dhis.mobile.ui.designsystem.component.InputLink import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState -import org.hisp.dhis.mobile.ui.designsystem.component.SubTitle import org.hisp.dhis.mobile.ui.designsystem.component.SupportingTextData import org.hisp.dhis.mobile.ui.designsystem.component.SupportingTextState -import org.hisp.dhis.mobile.ui.designsystem.component.Title -import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing -import org.hisp.dhis.mobile.ui.designsystem.theme.TextColor @Composable fun InputLinkScreen() { - ColumnComponentContainer { - Title("Input Link component", textColor = TextColor.OnSurfaceVariant) - SubTitle("Basic Link ", textColor = TextColor.OnSurfaceVariant) - var inputText1 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue()) } + ColumnScreenContainer(title = ActionInputs.INPUT_LINK.label) { + ColumnComponentContainer("Basic Link ") { + var inputText1 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue()) } - InputLink( - title = "Label", - supportingText = listOf(SupportingTextData("Example: example.com")), - inputTextFieldValue = inputText1, - onValueChanged = { - if (it != null) { - inputText1 = it - } - }, - onLinkActionCLicked = {}, - state = InputShellState.UNFOCUSED, - ) - Spacer(Modifier.size(Spacing.Spacing18)) + InputLink( + title = "Label", + supportingText = listOf(SupportingTextData("Example: example.com")), + inputTextFieldValue = inputText1, + onValueChanged = { + if (it != null) { + inputText1 = it + } + }, + onLinkActionCLicked = {}, + state = InputShellState.UNFOCUSED, + ) + } - SubTitle("Basic Link with invalid link ", textColor = TextColor.OnSurfaceVariant) - var inputText2 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("example.")) } + ColumnComponentContainer("Basic Link with invalid link ") { + var inputText2 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("example.")) } - InputLink( - title = "Label", - supportingText = listOf(SupportingTextData("Example: example.com")), - inputTextFieldValue = inputText2, - onValueChanged = { - if (it != null) { - inputText2 = it - } - }, - onLinkActionCLicked = {}, - state = InputShellState.UNFOCUSED, - ) - Spacer(Modifier.size(Spacing.Spacing18)) + InputLink( + title = "Label", + supportingText = listOf(SupportingTextData("Example: example.com")), + inputTextFieldValue = inputText2, + onValueChanged = { + if (it != null) { + inputText2 = it + } + }, + onLinkActionCLicked = {}, + state = InputShellState.UNFOCUSED, + ) + } - SubTitle("Basic Link with valid link ", textColor = TextColor.OnSurfaceVariant) - var inputText3 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue(("example.com"))) } + ColumnComponentContainer("Basic Link with valid link ") { + var inputText3 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue(("example.com"))) } - InputLink( - title = "Label", - supportingText = listOf(SupportingTextData("Example: example.com")), - inputTextFieldValue = inputText3, - onValueChanged = { - if (it != null) { - inputText3 = it - } - }, - onLinkActionCLicked = {}, - state = InputShellState.UNFOCUSED, - ) - Spacer(Modifier.size(Spacing.Spacing18)) + InputLink( + title = "Label", + supportingText = listOf(SupportingTextData("Example: example.com")), + inputTextFieldValue = inputText3, + onValueChanged = { + if (it != null) { + inputText3 = it + } + }, + onLinkActionCLicked = {}, + state = InputShellState.UNFOCUSED, + ) + } - SubTitle("Error Link required field ", textColor = TextColor.OnSurfaceVariant) - var inputText4 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue()) } - InputLink( - title = "Label", - state = InputShellState.ERROR, - supportingText = listOf(SupportingTextData("Required", SupportingTextState.ERROR)), - inputTextFieldValue = inputText4, - isRequiredField = true, - onValueChanged = { - if (it != null) { - inputText4 = it - } - }, - onLinkActionCLicked = {}, - ) - Spacer(Modifier.size(Spacing.Spacing18)) + ColumnComponentContainer("Error Link required field ") { + var inputText4 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue()) } + InputLink( + title = "Label", + state = InputShellState.ERROR, + supportingText = listOf(SupportingTextData("Required", SupportingTextState.ERROR)), + inputTextFieldValue = inputText4, + isRequiredField = true, + onValueChanged = { + if (it != null) { + inputText4 = it + } + }, + onLinkActionCLicked = {}, + ) + } - SubTitle("Disabled Link with content ", textColor = TextColor.OnSurfaceVariant) - var inputText5 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("example.com")) } - InputLink( - title = "Label", - state = InputShellState.DISABLED, - inputTextFieldValue = inputText5, - onValueChanged = { - if (it != null) { - inputText5 = it - } - }, - onLinkActionCLicked = {}, - ) + ColumnComponentContainer("Disabled Link with content ") { + var inputText5 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("example.com")) } + InputLink( + title = "Label", + state = InputShellState.DISABLED, + inputTextFieldValue = inputText5, + onValueChanged = { + if (it != null) { + inputText5 = it + } + }, + onLinkActionCLicked = {}, + ) + } } } diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputOrgUnitScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputOrgUnitScreen.kt index 176cdc23c..22a2d7f48 100644 --- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputOrgUnitScreen.kt +++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputOrgUnitScreen.kt @@ -1,87 +1,81 @@ package org.hisp.dhis.common.screens.actionInputs -import androidx.compose.foundation.layout.Spacer -import androidx.compose.foundation.layout.size 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.Modifier import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer +import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer import org.hisp.dhis.mobile.ui.designsystem.component.InputOrgUnit import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState -import org.hisp.dhis.mobile.ui.designsystem.component.SubTitle import org.hisp.dhis.mobile.ui.designsystem.component.SupportingTextData import org.hisp.dhis.mobile.ui.designsystem.component.SupportingTextState -import org.hisp.dhis.mobile.ui.designsystem.component.Title -import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing -import org.hisp.dhis.mobile.ui.designsystem.theme.TextColor @Composable fun InputOrgUnitScreen() { - ColumnComponentContainer { - Title("Input Org. unit component", textColor = TextColor.OnSurfaceVariant) - SubTitle("Basic Org. unit ", textColor = TextColor.OnSurfaceVariant) - var inputText1 by rememberSaveable { mutableStateOf("") } + ColumnScreenContainer(title = ActionInputs.INPUT_ORG_UNIT.label) { + ColumnComponentContainer("Basic Org. unit ") { + var inputText1 by rememberSaveable { mutableStateOf("") } - InputOrgUnit( - title = "Label", - inputText = inputText1, - onValueChanged = { - if (it != null) { - inputText1 = it - } - }, - onOrgUnitActionCLicked = {}, - ) - Spacer(Modifier.size(Spacing.Spacing18)) + InputOrgUnit( + title = "Label", + inputText = inputText1, + onValueChanged = { + if (it != null) { + inputText1 = it + } + }, + onOrgUnitActionCLicked = {}, + ) + } - SubTitle("Basic Org. unit with content ", textColor = TextColor.OnSurfaceVariant) - var inputText2 by rememberSaveable { mutableStateOf("PHC Fakename") } + ColumnComponentContainer("Basic Org. unit with content ") { + var inputText2 by rememberSaveable { mutableStateOf("PHC Fakename") } - InputOrgUnit( - title = "Label", - inputText = inputText2, - onValueChanged = { - if (it != null) { - inputText2 = it - } - }, - onOrgUnitActionCLicked = {}, - ) - Spacer(Modifier.size(Spacing.Spacing18)) + InputOrgUnit( + title = "Label", + inputText = inputText2, + onValueChanged = { + if (it != null) { + inputText2 = it + } + }, + onOrgUnitActionCLicked = {}, + ) + } - SubTitle("Error Org. unit required field ", textColor = TextColor.OnSurfaceVariant) - var inputText3 by rememberSaveable { mutableStateOf("") } + ColumnComponentContainer("Error Org. unit required field ") { + var inputText3 by rememberSaveable { mutableStateOf("") } - InputOrgUnit( - title = "Label", - state = InputShellState.ERROR, - supportingText = listOf(SupportingTextData("Required", SupportingTextState.ERROR)), - inputText = inputText3, - isRequiredField = true, - onValueChanged = { - if (it != null) { - inputText3 = it - } - }, - onOrgUnitActionCLicked = {}, - ) - Spacer(Modifier.size(Spacing.Spacing18)) + InputOrgUnit( + title = "Label", + state = InputShellState.ERROR, + supportingText = listOf(SupportingTextData("Required", SupportingTextState.ERROR)), + inputText = inputText3, + isRequiredField = true, + onValueChanged = { + if (it != null) { + inputText3 = it + } + }, + onOrgUnitActionCLicked = {}, + ) + } - SubTitle("Disabled Org. unit with content ", textColor = TextColor.OnSurfaceVariant) - var inputText5 by rememberSaveable { mutableStateOf("PHC Fakename") } - InputOrgUnit( - title = "Label", - state = InputShellState.DISABLED, - inputText = inputText5, - onValueChanged = { - if (it != null) { - inputText5 = it - } - }, - onOrgUnitActionCLicked = {}, - ) + ColumnComponentContainer("Disabled Org. unit with content ") { + var inputText5 by rememberSaveable { mutableStateOf("PHC Fakename") } + InputOrgUnit( + title = "Label", + state = InputShellState.DISABLED, + inputText = inputText5, + onValueChanged = { + if (it != null) { + inputText5 = it + } + }, + onOrgUnitActionCLicked = {}, + ) + } } } diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputPhoneNumberScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputPhoneNumberScreen.kt index 095438ff5..c2ad46edb 100644 --- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputPhoneNumberScreen.kt +++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputPhoneNumberScreen.kt @@ -1,97 +1,92 @@ package org.hisp.dhis.common.screens.actionInputs -import androidx.compose.foundation.layout.Spacer -import androidx.compose.foundation.layout.size 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.Modifier import androidx.compose.ui.text.input.TextFieldValue import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer -import org.hisp.dhis.mobile.ui.designsystem.component.Description +import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer import org.hisp.dhis.mobile.ui.designsystem.component.InputPhoneNumber import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState -import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing -import org.hisp.dhis.mobile.ui.designsystem.theme.TextColor @Composable fun InputPhoneNumberScreen() { - ColumnComponentContainer( - title = "Input Phone Number", + ColumnScreenContainer( + title = ActionInputs.INPUT_PHONE_NUMBER.label, ) { var inputValue1 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue()) } - Description("Default Input Phone Number", textColor = TextColor.OnSurfaceVariant) - InputPhoneNumber( - title = "Label", - inputTextFieldValue = inputValue1, - onValueChanged = { - if (it != null) { - inputValue1 = it - } - }, - onCallActionClicked = { - // no-op - }, - onFocusChanged = {}, - state = InputShellState.UNFOCUSED, - ) - Spacer(Modifier.size(Spacing.Spacing18)) + ColumnComponentContainer("Default Input Phone Number") { + InputPhoneNumber( + title = "Label", + inputTextFieldValue = inputValue1, + onValueChanged = { + if (it != null) { + inputValue1 = it + } + }, + onCallActionClicked = { + // no-op + }, + onFocusChanged = {}, + state = InputShellState.UNFOCUSED, + ) + } var inputValue2 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue()) } - Description("Disabled Input Phone Number Without Phone Number", textColor = TextColor.OnSurfaceVariant) - InputPhoneNumber( - title = "Label", - inputTextFieldValue = inputValue2, - state = InputShellState.DISABLED, - onValueChanged = { - if (it != null) { - inputValue2 = it - } - }, - onCallActionClicked = { - // no-op - }, - onFocusChanged = {}, - ) - Spacer(Modifier.size(Spacing.Spacing18)) + ColumnComponentContainer("Disabled Input Phone Number Without Phone Number") { + InputPhoneNumber( + title = "Label", + inputTextFieldValue = inputValue2, + state = InputShellState.DISABLED, + onValueChanged = { + if (it != null) { + inputValue2 = it + } + }, + onCallActionClicked = { + // no-op + }, + onFocusChanged = {}, + ) + } var inputValue3 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("1111111")) } - Description("Disabled Input Phone Number With Phone Number", textColor = TextColor.OnSurfaceVariant) - InputPhoneNumber( - title = "Label", - inputTextFieldValue = inputValue3, - state = InputShellState.DISABLED, - onValueChanged = { - if (it != null) { - inputValue3 = it - } - }, - onCallActionClicked = { - // no-op - }, - onFocusChanged = {}, - ) - Spacer(Modifier.size(Spacing.Spacing18)) + ColumnComponentContainer("Disabled Input Phone Number With Phone Number") { + InputPhoneNumber( + title = "Label", + inputTextFieldValue = inputValue3, + state = InputShellState.DISABLED, + onValueChanged = { + if (it != null) { + inputValue3 = it + } + }, + onCallActionClicked = { + // no-op + }, + onFocusChanged = {}, + ) + } var inputValue4 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue()) } - Description("Error Input Phone Number", textColor = TextColor.OnSurfaceVariant) - InputPhoneNumber( - title = "Label", - inputTextFieldValue = inputValue4, - state = InputShellState.ERROR, - isRequiredField = true, - onValueChanged = { - if (it != null) { - inputValue4 = it - } - }, - onCallActionClicked = { - // no-op - }, - onFocusChanged = {}, - ) - Spacer(Modifier.size(Spacing.Spacing18)) + ColumnComponentContainer("Error Input Phone Number") { + InputPhoneNumber( + title = "Label", + inputTextFieldValue = inputValue4, + state = InputShellState.ERROR, + isRequiredField = true, + onValueChanged = { + if (it != null) { + inputValue4 = it + } + }, + onCallActionClicked = { + // no-op + }, + onFocusChanged = {}, + ) + } } } diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputPolygonScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputPolygonScreen.kt index 87df4bd4d..cb44a65a1 100644 --- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputPolygonScreen.kt +++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputPolygonScreen.kt @@ -1,67 +1,60 @@ package org.hisp.dhis.common.screens.actionInputs -import androidx.compose.foundation.layout.Spacer -import androidx.compose.foundation.layout.size 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.Modifier import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer +import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer import org.hisp.dhis.mobile.ui.designsystem.component.InputPolygon import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState -import org.hisp.dhis.mobile.ui.designsystem.component.SubTitle -import org.hisp.dhis.mobile.ui.designsystem.component.Title -import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing -import org.hisp.dhis.mobile.ui.designsystem.theme.TextColor @Composable fun InputPolygonScreen() { - ColumnComponentContainer { - Title("Input Polygon", textColor = TextColor.OnSurfaceVariant) + ColumnScreenContainer(title = ActionInputs.INPUT_POLYGON.label) { + ColumnComponentContainer("Basic Input Polygon ") { + var polygonCaptured by rememberSaveable { mutableStateOf(false) } + InputPolygon( + title = "Label", + polygonAdded = polygonCaptured, + onResetButtonClicked = { + polygonCaptured = false + }, + onUpdateButtonClicked = { + polygonCaptured = true + }, + ) + } - SubTitle("Basic Input Polygon ", textColor = TextColor.OnSurfaceVariant) - var polygonCaptured by rememberSaveable { mutableStateOf(false) } - InputPolygon( - title = "Label", - polygonAdded = polygonCaptured, - onResetButtonClicked = { - polygonCaptured = false - }, - onUpdateButtonClicked = { - polygonCaptured = true - }, - ) - Spacer(Modifier.size(Spacing.Spacing18)) + ColumnComponentContainer("Disabled Input Polygon without data ") { + var polygonCaptured1 by rememberSaveable { mutableStateOf(false) } + InputPolygon( + title = "Label", + state = InputShellState.DISABLED, + polygonAdded = polygonCaptured1, + onResetButtonClicked = { + polygonCaptured1 = false + }, + onUpdateButtonClicked = { + polygonCaptured1 = true + }, + ) + } - SubTitle("Disabled Input Polygon without data ", textColor = TextColor.OnSurfaceVariant) - var polygonCaptured1 by rememberSaveable { mutableStateOf(false) } - InputPolygon( - title = "Label", - state = InputShellState.DISABLED, - polygonAdded = polygonCaptured1, - onResetButtonClicked = { - polygonCaptured1 = false - }, - onUpdateButtonClicked = { - polygonCaptured1 = true - }, - ) - Spacer(Modifier.size(Spacing.Spacing18)) - - SubTitle("Disabled Input Polygon with data ", textColor = TextColor.OnSurfaceVariant) - var polygonCaptured2 by rememberSaveable { mutableStateOf(true) } - InputPolygon( - title = "Label", - state = InputShellState.DISABLED, - polygonAdded = polygonCaptured2, - onResetButtonClicked = { - polygonCaptured2 = false - }, - onUpdateButtonClicked = { - polygonCaptured2 = true - }, - ) + ColumnComponentContainer("Disabled Input Polygon with data ") { + var polygonCaptured2 by rememberSaveable { mutableStateOf(true) } + InputPolygon( + title = "Label", + state = InputShellState.DISABLED, + polygonAdded = polygonCaptured2, + onResetButtonClicked = { + polygonCaptured2 = false + }, + onUpdateButtonClicked = { + polygonCaptured2 = true + }, + ) + } } } diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputQRCodeScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputQRCodeScreen.kt index c6fb15ec9..5e45c6199 100644 --- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputQRCodeScreen.kt +++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputQRCodeScreen.kt @@ -2,8 +2,6 @@ package org.hisp.dhis.common.screens.actionInputs import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Row -import androidx.compose.foundation.layout.Spacer -import androidx.compose.foundation.layout.size import androidx.compose.material.icons.Icons import androidx.compose.material.icons.outlined.Info import androidx.compose.material3.Icon @@ -19,39 +17,21 @@ import org.hisp.dhis.common.screens.previews.threeButtonCarousel import org.hisp.dhis.mobile.ui.designsystem.component.BottomSheetShell import org.hisp.dhis.mobile.ui.designsystem.component.ButtonCarousel import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer -import org.hisp.dhis.mobile.ui.designsystem.component.Description +import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer import org.hisp.dhis.mobile.ui.designsystem.component.InputQRCode import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState import org.hisp.dhis.mobile.ui.designsystem.component.QrCodeBlock import org.hisp.dhis.mobile.ui.designsystem.component.SupportingTextData import org.hisp.dhis.mobile.ui.designsystem.component.SupportingTextState import org.hisp.dhis.mobile.ui.designsystem.resource.provideStringResource -import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing import org.hisp.dhis.mobile.ui.designsystem.theme.SurfaceColor -import org.hisp.dhis.mobile.ui.designsystem.theme.TextColor @Composable fun InputQRCodeScreen() { - ColumnComponentContainer { + ColumnScreenContainer(title = ActionInputs.INPUT_QR_CODE.label) { var inputValue1 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("889026a1-d01e-4d34-8209-81e8ed5c614b")) } var showEnabledQRBottomSheet by rememberSaveable { mutableStateOf(false) } - Description("Default Input QR code", textColor = TextColor.OnSurfaceVariant) - InputQRCode( - "label", - state = InputShellState.UNFOCUSED, - onQRButtonClicked = { - showEnabledQRBottomSheet = !showEnabledQRBottomSheet - }, - inputTextFieldValue = inputValue1, - onValueChanged = { - if (it != null) { - inputValue1 = it - } - }, - - ) - if (showEnabledQRBottomSheet) { BottomSheetShell( modifier = Modifier.testTag("LEGEND_BOTTOM_SHEET"), @@ -78,38 +58,54 @@ fun InputQRCodeScreen() { } } + ColumnComponentContainer("Default Input QR code") { + InputQRCode( + "label", + state = InputShellState.UNFOCUSED, + onQRButtonClicked = { + showEnabledQRBottomSheet = !showEnabledQRBottomSheet + }, + inputTextFieldValue = inputValue1, + onValueChanged = { + if (it != null) { + inputValue1 = it + } + }, + ) + } + var inputValue2 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue()) } - Description("Required field Input QR code", textColor = TextColor.OnSurfaceVariant) - InputQRCode( - "label", - state = InputShellState.ERROR, - onQRButtonClicked = { - }, - inputTextFieldValue = inputValue2, - onValueChanged = { - if (it != null) { - inputValue2 = it - } - }, - isRequiredField = true, - supportingText = listOf(SupportingTextData("Required", SupportingTextState.ERROR)), - ) - Spacer(Modifier.size(Spacing.Spacing18)) + ColumnComponentContainer("Required field Input QR code") { + InputQRCode( + "label", + state = InputShellState.ERROR, + onQRButtonClicked = { + }, + inputTextFieldValue = inputValue2, + onValueChanged = { + if (it != null) { + inputValue2 = it + } + }, + isRequiredField = true, + supportingText = listOf(SupportingTextData("Required", SupportingTextState.ERROR)), + ) + } - Spacer(Modifier.size(Spacing.Spacing18)) var inputValue by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue()) } - Description("Disabled Input QR code", textColor = TextColor.OnSurfaceVariant) - InputQRCode( - "label", - state = InputShellState.DISABLED, - onQRButtonClicked = { - }, - inputTextFieldValue = inputValue, - onValueChanged = { - if (it != null) { - inputValue = it - } - }, - ) + ColumnComponentContainer("Disabled Input QR code") { + InputQRCode( + "label", + state = InputShellState.DISABLED, + onQRButtonClicked = { + }, + inputTextFieldValue = inputValue, + onValueChanged = { + if (it != null) { + inputValue = it + } + }, + ) + } } } diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputSignatureScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputSignatureScreen.kt index 01fd0c9e4..bb4737215 100644 --- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputSignatureScreen.kt +++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputSignatureScreen.kt @@ -1,94 +1,87 @@ package org.hisp.dhis.common.screens.actionInputs -import androidx.compose.foundation.layout.Spacer -import androidx.compose.foundation.layout.size import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.runtime.saveable.rememberSaveable import androidx.compose.runtime.setValue -import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.ImageBitmap import androidx.compose.ui.graphics.painter.BitmapPainter import androidx.compose.ui.graphics.painter.Painter import mobile_ui.common.generated.resources.Res import mobile_ui.common.generated.resources.sample_signature import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer +import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState import org.hisp.dhis.mobile.ui.designsystem.component.InputSignature -import org.hisp.dhis.mobile.ui.designsystem.component.SubTitle -import org.hisp.dhis.mobile.ui.designsystem.component.Title -import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing -import org.hisp.dhis.mobile.ui.designsystem.theme.TextColor import org.jetbrains.compose.resources.painterResource @Composable fun InputSignatureScreen() { - ColumnComponentContainer { - Title("Input Signature", textColor = TextColor.OnSurfaceVariant) + ColumnScreenContainer(title = ActionInputs.INPUT_SIGNATURE.label) { + ColumnComponentContainer("Basic Input Signature ") { + var sampleSignature0 by rememberSaveable { mutableStateOf(null) } - SubTitle("Basic Input Signature ", textColor = TextColor.OnSurfaceVariant) - var sampleSignature0 by rememberSaveable { mutableStateOf(null) } + InputSignature( + title = "Label", + load = { sampleSignature0 }, + painterFor = sampleSignature0?.let { imageBitmap -> + { + BitmapPainter(imageBitmap) + } + }, + onDownloadButtonClick = {}, + onShareButtonClick = {}, + onResetButtonClicked = { + sampleSignature0 = null + }, + onSaveSignature = { + sampleSignature0 = it + }, + ) + } - InputSignature( - title = "Label", - load = { sampleSignature0 }, - painterFor = sampleSignature0?.let { imageBitmap -> - { - BitmapPainter(imageBitmap) - } - }, - onDownloadButtonClick = {}, - onShareButtonClick = {}, - onResetButtonClicked = { - sampleSignature0 = null - }, - onSaveSignature = { - sampleSignature0 = it - }, - ) - Spacer(Modifier.size(Spacing.Spacing18)) + ColumnComponentContainer("Basic Input Signature ") { + val sampleSignature = provideSampleImage() - SubTitle("Basic Input Signature ", textColor = TextColor.OnSurfaceVariant) - val sampleSignature = provideSampleImage() + InputSignature( + title = "Label", + load = { sampleSignature }, + painterFor = { remember { it } }, + onDownloadButtonClick = {}, + onShareButtonClick = {}, + onResetButtonClicked = { + }, + onSaveSignature = {}, + ) + } - InputSignature( - title = "Label", - load = { sampleSignature }, - painterFor = { remember { it } }, - onDownloadButtonClick = {}, - onShareButtonClick = {}, - onResetButtonClicked = { - }, - onSaveSignature = {}, - ) - Spacer(Modifier.size(Spacing.Spacing18)) + ColumnComponentContainer("Disabled Input Signature without data ") { + InputSignature( + title = "Label", + state = InputShellState.DISABLED, + load = { }, + onDownloadButtonClick = {}, + onShareButtonClick = {}, + onResetButtonClicked = {}, + onSaveSignature = {}, + ) + } - SubTitle("Disabled Input Signature without data ", textColor = TextColor.OnSurfaceVariant) - InputSignature( - title = "Label", - state = InputShellState.DISABLED, - load = { }, - onDownloadButtonClick = {}, - onShareButtonClick = {}, - onResetButtonClicked = {}, - onSaveSignature = {}, - ) - Spacer(Modifier.size(Spacing.Spacing18)) - - SubTitle("Disabled Input Signature with data ", textColor = TextColor.OnSurfaceVariant) - val sampleSignature2 = provideSampleImage() - InputSignature( - title = "Label", - state = InputShellState.DISABLED, - load = { sampleSignature2 }, - painterFor = { it }, - onDownloadButtonClick = {}, - onShareButtonClick = {}, - onResetButtonClicked = { }, - onSaveSignature = {}, - ) + ColumnComponentContainer("Disabled Input Signature with data ") { + val sampleSignature2 = provideSampleImage() + InputSignature( + title = "Label", + state = InputShellState.DISABLED, + load = { sampleSignature2 }, + painterFor = { it }, + onDownloadButtonClick = {}, + onShareButtonClick = {}, + onResetButtonClicked = { }, + onSaveSignature = {}, + ) + } } } diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/LoginScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/LoginScreen.kt index 7d327fdff..fec941326 100644 --- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/LoginScreen.kt +++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/LoginScreen.kt @@ -13,7 +13,7 @@ import androidx.compose.ui.Modifier import androidx.compose.ui.text.input.TextFieldValue import org.hisp.dhis.mobile.ui.designsystem.component.Button import org.hisp.dhis.mobile.ui.designsystem.component.ButtonStyle -import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer +import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer import org.hisp.dhis.mobile.ui.designsystem.component.InputPassword import org.hisp.dhis.mobile.ui.designsystem.component.InputQRCode import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState @@ -23,7 +23,7 @@ import org.hisp.dhis.mobile.ui.designsystem.component.model.InputUserModel @Composable fun LoginScreen() { - ColumnComponentContainer(title = "Login") { + ColumnScreenContainer(title = ActionInputs.LOGIN.label) { var server by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("https://play.dhis2.org/40")) } var userName by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("android")) } var password by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("password")) } @@ -60,12 +60,10 @@ fun LoginScreen() { Icon( imageVector = Icons.AutoMirrored.Outlined.Login, contentDescription = "Login button", - ) }, modifier = Modifier.fillMaxWidth(), enabled = (password.text.isNotEmpty() && userName.text.isNotEmpty() && server.text.isNotEmpty()), - ) } } diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/BasicTextInputsScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/BasicTextInputsScreen.kt index 3c10e11be..a7585e27e 100644 --- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/BasicTextInputsScreen.kt +++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/BasicTextInputsScreen.kt @@ -4,13 +4,12 @@ import androidx.compose.runtime.Composable import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import org.hisp.dhis.common.screens.NoComponentSelectedScreen +import org.hisp.dhis.common.screens.components.GroupComponentDropDown import org.hisp.dhis.mobile.ui.designsystem.component.DropdownItem -import org.hisp.dhis.mobile.ui.designsystem.component.InputDropDown -import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState @Composable fun BasicTextInputsScreen() { - val currentScreen = remember { mutableStateOf(BasicTextInputs.INPUT_TEXT) } + val currentScreen = remember { mutableStateOf(BasicTextInputs.NO_COMPONENT_SELECTED) } val screenDropdownItemList = mutableListOf() BasicTextInputs.entries.forEach { @@ -18,13 +17,11 @@ fun BasicTextInputsScreen() { screenDropdownItemList.add(DropdownItem(it.label)) } } - InputDropDown( - "Display", + GroupComponentDropDown( dropdownItems = screenDropdownItemList.toList(), onItemSelected = { currentScreen.value = getCurrentScreen(it.label) }, onResetButtonClicked = { currentScreen.value = BasicTextInputs.NO_COMPONENT_SELECTED }, selectedItem = DropdownItem(currentScreen.value.label), - state = InputShellState.UNFOCUSED, ) when (currentScreen.value) { BasicTextInputs.FORM_SHELLS -> FormShellsScreen() @@ -45,19 +42,19 @@ fun BasicTextInputsScreen() { } enum class BasicTextInputs(val label: String) { - FORM_SHELLS("Form Shells"), - INPUT_INTEGER("Input Integer"), - INPUT_LETTER("Input Letter"), - INPUT_LONG_TEXT("Input Long Text"), - INPUT_NEGATIVE_INTEGER("Input Negative Integer"), - INPUT_NOT_SUPPORTED("Input Not Supported"), - INPUT_NUMBER("Input Number"), - INPUT_PERCENTAGE("Input Percentage"), - INPUT_POSITIVE_INTEGER("Input Positive Integer"), - INPUT_POSITIVE_INTEGER_OR_ZERO("Input Positive Integer Or Zero"), - INPUT_TEXT("Input Text"), - INPUT_UNIT_INTERVAL("Input Unit Interval"), - SUPPORTING_TEXT("Supporting text"), + FORM_SHELLS("Form Shells component"), + INPUT_INTEGER("Input Integer component"), + INPUT_LETTER("Input Letter component"), + INPUT_LONG_TEXT("Input Long Text component"), + INPUT_NEGATIVE_INTEGER("Input Negative Integer component"), + INPUT_NOT_SUPPORTED("Input Not Supported component"), + INPUT_NUMBER("Input Number component"), + INPUT_PERCENTAGE("Input Percentage component"), + INPUT_POSITIVE_INTEGER("Input Positive Integer component"), + INPUT_POSITIVE_INTEGER_OR_ZERO("Input Positive or Zero Integer component"), + INPUT_TEXT("Input Text component"), + INPUT_UNIT_INTERVAL("Input Unit Interval component"), + SUPPORTING_TEXT("Supporting Text component"), NO_COMPONENT_SELECTED("No component selected"), } diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/FormShellsScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/FormShellsScreen.kt index eb486f119..3e9d6d464 100644 --- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/FormShellsScreen.kt +++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/FormShellsScreen.kt @@ -12,7 +12,7 @@ import androidx.compose.ui.text.input.ImeAction import androidx.compose.ui.text.input.TextFieldValue import org.hisp.dhis.common.screens.previews.lorem import org.hisp.dhis.common.screens.previews.regularLegendList -import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer +import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer import org.hisp.dhis.mobile.ui.designsystem.component.Description import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState import org.hisp.dhis.mobile.ui.designsystem.component.InputText @@ -26,7 +26,7 @@ import org.hisp.dhis.mobile.ui.designsystem.theme.TextColor @Composable fun FormShellsScreen() { - ColumnComponentContainer(title = "Form Shells") { + ColumnScreenContainer(title = BasicTextInputs.FORM_SHELLS.label) { SubTitle("Outer frames for form elements", TextColor.OnSurface) Description("Focused/Unfocused", TextColor.OnSurface) var inputValue1 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("Input")) } @@ -183,7 +183,6 @@ fun FormShellsScreen() { } }, state = InputShellState.UNFOCUSED, - ) Spacer(Modifier.size(Spacing.Spacing18)) @@ -306,5 +305,6 @@ fun FormShellsScreen() { }, state = InputShellState.UNFOCUSED, ) + Spacer(Modifier.size(Spacing.Spacing18)) } } diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/InputIntegerScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/InputIntegerScreen.kt index 308a5eb70..2786caf77 100644 --- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/InputIntegerScreen.kt +++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/InputIntegerScreen.kt @@ -1,78 +1,68 @@ package org.hisp.dhis.common.screens.basicTextInputs -import androidx.compose.foundation.layout.Spacer -import androidx.compose.foundation.layout.size 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.Modifier import androidx.compose.ui.text.input.TextFieldValue import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer +import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer import org.hisp.dhis.mobile.ui.designsystem.component.InputInteger import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState -import org.hisp.dhis.mobile.ui.designsystem.component.SubTitle import org.hisp.dhis.mobile.ui.designsystem.component.SupportingTextData import org.hisp.dhis.mobile.ui.designsystem.component.SupportingTextState -import org.hisp.dhis.mobile.ui.designsystem.component.Title -import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing -import org.hisp.dhis.mobile.ui.designsystem.theme.TextColor @Composable fun InputIntegerScreen() { - ColumnComponentContainer { - Title("Input Integer component", textColor = TextColor.OnSurfaceVariant) - SubTitle("Basic Input Integer", textColor = TextColor.OnSurfaceVariant) - var inputValue1 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("12")) } + ColumnScreenContainer(title = BasicTextInputs.INPUT_INTEGER.label) { + ColumnComponentContainer("Basic Input Integer") { + var inputValue1 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("12")) } + InputInteger( + title = "Label", + inputTextFieldValue = inputValue1, + onValueChanged = { + inputValue1 = it ?: TextFieldValue() + }, + state = InputShellState.UNFOCUSED, + ) + } - InputInteger( - title = "Label", - inputTextFieldValue = inputValue1, - onValueChanged = { - inputValue1 = it ?: TextFieldValue() - }, - state = InputShellState.UNFOCUSED, - ) - Spacer(Modifier.size(Spacing.Spacing18)) + ColumnComponentContainer("Basic Input Integer with error") { + var inputValueError by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("")) } + InputInteger( + title = "Label", + inputTextFieldValue = inputValueError, + onValueChanged = { + inputValueError = it ?: TextFieldValue() + }, + state = InputShellState.ERROR, + supportingText = listOf(SupportingTextData("Numbers only", SupportingTextState.ERROR)), + ) + } - SubTitle("Basic Input Integer with error", textColor = TextColor.OnSurfaceVariant) - var inputValueError by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("")) } + ColumnComponentContainer("Disabled Input Integer ") { + var inputValue6 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue()) } + InputInteger( + title = "Label", + inputTextFieldValue = inputValue6, + state = InputShellState.DISABLED, + onValueChanged = { + inputValue6 = it ?: TextFieldValue() + }, + ) + } - InputInteger( - title = "Label", - inputTextFieldValue = inputValueError, - onValueChanged = { - inputValueError = it ?: TextFieldValue() - }, - state = InputShellState.ERROR, - supportingText = listOf(SupportingTextData("Numbers only", SupportingTextState.ERROR)), - ) - Spacer(Modifier.size(Spacing.Spacing18)) - - var inputValue6 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue()) } - - SubTitle("Disabled Input Integer ", textColor = TextColor.OnSurfaceVariant) - InputInteger( - title = "Label", - inputTextFieldValue = inputValue6, - state = InputShellState.DISABLED, - onValueChanged = { - inputValue6 = it ?: TextFieldValue() - }, - ) - Spacer(Modifier.size(Spacing.Spacing18)) - - var inputValue7 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("1234")) } - - SubTitle("Disabled Input Integer with content ", textColor = TextColor.OnSurfaceVariant) - InputInteger( - title = "Label", - inputTextFieldValue = inputValue7, - state = InputShellState.DISABLED, - onValueChanged = { - inputValue7 = it ?: TextFieldValue() - }, - ) + ColumnComponentContainer("Disabled Input Integer with content ") { + var inputValue7 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("1234")) } + InputInteger( + title = "Label", + inputTextFieldValue = inputValue7, + state = InputShellState.DISABLED, + onValueChanged = { + inputValue7 = it ?: TextFieldValue() + }, + ) + } } } diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/InputLetterScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/InputLetterScreen.kt index ec19b0eda..55a1f8b35 100644 --- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/InputLetterScreen.kt +++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/InputLetterScreen.kt @@ -1,78 +1,68 @@ package org.hisp.dhis.common.screens.basicTextInputs -import androidx.compose.foundation.layout.Spacer -import androidx.compose.foundation.layout.size 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.Modifier import androidx.compose.ui.text.input.TextFieldValue import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer +import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer import org.hisp.dhis.mobile.ui.designsystem.component.InputLetter import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState -import org.hisp.dhis.mobile.ui.designsystem.component.SubTitle import org.hisp.dhis.mobile.ui.designsystem.component.SupportingTextData import org.hisp.dhis.mobile.ui.designsystem.component.SupportingTextState -import org.hisp.dhis.mobile.ui.designsystem.component.Title -import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing -import org.hisp.dhis.mobile.ui.designsystem.theme.TextColor @Composable fun InputLetterScreen() { - ColumnComponentContainer { - Title("Input Letter component", textColor = TextColor.OnSurfaceVariant) - SubTitle(" Basic Input Letter", textColor = TextColor.OnSurfaceVariant) - var inputValue1 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue()) } + ColumnScreenContainer(title = BasicTextInputs.INPUT_LETTER.label) { + ColumnComponentContainer(" Basic Input Letter") { + var inputValue1 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue()) } + InputLetter( + title = "Label", + inputTextFieldValue = inputValue1, + onValueChanged = { + inputValue1 = it ?: TextFieldValue() + }, + state = InputShellState.UNFOCUSED, + ) + } - InputLetter( - title = "Label", - inputTextFieldValue = inputValue1, - onValueChanged = { - inputValue1 = it ?: TextFieldValue() - }, - state = InputShellState.UNFOCUSED, - ) - Spacer(Modifier.size(Spacing.Spacing18)) + ColumnComponentContainer(" Basic Input Letter with error") { + var inputValueError by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue()) } + InputLetter( + title = "Label", + inputTextFieldValue = inputValueError, + onValueChanged = { + inputValueError = it ?: TextFieldValue() + }, + supportingText = listOf(SupportingTextData("Letters only. eg. A, B, C", SupportingTextState.ERROR)), + state = InputShellState.ERROR, + ) + } - SubTitle(" Basic Input Letter with error", textColor = TextColor.OnSurfaceVariant) - var inputValueError by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue()) } + ColumnComponentContainer("Disabled Input Letter ") { + var inputValue6 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue()) } + InputLetter( + title = "Label", + inputTextFieldValue = inputValue6, + state = InputShellState.DISABLED, + onValueChanged = { + inputValue6 = it ?: TextFieldValue() + }, + ) + } - InputLetter( - title = "Label", - inputTextFieldValue = inputValueError, - onValueChanged = { - inputValueError = it ?: TextFieldValue() - }, - supportingText = listOf(SupportingTextData("Letters only. eg. A, B, C", SupportingTextState.ERROR)), - state = InputShellState.ERROR, - ) - Spacer(Modifier.size(Spacing.Spacing18)) - - var inputValue6 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue()) } - - SubTitle("Disabled Input Letter ", textColor = TextColor.OnSurfaceVariant) - InputLetter( - title = "Label", - inputTextFieldValue = inputValue6, - state = InputShellState.DISABLED, - onValueChanged = { - inputValue6 = it ?: TextFieldValue() - }, - ) - Spacer(Modifier.size(Spacing.Spacing18)) - - var inputValue7 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("A")) } - - SubTitle("Disabled Input Letter with content ", textColor = TextColor.OnSurfaceVariant) - InputLetter( - title = "Label", - inputTextFieldValue = inputValue7, - state = InputShellState.DISABLED, - onValueChanged = { - inputValue7 = it ?: TextFieldValue() - }, - ) + ColumnComponentContainer("Disabled Input Letter with content ") { + var inputValue7 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("A")) } + InputLetter( + title = "Label", + inputTextFieldValue = inputValue7, + state = InputShellState.DISABLED, + onValueChanged = { + inputValue7 = it ?: TextFieldValue() + }, + ) + } } } diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/InputLongTextScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/InputLongTextScreen.kt index 13264704e..861be5139 100644 --- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/InputLongTextScreen.kt +++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/InputLongTextScreen.kt @@ -1,104 +1,94 @@ package org.hisp.dhis.common.screens.basicTextInputs -import androidx.compose.foundation.layout.Spacer -import androidx.compose.foundation.layout.size 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.Modifier import androidx.compose.ui.text.input.TextFieldValue import org.hisp.dhis.common.screens.previews.lorem_medium import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer +import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer import org.hisp.dhis.mobile.ui.designsystem.component.InputLongText import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState -import org.hisp.dhis.mobile.ui.designsystem.component.SubTitle import org.hisp.dhis.mobile.ui.designsystem.component.SupportingTextData import org.hisp.dhis.mobile.ui.designsystem.component.SupportingTextState -import org.hisp.dhis.mobile.ui.designsystem.component.Title -import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing -import org.hisp.dhis.mobile.ui.designsystem.theme.TextColor @Composable fun InputLongTextScreen() { - ColumnComponentContainer { - Title("Input Long Text component", textColor = TextColor.OnSurfaceVariant) - SubTitle(" Basic Input Long Text", textColor = TextColor.OnSurfaceVariant) - var inputValue1 by rememberSaveable(stateSaver = TextFieldValue.Saver) { - mutableStateOf( - TextFieldValue(lorem_medium), - + ColumnScreenContainer(title = BasicTextInputs.INPUT_LONG_TEXT.label) { + ColumnComponentContainer(" Basic Input Long Text") { + var inputValue1 by rememberSaveable(stateSaver = TextFieldValue.Saver) { + mutableStateOf( + TextFieldValue(lorem_medium), + ) + } + InputLongText( + title = "Label", + inputTextFieldValue = inputValue1, + onValueChanged = { + if (it != null) { + inputValue1 = it + } + }, + state = InputShellState.UNFOCUSED, ) } - InputLongText( - title = "Label", - inputTextFieldValue = inputValue1, - onValueChanged = { - if (it != null) { - inputValue1 = it - } - }, - state = InputShellState.UNFOCUSED, - ) - Spacer(Modifier.size(Spacing.Spacing18)) - - SubTitle(" Basic Input Long Text with error message", textColor = TextColor.OnSurfaceVariant) - var inputValueError by rememberSaveable(stateSaver = TextFieldValue.Saver) { - mutableStateOf( - TextFieldValue(lorem_medium), + ColumnComponentContainer(" Basic Input Long Text with error message") { + var inputValueError by rememberSaveable(stateSaver = TextFieldValue.Saver) { + mutableStateOf( + TextFieldValue(lorem_medium), + ) + } + InputLongText( + title = "Label", + inputTextFieldValue = inputValueError, + onValueChanged = { + if (it != null) { + inputValueError = it + } + }, + supportingText = listOf( + SupportingTextData( + "100000/1000000 characters used", + state = SupportingTextState.ERROR, + ), + ), + state = InputShellState.ERROR, ) } - InputLongText( - title = "Label", - inputTextFieldValue = inputValueError, - onValueChanged = { - if (it != null) { - inputValueError = it - } - }, - supportingText = listOf( - SupportingTextData( - "100000/1000000 characters used", - state = SupportingTextState.ERROR, - ), - ), - state = InputShellState.ERROR, - ) - Spacer(Modifier.size(Spacing.Spacing18)) - var inputValue6 by rememberSaveable(stateSaver = TextFieldValue.Saver) { - mutableStateOf( - TextFieldValue(""), + ColumnComponentContainer("Disabled Input Long Text ") { + var inputValue6 by rememberSaveable(stateSaver = TextFieldValue.Saver) { + mutableStateOf( + TextFieldValue(""), + ) + } + InputLongText( + title = "Label", + inputTextFieldValue = inputValue6, + state = InputShellState.DISABLED, + onValueChanged = { + if (it != null) { + inputValue6 = it + } + }, ) } - SubTitle("Disabled Input Long Text ", textColor = TextColor.OnSurfaceVariant) - InputLongText( - title = "Label", - inputTextFieldValue = inputValue6, - state = InputShellState.DISABLED, - onValueChanged = { - if (it != null) { - inputValue6 = it - } - }, - ) - Spacer(Modifier.size(Spacing.Spacing18)) - - var inputValue7 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("Content")) } - - SubTitle("Disabled Input text with content ", textColor = TextColor.OnSurfaceVariant) - InputLongText( - title = "Label", - inputTextFieldValue = inputValue7, - state = InputShellState.DISABLED, - onValueChanged = { - if (it != null) { - inputValue7 = it - } - }, - ) + ColumnComponentContainer("Disabled Input text with content ") { + var inputValue7 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("Content")) } + InputLongText( + title = "Label", + inputTextFieldValue = inputValue7, + state = InputShellState.DISABLED, + onValueChanged = { + if (it != null) { + inputValue7 = it + } + }, + ) + } } } diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/InputNegativeIntegerScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/InputNegativeIntegerScreen.kt index 4a7342673..95b60dd96 100644 --- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/InputNegativeIntegerScreen.kt +++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/InputNegativeIntegerScreen.kt @@ -1,86 +1,76 @@ package org.hisp.dhis.common.screens.basicTextInputs -import androidx.compose.foundation.layout.Spacer -import androidx.compose.foundation.layout.size 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.Modifier import androidx.compose.ui.text.input.TextFieldValue import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer +import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer import org.hisp.dhis.mobile.ui.designsystem.component.InputNegativeInteger import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState -import org.hisp.dhis.mobile.ui.designsystem.component.SubTitle import org.hisp.dhis.mobile.ui.designsystem.component.SupportingTextData import org.hisp.dhis.mobile.ui.designsystem.component.SupportingTextState -import org.hisp.dhis.mobile.ui.designsystem.component.Title -import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing -import org.hisp.dhis.mobile.ui.designsystem.theme.TextColor @Composable fun InputNegativeIntegerScreen() { - ColumnComponentContainer { - Title("Input Negative Integer component", textColor = TextColor.OnSurfaceVariant) - SubTitle("Basic Input Negative Integer", textColor = TextColor.OnSurfaceVariant) - var inputValue1 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("-12")) } + ColumnScreenContainer(title = BasicTextInputs.INPUT_NEGATIVE_INTEGER.label) { + ColumnComponentContainer("Basic Input Negative Integer") { + var inputValue1 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("-12")) } + InputNegativeInteger( + title = "Label", + inputTextFieldValue = inputValue1, + onValueChanged = { + if (it != null) { + inputValue1 = it + } + }, + state = InputShellState.UNFOCUSED, + ) + } - InputNegativeInteger( - title = "Label", - inputTextFieldValue = inputValue1, - onValueChanged = { - if (it != null) { - inputValue1 = it - } - }, - state = InputShellState.UNFOCUSED, - ) - Spacer(Modifier.size(Spacing.Spacing18)) + ColumnComponentContainer("Basic Input Integer with error") { + var inputValueError by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue()) } + InputNegativeInteger( + title = "Label", + inputTextFieldValue = inputValueError, + onValueChanged = { + if (it != null) { + inputValueError = it + } + }, + state = InputShellState.ERROR, + supportingText = listOf(SupportingTextData("Numbers only", SupportingTextState.ERROR)), + ) + } - SubTitle("Basic Input Integer with error", textColor = TextColor.OnSurfaceVariant) - var inputValueError by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue()) } + ColumnComponentContainer("Disabled Input Negative Integer ") { + var inputValue6 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue()) } + InputNegativeInteger( + title = "Label", + inputTextFieldValue = inputValue6, + state = InputShellState.DISABLED, + onValueChanged = { + if (it != null) { + inputValue6 = it + } + }, + ) + } - InputNegativeInteger( - title = "Label", - inputTextFieldValue = inputValueError, - onValueChanged = { - if (it != null) { - inputValueError = it - } - }, - state = InputShellState.ERROR, - supportingText = listOf(SupportingTextData("Numbers only", SupportingTextState.ERROR)), - ) - Spacer(Modifier.size(Spacing.Spacing18)) - - var inputValue6 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue()) } - - SubTitle("Disabled Input Negative Integer ", textColor = TextColor.OnSurfaceVariant) - InputNegativeInteger( - title = "Label", - inputTextFieldValue = inputValue6, - state = InputShellState.DISABLED, - onValueChanged = { - if (it != null) { - inputValue6 = it - } - }, - ) - Spacer(Modifier.size(Spacing.Spacing18)) - - var inputValue7 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("1234")) } - - SubTitle("Disabled Input Negative Integer with content ", textColor = TextColor.OnSurfaceVariant) - InputNegativeInteger( - title = "Label", - inputTextFieldValue = inputValue7, - state = InputShellState.DISABLED, - onValueChanged = { - if (it != null) { - inputValue7 = it - } - }, - ) + ColumnComponentContainer("Disabled Input Negative Integer with content ") { + var inputValue7 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("1234")) } + InputNegativeInteger( + title = "Label", + inputTextFieldValue = inputValue7, + state = InputShellState.DISABLED, + onValueChanged = { + if (it != null) { + inputValue7 = it + } + }, + ) + } } } diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/InputNotSupportedScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/InputNotSupportedScreen.kt index 6dea6fe9b..fc2e9354c 100644 --- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/InputNotSupportedScreen.kt +++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/InputNotSupportedScreen.kt @@ -2,11 +2,14 @@ package org.hisp.dhis.common.screens.basicTextInputs import androidx.compose.runtime.Composable import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer +import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer import org.hisp.dhis.mobile.ui.designsystem.component.InputNotSupported @Composable fun InputNotSupportedScreen() { - ColumnComponentContainer { - InputNotSupported(title = "Label") + ColumnScreenContainer(title = BasicTextInputs.INPUT_NOT_SUPPORTED.label) { + ColumnComponentContainer { + InputNotSupported(title = "Label") + } } } diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/InputNumberScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/InputNumberScreen.kt index c69e9b640..3d06024c9 100644 --- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/InputNumberScreen.kt +++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/InputNumberScreen.kt @@ -1,87 +1,76 @@ package org.hisp.dhis.common.screens.basicTextInputs -import androidx.compose.foundation.layout.Spacer -import androidx.compose.foundation.layout.size 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.Modifier import androidx.compose.ui.text.input.TextFieldValue import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer -import org.hisp.dhis.mobile.ui.designsystem.component.Description +import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer import org.hisp.dhis.mobile.ui.designsystem.component.InputNumber import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState -import org.hisp.dhis.mobile.ui.designsystem.component.SubTitle -import org.hisp.dhis.mobile.ui.designsystem.component.Title import org.hisp.dhis.mobile.ui.designsystem.component.internal.RegExValidations -import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing -import org.hisp.dhis.mobile.ui.designsystem.theme.TextColor @Composable fun InputNumberScreen() { - ColumnComponentContainer { - Title("Input Number component", textColor = TextColor.OnSurfaceVariant) - SubTitle("Basic Input Number", textColor = TextColor.OnSurfaceVariant) - var inputValue1 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue()) } - Description("British decimal notation", textColor = TextColor.OnSurfaceVariant) - InputNumber( - title = "Label", - inputTextFieldValue = inputValue1, - onValueChanged = { - if (it != null) { - inputValue1 = it - } - }, - notation = RegExValidations.BRITISH_DECIMAL_NOTATION, - state = InputShellState.UNFOCUSED, - ) - Spacer(Modifier.size(Spacing.Spacing18)) + ColumnScreenContainer(title = BasicTextInputs.INPUT_NUMBER.label) { + ColumnComponentContainer("Basic Input Number") { + var inputValue1 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue()) } + InputNumber( + title = "Label", + inputTextFieldValue = inputValue1, + onValueChanged = { + if (it != null) { + inputValue1 = it + } + }, + notation = RegExValidations.BRITISH_DECIMAL_NOTATION, + state = InputShellState.UNFOCUSED, + ) + } - Description("European decimal notation", textColor = TextColor.OnSurfaceVariant) - var inputValueEuropean by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue()) } + ColumnComponentContainer("European decimal notation") { + var inputValueEuropean by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue()) } + InputNumber( + title = "Label", + inputTextFieldValue = inputValueEuropean, + onValueChanged = { + if (it != null) { + inputValueEuropean = it + } + }, + notation = RegExValidations.EUROPEAN_DECIMAL_NOTATION, + state = InputShellState.UNFOCUSED, + ) + } - InputNumber( - title = "Label", - inputTextFieldValue = inputValueEuropean, - onValueChanged = { - if (it != null) { - inputValueEuropean = it - } - }, - notation = RegExValidations.EUROPEAN_DECIMAL_NOTATION, - state = InputShellState.UNFOCUSED, - ) - Spacer(Modifier.size(Spacing.Spacing18)) + ColumnComponentContainer("Disabled Input Number ") { + var inputValue6 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue()) } + InputNumber( + title = "Label", + inputTextFieldValue = inputValue6, + state = InputShellState.DISABLED, + onValueChanged = { + if (it != null) { + inputValue6 = it + } + }, + ) + } - var inputValue6 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue()) } - - SubTitle("Disabled Input Number ", textColor = TextColor.OnSurfaceVariant) - InputNumber( - title = "Label", - inputTextFieldValue = inputValue6, - state = InputShellState.DISABLED, - onValueChanged = { - if (it != null) { - inputValue6 = it - } - }, - ) - Spacer(Modifier.size(Spacing.Spacing18)) - - var inputValue7 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("86")) } - - SubTitle("Disabled Input Number with content ", textColor = TextColor.OnSurfaceVariant) - InputNumber( - title = "Label", - inputTextFieldValue = inputValue7, - state = InputShellState.DISABLED, - onValueChanged = { - if (it != null) { - inputValue7 = it - } - }, - ) + ColumnComponentContainer("Disabled Input Number with content ") { + var inputValue7 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("86")) } + InputNumber( + title = "Label", + inputTextFieldValue = inputValue7, + state = InputShellState.DISABLED, + onValueChanged = { + if (it != null) { + inputValue7 = it + } + }, + ) + } } } diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/InputPercentageScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/InputPercentageScreen.kt index c64c30a30..1095e68d3 100644 --- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/InputPercentageScreen.kt +++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/InputPercentageScreen.kt @@ -1,84 +1,74 @@ package org.hisp.dhis.common.screens.basicTextInputs -import androidx.compose.foundation.layout.Spacer -import androidx.compose.foundation.layout.size 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.Modifier import androidx.compose.ui.text.input.TextFieldValue import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer +import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer import org.hisp.dhis.mobile.ui.designsystem.component.InputPercentage import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState -import org.hisp.dhis.mobile.ui.designsystem.component.SubTitle -import org.hisp.dhis.mobile.ui.designsystem.component.Title -import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing -import org.hisp.dhis.mobile.ui.designsystem.theme.TextColor @Composable fun InputPercentageScreen() { - ColumnComponentContainer { - Title("Input Percentage component", textColor = TextColor.OnSurfaceVariant) - SubTitle("Basic Percentage ", textColor = TextColor.OnSurfaceVariant) - var inputValue1 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("12")) } + ColumnScreenContainer(title = BasicTextInputs.INPUT_PERCENTAGE.label) { + ColumnComponentContainer("Basic Percentage ") { + var inputValue1 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("12")) } + InputPercentage( + title = "Label", + inputTextFieldValue = inputValue1, + onValueChanged = { + if (it != null) { + inputValue1 = it + } + }, + state = InputShellState.UNFOCUSED, + ) + } - InputPercentage( - title = "Label", - inputTextFieldValue = inputValue1, - onValueChanged = { - if (it != null) { - inputValue1 = it - } - }, - state = InputShellState.UNFOCUSED, - ) - Spacer(Modifier.size(Spacing.Spacing18)) + ColumnComponentContainer("Basic Percentage required field") { + var inputValueRequired by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue()) } + InputPercentage( + title = "Label", + inputTextFieldValue = inputValueRequired, + onValueChanged = { + if (it != null) { + inputValueRequired = it + } + }, + state = InputShellState.ERROR, + isRequiredField = true, + ) + } - SubTitle("Basic Percentage required field", textColor = TextColor.OnSurfaceVariant) - var inputValueRequired by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue()) } + ColumnComponentContainer("Disabled Percentage ") { + var inputValue6 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue()) } + InputPercentage( + title = "Label", + inputTextFieldValue = inputValue6, + state = InputShellState.DISABLED, + onValueChanged = { + if (it != null) { + inputValue6 = it + } + }, + ) + } - InputPercentage( - title = "Label", - inputTextFieldValue = inputValueRequired, - onValueChanged = { - if (it != null) { - inputValueRequired = it - } - }, - state = InputShellState.ERROR, - isRequiredField = true, - ) - Spacer(Modifier.size(Spacing.Spacing18)) - - var inputValue6 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue()) } - - SubTitle("Disabled Percentage ", textColor = TextColor.OnSurfaceVariant) - InputPercentage( - title = "Label", - inputTextFieldValue = inputValue6, - state = InputShellState.DISABLED, - onValueChanged = { - if (it != null) { - inputValue6 = it - } - }, - ) - Spacer(Modifier.size(Spacing.Spacing18)) - - var inputValue7 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("1234")) } - - SubTitle("Disabled Percentage with content ", textColor = TextColor.OnSurfaceVariant) - InputPercentage( - title = "Label", - inputTextFieldValue = inputValue7, - state = InputShellState.DISABLED, - onValueChanged = { - if (it != null) { - inputValue7 = it - } - }, - ) + ColumnComponentContainer("Disabled Percentage with content ") { + var inputValue7 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("1234")) } + InputPercentage( + title = "Label", + inputTextFieldValue = inputValue7, + state = InputShellState.DISABLED, + onValueChanged = { + if (it != null) { + inputValue7 = it + } + }, + ) + } } } diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/InputPositiveIntegerOrZeroScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/InputPositiveIntegerOrZeroScreen.kt index 361469c7b..ae996e1bd 100644 --- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/InputPositiveIntegerOrZeroScreen.kt +++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/InputPositiveIntegerOrZeroScreen.kt @@ -1,71 +1,62 @@ package org.hisp.dhis.common.screens.basicTextInputs -import androidx.compose.foundation.layout.Spacer -import androidx.compose.foundation.layout.size 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.Modifier import androidx.compose.ui.text.input.TextFieldValue import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer +import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer import org.hisp.dhis.mobile.ui.designsystem.component.InputPositiveIntegerOrZero import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState -import org.hisp.dhis.mobile.ui.designsystem.component.SubTitle import org.hisp.dhis.mobile.ui.designsystem.component.SupportingTextData import org.hisp.dhis.mobile.ui.designsystem.component.SupportingTextState -import org.hisp.dhis.mobile.ui.designsystem.component.Title -import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing -import org.hisp.dhis.mobile.ui.designsystem.theme.TextColor @Composable fun InputPositiveIntegerOrZeroScreen() { - ColumnComponentContainer { - Title("Input Positive or Zero Integer component", textColor = TextColor.OnSurfaceVariant) - SubTitle("Basic Input Integer", textColor = TextColor.OnSurfaceVariant) - var inputValue1 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("123")) } + ColumnScreenContainer(title = BasicTextInputs.INPUT_POSITIVE_INTEGER_OR_ZERO.label) { + ColumnComponentContainer("Basic Input Integer") { + var inputValue1 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("123")) } + InputPositiveIntegerOrZero( + title = "Label", + inputTextFieldValue = inputValue1, + onValueChanged = { + if (it != null) { + inputValue1 = it + } + }, + state = InputShellState.UNFOCUSED, + ) + } - InputPositiveIntegerOrZero( - title = "Label", - inputTextFieldValue = inputValue1, - onValueChanged = { - if (it != null) { - inputValue1 = it - } - }, - state = InputShellState.UNFOCUSED, - ) - Spacer(Modifier.size(Spacing.Spacing18)) + ColumnComponentContainer("Basic Input Integer with error") { + var inputValueError by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue()) } + InputPositiveIntegerOrZero( + title = "Label", + inputTextFieldValue = inputValueError, + onValueChanged = { + if (it != null) { + inputValueError = it + } + }, + state = InputShellState.ERROR, + supportingText = listOf(SupportingTextData("Numbers only", SupportingTextState.ERROR)), + ) + } - SubTitle("Basic Input Integer with error", textColor = TextColor.OnSurfaceVariant) - var inputValueError by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue()) } - - InputPositiveIntegerOrZero( - title = "Label", - inputTextFieldValue = inputValueError, - onValueChanged = { - if (it != null) { - inputValueError = it - } - }, - state = InputShellState.ERROR, - supportingText = listOf(SupportingTextData("Numbers only", SupportingTextState.ERROR)), - ) - Spacer(Modifier.size(Spacing.Spacing18)) - - var inputValue7 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("1234")) } - - SubTitle("Disabled Input Integer with content ", textColor = TextColor.OnSurfaceVariant) - InputPositiveIntegerOrZero( - title = "Label", - inputTextFieldValue = inputValue7, - state = InputShellState.DISABLED, - onValueChanged = { - if (it != null) { - inputValue7 = it - } - }, - ) + ColumnComponentContainer("Disabled Input Integer with content ") { + var inputValue7 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("1234")) } + InputPositiveIntegerOrZero( + title = "Label", + inputTextFieldValue = inputValue7, + state = InputShellState.DISABLED, + onValueChanged = { + if (it != null) { + inputValue7 = it + } + }, + ) + } } } diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/InputPositiveIntegerScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/InputPositiveIntegerScreen.kt index 9fedce22d..0cdeafc83 100644 --- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/InputPositiveIntegerScreen.kt +++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/InputPositiveIntegerScreen.kt @@ -1,85 +1,78 @@ package org.hisp.dhis.common.screens.basicTextInputs -import androidx.compose.foundation.layout.Spacer -import androidx.compose.foundation.layout.size 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.Modifier import androidx.compose.ui.text.input.TextFieldValue import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer +import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer import org.hisp.dhis.mobile.ui.designsystem.component.InputPositiveInteger import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState -import org.hisp.dhis.mobile.ui.designsystem.component.SubTitle import org.hisp.dhis.mobile.ui.designsystem.component.SupportingTextData import org.hisp.dhis.mobile.ui.designsystem.component.SupportingTextState -import org.hisp.dhis.mobile.ui.designsystem.component.Title -import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing -import org.hisp.dhis.mobile.ui.designsystem.theme.TextColor @Composable fun InputPositiveIntegerScreen() { - ColumnComponentContainer { - Title("Input Positive Integer component", textColor = TextColor.OnSurfaceVariant) - SubTitle("Basic Input Integer", textColor = TextColor.OnSurfaceVariant) - var inputValue1 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("12")) } + ColumnScreenContainer(title = BasicTextInputs.INPUT_POSITIVE_INTEGER.label) { + ColumnComponentContainer("Basic Input Integer") { + var inputValue1 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("12")) } - InputPositiveInteger( - title = "Label", - inputTextFieldValue = inputValue1, - onValueChanged = { - if (it != null) { - inputValue1 = it - } - }, - state = InputShellState.UNFOCUSED, - ) - Spacer(Modifier.size(Spacing.Spacing18)) - SubTitle("Basic Input Integer with error", textColor = TextColor.OnSurfaceVariant) - var inputValueError by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue()) } + InputPositiveInteger( + title = "Label", + inputTextFieldValue = inputValue1, + onValueChanged = { + if (it != null) { + inputValue1 = it + } + }, + state = InputShellState.UNFOCUSED, + ) + } - InputPositiveInteger( - title = "Label", - inputTextFieldValue = inputValueError, - onValueChanged = { - if (it != null) { - inputValueError = it - } - }, - state = InputShellState.ERROR, - supportingText = listOf(SupportingTextData("Numbers only", SupportingTextState.ERROR)), - ) - Spacer(Modifier.size(Spacing.Spacing18)) + ColumnComponentContainer("Basic Input Integer with error") { + var inputValueError by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue()) } + InputPositiveInteger( + title = "Label", + inputTextFieldValue = inputValueError, + onValueChanged = { + if (it != null) { + inputValueError = it + } + }, + state = InputShellState.ERROR, + supportingText = listOf(SupportingTextData("Numbers only", SupportingTextState.ERROR)), + ) + } - var inputValue6 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue()) } + ColumnComponentContainer("Disabled Input Integer ") { + var inputValue6 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue()) } - SubTitle("Disabled Input Integer ", textColor = TextColor.OnSurfaceVariant) - InputPositiveInteger( - title = "Label", - inputTextFieldValue = inputValue6, - state = InputShellState.DISABLED, - onValueChanged = { - if (it != null) { - inputValue6 = it - } - }, - ) - Spacer(Modifier.size(Spacing.Spacing18)) + InputPositiveInteger( + title = "Label", + inputTextFieldValue = inputValue6, + state = InputShellState.DISABLED, + onValueChanged = { + if (it != null) { + inputValue6 = it + } + }, + ) + } - var inputValue7 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("1234")) } - - SubTitle("Disabled Input Integer with content ", textColor = TextColor.OnSurfaceVariant) - InputPositiveInteger( - title = "Label", - inputTextFieldValue = inputValue7, - state = InputShellState.DISABLED, - onValueChanged = { - if (it != null) { - inputValue7 = it - } - }, - ) + ColumnComponentContainer("Disabled Input Integer with content ") { + var inputValue7 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("1234")) } + InputPositiveInteger( + title = "Label", + inputTextFieldValue = inputValue7, + state = InputShellState.DISABLED, + onValueChanged = { + if (it != null) { + inputValue7 = it + } + }, + ) + } } } diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/InputTextScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/InputTextScreen.kt index f5318eec3..4eb829fb0 100644 --- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/InputTextScreen.kt +++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/InputTextScreen.kt @@ -1,88 +1,79 @@ package org.hisp.dhis.common.screens.basicTextInputs -import androidx.compose.foundation.layout.Spacer -import androidx.compose.foundation.layout.size 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.Modifier import androidx.compose.ui.text.input.TextFieldValue import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer +import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState import org.hisp.dhis.mobile.ui.designsystem.component.InputText -import org.hisp.dhis.mobile.ui.designsystem.component.SubTitle -import org.hisp.dhis.mobile.ui.designsystem.component.Title -import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing -import org.hisp.dhis.mobile.ui.designsystem.theme.TextColor @Composable fun InputTextScreen() { - ColumnComponentContainer { - Title("Input text component", textColor = TextColor.OnSurfaceVariant) - SubTitle(" Basic Input text", textColor = TextColor.OnSurfaceVariant) - var inputValue1 by rememberSaveable(stateSaver = TextFieldValue.Saver) { - mutableStateOf( - TextFieldValue("Input"), + ColumnScreenContainer(title = BasicTextInputs.INPUT_TEXT.label) { + ColumnComponentContainer(" Basic Input text") { + var inputValue1 by rememberSaveable(stateSaver = TextFieldValue.Saver) { + mutableStateOf( + TextFieldValue("Input"), + ) + } + val autoCompleteList = listOf("red", "yellow", "blue", "orange", "purple", "green") + InputText( + autoCompleteList = autoCompleteList, + title = "Label", + inputTextFieldValue = inputValue1, + onValueChanged = { + if (it != null) { + inputValue1 = it + } + }, + state = InputShellState.UNFOCUSED, ) } - val autoCompleteList = listOf("red", "yellow", "blue", "orange", "purple", "green") - InputText( - autoCompleteList = autoCompleteList, - title = "Label", - inputTextFieldValue = inputValue1, - onValueChanged = { - if (it != null) { - inputValue1 = it - } - }, - state = InputShellState.UNFOCUSED, - ) - Spacer(Modifier.size(Spacing.Spacing18)) - SubTitle("Input text with error ") - var inputValueError by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("Input")) } - - InputText( - title = "Label", - inputTextFieldValue = inputValueError, - onValueChanged = { - if (it != null) { - inputValueError = it - } - }, - state = InputShellState.ERROR, - ) - Spacer(Modifier.size(Spacing.Spacing18)) - - var inputValue6 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue()) } - - SubTitle("Disabled Input text ", textColor = TextColor.OnSurfaceVariant) - InputText( - title = "Label", - inputTextFieldValue = inputValue6, - state = InputShellState.DISABLED, - onValueChanged = { - if (it != null) { - inputValue6 = it - } - }, - ) - Spacer(Modifier.size(Spacing.Spacing18)) + ColumnComponentContainer("Input text with error ") { + var inputValueError by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("Input")) } + InputText( + title = "Label", + inputTextFieldValue = inputValueError, + onValueChanged = { + if (it != null) { + inputValueError = it + } + }, + state = InputShellState.ERROR, + ) + } - var inputValue7 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("Content")) } + ColumnComponentContainer("Disabled Input text ") { + var inputValue6 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue()) } + InputText( + title = "Label", + inputTextFieldValue = inputValue6, + state = InputShellState.DISABLED, + onValueChanged = { + if (it != null) { + inputValue6 = it + } + }, + ) + } - SubTitle("Disabled Input text with content ", textColor = TextColor.OnSurfaceVariant) - InputText( - title = "Label", - inputTextFieldValue = inputValue7, - state = InputShellState.DISABLED, - onValueChanged = { - if (it != null) { - inputValue7 = it - } - }, - ) + ColumnComponentContainer("Disabled Input text with content ") { + var inputValue7 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("Content")) } + InputText( + title = "Label", + inputTextFieldValue = inputValue7, + state = InputShellState.DISABLED, + onValueChanged = { + if (it != null) { + inputValue7 = it + } + }, + ) + } } } diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/InputUnitIntervalScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/InputUnitIntervalScreen.kt index 1665d50fe..961af03c2 100644 --- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/InputUnitIntervalScreen.kt +++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/InputUnitIntervalScreen.kt @@ -1,93 +1,82 @@ package org.hisp.dhis.common.screens.basicTextInputs -import androidx.compose.foundation.layout.Spacer -import androidx.compose.foundation.layout.size 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.Modifier import androidx.compose.ui.text.input.TextFieldValue import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer +import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState import org.hisp.dhis.mobile.ui.designsystem.component.InputUnitInterval -import org.hisp.dhis.mobile.ui.designsystem.component.SubTitle -import org.hisp.dhis.mobile.ui.designsystem.component.Title -import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing -import org.hisp.dhis.mobile.ui.designsystem.theme.TextColor @Composable fun InputUnitIntervalScreen() { - ColumnComponentContainer { - Title("Unit Interval", textColor = TextColor.OnSurfaceVariant) - SubTitle("Keyboard: Numbers. Range between 0 and 1", textColor = TextColor.OnSurfaceVariant) - SubTitle("Basic unit interval ", textColor = TextColor.OnSurfaceVariant) - var inputValue1 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("0.25")) } - - InputUnitInterval( - title = "Label", - inputTextFieldValue = inputValue1, - onValueChanged = { - if (it != null) { - inputValue1 = it - } - }, - state = InputShellState.UNFOCUSED, - ) - Spacer(Modifier.size(Spacing.Spacing18)) - - SubTitle("Basic unit interval required field", textColor = TextColor.OnSurfaceVariant) - var inputValueRequired by rememberSaveable(stateSaver = TextFieldValue.Saver) { - mutableStateOf( - TextFieldValue(), + ColumnScreenContainer(title = BasicTextInputs.INPUT_UNIT_INTERVAL.label) { + ColumnComponentContainer("Basic unit interval - Keyboard: Numbers. Range between 0 and 1 ") { + var inputValue1 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("0.25")) } + InputUnitInterval( + title = "Label", + inputTextFieldValue = inputValue1, + onValueChanged = { + if (it != null) { + inputValue1 = it + } + }, + state = InputShellState.UNFOCUSED, ) } - InputUnitInterval( - title = "Label", - inputTextFieldValue = inputValueRequired, - onValueChanged = { - if (it != null) { - inputValueRequired = it - } - }, - state = InputShellState.ERROR, - isRequiredField = true, - ) - Spacer(Modifier.size(Spacing.Spacing18)) - - var inputValue6 by rememberSaveable(stateSaver = TextFieldValue.Saver) { - mutableStateOf( - TextFieldValue(), + ColumnComponentContainer("Basic unit interval required field") { + var inputValueRequired by rememberSaveable(stateSaver = TextFieldValue.Saver) { + mutableStateOf( + TextFieldValue(), + ) + } + InputUnitInterval( + title = "Label", + inputTextFieldValue = inputValueRequired, + onValueChanged = { + if (it != null) { + inputValueRequired = it + } + }, + state = InputShellState.ERROR, + isRequiredField = true, ) } - SubTitle("Disabled unit interval ", textColor = TextColor.OnSurfaceVariant) - InputUnitInterval( - title = "Label", - inputTextFieldValue = inputValue6, - state = InputShellState.DISABLED, - onValueChanged = { - if (it != null) { - inputValue6 = it - } - }, - ) - Spacer(Modifier.size(Spacing.Spacing18)) - - var inputValue7 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("0.19")) } + ColumnComponentContainer("Disabled unit interval ") { + var inputValue6 by rememberSaveable(stateSaver = TextFieldValue.Saver) { + mutableStateOf( + TextFieldValue(), + ) + } + InputUnitInterval( + title = "Label", + inputTextFieldValue = inputValue6, + state = InputShellState.DISABLED, + onValueChanged = { + if (it != null) { + inputValue6 = it + } + }, + ) + } - SubTitle("Disabled unit interval with content ", textColor = TextColor.OnSurfaceVariant) - InputUnitInterval( - title = "Label", - inputTextFieldValue = inputValue7, - state = InputShellState.DISABLED, - onValueChanged = { - if (it != null) { - inputValue7 = it - } - }, - ) + ColumnComponentContainer("Disabled unit interval with content ") { + var inputValue7 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("0.19")) } + InputUnitInterval( + title = "Label", + inputTextFieldValue = inputValue7, + state = InputShellState.DISABLED, + onValueChanged = { + if (it != null) { + inputValue7 = it + } + }, + ) + } } } diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/SupportingTextScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/SupportingTextScreen.kt index d7204756f..661c1f946 100644 --- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/SupportingTextScreen.kt +++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/SupportingTextScreen.kt @@ -1,42 +1,32 @@ package org.hisp.dhis.common.screens.basicTextInputs -import androidx.compose.foundation.layout.Spacer -import androidx.compose.foundation.layout.size import androidx.compose.runtime.Composable -import androidx.compose.ui.Modifier import org.hisp.dhis.common.screens.previews.lorem import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer -import org.hisp.dhis.mobile.ui.designsystem.component.SubTitle +import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer import org.hisp.dhis.mobile.ui.designsystem.component.SupportingText import org.hisp.dhis.mobile.ui.designsystem.component.SupportingTextState -import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing @Composable fun SupportingTextScreen() { - ColumnComponentContainer(title = "Supporting Text") { - SubTitle("Standard Supporting Text") - SupportingText("Supporting text") - Spacer(Modifier.size(Spacing.Spacing18)) - SubTitle("Standard Warning Supporting Text") - SupportingText("Supporting Text", SupportingTextState.WARNING) - Spacer(Modifier.size(Spacing.Spacing18)) - SubTitle("Standard Error Supporting Text") - SupportingText("Supporting Text", SupportingTextState.ERROR) - Spacer(Modifier.size(Spacing.Spacing18)) - SubTitle("Overflow Default Supporting Text") - SupportingText( - lorem, - ) - SubTitle("Overflow Warning Supporting Text") - SupportingText( - lorem, - SupportingTextState.WARNING, - ) - Spacer(Modifier.size(Spacing.Spacing18)) - SubTitle("Overflow Error Supporting Text") - SupportingText( - lorem, - SupportingTextState.ERROR, - ) + ColumnScreenContainer(title = BasicTextInputs.SUPPORTING_TEXT.label) { + ColumnComponentContainer("Standard Supporting Text") { + SupportingText("Supporting Text") + } + ColumnComponentContainer("Standard Warning Supporting Text") { + SupportingText("Supporting Text", SupportingTextState.WARNING) + } + ColumnComponentContainer("Standard Error Supporting Text") { + SupportingText("Supporting Text", SupportingTextState.ERROR) + } + ColumnComponentContainer("Overflow Default Supporting Text") { + SupportingText(lorem) + } + ColumnComponentContainer("Overflow Warning Supporting Text") { + SupportingText(lorem, SupportingTextState.WARNING) + } + ColumnComponentContainer("Overflow Error Supporting Text") { + SupportingText(lorem, SupportingTextState.ERROR) + } } } diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/bottomSheets/BottomSheetHeaderScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/bottomSheets/BottomSheetHeaderScreen.kt index a9bfc649c..446f3d8e3 100644 --- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/bottomSheets/BottomSheetHeaderScreen.kt +++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/bottomSheets/BottomSheetHeaderScreen.kt @@ -2,8 +2,6 @@ package org.hisp.dhis.common.screens.bottomSheets import androidx.compose.foundation.border import androidx.compose.foundation.layout.Box -import androidx.compose.foundation.layout.Spacer -import androidx.compose.foundation.layout.size import androidx.compose.material.icons.Icons import androidx.compose.material.icons.automirrored.outlined.HelpOutline import androidx.compose.material.icons.outlined.BookmarkBorder @@ -13,92 +11,89 @@ import androidx.compose.ui.Modifier import androidx.compose.ui.text.style.TextAlign import org.hisp.dhis.mobile.ui.designsystem.component.BottomSheetHeader import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer -import org.hisp.dhis.mobile.ui.designsystem.component.SubTitle +import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing import org.hisp.dhis.mobile.ui.designsystem.theme.SurfaceColor import org.hisp.dhis.mobile.ui.designsystem.theme.TextColor @Composable fun BottomSheetHeaderScreen() { - ColumnComponentContainer(title = "Bottom Sheet Header") { - SubTitle("With Icon", TextColor.OnSurface) - Box(modifier = Modifier.border(Spacing.Spacing1, color = TextColor.OnDisabledSurface)) { - BottomSheetHeader( - title = "Title", - subTitle = "Subtitle", - description = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis, urna vitae lacinia feugiat", - icon = { - Icon( - imageVector = Icons.Outlined.BookmarkBorder, - contentDescription = "Button", - tint = SurfaceColor.Primary, - ) - }, - ) + ColumnScreenContainer(title = BottomSheets.BOTTOM_SHEET_HEADER.label) { + ColumnComponentContainer("With Icon") { + Box(modifier = Modifier.border(Spacing.Spacing1, color = TextColor.OnDisabledSurface)) { + BottomSheetHeader( + title = "Title", + subTitle = "Subtitle", + description = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis, urna vitae lacinia feugiat", + icon = { + Icon( + imageVector = Icons.Outlined.BookmarkBorder, + contentDescription = "Button", + tint = SurfaceColor.Primary, + ) + }, + ) + } } - Spacer(Modifier.size(Spacing.Spacing18)) - SubTitle("Without Icon", TextColor.OnSurface) - - Box(modifier = Modifier.border(Spacing.Spacing1, color = TextColor.OnDisabledSurface)) { - BottomSheetHeader( - title = "Title", - subTitle = "Subtitle", - description = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis, urna vitae lacinia feugiat", - ) + ColumnComponentContainer("Without Icon") { + Box(modifier = Modifier.border(Spacing.Spacing1, color = TextColor.OnDisabledSurface)) { + BottomSheetHeader( + title = "Title", + subTitle = "Subtitle", + description = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis, urna vitae lacinia feugiat", + ) + } } - Spacer(Modifier.size(Spacing.Spacing18)) - - SubTitle("Without Icon, without subtitle", TextColor.OnSurface) - Box(modifier = Modifier.border(Spacing.Spacing1, color = TextColor.OnDisabledSurface)) { - BottomSheetHeader( - title = "Title", - description = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis, urna vitae lacinia feugiat", - ) + ColumnComponentContainer("Without Icon, without subtitle") { + Box(modifier = Modifier.border(Spacing.Spacing1, color = TextColor.OnDisabledSurface)) { + BottomSheetHeader( + title = "Title", + description = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis, urna vitae lacinia feugiat", + ) + } } - Spacer(Modifier.size(Spacing.Spacing18)) - SubTitle("Without Icon, subtitle or description", TextColor.OnSurface) - - Box(modifier = Modifier.border(Spacing.Spacing1, color = TextColor.OnDisabledSurface)) { - BottomSheetHeader( - title = "Title", - ) + ColumnComponentContainer("Without Icon, subtitle or description") { + Box(modifier = Modifier.border(Spacing.Spacing1, color = TextColor.OnDisabledSurface)) { + BottomSheetHeader( + title = "Title", + ) + } } - Spacer(Modifier.size(Spacing.Spacing18)) - - SubTitle("With Icon, without subtitle or description", TextColor.OnSurface) - Box(modifier = Modifier.border(Spacing.Spacing1, color = TextColor.OnDisabledSurface)) { - BottomSheetHeader( - title = "Title", - icon = { - Icon( - imageVector = Icons.AutoMirrored.Outlined.HelpOutline, - contentDescription = "Button", - tint = SurfaceColor.Primary, - ) - }, - ) + ColumnComponentContainer("With Icon, without subtitle or description") { + Box(modifier = Modifier.border(Spacing.Spacing1, color = TextColor.OnDisabledSurface)) { + BottomSheetHeader( + title = "Title", + icon = { + Icon( + imageVector = Icons.AutoMirrored.Outlined.HelpOutline, + contentDescription = "Button", + tint = SurfaceColor.Primary, + ) + }, + ) + } } - SubTitle("Bottom sheet shell with header, content and buttons", TextColor.OnSurface) - Box(modifier = Modifier.border(Spacing.Spacing1, color = TextColor.OnDisabledSurface)) { - BottomSheetHeader( - title = "Title", - subTitle = "Lorem ipsum dolor sit amet, consectetur adipiscing elit", - description = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis, urna vitae lacinia feugiat", - headerTextAlignment = TextAlign.Start, - icon = { - Icon( - imageVector = Icons.AutoMirrored.Outlined.HelpOutline, - contentDescription = "Button", - tint = SurfaceColor.Primary, - ) - }, - ) + ColumnComponentContainer("Bottom sheet shell with header text aligned to start") { + Box(modifier = Modifier.border(Spacing.Spacing1, color = TextColor.OnDisabledSurface)) { + BottomSheetHeader( + title = "Title", + subTitle = "Lorem ipsum dolor sit amet, consectetur adipiscing elit", + description = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis, urna vitae lacinia feugiat", + headerTextAlignment = TextAlign.Start, + icon = { + Icon( + imageVector = Icons.AutoMirrored.Outlined.HelpOutline, + contentDescription = "Button", + tint = SurfaceColor.Primary, + ) + }, + ) + } } - SubTitle("Bottom sheet shell with header text aligned to start", TextColor.OnSurface) } } diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/bottomSheets/BottomSheetScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/bottomSheets/BottomSheetScreen.kt index a7168ca1c..e9c84e2fa 100644 --- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/bottomSheets/BottomSheetScreen.kt +++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/bottomSheets/BottomSheetScreen.kt @@ -6,7 +6,6 @@ import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.requiredWidth -import androidx.compose.foundation.layout.size import androidx.compose.foundation.lazy.LazyColumn import androidx.compose.foundation.lazy.items import androidx.compose.foundation.lazy.rememberLazyListState @@ -33,9 +32,8 @@ import org.hisp.dhis.mobile.ui.designsystem.component.ButtonBlock import org.hisp.dhis.mobile.ui.designsystem.component.ButtonStyle import org.hisp.dhis.mobile.ui.designsystem.component.ColorStyle import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer +import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer import org.hisp.dhis.mobile.ui.designsystem.component.LegendRange -import org.hisp.dhis.mobile.ui.designsystem.component.SubTitle -import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing import org.hisp.dhis.mobile.ui.designsystem.theme.SurfaceColor @Composable @@ -61,7 +59,7 @@ fun BottomSheetScreen() { ) }, content = { - Column() { + Column { LegendRange( regularLegendList, ) @@ -131,7 +129,7 @@ fun BottomSheetScreen() { ) }, content = { - Column() { + Column { LegendRange( longLegendList, ) @@ -176,7 +174,7 @@ fun BottomSheetScreen() { ) }, content = { - Column() { + Column { LegendRange( regularLegendList, ) @@ -237,7 +235,7 @@ fun BottomSheetScreen() { ) }, content = { - Column() { + Column { LegendRange( regularLegendList, ) @@ -300,7 +298,7 @@ fun BottomSheetScreen() { ) }, content = { - Column() { + Column { LegendRange( regularLegendList, ) @@ -330,7 +328,7 @@ fun BottomSheetScreen() { onSearchQueryChanged = { searchQuery = it }, onSearch = { searchQuery = it }, content = { - Column() { + Column { LegendRange( regularLegendList, ) @@ -383,84 +381,84 @@ fun BottomSheetScreen() { } } - ColumnComponentContainer { - SubTitle("Legend type bottom sheet shell") - Button( - enabled = true, - ButtonStyle.FILLED, - text = "Show Modal", - ) { - showLegendBottomSheetShell = !showLegendBottomSheetShell + ColumnScreenContainer(title = BottomSheets.BOTTOM_SHEET.label) { + ColumnComponentContainer("Legend type bottom sheet shell") { + Button( + enabled = true, + ButtonStyle.FILLED, + text = "Show Modal", + ) { + showLegendBottomSheetShell = !showLegendBottomSheetShell + } } - Spacer(modifier = Modifier.size(Spacing.Spacing10)) - SubTitle("Bottom sheet shell with scrollable content") - Button( - enabled = true, - ButtonStyle.FILLED, - text = "Show Modal", - ) { - showBottomSheetShellScrollableContent = !showBottomSheetShellScrollableContent + ColumnComponentContainer("Bottom sheet shell with scrollable content") { + Button( + enabled = true, + ButtonStyle.FILLED, + text = "Show Modal", + ) { + showBottomSheetShellScrollableContent = !showBottomSheetShellScrollableContent + } } - Spacer(modifier = Modifier.size(Spacing.Spacing10)) - SubTitle("Bottom sheet shell with with maximum expansion ") - Button( - enabled = true, - ButtonStyle.FILLED, - text = "Show Modal", - ) { - showBottomSheetShellMaxExpansion = !showBottomSheetShellScrollableContent + ColumnComponentContainer("Bottom sheet shell with with maximum expansion ") { + Button( + enabled = true, + ButtonStyle.FILLED, + text = "Show Modal", + ) { + showBottomSheetShellMaxExpansion = !showBottomSheetShellScrollableContent + } } - Spacer(modifier = Modifier.size(Spacing.Spacing10)) - SubTitle("Bottom sheet shell with single button") - Button( - enabled = true, - ButtonStyle.FILLED, - text = "Show Modal", - ) { - showBottomSheetShellSingleButton = !showBottomSheetShellSingleButton + ColumnComponentContainer("Bottom sheet shell with single button") { + Button( + enabled = true, + ButtonStyle.FILLED, + text = "Show Modal", + ) { + showBottomSheetShellSingleButton = !showBottomSheetShellSingleButton + } } - Spacer(modifier = Modifier.size(Spacing.Spacing10)) - SubTitle("Bottom sheet shell with two buttons") - Button( - enabled = true, - ButtonStyle.FILLED, - text = "Show Modal", - ) { - showBottomSheetShellTwoButtons = !showBottomSheetShellTwoButtons + ColumnComponentContainer("Bottom sheet shell with two buttons") { + Button( + enabled = true, + ButtonStyle.FILLED, + text = "Show Modal", + ) { + showBottomSheetShellTwoButtons = !showBottomSheetShellTwoButtons + } } - Spacer(modifier = Modifier.size(Spacing.Spacing10)) - SubTitle("Bottom sheet shell with search bar") - Button( - enabled = true, - ButtonStyle.FILLED, - text = "Show Modal", - ) { - showBottomSheetWithSearchBar = !showBottomSheetWithSearchBar + ColumnComponentContainer("Bottom sheet shell with search bar") { + Button( + enabled = true, + ButtonStyle.FILLED, + text = "Show Modal", + ) { + showBottomSheetWithSearchBar = !showBottomSheetWithSearchBar + } } - Spacer(modifier = Modifier.size(Spacing.Spacing10)) - SubTitle("Bottom sheet shell without title") - Button( - enabled = true, - ButtonStyle.FILLED, - text = "Show Modal", - ) { - showBottomSheetWithoutTitle = !showBottomSheetWithoutTitle + ColumnComponentContainer("Bottom sheet shell without title") { + Button( + enabled = true, + ButtonStyle.FILLED, + text = "Show Modal", + ) { + showBottomSheetWithoutTitle = !showBottomSheetWithoutTitle + } } - Spacer(modifier = Modifier.size(Spacing.Spacing10)) - SubTitle("Bottom sheet shell without content") - Button( - enabled = true, - ButtonStyle.FILLED, - text = "Show Modal", - ) { - showBottomSheetWithoutContent = !showBottomSheetWithoutContent + ColumnComponentContainer("Bottom sheet shell without content") { + Button( + enabled = true, + ButtonStyle.FILLED, + text = "Show Modal", + ) { + showBottomSheetWithoutContent = !showBottomSheetWithoutContent + } } - Spacer(modifier = Modifier.size(Spacing.Spacing10)) } } diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/bottomSheets/BottomSheetsScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/bottomSheets/BottomSheetsScreen.kt index 519f0740b..73b45487b 100644 --- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/bottomSheets/BottomSheetsScreen.kt +++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/bottomSheets/BottomSheetsScreen.kt @@ -4,27 +4,24 @@ import androidx.compose.runtime.Composable import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import org.hisp.dhis.common.screens.NoComponentSelectedScreen +import org.hisp.dhis.common.screens.components.GroupComponentDropDown import org.hisp.dhis.mobile.ui.designsystem.component.DropdownItem -import org.hisp.dhis.mobile.ui.designsystem.component.InputDropDown -import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState @Composable fun BottomSheetsScreen() { - val currentScreen = remember { mutableStateOf(BottomSheets.BOTTOM_SHEET) } + val currentScreen = remember { mutableStateOf(BottomSheets.NO_COMPONENT_SELECTED) } val screenDropdownItemList = mutableListOf() BottomSheets.entries.forEach { - if (it != BottomSheets.BOTTOM_SHEET) { + if (it != BottomSheets.NO_COMPONENT_SELECTED) { screenDropdownItemList.add(DropdownItem(it.label)) } } - InputDropDown( - "Display", + GroupComponentDropDown( dropdownItems = screenDropdownItemList.toList(), onItemSelected = { currentScreen.value = getCurrentScreen(it.label) }, onResetButtonClicked = { currentScreen.value = BottomSheets.NO_COMPONENT_SELECTED }, selectedItem = DropdownItem(currentScreen.value.label), - state = InputShellState.UNFOCUSED, ) when (currentScreen.value) { BottomSheets.BOTTOM_SHEET -> BottomSheetScreen() @@ -35,9 +32,9 @@ fun BottomSheetsScreen() { } enum class BottomSheets(val label: String) { - BOTTOM_SHEET("Bottom Sheet "), - BOTTOM_SHEET_HEADER("Bottom Sheet Header"), - ORG_TREE_BOTTOM_SHEET("Org Tree Bottom Sheet"), + BOTTOM_SHEET("Bottom Sheet component"), + BOTTOM_SHEET_HEADER("Bottom Sheet Header component"), + ORG_TREE_BOTTOM_SHEET("Org Tree Bottom Sheet component"), NO_COMPONENT_SELECTED("No component selected"), } diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/bottomSheets/OrgTreeBottomSheetScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/bottomSheets/OrgTreeBottomSheetScreen.kt index 5c01bdd77..627d056a6 100644 --- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/bottomSheets/OrgTreeBottomSheetScreen.kt +++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/bottomSheets/OrgTreeBottomSheetScreen.kt @@ -1,7 +1,5 @@ package org.hisp.dhis.common.screens.bottomSheets -import androidx.compose.foundation.layout.Spacer -import androidx.compose.foundation.layout.size import androidx.compose.runtime.Composable import androidx.compose.runtime.collectAsState import androidx.compose.runtime.getValue @@ -9,7 +7,6 @@ import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.runtime.saveable.rememberSaveable import androidx.compose.runtime.setValue -import androidx.compose.ui.Modifier import kotlinx.coroutines.CoroutineScope import kotlinx.coroutines.Dispatchers import kotlinx.coroutines.flow.MutableStateFlow @@ -23,10 +20,9 @@ import org.hisp.dhis.common.screens.previews.lorem_short import org.hisp.dhis.mobile.ui.designsystem.component.Button import org.hisp.dhis.mobile.ui.designsystem.component.ButtonStyle import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer +import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer import org.hisp.dhis.mobile.ui.designsystem.component.OrgBottomSheet import org.hisp.dhis.mobile.ui.designsystem.component.OrgTreeItem -import org.hisp.dhis.mobile.ui.designsystem.component.SubTitle -import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing @Composable fun OrgTreeBottomSheetScreen() { @@ -119,50 +115,50 @@ fun OrgTreeBottomSheetScreen() { ) } - ColumnComponentContainer { - SubTitle("Org Tree Bottom Sheet") - Button( - enabled = true, - ButtonStyle.FILLED, - text = "Show One Org Tree Bottom Sheet", - ) { - showOneOrgTreeBottomSheet = !showOneOrgTreeBottomSheet + ColumnScreenContainer(title = BottomSheets.ORG_TREE_BOTTOM_SHEET.label) { + ColumnComponentContainer("Org Tree Bottom Sheet with single item") { + Button( + enabled = true, + ButtonStyle.FILLED, + text = "Show One Org Tree Bottom Sheet", + ) { + showOneOrgTreeBottomSheet = !showOneOrgTreeBottomSheet + } } - Spacer(modifier = Modifier.size(Spacing.Spacing10)) - - SubTitle("Org Tree Bottom Sheet") - Button( - enabled = true, - ButtonStyle.FILLED, - text = "Show Two Org Tree Bottom Sheet", - ) { - showTwoOrgTreeBottomSheet = !showTwoOrgTreeBottomSheet + + ColumnComponentContainer("Org Tree Bottom Sheet with multiple items") { + Button( + enabled = true, + ButtonStyle.FILLED, + text = "Show Two Org Tree Bottom Sheet", + ) { + showTwoOrgTreeBottomSheet = !showTwoOrgTreeBottomSheet + } } - Spacer(modifier = Modifier.size(Spacing.Spacing10)) - - SubTitle("Org Tree Bottom Sheet") - Button( - enabled = true, - ButtonStyle.FILLED, - text = "Show Org Tree Bottom Sheet", - ) { - showMediumOrgTreeBottomSheet = !showMediumOrgTreeBottomSheet + + ColumnComponentContainer("Org Tree Bottom Sheet with medium items") { + Button( + enabled = true, + ButtonStyle.FILLED, + text = "Show Org Tree Bottom Sheet", + ) { + showMediumOrgTreeBottomSheet = !showMediumOrgTreeBottomSheet + } } - Spacer(modifier = Modifier.size(Spacing.Spacing10)) - - SubTitle("Org Tree Bottom Sheet") - Button( - enabled = true, - ButtonStyle.FILLED, - text = "Show Large Org Tree Bottom Sheet", - ) { - showLargeOrgTreeBottomSheet = !showLargeOrgTreeBottomSheet + + ColumnComponentContainer("Org Tree Bottom Sheet with large items") { + Button( + enabled = true, + ButtonStyle.FILLED, + text = "Show Large Org Tree Bottom Sheet", + ) { + showLargeOrgTreeBottomSheet = !showLargeOrgTreeBottomSheet + } } } } private class OrgTreeItemsFakeRepo { - private val originalOrgTreeItems = listOf( OrgTreeItem( uid = "12", diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/buttons/ButtonBlockScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/buttons/ButtonBlockScreen.kt index 44cafb0f6..a47251542 100644 --- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/buttons/ButtonBlockScreen.kt +++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/buttons/ButtonBlockScreen.kt @@ -1,8 +1,6 @@ package org.hisp.dhis.common.screens.buttons -import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxWidth -import androidx.compose.foundation.layout.size import androidx.compose.material.icons.Icons import androidx.compose.material.icons.filled.Add import androidx.compose.material3.Icon @@ -12,89 +10,93 @@ import org.hisp.dhis.mobile.ui.designsystem.component.Button import org.hisp.dhis.mobile.ui.designsystem.component.ButtonBlock import org.hisp.dhis.mobile.ui.designsystem.component.ButtonStyle import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer -import org.hisp.dhis.mobile.ui.designsystem.component.SubTitle +import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer import org.hisp.dhis.mobile.ui.designsystem.component.TextButtonSelector import org.hisp.dhis.mobile.ui.designsystem.component.Title import org.hisp.dhis.mobile.ui.designsystem.resource.provideStringResource -import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing @Composable fun ButtonBlockScreen() { - ColumnComponentContainer { - Title("Button block") - SubTitle("One button style") - ButtonBlock( - primaryButton = { - Button( - style = ButtonStyle.KEYBOARDKEY, - icon = { - Icon( - imageVector = Icons.Filled.Add, - contentDescription = "Button", - ) - }, - enabled = true, - text = "Label", - onClick = { - }, - modifier = Modifier.fillMaxWidth(), - ) - }, - ) - Spacer(Modifier.size(Spacing.Spacing18)) + ColumnScreenContainer(title = ButtonScreens.BUTTON_BLOCK.label) { + ColumnComponentContainer("One button style") { + ButtonBlock( + primaryButton = { + Button( + style = ButtonStyle.KEYBOARDKEY, + icon = { + Icon( + imageVector = Icons.Filled.Add, + contentDescription = "Button", + ) + }, + enabled = true, + text = "Label", + onClick = { + }, + modifier = Modifier.fillMaxWidth(), + ) + }, + ) + } + + ColumnComponentContainer("Two button style") { + ButtonBlock( + primaryButton = { + Button( + style = ButtonStyle.KEYBOARDKEY, + icon = { + Icon( + imageVector = Icons.Filled.Add, + contentDescription = "Button", + ) + }, + enabled = true, + text = "Label", + onClick = { + }, + modifier = Modifier.fillMaxWidth(), + ) + }, + secondaryButton = { + Button( + style = ButtonStyle.KEYBOARDKEY, + icon = { + Icon( + imageVector = Icons.Filled.Add, + contentDescription = "Button", + ) + }, + enabled = true, + text = "Label", + onClick = { + }, + modifier = Modifier.fillMaxWidth(), + ) + }, + ) + } - SubTitle("Two button style") - ButtonBlock( - primaryButton = { - Button( - style = ButtonStyle.KEYBOARDKEY, - icon = { - Icon( - imageVector = Icons.Filled.Add, - contentDescription = "Button", - ) - }, - enabled = true, - text = "Label", - onClick = { - }, - modifier = Modifier.fillMaxWidth(), - ) - }, - secondaryButton = { - Button( - style = ButtonStyle.KEYBOARDKEY, - icon = { - Icon( - imageVector = Icons.Filled.Add, - contentDescription = "Button", - ) - }, - enabled = true, - text = "Label", - onClick = { - }, - modifier = Modifier.fillMaxWidth(), - ) - }, - ) Title("Text Button Selectors") - SubTitle("Enabled") - TextButtonSelector( - firstOptionText = provideStringResource("date_birth"), - onClickFirstOption = {}, - middleText = provideStringResource("or"), - secondOptionText = provideStringResource("age"), - onClickSecondOption = {}, - ) - SubTitle("Disabled") - TextButtonSelector( - enabled = false, - firstOptionText = provideStringResource("date_birth"), - onClickFirstOption = {}, - middleText = provideStringResource("or"), - secondOptionText = provideStringResource("age"), - onClickSecondOption = {}, - ) + + ColumnComponentContainer("Enabled") { + TextButtonSelector( + firstOptionText = provideStringResource("date_birth"), + onClickFirstOption = {}, + middleText = provideStringResource("or"), + secondOptionText = provideStringResource("age"), + onClickSecondOption = {}, + ) + } + + ColumnComponentContainer("Disabled") { + TextButtonSelector( + enabled = false, + firstOptionText = provideStringResource("date_birth"), + onClickFirstOption = {}, + middleText = provideStringResource("or"), + secondOptionText = provideStringResource("age"), + onClickSecondOption = {}, + ) + } } } diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/buttons/ButtonCarouselScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/buttons/ButtonCarouselScreen.kt index f1c255641..9ed4c90d1 100644 --- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/buttons/ButtonCarouselScreen.kt +++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/buttons/ButtonCarouselScreen.kt @@ -1,29 +1,21 @@ package org.hisp.dhis.common.screens.buttons -import androidx.compose.foundation.layout.Column -import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.material.icons.Icons import androidx.compose.material.icons.outlined.FileDownload import androidx.compose.material3.Icon import androidx.compose.runtime.Composable -import androidx.compose.ui.Modifier import org.hisp.dhis.common.screens.previews.fiveButtonCarousel import org.hisp.dhis.common.screens.previews.overflowButtonCarousel import org.hisp.dhis.common.screens.previews.threeButtonCarousel import org.hisp.dhis.mobile.ui.designsystem.component.ButtonCarousel import org.hisp.dhis.mobile.ui.designsystem.component.CarouselButtonData import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer -import org.hisp.dhis.mobile.ui.designsystem.component.RowComponentContainer -import org.hisp.dhis.mobile.ui.designsystem.component.SubTitle -import org.hisp.dhis.mobile.ui.designsystem.component.Title +import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer @Composable fun ButtonCarouselScreen() { - ColumnComponentContainer { - Title("Carousel Buttons") - RowComponentContainer( - title = "Simple Carousel Button", - ) { + ColumnScreenContainer(title = ButtonScreens.CAROUSEL_BUTTONS.label) { + ColumnComponentContainer("Simple Carousel Button") { ButtonCarousel( carouselButtonList = listOf( CarouselButtonData( @@ -40,25 +32,21 @@ fun ButtonCarouselScreen() { ), ) } - RowComponentContainer( - title = "Buttons Carousel", - ) { - Column( - Modifier.fillMaxWidth(), - ) { - ButtonCarousel( - carouselButtonList = threeButtonCarousel, - ) - ButtonCarousel( - carouselButtonList = fiveButtonCarousel, - ) + ColumnComponentContainer("Buttons Carousel") { + ButtonCarousel( + carouselButtonList = threeButtonCarousel, + ) + + ButtonCarousel( + carouselButtonList = fiveButtonCarousel, + ) + } - SubTitle("Overflow case") - ButtonCarousel( - carouselButtonList = overflowButtonCarousel, - ) - } + ColumnComponentContainer("Overflow case") { + ButtonCarousel( + carouselButtonList = overflowButtonCarousel, + ) } } } diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/buttons/ButtonScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/buttons/ButtonScreen.kt index 0ed5a2ab1..f1f56291b 100644 --- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/buttons/ButtonScreen.kt +++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/buttons/ButtonScreen.kt @@ -1,153 +1,150 @@ package org.hisp.dhis.common.screens.buttons -import androidx.compose.foundation.layout.Spacer -import androidx.compose.foundation.layout.size import androidx.compose.runtime.Composable -import androidx.compose.ui.Modifier import org.hisp.dhis.common.screens.previews.ButtonPreview import org.hisp.dhis.common.screens.previews.ButtonPreviewWithIcon import org.hisp.dhis.mobile.ui.designsystem.component.ButtonStyle import org.hisp.dhis.mobile.ui.designsystem.component.ColorStyle import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer +import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer import org.hisp.dhis.mobile.ui.designsystem.component.RowComponentContainer -import org.hisp.dhis.mobile.ui.designsystem.component.SubTitle import org.hisp.dhis.mobile.ui.designsystem.component.Title -import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing @Composable fun ButtonScreen() { - ColumnComponentContainer() { - Title("Buttons") - SubTitle("Filled") - RowComponentContainer() { - ButtonPreview("Label", ButtonStyle.FILLED) - ButtonPreview("Label", ButtonStyle.FILLED, false) - } - RowComponentContainer { - ButtonPreviewWithIcon("Label", ButtonStyle.FILLED) - ButtonPreviewWithIcon("Label", ButtonStyle.FILLED, false) + ColumnScreenContainer(title = ButtonScreens.BUTTON.label) { + ColumnComponentContainer("Filled") { + RowComponentContainer { + ButtonPreview("Label", ButtonStyle.FILLED) + ButtonPreview("Label", ButtonStyle.FILLED, false) + } + RowComponentContainer { + ButtonPreviewWithIcon("Label", ButtonStyle.FILLED) + ButtonPreviewWithIcon("Label", ButtonStyle.FILLED, false) + } } - Spacer(Modifier.size(Spacing.Spacing18)) - SubTitle("Outlined") - RowComponentContainer() { - ButtonPreview("Label") - ButtonPreview("Label", ButtonStyle.OUTLINED, false) - } - RowComponentContainer() { - ButtonPreviewWithIcon("Label") - ButtonPreviewWithIcon("Label", ButtonStyle.OUTLINED, false) + ColumnComponentContainer("Outlined") { + RowComponentContainer { + ButtonPreview("Label") + ButtonPreview("Label", ButtonStyle.OUTLINED, false) + } + RowComponentContainer { + ButtonPreviewWithIcon("Label") + ButtonPreviewWithIcon("Label", ButtonStyle.OUTLINED, false) + } } - Spacer(Modifier.size(Spacing.Spacing18)) - SubTitle("Text") - RowComponentContainer() { - ButtonPreview("Label", ButtonStyle.TEXT) - ButtonPreview("Label", ButtonStyle.TEXT, false) - } - RowComponentContainer() { - ButtonPreviewWithIcon("Label", ButtonStyle.TEXT) - ButtonPreviewWithIcon("Label", ButtonStyle.TEXT, false) + ColumnComponentContainer("Text") { + RowComponentContainer { + ButtonPreview("Label", ButtonStyle.TEXT) + ButtonPreview("Label", ButtonStyle.TEXT, false) + } + RowComponentContainer { + ButtonPreviewWithIcon("Label", ButtonStyle.TEXT) + ButtonPreviewWithIcon("Label", ButtonStyle.TEXT, false) + } } - Spacer(Modifier.size(Spacing.Spacing18)) - SubTitle("Elevated") - RowComponentContainer() { - ButtonPreview("Label", ButtonStyle.ELEVATED) - ButtonPreview("Label", ButtonStyle.ELEVATED, false) + ColumnComponentContainer("Elevated") { + RowComponentContainer { + ButtonPreview("Label", ButtonStyle.ELEVATED) + ButtonPreview("Label", ButtonStyle.ELEVATED, false) + } + RowComponentContainer { + ButtonPreviewWithIcon("Label", ButtonStyle.ELEVATED) + ButtonPreviewWithIcon("Label", ButtonStyle.ELEVATED, false) + } } - RowComponentContainer() { - ButtonPreviewWithIcon("Label", ButtonStyle.ELEVATED) - ButtonPreviewWithIcon("Label", ButtonStyle.ELEVATED, false) - } - Spacer(Modifier.size(Spacing.Spacing18)) - SubTitle("Tonal") - RowComponentContainer() { - ButtonPreview("Label", ButtonStyle.TONAL) - ButtonPreview("Label", ButtonStyle.TONAL, false) - } - RowComponentContainer() { - ButtonPreviewWithIcon("Label", ButtonStyle.TONAL) - ButtonPreviewWithIcon("Label", ButtonStyle.TONAL, false) + ColumnComponentContainer("Tonal") { + RowComponentContainer { + ButtonPreview("Label", ButtonStyle.TONAL) + ButtonPreview("Label", ButtonStyle.TONAL, false) + } + RowComponentContainer { + ButtonPreviewWithIcon("Label", ButtonStyle.TONAL) + ButtonPreviewWithIcon("Label", ButtonStyle.TONAL, false) + } } - Spacer(Modifier.size(Spacing.Spacing18)) - SubTitle("Keyboard") - RowComponentContainer() { - ButtonPreview("Label", ButtonStyle.KEYBOARDKEY) - ButtonPreview("Label", ButtonStyle.KEYBOARDKEY, false) - } - RowComponentContainer() { - ButtonPreviewWithIcon("Label", ButtonStyle.KEYBOARDKEY) - ButtonPreviewWithIcon("Label", ButtonStyle.KEYBOARDKEY, false) + ColumnComponentContainer("Keyboard") { + RowComponentContainer { + ButtonPreview("Label", ButtonStyle.KEYBOARDKEY) + ButtonPreview("Label", ButtonStyle.KEYBOARDKEY, false) + } + RowComponentContainer { + ButtonPreviewWithIcon("Label", ButtonStyle.KEYBOARDKEY) + ButtonPreviewWithIcon("Label", ButtonStyle.KEYBOARDKEY, false) + } } Title("Error Buttons") - SubTitle("Filled") - RowComponentContainer() { - ButtonPreview("Label", ButtonStyle.FILLED, true, ColorStyle.ERROR) - ButtonPreview("Label", ButtonStyle.FILLED, false, ColorStyle.ERROR) - } - RowComponentContainer { - ButtonPreviewWithIcon("Label", ButtonStyle.FILLED, true, ColorStyle.ERROR) - ButtonPreviewWithIcon("Label", ButtonStyle.FILLED, false, ColorStyle.ERROR) + ColumnComponentContainer("Filled") { + RowComponentContainer { + ButtonPreview("Label", ButtonStyle.FILLED, true, ColorStyle.ERROR) + ButtonPreview("Label", ButtonStyle.FILLED, false, ColorStyle.ERROR) + } + RowComponentContainer { + ButtonPreviewWithIcon("Label", ButtonStyle.FILLED, true, ColorStyle.ERROR) + ButtonPreviewWithIcon("Label", ButtonStyle.FILLED, false, ColorStyle.ERROR) + } } - Spacer(Modifier.size(Spacing.Spacing18)) - SubTitle("Outlined") - RowComponentContainer() { - ButtonPreview("Label", ButtonStyle.OUTLINED, true, ColorStyle.ERROR) - ButtonPreview("Label", ButtonStyle.OUTLINED, false, ColorStyle.ERROR) - } - RowComponentContainer() { - ButtonPreviewWithIcon("Label", ButtonStyle.OUTLINED, true, ColorStyle.ERROR) - ButtonPreviewWithIcon("Label", ButtonStyle.OUTLINED, false, ColorStyle.ERROR) + ColumnComponentContainer("Outlined") { + RowComponentContainer { + ButtonPreview("Label", ButtonStyle.OUTLINED, true, ColorStyle.ERROR) + ButtonPreview("Label", ButtonStyle.OUTLINED, false, ColorStyle.ERROR) + } + RowComponentContainer { + ButtonPreviewWithIcon("Label", ButtonStyle.OUTLINED, true, ColorStyle.ERROR) + ButtonPreviewWithIcon("Label", ButtonStyle.OUTLINED, false, ColorStyle.ERROR) + } } - Spacer(Modifier.size(Spacing.Spacing18)) - SubTitle("Text") - RowComponentContainer() { - ButtonPreview("Label", ButtonStyle.TEXT, true, ColorStyle.ERROR) - ButtonPreview("Label", ButtonStyle.TEXT, false, ColorStyle.ERROR) - } - RowComponentContainer() { - ButtonPreviewWithIcon("Label", ButtonStyle.TEXT, true, ColorStyle.ERROR) - ButtonPreviewWithIcon("Label", ButtonStyle.TEXT, false, ColorStyle.ERROR) + ColumnComponentContainer("Text") { + RowComponentContainer { + ButtonPreview("Label", ButtonStyle.TEXT, true, ColorStyle.ERROR) + ButtonPreview("Label", ButtonStyle.TEXT, false, ColorStyle.ERROR) + } + RowComponentContainer { + ButtonPreviewWithIcon("Label", ButtonStyle.TEXT, true, ColorStyle.ERROR) + ButtonPreviewWithIcon("Label", ButtonStyle.TEXT, false, ColorStyle.ERROR) + } } - Spacer(Modifier.size(Spacing.Spacing18)) Title("Warning Buttons") - SubTitle("Filled") - RowComponentContainer() { - ButtonPreview("Label", ButtonStyle.FILLED, true, ColorStyle.WARNING) - ButtonPreview("Label", ButtonStyle.FILLED, false, ColorStyle.WARNING) - } - RowComponentContainer { - ButtonPreviewWithIcon("Label", ButtonStyle.FILLED, true, ColorStyle.WARNING) - ButtonPreviewWithIcon("Label", ButtonStyle.FILLED, false, ColorStyle.WARNING) + ColumnComponentContainer("Filled") { + RowComponentContainer { + ButtonPreview("Label", ButtonStyle.FILLED, true, ColorStyle.WARNING) + ButtonPreview("Label", ButtonStyle.FILLED, false, ColorStyle.WARNING) + } + RowComponentContainer { + ButtonPreviewWithIcon("Label", ButtonStyle.FILLED, true, ColorStyle.WARNING) + ButtonPreviewWithIcon("Label", ButtonStyle.FILLED, false, ColorStyle.WARNING) + } } - Spacer(Modifier.size(Spacing.Spacing18)) - SubTitle("Outlined") - RowComponentContainer() { - ButtonPreview("Label", ButtonStyle.OUTLINED, true, ColorStyle.WARNING) - ButtonPreview("Label", ButtonStyle.OUTLINED, false, ColorStyle.WARNING) - } - RowComponentContainer() { - ButtonPreviewWithIcon("Label", ButtonStyle.OUTLINED, true, ColorStyle.WARNING) - ButtonPreviewWithIcon("Label", ButtonStyle.OUTLINED, false, ColorStyle.WARNING) + ColumnComponentContainer("Outlined") { + RowComponentContainer { + ButtonPreview("Label", ButtonStyle.OUTLINED, true, ColorStyle.WARNING) + ButtonPreview("Label", ButtonStyle.OUTLINED, false, ColorStyle.WARNING) + } + RowComponentContainer { + ButtonPreviewWithIcon("Label", ButtonStyle.OUTLINED, true, ColorStyle.WARNING) + ButtonPreviewWithIcon("Label", ButtonStyle.OUTLINED, false, ColorStyle.WARNING) + } } - Spacer(Modifier.size(Spacing.Spacing18)) - SubTitle("Text") - RowComponentContainer() { - ButtonPreview("Label", ButtonStyle.TEXT, true, ColorStyle.WARNING) - ButtonPreview("Label", ButtonStyle.TEXT, false, ColorStyle.WARNING) - } - RowComponentContainer() { - ButtonPreviewWithIcon("Label", ButtonStyle.TEXT, true, ColorStyle.WARNING) - ButtonPreviewWithIcon("Label", ButtonStyle.TEXT, false, ColorStyle.WARNING) + ColumnComponentContainer("Text") { + RowComponentContainer { + ButtonPreview("Label", ButtonStyle.TEXT, true, ColorStyle.WARNING) + ButtonPreview("Label", ButtonStyle.TEXT, false, ColorStyle.WARNING) + } + RowComponentContainer { + ButtonPreviewWithIcon("Label", ButtonStyle.TEXT, true, ColorStyle.WARNING) + ButtonPreviewWithIcon("Label", ButtonStyle.TEXT, false, ColorStyle.WARNING) + } } } } diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/buttons/ButtonsScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/buttons/ButtonsScreen.kt index e14067b99..3039a8d48 100644 --- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/buttons/ButtonsScreen.kt +++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/buttons/ButtonsScreen.kt @@ -4,13 +4,12 @@ import androidx.compose.runtime.Composable import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import org.hisp.dhis.common.screens.NoComponentSelectedScreen +import org.hisp.dhis.common.screens.components.GroupComponentDropDown import org.hisp.dhis.mobile.ui.designsystem.component.DropdownItem -import org.hisp.dhis.mobile.ui.designsystem.component.InputDropDown -import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState @Composable fun ButtonsScreen() { - val currentScreen = remember { mutableStateOf(ButtonScreens.BUTTON) } + val currentScreen = remember { mutableStateOf(ButtonScreens.NO_COMPONENT_SELECTED) } val screenDropdownItemList = mutableListOf() ButtonScreens.entries.forEach { @@ -18,13 +17,11 @@ fun ButtonsScreen() { screenDropdownItemList.add(DropdownItem(it.label)) } } - InputDropDown( - "Display", + GroupComponentDropDown( dropdownItems = screenDropdownItemList.toList(), onItemSelected = { currentScreen.value = getCurrentScreen(it.label) }, onResetButtonClicked = { currentScreen.value = ButtonScreens.NO_COMPONENT_SELECTED }, selectedItem = DropdownItem(currentScreen.value.label), - state = InputShellState.UNFOCUSED, ) when (currentScreen.value) { ButtonScreens.BUTTON -> ButtonScreen() @@ -40,14 +37,14 @@ fun ButtonsScreen() { } enum class ButtonScreens(val label: String) { - BUTTON("Button"), - BUTTON_BLOCK("Button block"), - CAROUSEL_BUTTONS("Carousel buttons"), - CHECK_BOX("Check Box"), - FAB("FAB"), - ICON_BUTTON("Icon Button"), - RADIO("Radio"), - SWITCH("Switch"), + BUTTON("Button component"), + BUTTON_BLOCK("Button block component"), + CAROUSEL_BUTTONS("Carousel button component"), + CHECK_BOX("Check Box component"), + FAB("FAB component"), + ICON_BUTTON("Icon Button component"), + RADIO("Radio component"), + SWITCH("Switch component"), NO_COMPONENT_SELECTED("No component selected"), } diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/buttons/CheckboxScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/buttons/CheckboxScreen.kt index c6f3c7636..0b3983190 100644 --- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/buttons/CheckboxScreen.kt +++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/buttons/CheckboxScreen.kt @@ -1,23 +1,19 @@ package org.hisp.dhis.common.screens.buttons import androidx.compose.foundation.layout.Row -import androidx.compose.foundation.layout.Spacer -import androidx.compose.foundation.layout.size import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue import androidx.compose.runtime.mutableStateListOf import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.runtime.setValue -import androidx.compose.ui.Modifier import org.hisp.dhis.common.screens.previews.CheckboxPreview import org.hisp.dhis.common.screens.previews.TextCheckboxPreview import org.hisp.dhis.mobile.ui.designsystem.component.CheckBoxBlock import org.hisp.dhis.mobile.ui.designsystem.component.CheckBoxData import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer +import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer import org.hisp.dhis.mobile.ui.designsystem.component.Orientation -import org.hisp.dhis.mobile.ui.designsystem.component.SubTitle -import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing @Composable fun CheckboxScreen() { @@ -54,57 +50,50 @@ fun CheckboxScreen() { ) } - ColumnComponentContainer( - title = "CheckBox", + ColumnScreenContainer( + title = ButtonScreens.CHECK_BOX.label, content = { - SubTitle( - text = "Text Check Box", - ) - TextCheckboxPreview(state1, true, option1) { - state1 = it + ColumnComponentContainer("Text Check Box") { + TextCheckboxPreview(state1, true, option1) { + state1 = it + } + TextCheckboxPreview(state2, true, option2) { state2 = it } + TextCheckboxPreview(state3, false, option3) { state3 = it } + TextCheckboxPreview(state4, enabled = false, text = option4) { state4 = it } } - TextCheckboxPreview(state2, true, option2) { state2 = it } - TextCheckboxPreview(state3, false, option3) { state3 = it } - TextCheckboxPreview(state4, enabled = false, text = option4) { state4 = it } - Spacer(Modifier.size(Spacing.Spacing18)) - SubTitle( - text = "Simple Check Box", - ) - Row { - CheckboxPreview(state5, enabled = true) { state5 = it } - CheckboxPreview(state6, enabled = false) { state6 = it } + ColumnComponentContainer("Simple Check Box") { + Row { + CheckboxPreview(state5, enabled = true) { state5 = it } + CheckboxPreview(state6, enabled = false) { state6 = it } + } + Row { + CheckboxPreview(state7, enabled = true) { state7 = it } + CheckboxPreview(state8, enabled = false) { state8 = it } + } } - Row { - CheckboxPreview(state7, enabled = true) { state7 = it } - CheckboxPreview(state8, enabled = false) { state8 = it } - } - Spacer(Modifier.size(Spacing.Spacing18)) - SubTitle( - text = "Horizontal Check Box Block", - ) - CheckBoxBlock( - Orientation.HORIZONTAL, - checkBoxesStatesHorizontal, - onItemChange = { checkBoxData -> - val index = checkBoxesStatesHorizontal.withIndex().first { it.value.uid == checkBoxData.uid }.index - checkBoxesStatesHorizontal[index] = checkBoxData.copy(checked = !checkBoxData.checked) - }, - ) - Spacer(Modifier.size(Spacing.Spacing18)) + ColumnComponentContainer("Horizontal Check Box Block") { + CheckBoxBlock( + Orientation.HORIZONTAL, + checkBoxesStatesHorizontal, + onItemChange = { checkBoxData -> + val index = checkBoxesStatesHorizontal.withIndex().first { it.value.uid == checkBoxData.uid }.index + checkBoxesStatesHorizontal[index] = checkBoxData.copy(checked = !checkBoxData.checked) + }, + ) + } - SubTitle( - text = "Vertical Check Box Block", - ) - CheckBoxBlock( - Orientation.VERTICAL, - checkBoxesStatesVertical, - onItemChange = { checkBoxData -> - val index = checkBoxesStatesVertical.withIndex().first { it.value.uid == checkBoxData.uid }.index - checkBoxesStatesVertical[index] = checkBoxData.copy(checked = !checkBoxData.checked) - }, - ) + ColumnComponentContainer("Vertical Check Box Block") { + CheckBoxBlock( + Orientation.VERTICAL, + checkBoxesStatesVertical, + onItemChange = { checkBoxData -> + val index = checkBoxesStatesVertical.withIndex().first { it.value.uid == checkBoxData.uid }.index + checkBoxesStatesVertical[index] = checkBoxData.copy(checked = !checkBoxData.checked) + }, + ) + } }, ) } diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/buttons/FABScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/buttons/FABScreen.kt index 201257ee0..56a7d4713 100644 --- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/buttons/FABScreen.kt +++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/buttons/FABScreen.kt @@ -1,94 +1,89 @@ package org.hisp.dhis.common.screens.buttons -import androidx.compose.foundation.layout.Spacer -import androidx.compose.foundation.layout.size import androidx.compose.material.icons.Icons import androidx.compose.material.icons.outlined.FileDownload import androidx.compose.material3.Icon import androidx.compose.runtime.Composable -import androidx.compose.ui.Modifier import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer +import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer import org.hisp.dhis.mobile.ui.designsystem.component.ExtendedFAB import org.hisp.dhis.mobile.ui.designsystem.component.FAB import org.hisp.dhis.mobile.ui.designsystem.component.FABStyle -import org.hisp.dhis.mobile.ui.designsystem.component.SubTitle -import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing @Composable fun FABScreen() { - ColumnComponentContainer( - title = "FABs", + ColumnScreenContainer( + title = ButtonScreens.FAB.label, ) { - FAB( - style = FABStyle.SURFACE, - onClick = {}, - icon = { - Icon( - imageVector = Icons.Outlined.FileDownload, - contentDescription = "File download Button", - ) - }, - ) + ColumnComponentContainer("Default FABs") { + FAB( + style = FABStyle.SURFACE, + onClick = {}, + icon = { + Icon( + imageVector = Icons.Outlined.FileDownload, + contentDescription = "File download Button", + ) + }, + ) - FAB( - onClick = {}, - icon = { - Icon( - imageVector = Icons.Outlined.FileDownload, - contentDescription = "File download Button", - ) - }, - ) + FAB( + onClick = {}, + icon = { + Icon( + imageVector = Icons.Outlined.FileDownload, + contentDescription = "File download Button", + ) + }, + ) - FAB( - style = FABStyle.SECONDARY, - onClick = {}, - icon = { - Icon( - imageVector = Icons.Outlined.FileDownload, - contentDescription = "File download Button", - ) - }, - ) + FAB( + style = FABStyle.SECONDARY, + onClick = {}, + icon = { + Icon( + imageVector = Icons.Outlined.FileDownload, + contentDescription = "File download Button", + ) + }, + ) + } - Spacer(Modifier.size(Spacing.Spacing18)) - SubTitle(text = "Extended FABs buttons") + ColumnComponentContainer("Extended FABs buttons") { + ExtendedFAB( + style = FABStyle.SURFACE, + text = "Label", + onClick = {}, + icon = { + Icon( + imageVector = Icons.Outlined.FileDownload, + contentDescription = "File download Button", + ) + }, + ) - ExtendedFAB( - style = FABStyle.SURFACE, - text = "Label", - onClick = {}, - icon = { - Icon( - imageVector = Icons.Outlined.FileDownload, - contentDescription = "File download Button", - ) - }, - ) + ExtendedFAB( + text = "Label", + onClick = {}, + icon = { + Icon( + imageVector = Icons.Outlined.FileDownload, + contentDescription = "File download Button", + ) + }, + ) - ExtendedFAB( - text = "Label", - onClick = {}, - icon = { - Icon( - imageVector = Icons.Outlined.FileDownload, - contentDescription = "File download Button", - ) - }, - ) - - ExtendedFAB( - text = "Label", - style = FABStyle.SECONDARY, - onClick = {}, - icon = { - Icon( - imageVector = Icons.Outlined.FileDownload, - contentDescription = "File download Button", - ) - }, - ) - - Spacer(Modifier.size(Spacing.Spacing18)) + ExtendedFAB( + text = "Label", + style = FABStyle.SECONDARY, + onClick = {}, + icon = { + Icon( + imageVector = Icons.Outlined.FileDownload, + contentDescription = "File download Button", + ) + }, + ) + } } } diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/buttons/IconButtonScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/buttons/IconButtonScreen.kt index e04e2573d..25ac9c216 100644 --- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/buttons/IconButtonScreen.kt +++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/buttons/IconButtonScreen.kt @@ -9,74 +9,71 @@ import androidx.compose.ui.Modifier import androidx.compose.ui.unit.dp import org.hisp.dhis.common.screens.previews.IconButtonPreview import org.hisp.dhis.common.screens.previews.SquareIconButtonPreview -import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer +import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer import org.hisp.dhis.mobile.ui.designsystem.component.IconButtonStyle import org.hisp.dhis.mobile.ui.designsystem.component.RowComponentContainer -import org.hisp.dhis.mobile.ui.designsystem.component.Title import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing @Composable fun IconButtonScreen() { - ColumnComponentContainer( - content = { - // SquareIconButton - Title("Icon Buttons") - RowComponentContainer( - title = "Square", - content = { - SquareIconButtonPreview() - SquareIconButtonPreview(false) - }, - ) - Spacer(Modifier.size(Spacing.Spacing18)) + ColumnScreenContainer(title = ButtonScreens.ICON_BUTTON.label) { + // SquareIconButton + RowComponentContainer( + title = "Square", + content = { + SquareIconButtonPreview() + SquareIconButtonPreview(false) + }, + ) + Spacer(Modifier.size(Spacing.Spacing18)) - // IconButton - RowComponentContainer( - title = "Standard", - content = { - IconButtonPreview() - IconButtonPreview(false) - }, - ) - Spacer(Modifier.size(Spacing.Spacing18)) + // IconButton + RowComponentContainer( + title = "Standard", + content = { + IconButtonPreview() + IconButtonPreview(false) + }, + ) + Spacer(Modifier.size(Spacing.Spacing18)) - RowComponentContainer( - title = "Filled", - content = { - Row( - horizontalArrangement = Arrangement.spacedBy(10.dp), - ) { - IconButtonPreview(true, IconButtonStyle.FILLED) - IconButtonPreview(false, IconButtonStyle.FILLED) - } - }, - ) - Spacer(Modifier.size(Spacing.Spacing18)) + RowComponentContainer( + title = "Filled", + content = { + Row( + horizontalArrangement = Arrangement.spacedBy(10.dp), + ) { + IconButtonPreview(true, IconButtonStyle.FILLED) + IconButtonPreview(false, IconButtonStyle.FILLED) + } + }, + ) + Spacer(Modifier.size(Spacing.Spacing18)) - RowComponentContainer( - title = "Tonal", - content = { - Row( - horizontalArrangement = Arrangement.spacedBy(10.dp), - ) { - IconButtonPreview(true, IconButtonStyle.TONAL) - IconButtonPreview(false, IconButtonStyle.TONAL) - } - }, - ) - Spacer(Modifier.size(Spacing.Spacing18)) + RowComponentContainer( + title = "Tonal", + content = { + Row( + horizontalArrangement = Arrangement.spacedBy(10.dp), + ) { + IconButtonPreview(true, IconButtonStyle.TONAL) + IconButtonPreview(false, IconButtonStyle.TONAL) + } + }, + ) + Spacer(Modifier.size(Spacing.Spacing18)) - RowComponentContainer( - title = "Outlined", - content = { - Row( - horizontalArrangement = Arrangement.spacedBy(10.dp), - ) { - IconButtonPreview(true, IconButtonStyle.OUTLINED) - IconButtonPreview(false, IconButtonStyle.OUTLINED) - } - }, - ) - }, - ) + RowComponentContainer( + title = "Outlined", + content = { + Row( + horizontalArrangement = Arrangement.spacedBy(10.dp), + ) { + IconButtonPreview(true, IconButtonStyle.OUTLINED) + IconButtonPreview(false, IconButtonStyle.OUTLINED) + } + }, + ) + Spacer(Modifier.size(Spacing.Spacing18)) + } } diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/buttons/RadioButtonScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/buttons/RadioButtonScreen.kt index 847fefc3e..bc40fd6b8 100644 --- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/buttons/RadioButtonScreen.kt +++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/buttons/RadioButtonScreen.kt @@ -1,22 +1,19 @@ package org.hisp.dhis.common.screens.buttons -import androidx.compose.foundation.layout.Spacer -import androidx.compose.foundation.layout.size +import androidx.compose.foundation.layout.Column import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.runtime.setValue -import androidx.compose.ui.Modifier import org.hisp.dhis.common.screens.previews.RadioButtonPreview import org.hisp.dhis.common.screens.previews.TextRadioButtonPreview import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer +import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer import org.hisp.dhis.mobile.ui.designsystem.component.Orientation import org.hisp.dhis.mobile.ui.designsystem.component.RadioButtonBlock import org.hisp.dhis.mobile.ui.designsystem.component.RadioButtonData import org.hisp.dhis.mobile.ui.designsystem.component.RowComponentContainer -import org.hisp.dhis.mobile.ui.designsystem.component.SubTitle -import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing @Composable fun RadioButtonScreen() { @@ -51,42 +48,44 @@ fun RadioButtonScreen() { mutableStateOf(radioButtonDataItemsHorizontal[0]) } - ColumnComponentContainer("Radio Buttons") { - SubTitle("Text Radio Button") - - TextRadioButtonPreview(selected == option1, true, option1) { - selected = option1 - } - TextRadioButtonPreview(selected == option2, true, option2) { - selected = option2 - } - TextRadioButtonPreview(selected == option3, true, option3) { - selected = option3 - } - TextRadioButtonPreview(selected == option4, false, option4) { - selected = option1 + ColumnScreenContainer(title = ButtonScreens.RADIO.label) { + ColumnComponentContainer("Text Radio Button") { + TextRadioButtonPreview(selected == option1, true, option1) { + selected = option1 + } + TextRadioButtonPreview(selected == option2, true, option2) { + selected = option2 + } + TextRadioButtonPreview(selected == option3, true, option3) { + selected = option3 + } + TextRadioButtonPreview(selected == option4, false, option4) { + selected = option1 + } } - Spacer(Modifier.size(Spacing.Spacing18)) - // RadioButton - SubTitle("Radio Button") - RowComponentContainer { - RadioButtonPreview(selected = true, enabled = true) - RadioButtonPreview(selected = true, enabled = false) - } - RowComponentContainer { - RadioButtonPreview(selected = false, enabled = true) - RadioButtonPreview(selected = false, enabled = false) + + ColumnComponentContainer("Radio Button") { + Column { + RowComponentContainer { + RadioButtonPreview(selected = true, enabled = true) + RadioButtonPreview(selected = true, enabled = false) + } + RowComponentContainer { + RadioButtonPreview(selected = false, enabled = true) + RadioButtonPreview(selected = false, enabled = false) + } + } } - Spacer(Modifier.size(Spacing.Spacing18)) - // RadioButtonBlock - SubTitle("Horizontal Radio Button Block") - RadioButtonBlock(Orientation.HORIZONTAL, radioButtonDataItemsHorizontal, selectedItemHorizontal) { - selectedItemHorizontal = it + + ColumnComponentContainer("Horizontal Radio Button Block") { + RadioButtonBlock(Orientation.HORIZONTAL, radioButtonDataItemsHorizontal, selectedItemHorizontal) { + selectedItemHorizontal = it + } } - Spacer(Modifier.size(Spacing.Spacing18)) - SubTitle("Vertical Radio Button Block") - RadioButtonBlock(Orientation.VERTICAL, radioButtonDataItemsVertical, selectedItemVertical) { - selectedItemVertical = it + ColumnComponentContainer("Vertical Radio Button Block") { + RadioButtonBlock(Orientation.VERTICAL, radioButtonDataItemsVertical, selectedItemVertical) { + selectedItemVertical = it + } } } } diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/buttons/SwitchScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/buttons/SwitchScreen.kt index d67855167..a1141e741 100644 --- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/buttons/SwitchScreen.kt +++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/buttons/SwitchScreen.kt @@ -1,41 +1,34 @@ package org.hisp.dhis.common.screens.buttons -import androidx.compose.foundation.layout.Spacer -import androidx.compose.foundation.layout.size import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.runtime.setValue -import androidx.compose.ui.Modifier import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer +import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer import org.hisp.dhis.mobile.ui.designsystem.component.RowComponentContainer -import org.hisp.dhis.mobile.ui.designsystem.component.SubTitle import org.hisp.dhis.mobile.ui.designsystem.component.Switch -import org.hisp.dhis.mobile.ui.designsystem.component.Title -import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing @Composable fun SwitchScreen() { - ColumnComponentContainer { - Title("Switches") - SubTitle("Toggled enabled and disabled switch") - var switchOne by remember { mutableStateOf(true) } - var switchTwo by remember { mutableStateOf(true) } - var switchThree by remember { mutableStateOf(false) } - var switchFour by remember { mutableStateOf(false) } - - RowComponentContainer { - Switch(isChecked = switchOne, onCheckedChange = { switchOne = !it }) - Switch(isChecked = switchTwo, onCheckedChange = { switchTwo = !it }, enabled = false) + ColumnScreenContainer(title = ButtonScreens.SWITCH.label) { + ColumnComponentContainer("Toggled enabled and disabled switch") { + var switchOne by remember { mutableStateOf(true) } + var switchTwo by remember { mutableStateOf(true) } + RowComponentContainer { + Switch(isChecked = switchOne, onCheckedChange = { switchOne = !it }) + Switch(isChecked = switchTwo, onCheckedChange = { switchTwo = !it }, enabled = false) + } } - Spacer(Modifier.size(Spacing.Spacing6)) - SubTitle("Untoggled enabled and disabled switch") - - RowComponentContainer { - Switch(isChecked = switchThree, onCheckedChange = { switchThree = !it }) - Switch(isChecked = switchFour, onCheckedChange = { switchFour = !it }, enabled = false) + ColumnComponentContainer("Unselected enabled and disabled switch") { + var switchThree by remember { mutableStateOf(false) } + var switchFour by remember { mutableStateOf(false) } + RowComponentContainer { + Switch(isChecked = switchThree, onCheckedChange = { switchThree = !it }) + Switch(isChecked = switchFour, onCheckedChange = { switchFour = !it }, enabled = false) + } } } } diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/cards/CardDetailScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/cards/CardDetailScreen.kt index 80369caad..f5b57b841 100644 --- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/cards/CardDetailScreen.kt +++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/cards/CardDetailScreen.kt @@ -10,50 +10,55 @@ import org.hisp.dhis.common.screens.previews.teiDetailList import org.hisp.dhis.mobile.ui.designsystem.component.AdditionalInfoItemColor import org.hisp.dhis.mobile.ui.designsystem.component.CardDetail import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer +import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer 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.theme.TextColor @Composable fun CardDetailScreen() { - ColumnComponentContainer(title = "List Card Components") { - InfoBar( - InfoBarData( - text = "Not Synced", - icon = { - Icon( - imageVector = Icons.Outlined.Sync, - contentDescription = "not synced", - tint = TextColor.OnSurfaceLight, - ) - }, - actionText = "Sync", - onClick = {}, - color = TextColor.OnSurfaceLight, - backgroundColor = Color(0xFFEFF6FA), - ), - ) - InfoBar( - InfoBarData( - text = "Enrollment completed", - icon = { - Icon( - imageVector = Icons.Filled.CheckCircle, - contentDescription = "not synced", - tint = AdditionalInfoItemColor.SUCCESS.color, - ) - }, - color = AdditionalInfoItemColor.SUCCESS.color, - backgroundColor = AdditionalInfoItemColor.SUCCESS.color.copy(alpha = 0.1f), - ), - ) + ColumnScreenContainer(title = Cards.CARD_DETAIL.label) { + ColumnComponentContainer("Info Bar") { + InfoBar( + InfoBarData( + text = "Not Synced", + icon = { + Icon( + imageVector = Icons.Outlined.Sync, + contentDescription = "not synced", + tint = TextColor.OnSurfaceLight, + ) + }, + actionText = "Sync", + onClick = {}, + color = TextColor.OnSurfaceLight, + backgroundColor = Color(0xFFEFF6FA), + ), + ) + InfoBar( + InfoBarData( + text = "Enrollment completed", + icon = { + Icon( + imageVector = Icons.Filled.CheckCircle, + contentDescription = "not synced", + tint = AdditionalInfoItemColor.SUCCESS.color, + ) + }, + color = AdditionalInfoItemColor.SUCCESS.color, + backgroundColor = AdditionalInfoItemColor.SUCCESS.color.copy(alpha = 0.1f), + ), + ) + } - CardDetail( - avatar = null, - title = "Narayan Khanna, M, 32", - additionalInfoList = teiDetailList, - expandLabelText = "Show more", - shrinkLabelText = "Show less", - ) + ColumnComponentContainer("Card Detail") { + CardDetail( + avatar = null, + title = "Narayan Khanna, M, 32", + additionalInfoList = teiDetailList, + expandLabelText = "Show more", + shrinkLabelText = "Show less", + ) + } } } diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/cards/CardsScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/cards/CardsScreen.kt index ec5e35d98..66b2a9e76 100644 --- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/cards/CardsScreen.kt +++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/cards/CardsScreen.kt @@ -4,13 +4,12 @@ import androidx.compose.runtime.Composable import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import org.hisp.dhis.common.screens.NoComponentSelectedScreen +import org.hisp.dhis.common.screens.components.GroupComponentDropDown import org.hisp.dhis.mobile.ui.designsystem.component.DropdownItem -import org.hisp.dhis.mobile.ui.designsystem.component.InputDropDown -import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState @Composable fun CardsScreen() { - val currentScreen = remember { mutableStateOf(Cards.CARD_DETAIL) } + val currentScreen = remember { mutableStateOf(Cards.NO_COMPONENT_SELECTED) } val screenDropdownItemList = mutableListOf() Cards.entries.forEach { @@ -18,13 +17,11 @@ fun CardsScreen() { screenDropdownItemList.add(DropdownItem(it.label)) } } - InputDropDown( - "Display", + GroupComponentDropDown( dropdownItems = screenDropdownItemList.toList(), onItemSelected = { currentScreen.value = getCurrentScreen(it.label) }, onResetButtonClicked = { currentScreen.value = Cards.NO_COMPONENT_SELECTED }, selectedItem = DropdownItem(currentScreen.value.label), - state = InputShellState.UNFOCUSED, ) when (currentScreen.value) { Cards.CARD_DETAIL -> CardDetailScreen() diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/cards/ListCardScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/cards/ListCardScreen.kt index 937ff8a5d..bd6ae012e 100644 --- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/cards/ListCardScreen.kt +++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/cards/ListCardScreen.kt @@ -1,8 +1,6 @@ package org.hisp.dhis.common.screens.cards -import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxWidth -import androidx.compose.foundation.layout.size import androidx.compose.material.icons.Icons import androidx.compose.material.icons.outlined.Event import androidx.compose.material.icons.outlined.Sync @@ -31,491 +29,485 @@ import org.hisp.dhis.mobile.ui.designsystem.component.AvatarStyle import org.hisp.dhis.mobile.ui.designsystem.component.Button import org.hisp.dhis.mobile.ui.designsystem.component.ButtonStyle import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer +import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer 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 -import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing import org.hisp.dhis.mobile.ui.designsystem.theme.SurfaceColor import org.hisp.dhis.mobile.ui.designsystem.theme.TextColor @Composable fun ListCardScreen() { - ColumnComponentContainer(title = "List Card Components") { + ColumnScreenContainer(title = Cards.LIST_CARD.label) { var showLoading1 by remember { mutableStateOf(false) } - SubTitle("Tei list:") - SubTitle("With shadow") - ListCard( - listAvatar = { - Avatar( - textAvatar = "P", - style = AvatarStyle.TEXT, - ) - }, - title = ListCardTitleModel(text = "Palak Khanna, F, 61"), - lastUpdated = "5 hours", - additionalInfoList = basicAdditionalItemList.toMutableList(), - actionButton = { - Button( - style = ButtonStyle.TONAL, - text = "Retry sync", - icon = { - Icon( - imageVector = Icons.Outlined.Sync, - contentDescription = "Icon Button", - tint = TextColor.OnPrimaryContainer, - ) - }, - onClick = { showLoading1 = !showLoading1 }, - modifier = Modifier.fillMaxWidth(), - ) - }, - onCardClick = {}, - loading = showLoading1, - ) - var showLoading2 by remember { - mutableStateOf(false) - } - ListCard( - listAvatar = { - Avatar( - textAvatar = "P", - style = AvatarStyle.TEXT, - ) - }, - title = ListCardTitleModel(text = "Palak Khanna, F, 61"), - lastUpdated = "5 hours", - additionalInfoList = basicAdditionalItemListWithLongKeyText.toMutableList(), - actionButton = { - Button( - style = ButtonStyle.TONAL, - text = "Retry sync", - icon = { - Icon( - imageVector = Icons.Outlined.Sync, - contentDescription = "Icon Button", - tint = TextColor.OnPrimaryContainer, - ) - }, - onClick = { showLoading2 = !showLoading2 }, - modifier = Modifier.fillMaxWidth(), - ) - }, - onCardClick = {}, - loading = showLoading2, - ) - var showLoading3 by remember { - mutableStateOf(false) - } - ListCard( - listAvatar = { - Avatar( - textAvatar = "P", - style = AvatarStyle.TEXT, - ) - }, - title = ListCardTitleModel(text = "Palak Khanna, F, 61"), - lastUpdated = "5 hours", - additionalInfoList = basicAdditionalItemListWithMediumKeyText.toMutableList(), - actionButton = { - Button( - style = ButtonStyle.TONAL, - text = "Retry sync", - icon = { - Icon( - imageVector = Icons.Outlined.Sync, - contentDescription = "Icon Button", - tint = TextColor.OnPrimaryContainer, - ) - }, - onClick = { showLoading3 = !showLoading3 }, - modifier = Modifier.fillMaxWidth(), - ) - }, - onCardClick = {}, - loading = showLoading3, - ) - var showLoading4 by remember { - mutableStateOf(false) - } - ListCard( - listAvatar = { - Avatar( - textAvatar = "P", - style = AvatarStyle.TEXT, - ) - }, - title = ListCardTitleModel(text = "Palak Khanna, F, 61"), - lastUpdated = "5 hours", - additionalInfoList = basicAdditionalItemListWithLongValue.toMutableList(), - actionButton = { - Button( - style = ButtonStyle.TONAL, - text = "Retry sync", - icon = { - Icon( - imageVector = Icons.Outlined.Sync, - contentDescription = "Icon Button", - tint = TextColor.OnPrimaryContainer, - ) - }, - onClick = { showLoading4 = !showLoading4 }, - modifier = Modifier.fillMaxWidth(), - ) - }, - onCardClick = {}, - loading = showLoading4, - ) - var showLoading5 by remember { - mutableStateOf(false) - } - ListCard( - listAvatar = { - Avatar( - imagePainter = provideDHIS2Icon("dhis2_microscope_outline"), - style = AvatarStyle.IMAGE, - ) - }, - title = ListCardTitleModel(text = "Kunal Choudary, M, 55"), - lastUpdated = "24 min", - additionalInfoList = enrollmentCompletedList.toMutableList(), - actionButton = { - Button( - style = ButtonStyle.TONAL, - text = "Retry sync", - icon = { - Icon( - imageVector = Icons.Outlined.Sync, - contentDescription = "Icon Button", - tint = TextColor.OnPrimaryContainer, - ) - }, - onClick = { showLoading5 = !showLoading5 }, - modifier = Modifier.fillMaxWidth(), - ) - }, - onCardClick = {}, - loading = showLoading5, - ) - SubTitle("Without shadow") - - var showLoading6 by remember { - mutableStateOf(false) - } - ListCard( - shadow = false, - listAvatar = { - Avatar( - metadataAvatar = { - MetadataAvatar( - icon = { - Icon( - painter = provideDHIS2Icon("dhis2_microscope_outline"), - contentDescription = "Button", - tint = SurfaceColor.Primary, - ) - }, - ) - }, - style = AvatarStyle.METADATA, - ) - }, - title = ListCardTitleModel(text = "Anita Mathews, F, 72"), - lastUpdated = "5 hours", - additionalInfoList = fullItemList.toMutableList(), - actionButton = { - Button( - style = ButtonStyle.TONAL, - text = "Retry sync", - icon = { - Icon( - imageVector = Icons.Outlined.Sync, - contentDescription = "Icon Button", - tint = TextColor.OnPrimaryContainer, - ) - }, - onClick = { showLoading6 = !showLoading6 }, - modifier = Modifier.fillMaxWidth(), - ) - }, - onCardClick = {}, - loading = showLoading6, - ) - - var showLoading7 by remember { - mutableStateOf(false) - } - val errorList = remember { + val eventsTimelineTeiDashboardList = remember { mutableStateListOf( - AdditionalInfoItem(key = "Phone", value = "+234 123 111 6785"), AdditionalInfoItem(key = "Date of birth", value = "12/12/1945"), ) } - val eventsTimelineTeiDashboardList = remember { - mutableStateListOf( - AdditionalInfoItem(key = "Date of birth", value = "12/12/1945"), + ColumnComponentContainer("Tei list with shadow") { + ListCard( + listAvatar = { + Avatar( + textAvatar = "P", + style = AvatarStyle.TEXT, + ) + }, + title = ListCardTitleModel(text = "Palak Khanna, F, 61"), + lastUpdated = "5 hours", + additionalInfoList = basicAdditionalItemList.toMutableList(), + actionButton = { + Button( + style = ButtonStyle.TONAL, + text = "Retry sync", + icon = { + Icon( + imageVector = Icons.Outlined.Sync, + contentDescription = "Icon Button", + tint = TextColor.OnPrimaryContainer, + ) + }, + onClick = { showLoading1 = !showLoading1 }, + modifier = Modifier.fillMaxWidth(), + ) + }, + onCardClick = {}, + loading = showLoading1, + ) + var showLoading2 by remember { + mutableStateOf(false) + } + ListCard( + listAvatar = { + Avatar( + textAvatar = "P", + style = AvatarStyle.TEXT, + ) + }, + title = ListCardTitleModel(text = "Palak Khanna, F, 61"), + lastUpdated = "5 hours", + additionalInfoList = basicAdditionalItemListWithLongKeyText.toMutableList(), + actionButton = { + Button( + style = ButtonStyle.TONAL, + text = "Retry sync", + icon = { + Icon( + imageVector = Icons.Outlined.Sync, + contentDescription = "Icon Button", + tint = TextColor.OnPrimaryContainer, + ) + }, + onClick = { showLoading2 = !showLoading2 }, + modifier = Modifier.fillMaxWidth(), + ) + }, + onCardClick = {}, + loading = showLoading2, + ) + var showLoading3 by remember { + mutableStateOf(false) + } + ListCard( + listAvatar = { + Avatar( + textAvatar = "P", + style = AvatarStyle.TEXT, + ) + }, + title = ListCardTitleModel(text = "Palak Khanna, F, 61"), + lastUpdated = "5 hours", + additionalInfoList = basicAdditionalItemListWithMediumKeyText.toMutableList(), + actionButton = { + Button( + style = ButtonStyle.TONAL, + text = "Retry sync", + icon = { + Icon( + imageVector = Icons.Outlined.Sync, + contentDescription = "Icon Button", + tint = TextColor.OnPrimaryContainer, + ) + }, + onClick = { showLoading3 = !showLoading3 }, + modifier = Modifier.fillMaxWidth(), + ) + }, + onCardClick = {}, + loading = showLoading3, + ) + var showLoading4 by remember { + mutableStateOf(false) + } + ListCard( + listAvatar = { + Avatar( + textAvatar = "P", + style = AvatarStyle.TEXT, + ) + }, + title = ListCardTitleModel(text = "Palak Khanna, F, 61"), + lastUpdated = "5 hours", + additionalInfoList = basicAdditionalItemListWithLongValue.toMutableList(), + actionButton = { + Button( + style = ButtonStyle.TONAL, + text = "Retry sync", + icon = { + Icon( + imageVector = Icons.Outlined.Sync, + contentDescription = "Icon Button", + tint = TextColor.OnPrimaryContainer, + ) + }, + onClick = { showLoading4 = !showLoading4 }, + modifier = Modifier.fillMaxWidth(), + ) + }, + onCardClick = {}, + loading = showLoading4, + ) + var showLoading5 by remember { + mutableStateOf(false) + } + ListCard( + listAvatar = { + Avatar( + imagePainter = provideDHIS2Icon("dhis2_microscope_outline"), + style = AvatarStyle.IMAGE, + ) + }, + title = ListCardTitleModel(text = "Kunal Choudary, M, 55"), + lastUpdated = "24 min", + additionalInfoList = enrollmentCompletedList.toMutableList(), + actionButton = { + Button( + style = ButtonStyle.TONAL, + text = "Retry sync", + icon = { + Icon( + imageVector = Icons.Outlined.Sync, + contentDescription = "Icon Button", + tint = TextColor.OnPrimaryContainer, + ) + }, + onClick = { showLoading5 = !showLoading5 }, + modifier = Modifier.fillMaxWidth(), + ) + }, + onCardClick = {}, + loading = showLoading5, ) } - val errorItem = AdditionalInfoItem( - icon = { - Icon( - imageVector = Icons.Outlined.SyncProblem, - contentDescription = "Icon Button", - tint = AdditionalInfoItemColor.ERROR.color, - ) - }, - value = "Sync warning", - color = AdditionalInfoItemColor.ERROR.color, - isConstantItem = true, - ) - - ListCard( - listAvatar = { - Avatar( - textAvatar = "A", - style = AvatarStyle.TEXT, - ) - }, - title = ListCardTitleModel(text = "Aditi Singh, F, 61"), - lastUpdated = "5 hours", - additionalInfoList = errorList, - actionButton = { - Button( - style = ButtonStyle.TONAL, - text = "Retry sync", - icon = { - Icon( - imageVector = Icons.Outlined.Sync, - contentDescription = "Icon Button", - tint = TextColor.OnPrimaryContainer, - ) - }, - onClick = { - if (!showLoading7) { - errorList.remove(errorItem) - } else { - errorList.add(errorItem) - } - showLoading7 = !showLoading7 - }, - modifier = Modifier.fillMaxWidth(), - ) - }, - onCardClick = {}, - loading = showLoading7, - ) - Spacer(Modifier.size(Spacing.Spacing16)) - SubTitle("Single events list:") - SubTitle("With shadow:") + ColumnComponentContainer("Without shadow") { + var showLoading6 by remember { + mutableStateOf(false) + } + ListCard( + shadow = false, + listAvatar = { + Avatar( + metadataAvatar = { + MetadataAvatar( + icon = { + Icon( + painter = provideDHIS2Icon("dhis2_microscope_outline"), + contentDescription = "Button", + tint = SurfaceColor.Primary, + ) + }, + ) + }, + style = AvatarStyle.METADATA, + ) + }, + title = ListCardTitleModel(text = "Anita Mathews, F, 72"), + lastUpdated = "5 hours", + additionalInfoList = fullItemList.toMutableList(), + actionButton = { + Button( + style = ButtonStyle.TONAL, + text = "Retry sync", + icon = { + Icon( + imageVector = Icons.Outlined.Sync, + contentDescription = "Icon Button", + tint = TextColor.OnPrimaryContainer, + ) + }, + onClick = { showLoading6 = !showLoading6 }, + modifier = Modifier.fillMaxWidth(), + ) + }, + onCardClick = {}, + loading = showLoading6, + ) - ListCard( - title = ListCardTitleModel(text = "12/18/2021"), - lastUpdated = "now", - additionalInfoList = basicAdditionalItemList, - actionButton = { - Button( - style = ButtonStyle.TONAL, - text = "Retry sync", - icon = { - Icon( - imageVector = Icons.Outlined.Sync, - contentDescription = "Icon Button", - tint = TextColor.OnPrimaryContainer, - ) - }, - onClick = { }, - modifier = Modifier.fillMaxWidth(), + var showLoading7 by remember { + mutableStateOf(false) + } + val errorList = remember { + mutableStateListOf( + AdditionalInfoItem(key = "Phone", value = "+234 123 111 6785"), + AdditionalInfoItem(key = "Date of birth", value = "12/12/1945"), ) - }, - onCardClick = {}, - ) - Spacer(Modifier.size(Spacing.Spacing16)) - SubTitle("Without shadow:") + } - ListCard( - shadow = false, - title = ListCardTitleModel(text = "12/18/2021"), - lastUpdated = "now", - additionalInfoList = basicAdditionalItemList, - actionButton = { - Button( - style = ButtonStyle.TONAL, - text = "Retry sync", - icon = { - Icon( - imageVector = Icons.Outlined.Sync, - contentDescription = "Icon Button", - tint = TextColor.OnPrimaryContainer, - ) - }, - onClick = { }, - modifier = Modifier.fillMaxWidth(), - ) - }, - onCardClick = {}, - ) - Spacer(Modifier.size(Spacing.Spacing16)) - SubTitle("Events in timeline in TEI dashboard:") - SubTitle("With shadow:") + val errorItem = AdditionalInfoItem( + icon = { + Icon( + imageVector = Icons.Outlined.SyncProblem, + contentDescription = "Icon Button", + tint = AdditionalInfoItemColor.ERROR.color, + ) + }, + value = "Sync warning", + color = AdditionalInfoItemColor.ERROR.color, + isConstantItem = true, + ) - ListCard( - listAvatar = { - Avatar( - metadataAvatar = { - MetadataAvatar( - icon = { - Icon( - painter = provideDHIS2Icon("dhis2_baby_male_0203m_positive"), - contentDescription = "Button", + ListCard( + listAvatar = { + Avatar( + textAvatar = "A", + style = AvatarStyle.TEXT, + ) + }, + title = ListCardTitleModel(text = "Aditi Singh, F, 61"), + lastUpdated = "5 hours", + additionalInfoList = errorList, + actionButton = { + Button( + style = ButtonStyle.TONAL, + text = "Retry sync", + icon = { + Icon( + imageVector = Icons.Outlined.Sync, + contentDescription = "Icon Button", + tint = TextColor.OnPrimaryContainer, + ) + }, + onClick = { + if (!showLoading7) { + errorList.remove(errorItem) + } else { + errorList.add(errorItem) + } + showLoading7 = !showLoading7 + }, + modifier = Modifier.fillMaxWidth(), + ) + }, + onCardClick = {}, + loading = showLoading7, + ) + } - ) - }, - iconTint = Color(0xFF11D9D9), - size = AvatarSize.Large, - ) - }, - style = AvatarStyle.METADATA, - ) - }, - title = ListCardTitleModel(text = "12/18/2021 at 16:30"), - lastUpdated = "now", - additionalInfoList = eventsTimelineTeiDashboardList, - actionButton = { - Button( - style = ButtonStyle.TONAL, - text = "Retry sync", - icon = { - Icon( - imageVector = Icons.Outlined.Sync, - contentDescription = "Icon Button", - tint = TextColor.OnPrimaryContainer, - ) - }, - onClick = {}, - modifier = Modifier.fillMaxWidth(), - ) - }, - onCardClick = {}, - ) - Spacer(Modifier.size(Spacing.Spacing16)) + ColumnComponentContainer("Single events list with shadow") { + ListCard( + title = ListCardTitleModel(text = "12/18/2021"), + lastUpdated = "now", + additionalInfoList = basicAdditionalItemList, + actionButton = { + Button( + style = ButtonStyle.TONAL, + text = "Retry sync", + icon = { + Icon( + imageVector = Icons.Outlined.Sync, + contentDescription = "Icon Button", + tint = TextColor.OnPrimaryContainer, + ) + }, + onClick = { }, + modifier = Modifier.fillMaxWidth(), + ) + }, + onCardClick = {}, + ) + } - SubTitle("Without shadow:") - ListCard( - shadow = false, - listAvatar = { - Avatar( - metadataAvatar = { - MetadataAvatar( - icon = { - Icon( - painter = provideDHIS2Icon("dhis2_baby_male_0203m_positive"), - contentDescription = "Button", + ColumnComponentContainer("Single events list without shadow:") { + ListCard( + shadow = false, + title = ListCardTitleModel(text = "12/18/2021"), + lastUpdated = "now", + additionalInfoList = basicAdditionalItemList, + actionButton = { + Button( + style = ButtonStyle.TONAL, + text = "Retry sync", + icon = { + Icon( + imageVector = Icons.Outlined.Sync, + contentDescription = "Icon Button", + tint = TextColor.OnPrimaryContainer, + ) + }, + onClick = { }, + modifier = Modifier.fillMaxWidth(), + ) + }, + onCardClick = {}, + ) + } - ) - }, - iconTint = Color(0xFF11D9D9), - size = AvatarSize.Large, - ) - }, - style = AvatarStyle.METADATA, - ) - }, - title = ListCardTitleModel(text = "12/18/2021 at 16:30"), - description = ListCardDescriptionModel(text = "Birth"), - lastUpdated = "now", - additionalInfoList = eventsTimelineTeiDashboardList, - onCardClick = {}, - ) + ColumnComponentContainer("Events in timeline in TEI dashboard with shadow") { + ListCard( + listAvatar = { + Avatar( + metadataAvatar = { + MetadataAvatar( + icon = { + Icon( + painter = provideDHIS2Icon("dhis2_baby_male_0203m_positive"), + contentDescription = "Button", + ) + }, + iconTint = Color(0xFF11D9D9), + size = AvatarSize.Large, + ) + }, + style = AvatarStyle.METADATA, + ) + }, + title = ListCardTitleModel(text = "12/18/2021 at 16:30"), + lastUpdated = "now", + additionalInfoList = eventsTimelineTeiDashboardList, + actionButton = { + Button( + style = ButtonStyle.TONAL, + text = "Retry sync", + icon = { + Icon( + imageVector = Icons.Outlined.Sync, + contentDescription = "Icon Button", + tint = TextColor.OnPrimaryContainer, + ) + }, + onClick = {}, + modifier = Modifier.fillMaxWidth(), + ) + }, + onCardClick = {}, + ) + } - SubTitle("ListCards for events displayed in TEI dashboard:") + ColumnComponentContainer("Events in timeline in TEI dashboard without shadow:") { + ListCard( + shadow = false, + listAvatar = { + Avatar( + metadataAvatar = { + MetadataAvatar( + icon = { + Icon( + painter = provideDHIS2Icon("dhis2_baby_male_0203m_positive"), + contentDescription = "Button", + ) + }, + iconTint = Color(0xFF11D9D9), + size = AvatarSize.Large, + ) + }, + style = AvatarStyle.METADATA, + ) + }, + title = ListCardTitleModel(text = "12/18/2021 at 16:30"), + description = ListCardDescriptionModel(text = "Birth"), + lastUpdated = "now", + additionalInfoList = eventsTimelineTeiDashboardList, + onCardClick = {}, + ) + } - val eventsInTeiDashboardTitleStyle = MaterialTheme.typography.titleSmall + ColumnComponentContainer("ListCards for events displayed in TEI dashboard:") { + val eventsInTeiDashboardTitleStyle = MaterialTheme.typography.titleSmall - ListCard( + ListCard( - 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, + 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, + ), ), + onCardClick = {}, + ) - ), - onCardClick = {}, - ) - - ListCard( + 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, + 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"), ), - 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, + 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"), ), - AdditionalInfoItem(key = "Drug resistance", value = "Monoresistance"), - AdditionalInfoItem(key = "treatment", value = "Initial regiment- first-line drugs"), - ), - onCardClick = {}, - ) - Spacer(Modifier.size(Spacing.Spacing16)) + onCardClick = {}, + ) + } } } diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/components/GroupComponentDropDown.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/components/GroupComponentDropDown.kt new file mode 100644 index 000000000..66bb7cba0 --- /dev/null +++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/components/GroupComponentDropDown.kt @@ -0,0 +1,31 @@ +package org.hisp.dhis.common.screens.components + +import androidx.compose.foundation.layout.padding +import androidx.compose.runtime.Composable +import androidx.compose.ui.Modifier +import org.hisp.dhis.mobile.ui.designsystem.component.DropdownItem +import org.hisp.dhis.mobile.ui.designsystem.component.InputDropDown +import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState +import org.hisp.dhis.mobile.ui.designsystem.component.InputStyle +import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing +import org.hisp.dhis.mobile.ui.designsystem.theme.SurfaceColor + +@Composable +fun GroupComponentDropDown( + modifier: Modifier = Modifier, + dropdownItems: List, + onItemSelected: (DropdownItem) -> Unit, + onResetButtonClicked: () -> Unit, + selectedItem: DropdownItem? = null, +) { + InputDropDown( + modifier = modifier.padding(horizontal = Spacing.Spacing16), + title = "Component", + dropdownItems = dropdownItems, + onItemSelected = onItemSelected, + onResetButtonClicked = onResetButtonClicked, + selectedItem = selectedItem, + state = InputShellState.UNFOCUSED, + inputStyle = InputStyle.DataInputStyle().apply { backGroundColor = SurfaceColor.SurfaceBright }, + ) +} diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/others/BadgesScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/others/BadgesScreen.kt index 590fd7ee7..fc60fa352 100644 --- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/others/BadgesScreen.kt +++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/others/BadgesScreen.kt @@ -3,22 +3,25 @@ package org.hisp.dhis.common.screens.others import androidx.compose.runtime.Composable import org.hisp.dhis.mobile.ui.designsystem.component.Badge import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer +import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer import org.hisp.dhis.mobile.ui.designsystem.component.ErrorBadge @Composable fun BadgesScreen() { - ColumnComponentContainer(title = "Badges") { - Badge() - Badge(text = "3") - Badge(text = "32") - Badge(text = "321") - Badge(text = "4321") - } - ColumnComponentContainer(title = "Error badges") { - ErrorBadge() - ErrorBadge(text = "3") - ErrorBadge(text = "32") - ErrorBadge(text = "321") - ErrorBadge(text = "4321") + ColumnScreenContainer(title = "Badge component") { + ColumnComponentContainer("Basic badges") { + Badge() + Badge(text = "3") + Badge(text = "32") + Badge(text = "321") + Badge(text = "4321") + } + ColumnComponentContainer("Error badges") { + ErrorBadge() + ErrorBadge(text = "3") + ErrorBadge(text = "32") + ErrorBadge(text = "321") + ErrorBadge(text = "4321") + } } } diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/others/ChipsScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/others/ChipsScreen.kt index 770aaeca0..be9db47f8 100644 --- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/others/ChipsScreen.kt +++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/others/ChipsScreen.kt @@ -1,6 +1,5 @@ package org.hisp.dhis.common.screens.others -import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.size import androidx.compose.material.icons.Icons import androidx.compose.material.icons.filled.Search @@ -14,94 +13,94 @@ import androidx.compose.runtime.setValue import androidx.compose.ui.Modifier import org.hisp.dhis.mobile.ui.designsystem.component.AssistChip import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer +import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer import org.hisp.dhis.mobile.ui.designsystem.component.FilterChip import org.hisp.dhis.mobile.ui.designsystem.component.InputChip -import org.hisp.dhis.mobile.ui.designsystem.component.SubTitle -import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing @Composable fun ChipsScreen() { - ColumnComponentContainer { - SubTitle("Input Chips") - var isSelected by remember { mutableStateOf(false) } - var isSelected1 by remember { mutableStateOf(true) } - var isSelected2 by remember { mutableStateOf(false) } - var isSelected3 by remember { mutableStateOf(true) } - InputChip(label = "Label", selected = isSelected, onSelected = { isSelected = it }) - InputChip(label = "Label", selected = !isSelected1, onSelected = { isSelected1 = !it }) - InputChip( - label = "Label", - selected = !isSelected2, - withTrailingIcon = true, - onSelected = { isSelected2 = !it }, - onIconSelected = {}, - ) - InputChip( - label = "Label", - selected = !isSelected3, - withTrailingIcon = true, - onSelected = { isSelected3 = !it }, - onIconSelected = {}, - ) - InputChip( - label = "Label", - enabled = false, - ) - Spacer(Modifier.size(Spacing.Spacing18)) + ColumnScreenContainer("Chip component") { + ColumnComponentContainer("Input Chips") { + var isSelected by remember { mutableStateOf(false) } + var isSelected1 by remember { mutableStateOf(true) } + var isSelected2 by remember { mutableStateOf(false) } + var isSelected3 by remember { mutableStateOf(true) } + InputChip(label = "Label", selected = isSelected, onSelected = { isSelected = it }) + InputChip(label = "Label", selected = !isSelected1, onSelected = { isSelected1 = !it }) + InputChip( + label = "Label", + selected = !isSelected2, + withTrailingIcon = true, + onSelected = { isSelected2 = !it }, + onIconSelected = {}, + ) + InputChip( + label = "Label", + selected = !isSelected3, + withTrailingIcon = true, + onSelected = { isSelected3 = !it }, + onIconSelected = {}, + ) + InputChip( + label = "Label", + enabled = false, + ) + } - SubTitle("Input Chips With badges") - InputChip(label = "Label", selected = false, badge = "3") - InputChip(label = "Label", selected = true, badge = "3") - Spacer(Modifier.size(Spacing.Spacing18)) + ColumnComponentContainer("Input Chips With badges") { + InputChip(label = "Label", selected = false, badge = "3") + InputChip(label = "Label", selected = true, badge = "3") + } - SubTitle("Filter Chips") - var isSelected4 by remember { mutableStateOf(false) } - FilterChip(label = "Label", selected = isSelected4, onSelected = { isSelected4 = it }) - FilterChip(label = "Label", selected = !isSelected4, onSelected = { isSelected4 = !it }) - Spacer(Modifier.size(Spacing.Spacing18)) + ColumnComponentContainer("Filter Chips") { + var isSelected4 by remember { mutableStateOf(false) } + FilterChip(label = "Label", selected = isSelected4, onSelected = { isSelected4 = it }) + FilterChip(label = "Label", selected = !isSelected4, onSelected = { isSelected4 = !it }) + } - SubTitle("Filter Chips With badges") - FilterChip(label = "Label", selected = true, badge = "3") - FilterChip(label = "Label", selected = false, badge = "3") - Spacer(Modifier.size(Spacing.Spacing18)) + ColumnComponentContainer("Filter Chips With badges") { + FilterChip(label = "Label", selected = true, badge = "3") + FilterChip(label = "Label", selected = false, badge = "3") + } - SubTitle("Assist Chips") - AssistChip( - label = "Label", - onClick = { }, - ) - AssistChip( - label = "Label", - icon = { - Icon( - imageVector = Icons.Filled.Search, - contentDescription = "search icon", - modifier = Modifier - .size(AssistChipDefaults.IconSize), - ) - }, - onClick = { }, - ) - Spacer(Modifier.size(Spacing.Spacing18)) + ColumnComponentContainer("Assist Chips") { + AssistChip( + label = "Label", + onClick = { }, + ) + AssistChip( + label = "Label", + icon = { + Icon( + imageVector = Icons.Filled.Search, + contentDescription = "search icon", + modifier = Modifier + .size(AssistChipDefaults.IconSize), + ) + }, + onClick = { }, + ) + } - SubTitle("Assist Chips With badges") - AssistChip( - label = "Label", - icon = { - Icon( - imageVector = Icons.Filled.Search, - contentDescription = "search icon", - modifier = Modifier - .size(AssistChipDefaults.IconSize), - ) - }, - onClick = {}, - badge = "2", - ) - AssistChip( - label = "Label", - onClick = {}, - badge = "4", - ) + ColumnComponentContainer("Assist Chips With badges") { + AssistChip( + label = "Label", + icon = { + Icon( + imageVector = Icons.Filled.Search, + contentDescription = "search icon", + modifier = Modifier + .size(AssistChipDefaults.IconSize), + ) + }, + onClick = {}, + badge = "2", + ) + AssistChip( + label = "Label", + onClick = {}, + badge = "4", + ) + } } } diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/others/IndicatorScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/others/IndicatorScreen.kt index 2dcacced2..24a809f0a 100644 --- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/others/IndicatorScreen.kt +++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/others/IndicatorScreen.kt @@ -2,12 +2,12 @@ package org.hisp.dhis.common.screens.others 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.ColumnScreenContainer import org.hisp.dhis.mobile.ui.designsystem.component.Indicator @Composable fun IndicatorScreen() { - ColumnComponentContainer { + ColumnScreenContainer(title = "Indicator component") { Indicator( title = "Systolic and diastolic pressure", content = "120 mmHg / 80 mmHg", diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/others/LegendScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/others/LegendScreen.kt index 8093087ba..c11f8e4d1 100644 --- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/others/LegendScreen.kt +++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/others/LegendScreen.kt @@ -1,99 +1,97 @@ package org.hisp.dhis.common.screens.others -import androidx.compose.foundation.layout.Spacer -import androidx.compose.foundation.layout.size import androidx.compose.runtime.Composable -import androidx.compose.ui.Modifier import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer +import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer import org.hisp.dhis.mobile.ui.designsystem.component.Legend import org.hisp.dhis.mobile.ui.designsystem.component.LegendData import org.hisp.dhis.mobile.ui.designsystem.component.LegendDescriptionData import org.hisp.dhis.mobile.ui.designsystem.component.LegendRange -import org.hisp.dhis.mobile.ui.designsystem.component.SubTitle -import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing import org.hisp.dhis.mobile.ui.designsystem.theme.SurfaceColor @Composable fun LegendScreen() { - ColumnComponentContainer(title = "Legend") { - SubTitle("Green Legend") - Legend(LegendData(SurfaceColor.CustomGreen, "Legend")) - Spacer(Modifier.size(Spacing.Spacing18)) + ColumnScreenContainer(title = "Legend component") { + ColumnComponentContainer("Green Legend") { + Legend(LegendData(SurfaceColor.CustomGreen, "Legend")) + } - SubTitle("Orange Legend") - Legend(LegendData(SurfaceColor.Warning, "Legend")) - Spacer(Modifier.size(Spacing.Spacing18)) + ColumnComponentContainer("Orange Legend") { + Legend(LegendData(SurfaceColor.Warning, "Legend")) + } - SubTitle("Pink Legend") - Legend( - LegendData( - SurfaceColor.CustomPink, - "Lorem ipsum dolor sit amet," + - " consectetur adipiscing elit. Maecenas dolor lacus," + - " aliquam. Lorem ipsum dolor sit amet," + - " consectetur adipiscing elit. Maecenas dolor lacus,", - ), - ) + ColumnComponentContainer("Pink Legend") { + Legend( + LegendData( + SurfaceColor.CustomPink, + "Lorem ipsum dolor sit amet," + + " consectetur adipiscing elit. Maecenas dolor lacus," + + " aliquam. Lorem ipsum dolor sit amet," + + " consectetur adipiscing elit. Maecenas dolor lacus,", + ), + ) + } + + ColumnComponentContainer("Legend with popup description") { + Legend( + LegendData( + color = SurfaceColor.CustomGreen, + title = "Legend with popup", + popUpLegendDescriptionData = listOf( + LegendDescriptionData( + color = SurfaceColor.CustomGreen, + text = "Item 1", + range = 0..300, + ), + LegendDescriptionData( + color = SurfaceColor.CustomGreen, + text = "Item 2", + range = 301..600, + ), + ), + ), + ) - SubTitle("Legend with popup description") - Legend( - LegendData( - color = SurfaceColor.CustomGreen, - title = "Legend with popup", - popUpLegendDescriptionData = listOf( + LegendRange( + listOf( LegendDescriptionData( - color = SurfaceColor.CustomGreen, - text = "Item 1", - range = 0..300, + SurfaceColor.CustomGreen, + "Legend", + IntRange(0, 30), ), LegendDescriptionData( - color = SurfaceColor.CustomGreen, - text = "Item 2", - range = 301..600, + SurfaceColor.CustomGreen, + "Lorem ipsum dolor sit amet, " + + "consectetur adipiscing elit. Maecenas dolor lacus, " + + "aliquam. Lorem ipsum dolor sit amet, " + + "consectetur adipiscing elit. Maecenas dolor lacus, " + + "aliquam.Lorem ipsum dolor sit amet, consectetur adipiscing elit.", + IntRange(0, 30), ), ), - ), - ) - - LegendRange( - listOf( - LegendDescriptionData( - SurfaceColor.CustomGreen, - "Legend", - IntRange(0, 30), - ), - LegendDescriptionData( - SurfaceColor.CustomGreen, - "Lorem ipsum dolor sit amet, " + - "consectetur adipiscing elit. Maecenas dolor lacus, " + - "aliquam. Lorem ipsum dolor sit amet, " + - "consectetur adipiscing elit. Maecenas dolor lacus, " + - "aliquam.Lorem ipsum dolor sit amet, consectetur adipiscing elit.", - IntRange(0, 30), - ), - ), - ) - Spacer(Modifier.size(Spacing.Spacing18)) + ) + } - SubTitle("Legend Range ") - LegendRange( - listOf( - LegendDescriptionData( - SurfaceColor.CustomGreen, - "Low", - IntRange(0, 5), - ), - LegendDescriptionData(SurfaceColor.CustomYellow, "Medium", IntRange(5, 10)), - LegendDescriptionData(SurfaceColor.Warning, "High", IntRange(10, 20)), - LegendDescriptionData(SurfaceColor.CustomPink, "Very high", IntRange(20, 40)), - LegendDescriptionData(SurfaceColor.CustomBrown, "Extreme", IntRange(40, 120)), - LegendDescriptionData( - SurfaceColor.CustomGray, - "Lorem ipsum dolor sit amet, " + - "consectetur adipiscing elit. Fusce convallis", - IntRange(120, 1000), + ColumnComponentContainer("Legend Range ") { + LegendRange( + listOf( + LegendDescriptionData( + SurfaceColor.CustomGreen, + "Low", + IntRange(0, 5), + ), + LegendDescriptionData(SurfaceColor.CustomYellow, "Medium", IntRange(5, 10)), + LegendDescriptionData(SurfaceColor.Warning, "High", IntRange(10, 20)), + LegendDescriptionData(SurfaceColor.CustomPink, "Very high", IntRange(20, 40)), + LegendDescriptionData(SurfaceColor.CustomBrown, "Extreme", IntRange(40, 120)), + LegendDescriptionData( + SurfaceColor.CustomGray, + "Lorem ipsum dolor sit amet, " + + "consectetur adipiscing elit. Fusce convallis", + IntRange(120, 1000), + ), ), - ), - ) + ) + } } } diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/others/MetadataAvatarScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/others/MetadataAvatarScreen.kt index 11132271b..004110d07 100644 --- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/others/MetadataAvatarScreen.kt +++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/others/MetadataAvatarScreen.kt @@ -4,7 +4,7 @@ import androidx.compose.material3.Icon import androidx.compose.runtime.Composable import androidx.compose.ui.graphics.Color import org.hisp.dhis.mobile.ui.designsystem.component.AvatarSize -import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer +import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer import org.hisp.dhis.mobile.ui.designsystem.component.MetadataAvatar import org.hisp.dhis.mobile.ui.designsystem.component.RowComponentContainer import org.hisp.dhis.mobile.ui.designsystem.resource.provideDHIS2Icon @@ -12,7 +12,7 @@ import org.hisp.dhis.mobile.ui.designsystem.theme.SurfaceColor @Composable fun MetadataAvatarScreen() { - ColumnComponentContainer(title = "Metadata Avatar") { + ColumnScreenContainer(title = "Metadata Avatar component") { RowComponentContainer { MetadataAvatar( icon = { diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/others/ProgressScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/others/ProgressScreen.kt index 6a8f637c7..83d4a6351 100644 --- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/others/ProgressScreen.kt +++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/others/ProgressScreen.kt @@ -1,90 +1,101 @@ package org.hisp.dhis.common.screens.others -import androidx.compose.foundation.layout.Spacer -import androidx.compose.foundation.layout.size import androidx.compose.runtime.Composable -import androidx.compose.ui.Modifier import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer +import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer import org.hisp.dhis.mobile.ui.designsystem.component.ProgressIndicator import org.hisp.dhis.mobile.ui.designsystem.component.ProgressIndicatorType import org.hisp.dhis.mobile.ui.designsystem.component.RowComponentContainer -import org.hisp.dhis.mobile.ui.designsystem.component.SubTitle -import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing @Composable internal fun ProgressScreen() { - ColumnComponentContainer(title = "Progress Indicator") { - SubTitle("Linear indicator") - ProgressIndicator( - progress = 0.25f, - type = ProgressIndicatorType.LINEAR, - hasError = false, - ) - ProgressIndicator( - progress = 0.50f, - type = ProgressIndicatorType.LINEAR, - hasError = false, - ) - ProgressIndicator( - progress = 0.75f, - type = ProgressIndicatorType.LINEAR, - hasError = false, - ) - ProgressIndicator( - progress = 0.45f, - type = ProgressIndicatorType.LINEAR, - hasError = false, - ) - ProgressIndicator( - type = ProgressIndicatorType.LINEAR, - hasError = false, - ) - Spacer(Modifier.size(Spacing.Spacing18)) - SubTitle("Linear indicator - Error") - ProgressIndicator( - progress = 0.70f, - type = ProgressIndicatorType.LINEAR, - hasError = true, - ) - ProgressIndicator( - type = ProgressIndicatorType.LINEAR, - hasError = true, - ) - Spacer(Modifier.size(Spacing.Spacing18)) - SubTitle("Circular indicator") - RowComponentContainer { + ColumnScreenContainer(title = "Progress Indicator component") { + ColumnComponentContainer("Linear indicator") { ProgressIndicator( progress = 0.25f, - type = ProgressIndicatorType.CIRCULAR, + type = ProgressIndicatorType.LINEAR, hasError = false, ) ProgressIndicator( progress = 0.50f, - type = ProgressIndicatorType.CIRCULAR, + type = ProgressIndicatorType.LINEAR, hasError = false, ) ProgressIndicator( progress = 0.75f, - type = ProgressIndicatorType.CIRCULAR, + type = ProgressIndicatorType.LINEAR, hasError = false, ) ProgressIndicator( - progress = 1f, - type = ProgressIndicatorType.CIRCULAR, + progress = 0.45f, + type = ProgressIndicatorType.LINEAR, hasError = false, ) ProgressIndicator( - progress = 0.6f, + type = ProgressIndicatorType.LINEAR, + hasError = false, + ) + } + + ColumnComponentContainer("Linear indicator - Error") { + ProgressIndicator( + progress = 0.70f, + type = ProgressIndicatorType.LINEAR, + hasError = true, + ) + ProgressIndicator( + type = ProgressIndicatorType.LINEAR, + hasError = true, + ) + } + + ColumnComponentContainer("Circular indicator") { + RowComponentContainer { + ProgressIndicator( + progress = 0.25f, + type = ProgressIndicatorType.CIRCULAR, + hasError = false, + ) + ProgressIndicator( + progress = 0.50f, + type = ProgressIndicatorType.CIRCULAR, + hasError = false, + ) + ProgressIndicator( + progress = 0.75f, + type = ProgressIndicatorType.CIRCULAR, + hasError = false, + ) + ProgressIndicator( + progress = 1f, + type = ProgressIndicatorType.CIRCULAR, + hasError = false, + ) + ProgressIndicator( + progress = 0.6f, + type = ProgressIndicatorType.CIRCULAR, + hasError = false, + ) + } + ProgressIndicator( type = ProgressIndicatorType.CIRCULAR, hasError = false, ) } - ProgressIndicator( - type = ProgressIndicatorType.CIRCULAR, - hasError = false, - ) - Spacer(Modifier.size(Spacing.Spacing18)) - SubTitle("Circular indicator - Error") + + ColumnComponentContainer("Circular indicator - Error") { + RowComponentContainer { + ProgressIndicator( + progress = 0.70f, + type = ProgressIndicatorType.CIRCULAR, + hasError = true, + ) + ProgressIndicator( + type = ProgressIndicatorType.CIRCULAR, + hasError = true, + ) + } + } RowComponentContainer { ProgressIndicator( progress = 0.70f, diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/others/SearchBarScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/others/SearchBarScreen.kt index 0291692c7..500465bd8 100644 --- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/others/SearchBarScreen.kt +++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/others/SearchBarScreen.kt @@ -6,40 +6,34 @@ import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.saveable.rememberSaveable import androidx.compose.runtime.setValue import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer +import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer import org.hisp.dhis.mobile.ui.designsystem.component.SearchBar -import org.hisp.dhis.mobile.ui.designsystem.component.SubTitle -import org.hisp.dhis.mobile.ui.designsystem.component.Title -import org.hisp.dhis.mobile.ui.designsystem.theme.TextColor @Composable fun SearchBarScreen() { - ColumnComponentContainer { - var text by rememberSaveable { - mutableStateOf("") + ColumnScreenContainer(title = "Search bar component") { + ColumnComponentContainer("Search bar") { + var text by rememberSaveable { + mutableStateOf("") + } + SearchBar( + text = text, + onQueryChange = { + text = it + }, + ) } - var text2 by rememberSaveable { - mutableStateOf("Input") + ColumnComponentContainer("Search bar") { + var text2 by rememberSaveable { + mutableStateOf("Input") + } + SearchBar( + text = text2, + onQueryChange = { + text2 = it + }, + ) } - - Title("Search bar component", textColor = TextColor.OnSurfaceVariant) - SubTitle("Search bar", textColor = TextColor.OnSurfaceVariant) - - SearchBar( - text = text, - onQueryChange = { - text = it - }, - ) - - Title("Search bar component", textColor = TextColor.OnSurfaceVariant) - SubTitle("Search bar", textColor = TextColor.OnSurfaceVariant) - - SearchBar( - text = text2, - onQueryChange = { - text2 = it - }, - ) } } diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/others/SectionScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/others/SectionScreen.kt index b84aca60e..f449cf3b4 100644 --- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/others/SectionScreen.kt +++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/others/SectionScreen.kt @@ -1,32 +1,25 @@ package org.hisp.dhis.common.screens.others -import androidx.compose.foundation.layout.Column -import androidx.compose.foundation.layout.Spacer -import androidx.compose.foundation.layout.size 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.Modifier import androidx.compose.ui.text.input.TextFieldValue import org.hisp.dhis.common.screens.previews.lorem import org.hisp.dhis.common.screens.previews.lorem_medium import org.hisp.dhis.common.screens.previews.lorem_short import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer +import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState import org.hisp.dhis.mobile.ui.designsystem.component.InputText import org.hisp.dhis.mobile.ui.designsystem.component.Section import org.hisp.dhis.mobile.ui.designsystem.component.SectionState -import org.hisp.dhis.mobile.ui.designsystem.component.SubTitle -import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing @Composable fun SectionScreen() { - ColumnComponentContainer(title = "Section Header") { - SubTitle("Collapsible header") - - Column { + ColumnScreenContainer(title = "Section Header component") { + ColumnComponentContainer("Collapsible header") { Section( title = "Section title", description = null, @@ -89,69 +82,68 @@ fun SectionScreen() { ) } - Spacer(Modifier.size(Spacing.Spacing18)) - - SubTitle("Flat header") - Section( - title = "Section title", - description = null, - completedFields = 2, - totalFields = 3, - state = SectionState.FIXED, - errorCount = 0, - warningCount = 0, - content = { TestingFields() }, - onNextSection = { }, - onSectionClick = { }, - ) - Section( - title = "Section title", - description = lorem, - completedFields = 2, - totalFields = 3, - state = SectionState.FIXED, - errorCount = 2, - warningCount = 1, - content = { TestingFields() }, - onNextSection = { }, - onSectionClick = { }, - ) - Section( - title = "Section title", - description = lorem_short, - completedFields = 2, - totalFields = 3, - state = SectionState.FIXED, - errorCount = 0, - warningCount = 0, - content = { TestingFields() }, - onNextSection = { }, - onSectionClick = { }, - ) - Section( - title = "Section title", - description = lorem_medium, - completedFields = 2, - totalFields = 3, - state = SectionState.FIXED, - errorCount = 0, - warningCount = 0, - content = { TestingFields() }, - onNextSection = { }, - onSectionClick = { }, - ) - Section( - title = "Section title Section title Section title Section title Section title", - description = lorem_medium, - completedFields = 2, - totalFields = 3, - state = SectionState.FIXED, - errorCount = 0, - warningCount = 0, - content = { TestingFields() }, - onNextSection = { }, - onSectionClick = { }, - ) + ColumnComponentContainer("Flat header") { + Section( + title = "Section title", + description = null, + completedFields = 2, + totalFields = 3, + state = SectionState.FIXED, + errorCount = 0, + warningCount = 0, + content = { TestingFields() }, + onNextSection = { }, + onSectionClick = { }, + ) + Section( + title = "Section title", + description = lorem, + completedFields = 2, + totalFields = 3, + state = SectionState.FIXED, + errorCount = 2, + warningCount = 1, + content = { TestingFields() }, + onNextSection = { }, + onSectionClick = { }, + ) + Section( + title = "Section title", + description = lorem_short, + completedFields = 2, + totalFields = 3, + state = SectionState.FIXED, + errorCount = 0, + warningCount = 0, + content = { TestingFields() }, + onNextSection = { }, + onSectionClick = { }, + ) + Section( + title = "Section title", + description = lorem_medium, + completedFields = 2, + totalFields = 3, + state = SectionState.FIXED, + errorCount = 0, + warningCount = 0, + content = { TestingFields() }, + onNextSection = { }, + onSectionClick = { }, + ) + Section( + title = "Section title Section title Section title Section title Section title", + description = lorem_medium, + completedFields = 2, + totalFields = 3, + state = SectionState.FIXED, + errorCount = 0, + warningCount = 0, + content = { TestingFields() }, + onNextSection = { }, + onSectionClick = { }, + ) + } } } diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/others/TagsScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/others/TagsScreen.kt index 873c9a3c8..df77b9bd9 100644 --- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/others/TagsScreen.kt +++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/others/TagsScreen.kt @@ -2,11 +2,11 @@ package org.hisp.dhis.common.screens.others import androidx.compose.runtime.Composable import org.hisp.dhis.common.screens.previews.TagsPreview -import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer +import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer @Composable fun TagsScreen() { - ColumnComponentContainer(title = "Tags") { + ColumnScreenContainer(title = "Tag component") { TagsPreview() } } diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/parameter/ParameterSelectorScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/parameter/ParameterSelectorScreen.kt index 49cd14910..765563424 100644 --- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/parameter/ParameterSelectorScreen.kt +++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/parameter/ParameterSelectorScreen.kt @@ -1,8 +1,5 @@ package org.hisp.dhis.common.screens.parameter -import androidx.compose.foundation.layout.Column -import androidx.compose.foundation.rememberScrollState -import androidx.compose.foundation.verticalScroll import androidx.compose.material.icons.Icons import androidx.compose.material.icons.outlined.QrCode2 import androidx.compose.material3.Icon @@ -12,11 +9,11 @@ import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.runtime.saveable.rememberSaveable import androidx.compose.runtime.setValue -import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.text.input.TextFieldValue import org.hisp.dhis.mobile.ui.designsystem.component.AgeInputType import org.hisp.dhis.mobile.ui.designsystem.component.CheckBoxData +import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer import org.hisp.dhis.mobile.ui.designsystem.component.DropdownItem import org.hisp.dhis.mobile.ui.designsystem.component.InputAge import org.hisp.dhis.mobile.ui.designsystem.component.InputAgeModel @@ -142,7 +139,6 @@ fun ParameterSelectorScreen() { ageInputType = it }, ), - ) }, status = when (ageInputType) { @@ -212,7 +208,6 @@ fun ParameterSelectorScreen() { onValueChanged = {}, format = "ddMMYYYY", ), - ) }, onExpand = {}, @@ -383,10 +378,7 @@ fun ParameterSelectorScreen() { ), ) - Column( - modifier = Modifier - .verticalScroll(rememberScrollState()), - ) { + ColumnScreenContainer(title = "Parameter Selector component") { items.forEach { ParameterSelectorItem( model = it, diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/toggleableInputs/InputCheckBoxScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/toggleableInputs/InputCheckBoxScreen.kt index b0deeca68..a5ef55068 100644 --- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/toggleableInputs/InputCheckBoxScreen.kt +++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/toggleableInputs/InputCheckBoxScreen.kt @@ -1,18 +1,14 @@ package org.hisp.dhis.common.screens.toggleableInputs -import androidx.compose.foundation.layout.Spacer -import androidx.compose.foundation.layout.size import androidx.compose.runtime.Composable import androidx.compose.runtime.mutableStateListOf import androidx.compose.runtime.remember -import androidx.compose.ui.Modifier import org.hisp.dhis.mobile.ui.designsystem.component.CheckBoxData import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer +import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer import org.hisp.dhis.mobile.ui.designsystem.component.InputCheckBox import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState import org.hisp.dhis.mobile.ui.designsystem.component.Orientation -import org.hisp.dhis.mobile.ui.designsystem.component.SubTitle -import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing @Composable fun InputCheckBoxScreen() { @@ -58,49 +54,52 @@ fun InputCheckBoxScreen() { ) } - ColumnComponentContainer("Checkboxes") { - SubTitle("Vertical") - InputCheckBox( - title = "Label", - checkBoxData = checkBoxDataItemsVertical, - onItemChange = { checkBoxData -> - val index = checkBoxDataItemsVertical.withIndex().first { it.value.uid == checkBoxData.uid }.index - checkBoxDataItemsVertical[index] = checkBoxData.copy(checked = !checkBoxData.checked) - }, - onClearSelection = { checkBoxDataItemsVertical.replaceAll { it.copy(checked = false) } }, - state = InputShellState.UNFOCUSED, - ) - Spacer(Modifier.size(Spacing.Spacing18)) - InputCheckBox( - title = "Label", - checkBoxData = checkBoxDataItemsError, - state = InputShellState.ERROR, - onItemChange = { checkBoxData -> - val index = checkBoxDataItemsError.withIndex().first { it.value.uid == checkBoxData.uid }.index - checkBoxDataItemsError[index] = checkBoxData.copy(checked = !checkBoxData.checked) - }, - onClearSelection = { checkBoxDataItemsError.replaceAll { it.copy(checked = false) } }, - ) - Spacer(Modifier.size(Spacing.Spacing18)) - InputCheckBox( - title = "Label", - checkBoxData = checkBoxDataItemsDisabled, - state = InputShellState.DISABLED, - onItemChange = { }, - onClearSelection = { }, - ) - Spacer(Modifier.size(Spacing.Spacing18)) - SubTitle("Horizontal") - InputCheckBox( - title = "Label", - checkBoxData = checkBoxDataItemsHorizontal, - orientation = Orientation.HORIZONTAL, - onItemChange = { checkBoxData -> - val index = checkBoxDataItemsHorizontal.withIndex().first { it.value.uid == checkBoxData.uid }.index - checkBoxDataItemsHorizontal[index] = checkBoxData.copy(checked = !checkBoxData.checked) - }, - onClearSelection = { checkBoxDataItemsHorizontal.replaceAll { it.copy(checked = false) } }, - state = InputShellState.UNFOCUSED, - ) + ColumnScreenContainer(ToggleableInputs.INPUT_CHECK_BOX.label) { + ColumnComponentContainer("Basic state with vertical orientation") { + InputCheckBox( + title = "Label", + checkBoxData = checkBoxDataItemsVertical, + onItemChange = { checkBoxData -> + val index = checkBoxDataItemsVertical.withIndex().first { it.value.uid == checkBoxData.uid }.index + checkBoxDataItemsVertical[index] = checkBoxData.copy(checked = !checkBoxData.checked) + }, + onClearSelection = { checkBoxDataItemsVertical.replaceAll { it.copy(checked = false) } }, + state = InputShellState.UNFOCUSED, + ) + } + ColumnComponentContainer("Error state with vertical orientation") { + InputCheckBox( + title = "Label", + checkBoxData = checkBoxDataItemsError, + state = InputShellState.ERROR, + onItemChange = { checkBoxData -> + val index = checkBoxDataItemsError.withIndex().first { it.value.uid == checkBoxData.uid }.index + checkBoxDataItemsError[index] = checkBoxData.copy(checked = !checkBoxData.checked) + }, + onClearSelection = { checkBoxDataItemsError.replaceAll { it.copy(checked = false) } }, + ) + } + ColumnComponentContainer("Disabled state with vertical orientation") { + InputCheckBox( + title = "Label", + checkBoxData = checkBoxDataItemsDisabled, + state = InputShellState.DISABLED, + onItemChange = { }, + onClearSelection = { }, + ) + } + ColumnComponentContainer("Basic state with horizontal orientation") { + InputCheckBox( + title = "Label", + checkBoxData = checkBoxDataItemsHorizontal, + orientation = Orientation.HORIZONTAL, + onItemChange = { checkBoxData -> + val index = checkBoxDataItemsHorizontal.withIndex().first { it.value.uid == checkBoxData.uid }.index + checkBoxDataItemsHorizontal[index] = checkBoxData.copy(checked = !checkBoxData.checked) + }, + onClearSelection = { checkBoxDataItemsHorizontal.replaceAll { it.copy(checked = false) } }, + state = InputShellState.UNFOCUSED, + ) + } } } diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/toggleableInputs/InputDropDownScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/toggleableInputs/InputDropDownScreen.kt index ccec61683..099ccfa21 100644 --- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/toggleableInputs/InputDropDownScreen.kt +++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/toggleableInputs/InputDropDownScreen.kt @@ -1,27 +1,21 @@ package org.hisp.dhis.common.screens.toggleableInputs -import androidx.compose.foundation.layout.Spacer -import androidx.compose.foundation.layout.size import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.runtime.setValue -import androidx.compose.ui.Modifier import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer +import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer import org.hisp.dhis.mobile.ui.designsystem.component.DropdownItem import org.hisp.dhis.mobile.ui.designsystem.component.InputDropDown import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState import org.hisp.dhis.mobile.ui.designsystem.component.InputStyle -import org.hisp.dhis.mobile.ui.designsystem.component.SubTitle import org.hisp.dhis.mobile.ui.designsystem.component.SupportingTextData -import org.hisp.dhis.mobile.ui.designsystem.component.Title -import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing -import org.hisp.dhis.mobile.ui.designsystem.theme.TextColor @Composable fun InputDropDownScreen() { - ColumnComponentContainer { + ColumnScreenContainer(title = ToggleableInputs.INPUT_DROPDOWN.label) { val options = listOf( DropdownItem("Option 1"), DropdownItem("Option 2"), @@ -34,138 +28,135 @@ fun InputDropDownScreen() { DropdownItem("Option 9"), DropdownItem("Option 10"), ) - Title("Input Dropdown", textColor = TextColor.OnSurfaceVariant) - - SubTitle("Basic Input Dropdown with < 7 inputs", textColor = TextColor.OnSurfaceVariant) var selectedItem by remember { mutableStateOf(null) } - InputDropDown( - title = "Label", - state = InputShellState.UNFOCUSED, - dropdownItems = options.take(6), - onResetButtonClicked = { - selectedItem = null - }, - onItemSelected = { - selectedItem = it - }, - selectedItem = selectedItem, - ) - InputDropDown( - title = "Label - With supporting text", - state = InputShellState.UNFOCUSED, - dropdownItems = options.take(6), - onResetButtonClicked = { - selectedItem = null - }, - onItemSelected = { - selectedItem = it - }, - selectedItem = selectedItem, - supportingTextData = listOf( - SupportingTextData(text = "Options"), - ), - ) + ColumnComponentContainer("Basic Input Dropdown with < 7 inputs") { + InputDropDown( + title = "Label", + state = InputShellState.UNFOCUSED, + dropdownItems = options.take(6), + onResetButtonClicked = { + selectedItem = null + }, + onItemSelected = { + selectedItem = it + }, + selectedItem = selectedItem, + ) - InputDropDown( - title = "Label - Parameter Style", - inputStyle = InputStyle.ParameterInputStyle(), - state = InputShellState.UNFOCUSED, - dropdownItems = options.take(6), - onResetButtonClicked = { - selectedItem = null - }, - onItemSelected = { - selectedItem = it - }, - selectedItem = selectedItem, - ) + InputDropDown( + title = "Label - With supporting text", + state = InputShellState.UNFOCUSED, + dropdownItems = options.take(6), + onResetButtonClicked = { + selectedItem = null + }, + onItemSelected = { + selectedItem = it + }, + selectedItem = selectedItem, + supportingTextData = listOf( + SupportingTextData(text = "Options"), + ), + ) - Spacer(Modifier.size(Spacing.Spacing18)) + InputDropDown( + title = "Label - Parameter Style", + inputStyle = InputStyle.ParameterInputStyle(), + state = InputShellState.UNFOCUSED, + dropdownItems = options.take(6), + onResetButtonClicked = { + selectedItem = null + }, + onItemSelected = { + selectedItem = it + }, + selectedItem = selectedItem, + ) + } - SubTitle("Basic Input Dropdown with >= 7 inputs", textColor = TextColor.OnSurfaceVariant) - var selectedItem4 by remember { mutableStateOf(null) } - InputDropDown( - title = "Label", - state = InputShellState.UNFOCUSED, - dropdownItems = options, - onResetButtonClicked = { - selectedItem4 = null - }, - onItemSelected = { - selectedItem4 = it - }, - selectedItem = selectedItem4, - ) + ColumnComponentContainer("Basic Input Dropdown with >= 7 inputs") { + var selectedItem4 by remember { mutableStateOf(null) } + InputDropDown( + title = "Label", + state = InputShellState.UNFOCUSED, + dropdownItems = options, + onResetButtonClicked = { + selectedItem4 = null + }, + onItemSelected = { + selectedItem4 = it + }, + selectedItem = selectedItem4, + ) + } - Spacer(Modifier.size(Spacing.Spacing18)) + ColumnComponentContainer("Basic Input Dropdown with content ") { + var selectedItem1 by remember { mutableStateOf(options[0]) } + InputDropDown( + title = "Label", + state = InputShellState.UNFOCUSED, + dropdownItems = options, + onResetButtonClicked = { + selectedItem1 = null + }, + onItemSelected = { + selectedItem1 = it + }, + selectedItem = selectedItem1, + ) + } - SubTitle("Basic Input Dropdown with content ", textColor = TextColor.OnSurfaceVariant) - var selectedItem1 by remember { mutableStateOf(options[0]) } - InputDropDown( - title = "Label", - state = InputShellState.UNFOCUSED, - dropdownItems = options, - onResetButtonClicked = { - selectedItem1 = null - }, - onItemSelected = { - selectedItem1 = it - }, - selectedItem = selectedItem1, - ) - Spacer(Modifier.size(Spacing.Spacing18)) + ColumnComponentContainer("Error Input Dropdown ") { + var selectedItem2 by remember { mutableStateOf(null) } + InputDropDown( + title = "Label", + state = InputShellState.ERROR, + dropdownItems = options, + onResetButtonClicked = { + selectedItem2 = null + }, + onItemSelected = { + selectedItem2 = it + }, + selectedItem = selectedItem2, + ) + } - SubTitle("Error Input Dropdown ", textColor = TextColor.OnSurfaceVariant) - var selectedItem2 by remember { mutableStateOf(null) } - InputDropDown( - title = "Label", - state = InputShellState.ERROR, - dropdownItems = options, - onResetButtonClicked = { - selectedItem2 = null - }, - onItemSelected = { - selectedItem2 = it - }, - selectedItem = selectedItem2, - ) - Spacer(Modifier.size(Spacing.Spacing18)) + ColumnComponentContainer("Disabled Input Dropdown with content ") { + var selectedItem3 by remember { mutableStateOf(options[1]) } + InputDropDown( + title = "Label", + state = InputShellState.DISABLED, + dropdownItems = options, + onResetButtonClicked = { + selectedItem3 = null + }, + onItemSelected = { + selectedItem3 = it + }, + selectedItem = selectedItem3, + ) + } - SubTitle("Disabled Input Dropdown with content ", textColor = TextColor.OnSurfaceVariant) - var selectedItem3 by remember { mutableStateOf(options[1]) } - InputDropDown( - title = "Label", - state = InputShellState.DISABLED, - dropdownItems = options, - onResetButtonClicked = { - selectedItem3 = null - }, - onItemSelected = { - selectedItem3 = it - }, - selectedItem = selectedItem3, - ) - Spacer(Modifier.size(Spacing.Spacing18)) + ColumnComponentContainer("Input Dropdown with 5000 items ") { + val dropdownItems = mutableListOf() + for (i in 1..5000) { + dropdownItems.add(DropdownItem("$i")) + } - SubTitle("Input Dropdown with 5000 items ", textColor = TextColor.OnSurfaceVariant) - val dropdownItems = mutableListOf() - for (i in 1..5000) { - dropdownItems.add(DropdownItem("$i")) + InputDropDown( + title = "Label", + state = InputShellState.UNFOCUSED, + dropdownItems = dropdownItems, + onResetButtonClicked = { + selectedItem = null + }, + onItemSelected = { + selectedItem = it + }, + selectedItem = selectedItem, + ) } - - InputDropDown( - title = "Label", - state = InputShellState.UNFOCUSED, - dropdownItems = dropdownItems, - onResetButtonClicked = { - selectedItem = null - }, - onItemSelected = { - selectedItem = it - }, - selectedItem = selectedItem, - ) - Spacer(Modifier.size(Spacing.Spacing18)) } } diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/toggleableInputs/InputMatrixScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/toggleableInputs/InputMatrixScreen.kt index e585dbb82..d40acb53f 100644 --- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/toggleableInputs/InputMatrixScreen.kt +++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/toggleableInputs/InputMatrixScreen.kt @@ -11,6 +11,7 @@ import androidx.compose.ui.graphics.ImageBitmap import androidx.compose.ui.graphics.painter.BitmapPainter import androidx.compose.ui.graphics.painter.Painter import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer +import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer import org.hisp.dhis.mobile.ui.designsystem.component.InputMatrix import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState import org.hisp.dhis.mobile.ui.designsystem.component.internal.ImageCardData @@ -70,33 +71,36 @@ fun InputMatrixScreen(imageBitmapLoader: (() -> ImageBitmap)?) { val sampleImage = provideSampleImages( inputCardData.filterIsInstance().map { it }, ) - ColumnComponentContainer(title = "Input Matrix") { - InputMatrix( - title = "Label", - data = inputCardData.filterNotNull(), - selectedData = matrixSelectedItem, - onSelectionChanged = { newSelectedItem -> - matrixSelectedItem = if (matrixSelectedItem == newSelectedItem) { - null - } else { - newSelectedItem - } - }, - state = InputShellState.UNFOCUSED, - painterFor = sampleImage, - ) - - InputMatrix( - title = "Label", - data = inputCardData.filterNotNull(), - selectedData = matrixSelectedItem, - state = InputShellState.DISABLED, - itemCount = 3, - onSelectionChanged = { - // no-op - }, - painterFor = sampleImage, - ) + ColumnScreenContainer(title = ToggleableInputs.INPUT_MATRIX.label) { + ColumnComponentContainer("Basic state") { + InputMatrix( + title = "Label", + data = inputCardData.filterNotNull(), + selectedData = matrixSelectedItem, + onSelectionChanged = { newSelectedItem -> + matrixSelectedItem = if (matrixSelectedItem == newSelectedItem) { + null + } else { + newSelectedItem + } + }, + state = InputShellState.UNFOCUSED, + painterFor = sampleImage, + ) + } + ColumnComponentContainer("Disabled state") { + InputMatrix( + title = "Label", + data = inputCardData.filterNotNull(), + selectedData = matrixSelectedItem, + state = InputShellState.DISABLED, + itemCount = 3, + onSelectionChanged = { + // no-op + }, + painterFor = sampleImage, + ) + } } } diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/toggleableInputs/InputRadioButtonScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/toggleableInputs/InputRadioButtonScreen.kt index 9e0fe9150..b9a6c038d 100644 --- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/toggleableInputs/InputRadioButtonScreen.kt +++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/toggleableInputs/InputRadioButtonScreen.kt @@ -1,24 +1,20 @@ package org.hisp.dhis.common.screens.toggleableInputs -import androidx.compose.foundation.layout.Spacer -import androidx.compose.foundation.layout.size import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.runtime.setValue -import androidx.compose.ui.Modifier import org.hisp.dhis.common.screens.previews.lorem import org.hisp.dhis.mobile.ui.designsystem.component.Button import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer +import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer import org.hisp.dhis.mobile.ui.designsystem.component.InputRadioButton import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState import org.hisp.dhis.mobile.ui.designsystem.component.Orientation import org.hisp.dhis.mobile.ui.designsystem.component.RadioButtonData -import org.hisp.dhis.mobile.ui.designsystem.component.SubTitle import org.hisp.dhis.mobile.ui.designsystem.component.SupportingTextData import org.hisp.dhis.mobile.ui.designsystem.component.SupportingTextState -import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing @Composable fun InputRadioButtonScreen() { @@ -72,59 +68,62 @@ fun InputRadioButtonScreen() { mutableStateOf(radioButtonDataItemsHorizontal[0]) } var showSupportingText by remember { mutableStateOf(false) } - ColumnComponentContainer("Radio Buttons") { + ColumnScreenContainer(ToggleableInputs.INPUT_RADIO_BUTTON.label) { Button(text = "Click to show/Hide supporting text") { showSupportingText = !showSupportingText } - SubTitle("Vertical") - InputRadioButton( - title = "Label", - radioButtonData = radioButtonDataItemsVertical, - itemSelected = selectedItemVertical, - onItemChange = { - selectedItemVertical = it - }, - state = InputShellState.UNFOCUSED, - supportingText = if (showSupportingText) { - listOf( - SupportingTextData("Required", state = SupportingTextState.ERROR), - SupportingTextData(lorem + lorem + lorem, state = SupportingTextState.WARNING), - ) - } else { - emptyList() - }, - ) - Spacer(Modifier.size(Spacing.Spacing18)) - InputRadioButton( - title = "Label", - radioButtonData = radioButtonDataItemsError, - state = InputShellState.ERROR, - itemSelected = selectedItemError, - onItemChange = { - selectedItemError = it - }, - ) - Spacer(Modifier.size(Spacing.Spacing18)) - InputRadioButton( - title = "Label", - radioButtonData = radioButtonDataItemsDisabled, - state = InputShellState.DISABLED, - onItemChange = { - selectedItemDisabled = it - }, - ) - Spacer(Modifier.size(Spacing.Spacing18)) - SubTitle("Horizontal") - InputRadioButton( - title = "Label", - radioButtonData = radioButtonDataItemsHorizontal, - orientation = Orientation.HORIZONTAL, - itemSelected = selectedItemHorizontal, - onItemChange = { - selectedItemHorizontal = it - }, - state = InputShellState.UNFOCUSED, - ) + ColumnComponentContainer("Basic state with vertical orientation") { + InputRadioButton( + title = "Label", + radioButtonData = radioButtonDataItemsVertical, + itemSelected = selectedItemVertical, + onItemChange = { + selectedItemVertical = it + }, + state = InputShellState.UNFOCUSED, + supportingText = if (showSupportingText) { + listOf( + SupportingTextData("Required", state = SupportingTextState.ERROR), + SupportingTextData(lorem + lorem + lorem, state = SupportingTextState.WARNING), + ) + } else { + emptyList() + }, + ) + } + ColumnComponentContainer("Error state with vertical orientation") { + InputRadioButton( + title = "Label", + radioButtonData = radioButtonDataItemsError, + state = InputShellState.ERROR, + itemSelected = selectedItemError, + onItemChange = { + selectedItemError = it + }, + ) + } + ColumnComponentContainer("Disabled state with vertical orientation") { + InputRadioButton( + title = "Label", + radioButtonData = radioButtonDataItemsDisabled, + state = InputShellState.DISABLED, + onItemChange = { + selectedItemDisabled = it + }, + ) + } + ColumnComponentContainer("Basic state with horizontal orientation") { + InputRadioButton( + title = "Label", + radioButtonData = radioButtonDataItemsHorizontal, + orientation = Orientation.HORIZONTAL, + itemSelected = selectedItemHorizontal, + onItemChange = { + selectedItemHorizontal = it + }, + state = InputShellState.UNFOCUSED, + ) + } } } diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/toggleableInputs/InputSequentialScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/toggleableInputs/InputSequentialScreen.kt index d0352f92d..eebd8858b 100644 --- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/toggleableInputs/InputSequentialScreen.kt +++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/toggleableInputs/InputSequentialScreen.kt @@ -11,6 +11,7 @@ import androidx.compose.ui.graphics.ImageBitmap import androidx.compose.ui.graphics.painter.BitmapPainter import androidx.compose.ui.graphics.painter.Painter import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer +import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer import org.hisp.dhis.mobile.ui.designsystem.component.InputSequential import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState import org.hisp.dhis.mobile.ui.designsystem.component.internal.ImageCardData @@ -72,32 +73,36 @@ fun InputSequentialScreen(imageBitmapLoader: (() -> ImageBitmap)?) { inputCardData.filterIsInstance().map { it }, ) - ColumnComponentContainer(title = "Input Sequential") { - InputSequential( - title = "Label", - data = inputCardData.filterNotNull(), - selectedData = sequentialSelectedItem, - onSelectionChanged = { newSelectedItem -> - sequentialSelectedItem = if (sequentialSelectedItem == newSelectedItem) { - null - } else { - newSelectedItem - } - }, - state = InputShellState.UNFOCUSED, - painterFor = painterFor, - ) + ColumnScreenContainer(title = ToggleableInputs.INPUT_SEQUENTIAL.label) { + ColumnComponentContainer("Basic state") { + InputSequential( + title = "Label", + data = inputCardData.filterNotNull(), + selectedData = sequentialSelectedItem, + onSelectionChanged = { newSelectedItem -> + sequentialSelectedItem = if (sequentialSelectedItem == newSelectedItem) { + null + } else { + newSelectedItem + } + }, + state = InputShellState.UNFOCUSED, + painterFor = painterFor, + ) + } - InputSequential( - title = "Label", - data = inputCardData.filterNotNull(), - selectedData = sequentialSelectedItem, - state = InputShellState.DISABLED, - onSelectionChanged = { - // no-op - }, - painterFor = painterFor, - ) + ColumnComponentContainer("Disabled state") { + InputSequential( + title = "Label", + data = inputCardData.filterNotNull(), + selectedData = sequentialSelectedItem, + state = InputShellState.DISABLED, + onSelectionChanged = { + // no-op + }, + painterFor = painterFor, + ) + } } } diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/toggleableInputs/InputYesNoFieldScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/toggleableInputs/InputYesNoFieldScreen.kt index dbe9f69fe..7c539c97e 100644 --- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/toggleableInputs/InputYesNoFieldScreen.kt +++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/toggleableInputs/InputYesNoFieldScreen.kt @@ -1,20 +1,17 @@ package org.hisp.dhis.common.screens.toggleableInputs -import androidx.compose.foundation.layout.Spacer -import androidx.compose.foundation.layout.size import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.runtime.setValue -import androidx.compose.ui.Modifier import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer +import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState import org.hisp.dhis.mobile.ui.designsystem.component.InputYesNoField import org.hisp.dhis.mobile.ui.designsystem.component.InputYesNoFieldValues import org.hisp.dhis.mobile.ui.designsystem.component.SupportingTextData import org.hisp.dhis.mobile.ui.designsystem.component.SupportingTextState -import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing @Composable fun InputYesNoFieldScreen() { @@ -30,40 +27,47 @@ fun InputYesNoFieldScreen() { mutableStateOf(null) } - ColumnComponentContainer("Yes/No Field") { - InputYesNoField( - title = "Label", - itemSelected = selectedItem, - onItemChange = { - selectedItem = it - }, - state = InputShellState.UNFOCUSED, - ) - Spacer(Modifier.size(Spacing.Spacing18)) - InputYesNoField( - title = "Label", - itemSelected = selectedItem1, - onItemChange = { - selectedItem1 = it - }, - state = InputShellState.UNFOCUSED, - ) - Spacer(Modifier.size(Spacing.Spacing18)) - InputYesNoField( - title = "Label", - state = InputShellState.ERROR, - supportingText = listOf(SupportingTextData("Error text", SupportingTextState.ERROR)), - itemSelected = selectedItemError, - onItemChange = { - selectedItemError = it - }, - ) - Spacer(Modifier.size(Spacing.Spacing18)) - InputYesNoField( - title = "Label", - state = InputShellState.DISABLED, - onItemChange = { - }, - ) + ColumnScreenContainer(ToggleableInputs.INPUT_YES_NO_FIELD.label) { + ColumnComponentContainer("Basic state") { + InputYesNoField( + title = "Label", + itemSelected = selectedItem, + onItemChange = { + selectedItem = it + }, + state = InputShellState.UNFOCUSED, + ) + } + ColumnComponentContainer("Selected state") { + InputYesNoField( + title = "Label", + itemSelected = selectedItem1, + onItemChange = { + selectedItem1 = it + }, + state = InputShellState.UNFOCUSED, + ) + } + + ColumnComponentContainer("Error state") { + InputYesNoField( + title = "Label", + state = InputShellState.ERROR, + supportingText = listOf(SupportingTextData("Error text", SupportingTextState.ERROR)), + itemSelected = selectedItemError, + onItemChange = { + selectedItemError = it + }, + ) + } + + ColumnComponentContainer("Disabled state") { + InputYesNoField( + title = "Label", + state = InputShellState.DISABLED, + onItemChange = { + }, + ) + } } } diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/toggleableInputs/InputYesOnlyCheckBoxScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/toggleableInputs/InputYesOnlyCheckBoxScreen.kt index 4de1cc80d..f4fd5951c 100644 --- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/toggleableInputs/InputYesOnlyCheckBoxScreen.kt +++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/toggleableInputs/InputYesOnlyCheckBoxScreen.kt @@ -1,24 +1,21 @@ package org.hisp.dhis.common.screens.toggleableInputs -import androidx.compose.foundation.layout.Spacer -import androidx.compose.foundation.layout.size import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.runtime.setValue -import androidx.compose.ui.Modifier import org.hisp.dhis.mobile.ui.designsystem.component.CheckBoxData import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer +import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState import org.hisp.dhis.mobile.ui.designsystem.component.InputYesOnlyCheckBox import org.hisp.dhis.mobile.ui.designsystem.component.SupportingTextData import org.hisp.dhis.mobile.ui.designsystem.component.SupportingTextState -import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing @Composable fun InputYesOnlyCheckBoxScreen() { - ColumnComponentContainer { + ColumnScreenContainer(title = ToggleableInputs.INPUT_YES_ONLY_CHECKBOX.label) { var checkboxData by remember { mutableStateOf(CheckBoxData(uid = "0", checked = false, enabled = true, textInput = "Label")) } @@ -34,38 +31,48 @@ fun InputYesOnlyCheckBoxScreen() { val checkboxData4 by remember { mutableStateOf(CheckBoxData(uid = "0", checked = true, enabled = true, textInput = "Label")) } - InputYesOnlyCheckBox( - checkBoxData = checkboxData, - state = InputShellState.UNFOCUSED, - ) { - checkboxData = checkboxData.copy(checked = !checkboxData.checked) + ColumnComponentContainer("Basic state") { + InputYesOnlyCheckBox( + checkBoxData = checkboxData, + state = InputShellState.UNFOCUSED, + ) { + checkboxData = checkboxData.copy(checked = !checkboxData.checked) + } } - Spacer(Modifier.size(Spacing.Spacing18)) - InputYesOnlyCheckBox( - checkBoxData = checkboxData1, - state = InputShellState.UNFOCUSED, - ) { - checkboxData1 = checkboxData1.copy(checked = !checkboxData.checked) + + ColumnComponentContainer("Selected state") { + InputYesOnlyCheckBox( + checkBoxData = checkboxData1, + state = InputShellState.UNFOCUSED, + ) { + checkboxData1 = checkboxData1.copy(checked = !checkboxData.checked) + } } - Spacer(Modifier.size(Spacing.Spacing18)) - InputYesOnlyCheckBox( - checkBoxData = checkboxData2, - state = InputShellState.ERROR, - supportingText = listOf(SupportingTextData("Error text", SupportingTextState.ERROR)), - ) { - checkboxData2 = checkboxData2.copy(checked = !checkboxData.checked) + + ColumnComponentContainer("Error state") { + InputYesOnlyCheckBox( + checkBoxData = checkboxData2, + state = InputShellState.ERROR, + supportingText = listOf(SupportingTextData("Error text", SupportingTextState.ERROR)), + ) { + checkboxData2 = checkboxData2.copy(checked = !checkboxData.checked) + } } - Spacer(Modifier.size(Spacing.Spacing18)) - InputYesOnlyCheckBox( - checkBoxData = checkboxData3, - state = InputShellState.DISABLED, - ) { + + ColumnComponentContainer("Disabled selected state") { + InputYesOnlyCheckBox( + checkBoxData = checkboxData3, + state = InputShellState.DISABLED, + ) { + } } - Spacer(Modifier.size(Spacing.Spacing18)) - InputYesOnlyCheckBox( - checkBoxData = checkboxData4, - state = InputShellState.DISABLED, - ) { + + ColumnComponentContainer("Disabled state") { + InputYesOnlyCheckBox( + checkBoxData = checkboxData4, + state = InputShellState.DISABLED, + ) { + } } } } diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/toggleableInputs/InputYesOnlySwitchScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/toggleableInputs/InputYesOnlySwitchScreen.kt index c713d0c30..18ddac3b9 100644 --- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/toggleableInputs/InputYesOnlySwitchScreen.kt +++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/toggleableInputs/InputYesOnlySwitchScreen.kt @@ -1,67 +1,74 @@ package org.hisp.dhis.common.screens.toggleableInputs -import androidx.compose.foundation.layout.Spacer -import androidx.compose.foundation.layout.size 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.Modifier import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer +import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState import org.hisp.dhis.mobile.ui.designsystem.component.InputYesOnlySwitch import org.hisp.dhis.mobile.ui.designsystem.component.SupportingTextData import org.hisp.dhis.mobile.ui.designsystem.component.SupportingTextState -import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing @Composable fun InputYesOnlySwitchScreen() { - ColumnComponentContainer { + ColumnScreenContainer(title = ToggleableInputs.INPUT_YES_ONLY_SWITCH.label) { var isSelected by rememberSaveable { mutableStateOf(false) } var isSelected1 by rememberSaveable { mutableStateOf(true) } var isSelected2 by rememberSaveable { mutableStateOf(false) } var isSelected3 by rememberSaveable { mutableStateOf(true) } var isSelected4 by rememberSaveable { mutableStateOf(false) } - InputYesOnlySwitch( - title = "Label", - isChecked = isSelected, - state = InputShellState.UNFOCUSED, - ) { - isSelected = !isSelected + ColumnComponentContainer("Basic state") { + InputYesOnlySwitch( + title = "Label", + isChecked = isSelected, + state = InputShellState.UNFOCUSED, + ) { + isSelected = !isSelected + } } - Spacer(Modifier.size(Spacing.Spacing18)) - InputYesOnlySwitch( - title = "Label", - isChecked = isSelected1, - state = InputShellState.UNFOCUSED, - ) { - isSelected1 = !isSelected1 + + ColumnComponentContainer("Selected state") { + InputYesOnlySwitch( + title = "Label", + isChecked = isSelected1, + state = InputShellState.UNFOCUSED, + ) { + isSelected1 = !isSelected1 + } } - Spacer(Modifier.size(Spacing.Spacing18)) - InputYesOnlySwitch( - title = "Label", - isChecked = isSelected2, - state = InputShellState.ERROR, - supportingText = listOf(SupportingTextData("Error text", SupportingTextState.ERROR)), - ) { - isSelected2 = !isSelected2 + + ColumnComponentContainer("Error state") { + InputYesOnlySwitch( + title = "Label", + isChecked = isSelected2, + state = InputShellState.ERROR, + supportingText = listOf(SupportingTextData("Error text", SupportingTextState.ERROR)), + ) { + isSelected2 = !isSelected2 + } } - Spacer(Modifier.size(Spacing.Spacing18)) - InputYesOnlySwitch( - title = "Label", - isChecked = isSelected3, - state = InputShellState.DISABLED, - ) { - isSelected3 = !isSelected3 + + ColumnComponentContainer("Disabled selected state") { + InputYesOnlySwitch( + title = "Label", + isChecked = isSelected3, + state = InputShellState.DISABLED, + ) { + isSelected3 = !isSelected3 + } } - Spacer(Modifier.size(Spacing.Spacing18)) - InputYesOnlySwitch( - title = "Label", - isChecked = isSelected4, - state = InputShellState.DISABLED, - ) { - isSelected4 = !isSelected4 + + ColumnComponentContainer("Disabled state") { + InputYesOnlySwitch( + title = "Label", + isChecked = isSelected4, + state = InputShellState.DISABLED, + ) { + isSelected4 = !isSelected4 + } } } } diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/toggleableInputs/MultiSelectInputScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/toggleableInputs/MultiSelectInputScreen.kt index c00ae4cdf..84e71258e 100644 --- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/toggleableInputs/MultiSelectInputScreen.kt +++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/toggleableInputs/MultiSelectInputScreen.kt @@ -4,12 +4,13 @@ import androidx.compose.runtime.Composable import androidx.compose.runtime.mutableStateListOf import org.hisp.dhis.mobile.ui.designsystem.component.CheckBoxData import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer +import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer import org.hisp.dhis.mobile.ui.designsystem.component.InputMultiSelection import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState @Composable fun MultiSelectInputScreen() { - ColumnComponentContainer { + ColumnScreenContainer(title = ToggleableInputs.MULTI_SELECT.label) { val multiSelect1Items = mutableStateListOf( CheckBoxData( uid = "uid-1", @@ -82,139 +83,152 @@ fun MultiSelectInputScreen() { ), ) - InputMultiSelection( - items = emptyList(), - title = "Multi Select Empty", - state = InputShellState.UNFOCUSED, - onItemsSelected = { _ -> - // no-op - }, - onClearItemSelection = { - // no-op - }, - isRequired = false, - legendData = null, - supportingTextData = null, - ) - - InputMultiSelection( - items = multiSelect1Items, - title = "Multi Select 1", - state = InputShellState.UNFOCUSED, - onItemsSelected = { selectedItems -> - selectedItems.forEach { selectedItem -> - val index = multiSelect1Items.indexOfFirst { it.uid == selectedItem.uid } - multiSelect1Items[index] = selectedItem - } - }, - onClearItemSelection = { - multiSelect1Items.replaceAll { it.copy(checked = false) } - }, - isRequired = false, - legendData = null, - supportingTextData = null, - ) + ColumnComponentContainer("Basic state with no inputs") { + InputMultiSelection( + items = emptyList(), + title = "Multi Select Empty", + state = InputShellState.UNFOCUSED, + onItemsSelected = { _ -> + // no-op + }, + onClearItemSelection = { + // no-op + }, + isRequired = false, + legendData = null, + supportingTextData = null, + ) + } - InputMultiSelection( - items = multiSelect1Items, - title = "Multi Select 1 Error", - state = InputShellState.ERROR, - onItemsSelected = { selectedItems -> - selectedItems.forEach { selectedItem -> - val index = multiSelect1Items.indexOfFirst { it.uid == selectedItem.uid } - multiSelect1Items[index] = selectedItem - } - }, - onClearItemSelection = { - multiSelect1Items.replaceAll { it.copy(checked = false) } - }, - isRequired = false, - legendData = null, - supportingTextData = null, - ) + ColumnComponentContainer("Basic state with <=7 inputs") { + InputMultiSelection( + items = multiSelect1Items, + title = "Multi Select 1", + state = InputShellState.UNFOCUSED, + onItemsSelected = { selectedItems -> + selectedItems.forEach { selectedItem -> + val index = multiSelect1Items.indexOfFirst { it.uid == selectedItem.uid } + multiSelect1Items[index] = selectedItem + } + }, + onClearItemSelection = { + multiSelect1Items.replaceAll { it.copy(checked = false) } + }, + isRequired = false, + legendData = null, + supportingTextData = null, + ) + } - InputMultiSelection( - items = multiSelect1Items, - title = "Multi Select 1 Disabled", - state = InputShellState.DISABLED, - onItemsSelected = { selectedItems -> - selectedItems.forEach { selectedItem -> - val index = multiSelect1Items.indexOfFirst { it.uid == selectedItem.uid } - multiSelect1Items[index] = selectedItem - } - }, - onClearItemSelection = { - multiSelect1Items.replaceAll { it.copy(checked = false) } - }, - isRequired = false, - legendData = null, - supportingTextData = null, - ) + ColumnComponentContainer("Error state") { + InputMultiSelection( + items = multiSelect1Items, + title = "Multi Select 1 Error", + state = InputShellState.ERROR, + onItemsSelected = { selectedItems -> + selectedItems.forEach { selectedItem -> + val index = multiSelect1Items.indexOfFirst { it.uid == selectedItem.uid } + multiSelect1Items[index] = selectedItem + } + }, + onClearItemSelection = { + multiSelect1Items.replaceAll { it.copy(checked = false) } + }, + isRequired = false, + legendData = null, + supportingTextData = null, + ) + } - InputMultiSelection( - items = multiSelect2Items, - title = "Multi Select 2", - state = InputShellState.UNFOCUSED, - onItemsSelected = { selectedItems -> - selectedItems.forEach { selectedItem -> - val index = multiSelect2Items.indexOfFirst { it.uid == selectedItem.uid } - multiSelect2Items[index] = selectedItem - } - }, - onClearItemSelection = { - multiSelect2Items.replaceAll { it.copy(checked = false) } - }, - isRequired = false, - legendData = null, - supportingTextData = null, - ) + ColumnComponentContainer("Disabled state") { + InputMultiSelection( + items = multiSelect1Items, + title = "Multi Select 1 Disabled", + state = InputShellState.DISABLED, + onItemsSelected = { selectedItems -> + selectedItems.forEach { selectedItem -> + val index = multiSelect1Items.indexOfFirst { it.uid == selectedItem.uid } + multiSelect1Items[index] = selectedItem + } + }, + onClearItemSelection = { + multiSelect1Items.replaceAll { it.copy(checked = false) } + }, + isRequired = false, + legendData = null, + supportingTextData = null, + ) + } - InputMultiSelection( - items = multiSelect2Items, - title = "Multi Select 2 Disabled", - state = InputShellState.DISABLED, - onItemsSelected = { selectedItems -> - selectedItems.forEach { selectedItem -> - val index = multiSelect2Items.indexOfFirst { it.uid == selectedItem.uid } - multiSelect2Items[index] = selectedItem - } - }, - onClearItemSelection = { - multiSelect2Items.replaceAll { it.copy(checked = false) } - }, - isRequired = false, - legendData = null, - supportingTextData = null, - ) + ColumnComponentContainer("Basic state with >=7 inputs") { + InputMultiSelection( + items = multiSelect2Items, + title = "Multi Select 2", + state = InputShellState.UNFOCUSED, + onItemsSelected = { selectedItems -> + selectedItems.forEach { selectedItem -> + val index = multiSelect2Items.indexOfFirst { it.uid == selectedItem.uid } + multiSelect2Items[index] = selectedItem + } + }, + onClearItemSelection = { + multiSelect2Items.replaceAll { it.copy(checked = false) } + }, + isRequired = false, + legendData = null, + supportingTextData = null, + ) + } - val multiSelectItems = mutableListOf() - for (i in 1..5000) { - multiSelectItems.add( - CheckBoxData( - uid = "uid-$i", - checked = i == 2, - enabled = true, - textInput = "Opt. $i", - ), + ColumnComponentContainer("Disabled state with >=7 inputs") { + InputMultiSelection( + items = multiSelect2Items, + title = "Multi Select 2 Disabled", + state = InputShellState.DISABLED, + onItemsSelected = { selectedItems -> + selectedItems.forEach { selectedItem -> + val index = multiSelect2Items.indexOfFirst { it.uid == selectedItem.uid } + multiSelect2Items[index] = selectedItem + } + }, + onClearItemSelection = { + multiSelect2Items.replaceAll { it.copy(checked = false) } + }, + isRequired = false, + legendData = null, + supportingTextData = null, ) } - InputMultiSelection( - items = multiSelectItems, - title = "Multi Select more than 5000 items", - state = InputShellState.UNFOCUSED, - onItemsSelected = { selectedItems -> - selectedItems.forEach { selectedItem -> - val index = multiSelectItems.indexOfFirst { it.uid == selectedItem.uid } - multiSelectItems[index] = selectedItem - } - }, - onClearItemSelection = { - multiSelectItems.replaceAll { it.copy(checked = false) } - }, - isRequired = false, - legendData = null, - supportingTextData = null, - ) + ColumnComponentContainer("With 5000 items") { + val multiSelectItems = mutableListOf() + for (i in 1..5000) { + multiSelectItems.add( + CheckBoxData( + uid = "uid-$i", + checked = i == 2, + enabled = true, + textInput = "Opt. $i", + ), + ) + } + InputMultiSelection( + items = multiSelectItems, + title = "Multi Select more than 5000 items", + state = InputShellState.UNFOCUSED, + onItemsSelected = { selectedItems -> + selectedItems.forEach { selectedItem -> + val index = multiSelectItems.indexOfFirst { it.uid == selectedItem.uid } + multiSelectItems[index] = selectedItem + } + }, + onClearItemSelection = { + multiSelectItems.replaceAll { it.copy(checked = false) } + }, + isRequired = false, + legendData = null, + supportingTextData = null, + ) + } } } diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/toggleableInputs/ToggleableInputsSreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/toggleableInputs/ToggleableInputsSreen.kt index 32ac73fe8..56f26332c 100644 --- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/toggleableInputs/ToggleableInputsSreen.kt +++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/toggleableInputs/ToggleableInputsSreen.kt @@ -5,13 +5,12 @@ import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.ui.graphics.ImageBitmap import org.hisp.dhis.common.screens.NoComponentSelectedScreen +import org.hisp.dhis.common.screens.components.GroupComponentDropDown import org.hisp.dhis.mobile.ui.designsystem.component.DropdownItem -import org.hisp.dhis.mobile.ui.designsystem.component.InputDropDown -import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState @Composable fun ToggleableInputsScreen(imageBitmapLoader: (() -> ImageBitmap)?) { - val currentScreen = remember { mutableStateOf(ToggleableInputs.INPUT_RADIO_BUTTON) } + val currentScreen = remember { mutableStateOf(ToggleableInputs.NO_COMPONENT_SELECTED) } val screenDropdownItemList = mutableListOf() ToggleableInputs.entries.forEach { @@ -19,13 +18,11 @@ fun ToggleableInputsScreen(imageBitmapLoader: (() -> ImageBitmap)?) { screenDropdownItemList.add(DropdownItem(it.label)) } } - InputDropDown( - "Display", + GroupComponentDropDown( dropdownItems = screenDropdownItemList.toList(), onItemSelected = { currentScreen.value = getCurrentScreen(it.label) }, onResetButtonClicked = { currentScreen.value = ToggleableInputs.NO_COMPONENT_SELECTED }, selectedItem = DropdownItem(currentScreen.value.label), - state = InputShellState.UNFOCUSED, ) when (currentScreen.value) { ToggleableInputs.INPUT_RADIO_BUTTON -> InputRadioButtonScreen() @@ -36,21 +33,22 @@ fun ToggleableInputsScreen(imageBitmapLoader: (() -> ImageBitmap)?) { ToggleableInputs.INPUT_YES_ONLY_CHECKBOX -> InputYesOnlyCheckBoxScreen() ToggleableInputs.INPUT_YES_NO_FIELD -> InputYesNoFieldScreen() ToggleableInputs.INPUT_DROPDOWN -> InputDropDownScreen() + ToggleableInputs.MULTI_SELECT -> MultiSelectInputScreen() ToggleableInputs.NO_COMPONENT_SELECTED -> NoComponentSelectedScreen() } } enum class ToggleableInputs(val label: String) { - INPUT_RADIO_BUTTON("Input Radio Button"), - INPUT_MATRIX("Input Matrix"), - INPUT_SEQUENTIAL("Input Sequential"), - INPUT_CHECK_BOX("Input Check Box"), - INPUT_YES_ONLY_SWITCH("Input yes only switch"), - INPUT_YES_ONLY_CHECKBOX("Input yes only checkbox"), - INPUT_YES_NO_FIELD("Input Yes/No field"), - INPUT_DROPDOWN("Input Dropdown"), - MULTI_SELECT("Multi Select Input"), + INPUT_RADIO_BUTTON("Input Radio Button component"), + INPUT_MATRIX("Input Matrix component"), + INPUT_SEQUENTIAL("Input Sequential component"), + INPUT_CHECK_BOX("Input Check Box component"), + INPUT_YES_ONLY_SWITCH("Input yes only switch component"), + INPUT_YES_ONLY_CHECKBOX("Input yes only checkbox component"), + INPUT_YES_NO_FIELD("Input Yes/No field component"), + INPUT_DROPDOWN("Input Dropdown component"), + MULTI_SELECT("Multi Select Input component"), NO_COMPONENT_SELECTED("No component selected"), } diff --git a/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/AssistChipSnapshotTest.kt b/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/AssistChipSnapshotTest.kt index bf20cd348..c41bf2b3d 100644 --- a/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/AssistChipSnapshotTest.kt +++ b/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/AssistChipSnapshotTest.kt @@ -1,6 +1,5 @@ package org.hisp.dhis.mobile.ui.designsystem -import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size import androidx.compose.material.icons.Icons import androidx.compose.material.icons.filled.Search @@ -8,8 +7,7 @@ import androidx.compose.material3.AssistChipDefaults import androidx.compose.material3.Icon import androidx.compose.ui.Modifier import org.hisp.dhis.mobile.ui.designsystem.component.AssistChip -import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer -import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing +import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer import org.junit.Rule import org.junit.Test @@ -20,7 +18,7 @@ class AssistChipSnapshotTest { @Test fun launchAssistChip() { paparazzi.snapshot { - ColumnComponentContainer(modifier = Modifier.padding(Spacing.Spacing10)) { + ColumnScreenContainer { AssistChip( label = "Label", icon = { diff --git a/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/ButtonSnapshotTest.kt b/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/ButtonSnapshotTest.kt index 81a069e75..c8a8f4f61 100644 --- a/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/ButtonSnapshotTest.kt +++ b/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/ButtonSnapshotTest.kt @@ -9,7 +9,7 @@ import androidx.compose.ui.Modifier import org.hisp.dhis.mobile.ui.designsystem.component.Button import org.hisp.dhis.mobile.ui.designsystem.component.ButtonStyle import org.hisp.dhis.mobile.ui.designsystem.component.ColorStyle -import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer +import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer import org.hisp.dhis.mobile.ui.designsystem.component.RowComponentContainer import org.hisp.dhis.mobile.ui.designsystem.component.SubTitle import org.hisp.dhis.mobile.ui.designsystem.component.Title @@ -25,7 +25,7 @@ class ButtonSnapshotTest { @Test fun launchButtonSnapshot() { paparazzi.snapshot { - ColumnComponentContainer() { + ColumnScreenContainer { Title("Buttons") SubTitle("Filled") RowComponentContainer() { diff --git a/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/CardDetailSnapshotTest.kt b/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/CardDetailSnapshotTest.kt index 18821d8f6..770cb3c7d 100644 --- a/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/CardDetailSnapshotTest.kt +++ b/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/CardDetailSnapshotTest.kt @@ -1,20 +1,17 @@ package org.hisp.dhis.mobile.ui.designsystem -import androidx.compose.foundation.layout.padding import androidx.compose.material.icons.Icons import androidx.compose.material.icons.filled.CheckCircle import androidx.compose.material.icons.filled.PhoneEnabled import androidx.compose.material.icons.outlined.Sync import androidx.compose.material3.Icon -import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import org.hisp.dhis.mobile.ui.designsystem.component.AdditionalInfoItem import org.hisp.dhis.mobile.ui.designsystem.component.AdditionalInfoItemColor import org.hisp.dhis.mobile.ui.designsystem.component.CardDetail -import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer +import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer 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.theme.Spacing import org.hisp.dhis.mobile.ui.designsystem.theme.SurfaceColor import org.hisp.dhis.mobile.ui.designsystem.theme.TextColor import org.junit.Rule @@ -68,7 +65,7 @@ class CardDetailSnapshotTest { @Test fun launchCardDetail() { paparazzi.snapshot { - ColumnComponentContainer(title = "Card Detail and Info Bar", modifier = Modifier.padding(horizontal = Spacing.Spacing16)) { + ColumnScreenContainer(title = "Card Detail and Info Bar") { InfoBar( InfoBarData( text = "Not Synced", diff --git a/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/FABSnapshotTest.kt b/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/FABSnapshotTest.kt index b24a86319..91548baa2 100644 --- a/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/FABSnapshotTest.kt +++ b/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/FABSnapshotTest.kt @@ -1,15 +1,12 @@ package org.hisp.dhis.mobile.ui.designsystem -import androidx.compose.foundation.layout.padding import androidx.compose.material.icons.Icons import androidx.compose.material.icons.outlined.FileDownload import androidx.compose.material3.Icon -import androidx.compose.ui.Modifier -import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer +import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer import org.hisp.dhis.mobile.ui.designsystem.component.ExtendedFAB import org.hisp.dhis.mobile.ui.designsystem.component.FAB import org.hisp.dhis.mobile.ui.designsystem.component.FABStyle -import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing import org.junit.Rule import org.junit.Test @@ -21,7 +18,7 @@ class FABSnapshotTest { @Test fun launchFAB() { paparazzi.snapshot { - ColumnComponentContainer(modifier = Modifier.padding(Spacing.Spacing10)) { + ColumnScreenContainer { FAB( style = FABStyle.SURFACE, onClick = {}, diff --git a/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/InputAgeSnapshotTest.kt b/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/InputAgeSnapshotTest.kt index 5bab30067..0b5d7bf56 100644 --- a/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/InputAgeSnapshotTest.kt +++ b/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/InputAgeSnapshotTest.kt @@ -1,16 +1,13 @@ package org.hisp.dhis.mobile.ui.designsystem -import androidx.compose.foundation.layout.padding -import androidx.compose.ui.Modifier import androidx.compose.ui.text.input.TextFieldValue import org.hisp.dhis.mobile.ui.designsystem.component.AgeInputType -import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer +import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer import org.hisp.dhis.mobile.ui.designsystem.component.InputAge import org.hisp.dhis.mobile.ui.designsystem.component.InputAgeModel import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState import org.hisp.dhis.mobile.ui.designsystem.component.SubTitle import org.hisp.dhis.mobile.ui.designsystem.component.TimeUnitValues -import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing import org.junit.Rule import org.junit.Test @@ -22,7 +19,7 @@ class InputAgeSnapshotTest { @Test fun launchInputAgeSnapshot() { paparazzi.snapshot { - ColumnComponentContainer(modifier = Modifier.padding(Spacing.Spacing10)) { + ColumnScreenContainer { SubTitle("Input Age Component - Idle") InputAge( InputAgeModel( diff --git a/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/InputCheckboxSnapshotTest.kt b/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/InputCheckboxSnapshotTest.kt index dd7c29cf4..f25203f08 100644 --- a/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/InputCheckboxSnapshotTest.kt +++ b/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/InputCheckboxSnapshotTest.kt @@ -9,7 +9,7 @@ import androidx.compose.ui.Modifier import androidx.compose.ui.focus.FocusRequester import androidx.compose.ui.focus.focusRequester import org.hisp.dhis.mobile.ui.designsystem.component.CheckBoxData -import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer +import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer import org.hisp.dhis.mobile.ui.designsystem.component.InputCheckBox import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState import org.hisp.dhis.mobile.ui.designsystem.component.Orientation @@ -73,7 +73,7 @@ class InputCheckboxSnapshotTest { focusRequester.requestFocus() } - ColumnComponentContainer("Checkboxes") { + ColumnScreenContainer("Checkboxes") { SubTitle("Vertical") InputCheckBox( modifier = Modifier.focusRequester(focusRequester), diff --git a/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/InputChipSnapshotTest.kt b/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/InputChipSnapshotTest.kt index bd0bef3e4..e34e24a47 100644 --- a/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/InputChipSnapshotTest.kt +++ b/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/InputChipSnapshotTest.kt @@ -2,7 +2,7 @@ package org.hisp.dhis.mobile.ui.designsystem import androidx.compose.foundation.layout.padding import androidx.compose.ui.Modifier -import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer +import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer import org.hisp.dhis.mobile.ui.designsystem.component.InputChip import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing import org.junit.Rule @@ -16,7 +16,7 @@ class InputChipSnapshotTest { @Test fun launchChip() { paparazzi.snapshot { - ColumnComponentContainer(modifier = Modifier.padding(Spacing.Spacing10)) { + ColumnScreenContainer(modifier = Modifier.padding(Spacing.Spacing10)) { InputChip(label = "Label", selected = false, badge = "3") InputChip(label = "Label", selected = true, badge = "3") } diff --git a/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/InputDropDownSnapshotTest.kt b/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/InputDropDownSnapshotTest.kt index 7d5038809..e45fb0ee0 100644 --- a/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/InputDropDownSnapshotTest.kt +++ b/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/InputDropDownSnapshotTest.kt @@ -10,7 +10,7 @@ import androidx.compose.runtime.setValue import androidx.compose.ui.Modifier import androidx.compose.ui.focus.FocusRequester import androidx.compose.ui.focus.focusRequester -import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer +import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer import org.hisp.dhis.mobile.ui.designsystem.component.DropdownItem import org.hisp.dhis.mobile.ui.designsystem.component.InputDropDown import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState @@ -30,7 +30,7 @@ class InputDropDownSnapshotTest { @Test fun launchInputDropDown() { paparazzi.snapshot { - ColumnComponentContainer { + ColumnScreenContainer { val options = listOf( DropdownItem("Option 1"), DropdownItem("Option 2"), diff --git a/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/InputIndicatorSnapshotTest.kt b/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/InputIndicatorSnapshotTest.kt index 375918b55..adec610f7 100644 --- a/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/InputIndicatorSnapshotTest.kt +++ b/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/InputIndicatorSnapshotTest.kt @@ -1,11 +1,8 @@ package org.hisp.dhis.mobile.ui.designsystem -import androidx.compose.foundation.layout.padding -import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color -import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer +import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer import org.hisp.dhis.mobile.ui.designsystem.component.Indicator -import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing import org.junit.Rule import org.junit.Test @@ -17,7 +14,7 @@ class InputIndicatorSnapshotTest { @Test fun launchIndicatorInput() { paparazzi.snapshot { - ColumnComponentContainer(modifier = Modifier.padding(Spacing.Spacing10)) { + ColumnScreenContainer { Indicator( title = "Heart Rate", content = "160 bpm", diff --git a/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/InputMatrixSnapshotTest.kt b/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/InputMatrixSnapshotTest.kt index f4378fc3a..4557bcb4d 100644 --- a/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/InputMatrixSnapshotTest.kt +++ b/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/InputMatrixSnapshotTest.kt @@ -2,19 +2,16 @@ package org.hisp.dhis.mobile.ui.designsystem import android.graphics.Bitmap import android.graphics.BitmapFactory -import androidx.compose.foundation.layout.padding import androidx.compose.runtime.mutableStateListOf import androidx.compose.runtime.remember -import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.asImageBitmap import androidx.compose.ui.graphics.painter.BitmapPainter import androidx.compose.ui.platform.LocalContext -import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer +import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer import org.hisp.dhis.mobile.ui.designsystem.component.InputMatrix import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState import org.hisp.dhis.mobile.ui.designsystem.component.internal.ImageCardData -import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing import org.hisp.dhis.mobile.ui.designsystem.theme.SurfaceColor import org.junit.Rule import org.junit.Test @@ -82,7 +79,7 @@ class InputMatrixSnapshotTest { ) } - ColumnComponentContainer(modifier = Modifier.padding(Spacing.Spacing10)) { + ColumnScreenContainer { InputMatrix( title = "Label", data = inputCardData, diff --git a/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/InputRadioButtonSnapshotTest.kt b/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/InputRadioButtonSnapshotTest.kt index d79bc1d99..ab70bbadc 100644 --- a/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/InputRadioButtonSnapshotTest.kt +++ b/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/InputRadioButtonSnapshotTest.kt @@ -11,7 +11,7 @@ import androidx.compose.ui.Modifier import androidx.compose.ui.focus.FocusRequester import androidx.compose.ui.focus.focusRequester import org.hisp.dhis.mobile.ui.designsystem.component.Button -import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer +import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer import org.hisp.dhis.mobile.ui.designsystem.component.InputRadioButton import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState import org.hisp.dhis.mobile.ui.designsystem.component.Orientation @@ -81,7 +81,7 @@ class InputRadioButtonSnapshotTest { } var showSupportingText by remember { mutableStateOf(false) } val focusRequester = remember { FocusRequester() } - ColumnComponentContainer("Radio Buttons") { + ColumnScreenContainer("Radio Buttons") { LaunchedEffect(Unit) { focusRequester.requestFocus() } diff --git a/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/InputSequentialSnapshotTest.kt b/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/InputSequentialSnapshotTest.kt index 12e58647b..f9f422359 100644 --- a/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/InputSequentialSnapshotTest.kt +++ b/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/InputSequentialSnapshotTest.kt @@ -2,19 +2,16 @@ package org.hisp.dhis.mobile.ui.designsystem import android.graphics.Bitmap import android.graphics.BitmapFactory -import androidx.compose.foundation.layout.padding import androidx.compose.runtime.mutableStateListOf import androidx.compose.runtime.remember -import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.asImageBitmap import androidx.compose.ui.graphics.painter.BitmapPainter import androidx.compose.ui.platform.LocalContext -import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer +import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer import org.hisp.dhis.mobile.ui.designsystem.component.InputSequential import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState import org.hisp.dhis.mobile.ui.designsystem.component.internal.ImageCardData -import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing import org.hisp.dhis.mobile.ui.designsystem.theme.SurfaceColor import org.junit.Rule import org.junit.Test @@ -82,7 +79,7 @@ class InputSequentialSnapshotTest { ) } - ColumnComponentContainer(modifier = Modifier.padding(Spacing.Spacing10)) { + ColumnScreenContainer { InputSequential( title = "Label", data = inputCardData, diff --git a/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/LoginSnapshotTest.kt b/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/LoginSnapshotTest.kt index cf0020868..775200d2e 100644 --- a/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/LoginSnapshotTest.kt +++ b/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/LoginSnapshotTest.kt @@ -1,7 +1,6 @@ package org.hisp.dhis.mobile.ui.designsystem import androidx.compose.foundation.layout.fillMaxWidth -import androidx.compose.foundation.layout.padding import androidx.compose.material.icons.Icons import androidx.compose.material.icons.automirrored.outlined.Login import androidx.compose.material3.Icon @@ -9,14 +8,13 @@ import androidx.compose.ui.Modifier import androidx.compose.ui.text.input.TextFieldValue import org.hisp.dhis.mobile.ui.designsystem.component.Button import org.hisp.dhis.mobile.ui.designsystem.component.ButtonStyle -import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer +import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer import org.hisp.dhis.mobile.ui.designsystem.component.InputPassword import org.hisp.dhis.mobile.ui.designsystem.component.InputQRCode import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState import org.hisp.dhis.mobile.ui.designsystem.component.InputUser import org.hisp.dhis.mobile.ui.designsystem.component.model.InputPasswordModel import org.hisp.dhis.mobile.ui.designsystem.component.model.InputUserModel -import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing import org.junit.Rule import org.junit.Test @@ -28,7 +26,7 @@ class LoginSnapshotTest { @Test fun launchLoginScreen() { paparazzi.snapshot { - ColumnComponentContainer(title = "Login", modifier = Modifier.padding(Spacing.Spacing10)) { + ColumnScreenContainer(title = "Login") { InputQRCode( "Server URL", inputTextFieldValue = TextFieldValue("https://play.dhis2.org/40"), @@ -61,12 +59,10 @@ class LoginSnapshotTest { Icon( imageVector = Icons.AutoMirrored.Outlined.Login, contentDescription = "Login button", - ) }, modifier = Modifier.fillMaxWidth(), enabled = true, - ) } } diff --git a/designsystem/src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/Container.kt b/designsystem/src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/Container.kt index 54f627655..a8421ab6d 100644 --- a/designsystem/src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/Container.kt +++ b/designsystem/src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/Container.kt @@ -1,41 +1,82 @@ package org.hisp.dhis.mobile.ui.designsystem.component +import androidx.compose.foundation.background import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.ExperimentalLayoutApi import androidx.compose.foundation.layout.FlowColumn import androidx.compose.foundation.layout.FlowRow import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.padding import androidx.compose.foundation.rememberScrollState import androidx.compose.foundation.verticalScroll 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.Color import androidx.compose.ui.unit.Dp +import org.hisp.dhis.mobile.ui.designsystem.theme.Shape import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing /** - * DHIS2 ColumnComponentContainer wraps Material 3 [Column] - * has a default spacing between items of 10 dp + * DHIS2 ColumnScreenContainer wraps Material 3 [Column] + * has a default spacing between items of 16 dp + * with large top corner radius, white background and * vertical scroll enabled * @param title: is the value of the text to be shown for the row. * @param content: controls the content to be shown. * @param modifier: optional modifier. + * @param verticalArrangement: optional vertical alignment. + * @param horizontalAlignment: optional horizontal alignment. */ @Composable -fun ColumnComponentContainer( +fun ColumnScreenContainer( title: String? = null, modifier: Modifier = Modifier, + verticalArrangement: Arrangement.Vertical = Arrangement.spacedBy(Spacing.Spacing16), + horizontalAlignment: Alignment.Horizontal = Alignment.Start, content: @Composable (() -> Unit), ) { Column( - verticalArrangement = Arrangement.spacedBy(Spacing.Spacing16), - modifier = modifier.verticalScroll(rememberScrollState()), + verticalArrangement = verticalArrangement, + horizontalAlignment = horizontalAlignment, + modifier = modifier + .fillMaxSize().background(Color.White, Shape.LargeTop) + .padding(horizontal = Spacing.Spacing16) + .verticalScroll(rememberScrollState()), ) { title?.let { - Title(title) + Title(title, modifier = Modifier.padding(top = Spacing.Spacing16)) + } + content() + Spacer(modifier = Modifier.padding(bottom = Spacing.Spacing16)) + } +} + +/** + * DHIS2 ColumnComponentContainer wraps Material 3 [Column] + * has a default spacing between items of 16 dp + * @param subTitle: is the value of the text to be shown for the component. + * @param content: controls the content to be shown. + * @param modifier: optional modifier. + */ +@Composable +fun ColumnComponentContainer( + subTitle: String? = null, + modifier: Modifier = Modifier, + content: @Composable (() -> Unit), +) { + Column( + verticalArrangement = Arrangement.spacedBy(Spacing.Spacing16), + horizontalAlignment = Alignment.Start, + modifier = modifier.padding(bottom = Spacing.Spacing32), + ) { + subTitle?.let { + SubTitle(subTitle) } content() } diff --git a/designsystem/src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/InputDropDown.kt b/designsystem/src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/InputDropDown.kt index b11a7fe4b..089621295 100644 --- a/designsystem/src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/InputDropDown.kt +++ b/designsystem/src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/InputDropDown.kt @@ -86,11 +86,12 @@ fun InputDropDown( onResetButtonClicked: () -> Unit, onItemSelected: (DropdownItem) -> Unit, showSearchBar: Boolean = true, + expanded: Boolean = false, noResultsFoundString: String = provideStringResource("no_results_found"), searchToFindMoreString: String = provideStringResource("search_to_see_more"), ) { val focusRequester = remember { FocusRequester() } - var showDropdown by remember { mutableStateOf(false) } + var showDropdown by remember { mutableStateOf(expanded) } val inputField: @Composable (modifier: Modifier) -> Unit = { inputModifier -> DropdownInputField( @@ -187,13 +188,13 @@ fun InputDropDown( ExposedDropdownMenuBox( expanded = showDropdown, onExpandedChange = { }, - modifier = Modifier + modifier = modifier .background( color = SurfaceColor.SurfaceBright, shape = RoundedCornerShape(Spacing8), ), ) { - inputField(modifier.menuAnchor()) + inputField(Modifier.menuAnchor()) MaterialTheme( shapes = Shapes(extraSmall = RoundedCornerShape(Spacing8)), diff --git a/designsystem/src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/InputStyle.kt b/designsystem/src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/InputStyle.kt index 1734e7df2..35fd8f4e5 100644 --- a/designsystem/src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/InputStyle.kt +++ b/designsystem/src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/InputStyle.kt @@ -17,7 +17,7 @@ import org.hisp.dhis.mobile.ui.designsystem.theme.SurfaceColor */ sealed class InputStyle( val startIndent: Dp, - val backGroundColor: Color, + var backGroundColor: Color, val disabledBackGroundColor: Color, val unfocusedIndicatorColor: Color?, val disabledIndicatorColor: Color?, diff --git a/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_AssistChipSnapshotTest_launchAssistChip.png b/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_AssistChipSnapshotTest_launchAssistChip.png index 183adbfdb..cc3a9b71a 100644 Binary files a/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_AssistChipSnapshotTest_launchAssistChip.png and b/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_AssistChipSnapshotTest_launchAssistChip.png differ diff --git a/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_ButtonSnapshotTest_launchButtonSnapshot.png b/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_ButtonSnapshotTest_launchButtonSnapshot.png index 98e37c2ff..f1add60ab 100644 Binary files a/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_ButtonSnapshotTest_launchButtonSnapshot.png and b/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_ButtonSnapshotTest_launchButtonSnapshot.png differ diff --git a/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_CardDetailSnapshotTest_launchCardDetail.png b/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_CardDetailSnapshotTest_launchCardDetail.png index 0820202c5..1c0e8a782 100644 Binary files a/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_CardDetailSnapshotTest_launchCardDetail.png and b/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_CardDetailSnapshotTest_launchCardDetail.png differ diff --git a/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_FABSnapshotTest_launchFAB.png b/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_FABSnapshotTest_launchFAB.png index 1dd0c841f..9625de61a 100644 Binary files a/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_FABSnapshotTest_launchFAB.png and b/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_FABSnapshotTest_launchFAB.png differ diff --git a/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_InputAgeSnapshotTest_launchInputAgeSnapshot.png b/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_InputAgeSnapshotTest_launchInputAgeSnapshot.png index 3c302d56b..e4198b508 100644 Binary files a/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_InputAgeSnapshotTest_launchInputAgeSnapshot.png and b/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_InputAgeSnapshotTest_launchInputAgeSnapshot.png differ diff --git a/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_InputCheckboxSnapshotTest_launchInputCheckBox.png b/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_InputCheckboxSnapshotTest_launchInputCheckBox.png index daeb78c69..79792531f 100644 Binary files a/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_InputCheckboxSnapshotTest_launchInputCheckBox.png and b/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_InputCheckboxSnapshotTest_launchInputCheckBox.png differ diff --git a/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_InputChipSnapshotTest_launchChip.png b/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_InputChipSnapshotTest_launchChip.png index 937475d8b..1e62251e4 100644 Binary files a/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_InputChipSnapshotTest_launchChip.png and b/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_InputChipSnapshotTest_launchChip.png differ diff --git a/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_InputDropDownSnapshotTest_launchInputDropDown.png b/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_InputDropDownSnapshotTest_launchInputDropDown.png index 9d120daf7..d05d6dbd3 100644 Binary files a/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_InputDropDownSnapshotTest_launchInputDropDown.png and b/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_InputDropDownSnapshotTest_launchInputDropDown.png differ diff --git a/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_InputIndicatorSnapshotTest_launchIndicatorInput.png b/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_InputIndicatorSnapshotTest_launchIndicatorInput.png index 9c79423d0..e099851be 100644 Binary files a/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_InputIndicatorSnapshotTest_launchIndicatorInput.png and b/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_InputIndicatorSnapshotTest_launchIndicatorInput.png differ diff --git a/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_InputMatrixSnapshotTest_launchMatrix.png b/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_InputMatrixSnapshotTest_launchMatrix.png index b948c9a29..355051ece 100644 Binary files a/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_InputMatrixSnapshotTest_launchMatrix.png and b/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_InputMatrixSnapshotTest_launchMatrix.png differ diff --git a/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_InputRadioButtonSnapshotTest_launchInputRadioButton.png b/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_InputRadioButtonSnapshotTest_launchInputRadioButton.png index 2f5683b44..84bd87587 100644 Binary files a/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_InputRadioButtonSnapshotTest_launchInputRadioButton.png and b/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_InputRadioButtonSnapshotTest_launchInputRadioButton.png differ diff --git a/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_InputSequentialSnapshotTest_launchMatrix.png b/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_InputSequentialSnapshotTest_launchMatrix.png index 15a4285b9..e4f00da23 100644 Binary files a/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_InputSequentialSnapshotTest_launchMatrix.png and b/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_InputSequentialSnapshotTest_launchMatrix.png differ diff --git a/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_ListCardSnapshotTest_launchListCard.png b/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_ListCardSnapshotTest_launchListCard.png index fb4918fb2..3c68d6477 100644 Binary files a/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_ListCardSnapshotTest_launchListCard.png and b/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_ListCardSnapshotTest_launchListCard.png differ diff --git a/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_LoginSnapshotTest_launchLoginScreen.png b/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_LoginSnapshotTest_launchLoginScreen.png index d481f32ce..6c697cd9b 100644 Binary files a/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_LoginSnapshotTest_launchLoginScreen.png and b/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_LoginSnapshotTest_launchLoginScreen.png differ