Add Scaffold and TopAppBar to catalog app

This commit is contained in:
Wolf-Martell Montwé 2023-05-24 15:52:18 +02:00
parent 71385340ae
commit a64c673fa0
No known key found for this signature in database
GPG key ID: 6D45B21512ACBF72
5 changed files with 79 additions and 36 deletions

View file

@ -16,4 +16,5 @@ dependencies {
implementation(projects.core.ui.compose.designsystem)
implementation(libs.androidx.compose.material)
implementation(libs.androidx.compose.material.icons.extended)
}

View file

@ -1,15 +1,16 @@
package app.k9mail.ui.catalog.ui
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.WindowInsets
import androidx.compose.foundation.layout.asPaddingValues
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.systemBars
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import app.k9mail.core.ui.compose.common.DevicePreviews
import app.k9mail.core.ui.compose.designsystem.atom.text.TextHeadline4
import app.k9mail.core.ui.compose.designsystem.template.Scaffold
import app.k9mail.core.ui.compose.theme.K9Theme
import app.k9mail.core.ui.compose.theme.MainTheme
import app.k9mail.core.ui.compose.theme.ThunderbirdTheme
import app.k9mail.ui.catalog.items.moleculeItems
import app.k9mail.ui.catalog.ui.CatalogContract.State
@ -23,9 +24,7 @@ import app.k9mail.ui.catalog.ui.atom.items.selectionControlItems
import app.k9mail.ui.catalog.ui.atom.items.textFieldItems
import app.k9mail.ui.catalog.ui.atom.items.typographyItems
import app.k9mail.ui.catalog.ui.common.PagedContent
import app.k9mail.ui.catalog.ui.common.list.itemDefaultPadding
import app.k9mail.ui.catalog.ui.common.theme.ThemeSelector
import app.k9mail.ui.catalog.ui.common.theme.ThemeVariantSelector
import app.k9mail.ui.catalog.ui.common.ThemeTopAppBar
import kotlinx.collections.immutable.ImmutableList
import kotlinx.collections.immutable.persistentListOf
@ -38,33 +37,22 @@ fun CatalogContent(
contentPadding: PaddingValues,
modifier: Modifier = Modifier,
) {
Column(
modifier = modifier.padding(contentPadding),
val contentPadding = WindowInsets.systemBars.asPaddingValues()
Scaffold(
modifier = Modifier
.padding(top = contentPadding.calculateTopPadding())
.then(modifier),
topBar = { toggleDrawer ->
ThemeTopAppBar(
onNavigationClick = toggleDrawer,
theme = state.theme,
themeVariant = state.themeVariant,
onThemeClick = onThemeChanged,
onThemeVariantClick = onThemeVariantChanged,
)
},
) {
TextHeadline4(
text = "Thunderbird Catalog",
modifier = Modifier
.padding(
start = MainTheme.spacings.double,
top = MainTheme.spacings.default,
end = MainTheme.spacings.double,
)
.fillMaxWidth(),
)
ThemeSelector(
theme = state.theme,
modifier = Modifier
.fillMaxWidth()
.itemDefaultPadding(),
onThemeChangeClick = onThemeChanged,
)
ThemeVariantSelector(
themeVariant = state.themeVariant,
modifier = Modifier
.fillMaxWidth()
.itemDefaultPadding(),
onThemeVariantChange = onThemeVariantChanged,
)
PagedContent(
pages = pages,
initialPage = "Typography",

View file

@ -11,9 +11,11 @@ interface CatalogContract {
THUNDERBIRD("Thunderbird"),
}
enum class ThemeVariant {
LIGHT,
DARK,
enum class ThemeVariant(
val displayName: String,
) {
LIGHT("Light"),
DARK("Dark"),
}
interface ViewModel : UnidirectionalViewModel<State, Event, Nothing>

View file

@ -6,6 +6,7 @@ import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.grid.GridCells
import androidx.compose.foundation.lazy.grid.LazyGridScope
import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
@ -56,7 +57,9 @@ fun <T> PagedContent(
HorizontalPager(
pageCount = pages.size,
state = pagerState,
modifier = Modifier.fillMaxSize(),
modifier = Modifier
.fillMaxSize()
.padding(bottom = MainTheme.sizes.topBarHeight),
) { page ->
LazyVerticalGrid(
columns = GridCells.Adaptive(300.dp),

View file

@ -0,0 +1,49 @@
package app.k9mail.ui.catalog.ui.common
import androidx.compose.material.icons.filled.DarkMode
import androidx.compose.material.icons.filled.LightMode
import androidx.compose.material.icons.filled.ShuffleOn
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import app.k9mail.core.ui.compose.designsystem.atom.button.ButtonIcon
import app.k9mail.core.ui.compose.designsystem.organism.TopAppBar
import app.k9mail.core.ui.compose.theme.Icons
import app.k9mail.ui.catalog.ui.CatalogContract.Theme
import app.k9mail.ui.catalog.ui.CatalogContract.ThemeVariant
import androidx.compose.material.icons.Icons as MaterialIcons
@Composable
fun ThemeTopAppBar(
onNavigationClick: () -> Unit,
theme: Theme,
themeVariant: ThemeVariant,
onThemeClick: () -> Unit,
onThemeVariantClick: () -> Unit,
modifier: Modifier = Modifier,
) {
TopAppBar(
title = "${theme.displayName} Catalog",
navigationIcon = {
ButtonIcon(
onClick = onNavigationClick,
imageVector = Icons.Outlined.menu,
)
},
actions = {
ButtonIcon(
onClick = onThemeClick,
imageVector = MaterialIcons.Filled.ShuffleOn,
contentDescription = "${theme.displayName} Theme",
)
ButtonIcon(
onClick = onThemeVariantClick,
imageVector = when (themeVariant) {
ThemeVariant.LIGHT -> MaterialIcons.Filled.DarkMode
ThemeVariant.DARK -> MaterialIcons.Filled.LightMode
},
contentDescription = "${theme.displayName} Theme Variant",
)
},
modifier = modifier,
)
}