Skip to content

Commit e63903b

Browse files
EmogurovAntonEmogurovAnton
committed
feature: konfeature screen redesign
1 parent 8961d42 commit e63903b

9 files changed

Lines changed: 469 additions & 177 deletions

File tree

‎panel-ui-kit/src/main/kotlin/com/redmadrobot/debug/uikit/components/PanelSearchBar.kt‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
package com.redmadrobot.debug.uikit.components
2+
3+
import androidx.compose.animation.core.animateDpAsState
4+
import androidx.compose.foundation.background
5+
import androidx.compose.foundation.layout.Row
6+
import androidx.compose.foundation.layout.fillMaxWidth
7+
import androidx.compose.foundation.layout.heightIn
8+
import androidx.compose.foundation.layout.padding
9+
import androidx.compose.foundation.layout.size
10+
import androidx.compose.foundation.text.BasicTextField
11+
import androidx.compose.material3.Icon
12+
import androidx.compose.material3.IconButton
13+
import androidx.compose.material3.Text
14+
import androidx.compose.runtime.Composable
15+
import androidx.compose.runtime.getValue
16+
import androidx.compose.ui.Alignment
17+
import androidx.compose.ui.Modifier
18+
import androidx.compose.ui.graphics.SolidColor
19+
import androidx.compose.ui.res.painterResource
20+
import androidx.compose.ui.unit.dp
21+
import com.redmadrobot.debug.uikit.R
22+
import com.redmadrobot.debug.uikit.theme.DebugPanelDimensions
23+
import com.redmadrobot.debug.uikit.theme.DebugPanelShapes
24+
import com.redmadrobot.debug.uikit.theme.DebugPanelTheme
25+
import com.redmadrobot.debug.uikit.theme.MonoFontFamily
26+
27+
@Suppress("LongMethod")
28+
@Composable
29+
public fun PanelSearchBar(
30+
query: String,
31+
placeholder: String,
32+
onQueryChange: (String) -> Unit,
33+
modifier: Modifier = Modifier,
34+
) {
35+
val minHeight by animateDpAsState(
36+
targetValue = if (query.isNotEmpty()) 48.dp else 40.dp,
37+
label = "",
38+
)
39+
40+
Row(
41+
modifier = modifier
42+
.fillMaxWidth()
43+
.heightIn(min = minHeight)
44+
.background(
45+
color = DebugPanelTheme.colors.surface.secondary,
46+
shape = DebugPanelShapes.medium,
47+
)
48+
.padding(horizontal = 12.dp, vertical = 8.dp),
49+
verticalAlignment = Alignment.CenterVertically,
50+
) {
51+
Icon(
52+
painter = painterResource(R.drawable.icon_search),
53+
contentDescription = null,
54+
tint = DebugPanelTheme.colors.content.tertiary,
55+
modifier = Modifier.size(size = DebugPanelDimensions.iconSizeSmall),
56+
)
57+
BasicTextField(
58+
value = query,
59+
onValueChange = onQueryChange,
60+
modifier = Modifier
61+
.weight(weight = 1f)
62+
.padding(horizontal = 8.dp),
63+
textStyle = DebugPanelTheme.typography.bodyMedium.copy(
64+
fontFamily = MonoFontFamily,
65+
color = DebugPanelTheme.colors.content.primary,
66+
),
67+
singleLine = true,
68+
cursorBrush = SolidColor(value = DebugPanelTheme.colors.content.accent),
69+
decorationBox = { innerTextField ->
70+
if (query.isEmpty()) {
71+
Text(
72+
text = placeholder,
73+
style = DebugPanelTheme.typography.bodyMedium,
74+
color = DebugPanelTheme.colors.content.tertiary,
75+
)
76+
}
77+
innerTextField()
78+
},
79+
)
80+
if (query.isNotEmpty()) {
81+
IconButton(
82+
onClick = { onQueryChange("") },
83+
modifier = Modifier.size(size = DebugPanelDimensions.iconSizeLarge),
84+
) {
85+
Icon(
86+
painter = painterResource(R.drawable.icon_clear),
87+
contentDescription = null,
88+
tint = DebugPanelTheme.colors.content.tertiary,
89+
modifier = Modifier.size(size = DebugPanelDimensions.iconSizeSmall),
90+
)
91+
}
92+
}
93+
}
94+
}

panel-ui-kit/src/main/kotlin/com/redmadrobot/debug/uikit/components/PanelTextField.kt renamed to panel-ui-kit/src/main/kotlin/com/redmadrobot/debug/uikit/components/PanelStyledTextField.kt

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ private val defaultColors: TextFieldColors
3030
)
3131

