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
@@ -9,7 +9,7 @@ playServicesWearable = "18.0.0"
 material = "1.14.0"
 activityKtx = "1.13.0"
 constraintlayout = "2.2.1"
-kotlin = "2.2.10"
+kotlin = "2.4.0"
 composeBom = "2024.09.00"
 composeMaterial3 = "1.5.6"
 composeFoundation = "1.5.6"
@@ -22,6 +22,7 @@ zxingAndroid = "4.3.0"
 lifecycleRuntimeKtx = "2.6.1"
 navigationFragmentKtx = "2.6.0"
 navigationUiKtx = "2.6.0"
+colorpicker = "1.2.0"

 [libraries]
 androidx-core-ktx = { group = "androidx.core", name = "core-ktx", version.ref = "coreKtx" }
@@ -52,6 +53,7 @@ androidx-lifecycle-runtime-ktx = { group = "androidx.lifecycle", name = "lifecyc
 androidx-material3 = { group = "androidx.compose.material3", name = "material3" }
 androidx-navigation-fragment-ktx = { group = "androidx.navigation", name = "navigation-fragment-ktx", version.ref = "navigationFragmentKtx" }
 androidx-navigation-ui-ktx = { group = "androidx.navigation", name = "navigation-ui-ktx", version.ref = "navigationUiKtx" }
+compose-colorpicker = { module = "com.github.skydoves:colorpicker-compose", version.ref = "colorpicker" }

 [plugins]
 android-application = { id = "com.android.application", version.ref = "agp" }
@@ -1,7 +1,6 @@
 plugins {
    alias(libs.plugins.android.application)
    alias(libs.plugins.kotlin.compose)
-    kotlin("plugin.serialization") version "2.2.20"
 }

 android {
@@ -12,8 +11,8 @@ android {
        applicationId = "ru.omni_devel.cards"
        minSdk = 30
        targetSdk = 36
-        versionCode = 30 // 0 at end for mobile
-        versionName = "2.0"
+        versionCode = 40 // 0 at end for mobile
+        versionName = "2.1"

        testInstrumentationRunner = "androidx.test.runner.AndroidJUnitRunner"
    }
@@ -63,4 +62,5 @@ dependencies {
    implementation(libs.zxing.android)
    implementation("com.google.android.gms:play-services-wearable:18.1.0")
    implementation("org.jetbrains.kotlinx:kotlinx-serialization-json:1.9.0")
+    implementation(libs.compose.colorpicker)
 }
@@ -14,4 +14,5 @@ class CardInfo (
    val name: String,
    val codeType: BarcodeFormat,
    val codeValue: String,
-)
+    val color: String?,
+) {}
@@ -6,25 +6,28 @@ import android.database.sqlite.SQLiteDatabase
 import android.database.sqlite.SQLiteOpenHelper
 import com.google.zxing.BarcodeFormat

-class DbHelper(val context: Context, val factory: SQLiteDatabase.CursorFactory?) : SQLiteOpenHelper(context, "omni_cards", factory, 1) {
+class DbHelper(val context: Context, val factory: SQLiteDatabase.CursorFactory?) : SQLiteOpenHelper(context, "omni_cards", factory, 2) {
    override fun onCreate(db: SQLiteDatabase?) {
-        db!!.execSQL("CREATE TABLE IF NOT EXISTS cards (id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT, codeType TEXT, codeValue TEXT)")
+        db!!.execSQL("CREATE TABLE IF NOT EXISTS cards (id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT, codeType TEXT, codeValue TEXT, color TEXT)")
    }

    override fun onUpgrade(
        db: SQLiteDatabase?,
-        p1: Int,
+        oldVersion: Int,
        p2: Int
    ) {
-        db!!.execSQL("DROP TABLE IF EXISTS cards")
+        if (oldVersion < 2) {
+            db!!.execSQL("ALTER TABLE cards ADD COLUMN color TEXT")
+        }
    }

-    fun addCard(name: String, codeValue: String, codeType: BarcodeFormat) {
+    fun addCard(name: String, codeValue: String, codeType: BarcodeFormat, color: String?) {
        val values = ContentValues()

        values.put("name", name)
        values.put("codeValue", codeValue)
        values.put("codeType", codeType.name)
+        values.put("color", color)

        val db = this.writableDatabase

@@ -33,12 +36,13 @@ class DbHelper(val context: Context, val factory: SQLiteDatabase.CursorFactory?)
        db.close()
    }

-    fun editCard(id: Int, name: String, codeValue: String, codeType: BarcodeFormat) {
+    fun editCard(id: Int, name: String, codeValue: String, codeType: BarcodeFormat, color: String?) {
        val values = ContentValues()

        values.put("name", name)
        values.put("codeValue", codeValue)
        values.put("codeType", codeType.name)
+        values.put("color", color)

        val db = this.writableDatabase

@@ -58,7 +62,8 @@ class DbHelper(val context: Context, val factory: SQLiteDatabase.CursorFactory?)
                id = cursor.getInt(cursor.getColumnIndexOrThrow("id")),
                name = cursor.getString(cursor.getColumnIndexOrThrow("name")),
                codeType = BarcodeFormat.valueOf(cursor.getString(cursor.getColumnIndexOrThrow("codeType"))),
-                codeValue = cursor.getString(cursor.getColumnIndexOrThrow("codeValue"))
+                codeValue = cursor.getString(cursor.getColumnIndexOrThrow("codeValue")),
+                color = cursor.getString(cursor.getColumnIndexOrThrow("color"))
            ))
        }

@@ -84,7 +89,8 @@ class DbHelper(val context: Context, val factory: SQLiteDatabase.CursorFactory?)
            id = cursor.getInt(cursor.getColumnIndexOrThrow("id")),
            name = cursor.getString(cursor.getColumnIndexOrThrow("name")),
            codeType = BarcodeFormat.valueOf(cursor.getString(cursor.getColumnIndexOrThrow("codeType"))),
-            codeValue = cursor.getString(cursor.getColumnIndexOrThrow("codeValue"))
+            codeValue = cursor.getString(cursor.getColumnIndexOrThrow("codeValue")),
+            color = cursor.getString(cursor.getColumnIndexOrThrow("color"))
        )

        cursor.close()
@@ -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()
                    }
@@ -2,14 +2,18 @@ package ru.omni_devel.cards

 import android.content.Intent
 import androidx.compose.foundation.background
-import androidx.compose.foundation.combinedClickable
 import androidx.compose.foundation.gestures.detectTapGestures
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.IntrinsicSize
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
 import androidx.compose.material3.Button
 import androidx.compose.material3.ButtonDefaults
 import androidx.compose.material3.DropdownMenu
@@ -23,11 +27,13 @@ import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import androidx.compose.runtime.setValue
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.input.pointer.pointerInput
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
+import androidx.core.graphics.toColorInt

@Composable
 fun Page(name: String, innerPadding: PaddingValues, content: @Composable () -> Unit) {
@@ -58,7 +64,7 @@ fun TopBar(text: String) {
 }

@Composable
-fun CardButton(cardInfo: CardInfo, onDeleteCard: (Int) -> Unit, getDbFun: () -> DbHelper) {
+fun CardButton(cardInfo: CardInfo, onDeleteCard: (Int) -> Unit) {
    val context = LocalContext.current
    var menuExpanded by remember { mutableStateOf(false) }

@@ -82,15 +88,31 @@ fun CardButton(cardInfo: CardInfo, onDeleteCard: (Int) -> Unit, getDbFun: () ->
            color = MaterialTheme.colorScheme.primaryContainer,
            tonalElevation = 2.dp
        ) {
-            Text(
-                cardInfo.name,
-                fontSize = 16.sp,
-                color = MaterialTheme.colorScheme.onPrimaryContainer,
-                modifier = Modifier
-                    .padding(vertical = 16.dp, horizontal = 16.dp)
-                    .fillMaxWidth(),
-                textAlign = TextAlign.Start
-            )
+            Row(
+                modifier = Modifier.fillMaxWidth().height(IntrinsicSize.Min),
+                horizontalArrangement = Arrangement.SpaceBetween
+            ) {
+                Box(
+                    modifier = Modifier
+                        .fillMaxHeight()
+                        .width(32.dp)
+                        .background(
+                            if (cardInfo.color == null) MaterialTheme.colorScheme.secondaryContainer.copy(alpha = 0.625f)
+                            else Color(cardInfo.color.toColorInt()).copy(alpha = 0.625f)
+                        )
+                )
+
+                Text(
+                    cardInfo.name,
+                    fontSize = 16.sp,
+                    color = MaterialTheme.colorScheme.onPrimaryContainer,
+                    modifier = Modifier
+                        .padding(16.dp)
+                        .fillMaxWidth()
+                        .weight(1f),
+                    textAlign = TextAlign.Start
+                )
+            }
        }

        DropdownMenu(
@@ -100,7 +100,7 @@ fun MainPage(
                    Text("Add new card to get started")
                } else {
                    for (card in cards) {
-                        CardButton(card, onDeleteCard, getDbFun)
+                        CardButton(card, onDeleteCard)
                    }
                }
            }
@@ -1,7 +1,6 @@
 plugins {
    alias(libs.plugins.android.application)
    alias(libs.plugins.kotlin.compose)
-    kotlin("plugin.serialization") version "2.2.20"
 }

 android {
@@ -14,7 +13,6 @@ android {
        targetSdk = 36
        versionCode = 41 // 1 at end for WearOS
        versionName = "1.1"
-
    }

    buildTypes {
@@ -8,11 +8,9 @@ import androidx.activity.compose.setContent
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.BoxWithConstraints
-import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.padding
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -22,6 +20,7 @@ import androidx.compose.ui.unit.dp
 import androidx.wear.compose.foundation.lazy.TransformingLazyColumn
 import androidx.wear.compose.material3.Button
 import androidx.wear.compose.material3.Text
+import com.google.zxing.BarcodeFormat

 class MainActivity : ComponentActivity() {
    private lateinit var db: DbHelper
@@ -32,7 +31,15 @@ class MainActivity : ComponentActivity() {
        db = DbHelper(this, null)

        setContent {
-            App(db.getCards())
+//            App(db.getCards())
+            App(listOf(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10).map {
+                CardInfo(
+                    id = it,
+                    name = "Card #$it",
+                    codeType = BarcodeFormat.QR_CODE,
+                    codeValue = "000$it"
+                )
+            })
        }
    }
 }