From 408a23563e529d5b46380844a324568589207fe8 Mon Sep 17 00:00:00 2001 From: MM20 <15646950+MM2-0@users.noreply.github.com> Date: Mon, 11 Apr 2022 22:47:24 +0200 Subject: [PATCH] Add color scheme previews --- .../colorscheme/ColorSchemeSettingsScreen.kt | 95 +++++++++++++++++-- .../ColorSchemeSettingsScreenVM.kt | 2 + .../mm20/launcher2/ui/theme/LauncherTheme.kt | 29 +++--- 3 files changed, 103 insertions(+), 23 deletions(-) diff --git a/ui/src/main/java/de/mm20/launcher2/ui/settings/colorscheme/ColorSchemeSettingsScreen.kt b/ui/src/main/java/de/mm20/launcher2/ui/settings/colorscheme/ColorSchemeSettingsScreen.kt index efedf950..c1b16fa6 100644 --- a/ui/src/main/java/de/mm20/launcher2/ui/settings/colorscheme/ColorSchemeSettingsScreen.kt +++ b/ui/src/main/java/de/mm20/launcher2/ui/settings/colorscheme/ColorSchemeSettingsScreen.kt @@ -1,19 +1,28 @@ package de.mm20.launcher2.ui.settings.colorscheme +import androidx.compose.foundation.background +import androidx.compose.foundation.isSystemInDarkTheme +import androidx.compose.foundation.layout.* import androidx.compose.material.icons.Icons import androidx.compose.material.icons.rounded.RadioButtonChecked import androidx.compose.material.icons.rounded.RadioButtonUnchecked +import androidx.compose.material3.ColorScheme +import androidx.compose.material3.Surface import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue import androidx.compose.runtime.livedata.observeAsState +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier import androidx.compose.ui.platform.LocalContext import androidx.compose.ui.res.stringResource +import androidx.compose.ui.unit.dp import androidx.lifecycle.viewmodel.compose.viewModel -import de.mm20.launcher2.preferences.Settings.AppearanceSettings.ColorScheme +import de.mm20.launcher2.preferences.Settings.AppearanceSettings 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.theme.getColorScheme @Composable fun ColorSchemeSettingsScreen() { @@ -23,18 +32,84 @@ fun ColorSchemeSettingsScreen() { PreferenceScreen(title = stringResource(R.string.preference_screen_colors)) { item { PreferenceCategory { + val theme by viewModel.theme.observeAsState() + val darkTheme = + theme == AppearanceSettings.Theme.Dark || theme == AppearanceSettings.Theme.System && isSystemInDarkTheme() val colorScheme by viewModel.colorScheme.observeAsState() - Preference( - title = stringResource(R.string.preference_colors_default), - icon = if (colorScheme == ColorScheme.Default) Icons.Rounded.RadioButtonChecked else Icons.Rounded.RadioButtonUnchecked, - onClick = { viewModel.setColorScheme(ColorScheme.Default) } - ) - Preference( - title = stringResource(R.string.preference_colors_bw), - icon = if (colorScheme == ColorScheme.BlackAndWhite) Icons.Rounded.RadioButtonChecked else Icons.Rounded.RadioButtonUnchecked, - onClick = { viewModel.setColorScheme(ColorScheme.BlackAndWhite) } + + val items = listOf( + AppearanceSettings.ColorScheme.Default to R.string.preference_colors_default, + AppearanceSettings.ColorScheme.BlackAndWhite to R.string.preference_colors_bw ) + + for (cs in items) { + Preference( + title = stringResource(cs.second), + icon = if (colorScheme == cs.first) Icons.Rounded.RadioButtonChecked else Icons.Rounded.RadioButtonUnchecked, + onClick = { viewModel.setColorScheme(cs.first) }, + controls = { + ColorSchemePreview( + getColorScheme( + LocalContext.current, + cs.first, + darkTheme, + ) + ) + } + ) + } } } } +} + +@Composable +fun ColorSchemePreview(colorScheme: ColorScheme) { + Box( + modifier = Modifier + .padding(vertical = 12.dp) + .width(72.dp) + .height(36.dp), + contentAlignment = Alignment.Center + ) { + Row( + verticalAlignment = Alignment.CenterVertically + ) { + Surface( + tonalElevation = 1.dp, + color = colorScheme.surface, + modifier = Modifier + .size(36.dp) + ) {} + Surface( + tonalElevation = 1.dp, + color = colorScheme.surfaceVariant, + modifier = Modifier + .size(36.dp) + ) {} + } + Row( + verticalAlignment = Alignment.CenterVertically + ) { + Surface( + tonalElevation = 1.dp, + color = colorScheme.primary, + modifier = Modifier + .size(16.dp) + ) {} + Surface( + tonalElevation = 1.dp, + color = colorScheme.secondary, + modifier = Modifier + .padding(horizontal = 8.dp) + .size(16.dp) + ) {} + Surface( + tonalElevation = 1.dp, + color = colorScheme.tertiary, + modifier = Modifier + .size(16.dp) + ) {} + } + } } \ No newline at end of file diff --git a/ui/src/main/java/de/mm20/launcher2/ui/settings/colorscheme/ColorSchemeSettingsScreenVM.kt b/ui/src/main/java/de/mm20/launcher2/ui/settings/colorscheme/ColorSchemeSettingsScreenVM.kt index 3cbbfd89..f48b1329 100644 --- a/ui/src/main/java/de/mm20/launcher2/ui/settings/colorscheme/ColorSchemeSettingsScreenVM.kt +++ b/ui/src/main/java/de/mm20/launcher2/ui/settings/colorscheme/ColorSchemeSettingsScreenVM.kt @@ -13,6 +13,8 @@ import org.koin.core.component.inject class ColorSchemeSettingsScreenVM : ViewModel(), KoinComponent { private val dataStore: LauncherDataStore by inject() + val theme = dataStore.data.map { it.appearance.theme }.asLiveData() + val colorScheme = dataStore.data.map { it.appearance.colorScheme }.asLiveData() fun setColorScheme(colorScheme: AppearanceSettings.ColorScheme) { viewModelScope.launch { diff --git a/ui/src/main/java/de/mm20/launcher2/ui/theme/LauncherTheme.kt b/ui/src/main/java/de/mm20/launcher2/ui/theme/LauncherTheme.kt index 3b191ac3..5c58979e 100644 --- a/ui/src/main/java/de/mm20/launcher2/ui/theme/LauncherTheme.kt +++ b/ui/src/main/java/de/mm20/launcher2/ui/theme/LauncherTheme.kt @@ -1,6 +1,8 @@ package de.mm20.launcher2.ui.theme +import android.content.Context import androidx.compose.foundation.isSystemInDarkTheme +import androidx.compose.material3.ColorScheme import androidx.compose.material3.MaterialTheme import androidx.compose.material3.dynamicDarkColorScheme import androidx.compose.material3.dynamicLightColorScheme @@ -11,7 +13,7 @@ import androidx.compose.runtime.remember import androidx.compose.ui.platform.LocalContext import de.mm20.launcher2.ktx.isAtLeastApiLevel import de.mm20.launcher2.preferences.LauncherDataStore -import de.mm20.launcher2.preferences.Settings.AppearanceSettings.ColorScheme +import de.mm20.launcher2.preferences.Settings.AppearanceSettings import de.mm20.launcher2.preferences.Settings.AppearanceSettings.Theme import de.mm20.launcher2.ui.theme.colorscheme.DarkBlackAndWhiteColorScheme import de.mm20.launcher2.ui.theme.colorscheme.DarkPre31DefaultColorScheme @@ -30,7 +32,7 @@ fun LauncherTheme( val dataStore: LauncherDataStore by inject() val colorSchemePreference by remember { dataStore.data.map { it.appearance.colorScheme } }.collectAsState( - ColorScheme.Default + AppearanceSettings.ColorScheme.Default ) val themePreference by remember { dataStore.data.map { it.appearance.theme } }.collectAsState( Theme.System @@ -39,26 +41,27 @@ fun LauncherTheme( val darkTheme = themePreference == Theme.Dark || themePreference == Theme.System && isSystemInDarkTheme() + MaterialTheme( + colorScheme = getColorScheme(LocalContext.current, colorSchemePreference, darkTheme), + typography = DefaultTypography, + content = content + ) +} - val colorScheme = when (colorSchemePreference) { - ColorScheme.BlackAndWhite -> { +fun getColorScheme(context: Context, colorScheme: AppearanceSettings.ColorScheme, darkTheme: Boolean): ColorScheme { + return when (colorScheme) { + AppearanceSettings.ColorScheme.BlackAndWhite -> { if (darkTheme) DarkBlackAndWhiteColorScheme else LightBlackAndWhiteColorScheme } else -> { if (darkTheme) { - if (isAtLeastApiLevel(31)) dynamicDarkColorScheme(LocalContext.current) + if (isAtLeastApiLevel(31)) dynamicDarkColorScheme(context) else DarkPre31DefaultColorScheme } else { - if (isAtLeastApiLevel(31)) dynamicLightColorScheme(LocalContext.current) + if (isAtLeastApiLevel(31)) dynamicLightColorScheme(context) else LightPre31DefaultColorScheme } } } - - MaterialTheme( - colorScheme = colorScheme, - typography = DefaultTypography, - content = content - ) -} +} \ No newline at end of file