Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: [ANDROAPP-6744] correct bottom sheet issues #343

Merged
merged 4 commits into from
Jan 13, 2025
Merged

fix: [ANDROAPP-6744] correct bottom sheet issues #343

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
01f9888
fix: [ANDROAPP-6744] correct bottom sheet issues
xavimolloy Jan 13, 2025
17e9b4c
fix: [ANDROAPP-6744] add padding to org bottom sheet dialog
xavimolloy Jan 13, 2025
26f5e43
fix: [ANDROAPP-6744] modify org bottom sheet padding and touch up shadow
xavimolloy Jan 13, 2025
49b7fc3
fix: [ANDROAPP-6744] center content in new bottomsheet column
xavimolloy Jan 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
77 changes: 42 additions & 35 deletions common/src/commonMain/kotlin/org/hisp/dhis/common/screens/bottomSheets/BottomSheetScreen.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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(
Expand Down
59 changes: 18 additions & 41 deletions ...ystem/src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/BottomSheet.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,11 @@ 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
import androidx.compose.foundation.layout.WindowInsets
import androidx.compose.foundation.layout.asPaddingValues
import androidx.compose.foundation.layout.fillMaxWidth
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.systemBars
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.icons.Icons
Expand All @@ -37,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
Expand All @@ -54,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
Expand Down Expand Up @@ -224,15 +220,19 @@ fun BottomSheetShell(
val canScrollForward by derivedStateOf { contentScrollState.canScrollForward }

Column(
modifier = Modifier.padding(
bottom = WindowInsets.systemBars.asPaddingValues().calculateBottomPadding(),
),
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)
.background(SurfaceColor.SurfaceBright, Shape.ExtraLargeTop)
.padding(top = Spacing24),
.padding(top = Spacing24)
.then(scrollColumnShadow),
) {
val hasSearch =
searchQuery != null && onSearchQueryChanged != null && onSearch != null
Expand Down Expand Up @@ -294,41 +294,18 @@ fun BottomSheetShell(
verticalArrangement = spacedBy(Spacing8),
) {
content.invoke()
if (showSectionDivider) {
HorizontalDivider(
modifier = Modifier.fillMaxWidth(),
color = TextColor.OnDisabledSurface,
thickness = Border.Thin,
)
}
}
}
if (showSectionDivider && !canScrollForward) {
HorizontalDivider(
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()
}
}
}
Expand Down
3 changes: 0 additions & 3 deletions ...em/src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/OrgBottomSheet.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -109,7 +108,6 @@ fun OrgBottomSheet(
onSearch?.invoke(searchQuery)
},
onSearch = onSearch,
scrollableContainerMinHeight = InternalSizeValues.Size386,
scrollableContainerMaxHeight = maxOf(orgTreeHeightInDp, InternalSizeValues.Size386),
content = {
OrgTreeList(
Expand Down Expand Up @@ -227,7 +225,6 @@ fun OrgUnitSelectorItem(
modifier = modifier
.testTag("$ITEM_TEST_TAG${orgTreeItem.label}")
.fillMaxWidth()
.background(Color.White)
.clickable(
enabled = orgTreeItem.hasChildren,
interactionSource = remember {
Expand Down
34 changes: 34 additions & 0 deletions designsystem/src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/theme/Shadow.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import androidx.compose.ui.geometry.Size
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
Expand Down Expand Up @@ -83,6 +84,39 @@ internal fun Modifier.buttonShadow(
},
)

fun Modifier.innerShadow(
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

could this modifier be internal to not expose it?

blur: Dp = 10.dp,
): Modifier = this.then(
drawBehind {
val shadowSize = Size(size.width, 24.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())
// 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,
Expand Down
Loading