Change color scheme preview

This commit is contained in:
MM20 2023-08-24 23:50:35 +02:00
parent ebee33ecf0
commit 9c70a495f8
No known key found for this signature in database
GPG Key ID: 0B61A8F2DEAFA389

View File

@ -1,13 +1,15 @@
package de.mm20.launcher2.ui.settings.colorscheme
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.CornerSize
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.rounded.Edit
import androidx.compose.material.icons.rounded.MoreVert
@ -24,19 +26,22 @@ import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.unit.dp
import androidx.lifecycle.compose.collectAsStateWithLifecycle
import androidx.lifecycle.viewmodel.compose.viewModel
import de.mm20.launcher2.themes.Theme
import de.mm20.launcher2.ui.R
import de.mm20.launcher2.ui.component.preferences.Preference
import de.mm20.launcher2.ui.component.preferences.PreferenceCategory
import de.mm20.launcher2.ui.component.preferences.PreferenceScreen
import de.mm20.launcher2.ui.locals.LocalDarkTheme
import de.mm20.launcher2.ui.locals.LocalNavController
import de.mm20.launcher2.ui.theme.colorscheme.systemCorePalette
import de.mm20.launcher2.ui.theme.colorscheme.darkColorSchemeOf
import de.mm20.launcher2.ui.theme.colorscheme.lightColorSchemeOf
@Composable
fun ThemesSettingsScreen() {
@ -46,8 +51,6 @@ fun ThemesSettingsScreen() {
val selectedTheme by viewModel.selectedTheme.collectAsStateWithLifecycle(null)
val themes by viewModel.themes.collectAsStateWithLifecycle(emptyList())
val systemPalette = systemCorePalette()
PreferenceScreen(title = stringResource(R.string.preference_screen_colors)) {
item {
PreferenceCategory {
@ -57,24 +60,31 @@ fun ThemesSettingsScreen() {
icon = if (theme.id == selectedTheme) Icons.Rounded.RadioButtonChecked else Icons.Rounded.RadioButtonUnchecked,
title = theme.name,
controls = {
IconButton(onClick = { showMenu = true }) {
Icon(Icons.Rounded.MoreVert, null)
}
DropdownMenu(
expanded = showMenu,
onDismissRequest = { showMenu = false }
Row(
verticalAlignment = Alignment.CenterVertically,
) {
if (!theme.builtIn) {
DropdownMenuItem(
leadingIcon = {
Icon(Icons.Rounded.Edit, null)
},
text = { Text("Edit") },
onClick = {
navController?.navigate("settings/appearance/themes/${theme.id}")
showMenu = false
}
)
ColorSchemePreview(theme)
IconButton(
modifier = Modifier.padding(start = 12.dp),
onClick = { showMenu = true }) {
Icon(Icons.Rounded.MoreVert, null)
}
DropdownMenu(
expanded = showMenu,
onDismissRequest = { showMenu = false }
) {
if (!theme.builtIn) {
DropdownMenuItem(
leadingIcon = {
Icon(Icons.Rounded.Edit, null)
},
text = { Text("Edit") },
onClick = {
navController?.navigate("settings/appearance/themes/${theme.id}")
showMenu = false
}
)
}
}
}
},
@ -82,58 +92,64 @@ fun ThemesSettingsScreen() {
viewModel.selectTheme(theme)
}
)
Row(
modifier = Modifier
.fillMaxWidth()
.padding(bottom = 8.dp)
.height(8.dp)
.clip(
MaterialTheme.shapes.small.copy(
topStart = CornerSize(0f),
topEnd = CornerSize(0f)
)
)
) {
Box(
modifier = Modifier
.background(Color(theme.corePalette.primary ?: systemPalette.primary))
.weight(1f)
.fillMaxHeight()
)
Box(
modifier = Modifier
.background(Color(theme.corePalette.secondary ?: systemPalette.secondary))
.weight(1f)
.fillMaxHeight()
)
Box(
modifier = Modifier
.background(Color(theme.corePalette.tertiary ?: systemPalette.tertiary))
.weight(1f)
.fillMaxHeight()
)
Box(
modifier = Modifier
.background(Color(theme.corePalette.neutral ?: systemPalette.neutral))
.weight(1f)
.fillMaxHeight()
)
Box(
modifier = Modifier
.background(
Color(theme.corePalette.neutralVariant ?: systemPalette.neutralVariant))
.weight(1f)
.fillMaxHeight()
)
Box(
modifier = Modifier
.background(Color(theme.corePalette.error ?: systemPalette.error))
.weight(1f)
.fillMaxHeight()
)
}
}
}
}
}
}
@Composable
fun ColorSchemePreview(theme: Theme) {
val dark = LocalDarkTheme.current
val scheme = if (dark) darkColorSchemeOf(theme) else lightColorSchemeOf(theme)
Box(
modifier = Modifier
.height(28.dp)
.width(72.dp)
.clip(MaterialTheme.shapes.small)
.border(1.dp, scheme.outlineVariant, MaterialTheme.shapes.small)
) {
Row(
modifier = Modifier.fillMaxSize(),
) {
Box(
modifier = Modifier
.fillMaxHeight()
.weight(1f)
.background(scheme.surface)
)
Box(
modifier = Modifier
.fillMaxHeight()
.weight(1f)
.background(scheme.surfaceVariant)
)
}
Row(
modifier = Modifier.fillMaxSize(),
) {
Box(
modifier = Modifier
.padding(6.dp)
.clip(MaterialTheme.shapes.extraSmall)
.size(16.dp)
.background(scheme.primary)
)
Box(
modifier = Modifier
.padding(vertical = 6.dp)
.clip(MaterialTheme.shapes.extraSmall)
.size(16.dp)
.background(scheme.secondary)
)
Box(
modifier = Modifier
.padding(6.dp)
.clip(MaterialTheme.shapes.extraSmall)
.size(16.dp)
.background(scheme.tertiary)
)
}
}
}