FIX: Drawer colors
This commit is contained in:
parent
26a5640987
commit
5dbdb9f7d2
4 changed files with 35 additions and 51 deletions
|
@ -5,30 +5,31 @@ import androidx.activity.ComponentActivity
|
||||||
import androidx.activity.compose.setContent
|
import androidx.activity.compose.setContent
|
||||||
import androidx.activity.enableEdgeToEdge
|
import androidx.activity.enableEdgeToEdge
|
||||||
import androidx.compose.runtime.Composable
|
import androidx.compose.runtime.Composable
|
||||||
|
import androidx.compose.runtime.CompositionLocalProvider
|
||||||
|
import androidx.compose.runtime.compositionLocalOf
|
||||||
import androidx.compose.runtime.getValue
|
import androidx.compose.runtime.getValue
|
||||||
import androidx.compose.runtime.mutableStateOf
|
import androidx.compose.runtime.mutableStateOf
|
||||||
import androidx.compose.runtime.remember
|
import androidx.compose.runtime.remember
|
||||||
import androidx.compose.runtime.setValue
|
import androidx.compose.runtime.setValue
|
||||||
import androidx.compose.ui.tooling.preview.Preview
|
|
||||||
import de.webfussel.soulecho.mood.MoodSection
|
import de.webfussel.soulecho.mood.MoodSection
|
||||||
import de.webfussel.soulecho.mood.MoodWithInfo
|
import de.webfussel.soulecho.mood.MoodWithInfo
|
||||||
import de.webfussel.soulecho.mood.PossibleMood
|
import de.webfussel.soulecho.mood.PossibleMood
|
||||||
import de.webfussel.soulecho.navigation.Drawer
|
import de.webfussel.soulecho.navigation.Drawer
|
||||||
import de.webfussel.soulecho.ui.theme.SoulEchoTheme
|
import de.webfussel.soulecho.ui.theme.SoulEchoTheme
|
||||||
|
|
||||||
|
val LocalMoodState = compositionLocalOf<MoodWithInfo> { error("No MoodState provided") }
|
||||||
|
|
||||||
@Composable
|
@Composable
|
||||||
fun SoulEchoApp() {
|
fun SoulEchoApp() {
|
||||||
var currentMood by remember {
|
var currentMood by remember { mutableStateOf(MoodWithInfo(mood = PossibleMood.HAPPY, info = "")) }
|
||||||
mutableStateOf(MoodWithInfo(mood = PossibleMood.HAPPY, info = ""))
|
|
||||||
}
|
CompositionLocalProvider(LocalMoodState provides currentMood) {
|
||||||
SoulEchoTheme (currentTheme = currentMood.mood) {
|
SoulEchoTheme () {
|
||||||
Drawer (
|
Drawer () {
|
||||||
currentMood = currentMood.mood,
|
MoodSection(
|
||||||
) {
|
onMoodChange = { currentMood = it }
|
||||||
MoodSection(
|
)
|
||||||
currentMood = currentMood,
|
}
|
||||||
onMoodChange = { currentMood = it }
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -41,10 +42,4 @@ class MainActivity : ComponentActivity() {
|
||||||
SoulEchoApp()
|
SoulEchoApp()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
@Preview(showBackground = true)
|
|
||||||
@Composable
|
|
||||||
fun DefaultPreview() {
|
|
||||||
SoulEchoApp()
|
|
||||||
}
|
}
|
|
@ -22,16 +22,18 @@ import androidx.compose.ui.Modifier
|
||||||
import androidx.compose.ui.text.font.FontWeight
|
import androidx.compose.ui.text.font.FontWeight
|
||||||
import androidx.compose.ui.unit.dp
|
import androidx.compose.ui.unit.dp
|
||||||
import androidx.compose.ui.unit.sp
|
import androidx.compose.ui.unit.sp
|
||||||
|
import de.webfussel.soulecho.LocalMoodState
|
||||||
import de.webfussel.soulecho.mood.Moods.getMoodById
|
import de.webfussel.soulecho.mood.Moods.getMoodById
|
||||||
import de.webfussel.soulecho.R
|
import de.webfussel.soulecho.R
|
||||||
|
|
||||||
@Composable
|
@Composable
|
||||||
fun MoodSection(
|
fun MoodSection(
|
||||||
currentMood: MoodWithInfo = MoodWithInfo(mood = PossibleMood.HAPPY, info = ""),
|
|
||||||
onMoodChange: (MoodWithInfo) -> Unit = {}
|
onMoodChange: (MoodWithInfo) -> Unit = {}
|
||||||
) {
|
) {
|
||||||
|
val currentMood = LocalMoodState.current
|
||||||
var dialogOpen by remember { mutableStateOf(false) }
|
var dialogOpen by remember { mutableStateOf(false) }
|
||||||
val theme = MaterialTheme.colorScheme
|
val theme = MaterialTheme.colorScheme
|
||||||
|
|
||||||
Box(modifier = Modifier.fillMaxSize()) {
|
Box(modifier = Modifier.fillMaxSize()) {
|
||||||
Column(
|
Column(
|
||||||
horizontalAlignment = Alignment.CenterHorizontally,
|
horizontalAlignment = Alignment.CenterHorizontally,
|
||||||
|
|
|
@ -2,11 +2,13 @@ package de.webfussel.soulecho.navigation
|
||||||
import de.webfussel.soulecho.R
|
import de.webfussel.soulecho.R
|
||||||
|
|
||||||
import androidx.compose.foundation.Image
|
import androidx.compose.foundation.Image
|
||||||
|
import androidx.compose.foundation.background
|
||||||
import androidx.compose.foundation.layout.Box
|
import androidx.compose.foundation.layout.Box
|
||||||
import androidx.compose.foundation.layout.Column
|
import androidx.compose.foundation.layout.Column
|
||||||
import androidx.compose.foundation.layout.PaddingValues
|
import androidx.compose.foundation.layout.PaddingValues
|
||||||
import androidx.compose.foundation.layout.Row
|
import androidx.compose.foundation.layout.Row
|
||||||
import androidx.compose.foundation.layout.Spacer
|
import androidx.compose.foundation.layout.Spacer
|
||||||
|
import androidx.compose.foundation.layout.fillMaxHeight
|
||||||
import androidx.compose.foundation.layout.fillMaxWidth
|
import androidx.compose.foundation.layout.fillMaxWidth
|
||||||
import androidx.compose.foundation.layout.height
|
import androidx.compose.foundation.layout.height
|
||||||
import androidx.compose.foundation.layout.padding
|
import androidx.compose.foundation.layout.padding
|
||||||
|
@ -42,6 +44,7 @@ import androidx.compose.ui.text.TextStyle
|
||||||
import androidx.compose.ui.tooling.preview.Preview
|
import androidx.compose.ui.tooling.preview.Preview
|
||||||
import androidx.compose.ui.unit.dp
|
import androidx.compose.ui.unit.dp
|
||||||
import androidx.compose.ui.unit.sp
|
import androidx.compose.ui.unit.sp
|
||||||
|
import de.webfussel.soulecho.LocalMoodState
|
||||||
import de.webfussel.soulecho.mood.Moods.getMoodById
|
import de.webfussel.soulecho.mood.Moods.getMoodById
|
||||||
import de.webfussel.soulecho.mood.PossibleMood
|
import de.webfussel.soulecho.mood.PossibleMood
|
||||||
import kotlinx.coroutines.launch
|
import kotlinx.coroutines.launch
|
||||||
|
@ -53,14 +56,14 @@ fun CustomNavigationDrawerItem(
|
||||||
selected: Boolean,
|
selected: Boolean,
|
||||||
onClick: () -> Unit,
|
onClick: () -> Unit,
|
||||||
modifier: Modifier = Modifier,
|
modifier: Modifier = Modifier,
|
||||||
contentPadding: PaddingValues = PaddingValues(horizontal = 12.dp, vertical = 8.dp)
|
contentPadding: PaddingValues = PaddingValues(horizontal = 16.dp, vertical = 8.dp)
|
||||||
) {
|
) {
|
||||||
Surface(
|
Surface(
|
||||||
selected = selected,
|
selected = selected,
|
||||||
onClick = onClick,
|
onClick = onClick,
|
||||||
modifier = modifier.fillMaxWidth(),
|
modifier = modifier.fillMaxWidth(),
|
||||||
color = if (selected) MaterialTheme.colorScheme.primary else Color.Transparent,
|
color = if (selected) MaterialTheme.colorScheme.background else Color.Transparent,
|
||||||
shape = RoundedCornerShape(12.dp)
|
shape = RoundedCornerShape(8.dp)
|
||||||
) {
|
) {
|
||||||
Row(
|
Row(
|
||||||
modifier = Modifier.padding(contentPadding),
|
modifier = Modifier.padding(contentPadding),
|
||||||
|
@ -78,16 +81,15 @@ fun NavigationBlock (
|
||||||
items : List<NavigationEntry>,
|
items : List<NavigationEntry>,
|
||||||
currentNavigation: NavigationEntry,
|
currentNavigation: NavigationEntry,
|
||||||
onNavigationItemClicked: (NavigationEntry) -> Unit = {},
|
onNavigationItemClicked: (NavigationEntry) -> Unit = {},
|
||||||
currentMood: PossibleMood = PossibleMood.HAPPY,
|
|
||||||
) {
|
) {
|
||||||
val theme = MaterialTheme.colorScheme
|
val currentMood = LocalMoodState.current.mood
|
||||||
|
|
||||||
for (item in items) {
|
for (item in items) {
|
||||||
CustomNavigationDrawerItem(
|
CustomNavigationDrawerItem(
|
||||||
icon = {
|
icon = {
|
||||||
Icon(
|
Icon(
|
||||||
painterResource(
|
painterResource(
|
||||||
if (item.id == "current") getMoodById(currentMood).icon else item.icon
|
if (item.id == "current") getMoodById(currentMood).icon else item.icon
|
||||||
),
|
),
|
||||||
contentDescription = item.label,
|
contentDescription = item.label,
|
||||||
modifier = Modifier.size(20.dp),
|
modifier = Modifier.size(20.dp),
|
||||||
|
@ -120,11 +122,11 @@ fun DrawerTop() {
|
||||||
.align(Alignment.BottomStart)
|
.align(Alignment.BottomStart)
|
||||||
.padding(bottom = 16.dp, start = 16.dp),
|
.padding(bottom = 16.dp, start = 16.dp),
|
||||||
style = TextStyle(
|
style = TextStyle(
|
||||||
fontSize = 24.sp,
|
fontSize = 32.sp,
|
||||||
shadow = Shadow(
|
shadow = Shadow(
|
||||||
color = Color.Black,
|
color = Color.Black,
|
||||||
offset = Offset(2f, 5f),
|
offset = Offset(0f, 0f),
|
||||||
blurRadius = 2f,
|
blurRadius = 8f,
|
||||||
)
|
)
|
||||||
),
|
),
|
||||||
color = Color.White,
|
color = Color.White,
|
||||||
|
@ -133,14 +135,13 @@ fun DrawerTop() {
|
||||||
}
|
}
|
||||||
|
|
||||||
@Composable
|
@Composable
|
||||||
fun DrawerContent (
|
fun DrawerContent () {
|
||||||
currentMood: PossibleMood = PossibleMood.HAPPY,
|
|
||||||
) {
|
|
||||||
var currentNavigation by remember {
|
var currentNavigation by remember {
|
||||||
mutableStateOf(Navigation.getTopNavigation()[0])
|
mutableStateOf(Navigation.getTopNavigation()[0])
|
||||||
}
|
}
|
||||||
|
|
||||||
ModalDrawerSheet(
|
ModalDrawerSheet(
|
||||||
|
drawerContainerColor = MaterialTheme.colorScheme.surface,
|
||||||
modifier = Modifier.width(224.dp)
|
modifier = Modifier.width(224.dp)
|
||||||
) {
|
) {
|
||||||
Column {
|
Column {
|
||||||
|
@ -151,7 +152,6 @@ fun DrawerContent (
|
||||||
items = Navigation.getTopNavigation(),
|
items = Navigation.getTopNavigation(),
|
||||||
currentNavigation = currentNavigation,
|
currentNavigation = currentNavigation,
|
||||||
onNavigationItemClicked = { currentNavigation = it },
|
onNavigationItemClicked = { currentNavigation = it },
|
||||||
currentMood = currentMood,
|
|
||||||
)
|
)
|
||||||
Spacer(Modifier.weight(1f))
|
Spacer(Modifier.weight(1f))
|
||||||
NavigationBlock(
|
NavigationBlock(
|
||||||
|
@ -166,7 +166,6 @@ fun DrawerContent (
|
||||||
@OptIn(ExperimentalMaterial3Api::class)
|
@OptIn(ExperimentalMaterial3Api::class)
|
||||||
@Composable
|
@Composable
|
||||||
fun Drawer (
|
fun Drawer (
|
||||||
currentMood: PossibleMood = PossibleMood.HAPPY,
|
|
||||||
content: @Composable (PaddingValues) -> Unit
|
content: @Composable (PaddingValues) -> Unit
|
||||||
) {
|
) {
|
||||||
val state = rememberDrawerState(initialValue = DrawerValue.Closed)
|
val state = rememberDrawerState(initialValue = DrawerValue.Closed)
|
||||||
|
@ -175,8 +174,8 @@ fun Drawer (
|
||||||
var currentPage by remember { mutableStateOf("Stimmung") }
|
var currentPage by remember { mutableStateOf("Stimmung") }
|
||||||
|
|
||||||
ModalNavigationDrawer(
|
ModalNavigationDrawer(
|
||||||
drawerContent = { DrawerContent(currentMood = currentMood) },
|
drawerContent = { DrawerContent() },
|
||||||
drawerState = state
|
drawerState = state,
|
||||||
) {
|
) {
|
||||||
Scaffold (
|
Scaffold (
|
||||||
topBar = {
|
topBar = {
|
||||||
|
@ -202,18 +201,4 @@ fun Drawer (
|
||||||
innerPadding -> content(innerPadding)
|
innerPadding -> content(innerPadding)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
@Preview
|
|
||||||
@Composable
|
|
||||||
fun DrawerPreview() {
|
|
||||||
Drawer {
|
|
||||||
Text("Test", modifier = Modifier.padding(it))
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@Preview
|
|
||||||
@Composable
|
|
||||||
fun DrawerContentPreview() {
|
|
||||||
DrawerContent()
|
|
||||||
}
|
}
|
|
@ -9,10 +9,12 @@ import androidx.compose.material3.lightColorScheme
|
||||||
import androidx.compose.runtime.Composable
|
import androidx.compose.runtime.Composable
|
||||||
import androidx.compose.ui.graphics.Color
|
import androidx.compose.ui.graphics.Color
|
||||||
import androidx.compose.ui.platform.LocalContext
|
import androidx.compose.ui.platform.LocalContext
|
||||||
|
import de.webfussel.soulecho.LocalMoodState
|
||||||
import de.webfussel.soulecho.mood.PossibleMood
|
import de.webfussel.soulecho.mood.PossibleMood
|
||||||
|
|
||||||
// Base-Konfiguration für alle Themes
|
// Base-Konfiguration für alle Themes
|
||||||
private val BaseColorConfig = object {
|
private val BaseColorConfig = object {
|
||||||
|
val surface = Color.White
|
||||||
val onPrimary = Color.White
|
val onPrimary = Color.White
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -20,7 +22,7 @@ private val BaseColorConfig = object {
|
||||||
private fun createEmotionColorScheme(fgColor: Color, bgColor: Color) = lightColorScheme(
|
private fun createEmotionColorScheme(fgColor: Color, bgColor: Color) = lightColorScheme(
|
||||||
primary = fgColor,
|
primary = fgColor,
|
||||||
background = bgColor,
|
background = bgColor,
|
||||||
surface = bgColor,
|
surface = BaseColorConfig.surface,
|
||||||
onPrimary = BaseColorConfig.onPrimary,
|
onPrimary = BaseColorConfig.onPrimary,
|
||||||
onBackground = fgColor,
|
onBackground = fgColor,
|
||||||
onSurface = fgColor,
|
onSurface = fgColor,
|
||||||
|
@ -40,9 +42,9 @@ private val PanicColorTheme = createEmotionColorScheme(PanicFg, PanicBg)
|
||||||
|
|
||||||
@Composable
|
@Composable
|
||||||
fun SoulEchoTheme(
|
fun SoulEchoTheme(
|
||||||
currentTheme: PossibleMood = PossibleMood.HAPPY,
|
|
||||||
content: @Composable () -> Unit
|
content: @Composable () -> Unit
|
||||||
) {
|
) {
|
||||||
|
val currentTheme = LocalMoodState.current.mood
|
||||||
val colorScheme = when (currentTheme) {
|
val colorScheme = when (currentTheme) {
|
||||||
PossibleMood.HAPPY -> HappyColorTheme
|
PossibleMood.HAPPY -> HappyColorTheme
|
||||||
PossibleMood.RELAXED -> RelaxedColorTheme
|
PossibleMood.RELAXED -> RelaxedColorTheme
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue