feat: create component - top app bar

NOTICE.txt

@@ -112,6 +112,9 @@ theme-orange/src/main/res/drawable/ic_orange_component_link_previous.xml
 theme-orange/src/main/res/drawable/ic_orange_component_radio_button_selected.xml
 theme-orange/src/main/res/drawable/ic_orange_component_switch_selected_switch.xml
 theme-orange/src/main/res/drawable/ic_orange_component_tag_close.xml
+theme-orange/src/main/res/drawable/ic_orange_functional_actions_delete.xml
+theme-orange/src/main/res/drawable/ic_orange_functional_navigation_form_chevron_left.xml
+theme-orange/src/main/res/drawable/ic_orange_functional_navigation_menu.xml
 
 theme-sosh/src/main/res/drawable/ic_sosh_component_alert_important_fill.xml
 theme-sosh/src/main/res/drawable/ic_sosh_component_alert_info_fill.xml
@@ -126,6 +129,9 @@ theme-sosh/src/main/res/drawable/ic_sosh_component_link_previous.xml
 theme-sosh/src/main/res/drawable/ic_sosh_component_radio_button_selected.xml
 theme-sosh/src/main/res/drawable/ic_sosh_component_switch_selected_switch.xml
 theme-sosh/src/main/res/drawable/ic_sosh_component_tag_close.xml
+theme-sosh/src/main/res/drawable/ic_sosh_functional_actions_delete.xml
+theme-sosh/src/main/res/drawable/ic_sosh_functional_navigation_form_chevron_left.xml
+theme-sosh/src/main/res/drawable/ic_sosh_functional_navigation_menu.xml
 theme-sosh/src/main/res/font/sosh_black.ttf
 theme-sosh/src/main/res/font/sosh_bold.ttf
 theme-sosh/src/main/res/font/sosh_medium.ttf
@@ -145,6 +151,9 @@ theme-wireframe/src/main/res/drawable/ic_wireframe_component_link_previous.xml
 theme-wireframe/src/main/res/drawable/ic_wireframe_component_radio_button_selected.xml
 theme-wireframe/src/main/res/drawable/ic_wireframe_component_switch_selected_switch.xml
 theme-wireframe/src/main/res/drawable/ic_wireframe_component_tag_close.xml
+theme-wireframe/src/main/res/drawable/ic_wireframe_functional_actions_delete.xml
+theme-wireframe/src/main/res/drawable/ic_wireframe_functional_navigation_form_chevron_left.xml
+theme-wireframe/src/main/res/drawable/ic_wireframe_functional_navigation_menu.xml
 
 End of the parts list under Orange SA Copyright
 

app/src/main/java/com/orange/ouds/app/ui/BottomBar.kt

@@ -12,6 +12,7 @@
 
 package com.orange.ouds.app.ui
 
+import android.os.Build
 import androidx.annotation.StringRes
 import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.animation.animateColorAsState
@@ -24,10 +25,12 @@ import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.WindowInsetsSides
 import androidx.compose.foundation.layout.consumeWindowInsets
+import androidx.compose.foundation.layout.displayCutout
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.navigationBars
 import androidx.compose.foundation.layout.only
 import androidx.compose.foundation.layout.windowInsetsBottomHeight
