Small refacto to have more Preview.
This commit is contained in:
parent
5824281f0b
commit
6fe59cb5f8
1 changed files with 53 additions and 50 deletions
|
|
@ -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)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue