Merge pull request #17 from niscy-eudiw/bugfix/ui_fixes

UI fixes + sticky bottom content rework
eu-digital-identity-wallet · Nov 21, 2024 · 7cc2d0b · 7cc2d0b
2 parents 4b100b8 + 5631fc2
commit 7cc2d0b
Show file tree

Hide file tree

Showing 10 changed files with 58 additions and 66 deletions.
diff --git a/gradle.properties b/gradle.properties
@@ -25,7 +25,7 @@ TARGET_SDK_VERSION=35
 MIN_SDK_VERSION=28
 
 # PROJECT PROPERTIES
-VERSION_NAME=0.0.3-SNAPSHOT
+VERSION_NAME=0.0.4-SNAPSHOT
 NAMESPACE=eu.europa.ec.eudi.rqesui
 GROUP=eu.europa.ec.eudi
 

diff --git a/rqes-ui-sdk/src/main/java/eu/europa/ec/eudi/rqesui/presentation/entities/SelectionItemUi.kt b/rqes-ui-sdk/src/main/java/eu/europa/ec/eudi/rqesui/presentation/entities/SelectionItemUi.kt
@@ -18,12 +18,10 @@ package eu.europa.ec.eudi.rqesui.presentation.entities
 
 import androidx.compose.ui.graphics.Color
 import eu.europa.ec.eudi.rqesui.infrastructure.config.data.DocumentData
-import eu.europa.ec.eudi.rqesui.presentation.ui.component.IconData
 
 internal data class SelectionItemUi(
     val documentData: DocumentData,
     val subtitle: String? = null,
     val action: String? = null,
-    val iconData: IconData? = null,
     val iconTint: Color? = null,
 )
diff --git a/...-ui-sdk/src/main/java/eu/europa/ec/eudi/rqesui/presentation/ui/component/SelectionItem.kt b/...-ui-sdk/src/main/java/eu/europa/ec/eudi/rqesui/presentation/ui/component/SelectionItem.kt
@@ -42,7 +42,6 @@ import eu.europa.ec.eudi.rqesui.presentation.ui.component.utils.SIZE_SMALL
 import eu.europa.ec.eudi.rqesui.presentation.ui.component.utils.SPACING_LARGE
 import eu.europa.ec.eudi.rqesui.presentation.ui.component.utils.SPACING_MEDIUM
 import eu.europa.ec.eudi.rqesui.presentation.ui.component.wrap.WrapCard
-import eu.europa.ec.eudi.rqesui.presentation.ui.component.wrap.WrapIcon
 
 @Composable
 internal fun SelectionItem(
@@ -87,15 +86,12 @@ internal fun SelectionItem(
 
             data.action?.let { action ->
                 Text(
+                    modifier = Modifier.padding(start = SPACING_MEDIUM.dp),
                     text = action,
                     style = MaterialTheme.typography.labelSmall,
                     color = MaterialTheme.colorScheme.primary
                 )
             }
-
-            data.iconData?.let { iconData ->
-                WrapIcon(iconData = iconData, customTint = data.iconTint)
-            }
         }
     }
 }

diff --git a/...-ui-sdk/src/main/java/eu/europa/ec/eudi/rqesui/presentation/ui/component/TextWithBadge.kt b/...-ui-sdk/src/main/java/eu/europa/ec/eudi/rqesui/presentation/ui/component/TextWithBadge.kt
@@ -16,21 +16,20 @@
 
 package eu.europa.ec.eudi.rqesui.presentation.ui.component
 
-import androidx.compose.foundation.layout.offset
-import androidx.compose.foundation.text.InlineTextContent
-import androidx.compose.foundation.text.appendInlineContent
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.text.Placeholder
-import androidx.compose.ui.text.PlaceholderVerticalAlign
-import androidx.compose.ui.text.buildAnnotatedString
 import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.tooling.preview.PreviewParameter
 import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.sp
 import eu.europa.ec.eudi.rqesui.infrastructure.theme.values.success
 import eu.europa.ec.eudi.rqesui.presentation.ui.component.preview.PreviewTheme
