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
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.interaction.MutableInteractionSource
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.padding
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.material3.DropdownMenuItem
import androidx.compose.material3.ExposedDropdownMenuBox
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Switch
@ -42,8 +48,11 @@ import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
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.unit.dp
import com.sadellie.unitto.R
/**
* 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 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 onSelectedChange Action to perform when drop-down menu item is selected.
*/
@ -145,12 +155,16 @@ fun SettingsListItem(
fun <T> SettingsListItem(
label: String,
supportText: String? = null,
allOptions: Collection<T>,
allOptions: Map<T, String>,
selected: T,
onSelectedChange: (T) -> Unit
) = BasicSettingsListItem(label, supportText, {}) {
var dropDownExpanded by rememberSaveable { mutableStateOf(false) }
var currentOption by rememberSaveable { mutableStateOf(selected) }
val dropDownRotation: Float by animateFloatAsState(
targetValue = if (dropDownExpanded) 180f else 0f,
animationSpec = tween(easing = FastOutSlowInEasing)
)
ExposedDropdownMenuBox(
modifier = Modifier,
@ -159,7 +173,7 @@ fun <T> SettingsListItem(
) {
OutlinedTextField(
modifier = Modifier.widthIn(1.dp),
value = currentOption.toString(),
value = allOptions[currentOption] ?: selected.toString(),
onValueChange = {},
readOnly = true,
singleLine = true,
@ -167,7 +181,15 @@ fun <T> SettingsListItem(
colors = TextFieldDefaults.outlinedTextFieldColors(
disabledBorderColor = MaterialTheme.colorScheme.outline,
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(
modifier = Modifier.exposedDropdownSize(),
@ -176,10 +198,10 @@ fun <T> SettingsListItem(
) {
allOptions.forEach {
DropdownMenuItem(
text = { Text(it.toString()) },
text = { Text(it.value) },
onClick = {
currentOption = it
onSelectedChange(it)
currentOption = it.key
onSelectedChange(it.key)
dropDownExpanded = false
}
)

View File

@ -39,14 +39,18 @@ fun ThemesScreen(
viewModel: ThemesViewModel
) {
UnittoLargeTopAppBar(
title = stringResource(id = R.string.theme_setting),
title = stringResource(R.string.theme_setting),
navigateUpAction = navigateUpAction
) { paddingValues ->
LazyColumn(contentPadding = paddingValues) {
item {
SettingsListItem(
label = stringResource(R.string.theme_setting),
allOptions = ThemingMode.values().toList(),
label = stringResource(R.string.color_theme),
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,
onSelectedChange = {
themmoController.setThemingMode(it)

View File

@ -737,7 +737,9 @@
<string name="favorite_button_description">Add or remove unit from favorites</string>
<string name="empty_search_result_description">Empty search result</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="color_theme">Colour theme</string>
<string name="drop_down_description">Open or close drop down menu</string>
</resources>

View File

@ -672,7 +672,9 @@
<string name="send_usage_statistics_support">Все данные анонимны и зашифрованы</string>
<string name="app_version_name_setting">Название версии</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="color_theme">Цветовая тема</string>
<string name="drop_down_description">Открыть или закрыть меню</string>
</resources>

View File

@ -990,10 +990,11 @@
<string name="force_auto_mode">Auto</string>
<string name="force_light_mode">Light</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_support">Use black background for dark themes</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.-->
<string name="loading_label">Loading…</string>
@ -1014,6 +1015,7 @@
<string name="clear_input_description">Clear input</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="drop_down_description">Open or close drop down menu</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="app_version_name_setting">Version name</string>