Skip to content

Commit 1c00735

Browse files
SmartToolFactorySmartToolFactory
committed
add m2 and m3 color pickers
1 parent 7d5986c commit 1c00735

File tree

5 files changed

+692
-1
lines changed

5 files changed

+692
-1
lines changed

‎app/build.gradle‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,6 @@ dependencies {
5151
implementation project(':colorpicker')
5252

5353
implementation 'com.github.SmartToolFactory:Compose-Colorful-Sliders:1.0.2'
54-
implementation 'com.github.SmartToolFactory:Compose-Extended-Gestures:1.2.0'
5554
implementation 'com.github.SmartToolFactory:Compose-Extended-Colors:1.0.0-alpha07'
5655

5756
// Jetpack Compose

‎app/src/main/java/com/smarttoolfactory/composecolorpicker/demo/ColorPickerDemo.kt‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -216,6 +216,30 @@ fun ColorPickerDemo() {
216216
hexString = hexChange
217217
}
218218
)
219+
220+
DialogMaterial2(
221+
modifier = buttonModifier,
222+
color = color,
223+
onPreviousColorChange = {
224+
previousColor = it
225+
},
226+
onCurrentColorChange = { colorChange, hexChange ->
227+
color = colorChange
228+
hexString = hexChange
229+
}
230+
)
231+
232+
DialogMaterial3(
233+
modifier = buttonModifier,
234+
color = color,
235+
onPreviousColorChange = {
236+
previousColor = it
237+
},
238+
onCurrentColorChange = { colorChange, hexChange ->
239+
color = colorChange
240+
hexString = hexChange
241+
}
242+
)
219243
}
220244
}
221245

@@ -592,3 +616,65 @@ private fun DialogRectHueLightnessHSL(
592616
}
593617
}
594618

619+
@Composable
620+
private fun DialogMaterial2(
621+
modifier: Modifier,
622+
color: Color,
623+
onPreviousColorChange: (Color) -> Unit,
624+
onCurrentColorChange: (Color, String) -> Unit
625+
) {
626+
var showDialog by remember { mutableStateOf(false) }
627+
628+
OutlinedButton(
629+
modifier = modifier,
630+
onClick = { showDialog = !showDialog },
631+
colors = ButtonDefaults.outlinedButtonColors(
632+
backgroundColor = Color.Transparent
633+
)
634+
) {
635+
Text(text = "Material Design2 Dialog")
636+
}
637+
638+
if (showDialog) {
639+
onPreviousColorChange(color.copy())
640+
641+
ColorPickerM2Dialog(
642+
initialColor = color
643+
) { colorChange, hexChange ->
644+
showDialog = !showDialog
645+
onCurrentColorChange(colorChange, hexChange)
646+
}
647+
}
648+
}
649+
650+
@Composable
651+
private fun DialogMaterial3(
652+
modifier: Modifier,
653+
color: Color,
654+
onPreviousColorChange: (Color) -> Unit,
655+
onCurrentColorChange: (Color, String) -> Unit
656+
) {
657+
var showDialog by remember { mutableStateOf(false) }
658+
659+
OutlinedButton(
660+
modifier = modifier,
661+
onClick = { showDialog = !showDialog },
662+
colors = ButtonDefaults.outlinedButtonColors(
663+
backgroundColor = Color.Transparent
664+
)
665+
) {
666+
Text(text = "Material Design2 Dialog")
667+
}
668+
669+
if (showDialog) {
670+
onPreviousColorChange(color.copy())
671+
672+
ColorPickerM3Dialog(
673+
initialColor = color
674+
) { colorChange, hexChange ->
675+
showDialog = !showDialog
676+
onCurrentColorChange(colorChange, hexChange)
677+
}
678+
}
679+
}
680+

