zec
/
secant-android-wallet
mirror of https://github.com/zcash/secant-android-wallet.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Added Checkbox changed Primary button and TextField (#957) 

* Added Checkbox changed Primary button and TextField

* Did code refactoring

* Moved colors and dimens to ZcashTheme color and dimens files

* Changed color resource for Primary button

* Added buttonShadowColor to ExtendedColors

---------

Co-authored-by: Venkatareddy Seelam <45472390+venkatAmigo@users.noreply.github.com>
This commit is contained in:
Venkat-corebts 2023-09-04 14:35:26 +05:30 committed by GitHub
parent ad38e3d4db
commit 3bababb0a6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 169 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
ui-design-lib/src/main/java/co/electriccoin/zcash/ui/design/component/Button.kt
View File

@ -1,7 +1,10 @@
package co.electriccoin.zcash.ui.design.component
import android.graphics.BlurMaskFilter
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.defaultMinSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Button
@ -11,8 +14,15 @@ import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.drawBehind
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.Paint
import androidx.compose.ui.graphics.PaintingStyle
import androidx.compose.ui.graphics.RectangleShape
import androidx.compose.ui.graphics.drawscope.drawIntoCanvas
import androidx.compose.ui.graphics.toArgb
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import co.electriccoin.zcash.ui.design.theme.ZcashTheme
@ -26,11 +36,13 @@ private fun ButtonComposablePreview() {
SecondaryButton(onClick = { }, text = "Secondary")
TertiaryButton(onClick = { }, text = "Tertiary")
NavigationButton(onClick = { }, text = "Navigation")
DangerousButton(onClick = { }, text = "Dangerous")
}
}
}
}
@Suppress("LongParameterList")
@Composable
fun PrimaryButton(
onClick: () -> Unit,
@ -40,24 +52,34 @@ fun PrimaryButton(
horizontal = ZcashTheme.dimens.spacingDefault,
vertical = ZcashTheme.dimens.spacingSmall
),
enabled: Boolean = true
enabled: Boolean = true,
buttonColor: Color = MaterialTheme.colorScheme.primary,
textColor: Color = MaterialTheme.colorScheme.onPrimary,
) {
Button(
shape = RectangleShape,
onClick = onClick,
modifier = modifier.then(
Modifier
.fillMaxWidth()
.padding(outerPaddingValues)
),
enabled = enabled,
colors = buttonColors(containerColor = MaterialTheme.colorScheme.primary)
modifier = modifier
.padding(outerPaddingValues)
.shadow(
ZcashTheme.colors.buttonShadowColor,
borderRadius = 0.dp,
offsetX = ZcashTheme.dimens.shadowOffsetX,
offsetY = ZcashTheme.dimens.shadowOffsetY,
spread = ZcashTheme.dimens.shadowSpread,
blurRadius = 0.dp,
stroke = textColor != MaterialTheme.colorScheme.primary,
)
.defaultMinSize(ZcashTheme.dimens.defaultButtonWidth, ZcashTheme.dimens.defaultButtonHeight)
.border(1.dp, Color.Black),
colors = buttonColors(
buttonColor,
disabledContainerColor = ZcashTheme.colors.disabledButtonColor,
disabledContentColor = ZcashTheme.colors.disabledButtonTextColor
),
onClick = onClick,
) {
Text(
style = MaterialTheme.typography.labelLarge,
text = text,
color = MaterialTheme.colorScheme.onPrimary
)
Text(text = text, color = textColor, style = MaterialTheme.typography.labelLarge)
}
}
@ -172,3 +194,48 @@ fun DangerousButton(
)
}
}
@Suppress("LongParameterList")
fun Modifier.shadow(
color: Color = Color.Black,
borderRadius: Dp = 0.dp,
blurRadius: Dp = 0.dp,
offsetY: Dp = 0.dp,
offsetX: Dp = 0.dp,
spread: Dp = 0f.dp,
stroke: Boolean = true,
modifier: Modifier = Modifier
) = this.then(
modifier.drawBehind {
this.drawIntoCanvas {
val paint = Paint()
if (stroke) {
paint.style = PaintingStyle.Stroke
paint.strokeWidth = 2f
paint.color = Color.Black
}
val frameworkPaint = paint.asFrameworkPaint()
val spreadPixel = spread.toPx()
val leftPixel = (0f - spreadPixel) + offsetX.toPx()
val topPixel = (0f - spreadPixel) + offsetY.toPx()
val rightPixel = (this.size.width + spreadPixel)
val bottomPixel = (this.size.height + spreadPixel)
if (blurRadius != 0.dp) {
frameworkPaint.maskFilter =
(BlurMaskFilter(blurRadius.toPx(), BlurMaskFilter.Blur.NORMAL))
}
frameworkPaint.color = color.toArgb()
it.drawRoundRect(
left = leftPixel,
top = topPixel,
right = rightPixel,
bottom = bottomPixel,
radiusX = borderRadius.toPx(),
radiusY = borderRadius.toPx(),
paint
)
}
}
)

