Merge pull request #547 from dmnyc/feat/wallet-icon-credit-card
feat(wallet): universal credit-card wallet icon
This commit is contained in:
Barry Deen
@@ -7,12 +7,10 @@ import androidx.compose.foundation.layout.requiredSize
|
||||
import androidx.compose.foundation.layout.size
|
||||
import androidx.compose.foundation.shape.CircleShape
|
||||
import androidx.compose.material.icons.Icons
|
||||
import androidx.compose.material.icons.filled.AccountBalanceWallet
|
||||
import androidx.compose.material.icons.filled.Forum
|
||||
import androidx.compose.material.icons.filled.Home
|
||||
import androidx.compose.material.icons.filled.Notifications
|
||||
import androidx.compose.material.icons.filled.Search
|
||||
import androidx.compose.material.icons.outlined.AccountBalanceWallet
|
||||
import androidx.compose.material.icons.outlined.Forum
|
||||
import androidx.compose.material.icons.outlined.Home
|
||||
import androidx.compose.material.icons.outlined.Notifications
|
||||
@@ -40,11 +38,13 @@ import com.wisp.app.Routes
|
||||
enum class BottomTab(
|
||||
val route: String,
|
||||
val labelResId: Int,
|
||||
val selectedIcon: ImageVector,
|
||||
val unselectedIcon: ImageVector
|
||||
val selectedIcon: ImageVector?,
|
||||
val unselectedIcon: ImageVector?,
|
||||
val selectedIconRes: Int? = null,
|
||||
val unselectedIconRes: Int? = null
|
||||
) {
|
||||
HOME(Routes.FEED, R.string.nav_home, Icons.Filled.Home, Icons.Outlined.Home),
|
||||
WALLET(Routes.WALLET, R.string.nav_wallet, Icons.Filled.AccountBalanceWallet, Icons.Outlined.AccountBalanceWallet),
|
||||
WALLET(Routes.WALLET, R.string.nav_wallet, null, null, R.drawable.ic_wallet, R.drawable.ic_wallet_outlined),
|
||||
SEARCH(Routes.SEARCH, R.string.nav_search, Icons.Filled.Search, Icons.Outlined.Search),
|
||||
MESSAGES(Routes.DM_LIST, R.string.nav_messages, Icons.Filled.Forum, Icons.Outlined.Forum),
|
||||
NOTIFICATIONS(Routes.NOTIFICATIONS, R.string.nav_notifications, Icons.Filled.Notifications, Icons.Outlined.Notifications)
|
||||
@@ -102,11 +102,20 @@ fun WispBottomBar(
|
||||
contentDescription = stringResource(tab.labelResId),
|
||||
tint = zapTint
|
||||
)
|
||||
} else if (tab.selectedIconRes != null && tab.unselectedIconRes != null) {
|
||||
// Drawable-backed tabs (wallet) — solid when selected,
|
||||
// outlined when not.
|
||||
val iconRes = if (selected) tab.selectedIconRes else tab.unselectedIconRes
|
||||
Icon(
|
||||
painter = painterResource(iconRes),
|
||||
contentDescription = stringResource(tab.labelResId),
|
||||
tint = zapTint
|
||||
)
|
||||
} else {
|
||||
val icon = if (tab == BottomTab.NOTIFICATIONS && isZapAnimating)
|
||||
Icons.Outlined.CurrencyBitcoin
|
||||
else if (selected) tab.selectedIcon
|
||||
else tab.unselectedIcon
|
||||
else if (selected) tab.selectedIcon!!
|
||||
else tab.unselectedIcon!!
|
||||
Icon(
|
||||
imageVector = icon,
|
||||
contentDescription = stringResource(tab.labelResId),
|
||||
|
||||
@@ -35,7 +35,6 @@ import androidx.compose.material.icons.outlined.LightMode
|
||||
import androidx.compose.material.icons.outlined.QrCodeScanner
|
||||
import androidx.compose.material.icons.outlined.Search
|
||||
import androidx.compose.material.icons.outlined.KeyboardArrowRight
|
||||
import androidx.compose.material.icons.outlined.AccountBalanceWallet
|
||||
import androidx.compose.material.icons.outlined.Person
|
||||
import androidx.compose.material.icons.outlined.Key
|
||||
import androidx.compose.material.icons.outlined.FavoriteBorder
|
||||
@@ -396,21 +395,13 @@ fun WispDrawerContent(
|
||||
onClick = onMessages,
|
||||
modifier = Modifier.height(48.dp).padding(horizontal = 12.dp)
|
||||
)
|
||||
val useZapBolt = com.wisp.app.ui.util.useBoltIcon()
|
||||
val fiatMode = com.wisp.app.ui.util.isFiatMode()
|
||||
NavigationDrawerItem(
|
||||
icon = {
|
||||
if (fiatMode) {
|
||||
Icon(Icons.Outlined.AccountBalanceWallet, contentDescription = null)
|
||||
} else if (useZapBolt) {
|
||||
Icon(
|
||||
painter = painterResource(R.drawable.ic_bolt),
|
||||
contentDescription = null,
|
||||
modifier = Modifier.size(24.dp)
|
||||
)
|
||||
} else {
|
||||
Icon(Icons.Outlined.CurrencyBitcoin, contentDescription = null)
|
||||
}
|
||||
Icon(
|
||||
painter = painterResource(R.drawable.ic_wallet_outlined),
|
||||
contentDescription = null,
|
||||
modifier = Modifier.size(24.dp)
|
||||
)
|
||||
},
|
||||
label = { Text(stringResource(R.string.nav_wallet)) },
|
||||
selected = false,
|
||||
@@ -571,7 +562,7 @@ fun WispDrawerContent(
|
||||
Spacer(Modifier.height(14.dp))
|
||||
Row(verticalAlignment = Alignment.Top) {
|
||||
Icon(
|
||||
Icons.Outlined.AccountBalanceWallet,
|
||||
painter = painterResource(R.drawable.ic_wallet_outlined),
|
||||
contentDescription = null,
|
||||
modifier = Modifier.size(20.dp),
|
||||
tint = MaterialTheme.colorScheme.error
|
||||
|
||||
@@ -0,0 +1,20 @@
|
||||
<vector xmlns:android="http://schemas.android.com/apk/res/android"
|
||||
android:width="24dp"
|
||||
android:height="24dp"
|
||||
android:viewportWidth="24"
|
||||
android:viewportHeight="24"
|
||||
android:tint="?attr/colorControlNormal">
|
||||
<!--
|
||||
Wisp wallet icon — credit-card silhouette matching iOS
|
||||
`creditcard.fill`. Three subpaths combined under evenOdd fill:
|
||||
1. Outer card body (solid, rounded corners).
|
||||
2. Horizontal magnetic stripe near the top (cut out).
|
||||
3. Microchip rectangle on the lower-left (cut out).
|
||||
The stripe and chip read as distinct shapes because the
|
||||
evenOdd rule subtracts them from the card silhouette.
|
||||
-->
|
||||
<path
|
||||
android:fillColor="#FF000000"
|
||||
android:fillType="evenOdd"
|
||||
android:pathData="M3,5 L21,5 A2,2 0 0 1 23,7 L23,17 A2,2 0 0 1 21,19 L3,19 A2,2 0 0 1 1,17 L1,7 A2,2 0 0 1 3,5 Z M1,7.5 L23,7.5 L23,10 L1,10 Z M4.5,12.5 L8.5,12.5 A0.5,0.5 0 0 1 9,13 L9,16 A0.5,0.5 0 0 1 8.5,16.5 L4.5,16.5 A0.5,0.5 0 0 1 4,16 L4,13 A0.5,0.5 0 0 1 4.5,12.5 Z" />
|
||||
</vector>
|
||||
@@ -0,0 +1,31 @@
|
||||
<vector xmlns:android="http://schemas.android.com/apk/res/android"
|
||||
android:width="24dp"
|
||||
android:height="24dp"
|
||||
android:viewportWidth="24"
|
||||
android:viewportHeight="24"
|
||||
android:tint="?attr/colorControlNormal">
|
||||
<!--
|
||||
Outlined twin of `ic_wallet.xml` — same body / stripe / chip
|
||||
geometry, just stroked instead of filled so the unselected
|
||||
bottom-nav state and the drawer wallet row read as a hollow
|
||||
card. Matches iOS `creditcard` (no `.fill`).
|
||||
|
||||
Card body: stroked rectangle (no fill).
|
||||
Magnetic stripe: kept filled so it stays the focal element —
|
||||
matches SF Symbol behavior where the band remains solid even
|
||||
on the outlined glyph.
|
||||
Microchip: solid filled block (matches iOS — the chip stays
|
||||
opaque even in the outlined state for visual weight).
|
||||
-->
|
||||
<path
|
||||
android:fillColor="@android:color/transparent"
|
||||
android:strokeColor="#FF000000"
|
||||
android:strokeWidth="1.5"
|
||||
android:pathData="M3,5 L21,5 A2,2 0 0 1 23,7 L23,17 A2,2 0 0 1 21,19 L3,19 A2,2 0 0 1 1,17 L1,7 A2,2 0 0 1 3,5 Z" />
|
||||
<path
|
||||
android:fillColor="#FF000000"
|
||||
android:pathData="M1.75,7.75 L22.25,7.75 L22.25,10 L1.75,10 Z" />
|
||||
<path
|
||||
android:fillColor="#FF000000"
|
||||
android:pathData="M4.5,12.5 L8.5,12.5 A0.5,0.5 0 0 1 9,13 L9,15.5 A0.5,0.5 0 0 1 8.5,16 L4.5,16 A0.5,0.5 0 0 1 4,15.5 L4,13 A0.5,0.5 0 0 1 4.5,12.5 Z" />
|
||||
</vector>
|
||||
Reference in New Issue
Block a user