Skip to content

Commit 6fe59cb

Browse files
committed
Small refacto to have more Preview.
1 parent 5824281 commit 6fe59cb

File tree

1 file changed

+53
-50
lines changed
  • libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/atomic/atoms

1 file changed

+53
-50
lines changed

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/atomic/atoms/ElementLogoAtom.kt

Lines changed: 53 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -55,84 +55,61 @@ fun ElementLogoAtom(
5555
modifier: Modifier = Modifier,
5656
darkTheme: Boolean = isSystemInDarkTheme(),
5757
) {
58-
val outerSize = when (size) {
59-
ElementLogoAtomSize.Large -> 158.dp
60-
ElementLogoAtomSize.Medium -> 120.dp
61-
}
62-
val logoSize = when (size) {
63-
ElementLogoAtomSize.Large -> 110.dp
64-
ElementLogoAtomSize.Medium -> 83.5.dp
65-
}
66-
val cornerRadius = when (size) {
67-
ElementLogoAtomSize.Large -> 44.dp
68-
ElementLogoAtomSize.Medium -> 33.dp
69-
}
70-
val borderWidth = when (size) {
71-
ElementLogoAtomSize.Large -> 1.dp
72-
ElementLogoAtomSize.Medium -> 0.38.dp
73-
}
74-
val blur = if (darkTheme) {
75-
160.dp
76-
} else {
77-
24.dp
78-
}
58+
val blur = if (darkTheme) 160.dp else 24.dp
7959
//box-shadow: 0px 6.075949668884277px 24.30379867553711px 0px #1B1D2280;
80-
val shadowColor = if (darkTheme) {
81-
Color.Black.copy(alpha = 0.4f)
82-
} else {
83-
Color(0x401B1D22)
84-
}
60+
val shadowColor = if (darkTheme) Color.Black.copy(alpha = 0.4f) else Color(0x401B1D22)
8561
val backgroundColor = if (darkTheme) Color.White.copy(alpha = 0.2f) else Color.White.copy(alpha = 0.4f)
8662
val borderColor = if (darkTheme) Color.White.copy(alpha = 0.8f) else Color.White.copy(alpha = 0.4f)
8763
Box(
8864
modifier = modifier
89-
.size(outerSize)
90-
.border(borderWidth, borderColor, RoundedCornerShape(cornerRadius)),
65+
.size(size.outerSize)
66+
.border(size.borderWidth, borderColor, RoundedCornerShape(size.cornerRadius)),
9167
contentAlignment = Alignment.Center,
9268
) {
9369
Box(
9470
Modifier
95-
.size(outerSize)
71+
.size(size.outerSize)
9672
.shapeShadow(
9773
color = shadowColor,
98-
cornerRadius = cornerRadius,
74+
cornerRadius = size.cornerRadius,
9975
blurRadius = 32.dp,
10076
offsetY = 8.dp,
10177
)
10278
)
10379
Box(
10480
Modifier
105-
.clip(RoundedCornerShape(cornerRadius))
106-
.size(outerSize)
81+
.clip(RoundedCornerShape(size.cornerRadius))
82+
.size(size.outerSize)
10783
.background(backgroundColor)
10884
.blur(blur)
10985
)
11086
Image(
111-
modifier = Modifier.size(logoSize),
87+
modifier = Modifier.size(size.logoSize),
11288
painter = painterResource(id = R.drawable.element_logo),
11389
contentDescription = null
11490
)
11591
}
11692
}
11793

118-
enum class ElementLogoAtomSize {
119-
Medium,
120-
Large
121-
}
94+
sealed class ElementLogoAtomSize(
95+
val outerSize: Dp,
96+
val logoSize: Dp,
97+
val cornerRadius: Dp,
98+
val borderWidth: Dp,
99+
) {
100+
object Medium : ElementLogoAtomSize(
101+
outerSize = 120.dp,
102+
logoSize = 83.5.dp,
103+
cornerRadius = 33.dp,
104+
borderWidth = 0.38.dp,
105+
)
122106

123-
@Composable
124-
@DayNightPreviews
125-
internal fun ElementLogoAtomPreview() {
126-
ElementPreview {
127-
Box(
128-
Modifier
129-
.size(180.dp)
130-
.background(ElementTheme.colors.bgSubtlePrimary),
131-
contentAlignment = Alignment.Center
132-
) {
133-
ElementLogoAtom(ElementLogoAtomSize.Large)
134-
}
135-
}
107+
object Large : ElementLogoAtomSize(
108+
outerSize = 158.dp,
109+
logoSize = 110.dp,
110+
cornerRadius = 44.dp,
111+
borderWidth = 1.dp,
112+
)
136113
}
137114

138115
fun Modifier.shapeShadow(
@@ -172,3 +149,29 @@ fun Modifier.shapeShadow(
172149
}
173150
}
174151
)
152+
153+
@Composable
154+
@DayNightPreviews
155+
internal fun ElementLogoAtomMediumPreview() {
156+
ContentToPreview(ElementLogoAtomSize.Medium)
157+
}
158+
159+
@Composable
160+
@DayNightPreviews
161+
internal fun ElementLogoAtomLargePreview() {
162+
ContentToPreview(ElementLogoAtomSize.Large)
163+
}
164+
165+
@Composable
166+
private fun ContentToPreview(elementLogoAtomSize: ElementLogoAtomSize) {
167+
ElementPreview {
168+
Box(
169+
Modifier
170+
.size(elementLogoAtomSize.outerSize + 64.dp)
171+
.background(ElementTheme.colors.bgSubtlePrimary),
172+
contentAlignment = Alignment.Center
173+
) {
174+
ElementLogoAtom(elementLogoAtomSize)
175+
}
176+
}
177+
}

0 commit comments

Comments
 (0)