Skip to content

Commit c42c88c

Browse files
florentmaitreflorentmaitre
committed
Integrate OudsTopAppBar into the demo app
1 parent 3edd230 commit c42c88c

File tree

14 files changed

+136
-91
lines changed

14 files changed

+136
-91
lines changed

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

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -99,18 +99,20 @@ fun MainScreen(
9999
var changeThemeDialogVisible by rememberSaveable { mutableStateOf(false) }
100100
var changeThemeSettingsDialogVisible by rememberSaveable { mutableStateOf(false) }
101101

102-
val hazeState = rememberHazeState(blurEnabled = true)
103-
104102
OudsTheme(
105103
theme = mainState.themeState.currentTheme,
106104
darkThemeEnabled = isSystemInDarkTheme,
107105
) {
106+
val hazeState = rememberHazeState(blurEnabled = true)
107+
val hazeStyle = HazeStyle(tint = null, blurRadius = OudsTheme.components.bar.blurRadius.dp)
108+
108109
CompositionLocalProvider(LocalThemeDrawableResources provides ThemeDrawableResources(mainState.themeState.currentTheme)) {
109110
Scaffold(
110111
contentWindowInsets = ScaffoldDefaults.contentWindowInsets.union(WindowInsets.displayCutout),
111112
topBar = {
112113
val context = LocalContext.current
113114
TopBar(
115+
modifier = Modifier.hazeEffect(state = hazeState, style = hazeStyle),
114116
topBarState = mainState.topBarState,
115117
upPress = mainState.navigationState::upPress,
116118
onActionClick = { action ->
@@ -124,10 +126,7 @@ fun MainScreen(
124126
},
125127
bottomBar = {
126128
BottomBar(
127-
modifier = Modifier.hazeEffect(
128-
state = hazeState,
129-
style = HazeStyle(tint = null, blurRadius = OudsTheme.components.bar.blurRadius.dp)
130-
),
129+
modifier = Modifier.hazeEffect(state = hazeState, style = hazeStyle),
131130
currentRoute = mainState.navigationState.currentRoute.orEmpty(),
132131
navigateToRoute = { route ->
133132
mainState.navigationState.navigateToBottomBarRoute(route)
@@ -137,7 +136,7 @@ fun MainScreen(
137136
}
138137
) { innerPadding ->
139138
val paddingValues = PaddingValues(
140-
top = innerPadding.calculateTopPadding(),
139+
top = 0.dp,
141140
bottom = WindowInsets.navigationBars.asPaddingValues().calculateBottomPadding(),
142141
start = innerPadding.calculateStartPadding(LocalLayoutDirection.current),
143142
end = innerPadding.calculateEndPadding(LocalLayoutDirection.current)

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

Lines changed: 39 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -12,42 +12,39 @@
1212

1313
package com.orange.ouds.app.ui
1414

15-
import androidx.compose.foundation.Image
15+
import android.os.Build
1616
import androidx.compose.foundation.isSystemInDarkTheme
1717
import androidx.compose.foundation.layout.WindowInsets
1818
import androidx.compose.foundation.layout.WindowInsetsSides
1919
import androidx.compose.foundation.layout.displayCutout
2020
import androidx.compose.foundation.layout.only
2121
import androidx.compose.foundation.layout.windowInsetsPadding
22-
import androidx.compose.material.icons.Icons
23-
import androidx.compose.material.icons.automirrored.filled.ArrowBack
2422
import androidx.compose.material3.ExperimentalMaterial3Api
25-
import androidx.compose.material3.Icon
26-
import androidx.compose.material3.IconButton
27-
import androidx.compose.material3.Text
28-
import androidx.compose.material3.TopAppBar
2923
import androidx.compose.runtime.Composable
3024
import androidx.compose.ui.Modifier
31-
import androidx.compose.ui.graphics.ColorFilter
25+
import androidx.compose.ui.graphics.painter.Painter
3226
import androidx.compose.ui.res.painterResource
3327
import androidx.compose.ui.res.stringResource
34-
import androidx.compose.ui.semantics.isTraversalGroup
35-
import androidx.compose.ui.semantics.semantics
36-
import androidx.compose.ui.semantics.traversalIndex
3728
import androidx.compose.ui.tooling.preview.PreviewLightDark
3829
import com.orange.ouds.app.R
30+
import com.orange.ouds.app.ui.utilities.LightDarkResourceId
3931
import com.orange.ouds.app.ui.utilities.LocalThemeDrawableResources
4032
import com.orange.ouds.app.ui.utilities.composable.AppPreview
41-
import com.orange.ouds.core.theme.OudsTheme
33+
import com.orange.ouds.app.ui.utilities.painterResource
34+
import com.orange.ouds.core.component.OudsTopAppBar
35+
import com.orange.ouds.core.component.OudsTopAppBarAction
36+
import com.orange.ouds.core.component.OudsTopAppBarNavigationIcon
4237

4338

4439
@Composable
4540
fun TopBar(
4641
topBarState: TopBarState,
4742
upPress: () -> Unit,
48-
onActionClick: (TopBarAction) -> Unit
43+
onActionClick: (TopBarAction) -> Unit,
44+
modifier: Modifier = Modifier
4945
) {
5046
TopBar(
47+
modifier = modifier,
5148
title = topBarState.title,
5249
showNavigationIcon = topBarState.showNavigationIcon,
5350
actions = topBarState.actions,
@@ -63,74 +60,46 @@ private fun TopBar(
6360
title: String,
6461
actions: List<TopBarAction>,
6562
upPress: () -> Unit,
66-
onActionClick: (TopBarAction) -> Unit
63+
onActionClick: (TopBarAction) -> Unit,
64+
modifier: Modifier = Modifier
6765
) {
68-
TopAppBar(
69-
modifier = Modifier
70-
.semantics { isTraversalGroup = true }
71-
.windowInsetsPadding(WindowInsets.displayCutout.only(WindowInsetsSides.Horizontal)),
72-
navigationIcon = {
73-
if (showNavigationIcon) {
74-
IconButton(onClick = upPress) {
75-
Image(
76-
imageVector = Icons.AutoMirrored.Filled.ArrowBack,
77-
contentDescription = stringResource(id = R.string.app_common_back_a11y),
78-
colorFilter = ColorFilter.tint(OudsTheme.colorScheme.content.default)
79-
)
80-
}
81-
}
82-
},
83-
title = {
84-
Text(
85-
text = title,
86-
color = OudsTheme.colorScheme.content.default,
87-
modifier = Modifier.semantics { traversalIndex = -1f },
88-
style = OudsTheme.typography.heading.medium
66+
OudsTopAppBar(
67+
modifier = modifier.windowInsetsPadding(WindowInsets.displayCutout.only(WindowInsetsSides.Horizontal)),
68+
translucent = Build.VERSION.SDK_INT > Build.VERSION_CODES.S_V2,
69+
title = title,
70+
navigationIcon = if (showNavigationIcon) OudsTopAppBarNavigationIcon.Back(onClick = upPress) else null,
71+
actions = actions.map { action ->
72+
OudsTopAppBarAction.Icon(
73+
painter = action.painter,
74+
contentDescription = action.contentDescription,
75+
onClick = { onActionClick(action) }
8976
)
90-
},
91-
actions = {
92-
actions.map { it.TopBarIconButton(onActionClick = onActionClick) }
9377
}
9478
)
9579
}
9680

9781
enum class TopBarAction {
9882
ChangeThemeSettings, ChangeTheme, ChangeMode;
9983

100-
@Composable
101-
fun TopBarIconButton(onActionClick: (TopBarAction) -> Unit) = when (this) {
102-
ChangeThemeSettings -> ChangeThemeSettingsAction(onActionClick)
103-
ChangeTheme -> ChangeThemeAction(onActionClick)
104-
ChangeMode -> ChangeModeAction(onActionClick)
105-
}
106-
}
107-
108-
@Composable
109-
private fun ChangeThemeSettingsAction(onClick: (TopBarAction) -> Unit) {
110-
IconButton(onClick = { onClick(TopBarAction.ChangeThemeSettings) }) {
111-
Icon(
112-
painter = painterResource(id = LocalThemeDrawableResources.current.filters),
113-
contentDescription = stringResource(id = R.string.app_topBar_themeSettings_button_a11y)
114-
)
115-
}
116-
}
117-
118-
@Composable
119-
private fun ChangeThemeAction(onClick: (TopBarAction) -> Unit) {
120-
IconButton(onClick = { onClick(TopBarAction.ChangeTheme) }) {
121-
Icon(painter = painterResource(id = R.drawable.ic_solar_palette), contentDescription = stringResource(id = R.string.app_topBar_theme_button_a11y))
122-
}
123-
}
84+
val painter: Painter
85+
@Composable
86+
get() = when (this) {
87+
ChangeThemeSettings -> painterResource(id = LocalThemeDrawableResources.current.filters)
88+
ChangeTheme -> painterResource(id = R.drawable.ic_solar_palette)
89+
ChangeMode -> painterResource(LightDarkResourceId(R.drawable.ic_ui_light_mode, R.drawable.ic_ui_dark_mode))
90+
}
12491

125-
@Composable
126-
private fun ChangeModeAction(onClick: (TopBarAction) -> Unit) {
127-
val isSystemInDarkTheme = isSystemInDarkTheme()
128-
val painterRes = if (isSystemInDarkTheme) R.drawable.ic_ui_light_mode else R.drawable.ic_ui_dark_mode
129-
val iconDesc = if (isSystemInDarkTheme) R.string.app_topBar_lightMode_button_a11y else R.string.app_topBar_darkMode_button_a11y
92+
val contentDescription: String
93+
@Composable
94+
get() {
95+
val id = when (this) {
96+
ChangeThemeSettings -> R.string.app_topBar_themeSettings_button_a11y
97+
ChangeTheme -> R.string.app_topBar_theme_button_a11y
98+
ChangeMode -> if (isSystemInDarkTheme()) R.string.app_topBar_lightMode_button_a11y else R.string.app_topBar_darkMode_button_a11y
99+
}
130100

131-
IconButton(onClick = { onClick(TopBarAction.ChangeMode) }) {
132-
Icon(painter = painterResource(id = painterRes), contentDescription = stringResource(id = iconDesc))
133-
}
101+
return stringResource(id = id)
102+
}
134103
}
135104

136105
@PreviewLightDark

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

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,14 @@ import android.webkit.WebResourceRequest
1818
import android.webkit.WebView
1919
import android.webkit.WebViewClient
2020
import androidx.compose.foundation.isSystemInDarkTheme
21+
import androidx.compose.foundation.layout.WindowInsets
22+
import androidx.compose.foundation.layout.WindowInsetsSides
23+
import androidx.compose.foundation.layout.asPaddingValues
24+
import androidx.compose.foundation.layout.consumeWindowInsets
2125
import androidx.compose.foundation.layout.fillMaxSize
26+
import androidx.compose.foundation.layout.only
27+
import androidx.compose.foundation.layout.statusBars
28+
import androidx.compose.material3.TopAppBarDefaults
2229
import androidx.compose.runtime.Composable
2330
import androidx.compose.ui.Modifier
2431
import androidx.compose.ui.platform.LocalContext
@@ -37,19 +44,22 @@ private const val FilePath = "file:///android_res/$FileResourceDir/"
3744
internal fun AboutFileScreen(fileMenuItem: AboutFileMenuItem) {
3845
val context = LocalContext.current
3946
val horizontalPadding = OudsTheme.grids.margin.value
40-
val verticalPadding = OudsTheme.spaces.fixed.medium.value
47+
val topPadding = WindowInsets.statusBars.asPaddingValues().calculateTopPadding() + TopAppBarDefaults.TopAppBarExpandedHeight + OudsTheme.spaces.fixed.medium
48+
val bottomPadding = OudsTheme.spaces.fixed.medium.value
4149
val isSystemInDarkTheme = isSystemInDarkTheme()
4250
Screen {
4351
AndroidView(
44-
modifier = Modifier.fillMaxSize(),
52+
modifier = Modifier
53+
.fillMaxSize()
54+
.consumeWindowInsets(WindowInsets.statusBars.only(WindowInsetsSides.Top)),
4555
factory = {
4656
WebView(context).apply {
4757
@SuppressLint("SetJavaScriptEnabled")
4858
settings.javaScriptEnabled = true
4959
webViewClient = object : WebViewClient() {
5060
override fun onPageFinished(view: WebView?, url: String?) {
5161
super.onPageFinished(view, url)
52-
view?.loadUrl("javascript:(function(){ document.body.style.padding = '${verticalPadding}px ${horizontalPadding}px' })();")
62+
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'; })();")
5363
view?.injectLightDarkModeCss(isSystemInDarkTheme)
5464
}
5565

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -147,6 +147,7 @@ import androidx.compose.ui.unit.dp
147147
import com.orange.ouds.app.ui.utilities.composable.AppPreview
148148
import com.orange.ouds.app.ui.utilities.composable.Screen
149149
import com.orange.ouds.app.ui.utilities.listItemHorizontalPadding
150+
import com.orange.ouds.app.ui.utilities.topBarsHeightPadding
150151
import com.orange.ouds.core.theme.OudsTheme
151152
import kotlinx.coroutines.CoroutineScope
152153
import kotlinx.coroutines.launch
@@ -167,6 +168,7 @@ fun AboutMaterialComponentsScreen() {
167168
modifier = Modifier
168169
.fillMaxSize()
169170
.verticalScroll(rememberScrollState())
171+
.topBarsHeightPadding()
170172
.padding(bottom = OudsTheme.spaces.fixed.medium)
171173
) {
172174

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

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,11 +22,18 @@ import androidx.annotation.StringRes
2222
import androidx.compose.foundation.clickable
2323
import androidx.compose.foundation.layout.Arrangement
2424
import androidx.compose.foundation.layout.Column
25-
import androidx.compose.foundation.layout.padding
25+
import androidx.compose.foundation.layout.PaddingValues
26+
import androidx.compose.foundation.layout.WindowInsets
27+
import androidx.compose.foundation.layout.WindowInsetsSides
28+
import androidx.compose.foundation.layout.asPaddingValues
29+
import androidx.compose.foundation.layout.consumeWindowInsets
30+
import androidx.compose.foundation.layout.only
31+
import androidx.compose.foundation.layout.statusBars
2632
import androidx.compose.foundation.lazy.LazyColumn
2733
import androidx.compose.foundation.lazy.items
2834
import androidx.compose.material3.ListItem
2935
import androidx.compose.material3.Text
36+
import androidx.compose.material3.TopAppBarDefaults
3037
import androidx.compose.runtime.Composable
3138
import androidx.compose.ui.Modifier
3239
import androidx.compose.ui.platform.LocalContext
@@ -46,6 +53,7 @@ import com.orange.ouds.app.ui.utilities.listItemHorizontalPadding
4653
import com.orange.ouds.core.component.OudsNavigationBarHeight
4754
import com.orange.ouds.core.theme.OudsTheme
4855

56+
4957
private val oudsAboutMenuItems = listOf(
5058
AboutFileMenuItem(1, R.string.app_about_legalInformation_label, AboutFileMenuItem.File(R.raw.about_legal_information, AboutFileMenuItem.File.Format.Html)),
5159
AboutFileMenuItem(2, R.string.app_about_privacyPolicy_label, AboutFileMenuItem.File(R.raw.about_privacy_policy, AboutFileMenuItem.File.Format.Html)),
@@ -80,7 +88,13 @@ class AboutAppSettingsItem(id: Int, @StringRes labelRes: Int) : AboutMenuItem(id
8088
fun AboutScreen(onMenuItemClick: (id: Int) -> Unit) {
8189
val context = LocalContext.current
8290
Screen {
83-
LazyColumn(modifier = Modifier.padding(bottom = OudsNavigationBarHeight)) {
91+
LazyColumn(
92+
modifier = Modifier.consumeWindowInsets(WindowInsets.statusBars.only(WindowInsetsSides.Top)),
93+
contentPadding = PaddingValues(
94+
top = WindowInsets.statusBars.asPaddingValues().calculateTopPadding() + TopAppBarDefaults.TopAppBarExpandedHeight,
95+
bottom = OudsTheme.spaces.fixed.medium + OudsNavigationBarHeight
96+
)
97+
) {
8498
item {
8599
val version = stringResource(R.string.app_about_version_label, BuildConfig.VERSION_NAME, BuildConfig.VERSION_CODE.toLong())
86100
val issueNumbers: IntArray? = BuildConfig.ISSUE_NUMBERS

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

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,19 @@
1313
package com.orange.ouds.app.ui.about
1414

1515
import androidx.annotation.StringRes
16+
import androidx.compose.foundation.layout.PaddingValues
17+
import androidx.compose.foundation.layout.WindowInsets
18+
import androidx.compose.foundation.layout.WindowInsetsSides
19+
import androidx.compose.foundation.layout.asPaddingValues
20+
import androidx.compose.foundation.layout.consumeWindowInsets
21+
import androidx.compose.foundation.layout.only
1622
import androidx.compose.foundation.layout.padding
23+
import androidx.compose.foundation.layout.statusBars
1724
import androidx.compose.foundation.lazy.LazyColumn
1825
import androidx.compose.foundation.lazy.items
1926
import androidx.compose.material3.ListItem
2027
import androidx.compose.material3.Text
28+
import androidx.compose.material3.TopAppBarDefaults
2129
import androidx.compose.runtime.Composable
2230
import androidx.compose.ui.Modifier
2331
import androidx.compose.ui.res.stringResource
@@ -33,7 +41,13 @@ import kotlin.reflect.full.declaredMemberProperties
3341
@Composable
3442
fun AboutVersionsScreen() {
3543
Screen {
36-
LazyColumn {
44+
LazyColumn(
45+
modifier = Modifier.consumeWindowInsets(WindowInsets.statusBars.only(WindowInsetsSides.Top)),
46+
contentPadding = PaddingValues(
47+
top = WindowInsets.statusBars.asPaddingValues().calculateTopPadding() + TopAppBarDefaults.TopAppBarExpandedHeight,
48+
bottom = OudsTheme.spaces.fixed.medium
49+
)
50+
) {
3751
item {
3852
VersionsSectionTitle(titleRes = R.string.app_about_versions_tokens_label)
3953
}

‎app/src/main/java/com/orange/ouds/app/ui/components/ComponentVariantsScreen.kt‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,11 +14,18 @@ package com.orange.ouds.app.ui.components
1414

1515
import androidx.compose.foundation.clickable
1616
import androidx.compose.foundation.layout.PaddingValues
17+
import androidx.compose.foundation.layout.WindowInsets
18+
import androidx.compose.foundation.layout.WindowInsetsSides
19+
import androidx.compose.foundation.layout.asPaddingValues
20+
import androidx.compose.foundation.layout.consumeWindowInsets
1721
import androidx.compose.foundation.layout.fillMaxWidth
22+
import androidx.compose.foundation.layout.only
1823
import androidx.compose.foundation.layout.padding
24+
import androidx.compose.foundation.layout.statusBars
1925
import androidx.compose.foundation.lazy.LazyColumn
2026
import androidx.compose.foundation.lazy.items
2127
import androidx.compose.material3.Text
28+
import androidx.compose.material3.TopAppBarDefaults
2229
import androidx.compose.runtime.Composable
2330
import androidx.compose.ui.Modifier
2431
import androidx.compose.ui.res.stringResource
@@ -34,7 +41,13 @@ import com.orange.ouds.foundation.utilities.BasicPreviewParameterProvider
3441
@Composable
3542
fun ComponentVariantsScreen(component: Component, onVariantClick: (id: Long) -> Unit) {
3643
Screen {
37-
LazyColumn(contentPadding = PaddingValues(bottom = OudsTheme.spaces.fixed.medium)) {
44+
LazyColumn(
45+
modifier = Modifier.consumeWindowInsets(WindowInsets.statusBars.only(WindowInsetsSides.Top)),
46+
contentPadding = PaddingValues(
47+
top = WindowInsets.statusBars.asPaddingValues().calculateTopPadding() + TopAppBarDefaults.TopAppBarExpandedHeight,
48+
bottom = OudsTheme.spaces.fixed.medium
49+
)
50+
) {
3851
item {
3952
DetailScreenHeader(
4053
modifier = Modifier.padding(bottom = OudsTheme.spaces.fixed.medium),

‎app/src/main/java/com/orange/ouds/app/ui/components/ComponentsScreen.kt‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,7 @@ package com.orange.ouds.app.ui.components
1414

1515
import androidx.compose.foundation.layout.Arrangement
1616
import androidx.compose.foundation.layout.Column
17-
import androidx.compose.foundation.layout.Spacer
1817
import androidx.compose.foundation.layout.fillMaxSize
19-
import androidx.compose.foundation.layout.height
2018
import androidx.compose.foundation.layout.padding
2119
import androidx.compose.foundation.rememberScrollState
2220
import androidx.compose.foundation.verticalScroll
@@ -27,6 +25,7 @@ import androidx.compose.ui.tooling.preview.PreviewLightDark
2725
import com.orange.ouds.app.ui.utilities.composable.AppPreview
2826
import com.orange.ouds.app.ui.utilities.composable.LargeCard
2927
import com.orange.ouds.app.ui.utilities.composable.Screen
28+
import com.orange.ouds.app.ui.utilities.topBarsHeightPadding
3029
import com.orange.ouds.core.component.OudsNavigationBarHeight
3130
import com.orange.ouds.core.theme.OudsTheme
3231

@@ -45,6 +44,7 @@ private fun ComponentsScreen(components: List<Component>, onComponentClick: (Lon
4544
modifier = Modifier
4645
.fillMaxSize()
4746
.verticalScroll(rememberScrollState())
47+
.topBarsHeightPadding()
4848
.padding(vertical = OudsTheme.spaces.fixed.medium, horizontal = OudsTheme.grids.margin)
4949
.padding(bottom = OudsNavigationBarHeight),
5050
verticalArrangement = Arrangement.spacedBy(OudsTheme.spaces.fixed.medium)

0 commit comments

Comments
 (0)