|
|
|
@ -4,25 +4,23 @@
|
|
|
|
|
|
|
|
|
|
package org.mozilla.fenix.compose.button
|
|
|
|
|
|
|
|
|
|
import android.content.res.Configuration
|
|
|
|
|
import androidx.compose.foundation.background
|
|
|
|
|
import androidx.compose.foundation.layout.Box
|
|
|
|
|
import androidx.compose.foundation.layout.Arrangement
|
|
|
|
|
import androidx.compose.foundation.layout.Column
|
|
|
|
|
import androidx.compose.foundation.layout.Spacer
|
|
|
|
|
import androidx.compose.foundation.layout.fillMaxWidth
|
|
|
|
|
import androidx.compose.foundation.layout.height
|
|
|
|
|
import androidx.compose.foundation.layout.padding
|
|
|
|
|
import androidx.compose.foundation.layout.width
|
|
|
|
|
import androidx.compose.foundation.shape.RoundedCornerShape
|
|
|
|
|
import androidx.compose.material.Button
|
|
|
|
|
import androidx.compose.material.ButtonDefaults
|
|
|
|
|
import androidx.compose.material.Icon
|
|
|
|
|
import androidx.compose.material.Text
|
|
|
|
|
import androidx.compose.runtime.Composable
|
|
|
|
|
import androidx.compose.ui.Modifier
|
|
|
|
|
import androidx.compose.ui.draw.clip
|
|
|
|
|
import androidx.compose.ui.graphics.Color
|
|
|
|
|
import androidx.compose.ui.graphics.painter.Painter
|
|
|
|
|
import androidx.compose.ui.res.painterResource
|
|
|
|
|
import androidx.compose.ui.res.stringResource
|
|
|
|
|
import androidx.compose.ui.text.font.Font
|
|
|
|
|
import androidx.compose.ui.text.font.FontFamily
|
|
|
|
|
import androidx.compose.ui.tooling.preview.Preview
|
|
|
|
|
import androidx.compose.ui.unit.dp
|
|
|
|
|
import androidx.compose.ui.unit.sp
|
|
|
|
@ -31,32 +29,39 @@ import org.mozilla.fenix.theme.FirefoxTheme
|
|
|
|
|
import org.mozilla.fenix.theme.Theme
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Primary button.
|
|
|
|
|
* Base component for buttons.
|
|
|
|
|
*
|
|
|
|
|
* @param text The button text to be displayed.
|
|
|
|
|
* @param icon Optional button icon to be displayed.
|
|
|
|
|
* @param textColor [Color] to apply to the button text.
|
|
|
|
|
* @param backgroundColor The background [Color] of the button.
|
|
|
|
|
* @param icon Optional [Painter] used to display a [Icon] before the button text.
|
|
|
|
|
* @param tint Tint [Color] to be applied to the icon.
|
|
|
|
|
* @param onClick Invoked when the user clicks on the button.
|
|
|
|
|
*/
|
|
|
|
|
@Composable
|
|
|
|
|
fun PrimaryButton(
|
|
|
|
|
fun Button(
|
|
|
|
|
text: String,
|
|
|
|
|
textColor: Color,
|
|
|
|
|
backgroundColor: Color,
|
|
|
|
|
icon: Painter? = null,
|
|
|
|
|
tint: Color,
|
|
|
|
|
onClick: () -> Unit,
|
|
|
|
|
) {
|
|
|
|
|
Button(
|
|
|
|
|
androidx.compose.material.Button(
|
|
|
|
|
onClick = onClick,
|
|
|
|
|
modifier = Modifier
|
|
|
|
|
.clip(RoundedCornerShape(size = 4.dp))
|
|
|
|
|
.fillMaxWidth()
|
|
|
|
|
.height(36.dp),
|
|
|
|
|
elevation = ButtonDefaults.elevation(defaultElevation = 0.dp, pressedElevation = 0.dp),
|
|
|
|
|
colors = ButtonDefaults.outlinedButtonColors(backgroundColor = FirefoxTheme.colors.actionPrimary),
|
|
|
|
|
colors = ButtonDefaults.outlinedButtonColors(
|
|
|
|
|
backgroundColor = backgroundColor,
|
|
|
|
|
),
|
|
|
|
|
) {
|
|
|
|
|
if (icon != null) {
|
|
|
|
|
icon?.let { painter ->
|
|
|
|
|
Icon(
|
|
|
|
|
painter = icon,
|
|
|
|
|
painter = painter,
|
|
|
|
|
contentDescription = null,
|
|
|
|
|
tint = FirefoxTheme.colors.iconOnColor,
|
|
|
|
|
tint = tint,
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
Spacer(modifier = Modifier.width(8.dp))
|
|
|
|
@ -64,22 +69,137 @@ fun PrimaryButton(
|
|
|
|
|
|
|
|
|
|
Text(
|
|
|
|
|
text = text,
|
|
|
|
|
color = FirefoxTheme.colors.textOnColorPrimary,
|
|
|
|
|
color = textColor,
|
|
|
|
|
fontSize = 14.sp,
|
|
|
|
|
fontFamily = FontFamily(Font(R.font.metropolis_semibold)),
|
|
|
|
|
letterSpacing = 0.sp,
|
|
|
|
|
maxLines = 2
|
|
|
|
|
letterSpacing = 0.25.sp,
|
|
|
|
|
maxLines = 1,
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Primary button.
|
|
|
|
|
*
|
|
|
|
|
* @param text The button text to be displayed.
|
|
|
|
|
* @param icon Optional [Painter] used to display an [Icon] before the button text.
|
|
|
|
|
* @param onClick Invoked when the user clicks on the button.
|
|
|
|
|
*/
|
|
|
|
|
@Composable
|
|
|
|
|
@Preview
|
|
|
|
|
private fun PrimaryButtonPreview() {
|
|
|
|
|
fun PrimaryButton(
|
|
|
|
|
text: String,
|
|
|
|
|
icon: Painter? = null,
|
|
|
|
|
onClick: () -> Unit,
|
|
|
|
|
) {
|
|
|
|
|
Button(
|
|
|
|
|
text = text,
|
|
|
|
|
textColor = FirefoxTheme.colors.textActionPrimary,
|
|
|
|
|
backgroundColor = FirefoxTheme.colors.actionPrimary,
|
|
|
|
|
icon = icon,
|
|
|
|
|
tint = FirefoxTheme.colors.iconActionPrimary,
|
|
|
|
|
onClick = onClick,
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Secondary button.
|
|
|
|
|
*
|
|
|
|
|
* @param text The button text to be displayed.
|
|
|
|
|
* @param icon Optional [Painter] used to display an [Icon] before the button text.
|
|
|
|
|
* @param onClick Invoked when the user clicks on the button.
|
|
|
|
|
*/
|
|
|
|
|
@Composable
|
|
|
|
|
fun SecondaryButton(
|
|
|
|
|
text: String,
|
|
|
|
|
icon: Painter? = null,
|
|
|
|
|
onClick: () -> Unit,
|
|
|
|
|
) {
|
|
|
|
|
Button(
|
|
|
|
|
text = text,
|
|
|
|
|
textColor = FirefoxTheme.colors.textActionSecondary,
|
|
|
|
|
backgroundColor = FirefoxTheme.colors.actionSecondary,
|
|
|
|
|
icon = icon,
|
|
|
|
|
tint = FirefoxTheme.colors.iconActionSecondary,
|
|
|
|
|
onClick = onClick,
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Tertiary button.
|
|
|
|
|
*
|
|
|
|
|
* @param text The button text to be displayed.
|
|
|
|
|
* @param icon Optional [Painter] used to display an [Icon] before the button text.
|
|
|
|
|
* @param onClick Invoked when the user clicks on the button.
|
|
|
|
|
*/
|
|
|
|
|
@Composable
|
|
|
|
|
fun TertiaryButton(
|
|
|
|
|
text: String,
|
|
|
|
|
icon: Painter? = null,
|
|
|
|
|
onClick: () -> Unit,
|
|
|
|
|
) {
|
|
|
|
|
Button(
|
|
|
|
|
text = text,
|
|
|
|
|
textColor = FirefoxTheme.colors.textActionTertiary,
|
|
|
|
|
backgroundColor = FirefoxTheme.colors.actionTertiary,
|
|
|
|
|
icon = icon,
|
|
|
|
|
tint = FirefoxTheme.colors.iconActionTertiary,
|
|
|
|
|
onClick = onClick,
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Destructive button.
|
|
|
|
|
*
|
|
|
|
|
* @param text The button text to be displayed.
|
|
|
|
|
* @param icon Optional [Painter] used to display an [Icon] before the button text.
|
|
|
|
|
* @param onClick Invoked when the user clicks on the button.
|
|
|
|
|
*/
|
|
|
|
|
@Composable
|
|
|
|
|
fun DestructiveButton(
|
|
|
|
|
text: String,
|
|
|
|
|
icon: Painter? = null,
|
|
|
|
|
onClick: () -> Unit,
|
|
|
|
|
) {
|
|
|
|
|
Button(
|
|
|
|
|
text = text,
|
|
|
|
|
textColor = FirefoxTheme.colors.textWarningButton,
|
|
|
|
|
backgroundColor = FirefoxTheme.colors.actionSecondary,
|
|
|
|
|
icon = icon,
|
|
|
|
|
tint = FirefoxTheme.colors.iconWarningButton,
|
|
|
|
|
onClick = onClick,
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@Composable
|
|
|
|
|
@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
|
|
|
|
|
@Preview(uiMode = Configuration.UI_MODE_NIGHT_NO)
|
|
|
|
|
private fun ButtonPreview() {
|
|
|
|
|
FirefoxTheme(theme = Theme.getTheme(isPrivate = false)) {
|
|
|
|
|
Box(Modifier.background(FirefoxTheme.colors.layer1)) {
|
|
|
|
|
Column(
|
|
|
|
|
modifier = Modifier
|
|
|
|
|
.background(FirefoxTheme.colors.layer1)
|
|
|
|
|
.padding(16.dp),
|
|
|
|
|
verticalArrangement = Arrangement.spacedBy(16.dp)
|
|
|
|
|
) {
|
|
|
|
|
PrimaryButton(
|
|
|
|
|
text = stringResource(R.string.recent_tabs_show_all),
|
|
|
|
|
text = "Label",
|
|
|
|
|
icon = painterResource(R.drawable.ic_tab_collection),
|
|
|
|
|
onClick = {},
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
SecondaryButton(
|
|
|
|
|
text = "Label",
|
|
|
|
|
icon = painterResource(R.drawable.ic_tab_collection),
|
|
|
|
|
onClick = {},
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
TertiaryButton(
|
|
|
|
|
text = "Label",
|
|
|
|
|
icon = painterResource(R.drawable.ic_tab_collection),
|
|
|
|
|
onClick = {},
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
DestructiveButton(
|
|
|
|
|
text = "Label",
|
|
|
|
|
icon = painterResource(R.drawable.ic_tab_collection),
|
|
|
|
|
onClick = {},
|
|
|
|
|
)
|
|
|
|
|