Add Scaffold and TopAppBar to catalog app
This commit is contained in:
parent
71385340ae
commit
a64c673fa0
5 changed files with 79 additions and 36 deletions
|
@ -16,4 +16,5 @@ dependencies {
|
|||
implementation(projects.core.ui.compose.designsystem)
|
||||
|
||||
implementation(libs.androidx.compose.material)
|
||||
implementation(libs.androidx.compose.material.icons.extended)
|
||||
}
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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),
|
||||
|
|
|
@ -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,
|
||||
)
|
||||
}
|
Loading…
Reference in a new issue