Skip to content

Commit

Permalink
fix button rendering + hide preview composable functions
Browse files Browse the repository at this point in the history
  • Loading branch information
@vpodlesnyak
vpodlesnyak committed Dec 3, 2024
1 parent 32c0457 commit 1effecf
Show file tree
Hide file tree
Showing 5 changed files with 154 additions and 73 deletions.
5 changes: 1 addition & 4 deletions resources-compose/api/resources-compose.api
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
public final class com/splendo/kaluga/resources/compose/BackgroundStyleKt {
public static final fun PreviewBackgroundStyle (Landroidx/compose/runtime/Composer;I)V
public static final fun backgroundStyle (Landroidx/compose/ui/Modifier;Lcom/splendo/kaluga/resources/stylable/KalugaBackgroundStyle;Landroidx/compose/runtime/Composer;I)Landroidx/compose/ui/Modifier;
public static final fun borderStroke (Lcom/splendo/kaluga/resources/stylable/KalugaBackgroundStyle$StrokeStyle;Landroidx/compose/runtime/Composer;I)Landroidx/compose/foundation/BorderStroke;
public static final fun brush (Lcom/splendo/kaluga/resources/stylable/KalugaBackgroundStyle$FillStyle;Landroidx/compose/runtime/Composer;I)Landroidx/compose/ui/graphics/Brush;
Expand All @@ -16,7 +15,6 @@ public final class com/splendo/kaluga/resources/compose/GradientStyleKt {

public final class com/splendo/kaluga/resources/compose/KalugaButtonKt {
public static final fun Composable (Lcom/splendo/kaluga/resources/view/KalugaButton;Landroidx/compose/ui/Modifier;Landroidx/compose/material3/ButtonElevation;Landroidx/compose/runtime/Composer;II)V
public static final fun PreviewKalugaButton (Landroidx/compose/runtime/Composer;I)V
}

public final class com/splendo/kaluga/resources/compose/KalugaImageKt {
Expand All @@ -25,8 +23,7 @@ public final class com/splendo/kaluga/resources/compose/KalugaImageKt {
}

public final class com/splendo/kaluga/resources/compose/KalugaLabelKt {
public static final fun Composable (Lcom/splendo/kaluga/resources/view/KalugaLabel;Landroidx/compose/ui/Modifier;Landroidx/compose/runtime/Composer;I)V
public static final fun PreviewKalugaLabel (Landroidx/compose/runtime/Composer;I)V
public static final fun Composable (Lcom/splendo/kaluga/resources/view/KalugaLabel;Landroidx/compose/ui/Modifier;Landroidx/compose/runtime/Composer;II)V
}

public final class com/splendo/kaluga/resources/compose/KalugaPreviewKt {
Expand Down
44 changes: 23 additions & 21 deletions resources-compose/src/main/kotlin/BackgroundStyle.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
Expand Down Expand Up @@ -99,32 +100,33 @@ fun KalugaBackgroundStyle.StrokeStyle.borderStroke(): BorderStroke = when (this)

@Preview
@Composable
fun PreviewBackgroundStyle() {
private fun PreviewBackgroundStyle() {
Box(
modifier = Modifier.backgroundStyle(
KalugaBackgroundStyle(
KalugaBackgroundStyle.FillStyle.Gradient(
GradientStyle.Radial(
listOf(
GradientStyle.ColorPoint(DefaultColors.darkBlue, 0.2f),
GradientStyle.ColorPoint(DefaultColors.blue, 0.4f),
GradientStyle.ColorPoint(DefaultColors.aliceBlue, 0.6f),
modifier = Modifier
.backgroundStyle(
KalugaBackgroundStyle(
KalugaBackgroundStyle.FillStyle.Gradient(
GradientStyle.Radial(
listOf(
GradientStyle.ColorPoint(DefaultColors.darkBlue, 0.2f),
GradientStyle.ColorPoint(DefaultColors.blue, 0.4f),
GradientStyle.ColorPoint(DefaultColors.aliceBlue, 0.6f),
),
50.0f,
GradientStyle.CenterPoint(0.2f, 0.3f),
),
50.0f,
GradientStyle.CenterPoint(0.2f, 0.3f),
),
),
KalugaBackgroundStyle.StrokeStyle.Stroke(1.0f, DefaultColors.black),
KalugaBackgroundStyle.Shape.Rectangle(
4.0f,
2.0f,
setOf(
KalugaBackgroundStyle.Shape.Rectangle.Corner.BOTTOM_LEFT,
KalugaBackgroundStyle.Shape.Rectangle.Corner.TOP_RIGHT,
KalugaBackgroundStyle.StrokeStyle.Stroke(1.0f, DefaultColors.black),
KalugaBackgroundStyle.Shape.Rectangle(
8.0f,
4.0f,
setOf(
KalugaBackgroundStyle.Shape.Rectangle.Corner.BOTTOM_LEFT,
KalugaBackgroundStyle.Shape.Rectangle.Corner.TOP_RIGHT,
),
),
),
),
),
).padding(8.dp),
) {
Text("Test")
}
Expand Down
154 changes: 108 additions & 46 deletions resources-compose/src/main/kotlin/KalugaButton.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
package com.splendo.kaluga.resources.compose

import android.graphics.Typeface
import androidx.appcompat.content.res.AppCompatResources
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.interaction.collectIsPressedAsState
import androidx.compose.foundation.layout.Arrangement
Expand All @@ -27,7 +28,9 @@ import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonColors
import androidx.compose.material3.ButtonDefaults
Expand All @@ -44,7 +47,11 @@ import androidx.compose.ui.platform.LocalLayoutDirection
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.LayoutDirection
import androidx.compose.ui.unit.dp
import androidx.core.content.ContextCompat
import androidx.core.content.res.ResourcesCompat
import com.splendo.kaluga.resources.DefaultColors
import com.splendo.kaluga.resources.KalugaColor
import com.splendo.kaluga.resources.KalugaImage
import com.splendo.kaluga.resources.StringStyleAttribute
import com.splendo.kaluga.resources.StyledStringBuilder
import com.splendo.kaluga.resources.stylable.ButtonImage
Expand All @@ -66,7 +73,7 @@ import com.splendo.kaluga.resources.view.KalugaLabel
* See [ButtonDefaults.buttonElevation].
*/
@Composable
fun KalugaButton.Composable(modifier: Modifier, elevation: ButtonElevation = ButtonDefaults.buttonElevation()) {
fun KalugaButton.Composable(modifier: Modifier = Modifier, elevation: ButtonElevation = ButtonDefaults.buttonElevation()) {
val interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }
val pressed by interactionSource.collectIsPressedAsState()
val stateStyle = style.getStateStyle(isEnabled, pressed)
Expand Down Expand Up @@ -97,8 +104,8 @@ fun KalugaButton.Composable(modifier: Modifier, elevation: ButtonElevation = But
}
}
when (val style = style) {
is KalugaButtonStyle.TextOnly -> style.Composable(modifier = modifier, isEnabled = isEnabled, isPressed = pressed, createLabel)
is KalugaButtonStyle.WithImageAndText -> style.Composable(modifier = modifier, isEnabled = isEnabled, isPressed = pressed, createLabel)
is KalugaButtonStyle.TextOnly -> style.Composable(isEnabled = isEnabled, isPressed = pressed, createLabel)
is KalugaButtonStyle.WithImageAndText -> style.Composable(modifier = Modifier, isEnabled = isEnabled, isPressed = pressed, createLabel)
}
}
}
Expand All @@ -107,40 +114,52 @@ fun KalugaButton.Composable(modifier: Modifier, elevation: ButtonElevation = But

@Composable
private fun KalugaButtonStyle.WithImageAndText.Composable(modifier: Modifier, isEnabled: Boolean, isPressed: Boolean, createLabel: (KalugaTextStyle) -> KalugaLabel) {
val elements: @Composable (Modifier) -> List<@Composable () -> Unit> = { weight ->
listOf(
{ (this as KalugaButtonStyle.WithImage<*>).Composable(isEnabled = isEnabled, isPressed = isPressed) },
{ (this as KalugaButtonStyle.WithText<*>).Composable(modifier = weight, isEnabled = isEnabled, isPressed = isPressed, createLabel) },
)
@Composable
fun imageComposable() {
(this as KalugaButtonStyle.WithImage<*>).Composable(isEnabled = isEnabled, isPressed = isPressed)
}

@Composable
fun textComposable() {
(this as KalugaButtonStyle.WithText<*>).Composable(isEnabled = isEnabled, isPressed = isPressed, createLabel)
}

val isRightToLeft = LocalLayoutDirection.current == LayoutDirection.Rtl

when (imageGravity) {
ImageGravity.START -> Row(modifier = modifier, horizontalArrangement = Arrangement.spacedBy(spacing.dp), verticalAlignment = Alignment.CenterVertically) {
elements(Modifier.weight(1.0f)).let { if (isRightToLeft) it.reversed() else it }.forEach { it() }
}
ImageGravity.LEFT -> Row(modifier = modifier, horizontalArrangement = Arrangement.spacedBy(spacing.dp), verticalAlignment = Alignment.CenterVertically) {
elements(Modifier.weight(1.0f)).forEach { it() }
}
ImageGravity.END -> Row(modifier = modifier, horizontalArrangement = Arrangement.spacedBy(spacing.dp), verticalAlignment = Alignment.CenterVertically) {
elements(Modifier.weight(1.0f)).let { if (isRightToLeft) it else it.reversed() }.forEach { it() }
}
ImageGravity.RIGHT -> Row(modifier = modifier, horizontalArrangement = Arrangement.spacedBy(spacing.dp), verticalAlignment = Alignment.CenterVertically) {
elements(Modifier.weight(1.0f)).reversed().forEach { it() }
}
ImageGravity.TOP -> Column(modifier = modifier, horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.spacedBy(spacing.dp)) {
elements(Modifier.fillMaxWidth()).forEach { it() }

ImageGravity.START, ImageGravity.LEFT, ImageGravity.END, ImageGravity.RIGHT ->
Row(
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.spacedBy(spacing.dp),
) {
if (imageGravity == ImageGravity.START && !isRightToLeft ||
imageGravity == ImageGravity.END && isRightToLeft ||
imageGravity == ImageGravity.LEFT
) {
imageComposable()
textComposable()
} else {
textComposable()
imageComposable()
}
}

ImageGravity.TOP -> Column(horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.spacedBy(spacing.dp)) {
imageComposable()
textComposable()
}
ImageGravity.BOTTOM -> Column(modifier = modifier, horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.spacedBy(spacing.dp)) {
elements(Modifier.fillMaxWidth()).reversed().forEach { it() }

ImageGravity.BOTTOM -> Column(horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.spacedBy(spacing.dp)) {
textComposable()
imageComposable()
}
}
}

@Composable
private fun KalugaButtonStyle.WithText<*>.Composable(modifier: Modifier, isEnabled: Boolean, isPressed: Boolean, createLabel: (KalugaTextStyle) -> KalugaLabel) {
createLabel(getStateTextStyle(isEnabled, isPressed)).Composable(modifier = modifier)
private fun KalugaButtonStyle.WithText<*>.Composable(isEnabled: Boolean, isPressed: Boolean, createLabel: (KalugaTextStyle) -> KalugaLabel) {
createLabel(getStateTextStyle(isEnabled, isPressed)).Composable()
}

@Composable
Expand All @@ -158,7 +177,7 @@ private fun KalugaButtonStyle.WithImage<*>.Composable(isEnabled: Boolean, isPres

@Composable
@Preview
fun PreviewKalugaButton() {
private fun PreviewKalugaButton() {
val buttonStyle = KalugaButtonStyle.textOnly {
font = Typeface.DEFAULT_BOLD
textSize = 14.0f
Expand All @@ -175,24 +194,67 @@ fun PreviewKalugaButton() {
setBackgroundStyle(DefaultColors.white, KalugaBackgroundStyle.Shape.Rectangle(5.0f))
}
}
Column(modifier = Modifier.size(100.dp)) {
KalugaButton.Plain("Plain Text", buttonStyle, true) {}.Composable(
modifier = Modifier.fillMaxWidth(),
)
KalugaButton.Styled(
"Styled Text".styled(
StyledStringBuilder.Provider(LocalContext.current),
buttonStyle.getStateTextStyle(isEnabled = true, isPressed = false),
{
StringStyleAttribute.CharacterStyleAttribute.ForegroundColor(
DefaultColors.darkBlue,
) to IntRange(0, 5)
},
),
buttonStyle,
true,
) {}.Composable(
modifier = Modifier.fillMaxWidth(),
)

val image = KalugaImage(AppCompatResources.getDrawable(LocalContext.current, android.R.drawable.ic_dialog_info)!!)

fun buttonWithImageStyle(imageGravity: ImageGravity) = KalugaButtonStyle.withImageAndText {
font = Typeface.DEFAULT_BOLD
textSize = 14.0f
this.imageGravity = imageGravity
imageSize = ImageSize.Sized(width = 15F, height = 15F)
spacing = 8F
defaultStyle = ButtonStateStyle.withImageAndText {
textColor = DefaultColors.white
setImage(image)
setBackgroundStyle(DefaultColors.red, KalugaBackgroundStyle.Shape.Rectangle(5.0f))
}
pressedStyle = ButtonStateStyle.withImageAndText {
textColor = DefaultColors.red
setImage(image)
setBackgroundStyle(DefaultColors.white, KalugaBackgroundStyle.Shape.Rectangle(5.0f))
}
disabledStyle = ButtonStateStyle.withImageAndText {
textColor = DefaultColors.black
setImage(image)
setBackgroundStyle(DefaultColors.white, KalugaBackgroundStyle.Shape.Rectangle(5.0f))
}
}

@Composable
fun styledText(plainText: String) = plainText.styled(
StyledStringBuilder.Provider(LocalContext.current),
buttonStyle.getStateTextStyle(isEnabled = true, isPressed = false),
{
StringStyleAttribute.CharacterStyleAttribute.ForegroundColor(
DefaultColors.darkBlue,
) to IntRange(0, 5)
},
)

Column(verticalArrangement = Arrangement.spacedBy(8.dp)) {
KalugaButton.Plain("Plain Text", buttonStyle, true) {}
.Composable()
KalugaButton.Plain("Plain Text Max", buttonStyle, true) {}
.Composable(modifier = Modifier.fillMaxWidth())

KalugaButton.Styled(styledText("Styled Text"), buttonStyle, true) {}
.Composable(modifier = Modifier.align(Alignment.CenterHorizontally))
KalugaButton.Styled(styledText("Styled Text Max"), buttonStyle, true) {}
.Composable(modifier = Modifier.fillMaxWidth())

KalugaButton.Plain("Plain With Image", buttonWithImageStyle(ImageGravity.END), true) {}
.Composable(modifier = Modifier.align(Alignment.End))
KalugaButton.Plain("Plain With Image Max", buttonWithImageStyle(ImageGravity.END), true) {}
.Composable(modifier = Modifier.fillMaxWidth())

KalugaButton.Styled(styledText("Styled With Image"), buttonWithImageStyle(ImageGravity.END), true) {}
.Composable(modifier = Modifier.align(Alignment.Start))
KalugaButton.Styled(styledText("Styled With Image Max"), buttonWithImageStyle(ImageGravity.END), true) {}
.Composable(modifier = Modifier.fillMaxWidth())

KalugaButton.Plain("Plain With Image On Top", buttonWithImageStyle(ImageGravity.TOP), true) {}
.Composable()
KalugaButton.Plain("Plain With Image On Top Max", buttonWithImageStyle(ImageGravity.TOP), true) {}
.Composable(modifier = Modifier.fillMaxWidth())
}
}
15 changes: 15 additions & 0 deletions resources-compose/src/main/kotlin/KalugaImage.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,16 +17,21 @@

package com.splendo.kaluga.resources.compose

import androidx.appcompat.content.res.AppCompatResources
import androidx.compose.foundation.Image
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.ColorFilter
import androidx.compose.ui.graphics.DefaultAlpha
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.tooling.preview.Preview
import com.google.accompanist.drawablepainter.rememberDrawablePainter
import com.splendo.kaluga.resources.DefaultColors
import com.splendo.kaluga.resources.KalugaImage
import com.splendo.kaluga.resources.TintedImage
import com.splendo.kaluga.resources.tinted

@Composable
fun KalugaImage.Composable(
Expand Down Expand Up @@ -61,3 +66,13 @@ fun TintedImage.Composable(
alpha = alpha,
colorFilter = ColorFilter.tint(tint.composable()),
)

@Preview
@Composable
private fun TintedImagePreview() {
val image = KalugaImage(AppCompatResources.getDrawable(LocalContext.current, android.R.drawable.ic_media_play)!!).tinted(
DefaultColors.blue
)

image.Composable(contentDescription = "Play")
}
9 changes: 7 additions & 2 deletions resources-compose/src/main/kotlin/KalugaLabel.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.size
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.text.font.FontFamily
Expand All @@ -42,7 +43,7 @@ import com.splendo.kaluga.resources.view.bindLabel
* @param modifier the [Modifier] to be applied to this layout node
*/
@Composable
fun KalugaLabel.Composable(modifier: Modifier) {
fun KalugaLabel.Composable(modifier: Modifier = Modifier) {
when (this) {
is KalugaLabel.Plain -> {
Text(
Expand Down Expand Up @@ -70,7 +71,7 @@ fun KalugaLabel.Composable(modifier: Modifier) {

@Preview
@Composable
fun PreviewKalugaLabel() {
private fun PreviewKalugaLabel() {
val textStyle = com.splendo.kaluga.resources.stylable.KalugaTextStyle(
defaultBoldFont,
DefaultColors.darkRed,
Expand All @@ -80,6 +81,10 @@ fun PreviewKalugaLabel() {
KalugaLabel.Plain("Plain Text", textStyle).Composable(
modifier = Modifier.fillMaxWidth(),
)

KalugaLabel.Plain("Plain Text", textStyle).Composable(
modifier = Modifier.align(Alignment.End),
)
KalugaLabel.Styled(
"Styled Text".styled(
StyledStringBuilder.Provider(LocalContext.current),
Expand Down

0 comments on commit 1effecf

Please sign in to comment.