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

Merge pull request #3695 from element-hq/feature/bma/improveComposerPaddings

Browse source 
Improve composer paddings
This commit is contained in:
Benoit Marty 2024-10-16 22:55:51 +02:00 • committed by GitHub
commit 05a0effd2a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
19 changed files with 111 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

31
libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/ComposerModeView.kt
View file

@ -25,9 +25,12 @@ import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.PreviewParameter
import androidx.compose.ui.unit.dp
import io.element.android.compound.theme.ElementTheme
import io.element.android.compound.tokens.generated.CompoundIcons
import io.element.android.libraries.designsystem.preview.ElementPreview
import io.element.android.libraries.designsystem.preview.PreviewsDayNight
import io.element.android.libraries.designsystem.theme.components.Icon
import io.element.android.libraries.designsystem.theme.components.Text
import io.element.android.libraries.matrix.ui.messages.reply.InReplyToDetails
@ -37,33 +40,37 @@ import io.element.android.libraries.ui.strings.CommonStrings
@Composable
internal fun ComposerModeView(
composerMode: MessageComposerMode,
composerMode: MessageComposerMode.Special,
onResetComposerMode: () -> Unit,
modifier: Modifier = Modifier,
) {
when (composerMode) {
is MessageComposerMode.Edit -> {
EditingModeView(onResetComposerMode = onResetComposerMode)
EditingModeView(
modifier = modifier,
onResetComposerMode = onResetComposerMode,
)
}
is MessageComposerMode.Reply -> {
ReplyToModeView(
modifier = Modifier.padding(8.dp),
modifier = modifier.padding(8.dp),
replyToDetails = composerMode.replyToDetails,
hideImage = composerMode.hideImage,
onResetComposerMode = onResetComposerMode,
)
}
else -> Unit
}
}
@Composable
private fun EditingModeView(
onResetComposerMode: () -> Unit,
modifier: Modifier = Modifier,
) {
Row(
horizontalArrangement = Arrangement.spacedBy(4.dp),
verticalAlignment = Alignment.CenterVertically,
modifier = Modifier
modifier = modifier
.fillMaxWidth()
.padding(start = 12.dp)
) {
@ -124,7 +131,7 @@ private fun ReplyToModeView(
contentDescription = stringResource(CommonStrings.action_close),
tint = MaterialTheme.colorScheme.secondary,
modifier = Modifier
.padding(end = 4.dp, top = 4.dp, start = 16.dp, bottom = 16.dp)
.padding(end = 4.dp, top = 4.dp, start = 8.dp, bottom = 16.dp)
.size(16.dp)
.clickable(
enabled = true,
@ -135,3 +142,15 @@ private fun ReplyToModeView(
)
}
}
@PreviewsDayNight
@Composable
internal fun ComposerModeViewPreview(
@PreviewParameter(MessageComposerModeSpecialProvider::class) mode: MessageComposerMode.Special
) = ElementPreview {
ComposerModeView(
composerMode = mode,
onResetComposerMode = {},
modifier = Modifier.background(ElementTheme.colors.bgSubtleSecondary)
)
}

24
libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/MessageComposerModeSpecialProvider.kt Normal file
View file

@ -0,0 +1,24 @@
/*
* Copyright 2024 New Vector Ltd.
*
* SPDX-License-Identifier: AGPL-3.0-only
* Please see LICENSE in the repository root for full details.
*/
package io.element.android.libraries.textcomposer
import androidx.compose.ui.tooling.preview.PreviewParameterProvider
import io.element.android.libraries.matrix.ui.messages.reply.InReplyToDetailsProvider
import io.element.android.libraries.textcomposer.model.MessageComposerMode
class MessageComposerModeSpecialProvider : PreviewParameterProvider<MessageComposerMode.Special> {
override val values: Sequence<MessageComposerMode.Special> = sequenceOf(
aMessageComposerModeEdit()
) +
// Keep only 3 values from InReplyToDetailsProvider
InReplyToDetailsProvider().values.take(3).map {
aMessageComposerModeReply(
replyToDetails = it
)
}
}

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

@ -432,7 +432,7 @@ private fun TextInputBox(
val defaultTypography = ElementTheme.typography.fontBodyLgRegular
Box(
modifier = Modifier
.padding(top = 4.dp, bottom = 4.dp, start = 12.dp, end = 42.dp)
.padding(top = 4.dp, bottom = 4.dp, start = 12.dp, end = 12.dp)
// Apply test tag only once, otherwise 2 nodes will have it (both the normal and subcomposing one) and tests will fail
.then(if (!subcomposing) Modifier.testTag(TestTags.textEditor) else Modifier),
contentAlignment = Alignment.CenterStart,
@ -579,7 +579,7 @@ internal fun TextComposerEditPreview() = ElementPreview {
ATextComposer(
TextEditorState.Rich(aRichTextEditorState(initialText = "A message", initialFocus = true)),
voiceMessageState = VoiceMessageState.Idle,
composerMode = MessageComposerMode.Edit(EventId("$1234"), TransactionId("1234"), "Some text"),
composerMode = aMessageComposerModeEdit(),
enableVoiceMessages = true,
)
}))
@ -592,7 +592,7 @@ internal fun MarkdownTextComposerEditPreview() = ElementPreview {
ATextComposer(
TextEditorState.Markdown(aMarkdownTextEditorState(initialText = "A message", initialFocus = true)),
voiceMessageState = VoiceMessageState.Idle,
composerMode = MessageComposerMode.Edit(EventId("$1234"), TransactionId("1234"), "Some text"),
composerMode = aMessageComposerModeEdit(),
enableVoiceMessages = true,
)
}))
@ -604,9 +604,8 @@ internal fun TextComposerReplyPreview(@PreviewParameter(InReplyToDetailsProvider
ATextComposer(
state = TextEditorState.Rich(aRichTextEditorState()),
voiceMessageState = VoiceMessageState.Idle,
composerMode = MessageComposerMode.Reply(
composerMode = aMessageComposerModeReply(
replyToDetails = inReplyToDetails,
hideImage = false,
),
enableVoiceMessages = true,
)
@ -718,3 +717,21 @@ fun aRichTextEditorState(
initialMarkdown = initialMarkdown,
initialFocus = initialFocus,
)
fun aMessageComposerModeEdit(
eventId: EventId? = EventId("$1234"),
transactionId: TransactionId? = TransactionId("1234"),
content: String = "Some text",
) = MessageComposerMode.Edit(
eventId = eventId,
transactionId = transactionId,
content = content
)
fun aMessageComposerModeReply(
replyToDetails: InReplyToDetails,
hideImage: Boolean = false,
) = MessageComposerMode.Reply(
replyToDetails = replyToDetails,
hideImage = hideImage,
)