Skip to content

Commit ac6c90e

Browse files
david-livefrontdavid-livefront
authored
PM-18013: Update the View Item screens (#4699)
1 parent eb3bc83 commit ac6c90e

20 files changed

+292
-189
lines changed

‎app/src/main/java/com/x8bit/bitwarden/ui/platform/base/util/StringResExtensions.kt

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,9 @@ import androidx.compose.ui.text.AnnotatedString
1313
import androidx.compose.ui.text.LinkAnnotation
1414
import androidx.compose.ui.text.SpanStyle
1515
import androidx.compose.ui.text.TextLinkStyles
16-
import androidx.compose.ui.text.font.FontWeight
1716
import androidx.core.text.getSpans
1817
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
18+
import com.x8bit.bitwarden.ui.platform.util.spanStyleOf
1919

2020
/**
2121
* Creates an [AnnotatedString] from a string resource allowing for optional arguments
@@ -153,22 +153,23 @@ private fun Annotation.isArgAnnotation(): Boolean =
153153
val bitwardenDefaultSpanStyle: SpanStyle
154154
@Composable
155155
@ReadOnlyComposable
156-
get() = SpanStyle(
156+
get() = spanStyleOf(
157157
color = BitwardenTheme.colorScheme.text.primary,
158-
fontSize = BitwardenTheme.typography.bodyMedium.fontSize,
159-
fontFamily = BitwardenTheme.typography.bodyMedium.fontFamily,
158+
textStyle = BitwardenTheme.typography.labelMedium,
160159
)
161160

162161
val bitwardenBoldSpanStyle: SpanStyle
163162
@Composable
164163
@ReadOnlyComposable
165-
get() = bitwardenDefaultSpanStyle.copy(
166-
fontWeight = FontWeight.Bold,
164+
get() = spanStyleOf(
165+
color = BitwardenTheme.colorScheme.text.primary,
166+
textStyle = BitwardenTheme.typography.bodyMediumEmphasis,
167167
)
168168

169169
val bitwardenClickableTextSpanStyle: SpanStyle
170170
@Composable
171171
@ReadOnlyComposable
172-
get() = bitwardenBoldSpanStyle.copy(
172+
get() = spanStyleOf(
173173
color = BitwardenTheme.colorScheme.text.interaction,
174+
textStyle = BitwardenTheme.typography.labelMedium,
174175
)

‎app/src/main/java/com/x8bit/bitwarden/ui/platform/components/text/BitwardenHyperTextLink.kt

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
package com.x8bit.bitwarden.ui.platform.components.text
2+
3+
import androidx.annotation.StringRes
4+
import androidx.compose.material3.Text
5+
import androidx.compose.runtime.Composable
6+
import androidx.compose.ui.Modifier
7+
import androidx.compose.ui.graphics.Color
8+
import androidx.compose.ui.semantics.CustomAccessibilityAction
9+
import androidx.compose.ui.semantics.customActions
10+
import androidx.compose.ui.semantics.semantics
11+
import androidx.compose.ui.text.TextStyle
12+
import androidx.compose.ui.text.style.TextAlign
13+
import com.x8bit.bitwarden.ui.platform.base.util.toAnnotatedString
14+
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
15+
16+
/**
17+
* Uses an annotated string resource to create a string with clickable text.
18+
*
19+
* Note: This only supports one clickable text section.
20+
*/
21+
@Composable
22+
fun BitwardenHyperTextLink(
23+
@StringRes annotatedResId: Int,
24+
vararg args: String,
25+
annotationKey: String,
26+
accessibilityString: String,
27+
onClick: () -> Unit,
28+
modifier: Modifier = Modifier,
29+
style: TextStyle = BitwardenTheme.typography.labelMedium,
30+
color: Color = BitwardenTheme.colorScheme.text.secondary,
31+
) {
32+
Text(
33+
text = annotatedResId.toAnnotatedString(args = args) { key ->
34+
when (key) {
35+
annotationKey -> onClick()
36+
}
37+
},
38+
style = style,
39+
color = color,
40+
textAlign = TextAlign.Center,
41+
modifier = modifier
42+
.semantics {
43+
customActions = listOf(
44+
CustomAccessibilityAction(
45+
label = accessibilityString,
46+
action = {
47+
onClick()
48+
true
49+
},
50+
),
51+
)
52+
},
53+
)
54+
}

‎app/src/main/java/com/x8bit/bitwarden/ui/platform/theme/type/BitwardenTypography.kt

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ data class BitwardenTypography(
1919
val titleSmall: TextStyle,
2020
val bodyLarge: TextStyle,
2121
val bodyMedium: TextStyle,
22+
val bodyMediumEmphasis: TextStyle,
2223
val bodySmall: TextStyle,
2324
val labelLarge: TextStyle,
2425
val labelMedium: TextStyle,

‎app/src/main/java/com/x8bit/bitwarden/ui/platform/theme/type/Typography.kt

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -157,6 +157,18 @@ val bitwardenTypography: BitwardenTypography = BitwardenTypography(
157157
),
158158
platformStyle = PlatformTextStyle(includeFontPadding = false),
159159
),
160+
bodyMediumEmphasis = TextStyle(
161+
fontSize = 13.sp,
162+
lineHeight = 18.sp,
163+
fontFamily = FontFamily(Font(R.font.dm_sans_regular)),
164+
fontWeight = FontWeight.W700,
165+
letterSpacing = 0.sp,
166+
lineHeightStyle = LineHeightStyle(
167+
alignment = LineHeightStyle.Alignment.Center,
168+
trim = LineHeightStyle.Trim.None,
169+
),
170+
platformStyle = PlatformTextStyle(includeFontPadding = false),
171+
),
160172
bodySmall = TextStyle(
161173
fontSize = 12.sp,
162174
lineHeight = 16.sp,

‎app/src/main/java/com/x8bit/bitwarden/ui/platform/util/SpanStyleUtil.kt

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
package com.x8bit.bitwarden.ui.platform.util
2+
3+
import androidx.compose.ui.graphics.Color
4+
import androidx.compose.ui.text.SpanStyle
5+
import androidx.compose.ui.text.TextStyle
6+
7+
/**
8+
* Creates a new [SpanStyle] from the specified [color] and [textStyle].
9+
*/
10+
fun spanStyleOf(
11+
color: Color,
12+
textStyle: TextStyle,
13+
): SpanStyle =
14+
SpanStyle(
15+
color = color,
16+
fontSize = textStyle.fontSize,
17+
fontWeight = textStyle.fontWeight,
18+
fontStyle = textStyle.fontStyle,
19+
fontSynthesis = textStyle.fontSynthesis,
20+
fontFamily = textStyle.fontFamily,
21+
fontFeatureSettings = textStyle.fontFeatureSettings,
22+
letterSpacing = textStyle.letterSpacing,
23+
baselineShift = textStyle.baselineShift,
24+
textGeometricTransform = textStyle.textGeometricTransform,
25+
localeList = textStyle.localeList,
26+
background = textStyle.background,
27+
textDecoration = textStyle.textDecoration,
28+
shadow = textStyle.shadow,
29+
platformStyle = textStyle.platformStyle?.spanStyle,
30+
drawStyle = textStyle.drawStyle,
31+
)

‎app/src/main/java/com/x8bit/bitwarden/ui/vault/feature/item/VaultItemCardContent.kt

Lines changed: 11 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,9 @@ import com.x8bit.bitwarden.ui.platform.components.field.BitwardenPasswordField
2121
import com.x8bit.bitwarden.ui.platform.components.field.BitwardenTextField
2222
import com.x8bit.bitwarden.ui.platform.components.header.BitwardenListHeaderText
2323
import com.x8bit.bitwarden.ui.platform.components.model.CardStyle
24+
import com.x8bit.bitwarden.ui.vault.feature.item.component.CustomField
25+
import com.x8bit.bitwarden.ui.vault.feature.item.component.ItemNameField
26+
import com.x8bit.bitwarden.ui.vault.feature.item.component.VaultItemUpdateText
2427
import com.x8bit.bitwarden.ui.vault.feature.item.handlers.VaultCardItemTypeHandlers
2528
import com.x8bit.bitwarden.ui.vault.feature.item.handlers.VaultCommonItemTypeHandlers
2629
import com.x8bit.bitwarden.ui.vault.model.VaultCardBrand
@@ -41,24 +44,10 @@ fun VaultItemCardContent(
4144
LazyColumn(modifier = modifier) {
4245
item {
4346
Spacer(modifier = Modifier.height(height = 12.dp))
44-
BitwardenListHeaderText(
45-
label = stringResource(id = R.string.item_information),
46-
modifier = Modifier
47-
.fillMaxWidth()
48-
.standardHorizontalMargin()
49-
.padding(horizontal = 16.dp),
50-
)
51-
Spacer(modifier = Modifier.height(height = 8.dp))
52-
}
53-
item {
54-
BitwardenTextField(
55-
label = stringResource(id = R.string.name),
47+
ItemNameField(
5648
value = commonState.name,
57-
onValueChange = { },
58-
readOnly = true,
59-
singleLine = false,
49+
isFavorite = commonState.favorite,
6050
textFieldTestTag = "CardItemNameEntry",
61-
cardStyle = CardStyle.Full,
6251
modifier = Modifier
6352
.fillMaxWidth()
6453
.standardHorizontalMargin(),
@@ -78,6 +67,7 @@ fun VaultItemCardContent(
7867
.propertyList
7968
.toListItemCardStyle(
8069
index = cardState.propertyList.indexOf(element = cardholderName),
70+
dividerPadding = 0.dp,
8171
),
8272
modifier = Modifier
8373
.fillMaxWidth()
@@ -109,6 +99,7 @@ fun VaultItemCardContent(
10999
.propertyList
110100
.toListItemCardStyle(
111101
index = cardState.propertyList.indexOf(element = numberData),
102+
dividerPadding = 0.dp,
112103
),
113104
modifier = Modifier
114105
.fillMaxWidth()
@@ -130,6 +121,7 @@ fun VaultItemCardContent(
130121
.propertyList
131122
.toListItemCardStyle(
132123
index = cardState.propertyList.indexOf(element = cardState.brand),
124+
dividerPadding = 0.dp,
133125
),
134126
modifier = Modifier
135127
.fillMaxWidth()
@@ -151,6 +143,7 @@ fun VaultItemCardContent(
151143
.propertyList
152144
.toListItemCardStyle(
153145
index = cardState.propertyList.indexOf(element = expiration),
146+
dividerPadding = 0.dp,
154147
),
155148
modifier = Modifier
156149
.fillMaxWidth()
@@ -183,6 +176,7 @@ fun VaultItemCardContent(
183176
.propertyList
184177
.toListItemCardStyle(
185178
index = cardState.propertyList.indexOf(element = securityCodeData),
179+
dividerPadding = 0.dp,
186180
),
187181
modifier = Modifier
188182
.fillMaxWidth()
@@ -203,7 +197,7 @@ fun VaultItemCardContent(
203197
)
204198
Spacer(modifier = Modifier.height(8.dp))
205199
BitwardenTextField(
206-
label = stringResource(id = R.string.notes),
200+
label = stringResource(id = R.string.additional_options),
207201
value = notes,
208202
onValueChange = { },
209203
readOnly = true,

‎app/src/main/java/com/x8bit/bitwarden/ui/vault/feature/item/VaultItemIdentityContent.kt

Lines changed: 6 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,9 @@ import com.x8bit.bitwarden.ui.platform.components.button.BitwardenStandardIconBu
2020
import com.x8bit.bitwarden.ui.platform.components.field.BitwardenTextField
2121
import com.x8bit.bitwarden.ui.platform.components.header.BitwardenListHeaderText
2222
import com.x8bit.bitwarden.ui.platform.components.model.CardStyle
23+
import com.x8bit.bitwarden.ui.vault.feature.item.component.CustomField
24+
import com.x8bit.bitwarden.ui.vault.feature.item.component.ItemNameField
25+
import com.x8bit.bitwarden.ui.vault.feature.item.component.VaultItemUpdateText
2326
import com.x8bit.bitwarden.ui.vault.feature.item.handlers.VaultCommonItemTypeHandlers
2427
import com.x8bit.bitwarden.ui.vault.feature.item.handlers.VaultIdentityItemTypeHandlers
2528

@@ -38,24 +41,10 @@ fun VaultItemIdentityContent(
3841
LazyColumn(modifier = modifier) {
3942
item {
4043
Spacer(modifier = Modifier.height(height = 12.dp))
41-
BitwardenListHeaderText(
42-
label = stringResource(id = R.string.item_information),
43-
modifier = Modifier
44-
.fillMaxWidth()
45-
.standardHorizontalMargin()
46-
.padding(horizontal = 16.dp),
47-
)
48-
Spacer(modifier = Modifier.height(height = 8.dp))
49-
}
50-
item {
51-
BitwardenTextField(
52-
label = stringResource(id = R.string.name),
44+
ItemNameField(
5345
value = commonState.name,
54-
onValueChange = { },
55-
readOnly = true,
56-
singleLine = false,
46+
isFavorite = commonState.favorite,
5747
textFieldTestTag = "ItemNameEntry",
58-
cardStyle = CardStyle.Full,
5948
modifier = Modifier
6049
.fillMaxWidth()
6150
.standardHorizontalMargin(),
@@ -255,7 +244,7 @@ fun VaultItemIdentityContent(
255244
item {
256245
Spacer(modifier = Modifier.height(height = 16.dp))
257246
BitwardenListHeaderText(
258-
label = stringResource(id = R.string.notes),
247+
label = stringResource(id = R.string.additional_options),
259248
modifier = Modifier
260249
.fillMaxWidth()
261250
.standardHorizontalMargin()

0 commit comments

Comments
 (0)