From 3ba2d1d5f65753b4b3235ed66ea10a37da0a1a7c Mon Sep 17 00:00:00 2001 From: Sad Ellie Date: Sat, 13 Aug 2022 14:53:49 +0300 Subject: [PATCH] Improved unit groups screen Better visuals, less bugs, more animations --- .../screens/setttings/SettingsScreen.kt | 30 +++++---- .../screens/setttings/UnitGroupsScreen.kt | 59 ++++++++++++++++-- .../setttings/components/SettingsListItem.kt | 62 ++++++++++++++----- app/src/main/res/values-en-rGB/strings.xml | 3 + app/src/main/res/values-ru/strings.xml | 3 + app/src/main/res/values/strings.xml | 4 ++ 6 files changed, 127 insertions(+), 34 deletions(-) diff --git a/app/src/main/java/com/sadellie/unitto/screens/setttings/SettingsScreen.kt b/app/src/main/java/com/sadellie/unitto/screens/setttings/SettingsScreen.kt index d853c9a2..f31a8cc3 100644 --- a/app/src/main/java/com/sadellie/unitto/screens/setttings/SettingsScreen.kt +++ b/app/src/main/java/com/sadellie/unitto/screens/setttings/SettingsScreen.kt @@ -63,8 +63,9 @@ fun SettingsScreen( // THEME item { SettingsListItem( - label = stringResource(id = R.string.unit_groups_setting) - ) { navControllerAction(UNIT_GROUPS_SCREEN) } + label = stringResource(id = R.string.unit_groups_setting), + onClick = { navControllerAction(UNIT_GROUPS_SCREEN) } + ) } // PRECISION @@ -102,8 +103,9 @@ fun SettingsScreen( // CURRENCY RATE NOTE item { SettingsListItem( - label = stringResource(R.string.currency_rates_note_setting) - ) { dialogState = DialogState.CURRENCY_RATE } + label = stringResource(R.string.currency_rates_note_setting), + onClick = { dialogState = DialogState.CURRENCY_RATE } + ) } // ADDITIONAL GROUP @@ -112,15 +114,17 @@ fun SettingsScreen( // TERMS AND CONDITIONS item { SettingsListItem( - label = stringResource(R.string.terms_and_conditions) - ) { openLink(mContext, "http://sadellie.github.io/unitto/terms-app.html") } + label = stringResource(R.string.terms_and_conditions), + onClick = { openLink(mContext, "http://sadellie.github.io/unitto/terms-app.html") } + ) } // PRIVACY POLICY item { SettingsListItem( - label = stringResource(R.string.privacy_policy) - ) { openLink(mContext, "http://sadellie.github.io/unitto/privacy-app.html") } + label = stringResource(R.string.privacy_policy), + onClick = { openLink(mContext, "http://sadellie.github.io/unitto/privacy-app.html") } + ) } // ANALYTICS @@ -137,16 +141,18 @@ fun SettingsScreen( // THIRD PARTY item { SettingsListItem( - label = stringResource(R.string.third_party_licenses) - ) { navControllerAction(ABOUT_SCREEN) } + label = stringResource(R.string.third_party_licenses), + onClick = { navControllerAction(ABOUT_SCREEN) } + ) } // RATE THIS APP if (BuildConfig.STORE_LINK.isNotEmpty()) { item { SettingsListItem( - label = stringResource(R.string.rate_this_app) - ) { openLink(mContext, BuildConfig.STORE_LINK) } + label = stringResource(R.string.rate_this_app), + onClick = { openLink(mContext, BuildConfig.STORE_LINK) } + ) } } diff --git a/app/src/main/java/com/sadellie/unitto/screens/setttings/UnitGroupsScreen.kt b/app/src/main/java/com/sadellie/unitto/screens/setttings/UnitGroupsScreen.kt index 885e4cf2..2669cfc5 100644 --- a/app/src/main/java/com/sadellie/unitto/screens/setttings/UnitGroupsScreen.kt +++ b/app/src/main/java/com/sadellie/unitto/screens/setttings/UnitGroupsScreen.kt @@ -21,13 +21,22 @@ package com.sadellie.unitto.screens.setttings import androidx.compose.animation.animateColorAsState import androidx.compose.animation.core.animateDpAsState import androidx.compose.foundation.background +import androidx.compose.foundation.clickable +import androidx.compose.foundation.interaction.MutableInteractionSource import androidx.compose.foundation.layout.padding import androidx.compose.foundation.lazy.LazyColumn import androidx.compose.foundation.lazy.items import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.material.icons.Icons +import androidx.compose.material.icons.filled.AddCircle +import androidx.compose.material.icons.filled.RemoveCircle +import androidx.compose.material.icons.filled.Reorder +import androidx.compose.material.ripple.rememberRipple +import androidx.compose.material3.Icon import androidx.compose.material3.MaterialTheme import androidx.compose.runtime.Composable import androidx.compose.runtime.collectAsState +import androidx.compose.runtime.remember import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip import androidx.compose.ui.res.stringResource @@ -37,6 +46,7 @@ import com.sadellie.unitto.screens.common.UnittoLargeTopAppBar import com.sadellie.unitto.screens.second.components.Header import com.sadellie.unitto.screens.setttings.components.SettingsListItem import org.burnoutcrew.reorderable.ReorderableItem +import org.burnoutcrew.reorderable.detectReorder import org.burnoutcrew.reorderable.detectReorderAfterLongPress import org.burnoutcrew.reorderable.rememberReorderableLazyListState import org.burnoutcrew.reorderable.reorderable @@ -53,7 +63,7 @@ fun UnitGroupsScreen( val shownUnits = viewModel.shownUnitGroups.collectAsState() val hiddenUnits = viewModel.hiddenUnitGroups.collectAsState() - + val state = rememberReorderableLazyListState( onMove = viewModel::onMove, canDragOver = viewModel::canDragOver @@ -64,7 +74,6 @@ fun UnitGroupsScreen( modifier = Modifier .padding(paddingValues) .reorderable(state) - .detectReorderAfterLongPress(state) ) { item(key = "enabled") { Header(text = stringResource(id = R.string.enabled_label)) @@ -81,9 +90,34 @@ fun UnitGroupsScreen( modifier = Modifier .padding(horizontal = cornerRadius.value) .clip(RoundedCornerShape(cornerRadius.value)) - .background(background.value), + .background(background.value) + .clickable { viewModel.hideUnitGroup(item) } + .detectReorderAfterLongPress(state), label = stringResource(item.res), - onClick = { viewModel.hideUnitGroup(item) } + leadingItem = { + Icon( + Icons.Default.RemoveCircle, + stringResource(id = R.string.disable_unit_group_description), + modifier = Modifier.clickable( + interactionSource = remember { MutableInteractionSource() }, + indication = rememberRipple(false), + onClick = { viewModel.hideUnitGroup(item) } + ) + ) + }, + trailingItem = { + Icon( + Icons.Default.Reorder, + stringResource(id = R.string.reorder_unit_group_description), + modifier = Modifier + .clickable( + interactionSource = remember { MutableInteractionSource() }, + indication = rememberRipple(false), + onClick = {} + ) + .detectReorder(state) + ) + } ) } } @@ -97,9 +131,22 @@ fun UnitGroupsScreen( items(hiddenUnits.value, { it }) { SettingsListItem( - modifier = Modifier.animateItemPlacement(), + modifier = Modifier + .background(MaterialTheme.colorScheme.surface) + .clickable { viewModel.returnUnitGroup(it) } + .animateItemPlacement(), label = stringResource(it.res), - onClick = { viewModel.returnUnitGroup(it) } + trailingItem = { + Icon( + Icons.Default.AddCircle, + stringResource(id = R.string.enable_unit_group_description), + modifier = Modifier.clickable( + interactionSource = remember { MutableInteractionSource() }, + indication = rememberRipple(false), + onClick = { viewModel.returnUnitGroup(it) } + ) + ) + } ) } } diff --git a/app/src/main/java/com/sadellie/unitto/screens/setttings/components/SettingsListItem.kt b/app/src/main/java/com/sadellie/unitto/screens/setttings/components/SettingsListItem.kt index 10f3174a..aaeba835 100644 --- a/app/src/main/java/com/sadellie/unitto/screens/setttings/components/SettingsListItem.kt +++ b/app/src/main/java/com/sadellie/unitto/screens/setttings/components/SettingsListItem.kt @@ -23,6 +23,7 @@ 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.Arrangement import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.RowScope @@ -62,32 +63,27 @@ import com.sadellie.unitto.R * @param modifier Modifier that will be applied to a Row. * @param label Main text. * @param supportText Text that is located below label. - * @param onClick Action to perform when user clicks on this component (whole component is clickable). - * @param content Additional composable: buttons, switches, checkboxes or something else. + * @param trailingItem Additional composable, icons for example. + * @param leadingItem Additional composable: buttons, switches, checkboxes or something else. */ @Composable private fun BasicSettingsListItem( modifier: Modifier = Modifier, label: String, supportText: String? = null, - onClick: () -> Unit = {}, - content: @Composable RowScope.() -> Unit = {} + leadingItem: @Composable() (RowScope.() -> Unit) = {}, + trailingItem: @Composable() (RowScope.() -> Unit) = {} ) { Row( modifier = modifier .fillMaxWidth() - .clickable( - interactionSource = remember { MutableInteractionSource() }, - indication = rememberRipple(), - onClick = onClick - ) .padding(horizontal = 16.dp, vertical = 12.dp), verticalAlignment = Alignment.CenterVertically, + horizontalArrangement = Arrangement.spacedBy(16.dp) ) { + leadingItem() Column( - Modifier - .padding(horizontal = 0.dp) - .weight(1f) // This makes additional composable to be seen + Modifier.weight(1f), // This makes additional composable to be seen ) { Text( modifier = Modifier @@ -106,7 +102,7 @@ private fun BasicSettingsListItem( ) } } - content() + trailingItem() } } @@ -124,7 +120,15 @@ fun SettingsListItem( label: String, supportText: String? = null, onClick: () -> Unit, -) = BasicSettingsListItem(modifier, label, supportText, onClick) +) = BasicSettingsListItem( + modifier = modifier.clickable( + interactionSource = remember { MutableInteractionSource() }, + indication = rememberRipple(), + onClick = onClick + ), + label = label, + supportText = supportText +) /** * Represents one item in list on Settings screen. @@ -141,7 +145,15 @@ fun SettingsListItem( supportText: String? = null, switchState: Boolean, onSwitchChange: (Boolean) -> Unit -) = BasicSettingsListItem(Modifier, label, supportText, { onSwitchChange(!switchState) }) { +) = BasicSettingsListItem( + modifier = Modifier.clickable( + interactionSource = remember { MutableInteractionSource() }, + indication = rememberRipple(), + onClick = { onSwitchChange(!switchState) } + ), + label = label, + supportText = supportText +) { Switch(checked = switchState, onCheckedChange = { onSwitchChange(it) }) } @@ -162,7 +174,7 @@ fun SettingsListItem( allOptions: Map, selected: T, onSelectedChange: (T) -> Unit -) = BasicSettingsListItem(Modifier, label, supportText, {}) { +) = BasicSettingsListItem(Modifier, label, supportText) { var dropDownExpanded by rememberSaveable { mutableStateOf(false) } var currentOption by rememberSaveable { mutableStateOf(selected) } val dropDownRotation: Float by animateFloatAsState( @@ -213,3 +225,21 @@ fun SettingsListItem( } } } + +/** + * Composable with leading and trailing items. + * + * @param label Main text. + * @param modifier Modifier that will be applied to a Row. + * @param trailingItem Additional composable, icons for example. + * @param leadingItem Additional composable: buttons, switches, checkboxes or something else. + */ +@Composable +fun SettingsListItem( + label: String, + modifier: Modifier = Modifier, + leadingItem: @Composable RowScope.() -> Unit = {}, + trailingItem: @Composable RowScope.() -> Unit = {} +) { + BasicSettingsListItem(modifier = modifier, label = label, trailingItem = trailingItem, leadingItem = leadingItem) +} diff --git a/app/src/main/res/values-en-rGB/strings.xml b/app/src/main/res/values-en-rGB/strings.xml index 2119ee46..1c5ff4c3 100644 --- a/app/src/main/res/values-en-rGB/strings.xml +++ b/app/src/main/res/values-en-rGB/strings.xml @@ -745,5 +745,8 @@ Open settings Enabled Disabled + Enable unit group + Disable unit group + Reorder unit group \ No newline at end of file diff --git a/app/src/main/res/values-ru/strings.xml b/app/src/main/res/values-ru/strings.xml index 5b57465c..7c7fd3ab 100644 --- a/app/src/main/res/values-ru/strings.xml +++ b/app/src/main/res/values-ru/strings.xml @@ -680,5 +680,8 @@ Открыть настройки Включено Отключено + Включить группу величин + Отключить группу величин + Переместить группу величин \ No newline at end of file diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml index e50ff478..317319fa 100644 --- a/app/src/main/res/values/strings.xml +++ b/app/src/main/res/values/strings.xml @@ -1020,6 +1020,10 @@ Add or remove unit from favorites Empty search result Open or close drop down menu + Enable unit group + Reorder unit group + Disable unit group + Send usage statistics All data is anonymous and encrypted Version name