From 2650b02f881d94624053db966301a66280c93bae Mon Sep 17 00:00:00 2001 From: Siddharth Agarwal Date: Fri, 31 May 2024 14:36:08 +0530 Subject: [PATCH] Fix Input shell indicator bottom padding --- .../ui/designsystem/component/InputShell.kt | 128 +++++++++--------- 1 file changed, 63 insertions(+), 65 deletions(-) diff --git a/designsystem/src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/InputShell.kt b/designsystem/src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/InputShell.kt index 00d574960..22038aeb3 100644 --- a/designsystem/src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/InputShell.kt +++ b/designsystem/src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/InputShell.kt @@ -30,7 +30,6 @@ import androidx.compose.ui.focus.FocusRequester import androidx.compose.ui.focus.focusRequester import androidx.compose.ui.focus.onFocusChanged import androidx.compose.ui.graphics.Color -import androidx.compose.ui.graphics.graphicsLayer import androidx.compose.ui.input.pointer.pointerInput import androidx.compose.ui.unit.Dp import org.hisp.dhis.mobile.ui.designsystem.theme.Border @@ -85,80 +84,79 @@ internal fun InputShell( } val focusRequester = remember { FocusRequester() } - InputShellRow( - modifier = Modifier - .focusRequester(focusRequester) - .pointerInput(Unit) { - if (state != InputShellState.DISABLED) { - detectTapGestures( - onTap = { focusRequester.requestFocus() }, - ) - } - } - .onFocusChanged { - labelColor = when { - state == InputShellState.DISABLED -> InputShellState.DISABLED.color - it.isFocused && state != InputShellState.ERROR && state != InputShellState.WARNING -> InputShellState.FOCUSED.color - else -> state.color + Box { + InputShellRow( + modifier = Modifier + .focusRequester(focusRequester) + .pointerInput(Unit) { + if (state != InputShellState.DISABLED) { + detectTapGestures( + onTap = { focusRequester.requestFocus() }, + ) + } } - indicatorColor = - when { - state == InputShellState.DISABLED -> - inputStyle.disabledIndicatorColor - ?: InputShellState.DISABLED.color - + .onFocusChanged { + labelColor = when { + state == InputShellState.DISABLED -> InputShellState.DISABLED.color it.isFocused && state != InputShellState.ERROR && state != InputShellState.WARNING -> InputShellState.FOCUSED.color - state == InputShellState.UNFOCUSED -> - inputStyle.unfocusedIndicatorColor - ?: state.color - else -> state.color } - indicatorThickness = when { - state == InputShellState.DISABLED -> Border.Thin - it.isFocused -> Border.Regular - else -> Border.Thin - } - onFocusChanged?.invoke(it.isFocused) - }.padding(start = inputStyle.startIndent), - backgroundColor = backgroundColor, - ) { - Column( - Modifier - .weight(4f, false) - .padding(end = Spacing.Spacing4) - .fillMaxWidth(1f), - verticalArrangement = Arrangement.Center, - ) { - if (title.isNotEmpty()) { - val titleText = if (isRequiredField) "$title *" else title - InputShellLabelText(titleText, textColor = labelColor) - } - inputField?.invoke() - } - Row( - verticalAlignment = Alignment.CenterVertically, - modifier = Modifier.height(Spacing.Spacing48).align(Alignment.CenterVertically), + indicatorColor = + when { + state == InputShellState.DISABLED -> + inputStyle.disabledIndicatorColor + ?: InputShellState.DISABLED.color + + it.isFocused && state != InputShellState.ERROR && state != InputShellState.WARNING -> InputShellState.FOCUSED.color + state == InputShellState.UNFOCUSED -> + inputStyle.unfocusedIndicatorColor + ?: state.color + + else -> state.color + } + indicatorThickness = when { + state == InputShellState.DISABLED -> Border.Thin + it.isFocused -> Border.Regular + else -> Border.Thin + } + onFocusChanged?.invoke(it.isFocused) + }.padding(start = inputStyle.startIndent), + backgroundColor = backgroundColor, ) { - primaryButton?.invoke() - if (primaryButton != null && secondaryButton != null) { - InputShellButtonSeparator() - Spacer(modifier = Modifier.width(Spacing.Spacing4)) + Column( + Modifier + .weight(4f, false) + .padding(end = Spacing.Spacing4) + .fillMaxWidth(1f), + verticalArrangement = Arrangement.Center, + ) { + if (title.isNotEmpty()) { + val titleText = if (isRequiredField) "$title *" else title + InputShellLabelText(titleText, textColor = labelColor) + } + inputField?.invoke() } - secondaryButton?.let { - Box( - Modifier - .padding(end = Spacing.Spacing4).size(Spacing.Spacing48), - ) { - it.invoke() + Row( + verticalAlignment = Alignment.CenterVertically, + modifier = Modifier.height(Spacing.Spacing48).align(Alignment.CenterVertically), + ) { + primaryButton?.invoke() + if (primaryButton != null && secondaryButton != null) { + InputShellButtonSeparator() + Spacer(modifier = Modifier.width(Spacing.Spacing4)) + } + secondaryButton?.let { + Box( + Modifier + .padding(end = Spacing.Spacing4).size(Spacing.Spacing48), + ) { + it.invoke() + } } } } - } - Box(Modifier.height(Spacing.Spacing2)) { InputShellIndicator( - modifier = Modifier.align(Alignment.BottomStart) - .graphicsLayer { translationY = -Spacing.Spacing2.toPx() }, + modifier = Modifier.align(Alignment.BottomStart), color = indicatorColor, thickness = indicatorThickness, )