mirror of
https://github.com/bitwarden/android.git
synced 2024-10-31 15:15:34 +03:00
Update overflow menu popup handling and styling (#283)
This commit is contained in:
parent
ba251d0809
commit
107ee1c08c
2 changed files with 61 additions and 15 deletions
|
@ -10,7 +10,6 @@ import androidx.compose.foundation.layout.navigationBarsPadding
|
||||||
import androidx.compose.foundation.layout.padding
|
import androidx.compose.foundation.layout.padding
|
||||||
import androidx.compose.foundation.rememberScrollState
|
import androidx.compose.foundation.rememberScrollState
|
||||||
import androidx.compose.foundation.verticalScroll
|
import androidx.compose.foundation.verticalScroll
|
||||||
import androidx.compose.material3.DropdownMenuItem
|
|
||||||
import androidx.compose.material3.ExperimentalMaterial3Api
|
import androidx.compose.material3.ExperimentalMaterial3Api
|
||||||
import androidx.compose.material3.MaterialTheme
|
import androidx.compose.material3.MaterialTheme
|
||||||
import androidx.compose.material3.Text
|
import androidx.compose.material3.Text
|
||||||
|
@ -44,6 +43,8 @@ import com.x8bit.bitwarden.ui.platform.components.BitwardenOverflowActionItem
|
||||||
import com.x8bit.bitwarden.ui.platform.components.BitwardenPasswordField
|
import com.x8bit.bitwarden.ui.platform.components.BitwardenPasswordField
|
||||||
import com.x8bit.bitwarden.ui.platform.components.BitwardenScaffold
|
import com.x8bit.bitwarden.ui.platform.components.BitwardenScaffold
|
||||||
import com.x8bit.bitwarden.ui.platform.components.BitwardenTopAppBar
|
import com.x8bit.bitwarden.ui.platform.components.BitwardenTopAppBar
|
||||||
|
import com.x8bit.bitwarden.ui.platform.components.OverflowMenuItemData
|
||||||
|
import kotlinx.collections.immutable.persistentListOf
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* The top level composable for the Login screen.
|
* The top level composable for the Login screen.
|
||||||
|
@ -87,16 +88,14 @@ fun LoginScreen(
|
||||||
},
|
},
|
||||||
actions = {
|
actions = {
|
||||||
BitwardenOverflowActionItem(
|
BitwardenOverflowActionItem(
|
||||||
dropdownMenuItemContent = {
|
menuItemDataList = persistentListOf(
|
||||||
DropdownMenuItem(
|
OverflowMenuItemData(
|
||||||
text = {
|
text = stringResource(id = R.string.get_password_hint),
|
||||||
Text(text = stringResource(id = R.string.get_password_hint))
|
|
||||||
},
|
|
||||||
onClick = remember(viewModel) {
|
onClick = remember(viewModel) {
|
||||||
{ viewModel.trySendAction(LoginAction.MasterPasswordHintClick) }
|
{ viewModel.trySendAction(LoginAction.MasterPasswordHintClick) }
|
||||||
},
|
},
|
||||||
)
|
),
|
||||||
},
|
),
|
||||||
)
|
)
|
||||||
},
|
},
|
||||||
)
|
)
|
||||||
|
|
|
@ -1,22 +1,30 @@
|
||||||
package com.x8bit.bitwarden.ui.platform.components
|
package com.x8bit.bitwarden.ui.platform.components
|
||||||
|
|
||||||
|
import androidx.compose.foundation.background
|
||||||
import androidx.compose.foundation.layout.Box
|
import androidx.compose.foundation.layout.Box
|
||||||
import androidx.compose.foundation.layout.ColumnScope
|
import androidx.compose.foundation.layout.widthIn
|
||||||
import androidx.compose.material3.DropdownMenu
|
import androidx.compose.material3.DropdownMenu
|
||||||
|
import androidx.compose.material3.DropdownMenuItem
|
||||||
import androidx.compose.material3.Icon
|
import androidx.compose.material3.Icon
|
||||||
import androidx.compose.material3.IconButton
|
import androidx.compose.material3.IconButton
|
||||||
import androidx.compose.material3.MaterialTheme
|
import androidx.compose.material3.MaterialTheme
|
||||||
|
import androidx.compose.material3.Text
|
||||||
import androidx.compose.runtime.Composable
|
import androidx.compose.runtime.Composable
|
||||||
import androidx.compose.runtime.getValue
|
import androidx.compose.runtime.getValue
|
||||||
import androidx.compose.runtime.mutableStateOf
|
import androidx.compose.runtime.mutableStateOf
|
||||||
import androidx.compose.runtime.remember
|
import androidx.compose.runtime.remember
|
||||||
import androidx.compose.runtime.setValue
|
import androidx.compose.runtime.setValue
|
||||||
import androidx.compose.ui.Alignment
|
import androidx.compose.ui.Alignment
|
||||||
|
import androidx.compose.ui.Modifier
|
||||||
import androidx.compose.ui.res.painterResource
|
import androidx.compose.ui.res.painterResource
|
||||||
import androidx.compose.ui.res.stringResource
|
import androidx.compose.ui.res.stringResource
|
||||||
import androidx.compose.ui.tooling.preview.Preview
|
import androidx.compose.ui.tooling.preview.Preview
|
||||||
|
import androidx.compose.ui.unit.DpOffset
|
||||||
|
import androidx.compose.ui.unit.dp
|
||||||
import com.x8bit.bitwarden.R
|
import com.x8bit.bitwarden.R
|
||||||
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
|
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
|
||||||
|
import kotlinx.collections.immutable.ImmutableList
|
||||||
|
import kotlinx.collections.immutable.persistentListOf
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Represents a composable overflow item specifically tailored for Bitwarden's UI.
|
* Represents a composable overflow item specifically tailored for Bitwarden's UI.
|
||||||
|
@ -25,13 +33,12 @@ import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
|
||||||
* indicate more actions available that are not immediately visible on the interface.
|
* indicate more actions available that are not immediately visible on the interface.
|
||||||
* The item is centrally aligned within a predefined [Box] of size 24.dp.
|
* The item is centrally aligned within a predefined [Box] of size 24.dp.
|
||||||
*
|
*
|
||||||
* @param dropdownMenuItemContent A single overflow menu in the right with contents
|
* @param menuItemDataList The list of [OverflowMenuItemData] that will populate the overflow
|
||||||
* defined by the [dropdownMenuItemContent]. It is strongly recommended that this content
|
* dropdown menu.
|
||||||
* be a stack of [DropdownMenuItem].
|
|
||||||
*/
|
*/
|
||||||
@Composable
|
@Composable
|
||||||
fun BitwardenOverflowActionItem(
|
fun BitwardenOverflowActionItem(
|
||||||
dropdownMenuItemContent: @Composable ColumnScope.() -> Unit = {},
|
menuItemDataList: ImmutableList<OverflowMenuItemData> = persistentListOf(),
|
||||||
) {
|
) {
|
||||||
var isOverflowMenuVisible by remember { mutableStateOf(false) }
|
var isOverflowMenuVisible by remember { mutableStateOf(false) }
|
||||||
Box(
|
Box(
|
||||||
|
@ -47,7 +54,29 @@ fun BitwardenOverflowActionItem(
|
||||||
DropdownMenu(
|
DropdownMenu(
|
||||||
expanded = isOverflowMenuVisible,
|
expanded = isOverflowMenuVisible,
|
||||||
onDismissRequest = { isOverflowMenuVisible = false },
|
onDismissRequest = { isOverflowMenuVisible = false },
|
||||||
content = dropdownMenuItemContent,
|
offset = DpOffset(x = (-12).dp, y = 0.dp),
|
||||||
|
modifier = Modifier
|
||||||
|
.widthIn(
|
||||||
|
min = 112.dp,
|
||||||
|
max = 280.dp,
|
||||||
|
)
|
||||||
|
.background(MaterialTheme.colorScheme.surfaceContainer),
|
||||||
|
content = {
|
||||||
|
menuItemDataList.forEach { dropdownMenuItemData ->
|
||||||
|
DropdownMenuItem(
|
||||||
|
text = {
|
||||||
|
Text(
|
||||||
|
text = dropdownMenuItemData.text,
|
||||||
|
style = MaterialTheme.typography.bodyLarge,
|
||||||
|
)
|
||||||
|
},
|
||||||
|
onClick = {
|
||||||
|
isOverflowMenuVisible = false
|
||||||
|
dropdownMenuItemData.onClick()
|
||||||
|
},
|
||||||
|
)
|
||||||
|
}
|
||||||
|
},
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -56,6 +85,24 @@ fun BitwardenOverflowActionItem(
|
||||||
@Composable
|
@Composable
|
||||||
private fun BitwardenOverflowActionItem_preview() {
|
private fun BitwardenOverflowActionItem_preview() {
|
||||||
BitwardenTheme {
|
BitwardenTheme {
|
||||||
BitwardenOverflowActionItem(dropdownMenuItemContent = {})
|
BitwardenOverflowActionItem(
|
||||||
|
menuItemDataList = persistentListOf(
|
||||||
|
OverflowMenuItemData(
|
||||||
|
text = "Test",
|
||||||
|
onClick = {},
|
||||||
|
),
|
||||||
|
),
|
||||||
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Data used to populate one row of an overflow dropdown menu.
|
||||||
|
*
|
||||||
|
* @param text The text displayed for the item in the menu.
|
||||||
|
* @param onClick A callback for when the menu item is clicked.
|
||||||
|
*/
|
||||||
|
data class OverflowMenuItemData(
|
||||||
|
val text: String,
|
||||||
|
val onClick: () -> Unit,
|
||||||
|
)
|
||||||
|
|
Loading…
Reference in a new issue