From 6b447788e0c06e18bb4a3c60af9cd6b10a603e91 Mon Sep 17 00:00:00 2001 From: X1nto Date: Mon, 28 Jun 2021 17:50:23 +0400 Subject: [PATCH] migrated to custom checkbox and radiobutton --- .../components/animation/SpringAnimation.kt | 26 ++++++++++++++ .../ui/components/checkbox/ManagerCheckbox.kt | 31 ++++------------ .../ui/components/list/CheckboxItem.kt | 36 ++++++++----------- .../ui/components/list/RadiobuttonItem.kt | 27 +++++++------- .../preference/CheckboxDialogPreference.kt | 6 ++-- .../preference/CheckboxPreference.kt | 4 ++- .../preference/RadiobuttonDialogPreference.kt | 2 +- .../radiobutton/ManagerRadiobutton.kt | 33 +++++++++++++++++ 8 files changed, 100 insertions(+), 65 deletions(-) create mode 100644 app/src/main/java/com/vanced/manager/ui/components/animation/SpringAnimation.kt create mode 100644 app/src/main/java/com/vanced/manager/ui/components/radiobutton/ManagerRadiobutton.kt diff --git a/app/src/main/java/com/vanced/manager/ui/components/animation/SpringAnimation.kt b/app/src/main/java/com/vanced/manager/ui/components/animation/SpringAnimation.kt new file mode 100644 index 00000000..1b43cd5c --- /dev/null +++ b/app/src/main/java/com/vanced/manager/ui/components/animation/SpringAnimation.kt @@ -0,0 +1,26 @@ +package com.vanced.manager.ui.components.animation + +import android.annotation.SuppressLint +import androidx.compose.animation.core.Transition +import androidx.compose.animation.core.animateDp +import androidx.compose.animation.core.keyframes +import androidx.compose.runtime.Composable +import androidx.compose.ui.unit.Dp +import androidx.compose.ui.unit.dp + +@SuppressLint("UnusedTransitionTargetStateParameter") +@Composable +fun Transition.springAnimation( + initialValue: Dp, + label: String +) = animateDp( + transitionSpec = { + keyframes { + durationMillis = 250 + initialValue - 8.dp at 50 + initialValue + 8.dp at 150 + initialValue at 250 + } + }, + label = label +) { initialValue } \ No newline at end of file diff --git a/app/src/main/java/com/vanced/manager/ui/components/checkbox/ManagerCheckbox.kt b/app/src/main/java/com/vanced/manager/ui/components/checkbox/ManagerCheckbox.kt index 43d1b689..e6baa83d 100644 --- a/app/src/main/java/com/vanced/manager/ui/components/checkbox/ManagerCheckbox.kt +++ b/app/src/main/java/com/vanced/manager/ui/components/checkbox/ManagerCheckbox.kt @@ -1,8 +1,6 @@ package com.vanced.manager.ui.components.checkbox import android.annotation.SuppressLint -import androidx.compose.animation.core.animateDp -import androidx.compose.animation.core.keyframes import androidx.compose.animation.core.updateTransition import androidx.compose.foundation.layout.requiredSize import androidx.compose.foundation.layout.size @@ -13,7 +11,8 @@ import androidx.compose.material.icons.rounded.Done import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue import androidx.compose.ui.Modifier -import androidx.compose.ui.unit.dp +import androidx.compose.ui.unit.Dp +import com.vanced.manager.ui.components.animation.springAnimation import com.vanced.manager.ui.components.card.ManagerCard import com.vanced.manager.ui.components.color.contentColorForColor import com.vanced.manager.ui.components.color.managerAccentColor @@ -23,33 +22,15 @@ import com.vanced.manager.ui.components.color.managerThemedCardColor @SuppressLint("UnusedTransitionTargetStateParameter") @Composable fun ManagerCheckbox( + size: Dp, isChecked: Boolean, onCheckedChange: (isChecked: Boolean) -> Unit ) { val accentColor = managerAccentColor() + val iconInitialSize = size / 1.6f val transition = updateTransition(targetState = isChecked, label = "Checked") - val cardSize by transition.animateDp( - transitionSpec = { - keyframes { - durationMillis = 250 - 32.dp at 50 - 48.dp at 150 - 40.dp at 250 - } - }, - label = "Checkbox size" - ) { 40.dp } - val iconSize by transition.animateDp( - transitionSpec = { - keyframes { - durationMillis = 250 - 18.dp at 50 - 30.dp at 150 - 24.dp at 250 - } - }, - label = "Icon size" - ) { 24.dp } + val cardSize by transition.springAnimation(initialValue = size, label = "Checkbox Size") + val iconSize by transition.springAnimation(initialValue = iconInitialSize, label = "Icon size") val cardColor = managerAnimatedColor(if (isChecked) accentColor else managerThemedCardColor()) val iconTint = managerAnimatedColor(if (isChecked) contentColorForColor(cardColor) else accentColor) diff --git a/app/src/main/java/com/vanced/manager/ui/components/list/CheckboxItem.kt b/app/src/main/java/com/vanced/manager/ui/components/list/CheckboxItem.kt index 19d238d1..f18e67e2 100644 --- a/app/src/main/java/com/vanced/manager/ui/components/list/CheckboxItem.kt +++ b/app/src/main/java/com/vanced/manager/ui/components/list/CheckboxItem.kt @@ -1,20 +1,15 @@ package com.vanced.manager.ui.components.list -import androidx.compose.foundation.clickable -import androidx.compose.foundation.layout.Row -import androidx.compose.foundation.layout.fillMaxWidth -import androidx.compose.foundation.layout.padding -import androidx.compose.material.Checkbox -import androidx.compose.material.CheckboxDefaults +import androidx.compose.foundation.layout.* import androidx.compose.material.Text import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier -import androidx.compose.ui.graphics.Color import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp -import com.vanced.manager.ui.components.color.managerAccentColor +import com.vanced.manager.ui.components.checkbox.ManagerCheckbox import com.vanced.manager.ui.components.color.managerTextColor +import com.vanced.manager.ui.components.modifier.managerClickable @Composable fun CheckboxItem( @@ -22,27 +17,26 @@ fun CheckboxItem( isChecked: Boolean, onCheck: (Boolean) -> Unit = {} ) { - fun toggle() { - onCheck(isChecked) - } + val toggle = { onCheck(!isChecked) } Row( modifier = Modifier .fillMaxWidth() - .clickable { toggle() } + .managerClickable(onClick = toggle) .padding(horizontal = 8.dp, vertical = 6.dp), verticalAlignment = Alignment.CenterVertically ) { - Checkbox( - checked = isChecked, - onCheckedChange = { + Box( + modifier = Modifier.size(30.dp), + contentAlignment = Alignment.Center + ) { + ManagerCheckbox( + size = 24.dp, + isChecked = isChecked + ) { toggle() - }, - colors = CheckboxDefaults.colors( - checkedColor = managerAccentColor(), - uncheckedColor = Color.LightGray - ) - ) + } + } Text( modifier = Modifier.padding(start = 12.dp), text = text, diff --git a/app/src/main/java/com/vanced/manager/ui/components/list/RadiobuttonItem.kt b/app/src/main/java/com/vanced/manager/ui/components/list/RadiobuttonItem.kt index f8246bcd..9e96c687 100644 --- a/app/src/main/java/com/vanced/manager/ui/components/list/RadiobuttonItem.kt +++ b/app/src/main/java/com/vanced/manager/ui/components/list/RadiobuttonItem.kt @@ -1,26 +1,21 @@ package com.vanced.manager.ui.components.list import androidx.compose.foundation.clickable -import androidx.compose.foundation.layout.Row -import androidx.compose.foundation.layout.fillMaxWidth -import androidx.compose.foundation.layout.padding -import androidx.compose.material.RadioButton -import androidx.compose.material.RadioButtonDefaults +import androidx.compose.foundation.layout.* import androidx.compose.material.Text import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier -import androidx.compose.ui.graphics.Color import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp -import com.vanced.manager.ui.components.color.managerAccentColor import com.vanced.manager.ui.components.color.managerTextColor +import com.vanced.manager.ui.components.radiobutton.ManagerRadiobutton @Composable fun RadiobuttonItem( text: String, tag: T, - selected: Boolean, + isSelected: Boolean, onSelect: (tag: T) -> Unit ) { val onClick = { @@ -34,14 +29,16 @@ fun RadiobuttonItem( .padding(horizontal = 8.dp, vertical = 6.dp), verticalAlignment = Alignment.CenterVertically ) { - RadioButton( - selected = selected, - onClick = onClick, - colors = RadioButtonDefaults.colors( - selectedColor = managerAccentColor(), - unselectedColor = Color.LightGray + Box( + modifier = Modifier.size(30.dp), + contentAlignment = Alignment.Center + ) { + ManagerRadiobutton( + size = 24.dp, + isSelected = isSelected, + onClick = onClick ) - ) + } Text( modifier = Modifier.padding(start = 12.dp), text = text, diff --git a/app/src/main/java/com/vanced/manager/ui/components/preference/CheckboxDialogPreference.kt b/app/src/main/java/com/vanced/manager/ui/components/preference/CheckboxDialogPreference.kt index cdd82b7f..f78a07d7 100644 --- a/app/src/main/java/com/vanced/manager/ui/components/preference/CheckboxDialogPreference.kt +++ b/app/src/main/java/com/vanced/manager/ui/components/preference/CheckboxDialogPreference.kt @@ -1,6 +1,7 @@ package com.vanced.manager.ui.components.preference import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.heightIn import androidx.compose.foundation.lazy.LazyColumn import androidx.compose.foundation.lazy.items import androidx.compose.runtime.Composable @@ -9,6 +10,7 @@ import androidx.compose.runtime.rememberCoroutineScope import androidx.compose.runtime.toMutableStateList import androidx.compose.ui.Modifier import androidx.compose.ui.res.stringResource +import androidx.compose.ui.unit.dp import com.vanced.manager.R import com.vanced.manager.ui.components.button.ManagerThemedTextButton import com.vanced.manager.ui.components.list.CheckboxItem @@ -33,7 +35,7 @@ fun CheckboxDialogPreference( selectedButtons.any { selectedButton -> button.key == selectedButton } - }.joinToString(separator = ", ") { it.title }, + }.sortedBy { it.title }.joinToString(separator = ", ") { it.title }, trailing = trailing, buttons = { isShown -> ManagerThemedTextButton( @@ -50,7 +52,7 @@ fun CheckboxDialogPreference( } ) { LazyColumn( - modifier = Modifier + modifier = Modifier.heightIn(max = 400.dp) ) { items(buttons) { button -> val (title, key) = button diff --git a/app/src/main/java/com/vanced/manager/ui/components/preference/CheckboxPreference.kt b/app/src/main/java/com/vanced/manager/ui/components/preference/CheckboxPreference.kt index 2537692f..8770319b 100644 --- a/app/src/main/java/com/vanced/manager/ui/components/preference/CheckboxPreference.kt +++ b/app/src/main/java/com/vanced/manager/ui/components/preference/CheckboxPreference.kt @@ -2,6 +2,7 @@ package com.vanced.manager.ui.components.preference import androidx.compose.runtime.Composable import androidx.compose.runtime.rememberCoroutineScope +import androidx.compose.ui.unit.dp import com.vanced.manager.ui.components.checkbox.ManagerCheckbox import com.vanced.manager.ui.preferences.ManagerPreference import kotlinx.coroutines.launch @@ -29,7 +30,8 @@ fun CheckboxPreference( trailing = { ManagerCheckbox( isChecked = isChecked, - onCheckedChange = { onClick() } + onCheckedChange = { onClick() }, + size = 40.dp ) } ) diff --git a/app/src/main/java/com/vanced/manager/ui/components/preference/RadiobuttonDialogPreference.kt b/app/src/main/java/com/vanced/manager/ui/components/preference/RadiobuttonDialogPreference.kt index c38ff0cd..b87fc2be 100644 --- a/app/src/main/java/com/vanced/manager/ui/components/preference/RadiobuttonDialogPreference.kt +++ b/app/src/main/java/com/vanced/manager/ui/components/preference/RadiobuttonDialogPreference.kt @@ -44,7 +44,7 @@ fun RadiobuttonDialogPreference( RadiobuttonItem( text = title, tag = key, - selected = currentSelection == key, + isSelected = currentSelection == key, onSelect = { currentSelection = it } diff --git a/app/src/main/java/com/vanced/manager/ui/components/radiobutton/ManagerRadiobutton.kt b/app/src/main/java/com/vanced/manager/ui/components/radiobutton/ManagerRadiobutton.kt new file mode 100644 index 00000000..e55b2753 --- /dev/null +++ b/app/src/main/java/com/vanced/manager/ui/components/radiobutton/ManagerRadiobutton.kt @@ -0,0 +1,33 @@ +package com.vanced.manager.ui.components.radiobutton + +import android.annotation.SuppressLint +import androidx.compose.animation.core.updateTransition +import androidx.compose.foundation.layout.size +import androidx.compose.runtime.Composable +import androidx.compose.runtime.getValue +import androidx.compose.ui.Modifier +import androidx.compose.ui.unit.Dp +import com.vanced.manager.ui.components.animation.springAnimation +import com.vanced.manager.ui.components.card.ManagerCard +import com.vanced.manager.ui.components.color.managerAccentColor +import com.vanced.manager.ui.components.color.managerAnimatedColor +import com.vanced.manager.ui.components.color.managerThemedCardColor + +@SuppressLint("UnusedTransitionTargetStateParameter") +@Composable +fun ManagerRadiobutton( + size: Dp, + isSelected: Boolean, + onClick: () -> Unit +) { + val accentColor = managerAccentColor() + val transition = updateTransition(targetState = isSelected, label = "Selected") + val cardSize by transition.springAnimation(initialValue = size, label = "Radiobutton Size") + val cardColor = managerAnimatedColor(if (isSelected) accentColor else managerThemedCardColor()) + ManagerCard( + modifier = Modifier.size(cardSize), + onClick = onClick, + backgroundColor = cardColor, + content = {} + ) +} \ No newline at end of file