Merge pull request #51 from niscy-eudiw/main

Refactor: UI Adjustments to Support dynamic TopAppBar
eu-digital-identity-wallet · Feb 21, 2025 · 84c7f14 · 84c7f14
2 parents 849e243 + 75b19c7
commit 84c7f14
Show file tree

Hide file tree

Showing 6 changed files with 147 additions and 165 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.1.3
+VERSION_NAME=0.1.4
 NAMESPACE=eu.europa.ec.eudi.rqesui
 GROUP=eu.europa.ec.eudi
 

diff --git a/.../src/main/java/eu/europa/ec/eudi/rqesui/presentation/ui/component/content/ContentError.kt b/.../src/main/java/eu/europa/ec/eudi/rqesui/presentation/ui/component/content/ContentError.kt
@@ -16,24 +16,36 @@
 
 package eu.europa.ec.eudi.rqesui.presentation.ui.component.content
 
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
 import eu.europa.ec.eudi.rqesui.domain.entities.localization.LocalizableKey
 import eu.europa.ec.eudi.rqesui.infrastructure.provider.ResourceProvider
 import eu.europa.ec.eudi.rqesui.presentation.ui.component.preview.PreviewTheme
 import eu.europa.ec.eudi.rqesui.presentation.ui.component.preview.ThemeModePreviews
 import eu.europa.ec.eudi.rqesui.presentation.ui.component.utils.SIZE_MEDIUM
+import eu.europa.ec.eudi.rqesui.presentation.ui.component.utils.VSpacer
 import eu.europa.ec.eudi.rqesui.presentation.ui.component.wrap.WrapPrimaryButton
 import org.koin.compose.koinInject
 
