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

This commit is contained in:
joshua-livefront authored and Álison Fernandes committed 2024-06-20 17:08:07 +01:00
1 parent efa5b13838
commit c6cf9712e1
8 files changed
+247

No files matched your search

@@ -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,
)
}
}
@@ -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
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>
@@ -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>
@@ -0,0 +1,14 @@
<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="M20,10C20,15.523 15.523,20 10,20C4.477,20 0,15.523 0,10C0,4.477 4.477,0 10,0C15.523,0 20,4.477 20,10ZM16.132,16.242C14.553,17.793 12.388,18.75 10,18.75C8.688,18.75 7.443,18.461 6.326,17.943C6.436,17.588 6.604,17.144 6.821,16.725C7.127,16.133 7.467,15.715 7.78,15.559C8.256,15.321 8.739,15.313 9.297,15.313H9.325C9.578,15.313 9.878,15.313 10.156,15.264C10.46,15.211 10.791,15.093 11.067,14.817C11.358,14.526 11.476,14.166 11.405,13.791C11.347,13.482 11.169,13.226 11.047,13.063C10.993,12.991 10.936,12.919 10.885,12.856L10.851,12.814C10.79,12.737 10.741,12.673 10.701,12.615C10.646,12.536 10.63,12.495 10.625,12.484C10.631,12.35 10.704,12.177 10.872,11.842L10.893,11.798C11.033,11.52 11.25,11.089 11.25,10.625C11.25,10.148 11.03,9.545 10.644,9.063C10.243,8.56 9.607,8.125 8.75,8.125C8.297,8.125 7.843,8.291 7.447,8.478C7.048,8.667 6.636,8.915 6.256,9.143L6.241,9.152C5.844,9.39 5.481,9.607 5.143,9.767C4.796,9.931 4.547,10 4.375,10C4.17,10 4.005,9.893 3.778,9.363C3.725,9.241 3.676,9.112 3.624,8.972L3.603,8.917C3.558,8.796 3.51,8.667 3.46,8.543C3.349,8.273 3.194,7.935 2.942,7.683C2.537,7.279 2.04,7.283 1.647,7.388C2.013,6.215 2.619,5.149 3.408,4.246C3.643,4.727 4.051,5.224 4.72,5.559C5.209,5.803 5.722,5.783 6.157,5.689C6.589,5.596 7.013,5.414 7.363,5.259L7.509,5.194C7.815,5.057 8.047,4.953 8.242,4.899C8.3,4.883 8.341,4.876 8.367,4.873C8.609,5.091 8.946,5.267 9.274,5.402C9.646,5.555 10.075,5.684 10.502,5.769C10.926,5.854 11.373,5.901 11.775,5.878C12.146,5.856 12.618,5.766 12.942,5.442C13.122,5.262 13.224,5.041 13.249,4.803C13.271,4.58 13.223,4.378 13.165,4.22C13.061,3.933 12.868,3.644 12.727,3.433L12.708,3.403C12.545,3.159 12.44,2.996 12.39,2.869L13.346,1.913C15.074,2.628 16.523,3.882 17.484,5.465C17.142,5.422 16.758,5.483 16.433,5.808C16.144,6.097 15.753,6.603 15.402,7.084C15.059,7.552 14.727,8.034 14.513,8.354C14.278,8.597 13.973,8.976 13.778,9.39C13.592,9.787 13.38,10.514 13.933,11.067C14.429,11.563 14.968,11.563 15.292,11.563H15.313C15.616,11.563 15.69,11.574 15.808,11.692C15.885,11.769 15.896,11.814 15.899,11.834C15.905,11.866 15.906,11.923 15.878,12.036C15.858,12.117 15.836,12.183 15.808,12.267L15.806,12.272C15.787,12.327 15.766,12.391 15.741,12.47C15.688,12.641 15.625,12.871 15.625,13.125C15.625,13.212 15.599,13.387 15.547,13.665C15.538,13.717 15.528,13.771 15.517,13.826L15.517,13.83C15.476,14.046 15.43,14.291 15.397,14.521C15.357,14.799 15.324,15.134 15.369,15.42C15.392,15.563 15.444,15.763 15.586,15.938C15.726,16.11 15.919,16.214 16.132,16.242ZM17.008,15.24C18.102,13.779 18.75,11.965 18.75,10C18.75,9.058 18.601,8.15 18.325,7.3L18.308,7.317C18.131,7.14 17.845,6.91 17.578,6.784C17.444,6.721 17.355,6.704 17.31,6.703L17.306,6.703C17.094,6.918 16.761,7.343 16.411,7.822C16.063,8.298 15.724,8.79 15.52,9.097L15.486,9.148L15.442,9.192C15.264,9.369 15.035,9.655 14.909,9.922C14.847,10.056 14.829,10.145 14.828,10.189V10.194C14.94,10.302 15.019,10.313 15.313,10.313L15.333,10.313C15.657,10.312 16.196,10.312 16.692,10.808C16.928,11.044 17.073,11.311 17.128,11.604C17.181,11.884 17.14,12.14 17.091,12.339C17.059,12.466 17.009,12.616 16.972,12.729L16.965,12.751C16.953,12.786 16.942,12.817 16.934,12.843C16.89,12.984 16.875,13.067 16.875,13.125C16.875,13.35 16.823,13.645 16.777,13.893C16.767,13.944 16.758,13.995 16.748,14.046L16.743,14.073C16.702,14.288 16.663,14.497 16.634,14.698C16.614,14.839 16.603,14.954 16.599,15.044C16.754,15.085 16.891,15.152 17.008,15.24ZM12.009,1.482C11.364,1.33 10.691,1.25 10,1.25C7.866,1.25 5.91,2.014 4.391,3.284C4.448,3.598 4.669,4.136 5.28,4.441C5.416,4.509 5.606,4.529 5.893,4.467C6.185,4.404 6.502,4.273 6.856,4.116L6.989,4.057C7.282,3.925 7.615,3.776 7.91,3.694C8.227,3.607 8.777,3.518 9.192,3.933C9.26,4.001 9.441,4.119 9.75,4.246C10.042,4.367 10.393,4.473 10.748,4.543C11.105,4.615 11.439,4.645 11.702,4.63C11.826,4.623 11.912,4.606 11.968,4.591C11.913,4.47 11.814,4.316 11.667,4.097L11.648,4.067C11.507,3.856 11.314,3.567 11.21,3.28C11.152,3.122 11.104,2.92 11.126,2.697C11.151,2.459 11.253,2.238 11.433,2.058L12.009,1.482ZM1.309,8.976C1.27,9.312 1.25,9.653 1.25,10C1.25,13.066 2.826,15.763 5.213,17.325C5.338,16.961 5.504,16.549 5.71,16.15C6.04,15.513 6.533,14.785 7.22,14.441C7.978,14.062 8.729,14.062 9.264,14.063H9.297C9.585,14.063 9.781,14.061 9.942,14.033C10.049,14.014 10.109,13.988 10.148,13.962C10.126,13.923 10.093,13.874 10.047,13.813C10.008,13.761 9.968,13.711 9.922,13.653L9.874,13.593C9.811,13.513 9.738,13.42 9.671,13.323C9.548,13.144 9.375,12.855 9.375,12.5C9.375,12.036 9.592,11.605 9.732,11.327L9.753,11.283C9.928,10.934 10,10.761 10,10.625C10,10.477 9.907,10.142 9.668,9.844C9.445,9.564 9.143,9.375 8.75,9.375C8.578,9.375 8.329,9.444 7.982,9.608C7.644,9.768 7.281,9.985 6.884,10.223L6.869,10.232C6.489,10.46 6.077,10.708 5.678,10.897C5.282,11.084 4.828,11.25 4.375,11.25C3.33,11.25 2.87,10.419 2.629,9.856C2.564,9.704 2.506,9.55 2.453,9.41L2.432,9.354C2.386,9.232 2.345,9.121 2.302,9.015C2.203,8.773 2.128,8.643 2.069,8.578L2.064,8.578C2.02,8.579 1.931,8.596 1.797,8.659C1.632,8.737 Line truncated
android:fillColor="#1B1B1F"
android:fillType="evenOdd"/>
</group>
</vector>
@@ -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
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>