Small refacto to have more Preview.
This commit is contained in:
parent
4186c810e4
commit
7d9a02075a
1 changed files with 53 additions and 50 deletions
|
|
@ -55,84 +55,61 @@ fun ElementLogoAtom(
|
||||||
modifier: Modifier = Modifier,
|
modifier: Modifier = Modifier,
|
||||||
darkTheme: Boolean = isSystemInDarkTheme(),
|
darkTheme: Boolean = isSystemInDarkTheme(),
|
||||||
) {
|
) {
|
||||||
val outerSize = when (size) {
|
val blur = if (darkTheme) 160.dp else 24.dp
|
||||||
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
|
|
||||||
}
|
|
||||||
//box-shadow: 0px 6.075949668884277px 24.30379867553711px 0px #1B1D2280;
|
//box-shadow: 0px 6.075949668884277px 24.30379867553711px 0px #1B1D2280;
|
||||||
val shadowColor = if (darkTheme) {
|
val shadowColor = if (darkTheme) Color.Black.copy(alpha = 0.4f) else Color(0x401B1D22)
|
||||||
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 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)
|
val borderColor = if (darkTheme) Color.White.copy(alpha = 0.8f) else Color.White.copy(alpha = 0.4f)
|
||||||
Box(
|
Box(
|
||||||
modifier = modifier
|
modifier = modifier
|
||||||
.size(outerSize)
|
.size(size.outerSize)
|
||||||
.border(borderWidth, borderColor, RoundedCornerShape(cornerRadius)),
|
.border(size.borderWidth, borderColor, RoundedCornerShape(size.cornerRadius)),
|
||||||
contentAlignment = Alignment.Center,
|
contentAlignment = Alignment.Center,
|
||||||
) {
|
) {
|
||||||
Box(
|
Box(
|
||||||
Modifier
|
Modifier
|
||||||
.size(outerSize)
|
.size(size.outerSize)
|
||||||
.shapeShadow(
|
.shapeShadow(
|
||||||
color = shadowColor,
|
color = shadowColor,
|
||||||
cornerRadius = cornerRadius,
|
cornerRadius = size.cornerRadius,
|
||||||
blurRadius = 32.dp,
|
blurRadius = 32.dp,
|
||||||
offsetY = 8.dp,
|
offsetY = 8.dp,
|
||||||
)
|
)
|
||||||
)
|
)
|
||||||
Box(
|
Box(
|
||||||
Modifier
|
Modifier
|
||||||
.clip(RoundedCornerShape(cornerRadius))
|
.clip(RoundedCornerShape(size.cornerRadius))
|
||||||
.size(outerSize)
|
.size(size.outerSize)
|
||||||
.background(backgroundColor)
|
.background(backgroundColor)
|
||||||
.blur(blur)
|
.blur(blur)
|
||||||
)
|
)
|
||||||
Image(
|
Image(
|
||||||
modifier = Modifier.size(logoSize),
|
modifier = Modifier.size(size.logoSize),
|
||||||
painter = painterResource(id = R.drawable.element_logo),
|
painter = painterResource(id = R.drawable.element_logo),
|
||||||
contentDescription = null
|
contentDescription = null
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
enum class ElementLogoAtomSize {
|
sealed class ElementLogoAtomSize(
|
||||||
Medium,
|
val outerSize: Dp,
|
||||||
Large
|
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
|
object Large : ElementLogoAtomSize(
|
||||||
@DayNightPreviews
|
outerSize = 158.dp,
|
||||||
internal fun ElementLogoAtomPreview() {
|
logoSize = 110.dp,
|
||||||
ElementPreview {
|
cornerRadius = 44.dp,
|
||||||
Box(
|
borderWidth = 1.dp,
|
||||||
Modifier
|
)
|
||||||
.size(180.dp)
|
|
||||||
.background(ElementTheme.colors.bgSubtlePrimary),
|
|
||||||
contentAlignment = Alignment.Center
|
|
||||||
) {
|
|
||||||
ElementLogoAtom(ElementLogoAtomSize.Large)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
fun Modifier.shapeShadow(
|
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