Sulkta-OSS/element-x-ada
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update the API and add UI screenshots demoing it.

Browse source
This commit is contained in:
Benoit Marty 2023-07-28 10:29:13 +02:00
parent 26bae1a831
commit 5ace169440
4 changed files with 136 additions and 54 deletions
Download patch file Download diff file Expand all files Collapse all files

28
libraries/textcomposer/src/main/kotlin/io/element/android/libraries/textcomposer/TextComposer.kt
View file

@ -73,7 +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.text.applyScaleUp
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
@ -110,8 +110,8 @@ 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()
val roundCornerSmall = 20.dp.applyScaleUp()
val roundCornerLarge = 28.dp.applyScaleUp()
var lineCount by remember { mutableStateOf(0) }
val roundedCornerSize = remember(lineCount, composerMode) {
@ -128,7 +128,7 @@ fun TextComposer(
)
)
val roundedCorners = RoundedCornerShape(roundedCornerSizeState.value)
val minHeight = 42.dp.scaleMin()
val minHeight = 42.dp.applyScaleUp()
val bgColor = ElementTheme.colors.bgSubtleSecondary
// Change border color depending on focus
var hasFocus by remember { mutableStateOf(false) }
@ -169,7 +169,7 @@ fun TextComposer(
singleLine = false,
visualTransformation = VisualTransformation.None,
shape = roundedCorners,
contentPadding = PaddingValues(top = 10.dp.scaleMin(), bottom = 10.dp.scaleMin(), start = 12.dp.scaleMin(), end = 42.dp.scaleMin()),
contentPadding = PaddingValues(top = 10.dp.applyScaleUp(), bottom = 10.dp.applyScaleUp(), start = 12.dp.applyScaleUp(), end = 42.dp.applyScaleUp()),
interactionSource = remember { MutableInteractionSource() },
placeholder = {
Text(stringResource(CommonStrings.common_message), style = defaultTypography)
@ -197,7 +197,7 @@ fun TextComposer(
canSendMessage = composerCanSendMessage,
onSendMessage = onSendMessage,
composerMode = composerMode,
modifier = Modifier.padding(end = 6.dp.scaleMin(), bottom = 6.dp.scaleMin())
modifier = Modifier.padding(end = 6.dp.applyScaleUp(), bottom = 6.dp.applyScaleUp())
)
}
}
@ -257,7 +257,7 @@ private fun EditingModeView(
tint = ElementTheme.materialColors.secondary,
modifier = Modifier
.padding(vertical = 8.dp)
.size(16.dp.scaleMin()),
.size(16.dp.applyScaleUp()),
)
Text(
stringResource(CommonStrings.common_editing),
@ -274,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.scaleMin())
.size(16.dp.applyScaleUp())
.clickable(
enabled = true,
onClick = onResetComposerMode,
@ -337,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.scaleMin())
.size(16.dp.applyScaleUp())
.clickable(
enabled = true,
onClick = onResetComposerMode,
@ -355,13 +355,13 @@ private fun AttachmentButton(
) {
Surface(
modifier
.size(30.dp.scaleMin())
.size(30.dp.applyScaleUp())
.clickable(onClick = onClick),
shape = CircleShape,
color = ElementTheme.colors.iconPrimary
) {
Image(
modifier = Modifier.size(12.5f.dp.scaleMin()),
modifier = Modifier.size(12.5f.dp.applyScaleUp()),
painter = painterResource(R.drawable.ic_add_attachment),
contentDescription = stringResource(R.string.rich_text_editor_a11y_add_attachment),
contentScale = ContentScale.Inside,
@ -385,10 +385,10 @@ private fun BoxScope.SendButton(
modifier = modifier
.clip(CircleShape)
.background(if (canSendMessage) ElementTheme.colors.iconAccentTertiary else Color.Transparent)
.size(30.dp.scaleMin())
.size(30.dp.applyScaleUp())
.align(Alignment.BottomEnd)
.applyIf(composerMode !is MessageComposerMode.Edit, ifTrue = {
padding(start = 1.dp.scaleMin()) // Center the arrow in the circle
padding(start = 1.dp.applyScaleUp()) // Center the arrow in the circle
})
.clickable(
enabled = canSendMessage,
@ -408,7 +408,7 @@ private fun BoxScope.SendButton(
else -> stringResource(CommonStrings.action_send)
}
Icon(
modifier = Modifier.size(16.dp.scaleMin()),
modifier = Modifier.size(16.dp.applyScaleUp()),
resourceId = iconId,
contentDescription = contentDescription,
// Exception here, we use Color.White instead of ElementTheme.colors.iconOnSolidPrimary