‎colorpicker/src/main/java/com/smarttoolfactory/colorpicker/dialog/ColorPickerDialog.kt‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -534,4 +534,66 @@ fun ColorPickerHLRectHSLDialog(
534534
}
535535
}
536536
}
537+
}
538+
539+
@Composable
540+
fun ColorPickerM2Dialog(
541+
modifier: Modifier = Modifier,
542+
initialColor: Color,
543+
dialogBackgroundColor: Color = Color.White,
544+
dialogShape: Shape = RoundedCornerShape(5.dp),
545+
onDismiss: (Color, String) -> Unit
546+
) {
547+
548+
var color by remember { mutableStateOf(initialColor.copy()) }
549+
var hexString by remember { mutableStateOf(ColorUtil.colorToHexAlpha(color)) }
550+
551+
Dialog(
552+
onDismissRequest = {
553+
onDismiss(color, hexString)
554+
}
555+
) {
556+
Surface(
557+
modifier = modifier,
558+
color = dialogBackgroundColor,
559+
shape = dialogShape,
560+
elevation = 2.dp
561+
) {
562+
M2ColorPicker { colorChange ->
563+
color = colorChange
564+
hexString = ColorUtil.colorToHex(color)
565+
}
566+
}
567+
}
568+
}
569+
570+
@Composable
571+
fun ColorPickerM3Dialog(
572+
modifier: Modifier = Modifier,
573+
initialColor: Color,
574+
dialogBackgroundColor: Color = Color.White,
575+
dialogShape: Shape = RoundedCornerShape(5.dp),
576+
onDismiss: (Color, String) -> Unit
577+
) {
578+
579+
var color by remember { mutableStateOf(initialColor.copy()) }
580+
var hexString by remember { mutableStateOf(ColorUtil.colorToHexAlpha(color)) }
581+
582+
Dialog(
583+
onDismissRequest = {
584+
onDismiss(color, hexString)
585+
}
586+
) {
587+
Surface(
588+
modifier = modifier,
589+
color = dialogBackgroundColor,
590+
shape = dialogShape,
591+
elevation = 2.dp
592+
) {
593+
M3ColorPicker { colorChange ->
594+
color = colorChange
595+
hexString = ColorUtil.colorToHex(color)
596+
}
597+
}
598+
}
537599
}

