BIT-534: Bitwarden shared composables and icons for my vault list screen (#192)

This commit is contained in:
joshua-livefront 2023-11-01 16:36:09 -04:00 committed by Álison Fernandes
parent efa5b13838
commit c6cf9712e1
8 changed files with 247 additions and 0 deletions

View file

@ -0,0 +1,59 @@
package com.x8bit.bitwarden.ui.platform.components
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
/**
* Represents a Bitwarden-styled label text.
*
* @param label The text content for the label.
* @param supportingLabel The text for the supporting label.
* @param modifier The [Modifier] to be applied to the label.
*/
@Composable
fun BitwardenListHeaderTextWithSupportLabel(
label: String,
supportingLabel: String,
modifier: Modifier,
) {
Row(
modifier = modifier
.padding(
top = 12.dp,
bottom = 4.dp,
),
horizontalArrangement = Arrangement.SpaceBetween,
) {
Text(
text = label,
style = MaterialTheme.typography.labelMedium,
color = MaterialTheme.colorScheme.onSurfaceVariant,
)
Text(
text = supportingLabel,
style = MaterialTheme.typography.labelSmall,
color = MaterialTheme.colorScheme.onSurfaceVariant,
)
}
}
@Preview(showBackground = true)
@Composable
private fun BitwardenListHeaderTextWithSupportLabel_preview() {
BitwardenTheme {
BitwardenListHeaderTextWithSupportLabel(
label = "Sample Label",
supportingLabel = "0",
modifier = Modifier,
)
}
}

View file

@ -0,0 +1,92 @@
package com.x8bit.bitwarden.ui.vault.feature.vault
import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.padding
import androidx.compose.material.ripple.rememberRipple
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.painter.Painter
import androidx.compose.ui.res.painterResource
import com.x8bit.bitwarden.R
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
/**
* A composable function that displays a list item.
* The list item consists of a start icon, a label, a supporting label, and a trailing icon.
*
* @param startIcon The [Painter] object used to draw the icon at the start of the list item.
* @param label The main text label to be displayed in the list item.
* @param supportingLabel The secondary supporting text label to be displayed beside the main label.
* @param onClick A lambda function that is invoked when the list item is clicked.
* @param modifier The [Modifier] to be applied to the [Row] composable that holds the list item.
*/
@Composable
fun VaultListItem(
startIcon: Painter,
label: String,
supportingLabel: String,
onClick: () -> Unit,
modifier: Modifier,
) {
Row(
modifier = Modifier
.clickable(
interactionSource = remember { MutableInteractionSource() },
indication = rememberRipple(color = MaterialTheme.colorScheme.primary),
onClick = onClick,
)
.padding(vertical = 16.dp)
.then(modifier),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.spacedBy(16.dp),
) {
Icon(
painter = startIcon,
contentDescription = null,
tint = MaterialTheme.colorScheme.onSurface,
)
Text(
text = label,
style = MaterialTheme.typography.bodyLarge,
color = MaterialTheme.colorScheme.onSurface,
modifier = Modifier.weight(1f),
)
Text(
text = supportingLabel,
style = MaterialTheme.typography.labelSmall,
color = MaterialTheme.colorScheme.onSurfaceVariant,
)
Icon(
painter = painterResource(id = R.drawable.ic_navigate_next),
contentDescription = null,
tint = MaterialTheme.colorScheme.onSurfaceVariant,
)
}
}
@Preview(showBackground = true)
@Composable
private fun VaultListItem_preview() {
BitwardenTheme {
VaultListItem(
startIcon = painterResource(id = R.drawable.ic_login_item),
label = "Main Text",
supportingLabel = "100",
onClick = {},
modifier = Modifier,
)
}
}

View file

@ -0,0 +1,13 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24"
android:viewportHeight="24">
<path
android:pathData="M15.125,14.5C14.78,14.5 14.5,14.78 14.5,15.125C14.5,15.47 14.78,15.75 15.125,15.75H18.875C19.22,15.75 19.5,15.47 19.5,15.125C19.5,14.78 19.22,14.5 18.875,14.5H15.125Z"
android:fillColor="#1B1B1F"/>
<path
android:pathData="M20.125,4.5H3.875C2.839,4.5 2,5.339 2,6.375V17.625C2,18.66 2.839,19.5 3.875,19.5H20.125C21.16,19.5 22,18.66 22,17.625V6.375C22,5.339 21.16,4.5 20.125,4.5ZM3.25,6.375C3.25,6.03 3.53,5.75 3.875,5.75H20.125C20.47,5.75 20.75,6.03 20.75,6.375V7H3.25V6.375ZM3.25,17.625V9.5H20.75V17.625C20.75,17.97 20.47,18.25 20.125,18.25H3.875C3.53,18.25 3.25,17.97 3.25,17.625Z"
android:fillColor="#1B1B1F"
android:fillType="evenOdd"/>
</vector>

View file

@ -0,0 +1,10 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="20dp"
android:height="20dp"
android:viewportWidth="20"
android:viewportHeight="20">
<path
android:pathData="M18.75,9.375V6.875C18.75,5.84 17.91,5 16.875,5H10V4.375C10,3.34 9.161,2.5 8.125,2.5H1.875C0.839,2.5 0,3.34 0,4.375V16.563C0,17.771 0.979,18.75 2.188,18.75H4.375H16.563H16.875C17.91,18.75 18.75,17.911 18.75,16.875V16.563V9.375ZM2.5,16.875V9.375C2.5,8.34 3.339,7.5 4.375,7.5H5H16.875C17.094,7.5 17.305,7.538 17.5,7.607V7.5V6.875C17.5,6.53 17.22,6.25 16.875,6.25H9.375C9.03,6.25 8.75,5.97 8.75,5.625V4.375C8.75,4.03 8.47,3.75 8.125,3.75H1.875C1.53,3.75 1.25,4.03 1.25,4.375V16.875C1.25,17.663 2.5,17.669 2.5,16.875ZM16.563,17.5C17.08,17.5 17.5,17.08 17.5,16.563V9.375C17.5,9.03 17.22,8.75 16.875,8.75H5H4.375C4.03,8.75 3.75,9.03 3.75,9.375V16.875C3.75,17.22 4.03,17.5 4.375,17.5H16.563Z"
android:fillColor="#1B1B1F"
android:fillType="evenOdd"/>
</vector>

View file

@ -0,0 +1,26 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="20dp"
android:height="20dp"
android:viewportWidth="20"
android:viewportHeight="20">
<path
android:pathData="M1.875,2.5H18.125C19.16,2.5 20,3.339 20,4.375V15.625C20,16.66 19.16,17.5 18.125,17.5H1.875C0.839,17.5 0,16.66 0,15.625V4.375C0,3.339 0.839,2.5 1.875,2.5ZM1.875,3.75C1.53,3.75 1.25,4.03 1.25,4.375V15.625C1.25,15.97 1.53,16.25 1.875,16.25H18.125C18.47,16.25 18.75,15.97 18.75,15.625V4.375C18.75,4.03 18.47,3.75 18.125,3.75H1.875Z"
android:fillColor="#1B1B1F"
android:fillType="evenOdd"/>
<path
android:pathData="M11.25,13.125C11.25,12.78 11.483,12.5 11.771,12.5H16.979C17.267,12.5 17.5,12.78 17.5,13.125C17.5,13.47 17.267,13.75 16.979,13.75H11.771C11.483,13.75 11.25,13.47 11.25,13.125Z"
android:fillColor="#1B1B1F"
android:fillType="evenOdd"/>
<path
android:pathData="M11.25,10.625C11.25,10.28 11.483,10 11.771,10H16.979C17.267,10 17.5,10.28 17.5,10.625C17.5,10.97 17.267,11.25 16.979,11.25H11.771C11.483,11.25 11.25,10.97 11.25,10.625Z"
android:fillColor="#1B1B1F"
android:fillType="evenOdd"/>
<path
android:pathData="M11.25,8.125C11.25,7.78 11.46,7.5 11.719,7.5H14.531C14.79,7.5 15,7.78 15,8.125C15,8.47 14.79,8.75 14.531,8.75H11.719C11.46,8.75 11.25,8.47 11.25,8.125Z"
android:fillColor="#1B1B1F"
android:fillType="evenOdd"/>
<path
android:pathData="M8.187,10.33C8.539,9.899 8.75,9.349 8.75,8.75C8.75,7.369 7.631,6.25 6.25,6.25C4.869,6.25 3.75,7.369 3.75,8.75C3.75,9.349 3.961,9.899 4.313,10.33C3.04,10.864 2.5,12.034 2.5,13.75C2.5,15 4.179,15 6.25,15C8.321,15 10,15 10,13.75C10,12.034 9.46,10.864 8.187,10.33ZM7.5,8.75C7.5,9.44 6.94,10 6.25,10C5.56,10 5,9.44 5,8.75C5,8.06 5.56,7.5 6.25,7.5C6.94,7.5 7.5,8.06 7.5,8.75ZM6.25,11.25C5.101,11.25 4.557,11.535 4.278,11.829C4.001,12.12 3.774,12.642 3.752,13.592C3.786,13.602 3.827,13.614 3.879,13.626C4.387,13.743 5.156,13.75 6.25,13.75C7.344,13.75 8.113,13.743 8.621,13.626C8.673,13.614 8.714,13.602 8.748,13.592C8.726,12.642 8.499,12.12 8.222,11.829C7.943,11.535 7.399,11.25 6.25,11.25Z"
android:fillColor="#1B1B1F"
android:fillType="evenOdd"/>
</vector>

File diff suppressed because one or more lines are too long

View file

@ -0,0 +1,10 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="20dp"
android:height="20dp"
android:viewportWidth="20"
android:viewportHeight="20">
<path
android:pathData="M1.25,1.875V18.125C1.25,19.16 2.089,20 3.125,20H10.536C11.055,20 11.552,19.784 11.906,19.404L16.996,13.95C17.32,13.602 17.5,13.145 17.5,12.67V1.875C17.5,0.839 16.66,0 15.625,0H3.125C2.089,0 1.25,0.839 1.25,1.875ZM15.472,13.75H11.25V18.275L15.472,13.75ZM10,18.75V13.75C10,13.06 10.56,12.5 11.25,12.5H16.25V1.875C16.25,1.53 15.97,1.25 15.625,1.25L3.125,1.25C2.78,1.25 2.5,1.53 2.5,1.875V18.125C2.5,18.47 2.78,18.75 3.125,18.75H10Z"
android:fillColor="#1B1B1F"
android:fillType="evenOdd"/>
</vector>

View file

@ -0,0 +1,23 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="20dp"
android:height="20dp"
android:viewportWidth="20"
android:viewportHeight="20">
<group>
<clip-path
android:pathData="M0,0h20v20h-20z"/>
<path
android:pathData="M13.125,6.25C12.78,6.25 12.5,6.53 12.5,6.875V14.375C12.5,14.72 12.78,15 13.125,15C13.47,15 13.75,14.72 13.75,14.375V6.875C13.75,6.53 13.47,6.25 13.125,6.25Z"
android:fillColor="#1B1B1F"/>
<path
android:pathData="M6.25,6.875C6.25,6.53 6.53,6.25 6.875,6.25C7.22,6.25 7.5,6.53 7.5,6.875V14.375C7.5,14.72 7.22,15 6.875,15C6.53,15 6.25,14.72 6.25,14.375V6.875Z"
android:fillColor="#1B1B1F"/>
<path
android:pathData="M10,6.25C9.655,6.25 9.375,6.53 9.375,6.875V14.375C9.375,14.72 9.655,15 10,15C10.345,15 10.625,14.72 10.625,14.375V6.875C10.625,6.53 10.345,6.25 10,6.25Z"
android:fillColor="#1B1B1F"/>
<path
android:pathData="M6.661,2.155C6.556,2.366 6.339,2.5 6.102,2.5H0.625C0.28,2.5 0,2.78 0,3.125C0,3.47 0.28,3.75 0.625,3.75H2.6C2.6,3.814 2.602,3.878 2.607,3.942L3.665,17.692C3.765,18.994 4.851,20 6.157,20H13.842C15.149,20 16.235,18.994 16.335,17.692L17.393,3.942C17.398,3.878 17.4,3.814 17.4,3.75H19.375C19.72,3.75 20,3.47 20,3.125C20,2.78 19.72,2.5 19.375,2.5H13.898C13.661,2.5 13.444,2.366 13.339,2.155L12.78,1.037C12.462,0.401 11.813,0 11.102,0H8.898C8.187,0 7.538,0.401 7.22,1.037L6.661,2.155ZM8.898,1.25C8.661,1.25 8.444,1.384 8.339,1.596L7.886,2.5H12.114L11.661,1.596C11.556,1.384 11.339,1.25 11.102,1.25H8.898ZM3.85,3.75H16.15C16.15,3.782 16.149,3.814 16.146,3.846L15.089,17.596C15.039,18.247 14.496,18.75 13.842,18.75H6.157C5.504,18.75 4.961,18.247 4.911,17.596L3.853,3.846C3.851,3.814 3.85,3.782 3.85,3.75Z"
android:fillColor="#1B1B1F"
android:fillType="evenOdd"/>
</group>
</vector>