Skip to content

Commit ecbbc64

Browse files
Бубляев Алексей ВячеславовичБубляев Алексей Вячеславович
Бубляев Алексей Вячеславович
authored and
Бубляев Алексей Вячеславович
committed
Pull request #21: Feature/flamingo 17
Merge in ~18384547/flamingo-android from feature/flamingo-17 to develop * commit '38b444a7f67ec0dd4f02fcfacbe0e11915f501ff': @fix Flamingo 0.0.11 [FLAMINGO-22] @task Fixed SocialGroup [FLAMINGO-21] @task Changed IconButton and added Playroom [FLAMINGO-17]
2 parents 8f21d1f + 38b444a commit ecbbc64

File tree

5 files changed

+276
-16
lines changed

5 files changed

+276
-16
lines changed

‎flamingo-playground/src/main/java/com/flamingo/playground/components/iconbutton/IconButtonComposeStatesPlayroom.kt‎

Lines changed: 167 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,167 @@
1+
package com.flamingo.playground.components.iconbutton
2+
3+
import android.os.Bundle
4+
import android.view.View
5+
import androidx.compose.runtime.getValue
6+
import androidx.compose.runtime.mutableStateOf
7+
import androidx.compose.runtime.setValue
8+
import androidx.preference.DropDownPreference
9+
import androidx.preference.PreferenceFragmentCompat
10+
import androidx.preference.SwitchPreferenceCompat
11+
import com.flamingo.Flamingo
12+
import com.flamingo.components.IconButton
13+
import com.flamingo.components.IconButtonColor
14+
import com.flamingo.components.IconButtonIndicator
15+
import com.flamingo.components.IconButtonShape
16+
import com.flamingo.components.IconButtonSize
17+
import com.flamingo.components.IconButtonVariant
18+
import com.flamingo.components.IndicatorColor
19+
import com.flamingo.components.IndicatorPlacement
20+
import com.flamingo.demoapi.DemoPreference
21+
import com.flamingo.demoapi.StatesPlayroomDemo
22+
import com.flamingo.demoapi.configurePreference
23+
import com.flamingo.demoapi.findPreference
24+
import com.flamingo.demoapi.initPref
25+
import com.flamingo.demoapi.onChange
26+
import com.flamingo.demoapi.tintIcons
27+
import com.flamingo.playground.R
28+
import com.flamingo.playground.boast
29+
30+
@StatesPlayroomDemo
31+
class IconButtonComposeStatesPlayroom : PreferenceFragmentCompat() {
32+
override fun onCreatePreferences(savedInstanceState: Bundle?, rootKey: String?) {
33+
setPreferencesFromResource(R.xml.states_playroom_icon_button_compose, rootKey)
34+
preferenceScreen.tintIcons()
35+
}
36+
37+
@Suppress("LongMethod")
38+
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
39+
super.onViewCreated(view, savedInstanceState)
40+
41+
var icon by mutableStateOf(Flamingo.icons.Aperture)
42+
var size by mutableStateOf(IconButtonSize.MEDIUM)
43+
var variant by mutableStateOf(IconButtonVariant.CONTAINED)
44+
var color by mutableStateOf(IconButtonColor.DEFAULT)
45+
var shape by mutableStateOf(IconButtonShape.CIRCLE)
46+
var indicator by mutableStateOf(false)
47+
var loading by mutableStateOf(false)
48+
var disabled by mutableStateOf(false)
49+
var indicatorColor by mutableStateOf(IndicatorColor.DEFAULT)
50+
var indicatorPlacement by mutableStateOf(IndicatorPlacement.TopEnd)
51+
52+
findPreference<DemoPreference>("component")?.setComposeDesignComponent {
53+
IconButton(
54+
onClick = boast("Click"),
55+
icon = icon,
56+
contentDescription = null,
57+
size = size,
58+
variant = variant,
59+
color = color,
60+
shape = shape,
61+
indicator = if (indicator) IconButtonIndicator(
62+
indicatorColor,
63+
indicatorPlacement
64+
) else null,
65+
loading = loading,
66+
disabled = disabled,
67+
)
68+
}
69+
70+
configurePreference<SwitchPreferenceCompat>("loading") {
71+
onChange { loading = it as? Boolean ?: return@onChange false; true }
72+
initPref(savedInstanceState, defVal = false)
73+
}
74+
75+
configurePreference<DropDownPreference>("size") {
76+
val sizes = IconButtonSize.values().map { it.name }.toTypedArray()
77+
entries = sizes
78+
entryValues = sizes
79+
onChange { size = IconButtonSize.valueOf(it); true }
80+
initPref(savedInstanceState, defVal = IconButtonSize.MEDIUM)
81+
}
82+
83+
configurePreference<DropDownPreference>("color") {
84+
val colors = IconButtonColor.values().map { it.name }.toTypedArray()
85+
entries = colors
86+
entryValues = colors
87+
onChange {
88+
color = IconButtonColor.valueOf(it); true
89+
}
90+
initPref(savedInstanceState, defVal = IconButtonColor.DEFAULT)
91+
}
92+
93+
configurePreference<DropDownPreference>("variant") {
94+
val variants = IconButtonVariant.values().map { it.name }.toTypedArray()
95+
entries = variants
96+
entryValues = variants
97+
onChange {
98+
variant = IconButtonVariant.valueOf(it); true
99+
}
100+
initPref(savedInstanceState, defVal = IconButtonVariant.CONTAINED)
101+
}
102+
103+
configurePreference<DropDownPreference>("shape") {
104+
val shapes = IconButtonShape.values().map { it.name }.toTypedArray()
105+
entries = shapes
106+
entryValues = shapes
107+
onChange {
108+
shape = IconButtonShape.valueOf(it); true
109+
}
110+
initPref(savedInstanceState, defVal = IconButtonShape.CIRCLE)
111+
}
112+
113+
configurePreference<DropDownPreference>("icon") {
114+
entries = arrayOf(
115+
"Airplay",
116+
"Bell",
117+
"Aperture",
118+
)
119+
entryValues = arrayOf(
120+
Flamingo.icons.Airplay.getName(context),
121+
Flamingo.icons.Bell.getName(context),
122+
Flamingo.icons.Aperture.getName(context),
123+
)
124+
onChange {
125+
icon = it.let { Flamingo.icons.fromName(context, it) }
126+
true
127+
}
128+
initPref(savedInstanceState, defVal = Flamingo.icons.Airplay.getName(context))
129+
}
130+
131+
configurePreference<SwitchPreferenceCompat>("disabled") {
132+
onChange { disabled = it as? Boolean ?: return@onChange false; true }
133+
initPref(savedInstanceState, defVal = false)
134+
}
135+
136+
configurePreference<SwitchPreferenceCompat>("indicator") {
137+
onChange {
138+
indicator = it as? Boolean ?: return@onChange false
139+
findPreference("indicatorColor").isVisible = indicator
140+
findPreference("indicatorPlacement").isVisible = indicator
141+
142+
true
143+
}
144+
initPref(savedInstanceState, defVal = false)
145+
}
146+
147+
configurePreference<DropDownPreference>("indicatorColor") {
148+
val colors = IndicatorColor.values().map { it.name }.toTypedArray()
149+
entries = colors
150+
entryValues = colors
151+
onChange {
152+
indicatorColor = IndicatorColor.valueOf(it); true
153+
}
154+
initPref(savedInstanceState, defVal = IndicatorColor.DEFAULT)
155+
}
156+
157+
configurePreference<DropDownPreference>("indicatorPlacement") {
158+
val placement = IndicatorPlacement.values().map { it.name }.toTypedArray()
159+
entries = placement
160+
entryValues = placement
161+
onChange {
162+
indicatorPlacement = IndicatorPlacement.valueOf(it); true
163+
}
164+
initPref(savedInstanceState, defVal = IndicatorPlacement.TopEnd)
165+
}
166+
}
167+
}

