|
|
@ -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.modifiers.applyIf |
|
|
|
import io.element.android.libraries.designsystem.preview.DayNightPreviews |
|
|
|
import io.element.android.libraries.designsystem.preview.DayNightPreviews |
|
|
|
import io.element.android.libraries.designsystem.preview.ElementPreview |
|
|
|
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.Icon |
|
|
|
import io.element.android.libraries.designsystem.theme.components.Surface |
|
|
|
import io.element.android.libraries.designsystem.theme.components.Surface |
|
|
|
import io.element.android.libraries.designsystem.theme.components.Text |
|
|
|
import io.element.android.libraries.designsystem.theme.components.Text |
|
|
@ -109,12 +110,15 @@ fun TextComposer( |
|
|
|
) { |
|
|
|
) { |
|
|
|
AttachmentButton(onClick = onAddAttachment, modifier = Modifier.padding(vertical = 6.dp)) |
|
|
|
AttachmentButton(onClick = onAddAttachment, modifier = Modifier.padding(vertical = 6.dp)) |
|
|
|
Spacer(modifier = Modifier.width(12.dp)) |
|
|
|
Spacer(modifier = Modifier.width(12.dp)) |
|
|
|
|
|
|
|
val roundCornerSmall = 20.dp.scaleMin() |
|
|
|
|
|
|
|
val roundCornerLarge = 28.dp.scaleMin() |
|
|
|
|
|
|
|
|
|
|
|
var lineCount by remember { mutableStateOf(0) } |
|
|
|
var lineCount by remember { mutableStateOf(0) } |
|
|
|
val roundedCornerSize = remember(lineCount, composerMode) { |
|
|
|
val roundedCornerSize = remember(lineCount, composerMode) { |
|
|
|
if (lineCount > 1 || composerMode is MessageComposerMode.Special) { |
|
|
|
if (lineCount > 1 || composerMode is MessageComposerMode.Special) { |
|
|
|
20.dp |
|
|
|
roundCornerSmall |
|
|
|
} else { |
|
|
|
} else { |
|
|
|
28.dp |
|
|
|
roundCornerLarge |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
val roundedCornerSizeState = animateDpAsState( |
|
|
|
val roundedCornerSizeState = animateDpAsState( |
|
|
@ -124,7 +128,7 @@ fun TextComposer( |
|
|
|
) |
|
|
|
) |
|
|
|
) |
|
|
|
) |
|
|
|
val roundedCorners = RoundedCornerShape(roundedCornerSizeState.value) |
|
|
|
val roundedCorners = RoundedCornerShape(roundedCornerSizeState.value) |
|
|
|
val minHeight = 42.dp |
|
|
|
val minHeight = 42.dp.scaleMin() |
|
|
|
val bgColor = ElementTheme.colors.bgSubtleSecondary |
|
|
|
val bgColor = ElementTheme.colors.bgSubtleSecondary |
|
|
|
// Change border color depending on focus |
|
|
|
// Change border color depending on focus |
|
|
|
var hasFocus by remember { mutableStateOf(false) } |
|
|
|
var hasFocus by remember { mutableStateOf(false) } |
|
|
@ -165,7 +169,7 @@ fun TextComposer( |
|
|
|
singleLine = false, |
|
|
|
singleLine = false, |
|
|
|
visualTransformation = VisualTransformation.None, |
|
|
|
visualTransformation = VisualTransformation.None, |
|
|
|
shape = roundedCorners, |
|
|
|
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() }, |
|
|
|
interactionSource = remember { MutableInteractionSource() }, |
|
|
|
placeholder = { |
|
|
|
placeholder = { |
|
|
|
Text(stringResource(CommonStrings.common_message), style = defaultTypography) |
|
|
|
Text(stringResource(CommonStrings.common_message), style = defaultTypography) |
|
|
@ -193,7 +197,7 @@ fun TextComposer( |
|
|
|
canSendMessage = composerCanSendMessage, |
|
|
|
canSendMessage = composerCanSendMessage, |
|
|
|
onSendMessage = onSendMessage, |
|
|
|
onSendMessage = onSendMessage, |
|
|
|
composerMode = composerMode, |
|
|
|
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, |
|
|
|
tint = ElementTheme.materialColors.secondary, |
|
|
|
modifier = Modifier |
|
|
|
modifier = Modifier |
|
|
|
.padding(vertical = 8.dp) |
|
|
|
.padding(vertical = 8.dp) |
|
|
|
.size(16.dp), |
|
|
|
.size(16.dp.scaleMin()), |
|
|
|
) |
|
|
|
) |
|
|
|
Text( |
|
|
|
Text( |
|
|
|
stringResource(CommonStrings.common_editing), |
|
|
|
stringResource(CommonStrings.common_editing), |
|
|
@ -270,7 +274,7 @@ private fun EditingModeView( |
|
|
|
tint = ElementTheme.materialColors.secondary, |
|
|
|
tint = ElementTheme.materialColors.secondary, |
|
|
|
modifier = Modifier |
|
|
|
modifier = Modifier |
|
|
|
.padding(top = 8.dp, bottom = 8.dp, start = 16.dp, end = 12.dp) |
|
|
|
.padding(top = 8.dp, bottom = 8.dp, start = 16.dp, end = 12.dp) |
|
|
|
.size(16.dp) |
|
|
|
.size(16.dp.scaleMin()) |
|
|
|
.clickable( |
|
|
|
.clickable( |
|
|
|
enabled = true, |
|
|
|
enabled = true, |
|
|
|
onClick = onResetComposerMode, |
|
|
|
onClick = onResetComposerMode, |
|
|
@ -333,7 +337,7 @@ private fun ReplyToModeView( |
|
|
|
tint = MaterialTheme.colorScheme.secondary, |
|
|
|
tint = MaterialTheme.colorScheme.secondary, |
|
|
|
modifier = Modifier |
|
|
|
modifier = Modifier |
|
|
|
.padding(end = 4.dp, top = 4.dp, start = 16.dp, bottom = 16.dp) |
|
|
|
.padding(end = 4.dp, top = 4.dp, start = 16.dp, bottom = 16.dp) |
|
|
|
.size(16.dp) |
|
|
|
.size(16.dp.scaleMin()) |
|
|
|
.clickable( |
|
|
|
.clickable( |
|
|
|
enabled = true, |
|
|
|
enabled = true, |
|
|
|
onClick = onResetComposerMode, |
|
|
|
onClick = onResetComposerMode, |
|
|
@ -351,13 +355,13 @@ private fun AttachmentButton( |
|
|
|
) { |
|
|
|
) { |
|
|
|
Surface( |
|
|
|
Surface( |
|
|
|
modifier |
|
|
|
modifier |
|
|
|
.size(30.dp) |
|
|
|
.size(30.dp.scaleMin()) |
|
|
|
.clickable(onClick = onClick), |
|
|
|
.clickable(onClick = onClick), |
|
|
|
shape = CircleShape, |
|
|
|
shape = CircleShape, |
|
|
|
color = ElementTheme.colors.iconPrimary |
|
|
|
color = ElementTheme.colors.iconPrimary |
|
|
|
) { |
|
|
|
) { |
|
|
|
Image( |
|
|
|
Image( |
|
|
|
modifier = Modifier.size(12.5f.dp), |
|
|
|
modifier = Modifier.size(12.5f.dp.scaleMin()), |
|
|
|
painter = painterResource(R.drawable.ic_add_attachment), |
|
|
|
painter = painterResource(R.drawable.ic_add_attachment), |
|
|
|
contentDescription = stringResource(R.string.rich_text_editor_a11y_add_attachment), |
|
|
|
contentDescription = stringResource(R.string.rich_text_editor_a11y_add_attachment), |
|
|
|
contentScale = ContentScale.Inside, |
|
|
|
contentScale = ContentScale.Inside, |
|
|
@ -381,10 +385,10 @@ private fun BoxScope.SendButton( |
|
|
|
modifier = modifier |
|
|
|
modifier = modifier |
|
|
|
.clip(CircleShape) |
|
|
|
.clip(CircleShape) |
|
|
|
.background(if (canSendMessage) ElementTheme.colors.iconAccentTertiary else Color.Transparent) |
|
|
|
.background(if (canSendMessage) ElementTheme.colors.iconAccentTertiary else Color.Transparent) |
|
|
|
.size(30.dp) |
|
|
|
.size(30.dp.scaleMin()) |
|
|
|
.align(Alignment.BottomEnd) |
|
|
|
.align(Alignment.BottomEnd) |
|
|
|
.applyIf(composerMode !is MessageComposerMode.Edit, ifTrue = { |
|
|
|
.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( |
|
|
|
.clickable( |
|
|
|
enabled = canSendMessage, |
|
|
|
enabled = canSendMessage, |
|
|
@ -404,7 +408,7 @@ private fun BoxScope.SendButton( |
|
|
|
else -> stringResource(CommonStrings.action_send) |
|
|
|
else -> stringResource(CommonStrings.action_send) |
|
|
|
} |
|
|
|
} |
|
|
|
Icon( |
|
|
|
Icon( |
|
|
|
modifier = Modifier.size(16.dp), |
|
|
|
modifier = Modifier.size(16.dp.scaleMin()), |
|
|
|
resourceId = iconId, |
|
|
|
resourceId = iconId, |
|
|
|
contentDescription = contentDescription, |
|
|
|
contentDescription = contentDescription, |
|
|
|
// Exception here, we use Color.White instead of ElementTheme.colors.iconOnSolidPrimary |
|
|
|
// Exception here, we use Color.White instead of ElementTheme.colors.iconOnSolidPrimary |
|
|
|