‎colorpicker/src/main/java/com/smarttoolfactory/colorpicker/picker/M2ColorPicker.kt‎

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
package com.smarttoolfactory.colorpicker.picker
2+
3+
import androidx.compose.foundation.background
4+
import androidx.compose.foundation.clickable
5+
import androidx.compose.foundation.layout.*
6+
import androidx.compose.foundation.lazy.LazyColumn
7+
import androidx.compose.foundation.lazy.itemsIndexed
8+
import androidx.compose.foundation.shape.CircleShape
9+
import androidx.compose.foundation.shape.RoundedCornerShape
10+
import androidx.compose.material.Divider
11+
import androidx.compose.material.Text
12+
import androidx.compose.runtime.*
13+
import androidx.compose.ui.Alignment
14+
import androidx.compose.ui.Modifier
15+
import androidx.compose.ui.draw.clip
16+
import androidx.compose.ui.draw.shadow
17+
import androidx.compose.ui.graphics.Color
18+
import androidx.compose.ui.graphics.graphicsLayer
19+
import androidx.compose.ui.text.font.FontWeight
20+
import androidx.compose.ui.unit.dp
21+
import androidx.compose.ui.unit.sp
22+
import com.smarttoolfactory.extendedcolors.ColorSwatch
23+
import com.smarttoolfactory.extendedcolors.util.ColorUtil
24+
25+
/**
26+
* Color picker that displays header colors on left and material primary and if available
27+
* accent variants in a list with shade and hex display.
28+
* @param onColorChange callback that returns Color
29+
*/
30+
@Composable
31+
fun M2ColorPicker(onColorChange: (Color) -> Unit) {
32+
33+
var headerIndex by remember { mutableStateOf(0) }
34+
var selectedColorIndex by remember { mutableStateOf(-1) }
35+
36+
37+
Row(modifier = Modifier.fillMaxSize()) {
38+
LazyColumn(
39+
verticalArrangement = Arrangement.spacedBy(8.dp),
40+
contentPadding = PaddingValues(horizontal = 8.dp, vertical = 8.dp)
41+
) {
42+
itemsIndexed(ColorSwatch.primaryHeaderColors) { index: Int, item: Color ->
43+
ColorDisplay(
44+
modifier = Modifier
45+
.padding(horizontal = 2.dp)
46+
.clip(CircleShape)
47+
.size(60.dp)
48+
.clickable {
49+
headerIndex = index
50+
}, color = item
51+
)
52+
}
53+
}
54+
55+
val colorSwatch: LinkedHashMap<Int, Color> = ColorSwatch.primaryColorSwatches[headerIndex]
56+
57+
val keys: MutableList<Int> = colorSwatch.keys.toMutableList()
58+
val colors: MutableList<Color> = colorSwatch.values.toMutableList()
59+
60+
val result: Result<LinkedHashMap<Int, Color>> =
61+
runCatching { ColorSwatch.accentColorSwatches[headerIndex] }
62+
63+
if (result.isSuccess) {
64+
result.getOrNull()?.let { accentColorSwatch: LinkedHashMap<Int, Color> ->
65+
val accentKeys = accentColorSwatch.keys.toList()
66+
val accentColors = accentColorSwatch.values.toList()
67+
keys.addAll(accentKeys)
68+
colors.addAll(accentColors)
69+
}
70+
}
71+
Divider(
72+
modifier = Modifier
73+
.fillMaxHeight()
74+
.width(1.dp)
75+
.background(Color.LightGray)
76+
)
77+
78+
LazyColumn(
79+
modifier = Modifier.fillMaxWidth(),
80+
verticalArrangement = Arrangement.spacedBy(10.dp),
81+
contentPadding = PaddingValues(horizontal = 10.dp, vertical = 8.dp)
82+
) {
83+
itemsIndexed(colors) { index: Int, item: Color ->
84+
Column {
85+
if (index == 0 || index == 10) {
86+
Text(
87+
modifier = Modifier.padding(8.dp),
88+
text = if (index == 0) "Primary" else "Accent",
89+
fontSize = 24.sp,
90+
fontWeight = FontWeight.Bold
91+
)
92+
}
93+
ColorRowWithInfo(
94+
modifier =
95+
Modifier
96+
.graphicsLayer {
97+
scaleY = if (selectedColorIndex == index) 1.03f else 1f
98+
scaleX = if (selectedColorIndex == index) 1.03f else 1f
99+
}
100+
.shadow(2.dp, RoundedCornerShape(4.dp))
101+
.fillMaxWidth()
102+
.clickable {
103+
selectedColorIndex = index
104+
onColorChange(item)
105+
},
106+
title = keys[index].toString(),
107+
color = item,
108+
textColor = if (index < 5 || index > 9) Color.Black else Color.White
109+
)
110+
}
111+
}
112+
}
113+
}
114+
}
115+
116+
@Composable
117+
fun ColorDisplay(modifier: Modifier, color: Color) {
118+
Box(
119+
modifier = modifier
120+
.background(color)
121+
)
122+
}
123+
124+
@Composable
125+
fun ColorRowWithInfo(
126+
modifier: Modifier,
127+
title: String,
128+
color: Color,
129+
textColor: Color
130+
) {
131+
Row(
132+
modifier
133+
.background(color)
134+
.padding(16.dp),
135+
verticalAlignment = Alignment.CenterVertically
136+
) {
137+
Text(text = title, color = textColor, fontSize = 22.sp)
138+
Spacer(modifier = Modifier.weight(1f))
139+
Text(
140+
text = ColorUtil.colorToHex(color),
141+
color = textColor,
142+
fontSize = 22.sp,
143+
fontWeight = FontWeight.Bold
144+
)
145+
}
146+
}

0 commit comments

Comments
 (0)