mirrors/bitwarden-android
1
0
Fork 0
mirror of https://github.com/bitwarden/android.git synced 2024-10-31 07:05:35 +03:00
Code Issues Projects Releases Packages Wiki Activity

Update button colors to adhere to material style (#242)

Browse source
This commit is contained in:
David Perez 2023-11-13 14:45:58 -06:00 committed by Álison Fernandes
parent 715ff06dfc
commit 2f525513a2
6 changed files with 82 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
app/src/main/java/com/x8bit/bitwarden/ui/platform/components/BitwardenFilledButton.kt
View file

@ -2,6 +2,7 @@ package com.x8bit.bitwarden.ui.platform.components
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
@ -33,14 +34,10 @@ fun BitwardenFilledButton(
vertical = 10.dp,
horizontal = 24.dp,
),
colors = ButtonDefaults.buttonColors(),
) {
Text(
text = label,
color = if (isEnabled) {
MaterialTheme.colorScheme.onPrimary
} else {
MaterialTheme.colorScheme.onSurface.copy(alpha = .38f)
},
style = MaterialTheme.typography.labelLarge,
)
}

7
app/src/main/java/com/x8bit/bitwarden/ui/platform/components/BitwardenFilledButtonWithIcon.kt
View file

@ -43,22 +43,17 @@ fun BitwardenFilledButtonWithIcon(
vertical = 10.dp,
horizontal = 24.dp,
),
colors = ButtonDefaults.buttonColors(
containerColor = MaterialTheme.colorScheme.secondaryContainer,
contentColor = MaterialTheme.colorScheme.onSecondaryContainer,
),
colors = ButtonDefaults.buttonColors(),
) {
Icon(
painter = icon,
contentDescription = null,
tint = MaterialTheme.colorScheme.onSecondaryContainer,
modifier = Modifier
.padding(end = 8.dp),
)
Text(
text = label,
color = MaterialTheme.colorScheme.onSecondaryContainer,
style = MaterialTheme.typography.labelLarge,
)
}

5
app/src/main/java/com/x8bit/bitwarden/ui/platform/components/BitwardenFilledTonalButton.kt
View file

@ -35,14 +35,11 @@ fun BitwardenFilledTonalButton(
vertical = 10.dp,
horizontal = 24.dp,
),
colors = ButtonDefaults.buttonColors(
containerColor = MaterialTheme.colorScheme.secondaryContainer,
),
colors = ButtonDefaults.filledTonalButtonColors(),
modifier = modifier,
) {
Text(
text = label,
color = MaterialTheme.colorScheme.onSecondaryContainer,
style = MaterialTheme.typography.labelLarge,
)
}

74
app/src/main/java/com/x8bit/bitwarden/ui/platform/components/BitwardenFilledTonalButtonWithIcon.kt Normal file
View file

@ -0,0 +1,74 @@
package com.x8bit.bitwarden.ui.platform.components
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.painter.Painter
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.x8bit.bitwarden.R
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
/**
* A filled tonal button for the Bitwarden UI with a customized appearance and an icon.
*
* This button uses the `secondaryContainer` color from the current [MaterialTheme.colorScheme]
* for its background and the `onSecondaryContainer` color for its label text.
*
* @param label The text to be displayed on the button.
* @param icon The icon for the button.
* @param onClick A lambda which will be invoked when the button is clicked.
* @param modifier A [Modifier] for this composable, allowing for adjustments to its appearance
* or behavior. This can be used to apply padding, layout, and other Modifiers.
* @param isEnabled Whether or not the button is enabled.
*/
@Composable
fun BitwardenFilledTonalButtonWithIcon(
label: String,
icon: Painter,
onClick: () -> Unit,
modifier: Modifier = Modifier,
isEnabled: Boolean = true,
) {
Button(
onClick = onClick,
contentPadding = PaddingValues(
vertical = 10.dp,
horizontal = 24.dp,
),
colors = ButtonDefaults.filledTonalButtonColors(),
modifier = modifier,
enabled = isEnabled,
) {
Icon(
painter = icon,
contentDescription = null,
modifier = Modifier
.padding(end = 8.dp),
)
Text(
text = label,
style = MaterialTheme.typography.labelLarge,
)
}
}
@Preview(showBackground = true)
@Composable
private fun BitwardenFilledTonalButtonWithIcon_preview() {
BitwardenTheme {
BitwardenFilledTonalButtonWithIcon(
label = "Sample Text",
icon = painterResource(id = R.drawable.ic_tooltip),
onClick = {},
modifier = Modifier.padding(horizontal = 16.dp),
)
}
}

4
app/src/main/java/com/x8bit/bitwarden/ui/platform/components/BitwardenOutlinedButtonWithIcon.kt
View file

@ -2,6 +2,7 @@ package com.x8bit.bitwarden.ui.platform.components
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.OutlinedButton
@ -41,18 +42,17 @@ fun BitwardenOutlinedButtonWithIcon(
vertical = 10.dp,
horizontal = 24.dp,
),
colors = ButtonDefaults.outlinedButtonColors(),
) {
Icon(
painter = icon,
contentDescription = null,
tint = MaterialTheme.colorScheme.primary,
modifier = Modifier
.padding(end = 8.dp),
)
Text(
text = label,
color = MaterialTheme.colorScheme.primary,
style = MaterialTheme.typography.labelLarge,
)
}

4
app/src/main/java/com/x8bit/bitwarden/ui/vault/feature/vault/VaultAddItemScreen.kt
View file

@ -29,8 +29,8 @@ import androidx.hilt.navigation.compose.hiltViewModel
import androidx.lifecycle.compose.collectAsStateWithLifecycle
import com.x8bit.bitwarden.R
import com.x8bit.bitwarden.ui.platform.base.util.EventsEffect
import com.x8bit.bitwarden.ui.platform.components.BitwardenFilledButtonWithIcon
import com.x8bit.bitwarden.ui.platform.components.BitwardenFilledTonalButton
import com.x8bit.bitwarden.ui.platform.components.BitwardenFilledTonalButtonWithIcon
import com.x8bit.bitwarden.ui.platform.components.BitwardenIconButtonWithResource
import com.x8bit.bitwarden.ui.platform.components.BitwardenListHeaderText
import com.x8bit.bitwarden.ui.platform.components.BitwardenMultiSelectButton
@ -236,7 +236,7 @@ private fun AddLoginTypeItemContent(
)
Spacer(modifier = Modifier.height(16.dp))
BitwardenFilledButtonWithIcon(
BitwardenFilledTonalButtonWithIcon(
label = stringResource(id = R.string.setup_totp),
icon = painterResource(id = R.drawable.ic_light_bulb),
onClick = loginItemTypeHandlers.onSetupTotpClick,