mirror of
https://github.com/bitwarden/android.git
synced 2025-03-16 19:28:44 +03:00
BIT-534: Bitwarden shared composables and icons for my vault list screen (#192)
This commit is contained in:
joshua-livefront
Álison Fernandes
parent
efa5b13838
commit
c6cf9712e1
8 changed files with 247 additions and 0 deletions
|
|
@ -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,
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
@ -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,
|
||||
)
|
||||
}
|
||||
}
|
||||
13
app/src/main/res/drawable/ic_card_item.xml
Normal file
13
app/src/main/res/drawable/ic_card_item.xml
Normal 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>
|
||||
10
app/src/main/res/drawable/ic_folder.xml
Normal file
10
app/src/main/res/drawable/ic_folder.xml
Normal 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>
|
||||
26
app/src/main/res/drawable/ic_identity_item.xml
Normal file
26
app/src/main/res/drawable/ic_identity_item.xml
Normal 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>
|
||||
14
app/src/main/res/drawable/ic_login_item.xml
Normal file
14
app/src/main/res/drawable/ic_login_item.xml
Normal file
File diff suppressed because one or more lines are too long
10
app/src/main/res/drawable/ic_secure_note_item.xml
Normal file
10
app/src/main/res/drawable/ic_secure_note_item.xml
Normal 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>
|
||||
23
app/src/main/res/drawable/ic_trash.xml
Normal file
23
app/src/main/res/drawable/ic_trash.xml
Normal 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>
|
||||
Loading…
Add table
Reference in a new issue