Skip to content

Commit 5f33535

Browse files
SmartToolFactorySmartToolFactory
committed
add gradient picker and dialog
1 parent c98005c commit 5f33535

File tree

4 files changed

+224
-23
lines changed

4 files changed

+224
-23
lines changed

‎app/src/main/java/com/smarttoolfactory/composecolorpicker/MainActivity.kt‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -79,11 +79,12 @@ private fun HomeContent() {
7979

8080
when (page) {
8181
0 -> ColorPickerDemo()
82-
1 -> SaturationSelectorDemo()
83-
2 -> GradientSelectionDemo()
84-
3 -> GradientAngleDemo()
85-
4 -> HSVHSLGradientDemo()
86-
5 -> ColorfulSliderDemo()
82+
1 -> ColorAndGradientPickerDemo()
83+
2 -> SaturationSelectorDemo()
84+
3 -> GradientSelectionDemo()
85+
4 -> GradientAngleDemo()
86+
5 -> HSVHSLGradientDemo()
87+
6 -> ColorfulSliderDemo()
8788
else -> ColorModeConversionDemo()
8889
}
8990
}
@@ -92,6 +93,7 @@ private fun HomeContent() {
9293
internal val tabList =
9394
listOf(
9495
"Color Picker",
96+
"Gradient Color Picker",
9597
"Saturation Selector",
9698
"Gradient Selection",
9799
"Gradient Angle",

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

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
package com.smarttoolfactory.composecolorpicker.demo
2+
3+
import androidx.compose.foundation.background
4+
import androidx.compose.foundation.layout.*
5+
import androidx.compose.foundation.rememberScrollState
6+
import androidx.compose.foundation.verticalScroll
7+
import androidx.compose.material.ButtonDefaults
8+
import androidx.compose.material.OutlinedButton
9+
import androidx.compose.material.Text
10+
import androidx.compose.runtime.*
11+
import androidx.compose.ui.Alignment
12+
import androidx.compose.ui.Modifier
13+
import androidx.compose.ui.graphics.Color
14+
import androidx.compose.ui.unit.DpSize
15+
import androidx.compose.ui.unit.dp
16+
import com.smarttoolfactory.colorpicker.dialog.ColorPickerRingDiamondGradientHSLDialog
17+
import com.smarttoolfactory.colorpicker.model.BrushColor
18+
import com.smarttoolfactory.colorpicker.model.GradientColorState
19+
import com.smarttoolfactory.colorpicker.model.rememberGradientColorState
20+
import com.smarttoolfactory.composecolorpicker.ui.theme.backgroundColor
21+
22+
@Composable
23+
fun ColorAndGradientPickerDemo() {
24+
Column(
25+
modifier = Modifier
26+
.fillMaxSize()
27+
.background(backgroundColor)
28+
.padding(horizontal = 8.dp, vertical = 4.dp)
29+
.verticalScroll(rememberScrollState()),
30+
horizontalAlignment = Alignment.CenterHorizontally,
31+
) {
32+
33+
val size = DpSize(150.dp, 100.dp)
34+
35+
var previousBrushColor by remember {
36+
mutableStateOf(
37+
BrushColor(
38+
color = Color.hsl(0f, 0.5f, 0.5f)
39+
)
40+
)
41+
}
42+
43+
var currentBrushColor by remember {
44+
mutableStateOf(previousBrushColor.copy())
45+
}
46+
47+
48+
Row {
49+
Box(
50+
modifier = Modifier
51+
.size(size)
52+
.background(previousBrushColor.activeBrush)
53+
)
54+
Box(
55+
modifier = Modifier
56+
.size(size)
57+
.background(currentBrushColor.activeBrush)
58+
)
59+
}
60+
61+
Spacer(modifier = Modifier.height(30.dp))
62+
63+
val buttonModifier = Modifier
64+
.fillMaxWidth()
65+
.padding(4.dp)
66+
67+
val gradientColorState = rememberGradientColorState(
68+
color = currentBrushColor.color,
69+
size = size
70+
)
71+
72+
DialogRingGradientHSL(
73+
modifier = buttonModifier,
74+
initialBrushColor = currentBrushColor,
75+
gradientColorState = gradientColorState,
76+
onPreviousColorChange = {
77+
previousBrushColor = it.copy()
78+
},
79+
onCurrentColorChange = {
80+
currentBrushColor = it
81+
}
82+
)
83+
}
84+
}
85+
86+
87+
@Composable
88+
private fun DialogRingGradientHSL(
89+
modifier: Modifier,
90+
initialBrushColor: BrushColor,
91+
gradientColorState: GradientColorState,
92+
onPreviousColorChange: (BrushColor) -> Unit,
93+
onCurrentColorChange: (BrushColor) -> Unit,
94+
) {
95+
var showDialog by remember { mutableStateOf(false) }
96+
97+
OutlinedButton(
98+
modifier = modifier,
99+
onClick = { showDialog = !showDialog },
100+
colors = ButtonDefaults.outlinedButtonColors(
101+
backgroundColor = Color.Transparent
102+
)
103+
104+
) {
105+
Text(text = "Ring Gradient HSL Dialog")
106+
}
107+
108+
if (showDialog) {
109+
onPreviousColorChange(initialBrushColor.copy())
110+
111+
ColorPickerRingDiamondGradientHSLDialog(
112+
initialBrushColor = initialBrushColor,
113+
gradientColorState = gradientColorState
114+
) {
115+
showDialog = !showDialog
116+
onCurrentColorChange(it)
117+
}
118+
}
119+
}

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

Lines changed: 19 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
11
package com.smarttoolfactory.composecolorpicker.demo
22

3-
import androidx.compose.foundation.layout.Column
4-
import androidx.compose.foundation.layout.fillMaxSize
5-
import androidx.compose.foundation.layout.padding
6-
import androidx.compose.foundation.layout.size
3+
import androidx.compose.foundation.background
4+
import androidx.compose.foundation.layout.*
75
import androidx.compose.foundation.rememberScrollState
86
import androidx.compose.foundation.verticalScroll
97
import androidx.compose.material.Text
@@ -15,9 +13,9 @@ import androidx.compose.ui.text.font.FontWeight
1513
import androidx.compose.ui.unit.DpSize
1614
import androidx.compose.ui.unit.dp
1715
import androidx.compose.ui.unit.sp
18-
import com.smarttoolfactory.colorpicker.model.rememberGradientColor
16+
import com.smarttoolfactory.colorpicker.model.BrushColor
17+
import com.smarttoolfactory.colorpicker.model.rememberGradientColorState
1918
import com.smarttoolfactory.colorpicker.selector.SelectorDiamondSaturationLightnessHSL
20-
import com.smarttoolfactory.colorpicker.selector.gradient.BrushDisplay
2119
import com.smarttoolfactory.colorpicker.selector.gradient.GradientSelector
2220
import com.smarttoolfactory.colorpicker.slider.SliderCircleColorDisplayHueHSL
2321
import com.smarttoolfactory.colorpicker.ui.Blue400
@@ -73,27 +71,30 @@ fun GradientSelectionDemo() {
7371
fontWeight = FontWeight.Bold
7472
)
7573

74+
val size = DpSize(150.dp, 100.dp)
75+
val gradientColor = rememberGradientColorState(size = size)
76+
var brushColor by remember { mutableStateOf(gradientColor.brushColor) }
77+
78+
Box(
79+
modifier = Modifier
80+
.size(size)
81+
.background(brushColor.activeBrush)
82+
)
83+
84+
Spacer(modifier = Modifier.height(10.dp))
7685
Column(
7786
modifier = Modifier
7887
.fillMaxSize()
7988
.verticalScroll(rememberScrollState()),
8089
horizontalAlignment = Alignment.CenterHorizontally
8190
) {
82-
val size = DpSize(150.dp, 100.dp)
83-
val gradientColor = rememberGradientColor(size)
84-
85-
// Box(
86-
// modifier = Modifier
87-
// .size(size)
88-
// .drawChecker(RoundedCornerShape(20))
89-
// .background(gradientColor.brushColor.activeBrush),
90-
// )
91-
BrushDisplay(gradientColor = gradientColor)
9291
GradientSelector(
9392
modifier = Modifier.padding(horizontal = 8.dp),
9493
color = currentColor,
95-
gradientColor = gradientColor
96-
)
94+
gradientColorState = gradientColor
95+
) {
96+
brushColor = BrushColor(brush = it)
97+
}
9798
}
9899
}
99100
}

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

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
package com.smarttoolfactory.colorpicker.dialog
2+
3+
import androidx.compose.foundation.background
4+
import androidx.compose.foundation.layout.Column
5+
import androidx.compose.foundation.layout.fillMaxWidth
6+
import androidx.compose.foundation.layout.padding
7+
import androidx.compose.foundation.shape.RoundedCornerShape
8+
import androidx.compose.material.FloatingActionButton
9+
import androidx.compose.material.Icon
10+
import androidx.compose.material.icons.Icons
11+
import androidx.compose.material.icons.filled.Close
12+
import androidx.compose.runtime.*
13+
import androidx.compose.ui.Alignment
14+
import androidx.compose.ui.Modifier
15+
import androidx.compose.ui.graphics.Color
16+
import androidx.compose.ui.unit.Dp
17+
import androidx.compose.ui.unit.dp
18+
import androidx.compose.ui.window.Dialog
19+
import com.smarttoolfactory.colorpicker.model.BrushColor
20+
import com.smarttoolfactory.colorpicker.model.GradientColorState
21+
import com.smarttoolfactory.colorpicker.model.rememberGradientColorState
22+
import com.smarttoolfactory.colorpicker.picker.gradient.ColorPickerRingDiamondGradientHSL
23+
import com.smarttoolfactory.colorpicker.ui.Blue400
24+
25+
@Composable
26+
fun ColorPickerRingDiamondGradientHSLDialog(
27+
initialBrushColor: BrushColor,
28+
gradientColorState: GradientColorState= rememberGradientColorState(),
29+
ringOuterRadiusFraction: Float = .9f,
30+
ringInnerRadiusFraction: Float = .6f,
31+
ringBackgroundColor: Color = Color.Transparent,
32+
ringBorderStrokeColor: Color = Color.Black,
33+
ringBorderStrokeWidth: Dp = 4.dp,
34+
selectionRadius: Dp = 8.dp,
35+
onDismiss: (BrushColor) -> Unit
36+
) {
37+
38+
var brushColor by remember(initialBrushColor) {
39+
mutableStateOf(BrushColor(color = initialBrushColor.color.copy()))
40+
}
41+
42+
Dialog(
43+
onDismissRequest = {
44+
onDismiss(brushColor)
45+
}
46+
) {
47+
Column(horizontalAlignment = Alignment.CenterHorizontally) {
48+
49+
ColorPickerRingDiamondGradientHSL(
50+
modifier = Modifier
51+
.fillMaxWidth()
52+
.weight(1f)
53+
.background(Color(0xcc212121), shape = RoundedCornerShape(5.dp))
54+
.padding(horizontal = 10.dp, vertical = 2.dp),
55+
initialColor = brushColor.color,
56+
gradientColorState = gradientColorState,
57+
ringOuterRadiusFraction = ringOuterRadiusFraction,
58+
ringInnerRadiusFraction = ringInnerRadiusFraction,
59+
ringBackgroundColor = ringBackgroundColor,
60+
ringBorderStrokeColor = ringBorderStrokeColor,
61+
ringBorderStrokeWidth = ringBorderStrokeWidth,
62+
selectionRadius = selectionRadius
63+
) {
64+
brushColor = it
65+
}
66+
67+
FloatingActionButton(
68+
onClick = { onDismiss(brushColor) },
69+
backgroundColor = Color.Black
70+
) {
71+
Icon(
72+
imageVector = Icons.Filled.Close,
73+
contentDescription = null,
74+
tint = Blue400
75+
)
76+
}
77+
}
78+
}
79+
}

0 commit comments

Comments
 (0)