From 9c70a495f8bac229f7d45cf965f0359611672afe Mon Sep 17 00:00:00 2001 From: MM20 <15646950+MM2-0@users.noreply.github.com> Date: Thu, 24 Aug 2023 23:50:35 +0200 Subject: [PATCH] Change color scheme preview --- .../colorscheme/ThemesSettingsScreen.kt | 162 ++++++++++-------- 1 file changed, 89 insertions(+), 73 deletions(-) diff --git a/app/ui/src/main/java/de/mm20/launcher2/ui/settings/colorscheme/ThemesSettingsScreen.kt b/app/ui/src/main/java/de/mm20/launcher2/ui/settings/colorscheme/ThemesSettingsScreen.kt index 5c5e67f8..48f3f396 100644 --- a/app/ui/src/main/java/de/mm20/launcher2/ui/settings/colorscheme/ThemesSettingsScreen.kt +++ b/app/ui/src/main/java/de/mm20/launcher2/ui/settings/colorscheme/ThemesSettingsScreen.kt @@ -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) + ) + } + } } \ No newline at end of file