feat: added color pick for cards

2026-06-14 15:55:41 +03:00
parent 3188a86609
commit acb9cd55e4
9 changed files with 143 additions and 44 deletions
@@ -4,6 +4,7 @@ import android.app.Activity
 import android.os.Bundle
 import android.widget.Toast
 import androidx.activity.ComponentActivity
+import androidx.activity.compose.LocalActivity
 import androidx.activity.compose.rememberLauncherForActivityResult
 import androidx.activity.compose.setContent
 import androidx.activity.enableEdgeToEdge
@@ -15,12 +16,17 @@ import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.Button
 import androidx.compose.material3.DropdownMenu
 import androidx.compose.material3.DropdownMenuItem
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.OutlinedTextField
 import androidx.compose.material3.Scaffold
+import androidx.compose.material3.Switch
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
@@ -29,8 +35,13 @@ import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.unit.dp
+import androidx.core.graphics.toColorInt
+import com.github.skydoves.colorpicker.compose.ColorEnvelope
+import com.github.skydoves.colorpicker.compose.HsvColorPicker
+import com.github.skydoves.colorpicker.compose.rememberColorPickerController
 import com.google.zxing.BarcodeFormat
 import com.journeyapps.barcodescanner.ScanContract
 import com.journeyapps.barcodescanner.ScanOptions
@@ -65,11 +76,17 @@ fun CardEditable(
    cardName: String,
    onCardNameChange: (String) -> Unit,
    codeValue: String,
-    oncodeValueChange: (String) -> Unit,
+    onCodeValueChange: (String) -> Unit,
    codeType: BarcodeFormat,
-    onCodeTypeChange: (BarcodeFormat) -> Unit
+    onCodeTypeChange: (BarcodeFormat) -> Unit,
+    color: String?,
+    onColorChange: (String?) -> Unit
 ) {
    var isCodeTypeDropdownExpanded by remember { mutableStateOf(false) }
+    var isColorPickerExpanded by remember { mutableStateOf(false) }
+    var isColorEnabled by remember { mutableStateOf(color != null) }
+
+    val colorPickerController = rememberColorPickerController()

    val fieldModifier = Modifier.fillMaxWidth()

@@ -77,7 +94,7 @@ fun CardEditable(
        contract = ScanContract()
    ) { result ->
        if (result.contents != null) {
-            oncodeValueChange(result.contents)
+            onCodeValueChange(result.contents)

            result.formatName?.let { formatName ->
                try {
@@ -98,7 +115,7 @@ fun CardEditable(
    ) {
        OutlinedTextField(
            value = codeValue,
-            onValueChange = oncodeValueChange,
+            onValueChange = onCodeValueChange,
            modifier = Modifier.weight(1f),
            label = { Text("Value") }
        )
@@ -151,6 +168,44 @@ fun CardEditable(
            }
        }
    }
+
+    Row(
+        modifier = fieldModifier,
+        horizontalArrangement = Arrangement.SpaceBetween
+    ) {
+        Button(
+            enabled = isColorEnabled,
+            onClick = {
+                isColorPickerExpanded = !isColorPickerExpanded
+            }
+        ) {
+            Text("Choose color")
+        }
+        Switch(
+            checked = isColorEnabled,
+            onCheckedChange = {
+                isColorEnabled = it
+
+                if (!isColorEnabled) {
+                    onColorChange(null)
+                }
+            }
+        )
+    }
+
+    if (isColorPickerExpanded && isColorEnabled) {
+        HsvColorPicker(
+            modifier = Modifier
+                .fillMaxWidth()
+                .height(450.dp)
+                .padding(10.dp),
+            initialColor = color?.let { Color(it.toColorInt()) },
+            controller = colorPickerController,
+            onColorChanged = { colorEnvelope: ColorEnvelope ->
+                onColorChange("#${colorEnvelope.hexCode.substring(2)}")
+            }
+        )
+    }
 }

@Composable
@@ -158,23 +213,27 @@ fun AddCard(innerPadding: PaddingValues, getDbFun: () -> DbHelper) {
    var cardName by remember { mutableStateOf("") }
    var codeValue by remember { mutableStateOf("") }
    var codeType by remember { mutableStateOf(BarcodeFormat.QR_CODE) }
+    var color by remember { mutableStateOf<String?>(null) }

-    val context = LocalContext.current as Activity
+    val context = LocalActivity.current

    Page(
        "New card",
        innerPadding
    ) {
        Column(
+            modifier = Modifier.verticalScroll(rememberScrollState()),
            verticalArrangement = Arrangement.spacedBy(8.dp)
        ) {
            CardEditable(
                cardName = cardName,
                onCardNameChange = { cardName = it },
                codeValue = codeValue,
-                oncodeValueChange = { codeValue = it },
+                onCodeValueChange = { codeValue = it },
                codeType = codeType,
-                onCodeTypeChange = { codeType = it }
+                onCodeTypeChange = { codeType = it },
+                color = color,
+                onColorChange = { color = it }
            )

            Button(
@@ -183,8 +242,8 @@ fun AddCard(innerPadding: PaddingValues, getDbFun: () -> DbHelper) {
                    val err = checkCardData(cardName, codeValue)

                    if (err == null) {
-                        getDbFun().addCard(cardName, codeValue, codeType)
-                        context.finish()
+                        getDbFun().addCard(cardName, codeValue, codeType, color)
+                        context!!.finish()
                    } else {
                        Toast.makeText(context, err, Toast.LENGTH_SHORT).show()
                    }
@@ -201,23 +260,27 @@ fun EditCard(cardInfo: CardInfo, innerPadding: PaddingValues, getDbFun: () -> Db
    var cardName by remember { mutableStateOf(cardInfo.name) }
    var codeValue by remember { mutableStateOf(cardInfo.codeValue) }
    var codeType by remember { mutableStateOf(cardInfo.codeType) }
+    var color by remember { mutableStateOf(cardInfo.color) }

-    val context = LocalContext.current as Activity
+    val context = LocalActivity.current

    Page(
        "Editing card id${cardInfo.id}",
        innerPadding
    ) {
        Column(
+            modifier = Modifier.verticalScroll(rememberScrollState()),
            verticalArrangement = Arrangement.spacedBy(8.dp)
        ) {
            CardEditable(
                cardName = cardName,
                onCardNameChange = { cardName = it },
                codeValue = codeValue,
-                oncodeValueChange = { codeValue = it },
+                onCodeValueChange = { codeValue = it },
                codeType = codeType,
-                onCodeTypeChange = { codeType = it }
+                onCodeTypeChange = { codeType = it },
+                color = color,
+                onColorChange = { color = it }
            )

            Button(
@@ -226,8 +289,8 @@ fun EditCard(cardInfo: CardInfo, innerPadding: PaddingValues, getDbFun: () -> Db
                    val err = checkCardData(cardName, codeValue)

                    if (err == null) {
-                        getDbFun().editCard(cardInfo.id, cardName, codeValue, codeType)
-                        context.finish()
+                        getDbFun().editCard(cardInfo.id, cardName, codeValue, codeType, color)
+                        context!!.finish()
                    } else {
                        Toast.makeText(context, err, Toast.LENGTH_SHORT).show()
                    }