+import androidx.compose.foundation.layout.windowInsetsPadding
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
@@ -46,7 +49,7 @@ import com.orange.ouds.core.theme.OudsTheme
 
 @Composable
 fun BottomBar(currentRoute: String, navigateToRoute: (String) -> Unit, modifier: Modifier = Modifier, visible: Boolean = true) {
-    Column {
+    Column(modifier = Modifier.windowInsetsPadding(WindowInsets.displayCutout.only(WindowInsetsSides.Horizontal))) {
         val systemNavigationBackgroundColor = OudsTheme.colorScheme.background.secondary //TODO Temporary color. Waiting for Material colors from Maxime.
         AnimatedVisibility(
             visible = visible,
@@ -63,7 +66,7 @@ fun BottomBar(currentRoute: String, navigateToRoute: (String) -> Unit, modifier:
                     )
                 },
                 modifier = modifier.consumeWindowInsets(WindowInsets.navigationBars.only(WindowInsetsSides.Bottom)),
-                translucent = true
+                translucent = Build.VERSION.SDK_INT > Build.VERSION_CODES.S_V2
             )
         }
         val systemNavigationBarBackgroundColor by animateColorAsState(if (visible) systemNavigationBackgroundColor else MaterialTheme.colorScheme.surface)

app/src/main/java/com/orange/ouds/app/ui/MainScreen.kt

@@ -99,18 +99,20 @@ fun MainScreen(
     var changeThemeDialogVisible by rememberSaveable { mutableStateOf(false) }
     var changeThemeSettingsDialogVisible by rememberSaveable { mutableStateOf(false) }
 
-    val hazeState = rememberHazeState(blurEnabled = true)
-
     OudsTheme(
         theme = mainState.themeState.currentTheme,
         darkThemeEnabled = isSystemInDarkTheme,
     ) {
+        val hazeState = rememberHazeState(blurEnabled = true)
+        val hazeStyle = HazeStyle(tint = null, blurRadius = OudsTheme.components.bar.blurRadius.dp)
+
         CompositionLocalProvider(LocalThemeDrawableResources provides ThemeDrawableResources(mainState.themeState.currentTheme)) {
             Scaffold(
                 contentWindowInsets = ScaffoldDefaults.contentWindowInsets.union(WindowInsets.displayCutout),
                 topBar = {
                     val context = LocalContext.current
                     TopBar(
+                        modifier = Modifier.hazeEffect(state = hazeState, style = hazeStyle),
                         topBarState = mainState.topBarState,
                         upPress = mainState.navigationState::upPress,
                         onActionClick = { action ->
@@ -124,10 +126,7 @@ fun MainScreen(
                 },
                 bottomBar = {
                     BottomBar(
-                        modifier = Modifier.hazeEffect(
-                            state = hazeState,
-                            style = HazeStyle(tint = null, blurRadius = OudsTheme.components.navigationBar.blurRadius.dp)
-                        ),
+                        modifier = Modifier.hazeEffect(state = hazeState, style = hazeStyle),
                         currentRoute = mainState.navigationState.currentRoute.orEmpty(),
                         navigateToRoute = { route ->
                             mainState.navigationState.navigateToBottomBarRoute(route)
@@ -137,7 +136,7 @@ fun MainScreen(
                 }
             ) { innerPadding ->
                 val paddingValues = PaddingValues(
-                    top = innerPadding.calculateTopPadding(),
+                    top = 0.dp,
                     bottom = WindowInsets.navigationBars.asPaddingValues().calculateBottomPadding(),
                     start = innerPadding.calculateStartPadding(LocalLayoutDirection.current),
                     end = innerPadding.calculateEndPadding(LocalLayoutDirection.current)

app/src/main/java/com/orange/ouds/app/ui/TopBar.kt

@@ -12,42 +12,39 @@
 
 package com.orange.ouds.app.ui
 
-import androidx.compose.foundation.Image
+import android.os.Build
 import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.WindowInsetsSides
 import androidx.compose.foundation.layout.displayCutout
 import androidx.compose.foundation.layout.only
 import androidx.compose.foundation.layout.windowInsetsPadding
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.automirrored.filled.ArrowBack
 import androidx.compose.material3.ExperimentalMaterial3Api
-import androidx.compose.material3.Icon
-import androidx.compose.material3.IconButton
-import androidx.compose.material3.Text
-import androidx.compose.material3.TopAppBar
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.ColorFilter
+import androidx.compose.ui.graphics.painter.Painter
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.semantics.isTraversalGroup
-import androidx.compose.ui.semantics.semantics
-import androidx.compose.ui.semantics.traversalIndex
 import androidx.compose.ui.tooling.preview.PreviewLightDark
 import com.orange.ouds.app.R
+import com.orange.ouds.app.ui.utilities.LightDarkResourceId
 import com.orange.ouds.app.ui.utilities.LocalThemeDrawableResources
 import com.orange.ouds.app.ui.utilities.composable.AppPreview
-import com.orange.ouds.core.theme.OudsTheme
+import com.orange.ouds.app.ui.utilities.painterResource
+import com.orange.ouds.core.component.OudsTopAppBar
+import com.orange.ouds.core.component.OudsTopAppBarAction
+import com.orange.ouds.core.component.OudsTopAppBarNavigationIcon
 
 
 @Composable
 fun TopBar(
     topBarState: TopBarState,
     upPress: () -> Unit,
-    onActionClick: (TopBarAction) -> Unit
+    onActionClick: (TopBarAction) -> Unit,
+    modifier: Modifier = Modifier
 ) {
     TopBar(
+        modifier = modifier,
         title = topBarState.title,
         showNavigationIcon = topBarState.showNavigationIcon,
         actions = topBarState.actions,
@@ -63,74 +60,46 @@ private fun TopBar(
     title: String,
     actions: List<TopBarAction>,
     upPress: () -> Unit,
-    onActionClick: (TopBarAction) -> Unit
+    onActionClick: (TopBarAction) -> Unit,
+    modifier: Modifier = Modifier
 ) {
-    TopAppBar(
-        modifier = Modifier
-            .semantics { isTraversalGroup = true }
-            .windowInsetsPadding(WindowInsets.displayCutout.only(WindowInsetsSides.Horizontal)),
-        navigationIcon = {
-            if (showNavigationIcon) {
-                IconButton(onClick = upPress) {
-                    Image(
-                        imageVector = Icons.AutoMirrored.Filled.ArrowBack,
-                        contentDescription = stringResource(id = R.string.app_common_back_a11y),
-                        colorFilter = ColorFilter.tint(OudsTheme.colorScheme.content.default)
-                    )
-                }
-            }
-        },
-        title = {
-            Text(
-                text = title,
-                color = OudsTheme.colorScheme.content.default,
-                modifier = Modifier.semantics { traversalIndex = -1f },
-                style = OudsTheme.typography.heading.medium
+    OudsTopAppBar(
+        modifier = modifier.windowInsetsPadding(WindowInsets.displayCutout.only(WindowInsetsSides.Horizontal)),
+        translucent = Build.VERSION.SDK_INT > Build.VERSION_CODES.S_V2,
+        title = title,
+        navigationIcon = if (showNavigationIcon) OudsTopAppBarNavigationIcon.Back(onClick = upPress) else null,
+        actions = actions.map { action ->
+            OudsTopAppBarAction.Icon(
+                painter = action.painter,
+                contentDescription = action.contentDescription,
+                onClick = { onActionClick(action) }
             )
-        },
-        actions = {
-            actions.map { it.TopBarIconButton(onActionClick = onActionClick) }
         }
     )
 }
 
 enum class TopBarAction {
     ChangeThemeSettings, ChangeTheme, ChangeMode;
 
-    @Composable
-    fun TopBarIconButton(onActionClick: (TopBarAction) -> Unit) = when (this) {
-        ChangeThemeSettings -> ChangeThemeSettingsAction(onActionClick)
-        ChangeTheme -> ChangeThemeAction(onActionClick)
-        ChangeMode -> ChangeModeAction(onActionClick)
-    }
-}
-
-@Composable
-private fun ChangeThemeSettingsAction(onClick: (TopBarAction) -> Unit) {
-    IconButton(onClick = { onClick(TopBarAction.ChangeThemeSettings) }) {
-        Icon(
-            painter = painterResource(id = LocalThemeDrawableResources.current.filters),
-            contentDescription = stringResource(id = R.string.app_topBar_themeSettings_button_a11y)
-        )
-    }
-}
-
-@Composable
-private fun ChangeThemeAction(onClick: (TopBarAction) -> Unit) {
-    IconButton(onClick = { onClick(TopBarAction.ChangeTheme) }) {
-        Icon(painter = painterResource(id = R.drawable.ic_solar_palette), contentDescription = stringResource(id = R.string.app_topBar_theme_button_a11y))
-    }
-}
+    val painter: Painter
+        @Composable
+        get() = when (this) {
+            ChangeThemeSettings -> painterResource(id = LocalThemeDrawableResources.current.filters)
+            ChangeTheme -> painterResource(id = R.drawable.ic_solar_palette)
+            ChangeMode -> painterResource(LightDarkResourceId(R.drawable.ic_ui_light_mode, R.drawable.ic_ui_dark_mode))
+        }
 
-@Composable
-private fun ChangeModeAction(onClick: (TopBarAction) -> Unit) {
-    val isSystemInDarkTheme = isSystemInDarkTheme()
-    val painterRes = if (isSystemInDarkTheme) R.drawable.ic_ui_light_mode else R.drawable.ic_ui_dark_mode
-    val iconDesc = if (isSystemInDarkTheme) R.string.app_topBar_lightMode_button_a11y else R.string.app_topBar_darkMode_button_a11y
+    val contentDescription: String
+        @Composable
+        get() {
+            val id = when (this) {
+                ChangeThemeSettings -> R.string.app_topBar_themeSettings_button_a11y
+                ChangeTheme -> R.string.app_topBar_theme_button_a11y
+                ChangeMode -> if (isSystemInDarkTheme()) R.string.app_topBar_lightMode_button_a11y else R.string.app_topBar_darkMode_button_a11y
+            }
 
-    IconButton(onClick = { onClick(TopBarAction.ChangeMode) }) {
-        Icon(painter = painterResource(id = painterRes), contentDescription = stringResource(id = iconDesc))
-    }
+            return stringResource(id = id)
+        }
 }
 
 @PreviewLightDark

app/src/main/java/com/orange/ouds/app/ui/about/AboutFileScreen.kt

@@ -18,14 +18,20 @@ import android.webkit.WebResourceRequest
 import android.webkit.WebView
 import android.webkit.WebViewClient
 import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.WindowInsetsSides
+import androidx.compose.foundation.layout.consumeWindowInsets
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.only
+import androidx.compose.foundation.layout.statusBars
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.viewinterop.AndroidView
 import com.orange.ouds.app.ui.utilities.composable.Screen
 import com.orange.ouds.app.ui.utilities.injectLightDarkModeCss
 import com.orange.ouds.app.ui.utilities.launchUrl
+import com.orange.ouds.app.ui.utilities.topBarsTopPadding
 import com.orange.ouds.core.theme.OudsTheme
 import java.io.BufferedReader
 import java.nio.charset.StandardCharsets
@@ -37,19 +43,22 @@ private const val FilePath = "file:///android_res/$FileResourceDir/"
 internal fun AboutFileScreen(fileMenuItem: AboutFileMenuItem) {
     val context = LocalContext.current
     val horizontalPadding = OudsTheme.grids.margin.value
-    val verticalPadding = OudsTheme.spaces.fixed.medium.value
+    val topPadding = topBarsTopPadding + OudsTheme.spaces.fixed.medium
+    val bottomPadding = OudsTheme.spaces.fixed.medium.value
     val isSystemInDarkTheme = isSystemInDarkTheme()
     Screen {
         AndroidView(
-            modifier = Modifier.fillMaxSize(),
+            modifier = Modifier
+                .fillMaxSize()
+                .consumeWindowInsets(WindowInsets.statusBars.only(WindowInsetsSides.Top)),
             factory = {
                 WebView(context).apply {
                     @SuppressLint("SetJavaScriptEnabled")
                     settings.javaScriptEnabled = true
                     webViewClient = object : WebViewClient() {
                         override fun onPageFinished(view: WebView?, url: String?) {
                             super.onPageFinished(view, url)
-                            view?.loadUrl("javascript:(function(){ document.body.style.padding = '${verticalPadding}px ${horizontalPadding}px' })();")
+                            view?.loadUrl("javascript:(function(){ document.body.style.paddingTop = '${topPadding.value}px'; document.body.style.paddingBottom = '${bottomPadding}px'; document.body.style.paddingLeft = '${horizontalPadding}px'; document.body.style.paddingRight = '${horizontalPadding}px'; })();")
                             view?.injectLightDarkModeCss(isSystemInDarkTheme)
                         }
 

app/src/main/java/com/orange/ouds/app/ui/about/AboutMaterialComponentsScreen.kt

@@ -146,7 +146,9 @@ import androidx.compose.ui.tooling.preview.PreviewLightDark
 import androidx.compose.ui.unit.dp
 import com.orange.ouds.app.ui.utilities.composable.AppPreview
 import com.orange.ouds.app.ui.utilities.composable.Screen
+import com.orange.ouds.app.ui.utilities.consumeTopBarsTopWindowInsets
 import com.orange.ouds.app.ui.utilities.listItemHorizontalPadding
+import com.orange.ouds.app.ui.utilities.topBarsTopPadding
 import com.orange.ouds.core.theme.OudsTheme
 import kotlinx.coroutines.CoroutineScope
 import kotlinx.coroutines.launch
@@ -167,7 +169,8 @@ fun AboutMaterialComponentsScreen() {
                     modifier = Modifier
                         .fillMaxSize()
                         .verticalScroll(rememberScrollState())
-                        .padding(bottom = OudsTheme.spaces.fixed.medium)
+                        .consumeTopBarsTopWindowInsets()
+                        .padding(top = topBarsTopPadding, bottom = OudsTheme.spaces.fixed.medium)
                 ) {
 
                     // APP BARS

app/src/main/java/com/orange/ouds/app/ui/about/AboutScreen.kt

@@ -22,11 +22,18 @@ import androidx.annotation.StringRes
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.WindowInsetsSides
+import androidx.compose.foundation.layout.asPaddingValues
+import androidx.compose.foundation.layout.consumeWindowInsets
+import androidx.compose.foundation.layout.only
+import androidx.compose.foundation.layout.statusBars
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
 import androidx.compose.material3.ListItem
 import androidx.compose.material3.Text
+import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalContext
@@ -42,7 +49,9 @@ import com.orange.ouds.app.BuildConfig
 import com.orange.ouds.app.R
 import com.orange.ouds.app.ui.utilities.composable.AppPreview
 import com.orange.ouds.app.ui.utilities.composable.Screen
+import com.orange.ouds.app.ui.utilities.consumeTopBarsTopWindowInsets
 import com.orange.ouds.app.ui.utilities.listItemHorizontalPadding
+import com.orange.ouds.app.ui.utilities.topBarsTopPadding
 import com.orange.ouds.core.component.OudsNavigationBarHeight
 import com.orange.ouds.core.theme.OudsTheme
 
@@ -80,7 +89,13 @@ class AboutAppSettingsItem(id: Int, @StringRes labelRes: Int) : AboutMenuItem(id
 fun AboutScreen(onMenuItemClick: (id: Int) -> Unit) {
     val context = LocalContext.current
     Screen {
-        LazyColumn(modifier = Modifier.padding(bottom = OudsNavigationBarHeight)) {
+        LazyColumn(
+            modifier = Modifier.consumeTopBarsTopWindowInsets(),
+            contentPadding = PaddingValues(
+                top = topBarsTopPadding,
+                bottom = OudsTheme.spaces.fixed.medium + OudsNavigationBarHeight
+            )
+        ) {
             item {
                 val version = stringResource(R.string.app_about_version_label, BuildConfig.VERSION_NAME, BuildConfig.VERSION_CODE.toLong())
                 val issueNumbers: IntArray? = BuildConfig.ISSUE_NUMBERS