‎flamingo-playground/src/main/res/xml/states_playroom_icon_button_compose.xml‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<PreferenceScreen xmlns:app="http://schemas.android.com/apk/res-auto">
2+
3+
<com.flamingo.demoapi.DemoPreference app:key="component" />
4+
5+
<SwitchPreferenceCompat
6+
app:iconSpaceReserved="false"
7+
app:key="loading"
8+
app:persistent="false"
9+
app:title="Loading" />
10+
11+
<DropDownPreference
12+
app:iconSpaceReserved="false"
13+
app:key="size"
14+
app:persistent="false"
15+
app:summary="%s"
16+
app:title="Size" />
17+
18+
<DropDownPreference
19+
app:iconSpaceReserved="false"
20+
app:key="color"
21+
app:persistent="false"
22+
app:summary="%s"
23+
app:title="Color" />
24+
25+
<DropDownPreference
26+
app:iconSpaceReserved="false"
27+
app:key="variant"
28+
app:persistent="false"
29+
app:summary="%s"
30+
app:title="Variant" />
31+
32+
<DropDownPreference
33+
app:iconSpaceReserved="false"
34+
app:key="shape"
35+
app:persistent="false"
36+
app:summary="%s"
37+
app:title="Shape" />
38+
39+
<DropDownPreference
40+
app:iconSpaceReserved="false"
41+
app:key="icon"
42+
app:persistent="false"
43+
app:summary="%s"
44+
app:title="Icon" />
45+
46+
<SwitchPreferenceCompat
47+
app:iconSpaceReserved="false"
48+
app:key="disabled"
49+
app:persistent="false"
50+
app:title="Disabled" />
51+
52+
<SwitchPreferenceCompat
53+
app:iconSpaceReserved="false"
54+
app:key="indicator"
55+
app:persistent="false"
56+
app:title="Indicator" />
57+
58+
<DropDownPreference
59+
app:iconSpaceReserved="false"
60+
app:key="indicatorColor"
61+
app:persistent="false"
62+
app:summary="%s"
63+
app:title="Indicator color" />
64+
65+
<DropDownPreference
66+
app:iconSpaceReserved="false"
67+
app:key="indicatorPlacement"
68+
app:persistent="false"
69+
app:summary="%s"
70+
app:title="Indicator placement" />
71+
72+
</PreferenceScreen>

