mirror of
https://github.com/bitwarden/android.git
synced 2024-10-31 15:15:34 +03:00
Adding the tooltip icon to the UsernameType dropdown in the generator (#307)
This commit is contained in:
joshua-livefront
Álison Fernandes
parent
aad143c9b6
commit
a4e11af784
4 changed files with 69 additions and 4 deletions
|
|
@ -3,8 +3,14 @@ package com.x8bit.bitwarden.ui.platform.components
|
|||
import androidx.compose.foundation.clickable
|
||||
import androidx.compose.foundation.interaction.MutableInteractionSource
|
||||
import androidx.compose.foundation.layout.Box
|
||||
import androidx.compose.foundation.layout.Row
|
||||
import androidx.compose.foundation.layout.Spacer
|
||||
import androidx.compose.foundation.layout.fillMaxWidth
|
||||
import androidx.compose.foundation.layout.size
|
||||
import androidx.compose.foundation.layout.width
|
||||
import androidx.compose.material3.Icon
|
||||
import androidx.compose.material3.IconButton
|
||||
import androidx.compose.material3.IconButtonDefaults
|
||||
import androidx.compose.material3.MaterialTheme
|
||||
import androidx.compose.material3.OutlinedTextField
|
||||
import androidx.compose.material3.OutlinedTextFieldDefaults
|
||||
|
|
@ -22,8 +28,10 @@ import androidx.compose.ui.semantics.contentDescription
|
|||
import androidx.compose.ui.semantics.role
|
||||
import androidx.compose.ui.semantics.semantics
|
||||
import androidx.compose.ui.tooling.preview.Preview
|
||||
import androidx.compose.ui.unit.dp
|
||||
import com.x8bit.bitwarden.R
|
||||
import com.x8bit.bitwarden.ui.platform.base.util.asText
|
||||
import com.x8bit.bitwarden.ui.platform.components.model.TooltipData
|
||||
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
|
||||
|
||||
/**
|
||||
|
|
@ -39,6 +47,7 @@ import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
|
|||
* is selected from the dropdown menu.
|
||||
* @param modifier A [Modifier] that you can use to apply custom modifications to the composable.
|
||||
* @param supportingText A optional supporting text that will appear below the text field.
|
||||
* @param tooltip A nullable [TooltipData], representing the tooltip icon.
|
||||
*/
|
||||
@Suppress("LongMethod")
|
||||
@Composable
|
||||
|
|
@ -49,6 +58,7 @@ fun BitwardenMultiSelectButton(
|
|||
onOptionSelected: (String) -> Unit,
|
||||
modifier: Modifier = Modifier,
|
||||
supportingText: String? = null,
|
||||
tooltip: TooltipData? = null,
|
||||
) {
|
||||
var shouldShowDialog by remember { mutableStateOf(false) }
|
||||
|
||||
|
|
@ -65,7 +75,6 @@ fun BitwardenMultiSelectButton(
|
|||
}
|
||||
.fillMaxWidth()
|
||||
.clickable(
|
||||
// Disable the ripple
|
||||
indication = null,
|
||||
interactionSource = remember { MutableInteractionSource() },
|
||||
) {
|
||||
|
|
@ -74,9 +83,24 @@ fun BitwardenMultiSelectButton(
|
|||
textStyle = MaterialTheme.typography.bodyLarge,
|
||||
readOnly = true,
|
||||
label = {
|
||||
Text(
|
||||
text = label,
|
||||
)
|
||||
Row {
|
||||
Text(text = label)
|
||||
tooltip?.let {
|
||||
Spacer(modifier = Modifier.width(3.dp))
|
||||
IconButton(
|
||||
onClick = it.onClick,
|
||||
colors = IconButtonDefaults.iconButtonColors(
|
||||
contentColor = MaterialTheme.colorScheme.primary,
|
||||
),
|
||||
modifier = Modifier.size(16.dp),
|
||||
) {
|
||||
Icon(
|
||||
painter = painterResource(id = R.drawable.ic_tooltip_small),
|
||||
contentDescription = it.contentDescription,
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
value = selectedOption,
|
||||
onValueChange = onOptionSelected,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,13 @@
|
|||
package com.x8bit.bitwarden.ui.platform.components.model
|
||||
|
||||
/**
|
||||
* Data class representing the data needed to create a tooltip icon in a composable.
|
||||
*
|
||||
* @property onClick A lambda function that defines the action to be performed when the tooltip icon
|
||||
* is clicked.
|
||||
* @property contentDescription A text description of the icon for accessibility purposes.
|
||||
*/
|
||||
data class TooltipData(
|
||||
val onClick: () -> Unit,
|
||||
val contentDescription: String,
|
||||
)
|
||||
|
|
@ -61,6 +61,7 @@ import com.x8bit.bitwarden.ui.platform.components.BitwardenStepper
|
|||
import com.x8bit.bitwarden.ui.platform.components.BitwardenTextField
|
||||
import com.x8bit.bitwarden.ui.platform.components.BitwardenWideSwitch
|
||||
import com.x8bit.bitwarden.ui.platform.components.model.IconResource
|
||||
import com.x8bit.bitwarden.ui.platform.components.model.TooltipData
|
||||
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
|
||||
import com.x8bit.bitwarden.ui.tools.feature.generator.GeneratorState.MainType.Passcode.PasscodeType.Passphrase.Companion.PASSPHRASE_MAX_NUMBER_OF_WORDS
|
||||
import com.x8bit.bitwarden.ui.tools.feature.generator.GeneratorState.MainType.Passcode.PasscodeType.Passphrase.Companion.PASSPHRASE_MIN_NUMBER_OF_WORDS
|
||||
|
|
@ -753,6 +754,12 @@ private fun UsernameOptionsItem(
|
|||
supportingText = currentSubState.selectedType.supportingStringResId?.let {
|
||||
stringResource(id = it)
|
||||
},
|
||||
tooltip = TooltipData(
|
||||
onClick = {
|
||||
// TODO: "?" icon redirects user to appropriate link (BIT-1087)
|
||||
},
|
||||
contentDescription = stringResource(id = R.string.learn_more),
|
||||
),
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
21
app/src/main/res/drawable/ic_tooltip_small.xml
Normal file
21
app/src/main/res/drawable/ic_tooltip_small.xml
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
<vector xmlns:android="http://schemas.android.com/apk/res/android"
|
||||
android:width="14dp"
|
||||
android:height="14dp"
|
||||
android:viewportWidth="14"
|
||||
android:viewportHeight="14">
|
||||
<group>
|
||||
<clip-path
|
||||
android:pathData="M0.333,0.333h13.333v13.333h-13.333z"/>
|
||||
<path
|
||||
android:pathData="M7,12.833C10.222,12.833 12.833,10.222 12.833,7C12.833,3.778 10.222,1.167 7,1.167C3.778,1.167 1.167,3.778 1.167,7C1.167,10.222 3.778,12.833 7,12.833ZM7,13.667C10.682,13.667 13.667,10.682 13.667,7C13.667,3.318 10.682,0.333 7,0.333C3.318,0.333 0.333,3.318 0.333,7C0.333,10.682 3.318,13.667 7,13.667Z"
|
||||
android:fillColor="#175DDC"
|
||||
android:fillType="evenOdd"/>
|
||||
<path
|
||||
android:pathData="M5.469,4.142C5.143,4.443 4.917,4.911 4.917,5.594C4.917,5.824 4.73,6.01 4.5,6.01C4.27,6.01 4.083,5.824 4.083,5.594C4.083,4.714 4.382,4.01 4.904,3.529C5.421,3.054 6.115,2.833 6.844,2.833C7.572,2.833 8.267,3.054 8.783,3.529C9.305,4.01 9.604,4.714 9.604,5.594C9.604,6.036 9.384,6.395 9.133,6.678C8.898,6.943 8.594,7.188 8.322,7.407C8.307,7.419 8.292,7.432 8.277,7.444C7.978,7.684 7.718,7.899 7.528,8.124C7.343,8.344 7.26,8.533 7.26,8.719V9.5C7.26,9.73 7.074,9.917 6.844,9.917C6.614,9.917 6.427,9.73 6.427,9.5V8.719C6.427,8.261 6.638,7.887 6.891,7.586C7.141,7.29 7.467,7.026 7.754,6.795C7.761,6.789 7.768,6.784 7.774,6.778C8.068,6.542 8.322,6.337 8.509,6.126C8.698,5.912 8.771,5.744 8.771,5.594C8.771,4.911 8.545,4.443 8.219,4.142C7.887,3.837 7.409,3.667 6.844,3.667C6.278,3.667 5.8,3.837 5.469,4.142Z"
|
||||
android:fillColor="#175DDC"
|
||||
android:fillType="evenOdd"/>
|
||||
<path
|
||||
android:pathData="M7.417,11.271C7.417,11.559 7.183,11.792 6.896,11.792C6.608,11.792 6.375,11.559 6.375,11.271C6.375,10.983 6.608,10.75 6.896,10.75C7.183,10.75 7.417,10.983 7.417,11.271Z"
|
||||
android:fillColor="#175DDC"/>
|
||||
</group>
|
||||
</vector>
|
||||
Loading…
Reference in a new issue