3232
@Composable
33-
public fun PanelTextField(
33+
public fun PanelStyledTextField(
3434
value: String,
3535
label: String,
3636
onValueChange: (String) -> Unit,

‎panel-ui-kit/src/main/kotlin/com/redmadrobot/debug/uikit/components/PanelToggle.kt‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
package com.redmadrobot.debug.uikit.components
2+
3+
import androidx.compose.animation.animateColorAsState
4+
import androidx.compose.animation.core.animateDpAsState
5+
import androidx.compose.foundation.background
6+
import androidx.compose.foundation.clickable
7+
import androidx.compose.foundation.layout.Box
8+
import androidx.compose.foundation.layout.height
9+
import androidx.compose.foundation.layout.padding
10+
import androidx.compose.foundation.layout.size
11+
import androidx.compose.foundation.layout.width
12+
import androidx.compose.foundation.shape.CircleShape
13+
import androidx.compose.foundation.shape.RoundedCornerShape
14+
import androidx.compose.runtime.Composable
15+
import androidx.compose.runtime.getValue
16+
import androidx.compose.ui.Modifier
17+
import androidx.compose.ui.draw.clip
18+
import androidx.compose.ui.graphics.Color
19+
import androidx.compose.ui.unit.dp
20+
import com.redmadrobot.debug.uikit.theme.DebugPanelDimensions
21+
import com.redmadrobot.debug.uikit.theme.DebugPanelTheme
22+
23+
@Composable
24+
public fun PanelToggle(
25+
checked: Boolean,
26+
onCheckedChange: (Boolean) -> Unit,
27+
modifier: Modifier = Modifier,
28+
) {
29+
val (trackColor, thumbOffset) = with(DebugPanelTheme.colors) {
30+
if (checked) content.teal to 22.dp else stroke.primary to 2.dp
31+
}
32+
val animatedTrackColor by animateColorAsState(targetValue = trackColor, label = "")
33+
val animatedThumbOffset by animateDpAsState(targetValue = thumbOffset, label = "")
34+
35+
Box(
36+
modifier = modifier
37+
.width(width = DebugPanelDimensions.toggleWidth)
38+
.height(height = DebugPanelDimensions.toggleHeight)
39+
.clip(shape = RoundedCornerShape(size = 12.dp))
40+
.background(color = animatedTrackColor)
41+
.clickable { onCheckedChange(!checked) },
42+
) {
43+
Box(
44+
modifier = Modifier
45+
.padding(start = animatedThumbOffset, top = 2.dp)
46+
.size(size = 20.dp)
47+
.background(color = Color.White, shape = CircleShape),
48+
)
49+
}
50+
}

‎panel-ui-kit/src/main/res/drawable/icon_clear.xml‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<vector xmlns:android="http://schemas.android.com/apk/res/android"
2+
android:width="24dp"
3+
android:height="24dp"
4+
android:viewportWidth="24"
5+
android:viewportHeight="24"
6+
android:tint="?attr/colorControlNormal">
7+
<path
8+
android:fillColor="@android:color/white"
9+
android:pathData="M19,6.41L17.59,5 12,10.59 6.41,5 5,6.41 10.59,12 5,17.59 6.41,19 12,13.41 17.59,19 19,17.59 13.41,12z" />
10+
</vector>

‎panel-ui-kit/src/main/res/drawable/icon_search.xml‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<vector xmlns:android="http://schemas.android.com/apk/res/android"
2+
android:width="24dp"
3+
android:height="24dp"
4+
android:viewportWidth="24"
5+
android:viewportHeight="24"
6+
android:tint="?attr/colorControlNormal">
7+
<path
8+
android:fillColor="@android:color/white"
9+
android:pathData="M15.5,14h-0.79l-0.28,-0.27C15.41,12.59 16,11.11 16,9.5 16,5.91 13.09,3 9.5,3S3,5.91 3,9.5 5.91,16 9.5,16c1.61,0 3.09,-0.59 4.23,-1.57l0.27,0.28v0.79l5,4.99L20.49,19l-4.99,-5zM9.5,14C7.01,14 5,11.99 5,9.5S7.01,5 9.5,5 14,7.01 14,9.5 11.99,14 9.5,14z" />
10+
</vector>

‎plugins/plugin-konfeature/src/main/kotlin/com/redmadrobot/debug/plugin/konfeature/ui/EditConfigValueDialog.kt‎

Lines changed: 6 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,10 @@
11
package com.redmadrobot.debug.plugin.konfeature.ui
22

3-
import androidx.compose.foundation.background
4-
import androidx.compose.foundation.clickable
53
import androidx.compose.foundation.layout.Arrangement
6-
import androidx.compose.foundation.layout.Box
74
import androidx.compose.foundation.layout.Row
85
import androidx.compose.foundation.layout.Spacer
96
import androidx.compose.foundation.layout.fillMaxWidth
107
import androidx.compose.foundation.layout.height
11-
import androidx.compose.foundation.layout.padding
12-
import androidx.compose.foundation.layout.size
13-
import androidx.compose.foundation.layout.width
14-
import androidx.compose.foundation.shape.CircleShape
15-
import androidx.compose.foundation.shape.RoundedCornerShape
168
import androidx.compose.foundation.text.KeyboardOptions
179
import androidx.compose.material3.Button
1810
import androidx.compose.material3.ButtonDefaults
@@ -26,15 +18,14 @@ import androidx.compose.runtime.remember
2618
import androidx.compose.runtime.setValue
2719
import androidx.compose.ui.Alignment
2820
import androidx.compose.ui.Modifier
29-
import androidx.compose.ui.draw.clip
30-
import androidx.compose.ui.graphics.Color
3121
import androidx.compose.ui.res.stringResource
3222
import androidx.compose.ui.text.input.KeyboardType
3323
import androidx.compose.ui.unit.dp
3424
import com.redmadrobot.debug.plugin.konfeature.R
3525
import com.redmadrobot.debug.plugin.konfeature.ui.data.EditDialogState
3626
import com.redmadrobot.debug.uikit.components.PanelDialog
37-
import com.redmadrobot.debug.uikit.components.PanelTextField
27+
import com.redmadrobot.debug.uikit.components.PanelStyledTextField
28+
import com.redmadrobot.debug.uikit.components.PanelToggle
3829
import com.redmadrobot.debug.uikit.theme.DebugPanelShapes
3930
import com.redmadrobot.debug.uikit.theme.DebugPanelTheme
4031

@@ -199,7 +190,7 @@ private fun BooleanEditInput(
199190
color = DebugPanelTheme.colors.content.primary,
200191
modifier = Modifier.weight(weight = 1f),
201192
)
202-
EditConfigDialogToggle(
193+
PanelToggle(
203194
checked = checked,
204195
onCheckedChange = { newChecked ->
205196
checked = newChecked
@@ -218,7 +209,7 @@ private fun LongEditInput(
218209
) {
219210
var text by remember { mutableStateOf(value.toString()) }
220211

221-
PanelTextField(
212+
PanelStyledTextField(
222213
value = text,
223214
onValueChange = { newText ->
224215
val newValue = newText.toLongOrNull()
@@ -243,7 +234,7 @@ private fun DoubleEditInput(
243234
) {
244235
var text by remember { mutableStateOf(value.toBigDecimal().toPlainString()) }
245236

246-
PanelTextField(
237+
PanelStyledTextField(
247238
value = text,
248239
onValueChange = { newText ->
249240
val newValue = newText.toDoubleOrNull()
@@ -267,7 +258,7 @@ private fun StringEditInput(
267258
) {
268259
var text by remember { mutableStateOf(value) }
269260

270-
PanelTextField(
261+
PanelStyledTextField(
271262
value = text,
272263
onValueChange = { newText ->
273264
text = newText
@@ -277,30 +268,3 @@ private fun StringEditInput(
277268
modifier = modifier,
278269
)
279270
}
280-
281-
@Composable
282-
private fun EditConfigDialogToggle(
283-
checked: Boolean,
284-
onCheckedChange: (Boolean) -> Unit,
285-
modifier: Modifier = Modifier,
286-
) {
287-
val (trackColor, thumbOffset) = with(DebugPanelTheme.colors) {
288-
if (checked) content.teal to 22.dp else stroke.primary to 2.dp
289-
}
290-
291-
Box(
292-
modifier = modifier
293-
.width(width = 44.dp)
294-
.height(height = 24.dp)
295-
.clip(shape = RoundedCornerShape(size = 12.dp))
296-
.background(color = trackColor)
297-
.clickable { onCheckedChange(!checked) },
298-
) {
299-
Box(
300-
modifier = Modifier
301-
.padding(start = thumbOffset, top = 2.dp)
302-
.size(size = 20.dp)
303-
.background(color = Color.White, shape = CircleShape),
304-
)
305-
}
306-
}

0 commit comments

Comments
 (0)