Add stuff to the theme and use theme.

This commit is contained in:
Thomas Andres Gomez 2023-08-02 08:31:17 +02:00
parent 944180882e
commit db8113ccf6
7 changed files with 118 additions and 74 deletions

View file

@ -6,6 +6,7 @@ import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.WindowInsets
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.navigationBarsPadding
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Scaffold
@ -63,7 +64,10 @@ class MainActivity : ComponentActivity() {
}
},
snackbarHost = {
SnackbarHost(hostState = LocalSnack.current)
SnackbarHost(
modifier = Modifier.navigationBarsPadding(),
hostState = LocalSnack.current,
)
}
)
}

View file

@ -1,6 +1,7 @@
package com.pixelized.rplexicon.ui.navigation
import androidx.compose.animation.ExperimentalAnimationApi
import androidx.compose.foundation.layout.navigationBarsPadding
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyListState
import androidx.compose.material3.BottomAppBar
@ -9,6 +10,8 @@ import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.NavigationBarItem
import androidx.compose.material3.Scaffold
import androidx.compose.material3.SnackbarHost
import androidx.compose.material3.SnackbarHostState
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.runtime.Composable
@ -17,6 +20,7 @@ import androidx.compose.runtime.Stable
import androidx.compose.runtime.derivedStateOf
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.staticCompositionLocalOf
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
@ -25,6 +29,7 @@ import androidx.compose.ui.unit.dp
import androidx.navigation.NavHostController
import com.google.accompanist.navigation.animation.AnimatedNavHost
import com.google.accompanist.navigation.animation.rememberAnimatedNavController
import com.pixelized.rplexicon.LocalSnack
import com.pixelized.rplexicon.R
import com.pixelized.rplexicon.ui.navigation.pages.LEXICON_ROUTE
import com.pixelized.rplexicon.ui.navigation.pages.composableLexicon
@ -43,6 +48,9 @@ fun HomeNavHost(
navHostController: NavHostController = rememberAnimatedNavController(),
bottomBarItems: List<BottomBarItem> = rememberBottomBarItems(navHostController = navHostController),
startDestination: String = LEXICON_ROUTE
) {
CompositionLocalProvider(
LocalSnack provides remember { SnackbarHostState() },
) {
Scaffold(
topBar = {
@ -52,8 +60,14 @@ fun HomeNavHost(
},
)
},
snackbarHost = {
SnackbarHost(
hostState = LocalSnack.current,
)
},
bottomBar = {
val selectedIndex = remember { mutableStateOf(0) }
val selectedIndex = rememberSaveable { mutableStateOf(0) }
BottomAppBar(
containerColor = MaterialTheme.colorScheme.surface,
tonalElevation = 0.dp,
@ -95,6 +109,7 @@ fun HomeNavHost(
}
)
}
}
@Stable
class BottomBarItem(

View file

@ -11,10 +11,8 @@ import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.ExperimentalAnimationApi
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.animation.with
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
@ -58,6 +56,7 @@ import com.pixelized.rplexicon.ui.screens.lexicon.list.LexiconErrorUio.Permissio
import com.pixelized.rplexicon.ui.screens.lexicon.list.LexiconErrorUio.Structure
import com.pixelized.rplexicon.ui.theme.LexiconTheme
import com.pixelized.rplexicon.utilitary.extentions.cell
import com.pixelized.rplexicon.utilitary.extentions.lexicon
import kotlinx.coroutines.flow.SharedFlow
import kotlinx.coroutines.launch
@ -129,10 +128,6 @@ fun LexiconScreen(
private fun LexiconScreenContent(
modifier: Modifier = Modifier,
lazyColumnState: LazyListState,
paddingValues: PaddingValues = PaddingValues(
top = 6.dp,
bottom = 8.dp + 16.dp + 56.dp + 16.dp,
),
refreshState: PullRefreshState,
refreshing: State<Boolean>,
isFabExpended: State<Boolean>,
@ -145,7 +140,7 @@ private fun LexiconScreenContent(
) {
AnimatedContent(
targetState = items.value.isEmpty(),
transitionSpec = { fadeIn() with fadeOut() },
transitionSpec = MaterialTheme.lexicon.animation.itemList,
label = "AnimatedLexicon"
) { empty ->
when (empty) {
@ -154,7 +149,7 @@ private fun LexiconScreenContent(
.fillMaxSize()
.pullRefresh(state = refreshState),
state = lazyColumnState,
contentPadding = paddingValues,
contentPadding = MaterialTheme.lexicon.dimens.itemListPadding,
) {
items(count = 6) {
LexiconItem(
@ -169,7 +164,7 @@ private fun LexiconScreenContent(
.fillMaxSize()
.pullRefresh(state = refreshState),
state = lazyColumnState,
contentPadding = paddingValues,
contentPadding = MaterialTheme.lexicon.dimens.itemListPadding,
) {
items(
items = items.value,

View file

@ -3,15 +3,9 @@ package com.pixelized.rplexicon.ui.screens.quest.list
import android.content.res.Configuration
import androidx.compose.animation.AnimatedContent
import androidx.compose.animation.ExperimentalAnimationApi
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.animation.with
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.heightIn
import androidx.compose.foundation.layout.systemBarsPadding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.LazyListState
import androidx.compose.foundation.lazy.items
@ -20,7 +14,6 @@ import androidx.compose.material.ExperimentalMaterialApi
import androidx.compose.material.pullrefresh.PullRefreshState
import androidx.compose.material.pullrefresh.pullRefresh
import androidx.compose.material.pullrefresh.rememberPullRefreshState
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.runtime.Composable
@ -31,7 +24,6 @@ import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.hilt.navigation.compose.hiltViewModel
import com.pixelized.rplexicon.ui.composable.Loader
import com.pixelized.rplexicon.ui.navigation.LocalScreenNavHost
@ -78,10 +70,6 @@ fun QuestListScreen(
private fun QuestListContent(
modifier: Modifier = Modifier,
lazyColumnState: LazyListState,
paddingValues: PaddingValues = PaddingValues(
top = 8.dp,
bottom = 8.dp + 16.dp + 56.dp + 16.dp,
),
refreshState: PullRefreshState,
refreshing: State<Boolean>,
items: State<List<QuestItemUio>>,
@ -93,7 +81,7 @@ private fun QuestListContent(
) {
AnimatedContent(
targetState = items.value.isEmpty(),
transitionSpec = { fadeIn() with fadeOut() },
transitionSpec = MaterialTheme.lexicon.animation.itemList,
label = "AnimatedQuests"
) { empty ->
when (empty) {
@ -102,7 +90,7 @@ private fun QuestListContent(
.fillMaxSize()
.pullRefresh(state = refreshState),
state = lazyColumnState,
contentPadding = paddingValues,
contentPadding = MaterialTheme.lexicon.dimens.itemListPadding,
) {
items(count = 2) {
QuestItem(
@ -117,7 +105,7 @@ private fun QuestListContent(
.fillMaxSize()
.pullRefresh(state = refreshState),
state = lazyColumnState,
contentPadding = paddingValues,
contentPadding = MaterialTheme.lexicon.dimens.itemListPadding,
) {
items(
items = items.value,

View file

@ -10,8 +10,11 @@ import androidx.compose.runtime.Stable
import androidx.compose.runtime.compositionLocalOf
import androidx.compose.runtime.remember
import androidx.compose.ui.graphics.toArgb
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.platform.LocalView
import androidx.core.view.WindowCompat
import com.pixelized.rplexicon.ui.theme.animation.LexiconAnimation
import com.pixelized.rplexicon.ui.theme.animation.lexiconAnimation
import com.pixelized.rplexicon.ui.theme.colors.LexiconColors
import com.pixelized.rplexicon.ui.theme.colors.darkColorScheme
import com.pixelized.rplexicon.ui.theme.colors.lightColorScheme
@ -28,6 +31,7 @@ val LocalLexiconTheme = compositionLocalOf<LexiconTheme> {
@Stable
data class LexiconTheme(
val animation: LexiconAnimation,
val colorScheme: LexiconColors,
val shapes: LexiconShapes,
val dimens: LexiconDimens,
@ -39,8 +43,11 @@ fun LexiconTheme(
darkTheme: Boolean = isSystemInDarkTheme(),
content: @Composable () -> Unit
) {
val density = LocalDensity.current
val lexiconTheme = remember {
LexiconTheme(
animation = lexiconAnimation(density = density),
colorScheme = when (darkTheme) {
true -> darkColorScheme()
else -> lightColorScheme()

View file

@ -0,0 +1,28 @@
package com.pixelized.rplexicon.ui.theme.animation
import androidx.compose.animation.AnimatedContentScope
import androidx.compose.animation.ContentTransform
import androidx.compose.animation.ExperimentalAnimationApi
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.animation.slideInVertically
import androidx.compose.animation.slideOutVertically
import androidx.compose.animation.with
import androidx.compose.runtime.Stable
import androidx.compose.ui.unit.Density
import androidx.compose.ui.unit.dp
@Stable
@OptIn(ExperimentalAnimationApi::class)
data class LexiconAnimation constructor(
val itemList: AnimatedContentScope<Boolean>.() -> ContentTransform,
)
@OptIn(ExperimentalAnimationApi::class)
fun lexiconAnimation(
density: Density,
): LexiconAnimation = LexiconAnimation(
itemList = with(density) {
{ fadeIn() + slideInVertically { 8.dp.roundToPx() } with fadeOut() + slideOutVertically { 8.dp.roundToPx() } }
},
)

View file

@ -1,5 +1,6 @@
package com.pixelized.rplexicon.ui.theme.dimen
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.runtime.Immutable
import androidx.compose.runtime.Stable
import androidx.compose.ui.unit.Dp
@ -8,11 +9,17 @@ import androidx.compose.ui.unit.dp
@Stable
@Immutable
data class LexiconDimens(
val item: Dp
val item: Dp,
val itemListPadding: PaddingValues,
)
fun lexiconDimen(
item: Dp = 52.dp
item: Dp = 52.dp,
itemListPadding: PaddingValues = PaddingValues(
top = 8.dp,
bottom = 8.dp + 16.dp + 56.dp + 16.dp,
)
) = LexiconDimens(
item = item,
itemListPadding,
)