From c81cb4c80166c775f432dc44a759947a02f22793 Mon Sep 17 00:00:00 2001 From: MM20 <15646950+MM2-0@users.noreply.github.com> Date: Tue, 22 Aug 2023 18:28:53 +0200 Subject: [PATCH] Theme preferences: move colors, add more preview examples --- .../colorscheme/ThemePreferenceCategory.kt | 10 +- .../colorscheme/ThemeSettingsScreen.kt | 211 ++++++++++++++---- 2 files changed, 178 insertions(+), 43 deletions(-) diff --git a/app/ui/src/main/java/de/mm20/launcher2/ui/settings/colorscheme/ThemePreferenceCategory.kt b/app/ui/src/main/java/de/mm20/launcher2/ui/settings/colorscheme/ThemePreferenceCategory.kt index f99cd8f3..3a5586a9 100644 --- a/app/ui/src/main/java/de/mm20/launcher2/ui/settings/colorscheme/ThemePreferenceCategory.kt +++ b/app/ui/src/main/java/de/mm20/launcher2/ui/settings/colorscheme/ThemePreferenceCategory.kt @@ -5,9 +5,12 @@ import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.FlowRow import androidx.compose.foundation.layout.FlowRowScope +import androidx.compose.foundation.layout.IntrinsicSize import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.RowScope import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.width import androidx.compose.foundation.rememberScrollState import androidx.compose.material.icons.Icons import androidx.compose.material.icons.rounded.DarkMode @@ -34,7 +37,7 @@ fun ThemePreferenceCategory( darkMode: Boolean, onDarkModeChanged: (Boolean) -> Unit, colorPreferences: @Composable () -> Unit = {}, - preview: @Composable FlowRowScope.() -> Unit + preview: @Composable RowScope.() -> Unit ) { Column( modifier = Modifier.padding(top = 16.dp) @@ -80,11 +83,12 @@ fun ThemePreferenceCategory( ) ) { - FlowRow( + Row( modifier = Modifier .fillMaxWidth() + .horizontalScroll(rememberScrollState()) .padding(16.dp), - verticalArrangement = Arrangement.Center, + verticalAlignment = Alignment.CenterVertically, ) { preview() } diff --git a/app/ui/src/main/java/de/mm20/launcher2/ui/settings/colorscheme/ThemeSettingsScreen.kt b/app/ui/src/main/java/de/mm20/launcher2/ui/settings/colorscheme/ThemeSettingsScreen.kt index 0e44406a..b3b0911a 100644 --- a/app/ui/src/main/java/de/mm20/launcher2/ui/settings/colorscheme/ThemeSettingsScreen.kt +++ b/app/ui/src/main/java/de/mm20/launcher2/ui/settings/colorscheme/ThemeSettingsScreen.kt @@ -3,20 +3,28 @@ package de.mm20.launcher2.ui.settings.colorscheme import androidx.compose.foundation.horizontalScroll import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.IntrinsicSize import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size +import androidx.compose.foundation.layout.width +import androidx.compose.foundation.layout.wrapContentWidth import androidx.compose.foundation.rememberScrollState import androidx.compose.material.icons.Icons import androidx.compose.material.icons.rounded.Edit +import androidx.compose.material.icons.rounded.Lock +import androidx.compose.material.icons.rounded.OpenInNew import androidx.compose.material.icons.rounded.PlayArrow import androidx.compose.material.icons.rounded.Search +import androidx.compose.material.icons.rounded.StarBorder import androidx.compose.material.icons.rounded.Tag import androidx.compose.material3.Button import androidx.compose.material3.ButtonDefaults import androidx.compose.material3.CardDefaults +import androidx.compose.material3.DropdownMenuItem import androidx.compose.material3.ElevatedCard import androidx.compose.material3.FilledTonalIconButton import androidx.compose.material3.FilterChip @@ -24,11 +32,13 @@ import androidx.compose.material3.FilterChipDefaults import androidx.compose.material3.FloatingActionButton import androidx.compose.material3.HorizontalDivider import androidx.compose.material3.Icon +import androidx.compose.material3.IconButton import androidx.compose.material3.MaterialTheme import androidx.compose.material3.OutlinedButton import androidx.compose.material3.OutlinedCard import androidx.compose.material3.OutlinedTextField import androidx.compose.material3.Snackbar +import androidx.compose.material3.Surface import androidx.compose.material3.Switch import androidx.compose.material3.Text import androidx.compose.material3.TextButton @@ -54,6 +64,7 @@ import de.mm20.launcher2.themes.DefaultDarkColorScheme import de.mm20.launcher2.themes.DefaultLightColorScheme import de.mm20.launcher2.themes.merge import de.mm20.launcher2.ui.R +import de.mm20.launcher2.ui.component.Banner import de.mm20.launcher2.ui.component.ShapedLauncherIcon import de.mm20.launcher2.ui.component.preferences.PreferenceScreen import de.mm20.launcher2.ui.locals.LocalDarkTheme @@ -723,31 +734,6 @@ fun ThemeSettingsScreen(themeId: UUID) { defaultValue = selectedDefaultScheme.surfaceTint, modifier = Modifier.padding(end = 12.dp), ) - - ThemeColorPreference( - title = "On Surface", - value = selectedColorScheme.onSurface, - corePalette = mergedCorePalette, - onValueChange = { - viewModel.updateTheme( - if (previewDarkTheme) { - theme!!.copy( - darkColorScheme = theme!!.darkColorScheme.copy( - onSurface = it - ) - ) - } else { - theme!!.copy( - lightColorScheme = theme!!.lightColorScheme.copy( - onSurface = it - ) - ) - } - ) - }, - defaultValue = selectedDefaultScheme.onSurface, - modifier = Modifier.padding(end = 12.dp), - ) }, ) { ElevatedCard( @@ -932,6 +918,79 @@ fun ThemeSettingsScreen(themeId: UUID) { defaultValue = selectedDefaultScheme.surfaceContainerHighest, modifier = Modifier.padding(end = 12.dp), ) + ThemeColorPreference( + title = "Surface Variant", + value = selectedColorScheme.surfaceVariant, + corePalette = mergedCorePalette, + onValueChange = { + viewModel.updateTheme( + if (previewDarkTheme) { + theme!!.copy( + darkColorScheme = theme!!.darkColorScheme.copy( + surfaceVariant = it + ) + ) + } else { + theme!!.copy( + lightColorScheme = theme!!.lightColorScheme.copy( + surfaceVariant = it + ) + ) + } + ) + }, + defaultValue = selectedDefaultScheme.surfaceVariant, + modifier = Modifier.padding(end = 12.dp), + ) + }, + ) { + Banner( + modifier = Modifier.padding(end = 16.dp).align(Alignment.CenterVertically).width(240.dp), + text = "Banner", + icon = Icons.Rounded.Lock + ) + Switch( + modifier = Modifier + .padding(end = 16.dp) + .align(Alignment.CenterVertically), + checked = false, + onCheckedChange = {} + ) + } + } + item { + ThemePreferenceCategory( + title = "Content colors", + previewColorScheme = previewColorScheme, + darkMode = previewDarkTheme, + onDarkModeChanged = { previewDarkTheme = it }, + colorPreferences = { + ThemeColorPreference( + title = "On Surface", + value = selectedColorScheme.onSurface, + corePalette = mergedCorePalette, + onValueChange = { + viewModel.updateTheme( + if (previewDarkTheme) { + theme!!.copy( + darkColorScheme = theme!!.darkColorScheme.copy( + onSurface = it + ) + ) + } else { + theme!!.copy( + lightColorScheme = theme!!.lightColorScheme.copy( + onSurface = it + ) + ) + } + ) + }, + defaultValue = selectedDefaultScheme.onSurface, + modifier = Modifier.padding(end = 12.dp), + ) + + ThemeColorPreference( title = "On Surface Variant", value = selectedColorScheme.onSurfaceVariant, @@ -958,7 +1017,74 @@ fun ThemeSettingsScreen(themeId: UUID) { ) }, ) { + ElevatedCard( + modifier = Modifier + .padding(end = 16.dp) + .size(64.dp), + elevation = CardDefaults.elevatedCardElevation( + defaultElevation = 0.dp + ) + ) { + Box( + modifier = Modifier.fillMaxSize(), + contentAlignment = Alignment.Center, + ) { + Text( + "Text", + style = MaterialTheme.typography.bodySmall, + color = MaterialTheme.colorScheme.onSurface + ) + } + } + ElevatedCard( + modifier = Modifier + .padding(end = 16.dp) + .size(64.dp), + elevation = CardDefaults.elevatedCardElevation( + defaultElevation = 1.dp + ) + ) { + Box( + modifier = Modifier.fillMaxSize(), + contentAlignment = Alignment.Center, + ) { + Text( + "Text", + style = MaterialTheme.typography.bodySmall, + color = MaterialTheme.colorScheme.onSurface + ) + } + } + IconButton( + onClick = { /*TODO*/ }, + modifier = Modifier + .padding(end = 16.dp) + .align(Alignment.CenterVertically), + ) { + Icon(Icons.Rounded.StarBorder, null) + } + + Surface( + color = MaterialTheme.colorScheme.surface, + shape = MaterialTheme.shapes.extraSmall, + tonalElevation = 3.dp, + shadowElevation = 3.dp, + modifier = Modifier.wrapContentWidth() + ) { + Column( + modifier = Modifier + .padding(vertical = 8.dp) + .width(IntrinsicSize.Max), + ) { + DropdownMenuItem( + leadingIcon = { + Icon(Icons.Rounded.OpenInNew, null) + }, + text = { Text("Menu") }, + onClick = { }) + } + } } } item { @@ -1034,7 +1160,8 @@ fun ThemeSettingsScreen(themeId: UUID) { onClick = {}, ) OutlinedButton( - modifier = Modifier.padding(end = 16.dp) + modifier = Modifier + .padding(end = 16.dp) .align(Alignment.CenterVertically), onClick = { }) { Text("Button") @@ -1046,7 +1173,9 @@ fun ThemeSettingsScreen(themeId: UUID) { .align(Alignment.CenterVertically) ) {} VerticalDivider( - modifier = Modifier.height(64.dp).padding(end = 16.dp), + modifier = Modifier + .height(64.dp) + .padding(end = 16.dp), ) } } @@ -1160,7 +1289,7 @@ fun ThemeSettingsScreen(themeId: UUID) { onValueChange = {}, isError = true, readOnly = true, - label = {Text("Error")} + label = { Text("Error") } ) } } @@ -1245,18 +1374,20 @@ fun ThemeSettingsScreen(themeId: UUID) { ) }, ) { - Snackbar( - action = { - TextButton( - colors = ButtonDefaults.textButtonColors(contentColor = MaterialTheme.colorScheme.inversePrimary), - onClick = { }, - content = { Text("Action") } - ) - }, - content = { - Text("Snackbar") - } - ) + Box(modifier = Modifier.width(240.dp)) { + Snackbar( + action = { + TextButton( + colors = ButtonDefaults.textButtonColors(contentColor = MaterialTheme.colorScheme.inversePrimary), + onClick = { }, + content = { Text("Action") } + ) + }, + content = { + Text("Snackbar") + } + ) + } } } }