PM-11177 Update the empty state on the sends screen to v3 design (#4045)

This commit is contained in:
Dave Severns 2024-10-08 14:18:27 -04:00 committed by GitHub
parent 1539c2032e
commit b5658fda42
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 181 additions and 16 deletions

View file

@ -1,11 +1,14 @@
package com.x8bit.bitwarden.ui.tools.feature.send package com.x8bit.bitwarden.ui.tools.feature.send
import android.content.res.Configuration
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.navigationBarsPadding import androidx.compose.foundation.layout.navigationBarsPadding
import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size
import androidx.compose.foundation.rememberScrollState import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.Text import androidx.compose.material3.Text
@ -14,10 +17,13 @@ import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.dp
import com.x8bit.bitwarden.R import com.x8bit.bitwarden.R
import com.x8bit.bitwarden.ui.platform.components.button.BitwardenFilledTonalButton import com.x8bit.bitwarden.ui.platform.base.util.standardHorizontalMargin
import com.x8bit.bitwarden.ui.platform.components.button.BitwardenFilledButtonWithIcon
import com.x8bit.bitwarden.ui.platform.components.card.BitwardenInfoCalloutCard import com.x8bit.bitwarden.ui.platform.components.card.BitwardenInfoCalloutCard
import com.x8bit.bitwarden.ui.platform.components.util.rememberVectorPainter
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
/** /**
@ -37,32 +43,83 @@ fun SendEmpty(
BitwardenInfoCalloutCard( BitwardenInfoCalloutCard(
text = stringResource(id = R.string.send_disabled_warning), text = stringResource(id = R.string.send_disabled_warning),
modifier = Modifier modifier = Modifier
.padding(horizontal = 16.dp) .standardHorizontalMargin()
.fillMaxWidth(), .fillMaxWidth(),
) )
} }
Spacer(modifier = Modifier.weight(1F)) Spacer(modifier = Modifier.weight(1F))
Image(
painter = rememberVectorPainter(R.drawable.img_send),
contentDescription = null,
modifier = Modifier
.standardHorizontalMargin()
.size(100.dp),
)
Spacer(Modifier.height(24.dp))
Text( Text(
textAlign = TextAlign.Center, textAlign = TextAlign.Center,
text = stringResource(id = R.string.no_sends), text = stringResource(R.string.send_sensitive_information_safely),
style = BitwardenTheme.typography.bodyMedium, style = BitwardenTheme.typography.titleMedium,
color = BitwardenTheme.colorScheme.text.primary,
modifier = Modifier modifier = Modifier
.fillMaxWidth() .fillMaxWidth()
.padding(horizontal = 16.dp), .standardHorizontalMargin(),
)
Spacer(modifier = Modifier.height(12.dp))
Text(
textAlign = TextAlign.Center,
text = stringResource(
R.string.share_files_and_data_securely_with_anyone_on_any_platform,
),
style = BitwardenTheme.typography.bodyMedium,
color = BitwardenTheme.colorScheme.text.primary,
modifier = Modifier
.fillMaxWidth()
.standardHorizontalMargin(),
) )
Spacer(modifier = Modifier.height(24.dp)) Spacer(modifier = Modifier.height(24.dp))
BitwardenFilledTonalButton( BitwardenFilledButtonWithIcon(
onClick = onAddItemClick, onClick = onAddItemClick,
label = stringResource(id = R.string.add_a_send), label = stringResource(id = R.string.add_a_send),
modifier = Modifier modifier = Modifier.standardHorizontalMargin(),
.fillMaxWidth() icon = rememberVectorPainter(R.drawable.ic_plus),
.padding(horizontal = 16.dp),
) )
Spacer(modifier = Modifier.weight(1F)) Spacer(modifier = Modifier.weight(1F))
Spacer(modifier = Modifier.navigationBarsPadding()) Spacer(modifier = Modifier.navigationBarsPadding())
} }
} }
@Preview(name = "Light mode")
@Preview(name = "Dark mode", uiMode = Configuration.UI_MODE_NIGHT_YES)
@Composable
private fun SendEmpty_preview() {
BitwardenTheme {
Column(
modifier = Modifier.background(BitwardenTheme.colorScheme.background.primary),
) {
SendEmpty(
policyDisablesSend = false,
onAddItemClick = {},
)
}
}
}
@Preview(name = "Light mode")
@Preview(name = "Dark mode", uiMode = Configuration.UI_MODE_NIGHT_YES)
@Composable
private fun SendEmptyPolicyDisabled_preview() {
BitwardenTheme {
Column(
modifier = Modifier.background(BitwardenTheme.colorScheme.background.primary),
) {
SendEmpty(
policyDisablesSend = true,
onAddItemClick = {},
)
}
}
}

View file

@ -57,8 +57,8 @@ fun VaultNoItems(
painter = rememberVectorPainter(id = R.drawable.img_vault_items), painter = rememberVectorPainter(id = R.drawable.img_vault_items),
contentDescription = null, contentDescription = null,
modifier = Modifier modifier = Modifier
.size(100.dp) .standardHorizontalMargin()
.standardHorizontalMargin(), .size(100.dp),
) )
Spacer(modifier = Modifier.height(24.dp)) Spacer(modifier = Modifier.height(24.dp))

View file

@ -0,0 +1,52 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="200dp"
android:height="201dp"
android:viewportWidth="200"
android:viewportHeight="201">
<path
android:pathData="M139.58,25.67C141.88,25.67 143.75,27.53 143.75,29.83L143.75,188.17C143.75,190.47 141.88,192.33 139.58,192.33L22.92,192.33C20.62,192.33 18.75,190.47 18.75,188.17L18.75,29.83C18.75,27.53 20.62,25.67 22.92,25.67L139.58,25.67Z"
android:fillColor="#79A1E9"/>
<path
android:pathData="M139.58,188.17L139.58,29.83L22.92,29.83L22.92,188.17L139.58,188.17ZM143.75,29.83C143.75,27.53 141.88,25.67 139.58,25.67L22.92,25.67C20.62,25.67 18.75,27.53 18.75,29.83L18.75,188.17C18.75,190.47 20.62,192.33 22.92,192.33L139.58,192.33C141.88,192.33 143.75,190.47 143.75,188.17L143.75,29.83Z"
android:fillColor="#175DDC"
android:fillType="evenOdd"/>
<path
android:pathData="M160.42,171.5L160.42,13.17C160.42,10.87 158.55,9 156.25,9L67.35,9C66.25,9 65.19,9.43 64.41,10.21L36.63,37.99C35.85,38.77 35.42,39.83 35.42,40.93L35.42,171.5C35.42,173.8 37.28,175.67 39.58,175.67L156.25,175.67C158.55,175.67 160.42,173.8 160.42,171.5Z"
android:fillColor="#AAC3EF"/>
<path
android:pathData="M156.25,171.5L156.25,13.17L67.35,13.17L39.58,40.93L39.58,171.5L156.25,171.5ZM67.36,13.16C67.36,13.16 67.36,13.16 67.36,13.16L67.36,13.16ZM160.42,13.17L160.42,171.5C160.42,173.8 158.55,175.67 156.25,175.67L39.58,175.67C37.28,175.67 35.42,173.8 35.42,171.5L35.42,40.93C35.42,39.83 35.85,38.77 36.63,37.99L64.41,10.21C65.19,9.43 66.25,9 67.35,9L156.25,9C158.55,9 160.42,10.87 160.42,13.17Z"
android:fillColor="#175DDC"
android:fillType="evenOdd"/>
<path
android:pathData="M68.75,11.08C69.9,11.08 70.83,12.02 70.83,13.17V44.42H39.58C38.43,44.42 37.5,43.48 37.5,42.33C37.5,41.18 38.43,40.25 39.58,40.25H66.67V13.17C66.67,12.02 67.6,11.08 68.75,11.08Z"
android:fillColor="#175DDC"
android:fillType="evenOdd"/>
<path
android:pathData="M77.08,73.58C77.08,70.13 79.88,67.33 83.33,67.33H112.5C115.95,67.33 118.75,70.13 118.75,73.58V94.42C118.75,97.87 115.95,100.67 112.5,100.67H83.33C79.88,100.67 77.08,97.87 77.08,94.42V73.58Z"
android:fillColor="#FFBF00"/>
<path
android:pathData="M112.5,71.5H83.33C82.18,71.5 81.25,72.43 81.25,73.58V94.42C81.25,95.57 82.18,96.5 83.33,96.5H112.5C113.65,96.5 114.58,95.57 114.58,94.42V73.58C114.58,72.43 113.65,71.5 112.5,71.5ZM83.33,67.33C79.88,67.33 77.08,70.13 77.08,73.58V94.42C77.08,97.87 79.88,100.67 83.33,100.67H112.5C115.95,100.67 118.75,97.87 118.75,94.42V73.58C118.75,70.13 115.95,67.33 112.5,67.33H83.33Z"
android:fillColor="#175DDC"
android:fillType="evenOdd"/>
<path
android:pathData="M95.83,79.83C95.83,78.68 96.77,77.75 97.92,77.75C99.07,77.75 100,78.68 100,79.83V88.17C100,89.32 99.07,90.25 97.92,90.25C96.77,90.25 95.83,89.32 95.83,88.17V79.83Z"
android:fillColor="#175DDC"/>
<path
android:pathData="M87.5,65.25C87.5,59.5 92.16,54.83 97.92,54.83C103.67,54.83 108.33,59.5 108.33,65.25V67.33H104.17V65.25C104.17,61.8 101.37,59 97.92,59C94.46,59 91.67,61.8 91.67,65.25V67.33H87.5V65.25Z"
android:fillColor="#175DDC"
android:fillType="evenOdd"/>
<path
android:pathData="M129.17,192.45V163.17L154.17,176.5L136.13,195.26C135.37,196.05 134.31,196.5 133.21,196.5C130.98,196.5 129.17,194.69 129.17,192.45Z"
android:fillColor="#AAC3EF"/>
<path
android:pathData="M127.08,159.69L157.58,175.96L137.63,196.7C136.48,197.9 134.88,198.58 133.21,198.58C129.83,198.58 127.08,195.84 127.08,192.45V159.69ZM131.25,166.64V192.45C131.25,193.54 132.13,194.42 133.21,194.42C133.75,194.42 134.26,194.2 134.63,193.81L150.76,177.04L131.25,166.64Z"
android:fillColor="#175DDC"
android:fillType="evenOdd"/>
<path
android:pathData="M88.64,138.11L184.03,93.46C187.69,91.74 191.83,94.68 191.42,98.71L181.82,191.72C181.41,195.7 176.85,197.75 173.6,195.42L130.21,164.21L88.92,147.66C84.69,145.96 84.52,140.04 88.64,138.11Z"
android:fillColor="#F3F6F9"/>
<path
android:pathData="M189.34,98.49C189.59,96.08 187.11,94.31 184.91,95.34L89.53,139.99C87.05,141.15 87.15,144.71 89.69,145.73L129.62,161.73L156.42,131.28C157.18,130.42 158.5,130.34 159.36,131.1C160.23,131.86 160.31,133.17 159.55,134.04L133.29,163.86L174.82,193.73C176.77,195.13 179.51,193.9 179.75,191.51L189.34,98.49ZM129.2,166.05L88.14,149.59C82.22,147.22 81.98,138.93 87.76,136.22L183.14,91.57C188.28,89.17 194.07,93.28 193.49,98.92L183.9,191.94C183.32,197.51 176.93,200.38 172.38,197.11L129.2,166.05Z"
android:fillColor="#175DDC"
android:fillType="evenOdd"/>
</vector>

View file

@ -0,0 +1,52 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="200dp"
android:height="201dp"
android:viewportWidth="200"
android:viewportHeight="201">
<path
android:pathData="M139.58,25.67C141.88,25.67 143.75,27.53 143.75,29.83L143.75,188.17C143.75,190.47 141.88,192.33 139.58,192.33L22.92,192.33C20.62,192.33 18.75,190.47 18.75,188.17L18.75,29.83C18.75,27.53 20.62,25.67 22.92,25.67L139.58,25.67Z"
android:fillColor="#AAC3EF"/>
<path
android:pathData="M139.58,188.17L139.58,29.83L22.92,29.83L22.92,188.17L139.58,188.17ZM143.75,29.83C143.75,27.53 141.88,25.67 139.58,25.67L22.92,25.67C20.62,25.67 18.75,27.53 18.75,29.83L18.75,188.17C18.75,190.47 20.62,192.33 22.92,192.33L139.58,192.33C141.88,192.33 143.75,190.47 143.75,188.17L143.75,29.83Z"
android:fillColor="#020F66"
android:fillType="evenOdd"/>
<path
android:pathData="M160.42,171.5L160.42,13.17C160.42,10.87 158.55,9 156.25,9L67.35,9C66.25,9 65.19,9.43 64.41,10.21L36.63,37.99C35.85,38.77 35.42,39.83 35.42,40.93L35.42,171.5C35.42,173.8 37.28,175.67 39.58,175.67L156.25,175.67C158.55,175.67 160.42,173.8 160.42,171.5Z"
android:fillColor="#DBE5F6"/>
<path
android:pathData="M156.25,171.5L156.25,13.17L67.35,13.17L39.58,40.93L39.58,171.5L156.25,171.5ZM67.36,13.16C67.36,13.16 67.36,13.16 67.36,13.16L67.36,13.16ZM160.42,13.17L160.42,171.5C160.42,173.8 158.55,175.67 156.25,175.67L39.58,175.67C37.28,175.67 35.42,173.8 35.42,171.5L35.42,40.93C35.42,39.83 35.85,38.77 36.63,37.99L64.41,10.21C65.19,9.43 66.25,9 67.35,9L156.25,9C158.55,9 160.42,10.87 160.42,13.17Z"
android:fillColor="#020F66"
android:fillType="evenOdd"/>
<path
android:pathData="M68.75,11.08C69.9,11.08 70.83,12.02 70.83,13.17V44.42H39.58C38.43,44.42 37.5,43.48 37.5,42.33C37.5,41.18 38.43,40.25 39.58,40.25H66.67V13.17C66.67,12.02 67.6,11.08 68.75,11.08Z"
android:fillColor="#020F66"
android:fillType="evenOdd"/>
<path
android:pathData="M77.08,73.58C77.08,70.13 79.88,67.33 83.33,67.33H112.5C115.95,67.33 118.75,70.13 118.75,73.58V94.42C118.75,97.87 115.95,100.67 112.5,100.67H83.33C79.88,100.67 77.08,97.87 77.08,94.42V73.58Z"
android:fillColor="#FFBF00"/>
<path
android:pathData="M112.5,71.5H83.33C82.18,71.5 81.25,72.43 81.25,73.58V94.42C81.25,95.57 82.18,96.5 83.33,96.5H112.5C113.65,96.5 114.58,95.57 114.58,94.42V73.58C114.58,72.43 113.65,71.5 112.5,71.5ZM83.33,67.33C79.88,67.33 77.08,70.13 77.08,73.58V94.42C77.08,97.87 79.88,100.67 83.33,100.67H112.5C115.95,100.67 118.75,97.87 118.75,94.42V73.58C118.75,70.13 115.95,67.33 112.5,67.33H83.33Z"
android:fillColor="#020F66"
android:fillType="evenOdd"/>
<path
android:pathData="M95.83,79.83C95.83,78.68 96.77,77.75 97.92,77.75C99.07,77.75 100,78.68 100,79.83V88.17C100,89.32 99.07,90.25 97.92,90.25C96.77,90.25 95.83,89.32 95.83,88.17V79.83Z"
android:fillColor="#020F66"/>
<path
android:pathData="M87.5,65.25C87.5,59.5 92.16,54.83 97.92,54.83C103.67,54.83 108.33,59.5 108.33,65.25V67.33H104.17V65.25C104.17,61.8 101.37,59 97.92,59C94.46,59 91.67,61.8 91.67,65.25V67.33H87.5V65.25Z"
android:fillColor="#020F66"
android:fillType="evenOdd"/>
<path
android:pathData="M129.17,192.45V163.17L154.17,176.5L136.13,195.26C135.37,196.05 134.31,196.5 133.21,196.5C130.98,196.5 129.17,194.69 129.17,192.45Z"
android:fillColor="#DBE5F6"/>
<path
android:pathData="M127.08,159.69L157.58,175.96L137.63,196.7C136.48,197.9 134.88,198.58 133.21,198.58C129.83,198.58 127.08,195.84 127.08,192.45V159.69ZM131.25,166.64V192.45C131.25,193.54 132.13,194.42 133.21,194.42C133.75,194.42 134.26,194.2 134.63,193.81L150.76,177.04L131.25,166.64Z"
android:fillColor="#020F66"
android:fillType="evenOdd"/>
<path
android:pathData="M88.64,138.11L184.03,93.46C187.69,91.74 191.83,94.68 191.42,98.71L181.82,191.72C181.41,195.7 176.85,197.75 173.6,195.42L130.21,164.21L88.92,147.66C84.69,145.96 84.52,140.04 88.64,138.11Z"
android:fillColor="#ffffff"/>
<path
android:pathData="M189.35,98.49C189.6,96.08 187.11,94.31 184.91,95.34L89.53,139.99C87.05,141.15 87.15,144.71 89.69,145.73L129.62,161.73L156.42,131.28C157.18,130.42 158.5,130.34 159.36,131.1C160.23,131.86 160.31,133.17 159.55,134.04L133.29,163.86L174.82,193.73C176.77,195.13 179.51,193.9 179.75,191.51L189.35,98.49ZM129.2,166.05L88.14,149.59C82.22,147.22 81.99,138.93 87.76,136.22L183.15,91.57C188.28,89.17 194.07,93.28 193.49,98.92L183.9,191.94C183.32,197.51 176.94,200.38 172.39,197.11L129.2,166.05Z"
android:fillColor="#020F66"
android:fillType="evenOdd"/>
</vector>

View file

@ -587,7 +587,7 @@ Scanning will happen automatically.</string>
<string name="notes_info">Private notes about this Send.</string> <string name="notes_info">Private notes about this Send.</string>
<string name="disable_send">Deactivate this Send so that no one can access it</string> <string name="disable_send">Deactivate this Send so that no one can access it</string>
<string name="no_sends">There are no Sends in your account.</string> <string name="no_sends">There are no Sends in your account.</string>
<string name="add_a_send">Add a Send</string> <string name="add_a_send">New send</string>
<string name="copy_link">Copy link</string> <string name="copy_link">Copy link</string>
<string name="share_link">Share link</string> <string name="share_link">Share link</string>
<string name="send_link">Send link</string> <string name="send_link">Send link</string>
@ -1012,7 +1012,9 @@ Do you want to switch to this account?</string>
<string name="master_password_hint_not_specified">Master password hint</string> <string name="master_password_hint_not_specified">Master password hint</string>
<string name="master_password_important_hint">Important: Your master password cannot be recovered if you forget it! 12 characters minimum.</string> <string name="master_password_important_hint">Important: Your master password cannot be recovered if you forget it! 12 characters minimum.</string>
<string name="get_started">Get started</string> <string name="get_started">Get started</string>
<string name="save_and_protect_your_data">Save and protect your data</string> <string name="save_and_protect_your_data">Save and protect your data</string>
<string name="the_vault_protects_more_than_just_passwords">The vault protects more than just passwords. Store secure logins, IDs, cards and notes securely here.</string> <string name="the_vault_protects_more_than_just_passwords">The vault protects more than just passwords. Store secure logins, IDs, cards and notes securely here.</string>
<string name="new_login">New login</string> <string name="new_login">New login</string>
<string name="share_files_and_data_securely_with_anyone_on_any_platform">Share files and data securely with anyone, on any platform. Your information will remain end-to-end encrypted while limiting exposure.</string>
<string name="send_sensitive_information_safely">Send sensitive information, safely</string>
</resources> </resources>

View file

@ -16,6 +16,7 @@ import androidx.compose.ui.test.onAllNodesWithText
import androidx.compose.ui.test.onNodeWithContentDescription import androidx.compose.ui.test.onNodeWithContentDescription
import androidx.compose.ui.test.onNodeWithText import androidx.compose.ui.test.onNodeWithText
import androidx.compose.ui.test.performClick import androidx.compose.ui.test.performClick
import androidx.compose.ui.test.performScrollTo
import androidx.compose.ui.test.performScrollToNode import androidx.compose.ui.test.performScrollToNode
import androidx.core.net.toUri import androidx.core.net.toUri
import com.x8bit.bitwarden.data.platform.repository.util.bufferedMutableSharedFlow import com.x8bit.bitwarden.data.platform.repository.util.bufferedMutableSharedFlow
@ -246,7 +247,8 @@ class SendScreenTest : BaseComposeTest() {
it.copy(viewState = SendState.ViewState.Empty) it.copy(viewState = SendState.ViewState.Empty)
} }
composeTestRule composeTestRule
.onNodeWithText("Add a Send") .onNodeWithText("New send")
.performScrollTo()
.performClick() .performClick()
verify { viewModel.trySendAction(SendAction.AddSendClick) } verify { viewModel.trySendAction(SendAction.AddSendClick) }
} }