From ebd28fa4d8cc817152e89d995674b25525bb8af5 Mon Sep 17 00:00:00 2001 From: SuperDragonXD <70206496+SuperDragonXD@users.noreply.github.com> Date: Wed, 15 Jan 2025 20:37:13 +0800 Subject: [PATCH] Tweak Lawnchair preferences style - Migrate preference groups from tint-based to surface-role based - Tweak top app bar colors - Tweak fonts - Use custom background for PreferenceDashboard - Use darker color for light theme surface and background colors --- .../app/lawnchair/theme/ComposeColorScheme.kt | 4 +- .../components/DraggablePreference.kt | 13 +- .../components/controls/PreferenceCategory.kt | 6 +- .../components/layout/PreferenceGroup.kt | 7 +- .../components/layout/PreferenceTemplate.kt | 4 +- .../preferences/components/layout/TopBar.kt | 8 + .../destinations/PreferencesDashboard.kt | 184 ++++++++++-------- lawnchair/src/app/lawnchair/ui/theme/Color.kt | 3 + 8 files changed, 136 insertions(+), 93 deletions(-) diff --git a/lawnchair/src/app/lawnchair/theme/ComposeColorScheme.kt b/lawnchair/src/app/lawnchair/theme/ComposeColorScheme.kt index f868d0088f..2ae60db971 100644 --- a/lawnchair/src/app/lawnchair/theme/ComposeColorScheme.kt +++ b/lawnchair/src/app/lawnchair/theme/ComposeColorScheme.kt @@ -140,9 +140,9 @@ fun dev.kdrag0n.monet.theme.ColorScheme.toComposeColorScheme(isDark: Boolean): C onTertiary = tertiary(100), tertiaryContainer = tertiary(90), onTertiaryContainer = tertiary(10), - background = neutralVariant98, + background = neutral(95), onBackground = neutralVariant(10), - surface = neutralVariant98, + surface = neutral(95), onSurface = neutralVariant(10), surfaceVariant = neutralVariant(90), onSurfaceVariant = neutralVariant(30), diff --git a/lawnchair/src/app/lawnchair/ui/preferences/components/DraggablePreference.kt b/lawnchair/src/app/lawnchair/ui/preferences/components/DraggablePreference.kt index 404b91a0be..965e7c85c4 100644 --- a/lawnchair/src/app/lawnchair/ui/preferences/components/DraggablePreference.kt +++ b/lawnchair/src/app/lawnchair/ui/preferences/components/DraggablePreference.kt @@ -2,7 +2,7 @@ package app.lawnchair.ui.preferences.components import android.view.HapticFeedbackConstants import androidx.compose.animation.AnimatedVisibility -import androidx.compose.animation.core.animateDpAsState +import androidx.compose.animation.animateColorAsState import androidx.compose.foundation.clickable import androidx.compose.foundation.interaction.MutableInteractionSource import androidx.compose.foundation.layout.Column @@ -41,6 +41,7 @@ import app.lawnchair.ui.preferences.components.layout.ExpandAndShrink import app.lawnchair.ui.preferences.components.layout.PreferenceGroup import app.lawnchair.ui.preferences.components.layout.PreferenceGroupHeading import app.lawnchair.ui.preferences.components.layout.PreferenceTemplate +import app.lawnchair.ui.theme.preferenceGroupColor import app.lawnchair.ui.util.addIf import com.android.launcher3.R import com.android.launcher3.Utilities @@ -64,8 +65,8 @@ fun DraggablePreferenceGroup( var localItems = items var isAnyDragging by remember { mutableStateOf(false) } - val elevation by animateDpAsState( - targetValue = if (!isAnyDragging) 1.dp else 0.dp, + val color by animateColorAsState( + targetValue = if (!isAnyDragging) preferenceGroupColor() else MaterialTheme.colorScheme.background, label = "card background animation", ) @@ -78,7 +79,7 @@ fun DraggablePreferenceGroup( Surface( modifier = Modifier.padding(horizontal = 16.dp), shape = MaterialTheme.shapes.large, - tonalElevation = elevation, + color = color, ) { ReorderableColumn( modifier = Modifier, @@ -119,7 +120,9 @@ fun DraggablePreferenceGroup( } } AnimatedVisibility(!isAnyDragging && index != localItems.lastIndex) { - HorizontalDivider() + HorizontalDivider( + Modifier.padding(start = 50.dp, end = 16.dp), + ) } } } diff --git a/lawnchair/src/app/lawnchair/ui/preferences/components/controls/PreferenceCategory.kt b/lawnchair/src/app/lawnchair/ui/preferences/components/controls/PreferenceCategory.kt index 7775e82027..8f76af6b2f 100644 --- a/lawnchair/src/app/lawnchair/ui/preferences/components/controls/PreferenceCategory.kt +++ b/lawnchair/src/app/lawnchair/ui/preferences/components/controls/PreferenceCategory.kt @@ -20,7 +20,6 @@ import androidx.annotation.DrawableRes import androidx.compose.foundation.background import androidx.compose.foundation.clickable import androidx.compose.foundation.layout.Box -import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size import androidx.compose.material3.Icon import androidx.compose.material3.MaterialTheme @@ -29,7 +28,6 @@ import androidx.compose.material3.surfaceColorAtElevation import androidx.compose.runtime.Composable 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.painterResource import androidx.compose.ui.unit.dp @@ -49,8 +47,6 @@ fun PreferenceCategory( ) { PreferenceTemplate( modifier = modifier - .padding(horizontal = 16.dp) - .clip(MaterialTheme.shapes.large) .clickable { onNavigate() } .background( if (isSelected) MaterialTheme.colorScheme.surfaceColorAtElevation(4.dp) else Color.Transparent, @@ -76,7 +72,7 @@ fun PreferenceCategory( painter = painterResource(id = iconResource), contentDescription = null, modifier = Modifier.size(24.dp), - tint = MaterialTheme.colorScheme.primary, + tint = MaterialTheme.colorScheme.onSurfaceVariant, ) } }, diff --git a/lawnchair/src/app/lawnchair/ui/preferences/components/layout/PreferenceGroup.kt b/lawnchair/src/app/lawnchair/ui/preferences/components/layout/PreferenceGroup.kt index 548aafcf4a..ed079c94d3 100644 --- a/lawnchair/src/app/lawnchair/ui/preferences/components/layout/PreferenceGroup.kt +++ b/lawnchair/src/app/lawnchair/ui/preferences/components/layout/PreferenceGroup.kt @@ -29,10 +29,13 @@ import androidx.compose.material3.Surface import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Color import androidx.compose.ui.semantics.heading import androidx.compose.ui.semantics.semantics import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.dp +import app.lawnchair.ui.theme.dividerColor +import app.lawnchair.ui.theme.preferenceGroupColor @Composable fun PreferenceGroup( @@ -44,6 +47,7 @@ fun PreferenceGroup( dividerStartIndent: Dp = 0.dp, dividerEndIndent: Dp = 0.dp, dividersToSkip: Int = 0, + dividerColor: Color = dividerColor(), content: @Composable () -> Unit, ) { Column( @@ -53,7 +57,7 @@ fun PreferenceGroup( Surface( modifier = Modifier.padding(horizontal = 16.dp), shape = MaterialTheme.shapes.large, - tonalElevation = 1.dp, + color = preferenceGroupColor(), ) { if (showDividers) { DividerColumn( @@ -61,6 +65,7 @@ fun PreferenceGroup( endIndent = dividerEndIndent, content = content, dividersToSkip = dividersToSkip, + color = dividerColor, ) } else { Column { diff --git a/lawnchair/src/app/lawnchair/ui/preferences/components/layout/PreferenceTemplate.kt b/lawnchair/src/app/lawnchair/ui/preferences/components/layout/PreferenceTemplate.kt index 96f0e2fb86..51e0c77d3f 100644 --- a/lawnchair/src/app/lawnchair/ui/preferences/components/layout/PreferenceTemplate.kt +++ b/lawnchair/src/app/lawnchair/ui/preferences/components/layout/PreferenceTemplate.kt @@ -82,8 +82,8 @@ fun PreferenceTemplate( ) { Column(Modifier.weight(1f)) { CompositionLocalProvider( - LocalContentColor provides MaterialTheme.colorScheme.onBackground, - LocalTextStyle provides MaterialTheme.typography.bodyLarge, + LocalContentColor provides MaterialTheme.colorScheme.onSurface, + LocalTextStyle provides MaterialTheme.typography.titleMedium, ) { title() } diff --git a/lawnchair/src/app/lawnchair/ui/preferences/components/layout/TopBar.kt b/lawnchair/src/app/lawnchair/ui/preferences/components/layout/TopBar.kt index 4ecd551575..fcfa49bede 100644 --- a/lawnchair/src/app/lawnchair/ui/preferences/components/layout/TopBar.kt +++ b/lawnchair/src/app/lawnchair/ui/preferences/components/layout/TopBar.kt @@ -22,8 +22,10 @@ import androidx.compose.material.icons.Icons import androidx.compose.material.icons.automirrored.rounded.ArrowBack import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.LargeTopAppBar +import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Text import androidx.compose.material3.TopAppBar +import androidx.compose.material3.TopAppBarDefaults import androidx.compose.material3.TopAppBarScrollBehavior import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier @@ -61,6 +63,9 @@ fun TopBar( } }, scrollBehavior = scrollBehavior, + colors = TopAppBarDefaults.topAppBarColors().copy( + scrolledContainerColor = MaterialTheme.colorScheme.surfaceContainerHigh, + ), ) } else { LargeTopAppBar( @@ -80,6 +85,9 @@ fun TopBar( } }, scrollBehavior = scrollBehavior, + colors = TopAppBarDefaults.topAppBarColors().copy( + scrolledContainerColor = MaterialTheme.colorScheme.surfaceContainerHigh, + ), ) } } diff --git a/lawnchair/src/app/lawnchair/ui/preferences/destinations/PreferencesDashboard.kt b/lawnchair/src/app/lawnchair/ui/preferences/destinations/PreferencesDashboard.kt index 2dc27b51f6..e323c3172c 100644 --- a/lawnchair/src/app/lawnchair/ui/preferences/destinations/PreferencesDashboard.kt +++ b/lawnchair/src/app/lawnchair/ui/preferences/destinations/PreferencesDashboard.kt @@ -41,11 +41,14 @@ import app.lawnchair.ui.preferences.components.AnnouncementPreference import app.lawnchair.ui.preferences.components.controls.PreferenceCategory import app.lawnchair.ui.preferences.components.controls.WarningPreference import app.lawnchair.ui.preferences.components.layout.ClickableIcon +import app.lawnchair.ui.preferences.components.layout.DividerColumn import app.lawnchair.ui.preferences.components.layout.PreferenceDivider import app.lawnchair.ui.preferences.components.layout.PreferenceLayout import app.lawnchair.ui.preferences.components.layout.PreferenceTemplate import app.lawnchair.ui.preferences.data.liveinfo.SyncLiveInformation import app.lawnchair.ui.preferences.navigation.Routes +import app.lawnchair.ui.theme.isSelectedThemeDark +import app.lawnchair.ui.theme.preferenceGroupColor import app.lawnchair.ui.util.addIf import app.lawnchair.util.isDefaultLauncher import app.lawnchair.util.restartLauncher @@ -72,94 +75,119 @@ fun PreferencesDashboard( if (BuildConfig.APPLICATION_ID.contains("nightly") || BuildConfig.DEBUG) { PreferencesDebugWarning() - Spacer(modifier = Modifier.height(16.dp)) + Spacer(modifier = Modifier.height(8.dp)) } if (!context.isDefaultLauncher()) { PreferencesSetDefaultLauncherWarning() - Spacer(modifier = Modifier.height(16.dp)) + Spacer(modifier = Modifier.height(8.dp)) } - PreferenceCategory( - label = stringResource(R.string.general_label), - description = stringResource(R.string.general_description), - iconResource = R.drawable.ic_general, - onNavigate = { onNavigate(Routes.GENERAL) }, - isSelected = currentRoute.contains(Routes.GENERAL), - ) - - PreferenceCategory( - label = stringResource(R.string.home_screen_label), - description = stringResource(R.string.home_screen_description), - iconResource = R.drawable.ic_home_screen, - onNavigate = { onNavigate(Routes.HOME_SCREEN) }, - isSelected = currentRoute.contains(Routes.HOME_SCREEN), - ) - - PreferenceCategory( - label = stringResource(id = R.string.smartspace_widget), - description = stringResource(R.string.smartspace_widget_description), - iconResource = R.drawable.ic_smartspace, - onNavigate = { onNavigate(Routes.SMARTSPACE) }, - isSelected = currentRoute.contains(Routes.SMARTSPACE), - ) - - PreferenceCategory( - label = stringResource(R.string.dock_label), - description = stringResource(R.string.dock_description), - iconResource = R.drawable.ic_dock, - onNavigate = { onNavigate(Routes.DOCK) }, - isSelected = currentRoute.contains(Routes.DOCK), - ) - - PreferenceCategory( - label = stringResource(R.string.app_drawer_label), - description = stringResource(R.string.app_drawer_description), - iconResource = R.drawable.ic_app_drawer, - onNavigate = { onNavigate(Routes.APP_DRAWER) }, - isSelected = currentRoute.contains(Routes.APP_DRAWER), - ) - - PreferenceCategory( - label = stringResource(R.string.search_bar_label), - description = stringResource(R.string.drawer_search_description), - iconResource = R.drawable.ic_search, - onNavigate = { onNavigate("${Routes.SEARCH}/0") }, - isSelected = currentRoute.contains(Routes.SEARCH), - ) - - PreferenceCategory( - label = stringResource(R.string.folders_label), - description = stringResource(R.string.folders_description), - iconResource = R.drawable.ic_folder, - onNavigate = { onNavigate(Routes.FOLDERS) }, - isSelected = currentRoute.contains(Routes.FOLDERS), - ) - - PreferenceCategory( - label = stringResource(id = R.string.gestures_label), - description = stringResource(R.string.gestures_description), - iconResource = R.drawable.ic_gestures, - onNavigate = { onNavigate(Routes.GESTURES) }, - isSelected = currentRoute.contains(Routes.GESTURES), - ) - - if (LawnchairApp.isRecentsEnabled || BuildConfig.DEBUG) { + PreferenceCategoryGroup { PreferenceCategory( - label = stringResource(id = R.string.quickstep_label), - description = stringResource(id = R.string.quickstep_description), - iconResource = R.drawable.ic_quickstep, - onNavigate = { onNavigate(Routes.QUICKSTEP) }, - isSelected = currentRoute.contains(Routes.QUICKSTEP), + label = stringResource(R.string.general_label), + description = stringResource(R.string.general_description), + iconResource = R.drawable.ic_general, + onNavigate = { onNavigate(Routes.GENERAL) }, + isSelected = currentRoute.contains(Routes.GENERAL), + ) + + PreferenceCategory( + label = stringResource(R.string.home_screen_label), + description = stringResource(R.string.home_screen_description), + iconResource = R.drawable.ic_home_screen, + onNavigate = { onNavigate(Routes.HOME_SCREEN) }, + isSelected = currentRoute.contains(Routes.HOME_SCREEN), + ) + + PreferenceCategory( + label = stringResource(id = R.string.smartspace_widget), + description = stringResource(R.string.smartspace_widget_description), + iconResource = R.drawable.ic_smartspace, + onNavigate = { onNavigate(Routes.SMARTSPACE) }, + isSelected = currentRoute.contains(Routes.SMARTSPACE), + ) + + PreferenceCategory( + label = stringResource(R.string.dock_label), + description = stringResource(R.string.dock_description), + iconResource = R.drawable.ic_dock, + onNavigate = { onNavigate(Routes.DOCK) }, + isSelected = currentRoute.contains(Routes.DOCK), + ) + + PreferenceCategory( + label = stringResource(R.string.app_drawer_label), + description = stringResource(R.string.app_drawer_description), + iconResource = R.drawable.ic_app_drawer, + onNavigate = { onNavigate(Routes.APP_DRAWER) }, + isSelected = currentRoute.contains(Routes.APP_DRAWER), + ) + + PreferenceCategory( + label = stringResource(R.string.search_bar_label), + description = stringResource(R.string.drawer_search_description), + iconResource = R.drawable.ic_search, + onNavigate = { onNavigate("${Routes.SEARCH}/0") }, + isSelected = currentRoute.contains(Routes.SEARCH), + ) + + PreferenceCategory( + label = stringResource(R.string.folders_label), + description = stringResource(R.string.folders_description), + iconResource = R.drawable.ic_folder, + onNavigate = { onNavigate(Routes.FOLDERS) }, + isSelected = currentRoute.contains(Routes.FOLDERS), + ) + + PreferenceCategory( + label = stringResource(id = R.string.gestures_label), + description = stringResource(R.string.gestures_description), + iconResource = R.drawable.ic_gestures, + onNavigate = { onNavigate(Routes.GESTURES) }, + isSelected = currentRoute.contains(Routes.GESTURES), + ) + + if (LawnchairApp.isRecentsEnabled || BuildConfig.DEBUG) { + PreferenceCategory( + label = stringResource(id = R.string.quickstep_label), + description = stringResource(id = R.string.quickstep_description), + iconResource = R.drawable.ic_quickstep, + onNavigate = { onNavigate(Routes.QUICKSTEP) }, + isSelected = currentRoute.contains(Routes.QUICKSTEP), + ) + } + + PreferenceCategory( + label = stringResource(R.string.about_label), + description = "${context.getString(R.string.derived_app_name)} ${BuildConfig.MAJOR_VERSION}", + iconResource = R.drawable.ic_about, + onNavigate = { onNavigate(Routes.ABOUT) }, + isSelected = currentRoute.contains(Routes.ABOUT), ) } + } +} - PreferenceCategory( - label = stringResource(R.string.about_label), - description = "${context.getString(R.string.derived_app_name)} ${BuildConfig.MAJOR_VERSION}", - iconResource = R.drawable.ic_about, - onNavigate = { onNavigate(Routes.ABOUT) }, - isSelected = currentRoute.contains(Routes.ABOUT), +@Composable +fun PreferenceCategoryGroup( + modifier: Modifier = Modifier, + content: @Composable () -> Unit, +) { + val color = preferenceGroupColor() + + Surface( + modifier = modifier.padding(horizontal = 16.dp), + shape = MaterialTheme.shapes.large, + color = color, + tonalElevation = if (isSelectedThemeDark) 1.dp else 0.dp, + ) { + DividerColumn( + content = content, + startIndent = (-16).dp, + endIndent = (-16).dp, + color = MaterialTheme.colorScheme.surface, + thickness = 2.dp, ) } } diff --git a/lawnchair/src/app/lawnchair/ui/theme/Color.kt b/lawnchair/src/app/lawnchair/ui/theme/Color.kt index ca4e829b78..c8b5b0bdb3 100644 --- a/lawnchair/src/app/lawnchair/ui/theme/Color.kt +++ b/lawnchair/src/app/lawnchair/ui/theme/Color.kt @@ -59,5 +59,8 @@ fun Context.getSystemAccent(darkTheme: Boolean): Int { } } +@Composable +fun preferenceGroupColor() = (if (isSelectedThemeDark) MaterialTheme.colorScheme.surfaceContainer else MaterialTheme.colorScheme.surfaceBright) + @Composable fun dividerColor() = MaterialTheme.colorScheme.outlineVariant