‎flamingo/src/main/java/com/flamingo/components/IconButton.kt‎

Lines changed: 35 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ import com.flamingo.theme.FlamingoRippleTheme
7777
figma = "https://f.com/file/qVO8jDuABDK9vsuLqRXeMx/UI-kit?node-id=628%3A5",
7878
specification = "https://confluence.companyname.ru/x/iREnKQE",
7979
viewImplementation = "com.flamingo.view.components.IconButton",
80-
demo = [],
80+
demo = ["com.flamingo.playground.components.iconbutton.IconButtonComposeStatesPlayroom"],
8181
supportsWhiteMode = true,
8282
)
8383
@UsedInsteadOf("androidx.compose.material.IconButton", "androidx.compose.material.IconToggleButton")
@@ -88,6 +88,7 @@ public fun IconButton(
8888
size: IconButtonSize = IconButtonSize.MEDIUM,
8989
variant: IconButtonVariant = CONTAINED,
9090
color: IconButtonColor = if (Flamingo.isWhiteMode) WHITE else DEFAULT,
91+
shape: IconButtonShape = IconButtonShape.CIRCLE,
9192
indicator: IconButtonIndicator? = null,
9293
loading: Boolean = false,
9394
disabled: Boolean = false,
@@ -107,23 +108,34 @@ public fun IconButton(
107108
val indicatorSize = when (size) {
108109
IconButtonSize.SMALL -> IndicatorSize.SMALL
109110
IconButtonSize.MEDIUM -> IndicatorSize.BIG
111+
IconButtonSize.LARGE -> IndicatorSize.BIG
110112
}
111113
val cutoutRadius = if (indicator != null) indicatorSize.withoutIcon / 2 else 0.dp
112114
val cutoutPlacement = indicator?.placement?.cutoutPlacement ?: CutoutPlacement.TopEnd
113115

114116
Box(modifier = Modifier.alpha(disabled, animate = true)) {
115117
if (indicator != null) {
116-
IconButtonIndicator(size, cutoutRadius, cutoutPlacement, indicator, indicatorSize)
118+
IconButtonIndicator(
119+
size,
120+
shape,
121+
cutoutRadius,
122+
cutoutPlacement,
123+
indicator,
124+
indicatorSize
125+
)
117126
}
118127

119128
Box(
120129
modifier = Modifier
121130
.requiredSize(size.size)
122-
.clip(RoundedRectWithCutoutShape(
123-
cornerRadius = size.size / 2,
124-
cutoutRadius = cutoutRadius,
125-
cutoutPlacement = cutoutPlacement,
126-
))
131+
.clip(
132+
RoundedRectWithCutoutShape(
133+
cornerRadius = if (shape == IconButtonShape.CIRCLE)
134+
size.size / 2 else size.squareCorners,
135+
cutoutRadius = cutoutRadius,
136+
cutoutPlacement = cutoutPlacement,
137+
)
138+
)
127139
.background(backgroundColor)
128140
.clickable(
129141
onClick = onClick,
@@ -148,17 +160,21 @@ public fun IconButton(
148160
@Composable
149161
private fun IconButtonIndicator(
150162
size: IconButtonSize,
163+
shape: IconButtonShape,
151164
cutoutRadius: Dp,
152165
cutoutPlacement: CutoutPlacement,
153166
indicator: IconButtonIndicator,
154167
indicatorSize: IndicatorSize,
155168
) {
156-
Box(modifier = Modifier.circleOffset(
157-
rectSize = DpSize(size.size, size.size),
158-
cornerRadius = size.size / 2,
159-
circleRadius = cutoutRadius,
160-
cutoutPlacement = cutoutPlacement,
161-
)) {
169+
Box(
170+
modifier = Modifier.circleOffset(
171+
rectSize = DpSize(size.size, size.size),
172+
cornerRadius = if (shape == IconButtonShape.CIRCLE)
173+
size.size / 2 else size.squareCorners,
174+
circleRadius = cutoutRadius,
175+
cutoutPlacement = cutoutPlacement,
176+
)
177+
) {
162178
Indicator(size = indicatorSize, color = indicator.color, trench = true)
163179
}
164180
}
@@ -215,9 +231,14 @@ private fun calculateIconColor(
215231
}
216232
}.animateButtonColor()
217233

218-
public enum class IconButtonSize(internal val size: Dp) { SMALL(32.dp), MEDIUM(40.dp), }
234+
public enum class IconButtonSize(
235+
internal val size: Dp,
236+
internal val squareCorners: Dp
237+
) { SMALL(32.dp, 8.dp), MEDIUM(40.dp, 8.dp), LARGE(48.dp, 12.dp) }
238+
219239
public enum class IconButtonColor { DEFAULT, PRIMARY, WARNING, RATING, ERROR, WHITE }
220240
public enum class IconButtonVariant { CONTAINED, TEXT, }
241+
public enum class IconButtonShape { CIRCLE, SQUARE, }
221242

222243
public data class IconButtonIndicator(
223244
val color: IndicatorColor,

‎flamingo/src/main/java/com/flamingo/components/socialgroup/button/SocialButton.kt‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,5 +31,5 @@ internal fun SocialButton(
3131
tint = Flamingo.colors.textTertiary,
3232
)
3333

34-
Text(text = counter, style = size.textStyle())
34+
Text(text = counter, style = size.textStyle(), color = Flamingo.colors.textTertiary)
3535
}

‎gradle/dependencies.gradle‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
def versions = [
22
theater : '0.0.3',
3-
flamingo : '0.0.10',
3+
flamingo : '0.0.11',
44
kotlin : '1.7.0',
55
compose : '1.2.1',
66
composeCompiler: '1.2.0',

0 commit comments

Comments
 (0)