Create new reusable FAB component (#3956)

This commit is contained in:
David Perez 2024-09-24 10:04:23 -05:00 committed by GitHub
parent 86bbf13175
commit 071a5330e6
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 72 additions and 73 deletions

View file

@ -0,0 +1,36 @@
package com.x8bit.bitwarden.ui.platform.components.fab
import androidx.compose.material3.FloatingActionButton
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.painter.Painter
/**
* Represents a Bitwarden-styled [FloatingActionButton].
*
* @param onClick The callback when the button is clicked.
* @param painter The icon for the button.
* @param contentDescription The content description for the button.
* @param modifier The [Modifier] to be applied to the button.
*/
@Composable
fun BitwardenFloatingActionButton(
onClick: () -> Unit,
painter: Painter,
contentDescription: String,
modifier: Modifier = Modifier,
) {
FloatingActionButton(
containerColor = MaterialTheme.colorScheme.primaryContainer,
onClick = onClick,
modifier = modifier,
) {
Icon(
painter = painter,
contentDescription = contentDescription,
tint = MaterialTheme.colorScheme.onPrimaryContainer,
)
}
}

View file

@ -21,7 +21,6 @@ import androidx.compose.foundation.lazy.items
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.FloatingActionButton
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
@ -44,6 +43,7 @@ import com.x8bit.bitwarden.R
import com.x8bit.bitwarden.ui.platform.base.util.EventsEffect
import com.x8bit.bitwarden.ui.platform.base.util.bottomDivider
import com.x8bit.bitwarden.ui.platform.components.appbar.BitwardenTopAppBar
import com.x8bit.bitwarden.ui.platform.components.fab.BitwardenFloatingActionButton
import com.x8bit.bitwarden.ui.platform.components.scaffold.BitwardenScaffold
import com.x8bit.bitwarden.ui.platform.components.util.rememberVectorPainter
@ -132,19 +132,14 @@ fun BlockAutoFillScreen(
enter = scaleIn(),
exit = scaleOut(),
) {
FloatingActionButton(
containerColor = MaterialTheme.colorScheme.primaryContainer,
BitwardenFloatingActionButton(
onClick = remember(viewModel) {
{ viewModel.trySendAction(BlockAutoFillAction.AddUriClick) }
},
modifier = Modifier.testTag("AddItemButton"),
) {
Icon(
painter = rememberVectorPainter(id = R.drawable.ic_plus),
contentDescription = stringResource(id = R.string.add_item),
tint = MaterialTheme.colorScheme.onPrimaryContainer,
)
}
painter = rememberVectorPainter(id = R.drawable.ic_plus),
contentDescription = stringResource(id = R.string.add_item),
modifier = Modifier.testTag(tag = "AddItemButton"),
)
}
},
) { innerPadding ->

View file

@ -13,8 +13,6 @@ import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.FloatingActionButton
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBarDefaults
@ -38,6 +36,7 @@ import com.x8bit.bitwarden.ui.platform.base.util.bottomDivider
import com.x8bit.bitwarden.ui.platform.components.appbar.BitwardenTopAppBar
import com.x8bit.bitwarden.ui.platform.components.content.BitwardenErrorContent
import com.x8bit.bitwarden.ui.platform.components.content.BitwardenLoadingContent
import com.x8bit.bitwarden.ui.platform.components.fab.BitwardenFloatingActionButton
import com.x8bit.bitwarden.ui.platform.components.scaffold.BitwardenScaffold
import com.x8bit.bitwarden.ui.platform.components.util.rememberVectorPainter
import com.x8bit.bitwarden.ui.platform.feature.settings.folders.model.FolderDisplayItem
@ -88,21 +87,16 @@ fun FoldersScreen(
)
},
floatingActionButton = {
FloatingActionButton(
containerColor = MaterialTheme.colorScheme.primaryContainer,
BitwardenFloatingActionButton(
onClick = remember(viewModel) {
{ viewModel.trySendAction(FoldersAction.AddFolderButtonClick) }
},
painter = rememberVectorPainter(id = R.drawable.ic_plus),
contentDescription = stringResource(id = R.string.add_item),
modifier = Modifier
.testTag("AddItemButton")
.testTag(tag = "AddItemButton")
.navigationBarsPadding(),
) {
Icon(
painter = rememberVectorPainter(id = R.drawable.ic_plus),
contentDescription = stringResource(id = R.string.add_item),
tint = MaterialTheme.colorScheme.onPrimaryContainer,
)
}
)
},
) { innerPadding ->
when (val viewState = state.value.viewState) {

View file

@ -8,9 +8,6 @@ import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.imePadding
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.FloatingActionButton
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.material3.rememberTopAppBarState
import androidx.compose.runtime.Composable
@ -36,6 +33,7 @@ import com.x8bit.bitwarden.ui.platform.components.dialog.BasicDialogState
import com.x8bit.bitwarden.ui.platform.components.dialog.BitwardenBasicDialog
import com.x8bit.bitwarden.ui.platform.components.dialog.BitwardenLoadingDialog
import com.x8bit.bitwarden.ui.platform.components.dialog.LoadingDialogState
import com.x8bit.bitwarden.ui.platform.components.fab.BitwardenFloatingActionButton
import com.x8bit.bitwarden.ui.platform.components.scaffold.BitwardenScaffold
import com.x8bit.bitwarden.ui.platform.components.scaffold.rememberBitwardenPullToRefreshState
import com.x8bit.bitwarden.ui.platform.components.util.rememberVectorPainter
@ -152,19 +150,14 @@ fun SendScreen(
enter = scaleIn(),
exit = scaleOut(),
) {
FloatingActionButton(
containerColor = MaterialTheme.colorScheme.primaryContainer,
BitwardenFloatingActionButton(
onClick = remember(viewModel) {
{ viewModel.trySendAction(SendAction.AddSendClick) }
},
modifier = Modifier.testTag("AddItemButton"),
) {
Icon(
painter = rememberVectorPainter(id = R.drawable.ic_plus),
contentDescription = stringResource(id = R.string.add_item),
tint = MaterialTheme.colorScheme.onPrimaryContainer,
)
}
painter = rememberVectorPainter(id = R.drawable.ic_plus),
contentDescription = stringResource(id = R.string.add_item),
modifier = Modifier.testTag(tag = "AddItemButton"),
)
}
},
pullToRefreshState = pullToRefreshState,

View file

@ -8,9 +8,6 @@ import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.imePadding
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.FloatingActionButton
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.material3.rememberTopAppBarState
import androidx.compose.runtime.Composable
@ -39,6 +36,7 @@ import com.x8bit.bitwarden.ui.platform.components.dialog.BitwardenLoadingDialog
import com.x8bit.bitwarden.ui.platform.components.dialog.BitwardenMasterPasswordDialog
import com.x8bit.bitwarden.ui.platform.components.dialog.BitwardenTwoButtonDialog
import com.x8bit.bitwarden.ui.platform.components.dialog.LoadingDialogState
import com.x8bit.bitwarden.ui.platform.components.fab.BitwardenFloatingActionButton
import com.x8bit.bitwarden.ui.platform.components.scaffold.BitwardenScaffold
import com.x8bit.bitwarden.ui.platform.components.util.rememberVectorPainter
import com.x8bit.bitwarden.ui.platform.composition.LocalIntentManager
@ -239,20 +237,16 @@ fun VaultItemScreen(
enter = scaleIn(),
exit = scaleOut(),
) {
FloatingActionButton(
containerColor = MaterialTheme.colorScheme.primaryContainer,
BitwardenFloatingActionButton(
onClick = remember(viewModel) {
{ viewModel.trySendAction(VaultItemAction.Common.EditClick) }
},
painter = rememberVectorPainter(id = R.drawable.ic_edit),
contentDescription = stringResource(id = R.string.edit_item),
modifier = Modifier
.testTag("EditItemButton")
.testTag(tag = "EditItemButton")
.padding(bottom = 16.dp),
) {
Icon(
painter = rememberVectorPainter(id = R.drawable.ic_edit),
contentDescription = stringResource(id = R.string.edit_item),
)
}
)
}
},
) { innerPadding ->

View file

@ -4,9 +4,6 @@ import android.widget.Toast
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.FloatingActionButton
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.material3.rememberTopAppBarState
import androidx.compose.runtime.Composable
@ -42,6 +39,7 @@ import com.x8bit.bitwarden.ui.platform.components.dialog.BitwardenMasterPassword
import com.x8bit.bitwarden.ui.platform.components.dialog.BitwardenOverwritePasskeyConfirmationDialog
import com.x8bit.bitwarden.ui.platform.components.dialog.BitwardenPinDialog
import com.x8bit.bitwarden.ui.platform.components.dialog.LoadingDialogState
import com.x8bit.bitwarden.ui.platform.components.fab.BitwardenFloatingActionButton
import com.x8bit.bitwarden.ui.platform.components.scaffold.BitwardenPullToRefreshState
import com.x8bit.bitwarden.ui.platform.components.scaffold.BitwardenScaffold
import com.x8bit.bitwarden.ui.platform.components.scaffold.rememberBitwardenPullToRefreshState
@ -435,16 +433,12 @@ private fun VaultItemListingScaffold(
},
floatingActionButton = {
if (state.itemListingType.hasFab) {
FloatingActionButton(
containerColor = MaterialTheme.colorScheme.primaryContainer,
BitwardenFloatingActionButton(
onClick = vaultItemListingHandlers.addVaultItemClick,
modifier = Modifier.testTag("AddItemButton"),
) {
Icon(
painter = rememberVectorPainter(id = R.drawable.ic_plus),
contentDescription = stringResource(id = R.string.add_item),
)
}
painter = rememberVectorPainter(id = R.drawable.ic_plus),
contentDescription = stringResource(id = R.string.add_item),
modifier = Modifier.testTag(tag = "AddItemButton"),
)
}
},
pullToRefreshState = pullToRefreshState,

View file

@ -12,9 +12,6 @@ import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.FloatingActionButton
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.material3.rememberTopAppBarState
import androidx.compose.runtime.Composable
@ -50,6 +47,7 @@ import com.x8bit.bitwarden.ui.platform.components.dialog.BitwardenLoadingDialog
import com.x8bit.bitwarden.ui.platform.components.dialog.BitwardenMasterPasswordDialog
import com.x8bit.bitwarden.ui.platform.components.dialog.BitwardenTwoButtonDialog
import com.x8bit.bitwarden.ui.platform.components.dialog.LoadingDialogState
import com.x8bit.bitwarden.ui.platform.components.fab.BitwardenFloatingActionButton
import com.x8bit.bitwarden.ui.platform.components.scaffold.BitwardenPullToRefreshState
import com.x8bit.bitwarden.ui.platform.components.scaffold.BitwardenScaffold
import com.x8bit.bitwarden.ui.platform.components.scaffold.rememberBitwardenPullToRefreshState
@ -258,17 +256,12 @@ private fun VaultScreenScaffold(
enter = scaleIn(),
exit = scaleOut(),
) {
FloatingActionButton(
containerColor = MaterialTheme.colorScheme.primaryContainer,
BitwardenFloatingActionButton(
onClick = vaultHandlers.addItemClickAction,
modifier = Modifier.testTag("AddItemButton"),
) {
Icon(
painter = rememberVectorPainter(id = R.drawable.ic_plus),
contentDescription = stringResource(id = R.string.add_item),
tint = MaterialTheme.colorScheme.onPrimaryContainer,
)
}
painter = rememberVectorPainter(id = R.drawable.ic_plus),
contentDescription = stringResource(id = R.string.add_item),
modifier = Modifier.testTag(tag = "AddItemButton"),
)
}
},
pullToRefreshState = pullToRefreshState,