Change color scheme preview
This commit is contained in:
parent
ebee33ecf0
commit
9c70a495f8
@ -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)
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user