+internal data class ContentErrorConfig(
+    val errorTitle: String? = null,
+    val errorSubTitle: String? = null,
+    val onCancel: () -> Unit,
+    val onRetry: (() -> Unit)? = null
+)
+
 @Composable
 internal fun ContentError(
     config: ContentErrorConfig,
@@ -45,7 +57,7 @@ internal fun ContentError(
             .fillMaxSize()
             .padding(paddingValues),
     ) {
-        ContentTitle(
+        ErrorTitle(
             title = config.errorTitle
                 ?: resourceProvider.getLocalizedString(LocalizableKey.GenericErrorMessage),
             subtitle = config.errorSubTitle
@@ -70,12 +82,65 @@ internal fun ContentError(
     }
 }
 
-internal data class ContentErrorConfig(
-    val errorTitle: String? = null,
-    val errorSubTitle: String? = null,
-    val onCancel: () -> Unit,
-    val onRetry: (() -> Unit)? = null
-)
+@Composable
+private fun ErrorTitle(
+    modifier: Modifier = Modifier,
+    title: String,
+    subtitle: String? = null,
+    titleStyle: TextStyle = MaterialTheme.typography.headlineSmall.copy(
+        color = MaterialTheme.colorScheme.onSurface
+    ),
+    subtitleStyle: TextStyle = MaterialTheme.typography.bodyMedium.copy(
+        color = MaterialTheme.colorScheme.onSurface
+    ),
+    subTitleMaxLines: Int = Int.MAX_VALUE,
+) {
+    Column(
+        modifier = modifier,
+        verticalArrangement = Arrangement.Top
+    ) {
+        Text(
+            modifier = Modifier.fillMaxWidth(),
+            text = title,
+            style = titleStyle,
+        )
+        VSpacer.Large()
+
+        subtitle?.let { safeSubtitle ->
+            Text(
+                modifier = Modifier.fillMaxWidth(),
+                text = safeSubtitle,
+                style = subtitleStyle,
+                maxLines = subTitleMaxLines,
+                overflow = TextOverflow.Ellipsis
+            )
+        }
+    }
+}
+
+@ThemeModePreviews
+@Composable
+private fun ErrorTitlePreview() {
+    PreviewTheme {
+        ErrorTitle(
+            modifier = Modifier.fillMaxWidth(),
+            title = "Title",
+            subtitle = "Subtitle"
+        )
+    }
+}
+
+@ThemeModePreviews
+@Composable
+private fun ContentTitleNoSubtitlePreview() {
+    PreviewTheme {
+        ErrorTitle(
+            modifier = Modifier.fillMaxWidth(),
+            title = "Title",
+            subtitle = null
+        )
+    }
+}
 
 /**
  * Preview composable of [ContentError].

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
@@ -21,16 +21,19 @@ import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.RowScope
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.DropdownMenu
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.FabPosition
 import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.MediumTopAppBar
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
 import androidx.compose.material3.TopAppBar
+import androidx.compose.material3.TopAppBarColors
 import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.material3.minimumInteractiveComponentSize
 import androidx.compose.runtime.Composable
@@ -212,29 +215,66 @@ private fun DefaultToolBar(
     keyboardController: SoftwareKeyboardController?,
     toolbarConfig: ToolbarConfig?,
 ) {
-    TopAppBar(
-        modifier = Modifier
-            .shadow(elevation = SPACING_SMALL.dp)
-            .takeIf { toolbarConfig?.hasShadow == true } ?: Modifier,
-        title = {
-            Text(
-                text = toolbarConfig?.title.orEmpty(),
-                color = MaterialTheme.colorScheme.onSurface,
-                maxLines = 2,
-                overflow = TextOverflow.Ellipsis,
+
+    val isTitlePresent = !toolbarConfig?.title.isNullOrEmpty()
+
+    val topAppBar: @Composable (
+        modifier: Modifier,
+        title: @Composable () -> Unit,
+        navigationIcon: @Composable () -> Unit,
+        actions: @Composable RowScope.() -> Unit,
+        colors: TopAppBarColors
+    ) -> Unit = if (isTitlePresent) {
+        { modifier, title, navigationIcon, actions, colors ->
+            MediumTopAppBar(
+                modifier = modifier,
+                title = title,
+                navigationIcon = navigationIcon,
+                actions = actions,
+                colors = colors
             )
+        }
+    } else {
+        { modifier, title, navigationIcon, actions, colors ->
+            TopAppBar(
+                modifier = modifier,
+                title = title,
+                navigationIcon = navigationIcon,
+                actions = actions,
+                colors = colors
+            )
+        }
+    }
+
+    val modifier = Modifier
+        .shadow(elevation = SPACING_SMALL.dp)
+        .takeIf { toolbarConfig?.hasShadow == true } ?: Modifier
+
+    val colors = TopAppBarDefaults.topAppBarColors().copy(
+        containerColor = MaterialTheme.colorScheme.surface
+    )
+
+    topAppBar(
+        modifier,
+        {
+            if (isTitlePresent) {
+                Text(
+                    text = toolbarConfig.title,
+                    color = MaterialTheme.colorScheme.onSurface,
+                    maxLines = 2,
+                    overflow = TextOverflow.Ellipsis
+                )
+            }
         },
-        navigationIcon = {
-            // Check if we should add back/close button.
+        {
             if (navigatableAction != ScreenNavigateAction.NONE) {
-                val navigationIcon = when (navigatableAction) {
+                val icon = when (navigatableAction) {
                     ScreenNavigateAction.CANCELABLE -> AppIcons.Close
                     else -> AppIcons.ArrowBack
                 }
-
                 Row(modifier = Modifier.padding(start = SPACING_EXTRA_SMALL.dp)) {
                     WrapIconButton(
-                        iconData = navigationIcon,
+                        iconData = icon,
                         onClick = {
                             onBack?.invoke()
                             keyboardController?.hide()
@@ -244,12 +284,10 @@ private fun DefaultToolBar(
                 }
             }
         },
-        // Add toolbar actions.
-        actions = {
+        {
             ToolBarActions(toolBarActions = toolbarConfig?.actions)
         },
-        colors = TopAppBarDefaults.topAppBarColors()
-            .copy(containerColor = MaterialTheme.colorScheme.surface)
+        colors
     )
 }
 

diff --git a/.../src/main/java/eu/europa/ec/eudi/rqesui/presentation/ui/component/content/ContentTitle.kt b/.../src/main/java/eu/europa/ec/eudi/rqesui/presentation/ui/component/content/ContentTitle.kt
diff --git a/...java/eu/europa/ec/eudi/rqesui/presentation/ui/options_selection/OptionsSelectionScreen.kt b/...java/eu/europa/ec/eudi/rqesui/presentation/ui/options_selection/OptionsSelectionScreen.kt
@@ -50,8 +50,8 @@ import eu.europa.ec.eudi.rqesui.presentation.extension.openUrl
 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
 import eu.europa.ec.eudi.rqesui.presentation.ui.component.content.ScreenNavigateAction
+import eu.europa.ec.eudi.rqesui.presentation.ui.component.content.ToolbarConfig
 import eu.europa.ec.eudi.rqesui.presentation.ui.component.preview.PreviewTheme
 import eu.europa.ec.eudi.rqesui.presentation.ui.component.preview.ThemeModePreviews
 import eu.europa.ec.eudi.rqesui.presentation.ui.component.utils.OneTimeLaunchedEffect
@@ -88,6 +88,7 @@ internal fun OptionsSelectionScreen(
         navigatableAction = ScreenNavigateAction.CANCELABLE,
         onBack = { viewModel.setEvent(Event.Pop) },
         contentErrorConfig = state.error,
+        toolBarConfig = ToolbarConfig(title = state.title),
         stickyBottom = { paddingValues ->
             if (state.isBottomBarButtonVisible) {
                 state.bottomBarButtonAction?.let { safeButtonAction ->
@@ -167,7 +168,6 @@ private fun Content(
             .padding(paddingValues)
             .verticalScroll(scrollState)
     ) {
-        ContentTitle(title = state.title)
 
         safeLet(
             state.documentSelectionItem,