Add question icon to help button

This commit is contained in:
Andrew 2024-06-12 12:35:59 +09:30
parent c44e75fe78
commit 04fbf64d50
5 changed files with 94 additions and 21 deletions

View File

@ -10,10 +10,12 @@ import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.pager.HorizontalPager
import androidx.compose.foundation.pager.rememberPagerState
import androidx.compose.material.LocalContentAlpha
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Text
import androidx.compose.material.primarySurface
@ -47,11 +49,13 @@ import org.thoughtcrime.securesms.dependencies.DatabaseComponent
import org.thoughtcrime.securesms.showOpenUrlDialog
import org.thoughtcrime.securesms.ui.AppTheme
import org.thoughtcrime.securesms.ui.LoadingArcOr
import org.thoughtcrime.securesms.ui.LocalDimensions
import org.thoughtcrime.securesms.ui.PreviewTheme
import org.thoughtcrime.securesms.ui.ThemeResPreviewParameterProvider
import org.thoughtcrime.securesms.ui.baseBold
import org.thoughtcrime.securesms.ui.classicDarkColors
import org.thoughtcrime.securesms.ui.components.AppBar
import org.thoughtcrime.securesms.ui.components.BorderlessButtonSecondary
import org.thoughtcrime.securesms.ui.components.BorderlessButtonWithIcon
import org.thoughtcrime.securesms.ui.components.MaybeScanQrCode
import org.thoughtcrime.securesms.ui.components.OutlineButton
import org.thoughtcrime.securesms.ui.components.SessionOutlinedTextField
@ -153,7 +157,7 @@ fun EnterAccountId(
) {
SessionOutlinedTextField(
text = state.newMessageIdOrOns,
modifier = Modifier.padding(horizontal = 64.dp)
modifier = Modifier.padding(horizontal = LocalDimensions.current.marginSmall)
.contentDescription("Session id input box"),
placeholder = stringResource(R.string.accountIdOrOnsEnter),
onChange = callbacks::onChange,
@ -163,7 +167,12 @@ fun EnterAccountId(
if (state.error == null) {
BorderlessButtonWithIcon(
text = stringResource(R.string.messageNewDescription),
modifier = Modifier.contentDescription(R.string.AccessibilityId_help_desk_link)
iconRes = R.drawable.ic_circle_question_mark,
contentColor = classicDarkColors[5],
modifier = Modifier
.contentDescription(R.string.AccessibilityId_help_desk_link)
.fillMaxWidth()
.padding(horizontal = LocalDimensions.current.marginMedium),
) { onHelp() }
}

View File

@ -52,7 +52,6 @@ import org.thoughtcrime.securesms.ui.LocalDimensions
import org.thoughtcrime.securesms.ui.PreviewTheme
import org.thoughtcrime.securesms.ui.ThemeResPreviewParameterProvider
import org.thoughtcrime.securesms.ui.classicDarkColors
import org.thoughtcrime.securesms.ui.components.BorderlessButton
import org.thoughtcrime.securesms.ui.components.BorderlessHtmlButton
import org.thoughtcrime.securesms.ui.components.FilledButton
import org.thoughtcrime.securesms.ui.components.OutlineButton

View File

@ -23,8 +23,6 @@ import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.DisposableEffect
import androidx.compose.runtime.getValue
@ -80,11 +78,9 @@ import org.thoughtcrime.securesms.ui.Cell
import org.thoughtcrime.securesms.ui.Divider
import org.thoughtcrime.securesms.ui.ItemButton
import org.thoughtcrime.securesms.ui.ItemButtonWithDrawable
import org.thoughtcrime.securesms.ui.baseBold
import org.thoughtcrime.securesms.ui.LocalDimensions
import org.thoughtcrime.securesms.ui.components.OutlineButton
import org.thoughtcrime.securesms.ui.components.OutlineCopyButton
import org.thoughtcrime.securesms.ui.components.OutlineTemporaryStateButton
import org.thoughtcrime.securesms.ui.contentDescription
import org.thoughtcrime.securesms.ui.destructiveButtonColors
import org.thoughtcrime.securesms.util.BitmapDecodingException
import org.thoughtcrime.securesms.util.BitmapUtil
@ -392,9 +388,9 @@ class SettingsActivity : PassphraseRequiredActionBarActivity() {
Column {
Row(
modifier = Modifier
.padding(horizontal = 24.dp)
.padding(top = 8.dp),
horizontalArrangement = Arrangement.spacedBy(16.dp),
.padding(horizontal = LocalDimensions.current.marginSmall)
.padding(top = LocalDimensions.current.marginTiny),
horizontalArrangement = Arrangement.spacedBy(LocalDimensions.current.itemSpacingSmall),
) {
OutlineButton(
stringResource(R.string.share),

View File

@ -1,8 +1,10 @@
package org.thoughtcrime.securesms.ui.components
import androidx.annotation.DrawableRes
import androidx.annotation.StringRes
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.interaction.PressInteraction
import androidx.compose.foundation.layout.height
@ -11,6 +13,7 @@ import androidx.compose.foundation.layout.wrapContentHeight
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.ButtonDefaults
import androidx.compose.material.ContentAlpha
import androidx.compose.material.Icon
import androidx.compose.material.MaterialTheme
import androidx.compose.material.OutlinedButton
import androidx.compose.material.Text
@ -24,7 +27,9 @@ import androidx.compose.runtime.setValue
import androidx.compose.runtime.staticCompositionLocalOf
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import kotlinx.coroutines.delay
@ -229,6 +234,26 @@ fun BorderlessButton(
) { content() }
}
@Composable
fun BorderlessButtonWithIcon(
text: String,
@DrawableRes iconRes: Int,
modifier: Modifier = Modifier,
style: TextStyle = MaterialTheme.typography.baseBold,
contentColor: Color = MaterialTheme.colors.onBackground,
backgroundColor: Color = Color.Transparent,
onClick: () -> Unit
) {
BorderlessButton(
modifier = modifier,
contentColor = contentColor,
backgroundColor = backgroundColor,
onClick = onClick
) {
AnnotatedTextWithIcon(text, iconRes, style = style)
}
}
@Composable
fun BorderlessHtmlButton(
textId: Int,

View File

@ -1,5 +1,6 @@
package org.thoughtcrime.securesms.ui.components
import androidx.annotation.DrawableRes
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
@ -16,8 +17,10 @@ import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.Placeholder
import androidx.compose.ui.text.PlaceholderVerticalAlign
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.buildAnnotatedString
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.Dp
@ -78,10 +81,7 @@ fun AnnotatedTextWithIcon(
text: String,
icon: ImageVector,
modifier: Modifier = Modifier,
iconTint: Color = Color.Unspecified,
iconDescription: String = "",
iconSize: TextUnit = 12.sp,
textWidth: Dp = 100.dp
style: TextStyle = MaterialTheme.typography.base
) {
val myId = "inlineContent"
val annotatedText = buildAnnotatedString {
@ -91,15 +91,59 @@ fun AnnotatedTextWithIcon(
val inlineContent = mapOf(
myId to Placeholder(
width = iconSize,
height = iconSize,
width = TextUnit.Unspecified,
height = TextUnit.Unspecified,
placeholderVerticalAlign = PlaceholderVerticalAlign.AboveBaseline
).let { InlineTextContent(it) { Icon(icon, iconDescription, tint = iconTint) } }
).let { InlineTextContent(it) { Icon(icon, contentDescription = null) } }
)
Text(
text = annotatedText,
modifier = modifier.width(textWidth),
inlineContent = inlineContent
modifier = modifier,
inlineContent = inlineContent,
style = style
)
}
@Composable
fun AnnotatedTextWithIcon(
text: String,
@DrawableRes iconRes: Int,
modifier: Modifier = Modifier,
style: TextStyle = MaterialTheme.typography.base,
iconTint: Color = Color.Unspecified,
iconSize: TextUnit = 12.sp
) {
val myId = "inlineContent"
val annotated = buildAnnotatedString {
append(text)
appendInlineContent(myId, "[icon]")
}
val inlineContent = mapOf(
Pair(
myId,
InlineTextContent(
Placeholder(
width = iconSize,
height = iconSize,
placeholderVerticalAlign = PlaceholderVerticalAlign.AboveBaseline
)
) {
Icon(
painter = painterResource(id = iconRes),
contentDescription = null,
modifier = Modifier.padding(1.dp),
tint = iconTint
)
}
)
)
Text(
text = annotated,
modifier = modifier.fillMaxWidth(),
style = style,
inlineContent = inlineContent
)
}