Skip to content

Commit b683133

Browse files
kavi707kavi707
authored
Merge pull request #5 from KvColorPalette/feature/ui-enhancements
Feature/UI enhancements
2 parents e6cc156 + ee1803a commit b683133

File tree

8 files changed

+130
-83
lines changed

8 files changed

+130
-83
lines changed

‎README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,13 +23,13 @@ Add the following dependency to your `build.gradle` / `build.gradle.kts` file:
2323
For Groovy - `build.gradle`:
2424
````
2525
dependencies {
26-
implementation 'com.github.KvColorPalette:KvColorPicker-Android:0.0.2'
26+
implementation 'com.github.KvColorPalette:KvColorPicker-Android:1.0.0'
2727
}
2828
````
2929
For Kotlin DSL - `build.gradle.kts`:
3030
````
3131
dependencies {
32-
implementation("com.github.KvColorPalette:KvColorPicker-Android:0.0.2")
32+
implementation("com.github.KvColorPalette:KvColorPicker-Android:1.0.0")
3333
}
3434
````
3535

‎kv-color-picker/gradle.properties‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
kvColorPaletteGroupId=com.github.KvColorPalette
22
kvColorPickerArtifactId=KvColorPicker-Android
3-
kvColorPickerVersion=0.0.2
3+
kvColorPickerVersion=1.0.0

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

Lines changed: 80 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,22 @@
11
package com.kavi.droid.color.picker.ui
22

3+
import androidx.compose.foundation.background
4+
import androidx.compose.foundation.border
35
import androidx.compose.foundation.layout.Column
46
import androidx.compose.foundation.layout.Row
57
import androidx.compose.foundation.layout.fillMaxWidth
68
import androidx.compose.foundation.layout.padding
79
import androidx.compose.foundation.shape.RoundedCornerShape
810
import androidx.compose.material3.Button
911
import androidx.compose.material3.ExperimentalMaterial3Api
12+
import androidx.compose.material3.MaterialTheme
1013
import androidx.compose.material3.ModalBottomSheet
1114
import androidx.compose.material3.OutlinedButton
1215
import androidx.compose.material3.SheetState
1316
import androidx.compose.material3.Tab
1417
import androidx.compose.material3.TabRow
18+
import androidx.compose.material3.TabRowDefaults
19+
import androidx.compose.material3.TabRowDefaults.tabIndicatorOffset
1520
import androidx.compose.material3.Text
1621
import androidx.compose.runtime.Composable
1722
import androidx.compose.runtime.MutableState
@@ -21,10 +26,16 @@ import androidx.compose.runtime.mutableStateOf
2126
import androidx.compose.runtime.remember
2227
import androidx.compose.runtime.setValue
2328
import androidx.compose.ui.Modifier
29+
import androidx.compose.ui.draw.shadow
2430
import androidx.compose.ui.graphics.Color
31+
import androidx.compose.ui.res.stringResource
32+
import androidx.compose.ui.text.input.TextFieldValue
2533
import androidx.compose.ui.text.style.TextAlign
2634
import androidx.compose.ui.unit.dp
2735
import androidx.compose.ui.unit.sp
36+
import com.kavi.droid.color.palette.util.ColorUtil
37+
import com.kavi.droid.color.picker.R
38+
import com.kavi.droid.color.picker.ui.common.SelectedColorDetail
2839
import com.kavi.droid.color.picker.ui.pickers.GridColorPicker
2940
import com.kavi.droid.color.picker.ui.pickers.RGBAColorPicker
3041