+import eu.europa.ec.eudi.rqesui.presentation.ui.component.preview.TextLengthPreviewProvider
 import eu.europa.ec.eudi.rqesui.presentation.ui.component.preview.ThemeModePreviews
 import eu.europa.ec.eudi.rqesui.presentation.ui.component.utils.SPACING_EXTRA_SMALL
 import eu.europa.ec.eudi.rqesui.presentation.ui.component.wrap.WrapIcon
@@ -40,57 +39,34 @@ internal fun TextWithBadge(
     message: String,
     showBadge: Boolean
 ) {
-    val inlineContentMap = mapOf(
-        "badgeIconId" to InlineTextContent(
-            Placeholder(20.sp, 20.sp, PlaceholderVerticalAlign.TextCenter)
-        ) {
+    Row(verticalAlignment = Alignment.CenterVertically) {
+        if (showBadge) {
             WrapIcon(
+                modifier = Modifier
+                    .size(25.dp)
+                    .padding(end = SPACING_EXTRA_SMALL.dp),
                 iconData = AppIcons.Verified,
-                customTint = MaterialTheme.colorScheme.success
+                customTint = MaterialTheme.colorScheme.success,
             )
         }
-    )
-
-    val textWithBadgeData = TextWithBadgeData(
-        textAfterBadge = message,
-        showBadge = showBadge
-    )
-
-    Text(
-        modifier = Modifier
-            .offset(x = -SPACING_EXTRA_SMALL.dp)
-            .takeIf { showBadge } ?: Modifier,
-        text = textWithBadgeData.annotatedString,
-        style = MaterialTheme.typography.bodyMedium.copy(
-            color = MaterialTheme.colorScheme.onSurface,
-            fontWeight = FontWeight.Bold
-        ),
-        inlineContent = inlineContentMap
-    )
-}
-
-internal data class TextWithBadgeData(
-    private val textAfterBadge: String? = null,
-    private val showBadge: Boolean
-) {
-    val annotatedString = buildAnnotatedString {
-        if (showBadge) {
-            append(" ")
-            appendInlineContent(id = "badgeIconId")
-            append(" ")
-        }
-        if (!textAfterBadge.isNullOrEmpty()) {
-            append(textAfterBadge)
-        }
+        Text(
+            text = message,
+            style = MaterialTheme.typography.bodyMedium.copy(
+                color = MaterialTheme.colorScheme.onSurface,
+                fontWeight = FontWeight.Bold
+            )
+        )
     }
 }
 
 @ThemeModePreviews
 @Composable
-private fun TextWithBadgePreview() {
+private fun TextWithBadgePreview(
+    @PreviewParameter(TextLengthPreviewProvider::class) text: String
+) {
     PreviewTheme {
         TextWithBadge(
-            message = "Document_title.PDF",
+            message = text,
             showBadge = true
         )
     }

diff --git a/...src/main/java/eu/europa/ec/eudi/rqesui/presentation/ui/component/content/ContentScreen.kt b/...src/main/java/eu/europa/ec/eudi/rqesui/presentation/ui/component/content/ContentScreen.kt
@@ -44,6 +44,7 @@ import androidx.compose.ui.draw.shadow
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalSoftwareKeyboardController
 import androidx.compose.ui.platform.SoftwareKeyboardController
+import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.zIndex
 import eu.europa.ec.eudi.rqesui.presentation.ui.component.AppIcons
@@ -91,7 +92,7 @@ internal fun ContentScreen(
     onBack: (() -> Unit)? = null,
     topBar: @Composable (() -> Unit)? = null,
     bottomBar: @Composable (() -> Unit)? = null,
-    stickyBottom: @Composable (() -> Unit)? = null,
+    stickyBottom: @Composable ((PaddingValues) -> Unit)? = null,
     fab: @Composable () -> Unit = {},
     fabPosition: FabPosition = FabPosition.End,
     contentErrorConfig: ContentErrorConfig? = null,
@@ -120,7 +121,7 @@ internal fun ContentScreen(
     onBack: (() -> Unit)? = null,
     topBar: @Composable (() -> Unit)? = null,
     bottomBar: @Composable (() -> Unit)? = null,
-    stickyBottom: @Composable (() -> Unit)? = null,
+    stickyBottom: @Composable ((PaddingValues) -> Unit)? = null,
     fab: @Composable () -> Unit = {},
     fabPosition: FabPosition = FabPosition.End,
     contentErrorConfig: ContentErrorConfig? = null,
@@ -180,7 +181,7 @@ internal fun ContentScreen(
                                 .zIndex(Z_STICKY),
                             contentAlignment = Alignment.Center
                         ) {
-                            stickyBottomContent()
+                            stickyBottomContent(screenPaddings(padding))
                         }
                     }
                 }
@@ -213,7 +214,9 @@ private fun DefaultToolBar(
         title = {
             Text(
                 text = toolbarConfig?.title.orEmpty(),
-                color = MaterialTheme.colorScheme.onSurface
+                color = MaterialTheme.colorScheme.onSurface,
+                maxLines = 2,
+                overflow = TextOverflow.Ellipsis,
             )
         },
         navigationIcon = {

diff --git a/...n/java/eu/europa/ec/eudi/rqesui/presentation/ui/component/preview/PreviewDataProviders.kt b/...n/java/eu/europa/ec/eudi/rqesui/presentation/ui/component/preview/PreviewDataProviders.kt
@@ -26,6 +26,6 @@ internal class TextLengthPreviewProvider : PreviewParameterProvider<String> {
         get() = sequenceOf(
             "Short Text",
             "A bit longer text.",
-            "This one is really, really long. Like, really long!"
+            "This one is really, really long. Like, really long!This one is really, really long. Like, really long!"
         )
 }
diff --git a/.../main/java/eu/europa/ec/eudi/rqesui/presentation/ui/component/wrap/WrapBottomBarButton.kt b/.../main/java/eu/europa/ec/eudi/rqesui/presentation/ui/component/wrap/WrapBottomBarButton.kt
@@ -18,7 +18,10 @@ package eu.europa.ec.eudi.rqesui.presentation.ui.component.wrap
 
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.calculateEndPadding
+import androidx.compose.foundation.layout.calculateStartPadding
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.HorizontalDivider
@@ -27,6 +30,7 @@ import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.LayoutDirection
 import androidx.compose.ui.unit.dp
 import eu.europa.ec.eudi.rqesui.infrastructure.theme.values.divider
 import eu.europa.ec.eudi.rqesui.presentation.ui.component.preview.PreviewTheme
@@ -42,12 +46,14 @@ private sealed interface StickyBottomBarConfig {
 internal fun WrapBottomBarPrimaryButton(
     buttonText: String,
     enabled: Boolean = true,
+    padding: PaddingValues,
     onButtonClick: () -> Unit,
 ) {
     WrapStickyBottomBar(
         config = StickyBottomBarConfig.Primary,
         buttonText = buttonText,
         enabled = enabled,
+        padding = padding,
         onButtonClick = onButtonClick,
     )
 }
@@ -56,12 +62,14 @@ internal fun WrapBottomBarPrimaryButton(
 internal fun WrapBottomBarSecondaryButton(
     buttonText: String,
     enabled: Boolean = true,
+    padding: PaddingValues,
     onButtonClick: () -> Unit,
 ) {
     WrapStickyBottomBar(
         config = StickyBottomBarConfig.Secondary,
         buttonText = buttonText,
         enabled = enabled,
+        padding = padding,
         onButtonClick = onButtonClick,
     )
 }
@@ -71,10 +79,13 @@ private fun WrapStickyBottomBar(
     config: StickyBottomBarConfig,
     buttonText: String,
     enabled: Boolean,
+    padding: PaddingValues,
     onButtonClick: () -> Unit,
 ) {
     Column(
         modifier = Modifier.fillMaxWidth(),
+        verticalArrangement = Arrangement.Top,
+        horizontalAlignment = Alignment.CenterHorizontally
     ) {
         HorizontalDivider(
             thickness = 1.dp,
@@ -84,7 +95,12 @@ private fun WrapStickyBottomBar(
         Row(
             modifier = Modifier
                 .fillMaxWidth()
-                .padding(all = SPACING_LARGE.dp),
+                .padding(
+                    top = padding.calculateBottomPadding(),
+                    bottom = padding.calculateBottomPadding(),
+                    start = padding.calculateStartPadding(LayoutDirection.Ltr),
+                    end = padding.calculateEndPadding(LayoutDirection.Ltr)
+                ),
             verticalAlignment = Alignment.CenterVertically,
             horizontalArrangement = Arrangement.Center
         ) {
@@ -141,6 +157,7 @@ private fun WrapBottomBarPrimaryButtonPreview() {
     PreviewTheme {
         WrapBottomBarPrimaryButton(
             buttonText = "Sign",
+            padding = PaddingValues(SPACING_LARGE.dp),
             onButtonClick = {},
         )
     }
@@ -152,6 +169,7 @@ private fun WrapBottomBarSecondaryButtonPreview() {
     PreviewTheme {
         WrapBottomBarSecondaryButton(
             buttonText = "Sign",
+            padding = PaddingValues(SPACING_LARGE.dp),
             onButtonClick = {},
         )
     }

diff --git a/...va/eu/europa/ec/eudi/rqesui/presentation/ui/select_certificate/SelectCertificateScreen.kt b/...va/eu/europa/ec/eudi/rqesui/presentation/ui/select_certificate/SelectCertificateScreen.kt
@@ -59,7 +59,6 @@ import eu.europa.ec.eudi.rqesui.presentation.entities.SelectionItemUi
 import eu.europa.ec.eudi.rqesui.presentation.extension.finish
 import eu.europa.ec.eudi.rqesui.presentation.extension.openUrl
 import eu.europa.ec.eudi.rqesui.presentation.extension.throttledClickable
-import eu.europa.ec.eudi.rqesui.presentation.ui.component.AppIcons
 import eu.europa.ec.eudi.rqesui.presentation.ui.component.SelectionItem
 import eu.europa.ec.eudi.rqesui.presentation.ui.component.content.ContentScreen
 import eu.europa.ec.eudi.rqesui.presentation.ui.component.content.ContentTitle
@@ -104,10 +103,11 @@ internal fun SelectCertificateScreen(
         navigatableAction = ScreenNavigateAction.CANCELABLE,
         onBack = { viewModel.setEvent(Event.Pop) },
         contentErrorConfig = state.error,
-        stickyBottom = {
+        stickyBottom = { paddingValues ->
             WrapBottomBarPrimaryButton(
                 buttonText = state.bottomBarButtonText,
                 enabled = state.isBottomBarButtonEnabled,
+                padding = paddingValues,
                 onButtonClick = {
                     viewModel.setEvent(
                         Event.BottomBarButtonPressed
@@ -352,7 +352,6 @@ private fun SelectCertificateScreenPreview() {
                         uri = "".toUri()
                     ),
                     subtitle = "Signed by: Entrust",
-                    iconData = AppIcons.Verified,
                     iconTint = ThemeColors.success
                 ),
                 certificatesSectionTitle = "Please confirm signing with one of the following certificates:",

diff --git a/...dk/src/main/java/eu/europa/ec/eudi/rqesui/presentation/ui/select_qtsp/SelectQtspScreen.kt b/...dk/src/main/java/eu/europa/ec/eudi/rqesui/presentation/ui/select_qtsp/SelectQtspScreen.kt
@@ -77,9 +77,10 @@ internal fun SelectQtspScreen(
         navigatableAction = ScreenNavigateAction.CANCELABLE,
         onBack = { viewModel.setEvent(Event.Pop) },
         contentErrorConfig = state.error,
-        stickyBottom = {
+        stickyBottom = { paddingValues ->
             WrapBottomBarPrimaryButton(
                 buttonText = state.bottomBarButtonText,
+                padding = paddingValues,
                 onButtonClick = {
                     viewModel.setEvent(
                         Event.BottomBarButtonPressed

diff --git a/rqes-ui-sdk/src/main/java/eu/europa/ec/eudi/rqesui/presentation/ui/success/SuccessScreen.kt b/rqes-ui-sdk/src/main/java/eu/europa/ec/eudi/rqesui/presentation/ui/success/SuccessScreen.kt
@@ -81,10 +81,11 @@ internal fun SuccessScreen(
         isLoading = state.isLoading,
         navigatableAction = ScreenNavigateAction.NONE,
         contentErrorConfig = state.error,
-        stickyBottom = {
+        stickyBottom = { paddingValues ->
             WrapBottomBarSecondaryButton(
                 buttonText = state.bottomBarButtonText,
                 enabled = state.isBottomBarButtonEnabled,
+                padding = paddingValues,
                 onButtonClick = {
                     viewModel.setEvent(
                         Event.BottomBarButtonPressed