41
ui-design-lib/src/main/java/co/electriccoin/zcash/ui/design/component/Checkbox.kt Normal file
View File

@ -0,0 +1,41 @@
package co.electriccoin.zcash.ui.design.component
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Checkbox
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import co.electriccoin.zcash.ui.design.theme.ZcashTheme
@Preview
@Composable
private fun ComposablePreview() {
val checkBoxState = remember { mutableStateOf(false) }
ZcashTheme(darkTheme = false) {
CheckBox(text = "test", onCheckedChange = { checkBoxState.value = it }, checked = checkBoxState.value)
}
}
@Composable
fun CheckBox(
onCheckedChange: ((Boolean) -> Unit),
text: String,
modifier: Modifier = Modifier,
checked: Boolean = false
) {
Row(modifier = Modifier.padding(8.dp), verticalAlignment = Alignment.CenterVertically) {
Checkbox(
checked = checked,
onCheckedChange = onCheckedChange,
enabled = true,
modifier = modifier
)
Text(text = text)
}
}

12
ui-design-lib/src/main/java/co/electriccoin/zcash/ui/design/component/TextField.kt
View File

@ -1,7 +1,9 @@
package co.electriccoin.zcash.ui.design.component
import androidx.compose.foundation.border
import androidx.compose.foundation.text.KeyboardActions
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.TextField
import androidx.compose.material3.TextFieldColors
import androidx.compose.material3.TextFieldDefaults
@ -10,6 +12,7 @@ import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.Shape
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.unit.dp
@Suppress("LongParameterList")
@Composable
@ -28,7 +31,8 @@ fun FormTextField(
errorContainerColor = Color.Transparent,
),
keyboardActions: KeyboardActions = KeyboardActions.Default,
shape: Shape = TextFieldDefaults.shape
shape: Shape = TextFieldDefaults.shape,
withBorder: Boolean = true, // To enable border around the TextField
) {
TextField(
value = value,
@ -36,7 +40,11 @@ fun FormTextField(
label = label,
keyboardOptions = keyboardOptions,
colors = colors,
modifier = modifier,
modifier = if (withBorder) {
modifier.border(width = 1.dp, color = MaterialTheme.colorScheme.primary)
} else {
modifier
},
leadingIcon = leadingIcon,
trailingIcon = trailingIcon,
keyboardActions = keyboardActions,

10
ui-design-lib/src/main/java/co/electriccoin/zcash/ui/design/theme/Dimens.kt
View File

@ -20,6 +20,11 @@ data class Dimens(
val spacingHuge: Dp,
// List of custom spacings:
val shadowOffsetX: Dp,
val shadowOffsetY: Dp,
val shadowSpread: Dp,
val defaultButtonWidth: Dp,
val defaultButtonHeight: Dp,
)
private val defaultDimens = Dimens(
@ -31,6 +36,11 @@ private val defaultDimens = Dimens(
spacingLarge = 24.dp,
spacingXlarge = 32.dp,
spacingHuge = 64.dp,
shadowOffsetX = 20.dp,
shadowOffsetY = 20.dp,
shadowSpread = 10.dp,
defaultButtonWidth = 230.dp,
defaultButtonHeight = 50.dp,
)
private val normalDimens = defaultDimens

5
ui-design-lib/src/main/java/co/electriccoin/zcash/ui/design/theme/ExtendedColors.kt
View File

@ -26,7 +26,10 @@ data class ExtendedColors(
val addressHighlightTransparent: Color,
val dangerous: Color,
val onDangerous: Color,
val reference: Color
val reference: Color,
val disabledButtonColor: Color,
val disabledButtonTextColor: Color,
val buttonShadowColor: Color,
) {
@Composable
fun surfaceGradient() = Brush.verticalGradient(

29
ui-design-lib/src/main/java/co/electriccoin/zcash/ui/design/theme/internal/Color.kt
View File

@ -54,6 +54,11 @@ internal object Dark {
val onDangerous = Color(0xFFFFFFFF)
val reference = Color(0xFF10A5FF)
val disabledButtonColor = Color(0xFFB7B7B7)
val disabledButtonTextColor = Color(0xFFDDDDDD)
val buttonShadowColor = Color(0xFFFFFFFF)
}
internal object Light {
@ -106,6 +111,10 @@ internal object Light {
val onDangerous = Color(0xFFFFFFFF)
val reference = Color(0xFF10A5FF)
val disabledButtonColor = Color(0xFFB7B7B7)
val disabledButtonTextColor = Color(0xFFDDDDDD)
val buttonShadowColor = Color(0xFF000000)
}
internal val DarkColorPalette = darkColorScheme(
@ -116,7 +125,7 @@ internal val DarkColorPalette = darkColorScheme(
surface = Dark.backgroundStart,
onSurface = Dark.textBodyOnBackground,
background = Dark.backgroundStart,
onBackground = Dark.textBodyOnBackground
onBackground = Dark.textBodyOnBackground,
)
internal val LightColorPalette = lightColorScheme(
@ -127,7 +136,7 @@ internal val LightColorPalette = lightColorScheme(
surface = Light.backgroundStart,
onSurface = Light.textBodyOnBackground,
background = Light.backgroundStart,
onBackground = Light.textBodyOnBackground
onBackground = Light.textBodyOnBackground,
)
internal val DarkExtendedColorPalette = ExtendedColors(
@ -149,7 +158,11 @@ internal val DarkExtendedColorPalette = ExtendedColors(
addressHighlightTransparent = Dark.addressHighlightTransparent,
dangerous = Dark.dangerous,
onDangerous = Dark.onDangerous,
reference = Dark.reference
disabledButtonTextColor = Dark.disabledButtonTextColor,
disabledButtonColor = Dark.disabledButtonColor,
reference = Dark.reference,
buttonShadowColor = Dark.buttonShadowColor,
)
internal val LightExtendedColorPalette = ExtendedColors(
@ -171,7 +184,10 @@ internal val LightExtendedColorPalette = ExtendedColors(
addressHighlightTransparent = Light.addressHighlightTransparent,
dangerous = Light.dangerous,
onDangerous = Light.onDangerous,
reference = Light.reference
disabledButtonTextColor = Light.disabledButtonTextColor,
disabledButtonColor = Light.disabledButtonColor,
reference = Light.reference,
buttonShadowColor = Light.buttonShadowColor
)
@Suppress("CompositionLocalAllowlist")
@ -195,6 +211,9 @@ internal val LocalExtendedColors = staticCompositionLocalOf {
addressHighlightTransparent = Color.Unspecified,
dangerous = Color.Unspecified,
onDangerous = Color.Unspecified,
reference = Color.Unspecified
disabledButtonTextColor = Color.Unspecified,
disabledButtonColor = Color.Unspecified,
reference = Color.Unspecified,
buttonShadowColor = Color.Unspecified,
)
}