From 8d00141df2d865200c3cc36c8299a338658bee58 Mon Sep 17 00:00:00 2001 From: Abdelilah El Aissaoui Date: Mon, 21 Feb 2022 16:03:36 +0100 Subject: [PATCH] Improved settings dialog UI --- src/main/kotlin/app/DropDownOption.kt | 5 + src/main/kotlin/app/theme/Theme.kt | 8 +- .../kotlin/app/ui/dialogs/SettingsDialog.kt | 131 +++++++++++++----- 3 files changed, 111 insertions(+), 33 deletions(-) create mode 100644 src/main/kotlin/app/DropDownOption.kt diff --git a/src/main/kotlin/app/DropDownOption.kt b/src/main/kotlin/app/DropDownOption.kt new file mode 100644 index 0000000..3b6767b --- /dev/null +++ b/src/main/kotlin/app/DropDownOption.kt @@ -0,0 +1,5 @@ +package app + +interface DropDownOption { + val optionName: String +} \ No newline at end of file diff --git a/src/main/kotlin/app/theme/Theme.kt b/src/main/kotlin/app/theme/Theme.kt index 61ae098..d72c794 100644 --- a/src/main/kotlin/app/theme/Theme.kt +++ b/src/main/kotlin/app/theme/Theme.kt @@ -6,6 +6,7 @@ import androidx.compose.material.darkColors import androidx.compose.material.lightColors import androidx.compose.runtime.Composable import androidx.compose.ui.graphics.Color +import app.DropDownOption private val DarkColorPalette = darkColors( primary = primaryLight, @@ -125,9 +126,12 @@ val Colors.scrollbarHover: Color get() = if (isLight) hoverScrollbarColorLight else hoverScrollbarColorDark -enum class Themes(val displayName: String) { +enum class Themes(val displayName: String) : DropDownOption { LIGHT("Light"), - DARK("Dark") + DARK("Dark"); + + override val optionName: String + get() = displayName } val themesList = listOf( diff --git a/src/main/kotlin/app/ui/dialogs/SettingsDialog.kt b/src/main/kotlin/app/ui/dialogs/SettingsDialog.kt index 0d64b68..63fcdfc 100644 --- a/src/main/kotlin/app/ui/dialogs/SettingsDialog.kt +++ b/src/main/kotlin/app/ui/dialogs/SettingsDialog.kt @@ -7,6 +7,8 @@ import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.unit.dp import app.AppPreferences +import app.DropDownOption +import app.theme.Themes import app.theme.primaryTextColor import app.theme.themesList @@ -15,46 +17,23 @@ fun SettingsDialog( appPreferences: AppPreferences, onDismiss: () -> Unit, ) { - var showThemeDropdown by remember { mutableStateOf(false) } val currentTheme by appPreferences.themeState.collectAsState() MaterialDialog { - Column { + Column(modifier = Modifier.width(500.dp)) { Text( text = "Settings", color = MaterialTheme.colors.primaryTextColor, ) - Row( - modifier = Modifier.padding(top = 8.dp), - verticalAlignment = Alignment.CenterVertically - ) { - Text( - text = "Theme", - color = MaterialTheme.colors.primaryTextColor, - ) - Spacer(modifier = Modifier.width(300.dp)) - OutlinedButton(onClick = { showThemeDropdown = true }) { - Text( - currentTheme.displayName, - color = MaterialTheme.colors.primaryTextColor, - ) - - DropdownMenu( - expanded = showThemeDropdown, - onDismissRequest = { showThemeDropdown = false }, - ) { - for (theme in themesList) { - DropdownMenuItem( - onClick = { - appPreferences.theme = theme - showThemeDropdown = false - } - ) { Text(theme.displayName) } - } - } + SettingDropDown( + title = "Theme", + dropDownOptions = themesList, + currentOption = currentTheme, + onOptionSelected = { theme -> + appPreferences.theme = theme } - } + ) TextButton( modifier = Modifier @@ -66,4 +45,94 @@ fun SettingsDialog( } } } +} + +@Composable +fun SettingDropDown( + title: String, + dropDownOptions: List, + onOptionSelected: (T) -> Unit, + currentOption: T, +) { + var showThemeDropdown by remember { mutableStateOf(false) } + Row( + modifier = Modifier.padding(vertical = 8.dp, horizontal = 8.dp), + verticalAlignment = Alignment.CenterVertically + ) { + Text( + text = title, + color = MaterialTheme.colors.primaryTextColor, + ) + Spacer(modifier = Modifier.weight(1f)) + Box { + OutlinedButton(onClick = { showThemeDropdown = true }) { + Text( + currentOption.optionName, + color = MaterialTheme.colors.primaryTextColor, + ) + } + + DropdownMenu( + expanded = showThemeDropdown, + onDismissRequest = { showThemeDropdown = false }, + ) { + for (dropDownOption in dropDownOptions) { + DropdownMenuItem( + onClick = { + showThemeDropdown = false + onOptionSelected(dropDownOption) + } + ) { + Text(dropDownOption.optionName) + } + } + } + + } + } +} + +@Composable +fun SettingTextInput( + title: String, + dropDownOptions: List, + onOptionSelected: (T) -> Unit, + currentOption: T, +) { + var showThemeDropdown by remember { mutableStateOf(false) } + Row( + modifier = Modifier.padding(vertical = 8.dp, horizontal = 8.dp), + verticalAlignment = Alignment.CenterVertically + ) { + Text( + text = title, + color = MaterialTheme.colors.primaryTextColor, + ) + Spacer(modifier = Modifier.width(300.dp)) + Box { + OutlinedButton(onClick = { showThemeDropdown = true }) { + Text( + currentOption.optionName, + color = MaterialTheme.colors.primaryTextColor, + ) + } + + DropdownMenu( + expanded = showThemeDropdown, + onDismissRequest = { showThemeDropdown = false }, + ) { + for (dropDownOption in dropDownOptions) { + DropdownMenuItem( + onClick = { + showThemeDropdown = false + onOptionSelected(dropDownOption) + } + ) { + Text(dropDownOption.optionName) + } + } + } + + } + } } \ No newline at end of file