diff --git a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/text/UnitConverters.kt b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/text/UnitConverters.kt index 2e32e32987..e3a96c2db3 100644 --- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/text/UnitConverters.kt +++ b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/text/UnitConverters.kt @@ -60,3 +60,11 @@ fun Dp.roundToPx(): Int = with(LocalDensity.current) { roundToPx() } fun Dp.scaleMax(): Dp = with(LocalDensity.current) { return this@scaleMax * fontScale.coerceAtMost(1f) } + +/** + * Return the minimum value between the receiver value and the value with fonScale applied. + */ +@Composable +fun Dp.scaleMin(): Dp = with(LocalDensity.current) { + return this@scaleMin * fontScale.coerceAtLeast(1f) +} diff --git a/libraries/textcomposer/src/main/kotlin/io/element/android/libraries/textcomposer/TextComposer.kt b/libraries/textcomposer/src/main/kotlin/io/element/android/libraries/textcomposer/TextComposer.kt index 8c4c361707..ecf721ac1d 100644 --- a/libraries/textcomposer/src/main/kotlin/io/element/android/libraries/textcomposer/TextComposer.kt +++ b/libraries/textcomposer/src/main/kotlin/io/element/android/libraries/textcomposer/TextComposer.kt @@ -73,6 +73,7 @@ import io.element.android.libraries.designsystem.VectorIcons import io.element.android.libraries.designsystem.modifiers.applyIf import io.element.android.libraries.designsystem.preview.DayNightPreviews import io.element.android.libraries.designsystem.preview.ElementPreview +import io.element.android.libraries.designsystem.text.scaleMin import io.element.android.libraries.designsystem.theme.components.Icon import io.element.android.libraries.designsystem.theme.components.Surface import io.element.android.libraries.designsystem.theme.components.Text @@ -109,12 +110,15 @@ fun TextComposer( ) { AttachmentButton(onClick = onAddAttachment, modifier = Modifier.padding(vertical = 6.dp)) Spacer(modifier = Modifier.width(12.dp)) + val roundCornerSmall = 20.dp.scaleMin() + val roundCornerLarge = 28.dp.scaleMin() + var lineCount by remember { mutableStateOf(0) } val roundedCornerSize = remember(lineCount, composerMode) { if (lineCount > 1 || composerMode is MessageComposerMode.Special) { - 20.dp + roundCornerSmall } else { - 28.dp + roundCornerLarge } } val roundedCornerSizeState = animateDpAsState( @@ -124,7 +128,7 @@ fun TextComposer( ) ) val roundedCorners = RoundedCornerShape(roundedCornerSizeState.value) - val minHeight = 42.dp + val minHeight = 42.dp.scaleMin() val bgColor = ElementTheme.colors.bgSubtleSecondary // Change border color depending on focus var hasFocus by remember { mutableStateOf(false) } @@ -165,7 +169,7 @@ fun TextComposer( singleLine = false, visualTransformation = VisualTransformation.None, shape = roundedCorners, - contentPadding = PaddingValues(top = 10.dp, bottom = 10.dp, start = 12.dp, end = 42.dp), + contentPadding = PaddingValues(top = 10.dp.scaleMin(), bottom = 10.dp.scaleMin(), start = 12.dp.scaleMin(), end = 42.dp.scaleMin()), interactionSource = remember { MutableInteractionSource() }, placeholder = { Text(stringResource(CommonStrings.common_message), style = defaultTypography) @@ -193,7 +197,7 @@ fun TextComposer( canSendMessage = composerCanSendMessage, onSendMessage = onSendMessage, composerMode = composerMode, - modifier = Modifier.padding(end = 6.dp, bottom = 6.dp) + modifier = Modifier.padding(end = 6.dp.scaleMin(), bottom = 6.dp.scaleMin()) ) } } @@ -253,7 +257,7 @@ private fun EditingModeView( tint = ElementTheme.materialColors.secondary, modifier = Modifier .padding(vertical = 8.dp) - .size(16.dp), + .size(16.dp.scaleMin()), ) Text( stringResource(CommonStrings.common_editing), @@ -270,7 +274,7 @@ private fun EditingModeView( tint = ElementTheme.materialColors.secondary, modifier = Modifier .padding(top = 8.dp, bottom = 8.dp, start = 16.dp, end = 12.dp) - .size(16.dp) + .size(16.dp.scaleMin()) .clickable( enabled = true, onClick = onResetComposerMode, @@ -333,7 +337,7 @@ private fun ReplyToModeView( tint = MaterialTheme.colorScheme.secondary, modifier = Modifier .padding(end = 4.dp, top = 4.dp, start = 16.dp, bottom = 16.dp) - .size(16.dp) + .size(16.dp.scaleMin()) .clickable( enabled = true, onClick = onResetComposerMode, @@ -351,13 +355,13 @@ private fun AttachmentButton( ) { Surface( modifier - .size(30.dp) + .size(30.dp.scaleMin()) .clickable(onClick = onClick), shape = CircleShape, color = ElementTheme.colors.iconPrimary ) { Image( - modifier = Modifier.size(12.5f.dp), + modifier = Modifier.size(12.5f.dp.scaleMin()), painter = painterResource(R.drawable.ic_add_attachment), contentDescription = stringResource(R.string.rich_text_editor_a11y_add_attachment), contentScale = ContentScale.Inside, @@ -381,10 +385,10 @@ private fun BoxScope.SendButton( modifier = modifier .clip(CircleShape) .background(if (canSendMessage) ElementTheme.colors.iconAccentTertiary else Color.Transparent) - .size(30.dp) + .size(30.dp.scaleMin()) .align(Alignment.BottomEnd) .applyIf(composerMode !is MessageComposerMode.Edit, ifTrue = { - padding(start = 1.dp) // Center the arrow in the circle + padding(start = 1.dp.scaleMin()) // Center the arrow in the circle }) .clickable( enabled = canSendMessage, @@ -404,7 +408,7 @@ private fun BoxScope.SendButton( else -> stringResource(CommonStrings.action_send) } Icon( - modifier = Modifier.size(16.dp), + modifier = Modifier.size(16.dp.scaleMin()), resourceId = iconId, contentDescription = contentDescription, // Exception here, we use Color.White instead of ElementTheme.colors.iconOnSolidPrimary