Julian/Gitnuro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improved settings dialog UI

Browse Source
This commit is contained in:
Abdelilah El Aissaoui 2022-02-21 16:03:36 +01:00
parent 84d986587d
commit 8d00141df2
3 changed files with 111 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/main/kotlin/app/DropDownOption.kt Normal file
View File

@ -0,0 +1,5 @@
package app
interface DropDownOption {
val optionName: String
}

8
src/main/kotlin/app/theme/Theme.kt
View File

@ -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(

131
src/main/kotlin/app/ui/dialogs/SettingsDialog.kt
View File

@ -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
@ -67,3 +46,93 @@ fun SettingsDialog(
}
}
}
@Composable
fun <T: DropDownOption> SettingDropDown(
title: String,
dropDownOptions: List<T>,
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 <T: DropDownOption> SettingTextInput(
title: String,
dropDownOptions: List<T>,
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)
}
}
}
}
}
}