From ae8986ac1a6a01f7abeb1f66fb38777d2c09bd35 Mon Sep 17 00:00:00 2001 From: Elly Kitoto Date: Mon, 23 Oct 2023 15:32:35 +0300 Subject: [PATCH] UI fixes and enhancements (#2831) * Fix letter spacing plus remove dropdown icon on completed Task button Signed-off-by: Elly Kitoto * Fix CardView padding Signed-off-by: Elly Kitoto * Fix searchbar margin Signed-off-by: Elly Kitoto * Default Profile content background to light grey color Signed-off-by: Elly Kitoto * Apply new brand colors Signed-off-by: Elly Kitoto * Fix button colors Signed-off-by: Elly Kitoto * Refactor Buttons implementation Introduces breaking changes in configuration. ButtonProperty.smallSized removed. Use ButtonProperty.buttonType instead (TINY, MEDIUM, BIG). Signed-off-by: Elly Kitoto * Fix test Signed-off-by: Elly Kitoto * Fix configurations to use buttonType property Signed-off-by: Elly Kitoto * Wrap button content Signed-off-by: Elly Kitoto * Update CHANGELOG.MD Signed-off-by: Elly Kitoto * Use equal sized buttons Signed-off-by: Elly Kitoto * Fix failing UI tests Signed-off-by: Elly Kitoto --------- Signed-off-by: Elly Kitoto --- CHANGELOG.md | 1 + .../profile/ProfileConfiguration.kt | 2 +- .../configuration/view/ButtonProperties.kt | 2 +- .../view/CompoundTextProperties.kt | 1 + .../fhircore/engine/ui/theme/Colors.kt | 8 +- android/engine/src/main/res/values/colors.xml | 8 +- .../configuration/ButtonPropertiesTest.kt | 1 - .../ui/shared/components/ServiceCardTest.kt | 2 - .../ui/shared/components/ViewGeneratorTest.kt | 3 +- .../app/profiles/default_profile_config.json | 18 --- .../profiles/household_profile_config.json | 1 - .../other_registers_profile_config.json | 1 - .../app/registers/anc_register_config.json | 2 +- .../app/registers/child_register_config.json | 2 +- .../app/registers/cmntd_register_config.json | 2 +- .../app/registers/fp_register_config.json | 2 +- .../app/registers/hiv_register_config.json | 2 +- .../registers/household_register_config.json | 2 +- .../registers/inventory_register_config.json | 2 +- .../mental_health_register_config.json | 2 +- .../app/registers/pnc_register_config.json | 2 +- .../practitioner_register_config.json | 2 +- .../registers/sick_child_register_config.json | 2 +- .../app/registers/tb_register_config.json | 2 +- .../ui/main/components/TopScreenSection.kt | 2 +- .../MemberProfileBottomSheetView.kt | 3 +- .../ui/shared/components/ActionableButton.kt | 74 +++++++---- .../quest/ui/shared/components/CardView.kt | 4 - .../ui/shared/components/CompoundText.kt | 5 + .../quest/ui/shared/components/ServiceCard.kt | 121 +++++++++++++----- android/quest/src/main/res/values/colors.xml | 13 -- 31 files changed, 174 insertions(+), 120 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index c5c87b9c9a..56561bdc92 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - [App Performance] Profile the time it takes for the app to load the configs and patient data from the local DB - Add progress indicator during report generation - Add config property in QuestionnaireConfig to indicate when to udpate or create new extracted resource +- Use `ButtonProperties.buttonType` to configure button size (BIG, MEDIUM or TINY). Deleted `ButtonProperties.smallSized` ### Fixed - Incorrect error shown for failed authentication when the credentials are invalid. diff --git a/android/engine/src/main/java/org/smartregister/fhircore/engine/configuration/profile/ProfileConfiguration.kt b/android/engine/src/main/java/org/smartregister/fhircore/engine/configuration/profile/ProfileConfiguration.kt index 6b8f31d789..8a3dd9dae7 100644 --- a/android/engine/src/main/java/org/smartregister/fhircore/engine/configuration/profile/ProfileConfiguration.kt +++ b/android/engine/src/main/java/org/smartregister/fhircore/engine/configuration/profile/ProfileConfiguration.kt @@ -48,5 +48,5 @@ data class ProfileConfiguration( ActiveResourceFilterConfig(resourceType = ResourceType.Group, active = true), ), val configRules: List? = null, - val contentBackgroundColor: String? = "#FFFFFF", + val contentBackgroundColor: String? = "#F2F4F7", ) : Configuration() diff --git a/android/engine/src/main/java/org/smartregister/fhircore/engine/configuration/view/ButtonProperties.kt b/android/engine/src/main/java/org/smartregister/fhircore/engine/configuration/view/ButtonProperties.kt index b56df52ec1..5c44fda599 100644 --- a/android/engine/src/main/java/org/smartregister/fhircore/engine/configuration/view/ButtonProperties.kt +++ b/android/engine/src/main/java/org/smartregister/fhircore/engine/configuration/view/ButtonProperties.kt @@ -47,11 +47,11 @@ data class ButtonProperties( val enabled: String = "true", val text: String? = null, val status: String, - val smallSized: Boolean = false, val fontSize: Float = 14.0f, val actions: List = emptyList(), val buttonType: ButtonType = ButtonType.MEDIUM, val startIcon: ImageConfig? = null, + val letterSpacing: Int = 0, ) : ViewProperties(), Parcelable { /** * This function determines the status color to display depending on the value of the service diff --git a/android/engine/src/main/java/org/smartregister/fhircore/engine/configuration/view/CompoundTextProperties.kt b/android/engine/src/main/java/org/smartregister/fhircore/engine/configuration/view/CompoundTextProperties.kt index 1b53e22e68..9ef2aae84a 100644 --- a/android/engine/src/main/java/org/smartregister/fhircore/engine/configuration/view/CompoundTextProperties.kt +++ b/android/engine/src/main/java/org/smartregister/fhircore/engine/configuration/view/CompoundTextProperties.kt @@ -53,6 +53,7 @@ data class CompoundTextProperties( val colorOpacity: Float = 1f, val textCase: TextCase? = null, val overflow: TextOverFlow? = null, + val letterSpacing: Int = 0, ) : ViewProperties(), Parcelable { override fun interpolate(computedValuesMap: Map): CompoundTextProperties { return this.copy( diff --git a/android/engine/src/main/java/org/smartregister/fhircore/engine/ui/theme/Colors.kt b/android/engine/src/main/java/org/smartregister/fhircore/engine/ui/theme/Colors.kt index 4fd1de3fa0..9993683351 100644 --- a/android/engine/src/main/java/org/smartregister/fhircore/engine/ui/theme/Colors.kt +++ b/android/engine/src/main/java/org/smartregister/fhircore/engine/ui/theme/Colors.kt @@ -25,8 +25,8 @@ val SubtitleTextColor = Color(0xFF7A7A7A) val GreyTextColor = Color(0xFF5A5A5A) val SuccessColor = Color(0xFF1DB11B) val DangerColor = Color(0xFFDE0E1A) -val InfoColor = Color(0xFF006EB8) -val DefaultColor = Color(0xFF999999) +val InfoColor = Color(0xFF0077CC) +val DefaultColor = Color(0xFF7A7A7A) val WarningColor = Color(0xFFFF8800) val LoginDarkColor = Color(0xFF272727) val LoginFieldBackgroundColor = Color(0xFF273844) @@ -42,8 +42,8 @@ val PersonalDataBackgroundColor = Color(0xFFF5F5F5) val MenuActionButtonTextColor = Color(0xFF28B8F9) val MenuItemColor = Color(0xFFBFBFBF) val SearchHeaderColor = Color(0xFFF2F4F7) -private val PrimaryColor = Color(0xFF005084) -private val PrimaryVariantColor = Color(0xFF003D66) +private val PrimaryColor = Color(0xFF0077CC) +private val PrimaryVariantColor = Color(0xFF006BBA) val LightColors = lightColors(primary = PrimaryColor, primaryVariant = PrimaryVariantColor, error = DangerColor) diff --git a/android/engine/src/main/res/values/colors.xml b/android/engine/src/main/res/values/colors.xml index b93b1541c9..6649f4ed09 100644 --- a/android/engine/src/main/res/values/colors.xml +++ b/android/engine/src/main/res/values/colors.xml @@ -2,10 +2,10 @@ #DD0000 #f2d0d3 - #005084 - #003D66 - #006EB8 - #0283DA + #0077CC + #006BBA + #0077CC + #0077CC #DEECF6 #FFFFFF #005084 diff --git a/android/engine/src/test/java/org/smartregister/fhircore/engine/configuration/ButtonPropertiesTest.kt b/android/engine/src/test/java/org/smartregister/fhircore/engine/configuration/ButtonPropertiesTest.kt index 93a6f2c88b..ec42682491 100644 --- a/android/engine/src/test/java/org/smartregister/fhircore/engine/configuration/ButtonPropertiesTest.kt +++ b/android/engine/src/test/java/org/smartregister/fhircore/engine/configuration/ButtonPropertiesTest.kt @@ -45,7 +45,6 @@ class ButtonPropertiesTest : RobolectricTest() { enabled = "@{enabled}", text = "@{text}", status = "@{status}", - smallSized = false, fontSize = 14.0f, actions = emptyList(), buttonType = ButtonType.MEDIUM, diff --git a/android/quest/src/androidTest/java/org/smartregister/fhircore/quest/integration/ui/shared/components/ServiceCardTest.kt b/android/quest/src/androidTest/java/org/smartregister/fhircore/quest/integration/ui/shared/components/ServiceCardTest.kt index 17a9d8fbff..0a3d08f16f 100644 --- a/android/quest/src/androidTest/java/org/smartregister/fhircore/quest/integration/ui/shared/components/ServiceCardTest.kt +++ b/android/quest/src/androidTest/java/org/smartregister/fhircore/quest/integration/ui/shared/components/ServiceCardTest.kt @@ -111,7 +111,6 @@ class ServiceCardTest { showVerticalDivider: Boolean = false, serviceStatus: String = ServiceStatus.UPCOMING.name, text: String = "Next visit 09-10-2022", - smallSized: Boolean = false, visible: String = "true", ): ServiceCardProperties { return ServiceCardProperties( @@ -143,7 +142,6 @@ class ServiceCardTest { visible = visible, status = serviceStatus, text = text, - smallSized = smallSized, ), ) } diff --git a/android/quest/src/androidTest/java/org/smartregister/fhircore/quest/integration/ui/shared/components/ViewGeneratorTest.kt b/android/quest/src/androidTest/java/org/smartregister/fhircore/quest/integration/ui/shared/components/ViewGeneratorTest.kt index 7a003a7b7d..132fc045fd 100644 --- a/android/quest/src/androidTest/java/org/smartregister/fhircore/quest/integration/ui/shared/components/ViewGeneratorTest.kt +++ b/android/quest/src/androidTest/java/org/smartregister/fhircore/quest/integration/ui/shared/components/ViewGeneratorTest.kt @@ -32,6 +32,7 @@ import org.smartregister.fhircore.engine.configuration.navigation.ICON_TYPE_LOCA import org.smartregister.fhircore.engine.configuration.navigation.ICON_TYPE_REMOTE import org.smartregister.fhircore.engine.configuration.navigation.ImageConfig import org.smartregister.fhircore.engine.configuration.view.ButtonProperties +import org.smartregister.fhircore.engine.configuration.view.ButtonType import org.smartregister.fhircore.engine.configuration.view.CardViewProperties import org.smartregister.fhircore.engine.configuration.view.ColumnArrangement import org.smartregister.fhircore.engine.configuration.view.ColumnProperties @@ -83,7 +84,7 @@ class ViewGeneratorTest { visible = "true", status = ServiceStatus.DUE.name, text = "Next visit 09-10-2022", - smallSized = false, + buttonType = ButtonType.BIG, ), ), resourceData = resourceData, diff --git a/android/quest/src/main/assets/configs/app/profiles/default_profile_config.json b/android/quest/src/main/assets/configs/app/profiles/default_profile_config.json index 2ef1953f9a..4bfce64d61 100644 --- a/android/quest/src/main/assets/configs/app/profiles/default_profile_config.json +++ b/android/quest/src/main/assets/configs/app/profiles/default_profile_config.json @@ -1062,7 +1062,6 @@ "views": [ { "viewType": "BUTTON", - "smallSized": "true", "text": "@{taskDescriptionWithStartDate}", "status": "@{taskStatusColorCode}", "visible": "true", @@ -1074,7 +1073,6 @@ "questionnaire": { "id": "@{taskQuestionnaireId}", "title": "@{taskDescription}", - "saveButtonText": "Save", "taskId": "@{taskId}", "resourceType": "Patient", @@ -1340,7 +1338,6 @@ "views": [ { "viewType": "BUTTON", - "smallSized": "true", "text": "@{taskDescriptionWithStartDate}", "status": "@{taskStatusColorCode}", "visible": "true", @@ -1352,7 +1349,6 @@ "questionnaire": { "id": "@{taskQuestionnaireId}", "title": "@{taskDescription}", - "saveButtonText": "Save", "taskId": "@{taskId}", "resourceIdentifier": "@{taskFor}" @@ -1461,7 +1457,6 @@ "views": [ { "viewType": "BUTTON", - "smallSized": "true", "text": "@{taskDescriptionWithStartDate}", "status": "@{taskStatusColorCode}", "visible": "true", @@ -1473,7 +1468,6 @@ "questionnaire": { "id": "@{taskQuestionnaireId}", "title": "@{taskDescription}", - "saveButtonText": "Save", "taskId": "@{taskId}", "resourceIdentifier": "@{taskFor}" @@ -1582,7 +1576,6 @@ "views": [ { "viewType": "BUTTON", - "smallSized": "true", "text": "@{taskDescriptionWithStartDate}", "status": "@{taskStatusColorCode}", "visible": "true", @@ -1594,7 +1587,6 @@ "questionnaire": { "id": "@{taskQuestionnaireId}", "title": "@{taskDescription}", - "saveButtonText": "Save", "taskId": "@{taskId}", "resourceIdentifier": "@{taskFor}" @@ -1703,7 +1695,6 @@ "views": [ { "viewType": "BUTTON", - "smallSized": "true", "text": "@{taskDescriptionWithStartDate}", "status": "@{taskStatusColorCode}", "visible": "true", @@ -1715,7 +1706,6 @@ "questionnaire": { "id": "@{taskQuestionnaireId}", "title": "@{taskDescription}", - "saveButtonText": "Save", "taskId": "@{taskId}", "resourceIdentifier": "@{taskFor}" @@ -1824,7 +1814,6 @@ "views": [ { "viewType": "BUTTON", - "smallSized": "true", "text": "@{taskDescriptionWithStartDate}", "status": "@{taskStatusColorCode}", "visible": "true", @@ -1836,7 +1825,6 @@ "questionnaire": { "id": "@{taskQuestionnaireId}", "title": "@{taskDescription}", - "saveButtonText": "Save", "taskId": "@{taskId}", "resourceIdentifier": "@{taskFor}" @@ -1945,7 +1933,6 @@ "views": [ { "viewType": "BUTTON", - "smallSized": "true", "text": "@{taskDescriptionWithStartDate}", "status": "@{taskStatusColorCode}", "visible": "true", @@ -1957,7 +1944,6 @@ "questionnaire": { "id": "@{taskQuestionnaireId}", "title": "@{taskDescription}", - "saveButtonText": "Save", "taskId": "@{taskId}", "resourceIdentifier": "@{taskFor}" @@ -2066,7 +2052,6 @@ "views": [ { "viewType": "BUTTON", - "smallSized": "true", "text": "@{taskDescriptionWithStartDate}", "status": "@{taskStatusColorCode}", "visible": "true", @@ -2077,7 +2062,6 @@ "workflow": "LAUNCH_QUESTIONNAIRE", "questionnaire": { "id": "@{taskQuestionnaireId}", - "title": "@{taskDescription}", "saveButtonText": "Save", "taskId": "@{taskId}", @@ -2187,7 +2171,6 @@ "views": [ { "viewType": "BUTTON", - "smallSized": "true", "text": "@{taskDescriptionWithStartDate}", "status": "@{taskStatusColorCode}", "visible": "true", @@ -2199,7 +2182,6 @@ "questionnaire": { "id": "@{taskQuestionnaireId}", "title": "@{taskDescription}", - "saveButtonText": "Save", "taskId": "@{taskId}", "resourceIdentifier": "@{taskFor}" diff --git a/android/quest/src/main/assets/configs/app/profiles/household_profile_config.json b/android/quest/src/main/assets/configs/app/profiles/household_profile_config.json index 32c86326ef..20a9a46702 100644 --- a/android/quest/src/main/assets/configs/app/profiles/household_profile_config.json +++ b/android/quest/src/main/assets/configs/app/profiles/household_profile_config.json @@ -506,7 +506,6 @@ "visible": "@{showMemberTasks}", "text": "@{taskDescription}", "status": "@{serviceStatus}", - "smallSized": true, "enabled": "@{patientActive}", "actions": [ { diff --git a/android/quest/src/main/assets/configs/app/profiles/other_registers_profile_config.json b/android/quest/src/main/assets/configs/app/profiles/other_registers_profile_config.json index a717434f2c..f736a85a0e 100644 --- a/android/quest/src/main/assets/configs/app/profiles/other_registers_profile_config.json +++ b/android/quest/src/main/assets/configs/app/profiles/other_registers_profile_config.json @@ -989,7 +989,6 @@ "views": [ { "viewType": "BUTTON", - "smallSized": "true", "text": "@{taskDescriptionWithStartDate}", "status": "@{taskStatusColorCode}", "visible": "true", diff --git a/android/quest/src/main/assets/configs/app/registers/anc_register_config.json b/android/quest/src/main/assets/configs/app/registers/anc_register_config.json index baf8c20982..9ec5b9e87f 100644 --- a/android/quest/src/main/assets/configs/app/registers/anc_register_config.json +++ b/android/quest/src/main/assets/configs/app/registers/anc_register_config.json @@ -183,7 +183,7 @@ "visible": "@{showMemberTasks}", "text": "@{taskDescription}", "status": "@{serviceStatus}", - "smallSized": true, + "buttonType": "TINY", "actions": [ { "trigger": "ON_CLICK", diff --git a/android/quest/src/main/assets/configs/app/registers/child_register_config.json b/android/quest/src/main/assets/configs/app/registers/child_register_config.json index 80fa8847bd..00b8c13373 100644 --- a/android/quest/src/main/assets/configs/app/registers/child_register_config.json +++ b/android/quest/src/main/assets/configs/app/registers/child_register_config.json @@ -176,7 +176,7 @@ "visible": "@{showMemberTasks}", "text": "@{taskDescription}", "status": "@{serviceStatus}", - "smallSized": true, + "buttonType": "TINY", "actions": [ { "trigger": "ON_CLICK", diff --git a/android/quest/src/main/assets/configs/app/registers/cmntd_register_config.json b/android/quest/src/main/assets/configs/app/registers/cmntd_register_config.json index 74b8b7a059..83a5701803 100644 --- a/android/quest/src/main/assets/configs/app/registers/cmntd_register_config.json +++ b/android/quest/src/main/assets/configs/app/registers/cmntd_register_config.json @@ -198,7 +198,7 @@ "visible": "@{showMemberTasks}", "text": "@{taskDescription}", "status": "@{serviceStatus}", - "smallSized": true, + "buttonType": "TINY", "actions": [ { "trigger": "ON_CLICK", diff --git a/android/quest/src/main/assets/configs/app/registers/fp_register_config.json b/android/quest/src/main/assets/configs/app/registers/fp_register_config.json index 47f61bd58a..e5e42fe037 100644 --- a/android/quest/src/main/assets/configs/app/registers/fp_register_config.json +++ b/android/quest/src/main/assets/configs/app/registers/fp_register_config.json @@ -183,7 +183,7 @@ "visible": "@{showMemberTasks}", "text": "@{taskDescription}", "status": "@{serviceStatus}", - "smallSized": true, + "buttonType": "TINY", "actions": [ { "trigger": "ON_CLICK", diff --git a/android/quest/src/main/assets/configs/app/registers/hiv_register_config.json b/android/quest/src/main/assets/configs/app/registers/hiv_register_config.json index 901ac350b4..9a3856f198 100644 --- a/android/quest/src/main/assets/configs/app/registers/hiv_register_config.json +++ b/android/quest/src/main/assets/configs/app/registers/hiv_register_config.json @@ -183,7 +183,7 @@ "visible": "@{showMemberTasks}", "text": "@{taskDescription}", "status": "@{serviceStatus}", - "smallSized": true, + "buttonType": "TINY", "actions": [ { "trigger": "ON_CLICK", diff --git a/android/quest/src/main/assets/configs/app/registers/household_register_config.json b/android/quest/src/main/assets/configs/app/registers/household_register_config.json index d042945cf8..853aee570d 100644 --- a/android/quest/src/main/assets/configs/app/registers/household_register_config.json +++ b/android/quest/src/main/assets/configs/app/registers/household_register_config.json @@ -210,7 +210,7 @@ "text": "@{totalTaskCount}", "status": "@{serviceStatus}", "fontSize": 14.0, - "smallSized": false, + "buttonType": "BIG", "actions": [ { "trigger": "ON_CLICK", diff --git a/android/quest/src/main/assets/configs/app/registers/inventory_register_config.json b/android/quest/src/main/assets/configs/app/registers/inventory_register_config.json index f58666880d..127134ee4c 100644 --- a/android/quest/src/main/assets/configs/app/registers/inventory_register_config.json +++ b/android/quest/src/main/assets/configs/app/registers/inventory_register_config.json @@ -222,7 +222,7 @@ "text": "@{runningBalance}", "status": "DUE", "fontSize": 14.0, - "smallSized": false, + "buttonType": "BIG", "actions": [ { "trigger": "ON_CLICK", diff --git a/android/quest/src/main/assets/configs/app/registers/mental_health_register_config.json b/android/quest/src/main/assets/configs/app/registers/mental_health_register_config.json index c518d7d722..b5357f7089 100644 --- a/android/quest/src/main/assets/configs/app/registers/mental_health_register_config.json +++ b/android/quest/src/main/assets/configs/app/registers/mental_health_register_config.json @@ -183,7 +183,7 @@ "visible": "@{showMemberTasks}", "text": "@{taskDescription}", "status": "@{serviceStatus}", - "smallSized": true, + "buttonType": "TINY", "actions": [ { "trigger": "ON_CLICK", diff --git a/android/quest/src/main/assets/configs/app/registers/pnc_register_config.json b/android/quest/src/main/assets/configs/app/registers/pnc_register_config.json index de92ddb204..e8bb0eed32 100644 --- a/android/quest/src/main/assets/configs/app/registers/pnc_register_config.json +++ b/android/quest/src/main/assets/configs/app/registers/pnc_register_config.json @@ -183,7 +183,7 @@ "visible": "@{showMemberTasks}", "text": "@{taskDescription}", "status": "@{serviceStatus}", - "smallSized": true, + "buttonType": "TINY", "actions": [ { "trigger": "ON_CLICK", diff --git a/android/quest/src/main/assets/configs/app/registers/practitioner_register_config.json b/android/quest/src/main/assets/configs/app/registers/practitioner_register_config.json index db7204045b..fa46574eed 100644 --- a/android/quest/src/main/assets/configs/app/registers/practitioner_register_config.json +++ b/android/quest/src/main/assets/configs/app/registers/practitioner_register_config.json @@ -103,7 +103,7 @@ "text": "CHA Visit", "status": "DUE", "fontSize": 12.0, - "smallSized": false, + "buttonType": "BIG", "actions": [ { "trigger": "ON_CLICK", diff --git a/android/quest/src/main/assets/configs/app/registers/sick_child_register_config.json b/android/quest/src/main/assets/configs/app/registers/sick_child_register_config.json index 9066a2e77f..1581fa33f9 100644 --- a/android/quest/src/main/assets/configs/app/registers/sick_child_register_config.json +++ b/android/quest/src/main/assets/configs/app/registers/sick_child_register_config.json @@ -243,7 +243,7 @@ "visible": "@{showMemberTasks}", "text": "@{taskDescription}", "status": "@{serviceStatus}", - "smallSized": true, + "buttonType": "TINY", "actions": [ { "trigger": "ON_CLICK", diff --git a/android/quest/src/main/assets/configs/app/registers/tb_register_config.json b/android/quest/src/main/assets/configs/app/registers/tb_register_config.json index 88caf9287e..76e6d86003 100644 --- a/android/quest/src/main/assets/configs/app/registers/tb_register_config.json +++ b/android/quest/src/main/assets/configs/app/registers/tb_register_config.json @@ -183,7 +183,7 @@ "visible": "@{showMemberTasks}", "text": "@{taskDescription}", "status": "@{serviceStatus}", - "smallSized": true, + "buttonType": "TINY", "actions": [ { "trigger": "ON_CLICK", diff --git a/android/quest/src/main/java/org/smartregister/fhircore/quest/ui/main/components/TopScreenSection.kt b/android/quest/src/main/java/org/smartregister/fhircore/quest/ui/main/components/TopScreenSection.kt index c546308ff3..221118a724 100644 --- a/android/quest/src/main/java/org/smartregister/fhircore/quest/ui/main/components/TopScreenSection.kt +++ b/android/quest/src/main/java/org/smartregister/fhircore/quest/ui/main/components/TopScreenSection.kt @@ -146,7 +146,7 @@ fun TopScreenSection( }, modifier = modifier - .padding(start = 16.dp, bottom = 8.dp, end = 16.dp) + .padding(start = 8.dp, bottom = 8.dp, end = 8.dp) .fillMaxWidth() .clip(RoundedCornerShape(size = 10.dp)) .background(Color.White) diff --git a/android/quest/src/main/java/org/smartregister/fhircore/quest/ui/profile/components/MemberProfileBottomSheetView.kt b/android/quest/src/main/java/org/smartregister/fhircore/quest/ui/profile/components/MemberProfileBottomSheetView.kt index 5b6cce4f5c..fc807abfd2 100644 --- a/android/quest/src/main/java/org/smartregister/fhircore/quest/ui/profile/components/MemberProfileBottomSheetView.kt +++ b/android/quest/src/main/java/org/smartregister/fhircore/quest/ui/profile/components/MemberProfileBottomSheetView.kt @@ -50,7 +50,6 @@ import kotlinx.coroutines.CoroutineScope import kotlinx.coroutines.launch import org.hl7.fhir.r4.model.ResourceType import org.smartregister.fhircore.engine.configuration.view.ButtonProperties -import org.smartregister.fhircore.engine.configuration.view.ButtonType import org.smartregister.fhircore.engine.domain.model.ResourceData import org.smartregister.fhircore.engine.ui.theme.DefaultColor import org.smartregister.fhircore.engine.ui.theme.DividerColor @@ -113,7 +112,7 @@ fun MemberProfileBottomSheetView( Spacer(modifier = modifier.height(8.dp)) buttonProperties.forEach { ActionableButton( - buttonProperties = it.copy(buttonType = ButtonType.BIG), + buttonProperties = it, resourceData = resourceData, navController = navController, ) diff --git a/android/quest/src/main/java/org/smartregister/fhircore/quest/ui/shared/components/ActionableButton.kt b/android/quest/src/main/java/org/smartregister/fhircore/quest/ui/shared/components/ActionableButton.kt index cb1d454f11..e5a001b48f 100644 --- a/android/quest/src/main/java/org/smartregister/fhircore/quest/ui/shared/components/ActionableButton.kt +++ b/android/quest/src/main/java/org/smartregister/fhircore/quest/ui/shared/components/ActionableButton.kt @@ -17,11 +17,12 @@ package org.smartregister.fhircore.quest.ui.shared.components import androidx.compose.foundation.BorderStroke +import androidx.compose.foundation.layout.PaddingValues import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.defaultMinSize import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size -import androidx.compose.foundation.layout.wrapContentHeight import androidx.compose.foundation.layout.wrapContentWidth import androidx.compose.material.ButtonDefaults import androidx.compose.material.Icon @@ -29,12 +30,12 @@ import androidx.compose.material.OutlinedButton import androidx.compose.material.Text import androidx.compose.material.icons.Icons import androidx.compose.material.icons.filled.Add -import androidx.compose.material.icons.filled.ArrowDropDown import androidx.compose.material.icons.filled.Check import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.platform.testTag +import androidx.compose.ui.text.TextStyle import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.text.style.TextOverflow @@ -94,23 +95,42 @@ fun ActionableButton( if (backgroundColor != Color.Unspecified) { backgroundColor } else { - statusColor.copy(alpha = 0.1f) + statusColor.copy(alpha = 0.08f) }, contentColor = statusColor, - disabledBackgroundColor = DefaultColor.copy(alpha = 0.1f), + disabledBackgroundColor = DefaultColor.copy(alpha = 0.08f), disabledContentColor = DefaultColor, ), modifier = modifier - .conditional(buttonProperties.fillMaxWidth, { fillMaxWidth() }, { wrapContentWidth() }) - .padding(horizontal = 12.dp, vertical = 4.dp) - .wrapContentHeight() + .conditional( + buttonProperties.fillMaxWidth, + { fillMaxWidth() }, + { wrapContentWidth() }, + ) + .conditional( + buttonProperties.buttonType == ButtonType.TINY, + { defaultMinSize(minWidth = ButtonDefaults.MinWidth, minHeight = 10.dp) }, + { + defaultMinSize( + minWidth = ButtonDefaults.MinWidth, + minHeight = ButtonDefaults.MinHeight, + ) + }, + ) .testTag(ACTIONABLE_BUTTON_TEST_TAG), enabled = buttonProperties.enabled.toBoolean(), - border = BorderStroke(width = 0.5.dp, color = statusColor.copy(alpha = 0.1f)), + border = BorderStroke(width = 0.8.dp, color = statusColor.copy(alpha = 0.1f)), elevation = null, + contentPadding = + if (buttonProperties.buttonType == ButtonType.TINY) { + PaddingValues(vertical = 2.4.dp, horizontal = 4.dp) + } else { + PaddingValues(vertical = 4.8.dp, horizontal = 8.dp) + }, ) { - // Each component here uses a new modifier to avoid inheriting the properties of the parent + // Each component here uses a new modifier to avoid inheriting the properties of the + // parent val iconTintColor = if (isButtonEnabled) { when (status) { @@ -128,7 +148,9 @@ fun ActionableButton( } else { Icon( imageVector = - if (status == ServiceStatus.COMPLETED.name) Icons.Filled.Check else Icons.Filled.Add, + if (status == ServiceStatus.COMPLETED.name) { + Icons.Filled.Check + } else Icons.Filled.Add, contentDescription = null, tint = iconTintColor, modifier = Modifier.size(16.dp), @@ -149,19 +171,10 @@ fun ActionableButton( textAlign = TextAlign.Start, overflow = TextOverflow.Ellipsis, maxLines = 1, - modifier = - Modifier.padding(horizontal = 4.dp, vertical = 4.dp) - .conditional(status == ServiceStatus.COMPLETED.name, { weight(1f) }), + modifier = Modifier.padding(2.dp), fontSize = buttonProperties.fontSize.sp, + style = TextStyle(letterSpacing = buttonProperties.letterSpacing.sp), ) - if (status == ServiceStatus.COMPLETED.name) { - Icon( - imageVector = Icons.Filled.ArrowDropDown, - contentDescription = null, - tint = DefaultColor, - modifier = Modifier.size(18.dp), - ) - } } } } @@ -175,6 +188,21 @@ fun ActionableButtonPreview() { visible = "true", status = ServiceStatus.IN_PROGRESS.name, text = "ANC Visit", + ), + resourceData = ResourceData("id", ResourceType.Patient, emptyMap()), + navController = rememberNavController(), + ) +} + +@PreviewWithBackgroundExcludeGenerated +@Composable +fun ActionableButtonTinyButtonPreview() { + ActionableButton( + buttonProperties = + ButtonProperties( + visible = "true", + status = ServiceStatus.COMPLETED.name, + text = "ANC Visit", buttonType = ButtonType.TINY, ), resourceData = ResourceData("id", ResourceType.Patient, emptyMap()), @@ -194,7 +222,7 @@ fun DisabledActionableButtonPreview() { text = "Issue household bed-nets", contentColor = "#700f2b", enabled = "true", - buttonType = ButtonType.BIG, + buttonType = ButtonType.MEDIUM, startIcon = ImageConfig(reference = "ic_walk", type = ICON_TYPE_LOCAL), ), resourceData = ResourceData("id", ResourceType.Patient, emptyMap()), @@ -214,7 +242,7 @@ fun SmallActionableButtonPreview() { status = "DUE", text = "Due Task", fillMaxWidth = true, - buttonType = ButtonType.TINY, + buttonType = ButtonType.MEDIUM, ), resourceData = ResourceData("id", ResourceType.Patient, emptyMap()), navController = rememberNavController(), diff --git a/android/quest/src/main/java/org/smartregister/fhircore/quest/ui/shared/components/CardView.kt b/android/quest/src/main/java/org/smartregister/fhircore/quest/ui/shared/components/CardView.kt index d38fb82054..e05e8914d8 100644 --- a/android/quest/src/main/java/org/smartregister/fhircore/quest/ui/shared/components/CardView.kt +++ b/android/quest/src/main/java/org/smartregister/fhircore/quest/ui/shared/components/CardView.kt @@ -20,9 +20,7 @@ import androidx.compose.foundation.background import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row -import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxWidth -import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.wrapContentWidth import androidx.compose.foundation.shape.RoundedCornerShape @@ -56,7 +54,6 @@ fun CardView( val headerActionVisible = viewProperties.headerAction?.visible.toBoolean() Column(modifier = modifier.background(viewProperties.headerBackgroundColor.parseColor())) { // Header section - Spacer(modifier = modifier.height(8.dp)) Row( modifier = modifier.fillMaxWidth(), verticalAlignment = Alignment.Top, @@ -82,7 +79,6 @@ fun CardView( } } } - Spacer(modifier = modifier.height(8.dp)) // Card section Card( elevation = viewProperties.elevation.dp, diff --git a/android/quest/src/main/java/org/smartregister/fhircore/quest/ui/shared/components/CompoundText.kt b/android/quest/src/main/java/org/smartregister/fhircore/quest/ui/shared/components/CompoundText.kt index 2f0b0668d7..9f52454654 100644 --- a/android/quest/src/main/java/org/smartregister/fhircore/quest/ui/shared/components/CompoundText.kt +++ b/android/quest/src/main/java/org/smartregister/fhircore/quest/ui/shared/components/CompoundText.kt @@ -31,6 +31,7 @@ import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip +import androidx.compose.ui.text.TextStyle import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.text.style.TextOverflow import androidx.compose.ui.unit.dp @@ -93,6 +94,7 @@ fun CompoundText( resourceData = resourceData, navController = navController, overflow = compoundTextProperties.overflow, + letterSpacing = compoundTextProperties.letterSpacing, ) } // Separate the primary and secondary text @@ -123,6 +125,7 @@ fun CompoundText( navController = navController, resourceData = resourceData, overflow = compoundTextProperties.overflow, + letterSpacing = compoundTextProperties.letterSpacing, ) } } @@ -147,6 +150,7 @@ private fun CompoundTextPart( navController: NavController, resourceData: ResourceData, overflow: TextOverFlow?, + letterSpacing: Int = 0, ) { Text( text = @@ -185,6 +189,7 @@ private fun CompoundTextPart( TextOverFlow.VISIBLE -> TextOverflow.Visible else -> TextOverflow.Ellipsis }, + style = TextStyle(letterSpacing = letterSpacing.sp), ) } diff --git a/android/quest/src/main/java/org/smartregister/fhircore/quest/ui/shared/components/ServiceCard.kt b/android/quest/src/main/java/org/smartregister/fhircore/quest/ui/shared/components/ServiceCard.kt index 36c9bd2309..48140fdb1d 100644 --- a/android/quest/src/main/java/org/smartregister/fhircore/quest/ui/shared/components/ServiceCard.kt +++ b/android/quest/src/main/java/org/smartregister/fhircore/quest/ui/shared/components/ServiceCard.kt @@ -151,41 +151,56 @@ fun ServiceCard( } // Show action button (occupies 25% of the row width) - Box( - modifier = - modifier - .weight(if (serviceCardProperties.showVerticalDivider) 0.3f else 0.4f) - .padding(top = 12.dp, bottom = 12.dp), - contentAlignment = Alignment.Center, - ) { - // Service card visibility can be determined dynamically e.g. only display when task is due - if ((serviceCardProperties.serviceButton != null || serviceCardProperties.services != null)) { - if ( - serviceCardProperties.serviceButton != null && - serviceCardProperties.serviceButton!!.visible.toBoolean() - ) { - if (serviceCardProperties.serviceButton!!.smallSized) { - Column { + // Service card visibility can be determined dynamically e.g. only display when task is due + if (serviceCardProperties.serviceButton != null || serviceCardProperties.services != null) { + if ( + serviceCardProperties.serviceButton != null && + serviceCardProperties.serviceButton!!.visible.toBoolean() + ) { + when (serviceCardProperties.serviceButton!!.buttonType) { + ButtonType.TINY, + ButtonType.MEDIUM, -> { + Column( + horizontalAlignment = Alignment.End, + modifier = + modifier.weight(if (serviceCardProperties.showVerticalDivider) 0.3f else 0.4f), + ) { ActionableButton( - buttonProperties = - serviceCardProperties.serviceButton!!.copy(buttonType = ButtonType.TINY), + buttonProperties = serviceCardProperties.serviceButton!!, + navController = navController, + resourceData = resourceData, + ) + } + } + else -> { + Box( + modifier = + modifier + .weight(if (serviceCardProperties.showVerticalDivider) 0.3f else 0.4f) + .padding(top = 8.dp, bottom = 8.dp), + contentAlignment = Alignment.Center, + ) { + BigServiceButton( + modifier = modifier, + buttonProperties = serviceCardProperties.serviceButton!!, navController = navController, resourceData = resourceData, ) } - } else { - BigServiceButton( - modifier = modifier, - buttonProperties = serviceCardProperties.serviceButton!!, - navController = navController, - resourceData = resourceData, - ) } - } else if (serviceCardProperties.services?.isNotEmpty() == true) { + } + } else if (serviceCardProperties.services?.isNotEmpty() == true) { + Box( + modifier = + modifier + .weight(if (serviceCardProperties.showVerticalDivider) 0.3f else 0.4f) + .padding(top = 8.dp, bottom = 8.dp), + contentAlignment = Alignment.Center, + ) { Column(verticalArrangement = Arrangement.spacedBy(6.dp)) { serviceCardProperties.services?.forEach { buttonProperties -> ActionableButton( - buttonProperties = buttonProperties.copy(buttonType = ButtonType.TINY), + buttonProperties = buttonProperties, navController = navController, resourceData = resourceData, ) @@ -245,7 +260,7 @@ private fun BigServiceButton( val isButtonEnabled = buttonProperties.enabled.toBoolean() val backgroundColor = buttonProperties.backgroundColor val statusColor = buttonProperties.statusColor(resourceData.computedValuesMap) - val contentColor = remember { statusColor.copy(alpha = 0.85f) } + val contentColor = remember { statusColor.copy(alpha = 0.8f) } val buttonClickable = buttonProperties.clickable.toBoolean() Column( @@ -590,7 +605,7 @@ private fun ServiceCardServiceFamilyMemberPreview() { listOf( CompoundTextProperties( viewType = ViewType.COMPOUND_TEXT, - primaryText = "John Njoroge Mwangi, F", + primaryText = "John Njoroge Mwangi, M", primaryTextColor = "#000000", ), ), @@ -610,6 +625,51 @@ private fun ServiceCardServiceFamilyMemberPreview() { } } +@PreviewWithBackgroundExcludeGenerated +@Composable +private fun ServiceCardServiceWithTinyServiceButtonPreview() { + val viewProperties = + listOf( + ColumnProperties( + viewType = ViewType.COLUMN, + children = + listOf( + ServiceCardProperties( + viewType = ViewType.SERVICE_CARD, + details = + listOf( + CompoundTextProperties( + viewType = ViewType.COMPOUND_TEXT, + primaryText = "Nelson Mandela, M", + primaryTextColor = "#000000", + ), + CompoundTextProperties( + viewType = ViewType.COMPOUND_TEXT, + primaryText = "Last visited yesterday", + primaryTextColor = "#5A5A5A", + ), + ), + showVerticalDivider = false, + serviceButton = + ButtonProperties( + status = ServiceStatus.DUE.name, + text = "ANC Visit", + buttonType = ButtonType.TINY, + ), + ), + ), + ), + ) + + Column(modifier = Modifier.padding(horizontal = 16.dp)) { + ViewRenderer( + viewProperties = viewProperties, + resourceData = ResourceData("id", ResourceType.Patient, emptyMap()), + navController = rememberNavController(), + ) + } +} + @PreviewWithBackgroundExcludeGenerated @Composable private fun ServiceCardServiceCompletedPreview() { @@ -695,7 +755,6 @@ private fun ServiceCardANCServiceDuePreview() { ButtonProperties( status = ServiceStatus.DUE.name, text = "ANC Visit", - buttonType = ButtonType.TINY, ), ), ), @@ -744,13 +803,13 @@ private fun ServiceCardANCServiceOverduePreview() { visible = "true", status = ServiceStatus.COMPLETED.name, text = "Pregnancy Outcome 1", - buttonType = ButtonType.TINY, + buttonType = ButtonType.MEDIUM, ), ButtonProperties( visible = "true", status = ServiceStatus.OVERDUE.name, text = "ANC Visit 2", - buttonType = ButtonType.TINY, + buttonType = ButtonType.MEDIUM, ), ), ), diff --git a/android/quest/src/main/res/values/colors.xml b/android/quest/src/main/res/values/colors.xml index a922221898..d781ec5f1e 100644 --- a/android/quest/src/main/res/values/colors.xml +++ b/android/quest/src/main/res/values/colors.xml @@ -1,17 +1,4 @@ - #FFBB86FC - #FF6200EE - #FF3700B3 - #FF03DAC5 - #FF018786 - #FF000000 - #FFFFFFFF - #1976D2 - #FF808080 - #FFD3D3D3 - - #F2F4F7 - #C2E0F5