From db8113ccf6c4a69c160e0c3d04dddae7e6989c17 Mon Sep 17 00:00:00 2001 From: Thomas Andres Gomez Date: Wed, 2 Aug 2023 08:31:17 +0200 Subject: [PATCH] Add stuff to the theme and use theme. --- .../com/pixelized/rplexicon/MainActivity.kt | 6 +- .../rplexicon/ui/navigation/HomeNavHost.kt | 109 ++++++++++-------- .../ui/screens/lexicon/list/LexiconScreen.kt | 13 +-- .../ui/screens/quest/list/QuestListScreen.kt | 18 +-- .../com/pixelized/rplexicon/ui/theme/Theme.kt | 7 ++ .../ui/theme/animation/LexiconAnimation.kt | 28 +++++ .../rplexicon/ui/theme/dimen/LexiconDimens.kt | 11 +- 7 files changed, 118 insertions(+), 74 deletions(-) create mode 100644 app/src/main/java/com/pixelized/rplexicon/ui/theme/animation/LexiconAnimation.kt diff --git a/app/src/main/java/com/pixelized/rplexicon/MainActivity.kt b/app/src/main/java/com/pixelized/rplexicon/MainActivity.kt index 2bcd803..bb4d5bf 100644 --- a/app/src/main/java/com/pixelized/rplexicon/MainActivity.kt +++ b/app/src/main/java/com/pixelized/rplexicon/MainActivity.kt @@ -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, + ) } ) } diff --git a/app/src/main/java/com/pixelized/rplexicon/ui/navigation/HomeNavHost.kt b/app/src/main/java/com/pixelized/rplexicon/ui/navigation/HomeNavHost.kt index c166140..8b820ec 100644 --- a/app/src/main/java/com/pixelized/rplexicon/ui/navigation/HomeNavHost.kt +++ b/app/src/main/java/com/pixelized/rplexicon/ui/navigation/HomeNavHost.kt @@ -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 @@ -44,56 +49,66 @@ fun HomeNavHost( bottomBarItems: List = rememberBottomBarItems(navHostController = navHostController), startDestination: String = LEXICON_ROUTE ) { - Scaffold( - topBar = { - TopAppBar( - title = { - Text(text = stringResource(id = R.string.app_name)) - }, - ) - }, - bottomBar = { - val selectedIndex = remember { mutableStateOf(0) } - BottomAppBar( - containerColor = MaterialTheme.colorScheme.surface, - tonalElevation = 0.dp, - ) { - bottomBarItems.forEachIndexed { index, item -> - val selectedItem = remember { derivedStateOf { selectedIndex.value == index } } - NavigationBarItem( - selected = selectedItem.value, - onClick = { - selectedIndex.value = index - item.onClick.invoke() - }, - label = { - Text(text = stringResource(id = item.label)) - }, - icon = { - Icon( - painter = painterResource(id = item.icon), - contentDescription = "", - ) - } - ) - } - } - }, - content = { padding -> - CompositionLocalProvider( - LocalPageNavHost provides navHostController, - ) { - AnimatedNavHost( - modifier = Modifier.padding(padding), - navController = navHostController, - startDestination = startDestination, + CompositionLocalProvider( + LocalSnack provides remember { SnackbarHostState() }, + ) { + Scaffold( + topBar = { + TopAppBar( + title = { + Text(text = stringResource(id = R.string.app_name)) + }, + ) + }, + snackbarHost = { + SnackbarHost( + hostState = LocalSnack.current, + ) + }, + bottomBar = { + val selectedIndex = rememberSaveable { mutableStateOf(0) } + + BottomAppBar( + containerColor = MaterialTheme.colorScheme.surface, + tonalElevation = 0.dp, ) { - composableLexicon(lazyListState = lexiconListState) - composableQuestList() + bottomBarItems.forEachIndexed { index, item -> + val selectedItem = remember { derivedStateOf { selectedIndex.value == index } } + NavigationBarItem( + selected = selectedItem.value, + onClick = { + selectedIndex.value = index + item.onClick.invoke() + }, + label = { + Text(text = stringResource(id = item.label)) + }, + icon = { + Icon( + painter = painterResource(id = item.icon), + contentDescription = "", + ) + } + ) + } + } + }, + content = { padding -> + CompositionLocalProvider( + LocalPageNavHost provides navHostController, + ) { + AnimatedNavHost( + modifier = Modifier.padding(padding), + navController = navHostController, + startDestination = startDestination, + ) { + composableLexicon(lazyListState = lexiconListState) + composableQuestList() + } } } - } - ) + ) + } } @Stable diff --git a/app/src/main/java/com/pixelized/rplexicon/ui/screens/lexicon/list/LexiconScreen.kt b/app/src/main/java/com/pixelized/rplexicon/ui/screens/lexicon/list/LexiconScreen.kt index f3a2397..fb6ff78 100644 --- a/app/src/main/java/com/pixelized/rplexicon/ui/screens/lexicon/list/LexiconScreen.kt +++ b/app/src/main/java/com/pixelized/rplexicon/ui/screens/lexicon/list/LexiconScreen.kt @@ -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, isFabExpended: State, @@ -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, diff --git a/app/src/main/java/com/pixelized/rplexicon/ui/screens/quest/list/QuestListScreen.kt b/app/src/main/java/com/pixelized/rplexicon/ui/screens/quest/list/QuestListScreen.kt index 0ac0162..90c6fd9 100644 --- a/app/src/main/java/com/pixelized/rplexicon/ui/screens/quest/list/QuestListScreen.kt +++ b/app/src/main/java/com/pixelized/rplexicon/ui/screens/quest/list/QuestListScreen.kt @@ -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, items: State>, @@ -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, diff --git a/app/src/main/java/com/pixelized/rplexicon/ui/theme/Theme.kt b/app/src/main/java/com/pixelized/rplexicon/ui/theme/Theme.kt index 868e8dc..e268f70 100644 --- a/app/src/main/java/com/pixelized/rplexicon/ui/theme/Theme.kt +++ b/app/src/main/java/com/pixelized/rplexicon/ui/theme/Theme.kt @@ -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 { @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() diff --git a/app/src/main/java/com/pixelized/rplexicon/ui/theme/animation/LexiconAnimation.kt b/app/src/main/java/com/pixelized/rplexicon/ui/theme/animation/LexiconAnimation.kt new file mode 100644 index 0000000..1fe0e92 --- /dev/null +++ b/app/src/main/java/com/pixelized/rplexicon/ui/theme/animation/LexiconAnimation.kt @@ -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.() -> ContentTransform, +) + +@OptIn(ExperimentalAnimationApi::class) +fun lexiconAnimation( + density: Density, +): LexiconAnimation = LexiconAnimation( + itemList = with(density) { + { fadeIn() + slideInVertically { 8.dp.roundToPx() } with fadeOut() + slideOutVertically { 8.dp.roundToPx() } } + }, +) \ No newline at end of file diff --git a/app/src/main/java/com/pixelized/rplexicon/ui/theme/dimen/LexiconDimens.kt b/app/src/main/java/com/pixelized/rplexicon/ui/theme/dimen/LexiconDimens.kt index 883cf17..1d5f6f6 100644 --- a/app/src/main/java/com/pixelized/rplexicon/ui/theme/dimen/LexiconDimens.kt +++ b/app/src/main/java/com/pixelized/rplexicon/ui/theme/dimen/LexiconDimens.kt @@ -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, ) \ No newline at end of file