Fix Input shell indicator bottom padding

dhis2 · May 31, 2024 · 2650b02 · 2650b02
1 parent 3c6cccc
commit 2650b02
Showing 1 changed file with 63 additions and 65 deletions.
diff --git a/...system/src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/InputShell.kt b/...system/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,
             )