Skip to content

Commit de244e8

Browse files
kavi707kavi707
authored
Merge pull request #2 from KvColorPalette/feature/grid-color-picker
Feature/grid color picker
2 parents 23f88bd + 8f6a00f commit de244e8

File tree

4 files changed

+288
-41
lines changed

4 files changed

+288
-41
lines changed

‎kv-color-picker/src/main/kotlin/com/kavi/droid/color/picker/ui/KvColorPickerBottomSheet.kt‎

Lines changed: 31 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ import androidx.compose.material3.ExperimentalMaterial3Api
1010
import androidx.compose.material3.ModalBottomSheet
1111
import androidx.compose.material3.OutlinedButton
1212
import androidx.compose.material3.SheetState
13+
import androidx.compose.material3.Tab
14+
import androidx.compose.material3.TabRow
1315
import androidx.compose.material3.Text
1416
import androidx.compose.runtime.Composable
1517
import androidx.compose.runtime.MutableState
@@ -22,7 +24,8 @@ import androidx.compose.ui.graphics.Color
2224
import androidx.compose.ui.text.style.TextAlign
2325
import androidx.compose.ui.unit.dp
2426
import androidx.compose.ui.unit.sp
25-
import com.kavi.droid.color.picker.ui.pickers.KvColorPicker
27+
import com.kavi.droid.color.picker.ui.pickers.GridColorPicker
28+
import com.kavi.droid.color.picker.ui.pickers.RGBAColorPicker
2629

2730
@OptIn(ExperimentalMaterial3Api::class)
2831
@Composable
@@ -35,6 +38,8 @@ fun KvColorPickerBottomSheet(showSheet: MutableState<Boolean>, sheetState: Sheet
3538
) {
3639
Column {
3740
var selectedColor by remember { mutableStateOf(Color.Black) }
41+
var tabIndex by remember { mutableStateOf(0) }
42+
val tabs = listOf("RGB", "GRID")
3843

3944
Text(
4045
text ="Pick you color",
@@ -44,12 +49,32 @@ fun KvColorPickerBottomSheet(showSheet: MutableState<Boolean>, sheetState: Sheet
4449
fontSize = 32.sp
4550
)
4651

47-
KvColorPicker(
48-
modifier = Modifier.padding(16.dp),
49-
onColorSelected = {
50-
selectedColor = it
52+
TabRow(
53+
modifier = Modifier.padding(start = 12.dp, end = 12.dp, top = 8.dp),
54+
selectedTabIndex = tabIndex
55+
) {
56+
tabs.forEachIndexed { index, title ->
57+
Tab(
58+
text = { Text(title) },
59+
selected = tabIndex == index,
60+
onClick = { tabIndex = index }
61+
)
5162
}
52-
)
63+
}
64+
when(tabIndex) {
65+
0 -> RGBAColorPicker(
66+
modifier = Modifier.padding(16.dp),
67+
onColorSelected = {
68+
selectedColor = it
69+
}
70+
)
71+
1 -> GridColorPicker(
72+
modifier = Modifier.padding(16.dp),
73+
onColorSelected = {
74+
selectedColor = it
75+
}
76+
)
77+
}
5378

5479
Row (
5580
modifier = Modifier

‎kv-color-picker/src/main/kotlin/com/kavi/droid/color/picker/ui/common/CommonUI.kt‎

Lines changed: 41 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ package com.kavi.droid.color.picker.ui.common
33
import android.icu.text.DecimalFormat
44
import androidx.compose.foundation.background
55
import androidx.compose.foundation.border
6+
import androidx.compose.foundation.clickable
67
import androidx.compose.foundation.layout.Arrangement
78
import androidx.compose.foundation.layout.Box
89
import androidx.compose.foundation.layout.Column
@@ -21,13 +22,21 @@ import androidx.compose.material3.SliderDefaults
2122
import androidx.compose.material3.Text
2223
import androidx.compose.runtime.Composable
2324
import androidx.compose.runtime.MutableState
25+
import androidx.compose.runtime.getValue
26+
import androidx.compose.runtime.mutableStateOf
27+
import androidx.compose.runtime.remember
28+
import androidx.compose.runtime.setValue
2429
import androidx.compose.ui.Alignment
2530
import androidx.compose.ui.Modifier
2631
import androidx.compose.ui.graphics.Color
32+
import androidx.compose.ui.graphics.RectangleShape
2733
import androidx.compose.ui.platform.LocalClipboardManager
2834
import androidx.compose.ui.text.input.TextFieldValue
2935
import androidx.compose.ui.text.style.TextAlign
3036
import androidx.compose.ui.unit.dp
37+
import com.kavi.droid.color.palette.KvColorPalette
38+
import com.kavi.droid.color.palette.model.KvColor
39+
import com.kavi.droid.color.palette.util.ColorUtil
3140
import com.kavi.droid.color.picker.extension.toColorInt
3241

3342
/**
@@ -139,7 +148,7 @@ fun SelectedColorDetail(
139148
) {
140149
Box(
141150
modifier = Modifier
142-
.padding(12.dp)
151+
.padding(start = 12.dp, end = 12.dp, top = 22.dp, bottom = 12.dp)
143152
.height(75.dp)
144153
.width(75.dp)
145154
.background(color, shape = MaterialTheme.shapes.large)
@@ -191,3 +200,34 @@ fun SelectedColorDetail(
191200
}
192201
}
193202
}
203+
204+
@Composable
205+
fun ColorColum(givenColor: KvColor, selectedColor: Color, onSelect: (color: Color) -> Unit) {
206+
val colors = KvColorPalette.instance.generateColorPalette(givenColor = givenColor)
207+
Column {
208+
colors.forEach {
209+
ColorBox(givenColor = it, selectedColor = selectedColor, onSelect = onSelect)
210+
}
211+
}
212+
}
213+
214+
@Composable
215+
fun ColorBox(givenColor: Color, selectedColor: Color?, onSelect: (color: Color) -> Unit) {
216+
var isSelected by remember { mutableStateOf(false) }
217+
218+
selectedColor?.let {
219+
isSelected = ColorUtil.getHexWithAlpha(givenColor) == ColorUtil.getHexWithAlpha(it)
220+
}
221+
222+
Box(
223+
modifier = Modifier
224+
.width(24.dp)
225+
.height(24.dp)
226+
.background(givenColor, RectangleShape)
227+
.clickable {
228+
isSelected = true
229+
onSelect(givenColor)
230+
}
231+
.then(if (isSelected) Modifier.border(2.dp, Color.White) else Modifier)
232+
)
233+
}

‎kv-color-picker/src/main/kotlin/com/kavi/droid/color/picker/ui/pickers/GridColorPicker.kt‎

Lines changed: 168 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,168 @@
1+
package com.kavi.droid.color.picker.ui.pickers
2+
3+
import androidx.compose.foundation.background
4+
import androidx.compose.foundation.border
5+
import androidx.compose.foundation.layout.Arrangement
6+
import androidx.compose.foundation.layout.Column
7+
import androidx.compose.foundation.layout.Row
8+
import androidx.compose.foundation.layout.fillMaxWidth
9+
import androidx.compose.foundation.layout.padding
10+
import androidx.compose.foundation.shape.RoundedCornerShape
11+
import androidx.compose.material3.MaterialTheme
12+
import androidx.compose.material3.Text
13+
import androidx.compose.runtime.Composable
14+
import androidx.compose.runtime.LaunchedEffect
15+
import androidx.compose.runtime.getValue
16+
import androidx.compose.runtime.mutableStateOf
17+
import androidx.compose.runtime.remember
18+
import androidx.compose.runtime.setValue
19+
import androidx.compose.ui.Alignment
20+
import androidx.compose.ui.Modifier
21+
import androidx.compose.ui.draw.shadow
22+
import androidx.compose.ui.graphics.Color
23+
import androidx.compose.ui.text.input.TextFieldValue
24+
import androidx.compose.ui.text.style.TextAlign
25+
import androidx.compose.ui.unit.dp
26+
import androidx.compose.ui.unit.sp
27+
import com.kavi.droid.color.palette.color.MatPackage
28+
import com.kavi.droid.color.palette.util.ColorUtil
29+
import com.kavi.droid.color.picker.ui.common.ColorColum
30+
import com.kavi.droid.color.picker.ui.common.SelectedColorDetail
31+
32+
@Composable
33+
fun GridColorPicker(modifier: Modifier = Modifier, onColorSelected: (selectedColor: Color) -> Unit) {
34+
35+
var selectedColor by remember { mutableStateOf(Color.White) }
36+
val colorHex = remember { mutableStateOf(TextFieldValue("#ffffff")) }
37+
38+
val onSelectColor: (color: Color) -> Unit = {
39+
selectedColor = it
40+
colorHex.value = TextFieldValue(ColorUtil.getHex(it))
41+
}
42+
43+
// Launch an effect to invoke the provided callback with the selected color
44+
LaunchedEffect(selectedColor) {
45+
onColorSelected.invoke(selectedColor)
46+
}
47+
48+
Column (modifier = modifier, verticalArrangement = Arrangement.spacedBy(8.dp)) {
49+
Column(
50+
modifier = Modifier
51+
.border(1.dp, Color.White, shape = RoundedCornerShape(8.dp))
52+
.shadow(
53+
elevation = 10.dp,
54+
shape = RoundedCornerShape(8.dp)
55+
)
56+
.background(Color.White)
57+
.padding(start = 12.dp, end = 12.dp, top = 12.dp, bottom = 8.dp)
58+
) {
59+
Text(
60+
text = "By selecting color from the grid below, you can pick your color.",
61+
textAlign = TextAlign.Start,
62+
modifier = Modifier
63+
.fillMaxWidth().padding(start = 12.dp, end = 12.dp, top = 12.dp),
64+
color = Color.Gray,
65+
style = MaterialTheme.typography.bodySmall,
66+
fontSize = 12.sp
67+
)
68+
69+
Row(
70+
modifier = Modifier
71+
.fillMaxWidth()
72+
.padding(top = 16.dp, start = 4.dp, end = 4.dp, bottom = 12.dp),
73+
verticalAlignment = Alignment.CenterVertically,
74+
horizontalArrangement = Arrangement.Center
75+
) {
76+
ColorColum(
77+
givenColor = MatPackage.MatRed,
78+
selectedColor = selectedColor,
79+
onSelect = onSelectColor
80+
)
81+
ColorColum(
82+
givenColor = MatPackage.MatRose,
83+
selectedColor = selectedColor,
84+
onSelect = onSelectColor
85+
)
86+
ColorColum(
87+
givenColor = MatPackage.MatLPurple,
88+
selectedColor = selectedColor,
89+
onSelect = onSelectColor
90+
)
91+
ColorColum(
92+
givenColor = MatPackage.MatDPurple,
93+
selectedColor = selectedColor,
94+
onSelect = onSelectColor
95+
)
96+
ColorColum(
97+
givenColor = MatPackage.MatDBlue,
98+
selectedColor = selectedColor,
99+
onSelect = onSelectColor
100+
)
101+
ColorColum(
102+
givenColor = MatPackage.MatLBlue,
103+
selectedColor = selectedColor,
104+
onSelect = onSelectColor
105+
)
106+
ColorColum(
107+
givenColor = MatPackage.MatLLBlue,
108+
selectedColor = selectedColor,
109+
onSelect = onSelectColor
110+
)
111+
ColorColum(
112+
givenColor = MatPackage.MatLCyan,
113+
selectedColor = selectedColor,
114+
onSelect = onSelectColor
115+
)
116+
ColorColum(
117+
givenColor = MatPackage.MatDCyan,
118+
selectedColor = selectedColor,
119+
onSelect = onSelectColor
120+
)
121+
ColorColum(
122+
givenColor = MatPackage.MatDGreen,
123+
selectedColor = selectedColor,
124+
onSelect = onSelectColor
125+
)
126+
ColorColum(
127+
givenColor = MatPackage.MatLGreen,
128+
selectedColor = selectedColor,
129+
onSelect = onSelectColor
130+
)
131+
ColorColum(
132+
givenColor = MatPackage.MatLLGreen,
133+
selectedColor = selectedColor,
134+
onSelect = onSelectColor
135+
)
136+
ColorColum(
137+
givenColor = MatPackage.MatYellow,
138+
selectedColor = selectedColor,
139+
onSelect = onSelectColor
140+
)
141+
ColorColum(
142+
givenColor = MatPackage.MatGold,
143+
selectedColor = selectedColor,
144+
onSelect = onSelectColor
145+
)
146+
ColorColum(
147+
givenColor = MatPackage.MatOrange,
148+
selectedColor = selectedColor,
149+
onSelect = onSelectColor
150+
)
151+
}
152+
}
153+
154+
Column(
155+
modifier = Modifier
156+
.border(1.dp, Color.White, shape = RoundedCornerShape(8.dp))
157+
.shadow(
158+
elevation = 10.dp,
159+
shape = RoundedCornerShape(8.dp)
160+
)
161+
.background(Color.White)
162+
.padding(start = 12.dp, end = 12.dp)
163+
) {
164+
SelectedColorDetail(color = selectedColor, colorHex = colorHex)
165+
}
166+
}
167+
168+
}

0 commit comments

Comments
 (0)