secant-android-wallet/ui-design-lib/src/main/java/co/electriccoin/zcash/ui/design/component/Text.kt

315 lines
8.6 KiB
Kotlin

@file:Suppress("TooManyFunctions")
package co.electriccoin.zcash.ui.design.component
import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.basicMarquee
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.outlined.AccountBox
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.text.style.TextDecoration
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.tooling.preview.Preview
import co.electriccoin.zcash.ui.design.R
import co.electriccoin.zcash.ui.design.theme.ZcashTheme
@Preview
@Composable
private fun TextComposablePreview() {
ZcashTheme(forceDarkMode = false) {
GradientSurface {
Column {
Reference(text = "Test reference text", onClick = {})
Reference(text = "User account", imageVector = Icons.Outlined.AccountBox, onClick = {})
// Preview the rest of the composable
}
}
}
}
@Composable
fun Header(
text: String,
modifier: Modifier = Modifier,
textAlign: TextAlign = TextAlign.Start,
color: Color = ZcashTheme.colors.onBackgroundHeader,
) {
Text(
text = text,
color = color,
textAlign = textAlign,
modifier = modifier,
style = ZcashTheme.typography.secondary.headlineLarge,
)
}
@Composable
fun SubHeader(
text: String,
modifier: Modifier = Modifier,
textAlign: TextAlign = TextAlign.Start,
color: Color = ZcashTheme.colors.onBackgroundHeader,
) {
Text(
text = text,
color = color,
textAlign = textAlign,
modifier = modifier,
style = ZcashTheme.typography.secondary.headlineSmall,
)
}
@Composable
@Suppress("LongParameterList")
fun BodySmall(
text: String,
modifier: Modifier = Modifier,
maxLines: Int = Int.MAX_VALUE,
overflow: TextOverflow = TextOverflow.Clip,
textAlign: TextAlign = TextAlign.Start,
color: Color = MaterialTheme.colorScheme.onBackground,
) {
Text(
text = text,
color = color,
maxLines = maxLines,
overflow = overflow,
textAlign = textAlign,
modifier = modifier,
style = MaterialTheme.typography.bodyMedium,
)
}
@Composable
@Suppress("LongParameterList")
fun Body(
text: String,
modifier: Modifier = Modifier,
maxLines: Int = Int.MAX_VALUE,
overflow: TextOverflow = TextOverflow.Clip,
textAlign: TextAlign = TextAlign.Start,
color: Color = MaterialTheme.colorScheme.onBackground,
) {
Text(
text = text,
color = color,
maxLines = maxLines,
overflow = overflow,
textAlign = textAlign,
modifier = modifier,
style = MaterialTheme.typography.bodyLarge,
)
}
@Composable
@Suppress("LongParameterList")
fun TitleLarge(
text: String,
modifier: Modifier = Modifier,
maxLines: Int = Int.MAX_VALUE,
overflow: TextOverflow = TextOverflow.Clip,
textAlign: TextAlign = TextAlign.Start,
color: Color = MaterialTheme.colorScheme.onBackground,
) {
Text(
text = text,
color = color,
maxLines = maxLines,
overflow = overflow,
textAlign = textAlign,
modifier = modifier,
style = MaterialTheme.typography.titleLarge,
)
}
@Composable
@Suppress("LongParameterList")
fun Small(
text: String,
modifier: Modifier = Modifier,
maxLines: Int = Int.MAX_VALUE,
overflow: TextOverflow = TextOverflow.Clip,
textAlign: TextAlign = TextAlign.Start,
color: Color = MaterialTheme.colorScheme.onBackground,
) {
Text(
text = text,
color = color,
maxLines = maxLines,
overflow = overflow,
textAlign = textAlign,
modifier = modifier,
style = MaterialTheme.typography.bodyMedium,
)
}
@Composable
@Suppress("LongParameterList")
fun Tiny(
text: String,
modifier: Modifier = Modifier,
maxLines: Int = Int.MAX_VALUE,
overflow: TextOverflow = TextOverflow.Clip,
textAlign: TextAlign = TextAlign.Start,
color: Color = MaterialTheme.colorScheme.onBackground,
) {
Text(
text = text,
color = color,
maxLines = maxLines,
overflow = overflow,
textAlign = textAlign,
modifier = modifier,
style = MaterialTheme.typography.labelSmall,
)
}
@Composable
fun ListItem(
text: String,
modifier: Modifier = Modifier
) {
Text(
text = text,
style = ZcashTheme.extendedTypography.listItem,
color = MaterialTheme.colorScheme.onBackground,
modifier = modifier
)
}
@Composable
fun ListHeader(
text: String,
modifier: Modifier = Modifier
) {
Text(
text = text,
style = ZcashTheme.extendedTypography.listItem,
color = ZcashTheme.colors.onBackgroundHeader,
modifier = modifier
)
}
@Suppress("LongParameterList")
@Composable
fun Reference(
text: String,
onClick: () -> Unit,
modifier: Modifier = Modifier,
textAlign: TextAlign = TextAlign.Center,
imageVector: ImageVector? = null,
imageContentDescription: String? = null
) {
Row(
modifier =
Modifier
.wrapContentSize()
.clip(RoundedCornerShape(ZcashTheme.dimens.topAppBarActionRippleCorner))
.clickable { onClick() }
.padding(all = ZcashTheme.dimens.spacingDefault)
.then(modifier),
verticalAlignment = Alignment.CenterVertically
) {
imageVector?.let {
Icon(
imageVector = imageVector,
contentDescription = imageContentDescription
)
}
Spacer(modifier = Modifier.padding(ZcashTheme.dimens.spacingTiny))
Text(
text = text,
textAlign = TextAlign.Center,
style =
ZcashTheme.typography.primary.bodyLarge
.merge(
TextStyle(
color = ZcashTheme.colors.reference,
textAlign = textAlign,
textDecoration = TextDecoration.Underline,
fontWeight = FontWeight.SemiBold
)
)
)
}
}
/**
* Pass amount of ZECs you want to display and the component appends ZEC symbol to it. We're using
* a custom font here, which is Roboto modified to replace the dollar symbol with the ZEC symbol internally.
*
* @param amount of ZECs to be displayed
* @param modifier to modify the Text UI element as needed
*/
@OptIn(ExperimentalFoundationApi::class)
@Composable
fun HeaderWithZecIcon(
amount: String,
modifier: Modifier = Modifier
) {
Text(
text = stringResource(R.string.amount_with_zec_currency_symbol, amount),
style = ZcashTheme.extendedTypography.zecBalance,
color = MaterialTheme.colorScheme.onBackground,
maxLines = 1,
modifier =
Modifier
.basicMarquee()
.then(modifier)
)
}
@Composable
fun BodyWithFiatCurrencySymbol(
amount: String,
modifier: Modifier = Modifier
) {
Text(
text = amount,
style = MaterialTheme.typography.bodyLarge,
color = MaterialTheme.colorScheme.onBackground,
modifier = modifier
)
}
@Composable
fun NavigationTabText(
text: String,
selected: Boolean,
modifier: Modifier = Modifier
) {
Text(
text = text,
style = ZcashTheme.extendedTypography.textNavTab,
fontWeight =
if (selected) {
FontWeight.Black
} else {
FontWeight.Normal
},
maxLines = 1,
overflow = TextOverflow.Visible,
color = ZcashTheme.colors.tabTextColor,
modifier = modifier
)
}