From 26726cd948a922d8a482a67ffb9d71b4faca8eae Mon Sep 17 00:00:00 2001 From: Maxim Petlyuk Date: Thu, 7 Nov 2024 16:30:39 +0200 Subject: [PATCH 1/2] feat!: add support for gradient cell background --- .../composeuisuite/ohteepee/OhTeePeeCell.kt | 10 +++--- .../configuration/OhTeePeeCellBackground.kt | 36 +++++++++++++++++++ .../OhTeePeeCellConfiguration.kt | 7 ++-- .../composeuisuite/ohteepee/MainActivity.kt | 21 +++++++---- 4 files changed, 61 insertions(+), 13 deletions(-) create mode 100644 ohteepee/src/main/java/com/composeuisuite/ohteepee/configuration/OhTeePeeCellBackground.kt diff --git a/ohteepee/src/main/java/com/composeuisuite/ohteepee/OhTeePeeCell.kt b/ohteepee/src/main/java/com/composeuisuite/ohteepee/OhTeePeeCell.kt index 1e84342..26d9cf7 100644 --- a/ohteepee/src/main/java/com/composeuisuite/ohteepee/OhTeePeeCell.kt +++ b/ohteepee/src/main/java/com/composeuisuite/ohteepee/OhTeePeeCell.kt @@ -2,7 +2,6 @@ package com.composeuisuite.ohteepee import android.view.KeyEvent import androidx.compose.foundation.BorderStroke -import androidx.compose.foundation.background import androidx.compose.foundation.border import androidx.compose.foundation.interaction.MutableInteractionSource import androidx.compose.foundation.layout.PaddingValues @@ -26,6 +25,7 @@ import androidx.compose.ui.Modifier import androidx.compose.ui.draw.drawBehind import androidx.compose.ui.focus.onFocusEvent import androidx.compose.ui.geometry.Offset +import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.SolidColor import androidx.compose.ui.input.key.Key import androidx.compose.ui.input.key.key @@ -39,6 +39,7 @@ import androidx.compose.ui.text.input.VisualTransformation import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.unit.dp import com.composeuisuite.ohteepee.configuration.OhTeePeeConfigurations +import com.composeuisuite.ohteepee.configuration.cellBackground import com.composeuisuite.ohteepee.utils.conditional private val MIN_HEIGHT_CELL_SIZE = 48.dp @@ -88,7 +89,8 @@ internal fun OhTeePeeCell( SideEffect { if (textFieldValue.selection != textFieldValueState.selection || - textFieldValue.composition != textFieldValueState.composition) { + textFieldValue.composition != textFieldValueState.composition + ) { textFieldValueState = textFieldValue } } @@ -151,7 +153,7 @@ internal fun OhTeePeeCell( } } .onFocusEvent { isFocused = it.isFocused } - .background(cellConfiguration.backgroundColor), + .cellBackground(cellConfiguration.cellBackground), keyboardOptions = KeyboardOptions( keyboardType = keyboardType, imeAction = ImeAction.Next, @@ -180,7 +182,7 @@ internal fun OhTeePeeCell( ) }, colors = TextFieldDefaults.textFieldColors( - backgroundColor = cellConfiguration.backgroundColor + backgroundColor = Color.Transparent ), ) } diff --git a/ohteepee/src/main/java/com/composeuisuite/ohteepee/configuration/OhTeePeeCellBackground.kt b/ohteepee/src/main/java/com/composeuisuite/ohteepee/configuration/OhTeePeeCellBackground.kt new file mode 100644 index 0000000..8522f24 --- /dev/null +++ b/ohteepee/src/main/java/com/composeuisuite/ohteepee/configuration/OhTeePeeCellBackground.kt @@ -0,0 +1,36 @@ +package com.composeuisuite.ohteepee.configuration + +import androidx.annotation.FloatRange +import androidx.compose.foundation.background +import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Brush +import androidx.compose.ui.graphics.Color + +sealed class OhTeePeeCellBackground { + + data class Gradient( + val brush: Brush, + @FloatRange(from = 0.0, to = 1.0) + val alpha: Float = 1f, + ) : OhTeePeeCellBackground() + + data class Solid( + val color: Color, + ) : OhTeePeeCellBackground() +} + +internal fun Modifier.cellBackground( + background: OhTeePeeCellBackground, +): Modifier { + val backgroundModifier = when (background) { + is OhTeePeeCellBackground.Gradient -> { + this.background(brush = background.brush, alpha = background.alpha) + } + + is OhTeePeeCellBackground.Solid -> { + this.background(color = background.color) + } + } + + return backgroundModifier.then(this) +} diff --git a/ohteepee/src/main/java/com/composeuisuite/ohteepee/configuration/OhTeePeeCellConfiguration.kt b/ohteepee/src/main/java/com/composeuisuite/ohteepee/configuration/OhTeePeeCellConfiguration.kt index 8288689..a500ad1 100644 --- a/ohteepee/src/main/java/com/composeuisuite/ohteepee/configuration/OhTeePeeCellConfiguration.kt +++ b/ohteepee/src/main/java/com/composeuisuite/ohteepee/configuration/OhTeePeeCellConfiguration.kt @@ -10,26 +10,27 @@ import androidx.compose.ui.unit.dp data class OhTeePeeCellConfiguration( val shape: Shape, - val backgroundColor: Color, + val cellBackground: OhTeePeeCellBackground, val borderColor: Color, val borderWidth: Dp, val textStyle: TextStyle, val placeHolderTextStyle: TextStyle, ) { + companion object { val BORDER_WIDTH = 1.dp @Composable fun withDefaults( shape: Shape = MaterialTheme.shapes.medium, - backgroundColor: Color = MaterialTheme.colors.surface, + cellBackground: OhTeePeeCellBackground = OhTeePeeCellBackground.Solid(MaterialTheme.colors.surface), borderColor: Color = MaterialTheme.colors.primary, borderWidth: Dp = BORDER_WIDTH, textStyle: TextStyle = TextStyle(), placeHolderTextStyle: TextStyle = textStyle, ) = OhTeePeeCellConfiguration( shape = shape, - backgroundColor = backgroundColor, + cellBackground = cellBackground, borderColor = borderColor, borderWidth = borderWidth, textStyle = textStyle, diff --git a/sample/src/main/java/com/composeuisuite/ohteepee/MainActivity.kt b/sample/src/main/java/com/composeuisuite/ohteepee/MainActivity.kt index 17c9cd5..f80f1d6 100644 --- a/sample/src/main/java/com/composeuisuite/ohteepee/MainActivity.kt +++ b/sample/src/main/java/com/composeuisuite/ohteepee/MainActivity.kt @@ -33,8 +33,10 @@ import androidx.compose.runtime.remember import androidx.compose.runtime.setValue import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier +import androidx.compose.ui.geometry.Offset import androidx.compose.ui.geometry.Size import androidx.compose.ui.geometry.center +import androidx.compose.ui.graphics.Brush import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.RadialGradientShader import androidx.compose.ui.graphics.Shader @@ -46,6 +48,7 @@ import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.text.style.TextDecoration import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp +import com.composeuisuite.ohteepee.configuration.OhTeePeeCellBackground import com.composeuisuite.ohteepee.configuration.OhTeePeeCellConfiguration import com.composeuisuite.ohteepee.configuration.OhTeePeeConfigurations import com.composeuisuite.ohteepee.configuration.OhTeePeeErrorAnimationConfig @@ -110,7 +113,7 @@ private fun Sample0( val backgroundColor = Color(0xFF4F4F83) var otpValue: String by remember { mutableStateOf("") } val defaultConfig = OhTeePeeCellConfiguration.withDefaults( - backgroundColor = backgroundColor.copy(alpha = 0.6f), + cellBackground = OhTeePeeCellBackground.Solid(backgroundColor.copy(alpha = 0.6f)), textStyle = TextStyle( color = Color.White, fontSize = 18.sp, @@ -188,7 +191,7 @@ private fun Sample1( val surfaceColor = Color(0xFFFFE09A) var otpValue: String by remember { mutableStateOf("") } val defaultConfig = OhTeePeeCellConfiguration.withDefaults( - backgroundColor = backgroundColor.copy(alpha = 0.6f), + cellBackground = OhTeePeeCellBackground.Solid(backgroundColor.copy(alpha = 0.6f)), textStyle = TextStyle( color = Color.Black, fontSize = 18.sp, @@ -307,7 +310,13 @@ private fun Sample2( val backgroundColor = Color(0xFF1A1E22) var otpValue: String by remember { mutableStateOf("") } val defaultConfig = OhTeePeeCellConfiguration.withDefaults( - backgroundColor = backgroundColor.copy(alpha = 0.6f), + cellBackground = OhTeePeeCellBackground.Gradient( + brush = Brush.linearGradient( + colors = listOf(Color(0x1FAB5EEE), Color(0x1F4F0995)), + start = Offset.Zero, + end = Offset.Infinite, + ), + ), textStyle = TextStyle( color = Color.White, fontSize = 18.sp, @@ -411,7 +420,7 @@ private fun Sample3( val defaultConfig = OhTeePeeCellConfiguration.withDefaults( borderColor = Color.Transparent, borderWidth = 0.dp, - backgroundColor = backgroundColor.copy(alpha = 0.6f), + cellBackground = OhTeePeeCellBackground.Solid(backgroundColor.copy(alpha = 0.6f)), textStyle = TextStyle( color = Color.Black, ), @@ -439,10 +448,10 @@ private fun Sample3( .padding(horizontal = 4.dp) .size(48.dp), filledCellConfig = defaultConfig.copy( - backgroundColor = Color.White, + cellBackground = OhTeePeeCellBackground.Solid(Color.White), ), activeCellConfig = defaultConfig.copy( - backgroundColor = Color.White, + cellBackground = OhTeePeeCellBackground.Solid(Color.White), ), errorCellConfig = defaultConfig, ), From 306ed5a764fe236ec02f06f0ef3881bb5935f861 Mon Sep 17 00:00:00 2001 From: Maxim Petlyuk Date: Thu, 7 Nov 2024 16:51:56 +0200 Subject: [PATCH 2/2] feat!: make cell surface color transparent --- .../main/java/com/composeuisuite/ohteepee/OhTeePeeCell.kt | 4 +++- .../main/java/com/composeuisuite/ohteepee/MainActivity.kt | 6 ++++-- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/ohteepee/src/main/java/com/composeuisuite/ohteepee/OhTeePeeCell.kt b/ohteepee/src/main/java/com/composeuisuite/ohteepee/OhTeePeeCell.kt index 26d9cf7..62d5499 100644 --- a/ohteepee/src/main/java/com/composeuisuite/ohteepee/OhTeePeeCell.kt +++ b/ohteepee/src/main/java/com/composeuisuite/ohteepee/OhTeePeeCell.kt @@ -123,6 +123,8 @@ internal fun OhTeePeeCell( modifier = modifier .defaultMinSize(minHeight = MIN_HEIGHT_CELL_SIZE) .then(borderModifier), + color = Color.Transparent, + contentColor = Color.Unspecified, elevation = configurations.elevation, shape = if (configurations.enableBottomLine) RoundedCornerShape(0.dp) else cellConfiguration.shape, ) { @@ -182,7 +184,7 @@ internal fun OhTeePeeCell( ) }, colors = TextFieldDefaults.textFieldColors( - backgroundColor = Color.Transparent + backgroundColor = Color.Transparent, ), ) } diff --git a/sample/src/main/java/com/composeuisuite/ohteepee/MainActivity.kt b/sample/src/main/java/com/composeuisuite/ohteepee/MainActivity.kt index f80f1d6..a9c4346 100644 --- a/sample/src/main/java/com/composeuisuite/ohteepee/MainActivity.kt +++ b/sample/src/main/java/com/composeuisuite/ohteepee/MainActivity.kt @@ -111,9 +111,10 @@ private fun Sample0( modifier: Modifier = Modifier, ) { val backgroundColor = Color(0xFF4F4F83) + val cellBackgroundColor = Color(0xFFFFE09A).copy(alpha = 0.2f) var otpValue: String by remember { mutableStateOf("") } val defaultConfig = OhTeePeeCellConfiguration.withDefaults( - cellBackground = OhTeePeeCellBackground.Solid(backgroundColor.copy(alpha = 0.6f)), + cellBackground = OhTeePeeCellBackground.Solid(cellBackgroundColor), textStyle = TextStyle( color = Color.White, fontSize = 18.sp, @@ -312,10 +313,11 @@ private fun Sample2( val defaultConfig = OhTeePeeCellConfiguration.withDefaults( cellBackground = OhTeePeeCellBackground.Gradient( brush = Brush.linearGradient( - colors = listOf(Color(0x1FAB5EEE), Color(0x1F4F0995)), + colors = listOf(Color(0xFFAB5EEE), Color(0xFF4F0995)), start = Offset.Zero, end = Offset.Infinite, ), + alpha = 0.12f, ), textStyle = TextStyle( color = Color.White,