315 lines
8.6 KiB
Kotlin
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
|
|
)
|
|
}
|