Updated drop down settings option. Now it kinda follows the guideline.

This commit is contained in:
Sad Ellie 2022-07-21 21:27:34 +03:00
parent b6b693b11b
commit b75d1228a1
5 changed files with 45 additions and 13 deletions

View File

@ -18,6 +18,9 @@
package com.sadellie.unitto.screens.setttings.components package com.sadellie.unitto.screens.setttings.components
import androidx.compose.animation.core.FastOutSlowInEasing
import androidx.compose.animation.core.animateFloatAsState
import androidx.compose.animation.core.tween
import androidx.compose.foundation.clickable import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Column
@ -26,9 +29,12 @@ import androidx.compose.foundation.layout.RowScope
import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.widthIn import androidx.compose.foundation.layout.widthIn
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.outlined.ArrowDropDown
import androidx.compose.material.ripple.rememberRipple import androidx.compose.material.ripple.rememberRipple
import androidx.compose.material3.DropdownMenuItem import androidx.compose.material3.DropdownMenuItem
import androidx.compose.material3.ExposedDropdownMenuBox import androidx.compose.material3.ExposedDropdownMenuBox
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.OutlinedTextField import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Switch import androidx.compose.material3.Switch
@ -42,8 +48,11 @@ import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.setValue import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.rotate
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.style.TextOverflow import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.dp
import com.sadellie.unitto.R
/** /**
* Basic list item for settings screen. By default only has label and support text, clickable. * Basic list item for settings screen. By default only has label and support text, clickable.
@ -137,7 +146,8 @@ fun SettingsListItem(
* *
* @param label Main text. * @param label Main text.
* @param supportText Text that is located below label. * @param supportText Text that is located below label.
* @param allOptions Options in drop-down menu. * @param allOptions Options in drop-down menu. Key is option itself and value is the string that
* will be shown.
* @param selected Selected option. * @param selected Selected option.
* @param onSelectedChange Action to perform when drop-down menu item is selected. * @param onSelectedChange Action to perform when drop-down menu item is selected.
*/ */
@ -145,12 +155,16 @@ fun SettingsListItem(
fun <T> SettingsListItem( fun <T> SettingsListItem(
label: String, label: String,
supportText: String? = null, supportText: String? = null,
allOptions: Collection<T>, allOptions: Map<T, String>,
selected: T, selected: T,
onSelectedChange: (T) -> Unit onSelectedChange: (T) -> Unit
) = BasicSettingsListItem(label, supportText, {}) { ) = BasicSettingsListItem(label, supportText, {}) {
var dropDownExpanded by rememberSaveable { mutableStateOf(false) } var dropDownExpanded by rememberSaveable { mutableStateOf(false) }
var currentOption by rememberSaveable { mutableStateOf(selected) } var currentOption by rememberSaveable { mutableStateOf(selected) }
val dropDownRotation: Float by animateFloatAsState(
targetValue = if (dropDownExpanded) 180f else 0f,
animationSpec = tween(easing = FastOutSlowInEasing)
)
ExposedDropdownMenuBox( ExposedDropdownMenuBox(
modifier = Modifier, modifier = Modifier,
@ -159,7 +173,7 @@ fun <T> SettingsListItem(
) { ) {
OutlinedTextField( OutlinedTextField(
modifier = Modifier.widthIn(1.dp), modifier = Modifier.widthIn(1.dp),
value = currentOption.toString(), value = allOptions[currentOption] ?: selected.toString(),
onValueChange = {}, onValueChange = {},
readOnly = true, readOnly = true,
singleLine = true, singleLine = true,
@ -167,7 +181,15 @@ fun <T> SettingsListItem(
colors = TextFieldDefaults.outlinedTextFieldColors( colors = TextFieldDefaults.outlinedTextFieldColors(
disabledBorderColor = MaterialTheme.colorScheme.outline, disabledBorderColor = MaterialTheme.colorScheme.outline,
disabledTextColor = MaterialTheme.colorScheme.onSurface, disabledTextColor = MaterialTheme.colorScheme.onSurface,
) disabledTrailingIconColor = MaterialTheme.colorScheme.onSurfaceVariant
),
trailingIcon = {
Icon(
imageVector = Icons.Outlined.ArrowDropDown,
modifier = Modifier.rotate(dropDownRotation),
contentDescription = stringResource(R.string.drop_down_description)
)
}
) )
ExposedDropdownMenu( ExposedDropdownMenu(
modifier = Modifier.exposedDropdownSize(), modifier = Modifier.exposedDropdownSize(),
@ -176,10 +198,10 @@ fun <T> SettingsListItem(
) { ) {
allOptions.forEach { allOptions.forEach {
DropdownMenuItem( DropdownMenuItem(
text = { Text(it.toString()) }, text = { Text(it.value) },
onClick = { onClick = {
currentOption = it currentOption = it.key
onSelectedChange(it) onSelectedChange(it.key)
dropDownExpanded = false dropDownExpanded = false
} }
) )

View File

@ -39,14 +39,18 @@ fun ThemesScreen(
viewModel: ThemesViewModel viewModel: ThemesViewModel
) { ) {
UnittoLargeTopAppBar( UnittoLargeTopAppBar(
title = stringResource(id = R.string.theme_setting), title = stringResource(R.string.theme_setting),
navigateUpAction = navigateUpAction navigateUpAction = navigateUpAction
) { paddingValues -> ) { paddingValues ->
LazyColumn(contentPadding = paddingValues) { LazyColumn(contentPadding = paddingValues) {
item { item {
SettingsListItem( SettingsListItem(
label = stringResource(R.string.theme_setting), label = stringResource(R.string.color_theme),
allOptions = ThemingMode.values().toList(), allOptions = mapOf(
ThemingMode.AUTO to stringResource(R.string.force_auto_mode),
ThemingMode.FORCE_LIGHT to stringResource(R.string.force_light_mode),
ThemingMode.FORCE_DARK to stringResource(R.string.force_dark_mode)
),
selected = themmoController.currentThemingMode, selected = themmoController.currentThemingMode,
onSelectedChange = { onSelectedChange = {
themmoController.setThemingMode(it) themmoController.setThemingMode(it)

View File

@ -737,7 +737,9 @@
<string name="favorite_button_description">Add or remove unit from favorites</string> <string name="favorite_button_description">Add or remove unit from favorites</string>
<string name="empty_search_result_description">Empty search result</string> <string name="empty_search_result_description">Empty search result</string>
<string name="enable_dynamic_colors">Dynamic colors</string> <string name="enable_dynamic_colors">Dynamic colors</string>
<string name="enable_dynamic_colors_support">Generate theme from your current wallpaper</string> <string name="enable_dynamic_colors_support">Use colours from your wallpaper</string>
<string name="force_amoled_mode_support">Use black background for dark themes</string> <string name="force_amoled_mode_support">Use black background for dark themes</string>
<string name="color_theme">Colour theme</string>
<string name="drop_down_description">Open or close drop down menu</string>
</resources> </resources>

View File

@ -672,7 +672,9 @@
<string name="send_usage_statistics_support">Все данные анонимны и зашифрованы</string> <string name="send_usage_statistics_support">Все данные анонимны и зашифрованы</string>
<string name="app_version_name_setting">Название версии</string> <string name="app_version_name_setting">Название версии</string>
<string name="enable_dynamic_colors">Динамичные цвета</string> <string name="enable_dynamic_colors">Динамичные цвета</string>
<string name="enable_dynamic_colors_support">Использовать цвета обоев рабочего стола</string> <string name="enable_dynamic_colors_support">Использовать цвета обоев</string>
<string name="force_amoled_mode_support">Использовать черный фон в темных темах</string> <string name="force_amoled_mode_support">Использовать черный фон в темных темах</string>
<string name="color_theme">Цветовая тема</string>
<string name="drop_down_description">Открыть или закрыть меню</string>
</resources> </resources>

View File

@ -990,10 +990,11 @@
<string name="force_auto_mode">Auto</string> <string name="force_auto_mode">Auto</string>
<string name="force_light_mode">Light</string> <string name="force_light_mode">Light</string>
<string name="force_dark_mode">Dark</string> <string name="force_dark_mode">Dark</string>
<string name="color_theme">Color theme</string>
<string name="force_amoled_mode">AMOLED Dark</string> <string name="force_amoled_mode">AMOLED Dark</string>
<string name="force_amoled_mode_support">Use black background for dark themes</string> <string name="force_amoled_mode_support">Use black background for dark themes</string>
<string name="enable_dynamic_colors">Dynamic colors</string> <string name="enable_dynamic_colors">Dynamic colors</string>
<string name="enable_dynamic_colors_support">Generate theme from your current wallpaper</string> <string name="enable_dynamic_colors_support">Use colors from your wallpaper</string>
<!--MISC.--> <!--MISC.-->
<string name="loading_label">Loading…</string> <string name="loading_label">Loading…</string>
@ -1014,6 +1015,7 @@
<string name="clear_input_description">Clear input</string> <string name="clear_input_description">Clear input</string>
<string name="favorite_button_description">Add or remove unit from favorites</string> <string name="favorite_button_description">Add or remove unit from favorites</string>
<string name="empty_search_result_description">Empty search result</string> <string name="empty_search_result_description">Empty search result</string>
<string name="drop_down_description">Open or close drop down menu</string>
<string name="send_usage_statistics">Send usage statistics</string> <string name="send_usage_statistics">Send usage statistics</string>
<string name="send_usage_statistics_support">All data is anonymous and encrypted</string> <string name="send_usage_statistics_support">All data is anonymous and encrypted</string>
<string name="app_version_name_setting">Version name</string> <string name="app_version_name_setting">Version name</string>