Merge pull request #346 from dhis2/release/0.4.1-SNAPSHOT

Release/0.4.1 to develop
dhis2 · Jan 15, 2025 · 2ebad5a · 2ebad5a
2 parents 8c1dbff + 7de6195
commit 2ebad5a
Show file tree

Hide file tree

Showing 6 changed files with 108 additions and 82 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # DHIS2 Mobile UI
 
-Dhis2 Mobile UI library documentation, installation and usage is explained in [DHIS2 Developer portal](https://developers.dhis2.org/mobile/mobile-ui/overview)
+Dhis2 Mobile UI library documentation, installation and usage is explained in [DHIS2 Developer portal](https://developers.dhis2.org/docs/mobile/mobile-ui/overview)
 
 ## Compose Compiler Reports
 

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
@@ -1,11 +1,13 @@
 package org.hisp.dhis.common.screens.bottomSheets
 
+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.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
@@ -34,6 +36,7 @@ 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.theme.Spacing
 import org.hisp.dhis.mobile.ui.designsystem.theme.SurfaceColor
 
 @Composable
@@ -191,41 +194,45 @@ fun BottomSheetScreen() {
             subtitle = "Subtitle",
             description = lorem,
             buttonBlock = {
-                ButtonBlock(
-                    primaryButton = {
-                        Button(
-                            style = ButtonStyle.OUTLINED,
-                            icon = {
-                                Icon(
-                                    imageVector = Icons.Filled.Add,
-                                    contentDescription = "Button",
-                                )
-                            },
-                            enabled = true,
-                            text = "Label",
-                            onClick = {
-                                showBottomSheetShellTwoButtons = false
-                            },
-                            modifier = Modifier.fillMaxWidth(),
-                        )
-                    },
-                    secondaryButton = {
-                        Button(
-                            style = ButtonStyle.FILLED,
-                            icon = {
-                                Icon(
-                                    imageVector = Icons.Filled.Add,
-                                    contentDescription = "Button",
-                                )
-                            },
-                            enabled = true,
-                            text = "Label",
-                            onClick = {
-                            },
-                            modifier = Modifier.fillMaxWidth(),
-                        )
-                    },
-                )
+                Row(
+                    modifier = Modifier.padding(Spacing.Spacing24),
+                    verticalAlignment = Alignment.CenterVertically,
+                    horizontalArrangement = Arrangement.SpaceBetween,
+                ) {
+                    Button(
+                        modifier = Modifier.weight(0.5f),
+                        style = ButtonStyle.OUTLINED,
+                        icon = {
+                            Icon(
+                                imageVector = Icons.Filled.Add,
+                                contentDescription = "Button",
+                            )
+                        },
+                        enabled = true,
+                        text = "Label",
+                        onClick = {
+                            showBottomSheetShellTwoButtons = false
+                        },
+
+                    )
+
+                    Spacer(Modifier.size(Spacing.Spacing8))
+                    Button(
+                        modifier = Modifier.weight(0.5f),
+
+                        style = ButtonStyle.FILLED,
+                        icon = {
+                            Icon(
+                                imageVector = Icons.Filled.Add,
+                                contentDescription = "Button",
+                            )
+                        },
+                        enabled = true,
+                        text = "Label",
+                        onClick = {
+                        },
+                    )
+                }
             },
             icon = {
                 Icon(

diff --git a/...ystem/src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/BottomSheet.kt b/...ystem/src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/BottomSheet.kt
@@ -4,6 +4,7 @@ import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.foundation.ScrollState
 import androidx.compose.foundation.background
 import androidx.compose.foundation.gestures.ScrollableState
+import androidx.compose.foundation.layout.Arrangement.spacedBy
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
@@ -12,7 +13,6 @@ import androidx.compose.foundation.layout.heightIn
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.requiredHeight
 import androidx.compose.foundation.layout.size
-import androidx.compose.foundation.layout.systemBarsPadding
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.icons.Icons
@@ -34,7 +34,6 @@ import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.shadow
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.Dp
@@ -51,7 +50,7 @@ import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing.Spacing24
 import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing.Spacing8
 import org.hisp.dhis.mobile.ui.designsystem.theme.SurfaceColor
 import org.hisp.dhis.mobile.ui.designsystem.theme.TextColor
-import org.hisp.dhis.mobile.ui.designsystem.theme.Color as ThemeColor
+import org.hisp.dhis.mobile.ui.designsystem.theme.innerShadow
 
 /**
  * DHIS2 [BottomSheetHeader] component designed to be used
@@ -199,8 +198,7 @@ fun BottomSheetShell(
         sheetState = sheetState,
         dragHandle = {
             Box(
-                modifier = Modifier.background(Color.Transparent)
-                    .padding(top = Spacing.Spacing72),
+                modifier = Modifier.padding(top = Spacing.Spacing72),
             ) {
                 BottomSheetIconButton(
                     icon = {
@@ -222,8 +220,13 @@ fun BottomSheetShell(
         val canScrollForward by derivedStateOf { contentScrollState.canScrollForward }
 
         Column(
-            modifier = Modifier.systemBarsPadding(),
+            modifier = Modifier.padding(bottom = Spacing0).background(SurfaceColor.SurfaceBright, Shape.ExtraLargeTop),
         ) {
+            val scrollColumnShadow = if (canScrollForward) {
+                Modifier.innerShadow(blur = 32.dp)
+            } else {
+                Modifier
+            }
             Column(
                 modifier = Modifier
                     .weight(1f, fill = false)
@@ -280,51 +283,33 @@ fun BottomSheetShell(
                     } else {
                         Modifier
                     }
-
                     Column(
-                        modifier = Modifier
-                            .padding(horizontal = Spacing24)
-                            .heightIn(scrollableContainerMinHeight, scrollableContainerMaxHeight)
-                            .then(scrollModifier),
+                        Modifier
+                            .then(scrollColumnShadow),
                         horizontalAlignment = Alignment.CenterHorizontally,
                     ) {
-                        content.invoke()
-                        Spacer(modifier = Modifier.weight(1f))
-                        if (showSectionDivider) {
+                        Column(
+                            modifier = Modifier
+                                .padding(horizontal = Spacing24)
+                                .heightIn(scrollableContainerMinHeight, scrollableContainerMaxHeight)
+                                .then(scrollModifier),
+                            horizontalAlignment = Alignment.CenterHorizontally,
+                            verticalArrangement = spacedBy(Spacing8),
+                        ) {
+                            content.invoke()
+                        }
+                        if (showSectionDivider && !canScrollForward) {
                             HorizontalDivider(
-                                modifier = Modifier.fillMaxWidth().padding(top = Spacing8),
+                                modifier = Modifier.fillMaxWidth().padding(horizontal = Spacing24),
                                 color = TextColor.OnDisabledSurface,
                                 thickness = Border.Thin,
                             )
                         }
                     }
                 }
             }
-
-            val shadowModifier = if (canScrollForward && content != null) {
-                Modifier.shadow(
-                    elevation = 32.dp,
-                    ambientColor = ThemeColor.Blue900,
-                    spotColor = ThemeColor.Blue900,
-                )
-            } else {
-                Modifier
-            }
-
-            Box(
-                Modifier.fillMaxWidth()
-                    .then(shadowModifier)
-                    .background(SurfaceColor.SurfaceBright)
-                    .padding(
-                        start = Spacing24,
-                        top = Spacing24,
-                        end = Spacing24,
-                        bottom = Spacing24,
-                    ),
-                contentAlignment = Alignment.BottomCenter,
-            ) {
-                buttonBlock?.invoke()
-                Spacer(Modifier.size(Spacing8))
+            buttonBlock?.let {
+                buttonBlock.invoke()
             }
         }
     }

diff --git a/...em/src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/OrgBottomSheet.kt b/...em/src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/OrgBottomSheet.kt
@@ -30,7 +30,6 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.graphics.vector.rememberVectorPainter
 import androidx.compose.ui.layout.onGloballyPositioned
@@ -109,7 +108,6 @@ fun OrgBottomSheet(
             onSearch?.invoke(searchQuery)
         },
         onSearch = onSearch,
-        scrollableContainerMinHeight = InternalSizeValues.Size386,
         scrollableContainerMaxHeight = maxOf(orgTreeHeightInDp, InternalSizeValues.Size386),
         content = {
             OrgTreeList(
@@ -130,6 +128,7 @@ fun OrgBottomSheet(
         buttonBlock = {
             Row(
                 verticalAlignment = Alignment.CenterVertically,
+                modifier = Modifier.padding(Spacing.Spacing24),
             ) {
                 if (onClearAll != null) {
                     Button(
@@ -227,7 +226,6 @@ fun OrgUnitSelectorItem(
         modifier = modifier
             .testTag("$ITEM_TEST_TAG${orgTreeItem.label}")
             .fillMaxWidth()
-            .background(Color.White)
             .clickable(
                 enabled = orgTreeItem.hasChildren,
                 interactionSource = remember {

diff --git a/designsystem/src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/theme/Shadow.kt b/designsystem/src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/theme/Shadow.kt
@@ -9,9 +9,11 @@ import androidx.compose.ui.draw.drawBehind
 import androidx.compose.ui.draw.drawWithCache
 import androidx.compose.ui.geometry.CornerRadius
 import androidx.compose.ui.geometry.Size
+import androidx.compose.ui.graphics.ClipOp
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.NativePaint
 import androidx.compose.ui.graphics.Paint
+import androidx.compose.ui.graphics.RectangleShape
 import androidx.compose.ui.graphics.Shape
 import androidx.compose.ui.graphics.drawOutline
 import androidx.compose.ui.graphics.drawscope.drawIntoCanvas
@@ -83,6 +85,40 @@ internal fun Modifier.buttonShadow(
     },
 )
 
+internal fun Modifier.innerShadow(
+    blur: Dp = 10.dp,
+): Modifier = this.then(
+    drawBehind {
+        val shadowSize = Size(size.width, 12.dp.toPx())
+        val shadowOutline = RectangleShape.createOutline(shadowSize, layoutDirection, this)
+
+        // Create a Paint object
+        val paint = Paint()
+        // Apply specified color
+        paint.color = TextColor.OnSurfaceVariant.copy(alpha = 0.3f)
+
+        // Check for valid blur radius
+        if (blur.toPx() > 0) {
+            paint.asFrameworkPaint().apply {
+                // Apply blur to the Paint
+                paintBlur(blur.toPx())
+            }
+        }
+
+        drawIntoCanvas { canvas ->
+            // Save the canvas state
+            canvas.save()
+            // Translate to specified offsets
+            canvas.translate(Spacing.Spacing0.toPx(), size.height - 12.dp.toPx())
+            canvas.clipRect(0f, size.height - 12.dp.toPx(), size.width, size.height - 12.dp.toPx(), ClipOp.Difference)
+            // Draw the shadow
+            canvas.drawOutline(shadowOutline, paint)
+            // Restore the canvas state
+            canvas.restore()
+        }
+    },
+)
+
 internal fun Modifier.iconCardShadow(
     color: Color = SurfaceColor.ContainerHighest,
     borderRadius: Dp = Radius.NoRounding,

diff --git a/docs/getting-started.md b/docs/getting-started.md
@@ -30,7 +30,7 @@ In the module **build.gradle.kts**:
 
 ```kotlin
 dependencies {
-    implementation("org.hisp.dhis.mobile:designsystem-android:0.3.0")
+    implementation("org.hisp.dhis.mobile:designsystem-android:0.4.1")
 }
 ```
 
@@ -40,7 +40,7 @@ In the module **build.gradle.kts**:
 
 ```kotlin
 dependencies {
-    implementation("org.hisp.dhis.mobile:designsystem-desktop:0.3.0")
+    implementation("org.hisp.dhis.mobile:designsystem-desktop:0.4.1")
 }
 ```
 
@@ -50,7 +50,7 @@ In the module **build.gradle.kts**:
 
 ```kotlin
 dependencies {
-    implementation("org.hisp.dhis.mobile:designsystem:0.3.0")
+    implementation("org.hisp.dhis.mobile:designsystem:0.4.1")
 }
 ```