Small refacto to have more Preview.

This commit is contained in:
Benoit Marty 2023-07-18 11:32:52 +02:00
parent 5824281f0b
commit 6fe59cb5f8

View file

@ -55,84 +55,61 @@ fun ElementLogoAtom(
modifier: Modifier = Modifier,
darkTheme: Boolean = isSystemInDarkTheme(),
) {
val outerSize = when (size) {
ElementLogoAtomSize.Large -> 158.dp
ElementLogoAtomSize.Medium -> 120.dp
}
val logoSize = when (size) {
ElementLogoAtomSize.Large -> 110.dp
ElementLogoAtomSize.Medium -> 83.5.dp
}
val cornerRadius = when (size) {
ElementLogoAtomSize.Large -> 44.dp
ElementLogoAtomSize.Medium -> 33.dp
}
val borderWidth = when (size) {
ElementLogoAtomSize.Large -> 1.dp
ElementLogoAtomSize.Medium -> 0.38.dp
}
val blur = if (darkTheme) {
160.dp
} else {
24.dp
}
val blur = if (darkTheme) 160.dp else 24.dp
//box-shadow: 0px 6.075949668884277px 24.30379867553711px 0px #1B1D2280;
val shadowColor = if (darkTheme) {
Color.Black.copy(alpha = 0.4f)
} else {
Color(0x401B1D22)
}
val shadowColor = if (darkTheme) Color.Black.copy(alpha = 0.4f) else Color(0x401B1D22)
val backgroundColor = if (darkTheme) Color.White.copy(alpha = 0.2f) else Color.White.copy(alpha = 0.4f)
val borderColor = if (darkTheme) Color.White.copy(alpha = 0.8f) else Color.White.copy(alpha = 0.4f)
Box(
modifier = modifier
.size(outerSize)
.border(borderWidth, borderColor, RoundedCornerShape(cornerRadius)),
.size(size.outerSize)
.border(size.borderWidth, borderColor, RoundedCornerShape(size.cornerRadius)),
contentAlignment = Alignment.Center,
) {
Box(
Modifier
.size(outerSize)
.size(size.outerSize)
.shapeShadow(
color = shadowColor,
cornerRadius = cornerRadius,
cornerRadius = size.cornerRadius,
blurRadius = 32.dp,
offsetY = 8.dp,
)
)
Box(
Modifier
.clip(RoundedCornerShape(cornerRadius))
.size(outerSize)
.clip(RoundedCornerShape(size.cornerRadius))
.size(size.outerSize)
.background(backgroundColor)
.blur(blur)
)
Image(
modifier = Modifier.size(logoSize),
modifier = Modifier.size(size.logoSize),
painter = painterResource(id = R.drawable.element_logo),
contentDescription = null
)
}
}
enum class ElementLogoAtomSize {
Medium,
Large
}
sealed class ElementLogoAtomSize(
val outerSize: Dp,
val logoSize: Dp,
val cornerRadius: Dp,
val borderWidth: Dp,
) {
object Medium : ElementLogoAtomSize(
outerSize = 120.dp,
logoSize = 83.5.dp,
cornerRadius = 33.dp,
borderWidth = 0.38.dp,
)
@Composable
@DayNightPreviews
internal fun ElementLogoAtomPreview() {
ElementPreview {
Box(
Modifier
.size(180.dp)
.background(ElementTheme.colors.bgSubtlePrimary),
contentAlignment = Alignment.Center
) {
ElementLogoAtom(ElementLogoAtomSize.Large)
}
}
object Large : ElementLogoAtomSize(
outerSize = 158.dp,
logoSize = 110.dp,
cornerRadius = 44.dp,
borderWidth = 1.dp,
)
}
fun Modifier.shapeShadow(
@ -172,3 +149,29 @@ fun Modifier.shapeShadow(
}
}
)
@Composable
@DayNightPreviews
internal fun ElementLogoAtomMediumPreview() {
ContentToPreview(ElementLogoAtomSize.Medium)
}
@Composable
@DayNightPreviews
internal fun ElementLogoAtomLargePreview() {
ContentToPreview(ElementLogoAtomSize.Large)
}
@Composable
private fun ContentToPreview(elementLogoAtomSize: ElementLogoAtomSize) {
ElementPreview {
Box(
Modifier
.size(elementLogoAtomSize.outerSize + 64.dp)
.background(ElementTheme.colors.bgSubtlePrimary),
contentAlignment = Alignment.Center
) {
ElementLogoAtom(elementLogoAtomSize)
}
}
}