@@ -44,34 +55,57 @@ import com.kavi.droid.color.picker.ui.pickers.RGBAColorPicker
4455
@OptIn(ExperimentalMaterial3Api::class)
4556
@Composable
4657
fun KvColorPickerBottomSheet(showSheet: MutableState<Boolean>, sheetState: SheetState, onColorSelected: (selectedColor: Color) -> Unit) {
47-
ModalBottomSheet(
58+
ModalBottomSheet (
4859
onDismissRequest = {
4960
showSheet.value = false
5061
},
5162
sheetState = sheetState,
63+
containerColor = MaterialTheme.colorScheme.background
5264
) {
5365
Column {
5466
var selectedColor by remember { mutableStateOf(Color.Black) }
67+
val colorHex = remember { mutableStateOf(TextFieldValue("#000000")) }
5568
var tabIndex by remember { mutableIntStateOf(0) }
56-
val tabs = listOf("RGB-A", "GRID")
69+
val tabs = listOf(
70+
stringResource(R.string.label_rgba),
71+
stringResource(R.string.label_grid)
72+
)
5773

5874
Text(
59-
text ="Pick you color",
75+
text = stringResource(R.string.title_pick_color),
6076
textAlign = TextAlign.Start,
6177
modifier = Modifier
62-
.fillMaxWidth().padding(start = 16.dp, end = 16.dp),
63-
fontSize = 32.sp
78+
.fillMaxWidth()
79+
.padding(start = 16.dp, end = 16.dp),
80+
fontSize = 36.sp
6481
)
6582

6683
TabRow(
6784
modifier = Modifier.padding(start = 12.dp, end = 12.dp, top = 8.dp),
68-
selectedTabIndex = tabIndex
85+
selectedTabIndex = tabIndex,
86+
containerColor = Color.Transparent,
87+
indicator = { tabPositions ->
88+
TabRowDefaults.PrimaryIndicator(
89+
modifier = Modifier
90+
.tabIndicatorOffset(tabPositions[tabIndex]),
91+
color = MaterialTheme.colorScheme.secondary,
92+
width = 150.dp
93+
)
94+
}
6995
) {
7096
tabs.forEachIndexed { index, title ->
7197
Tab(
72-
text = { Text(title) },
98+
text = {
99+
Text(
100+
text = title,
101+
color = MaterialTheme.colorScheme.secondary,
102+
style = MaterialTheme.typography.bodySmall,
103+
fontSize = 12.sp
104+
)
105+
},
73106
selected = tabIndex == index,
74-
onClick = { tabIndex = index }
107+
onClick = { tabIndex = index },
108+
selectedContentColor = MaterialTheme.colorScheme.secondary,
75109
)
76110
}
77111
}
@@ -80,44 +114,60 @@ fun KvColorPickerBottomSheet(showSheet: MutableState<Boolean>, sheetState: Sheet
80114
modifier = Modifier.padding(16.dp),
81115
onColorSelected = {
82116
selectedColor = it
117+
colorHex.value = TextFieldValue(ColorUtil.getHex(it))
83118
}
84119
)
85120
1 -> GridColorPicker(
86121
modifier = Modifier.padding(16.dp),
87122
onColorSelected = {
88123
selectedColor = it
124+
colorHex.value = TextFieldValue(ColorUtil.getHex(it))
89125
}
90126
)
91127
}
92128

93-
Row (
129+
Column (
94130
modifier = Modifier
95-
.fillMaxWidth()
96-
.padding(start = 16.dp, end = 16.dp, bottom = 4.dp),
131+
.padding(start = 16.dp, end = 16.dp, bottom = 12.dp)
132+
.border(1.dp, Color.White, shape = RoundedCornerShape(8.dp))
133+
.shadow(
134+
elevation = 10.dp,
135+
shape = RoundedCornerShape(8.dp)
136+
)
137+
.background(color = MaterialTheme.colorScheme.background)
138+
.padding(start = 12.dp, end = 12.dp)
97139
) {
98-
OutlinedButton (
140+
SelectedColorDetail(color = selectedColor, colorHex = colorHex)
141+
142+
Row (
99143
modifier = Modifier
100-
.padding(start = 4.dp, end = 4.dp)
101-
.weight(1f),
102-
shape = RoundedCornerShape(8.dp),
103-
onClick = {
104-
showSheet.value = false
105-
}
144+
.fillMaxWidth()
145+
.padding(bottom = 12.dp),
106146
) {
107-
Text("Close")
108-
}
147+
OutlinedButton (
148+
modifier = Modifier
149+
.padding(start = 4.dp, end = 4.dp)
150+
.weight(1f),
151+
shape = RoundedCornerShape(8.dp),
152+
onClick = {
153+
showSheet.value = false
154+
}
155+
) {
156+
Text(text = stringResource(R.string.label_close), color = MaterialTheme.colorScheme.secondary)
157+
}
109158

110-
Button(
111-
modifier = Modifier
112-
.padding(start = 4.dp, end = 4.dp)
113-
.weight(1f),
114-
shape = RoundedCornerShape(8.dp),
115-
onClick = {
116-
showSheet.value = false
117-
onColorSelected.invoke(selectedColor)
159+
Button(
160+
modifier = Modifier
161+
.padding(start = 4.dp, end = 4.dp)
162+
.weight(1f),
163+
shape = RoundedCornerShape(8.dp),
164+
onClick = {
165+
showSheet.value = false
166+
onColorSelected.invoke(selectedColor)
167+
}
168+
) {
169+
Text(text = stringResource(R.string.label_select), color = MaterialTheme.colorScheme.onPrimary)
118170
}
119-
) {
120-
Text("Select")
121171
}
122172
}
123173
}

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

Lines changed: 20 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import androidx.compose.foundation.layout.height
1313
import androidx.compose.foundation.layout.padding
1414
import androidx.compose.foundation.layout.width
1515
import androidx.compose.foundation.shape.RoundedCornerShape
16-
import androidx.compose.material3.Button
16+
import androidx.compose.material3.Icon
1717
import androidx.compose.material3.MaterialTheme
1818
import androidx.compose.material3.OutlinedTextField
1919
import androidx.compose.material3.Slider
@@ -30,12 +30,15 @@ import androidx.compose.ui.Modifier
3030
import androidx.compose.ui.graphics.Color
3131
import androidx.compose.ui.graphics.RectangleShape
3232
import androidx.compose.ui.platform.LocalClipboardManager
33+
import androidx.compose.ui.res.painterResource
34+
import androidx.compose.ui.res.stringResource
3335
import androidx.compose.ui.text.input.TextFieldValue
3436
import androidx.compose.ui.text.style.TextAlign
3537
import androidx.compose.ui.unit.dp
3638
import com.kavi.droid.color.palette.KvColorPalette
3739
import com.kavi.droid.color.palette.model.KvColor
3840
import com.kavi.droid.color.palette.util.ColorUtil
41+
import com.kavi.droid.color.picker.R
3942
import com.kavi.droid.color.picker.extension.toColorInt
4043

4144
/**
@@ -141,7 +144,9 @@ internal fun SelectedColorDetail(color: Color, colorHex: MutableState<TextFieldV
141144
// Retrieve a ClipboardManager object
142145
val clipboardManager = LocalClipboardManager.current
143146

144-
Row {
147+
Row (
148+
modifier = Modifier.background(MaterialTheme.colorScheme.background)
149+
) {
145150
// Display the current color in a Box with a MaterialTheme shape
146151
Column (
147152
verticalArrangement = Arrangement.Center
@@ -163,39 +168,36 @@ internal fun SelectedColorDetail(color: Color, colorHex: MutableState<TextFieldV
163168
verticalArrangement = Arrangement.spacedBy(5.dp)
164169
) {
165170
Text(
166-
text = "Some Text Detail description",
171+
text = stringResource(R.string.phrase_selected_color),
167172
modifier = Modifier
168173
.fillMaxWidth(),
169174
textAlign = TextAlign.Start,
170175
style = MaterialTheme.typography.bodyMedium,
171-
color = Color.Black
172176
)
173177

174178
Row {
175179
OutlinedTextField(
176180
modifier = Modifier
177181
.padding(2.dp)
178-
.weight(.6f),
182+
.weight(.8f),
179183
value = colorHex.value,
180184
maxLines = 1,
181-
label = { Text(text = "Color Hex") },
185+
label = { Text(text = stringResource(R.string.label_color_hex)) },
182186
onValueChange = { newColorHex ->
183187
colorHex.value = newColorHex
184188
}
185189
)
186-
187-
Button(
190+
Icon(
191+
painter = painterResource(R.drawable.icon_copy),
192+
contentDescription = "copy icon",
188193
modifier = Modifier
189-
.padding(start = 8.dp, end = 8.dp, top = 10.dp)
190-
.height(55.dp)
191-
.weight(.4f),
192-
shape = RoundedCornerShape(8.dp),
193-
onClick = {
194-
clipboardManager.setText(colorHex.value.annotatedString)
195-
}
196-
) {
197-
Text(text = "Copy")
198-
}
194+
.width(45.dp)
195+
.height(45.dp)
196+
.padding(8.dp)
197+
.clickable {
198+
clipboardManager.setText(colorHex.value.annotatedString)
199+
}
200+
)
199201
}
200202
}
201203
}

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

Lines changed: 3 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -20,14 +20,15 @@ import androidx.compose.ui.Alignment
2020
import androidx.compose.ui.Modifier
2121
import androidx.compose.ui.draw.shadow
2222
import androidx.compose.ui.graphics.Color
23+
import androidx.compose.ui.res.stringResource
2324
import androidx.compose.ui.text.input.TextFieldValue
2425
import androidx.compose.ui.text.style.TextAlign
2526
import androidx.compose.ui.unit.dp
2627
import androidx.compose.ui.unit.sp
2728
import com.kavi.droid.color.palette.color.MatPackage
2829
import com.kavi.droid.color.palette.util.ColorUtil
30+
import com.kavi.droid.color.picker.R
2931
import com.kavi.droid.color.picker.ui.common.ColorColum
30-
import com.kavi.droid.color.picker.ui.common.SelectedColorDetail
3132

3233
/**
3334
* A composable function that creates a grid grid to select colors. This color grid is created with
@@ -66,7 +67,7 @@ fun GridColorPicker(modifier: Modifier = Modifier, onColorSelected: (selectedCol
6667
.padding(start = 12.dp, end = 12.dp, top = 12.dp, bottom = 8.dp)
6768
) {
6869
Text(
69-
text = "By selecting color from the grid below, you can pick your color.",
70+
text = stringResource(R.string.phrase_select_color_grid),
7071
textAlign = TextAlign.Start,
7172
modifier = Modifier
7273
.fillMaxWidth().padding(start = 12.dp, end = 12.dp, top = 12.dp),
@@ -159,18 +160,5 @@ fun GridColorPicker(modifier: Modifier = Modifier, onColorSelected: (selectedCol
159160
)
160161
}
161162
}
162-
163-
Column(
164-
modifier = Modifier
165-
.border(1.dp, Color.White, shape = RoundedCornerShape(8.dp))
166-
.shadow(
167-
elevation = 10.dp,
168-
shape = RoundedCornerShape(8.dp)
169-
)
170-
.background(Color.White)
171-
.padding(start = 12.dp, end = 12.dp)
172-
) {
173-
SelectedColorDetail(color = selectedColor, colorHex = colorHex)
174-
}
175163
}
176164
}

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

Lines changed: 3 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -21,15 +21,15 @@ import androidx.compose.runtime.saveable.rememberSaveable
2121
import androidx.compose.ui.Modifier
2222
import androidx.compose.ui.draw.shadow
2323
import androidx.compose.ui.graphics.Color
24+
import androidx.compose.ui.res.stringResource
2425
import androidx.compose.ui.text.input.TextFieldValue
2526
import androidx.compose.ui.text.style.TextAlign
26-
import androidx.compose.ui.tooling.preview.Preview
2727
import androidx.compose.ui.unit.dp
2828
import androidx.compose.ui.unit.sp
2929
import com.kavi.droid.color.palette.util.ColorUtil
30+
import com.kavi.droid.color.picker.R
3031
import com.kavi.droid.color.picker.ui.common.AlphaSlider
3132
import com.kavi.droid.color.picker.ui.common.ColorSlider
32-
import com.kavi.droid.color.picker.ui.common.SelectedColorDetail
3333

3434
/**
3535
* A composable function that creates a color picker UI for selecting RGB-A colors. This component
@@ -76,8 +76,7 @@ fun RGBAColorPicker(modifier: Modifier = Modifier, onColorSelected: (selectedCol
7676
.padding(start = 12.dp, end = 12.dp, top = 12.dp, bottom = 12.dp)
7777
) {
7878
Text(
79-
text ="By dragging \'RED\', \'GREEN\', and \'BLUE\' bars below, you can select " +
80-
"or generate your color you want exactly.",
79+
text = stringResource(R.string.phrase_select_color_rgba),
8180
textAlign = TextAlign.Start,
8281
modifier = Modifier
8382
.fillMaxWidth().padding(start = 12.dp, end = 12.dp, top = 12.dp),
@@ -101,18 +100,5 @@ fun RGBAColorPicker(modifier: Modifier = Modifier, onColorSelected: (selectedCol
101100
}
102101
}
103102
}
104-
105-
Column (
106-
modifier = Modifier
107-
.border(1.dp, Color.White, shape = RoundedCornerShape(8.dp))
108-
.shadow(
109-
elevation = 10.dp,
110-
shape = RoundedCornerShape(8.dp)
111-
)
112-
.background(Color.White)
113-
.padding(start = 12.dp, end = 12.dp)
114-
) {
115-
SelectedColorDetail(color = color, colorHex = colorHex)
116-
}
117103
}
118104
}

0 commit comments

Comments
 (0)