migrated to custom checkbox and radiobutton

2024-11-25 20:55:12 +00:00 · 2021-06-28 17:50:23 +04:00 · 2021-06-28 17:50:23 +04:00 · 6b447788e0
commit 6b447788e0
parent 3b179f690c
8 changed files with 100 additions and 65 deletions
--- 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
@ -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 <T> Transition<T>.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 }
--- 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)

--- 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,
--- 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 <T> RadiobuttonItem(
    text: String,
    tag: T,
-    selected: Boolean,
+    isSelected: Boolean,
    onSelect: (tag: T) -> Unit
 ) {
    val onClick = {
@ -34,14 +29,16 @@ fun <T> 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,
--- 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
--- 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
            )
        }
    )
--- 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
                    }
--- 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
@ -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 = {}
+    )
+}