Show red alert dot when transactions filter applied

horizontalsystems · Feb 28, 2024 · 9202ca1 · 9202ca1
1 parent b5d66e3
commit 9202ca1
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 9 deletions.
diff --git a/app/src/main/java/io/horizontalsystems/bankwallet/modules/transactions/TransactionsScreen.kt b/app/src/main/java/io/horizontalsystems/bankwallet/modules/transactions/TransactionsScreen.kt
@@ -70,6 +70,7 @@ fun TransactionsScreen(
     val accountsViewModel = viewModel<BalanceAccountsViewModel>(factory = BalanceModule.AccountsFactory())
 
     val filterTypes by viewModel.filterTypesLiveData.observeAsState()
+    val showFilterAlertDot by viewModel.filterResetEnabled.observeAsState(false)
 
     val uiState = viewModel.uiState
     val syncing = uiState.syncing
@@ -83,10 +84,11 @@ fun TransactionsScreen(
                 menuItems = listOf(
                     MenuItem(
                         title = TranslatableString.ResString(R.string.Transactions_Filter),
-                        icon = R.drawable.ic_sort_24,
+                        icon = R.drawable.ic_manage_2_24,
+                        showAlertDot = showFilterAlertDot,
                         onClick = {
                             navController.slideFromRight(R.id.transactionFilterFragment)
-                        }
+                        },
                     )
                 )
             )

diff --git a/app/src/main/java/io/horizontalsystems/bankwallet/ui/compose/components/AppBar.kt b/app/src/main/java/io/horizontalsystems/bankwallet/ui/compose/components/AppBar.kt
@@ -1,15 +1,19 @@
 package io.horizontalsystems.bankwallet.ui.compose.components
 
 import androidx.annotation.DrawableRes
+import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material.CircularProgressIndicator
 import androidx.compose.material.Icon
 import androidx.compose.material.Text
 import androidx.compose.material.TopAppBar
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.painterResource
@@ -25,6 +29,7 @@ data class MenuItem(
     @DrawableRes val icon: Int? = null,
     val enabled: Boolean = true,
     val tint: Color = Color.Unspecified,
+    val showAlertDot: Boolean = false,
     val onClick: () -> Unit,
 )
 
@@ -35,17 +40,30 @@ fun AppBarMenuButton(
     description: String,
     enabled: Boolean = true,
     tint: Color = Color.Unspecified,
+    showAlertDot: Boolean = false
 ) {
     HsIconButton(
         onClick = onClick,
         enabled = enabled,
     ) {
-        Icon(
-            modifier = Modifier.size(24.dp),
-            painter = painterResource(id = icon),
-            contentDescription = description,
-            tint = tint
-        )
+        Box(modifier = Modifier.size(30.dp)) {
+            Icon(
+                modifier = Modifier
+                    .size(24.dp)
+                    .align(Alignment.Center),
+                painter = painterResource(id = icon),
+                contentDescription = description,
+                tint = tint
+            )
+            if (showAlertDot) {
+                Box(
+                    modifier = Modifier
+                        .align(Alignment.TopEnd)
+                        .size(8.dp)
+                        .background(ComposeAppTheme.colors.lucian, shape = CircleShape)
+                )
+            }
+        }
     }
 }
 
@@ -119,7 +137,8 @@ fun AppBar(
                         onClick = menuItem.onClick,
                         enabled = menuItem.enabled,
                         tint = color,
-                        description = menuItem.title.getString()
+                        description = menuItem.title.getString(),
+                        showAlertDot = menuItem.showAlertDot,
                     )
                 } else {
                     Text(