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

Merge pull request #5701 from element-hq/feature/bma/improveComposerAlertMolecule

Browse source 
Improve composer alert molecule
This commit is contained in:
Benoit Marty 2025-11-10 09:22:26 +01:00 • committed by GitHub
commit 3b6af9d25d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
22 changed files with 136 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

1
.gitignore vendored
View file

@ -50,6 +50,7 @@ captures/
.idea/deviceManager.xml
.idea/gradle.xml
.idea/jarRepositories.xml
.idea/markdown.xml
.idea/misc.xml
.idea/modules.xml
# Comment next line if keeping position of elements in Navigation Editor is relevant for you

1
features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/MessagesView.kt
View file

@ -522,7 +522,6 @@ private fun SuccessorRoomBanner(
content = stringResource(R.string.screen_room_timeline_tombstoned_room_message).toAnnotatedString(),
onSubmitClick = { onRoomSuccessorClick(roomSuccessor.roomId) },
modifier = modifier,
isCritical = false,
submitText = stringResource(R.string.screen_room_timeline_tombstoned_room_action)
)
}

3
features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/crypto/identity/IdentityChangeStateView.kt
View file

@ -19,6 +19,7 @@ import androidx.compose.ui.text.style.TextDecoration
import androidx.compose.ui.tooling.preview.PreviewParameter
import io.element.android.appconfig.LearnMoreConfig
import io.element.android.compound.theme.ElementTheme
import io.element.android.libraries.designsystem.atomic.molecules.ComposerAlertLevel
import io.element.android.libraries.designsystem.atomic.molecules.ComposerAlertMolecule
import io.element.android.libraries.designsystem.preview.ElementPreview
import io.element.android.libraries.designsystem.preview.PreviewsDayNight
@ -113,7 +114,7 @@ private fun ViolationAlert(
},
submitText = stringResource(submitTextId),
onSubmitClick = onSubmitClick,
isCritical = isCritical,
level = if (isCritical) ComposerAlertLevel.Critical else ComposerAlertLevel.Default,
)
}

1
features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/virtual/TimelineItemRoomBeginningView.kt
View file

@ -45,7 +45,6 @@ fun TimelineItemRoomBeginningView(
avatar = null,
content = stringResource(R.string.screen_room_timeline_upgraded_room_message).toAnnotatedString(),
onSubmitClick = { onPredecessorRoomClick(predecessorRoom.roomId) },
isCritical = false,
submitText = stringResource(R.string.screen_room_timeline_upgraded_room_action)
)
}

65
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/atomic/molecules/ComposerAlertMolecule.kt
View file

@ -24,18 +24,17 @@ 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.components.avatar.Avatar
import io.element.android.libraries.designsystem.components.avatar.AvatarData
import io.element.android.libraries.designsystem.components.avatar.AvatarSize
import io.element.android.libraries.designsystem.components.avatar.AvatarType
import io.element.android.libraries.designsystem.components.avatar.anAvatarData
import io.element.android.libraries.designsystem.preview.ElementPreview
import io.element.android.libraries.designsystem.preview.PreviewsDayNight
import io.element.android.libraries.designsystem.text.toAnnotatedString
import io.element.android.libraries.designsystem.theme.components.Button
import io.element.android.libraries.designsystem.theme.components.ButtonSize
import io.element.android.libraries.designsystem.theme.components.Icon
import io.element.android.libraries.designsystem.theme.components.Text
import io.element.android.libraries.designsystem.utils.BooleanProvider
import io.element.android.libraries.ui.strings.CommonStrings
@Composable
@ -44,20 +43,37 @@ fun ComposerAlertMolecule(
content: AnnotatedString,
onSubmitClick: () -> Unit,
modifier: Modifier = Modifier,
isCritical: Boolean = false,
level: ComposerAlertLevel = ComposerAlertLevel.Default,
showIcon: Boolean = false,
submitText: String = stringResource(CommonStrings.action_ok),
) {
Column(
modifier.fillMaxWidth()
) {
val lineColor = if (isCritical) ElementTheme.colors.borderCriticalSubtle else ElementTheme.colors.borderInfoSubtle
val lineColor = when (level) {
ComposerAlertLevel.Default -> ElementTheme.colors.borderInfoSubtle
ComposerAlertLevel.Info -> ElementTheme.colors.borderInfoSubtle
ComposerAlertLevel.Critical -> ElementTheme.colors.borderCriticalSubtle
}
val startColor = when (level) {
ComposerAlertLevel.Default -> ElementTheme.colors.bgInfoSubtle
ComposerAlertLevel.Info -> ElementTheme.colors.bgInfoSubtle
ComposerAlertLevel.Critical -> ElementTheme.colors.bgCriticalSubtle
}
val textColor = when (level) {
ComposerAlertLevel.Default -> ElementTheme.colors.textPrimary
ComposerAlertLevel.Info -> ElementTheme.colors.textInfoPrimary
ComposerAlertLevel.Critical -> ElementTheme.colors.textCriticalPrimary
}
Box(
modifier = Modifier
.fillMaxWidth()
.height(1.dp)
.background(lineColor)
)
val startColor = if (isCritical) ElementTheme.colors.bgCriticalSubtle else ElementTheme.colors.bgInfoSubtle
val brush = Brush.verticalGradient(
listOf(startColor, ElementTheme.colors.bgCanvasDefault),
)
@ -77,16 +93,28 @@ fun ComposerAlertMolecule(
avatarData = avatar,
avatarType = AvatarType.User,
)
} else if (showIcon) {
val icon = when (level) {
ComposerAlertLevel.Default -> CompoundIcons.Info()
ComposerAlertLevel.Info -> CompoundIcons.Info()
ComposerAlertLevel.Critical -> CompoundIcons.Error()
}
val iconTint = when (level) {
ComposerAlertLevel.Default -> ElementTheme.colors.iconPrimary
ComposerAlertLevel.Info -> ElementTheme.colors.iconInfoPrimary
ComposerAlertLevel.Critical -> ElementTheme.colors.iconCriticalPrimary
}
Icon(
imageVector = icon,
tint = iconTint,
contentDescription = null,
)
}
Text(
text = content,
modifier = Modifier.weight(1f),
style = ElementTheme.typography.fontBodyMdRegular,
color = if (isCritical) {
ElementTheme.colors.textCriticalPrimary
} else {
ElementTheme.colors.textPrimary
},
color = textColor,
textAlign = TextAlign.Start,
)
}
@ -101,13 +129,22 @@ fun ComposerAlertMolecule(
}
}
enum class ComposerAlertLevel {
Default,
Info,
Critical
}
@PreviewsDayNight
@Composable
internal fun ComposerAlertMoleculePreview(@PreviewParameter(BooleanProvider::class) isCritical: Boolean) = ElementPreview {
internal fun ComposerAlertMoleculePreview(
@PreviewParameter(ComposerAlertMoleculeParamsProvider::class) params: ComposerAlertMoleculeParams,
) = ElementPreview {
ComposerAlertMolecule(
avatar = anAvatarData(size = AvatarSize.ComposerAlert),
avatar = params.avatar,
content = "Alice’s verified identity has changed. Learn more".toAnnotatedString(),
isCritical = isCritical,
level = params.level,
showIcon = params.showIcon,
onSubmitClick = {},
)
}

36
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/atomic/molecules/ComposerAlertMoleculeParamsProvider.kt Normal file
View file

@ -0,0 +1,36 @@
/*
* Copyright 2025 New Vector Ltd.
*
* SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
* Please see LICENSE files in the repository root for full details.
*/
package io.element.android.libraries.designsystem.atomic.molecules
import androidx.compose.ui.tooling.preview.PreviewParameterProvider
import io.element.android.libraries.designsystem.components.avatar.AvatarData
import io.element.android.libraries.designsystem.components.avatar.AvatarSize
import io.element.android.libraries.designsystem.components.avatar.anAvatarData
internal data class ComposerAlertMoleculeParams(
val level: ComposerAlertLevel,
val avatar: AvatarData? = null,
val showIcon: Boolean = false,
)
internal class ComposerAlertMoleculeParamsProvider : PreviewParameterProvider<ComposerAlertMoleculeParams> {
private val allLevels = sequenceOf(
ComposerAlertLevel.Default,
ComposerAlertLevel.Info,
ComposerAlertLevel.Critical
)
override val values: Sequence<ComposerAlertMoleculeParams>
get() = allLevels.flatMap { level ->
sequenceOf(
ComposerAlertMoleculeParams(level = level),
ComposerAlertMoleculeParams(level = level, avatar = anAvatarData(size = AvatarSize.ComposerAlert)),
ComposerAlertMoleculeParams(level = level, showIcon = true),
)
}
}

4
tests/uitests/src/test/snapshots/images/libraries.designsystem.atomic.molecules_ComposerAlertMolecule_Day_0_en.png
View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:d11d39de74eec2a2bbae24932051d3601334bd76c0dd130c344ee0da5dcf9343
size 19987
oid sha256:53fbd6f92429d3b896337a6fe8ce42b6236e2b254baab6d49fee8349e8849082
size 17551

3
tests/uitests/src/test/snapshots/images/libraries.designsystem.atomic.molecules_ComposerAlertMolecule_Day_2_en.png Normal file
View file

@ -0,0 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:244b946fd3cf520ced76297ab66cae6ce0588b23082dbeedfc98df954d09d669
size 19657

3
tests/uitests/src/test/snapshots/images/libraries.designsystem.atomic.molecules_ComposerAlertMolecule_Day_3_en.png Normal file
View file

@ -0,0 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:5f6d00c045200e5f98d31b06afd5517ee2da41080281c6d8601ea0169a8b32f1
size 17187

3
tests/uitests/src/test/snapshots/images/libraries.designsystem.atomic.molecules_ComposerAlertMolecule_Day_4_en.png Normal file
View file

@ -0,0 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:ee64a1ca25439b8dec91e873238f52d62fcd4683c7d4d619b8a053fa0b6040ab
size 19185

3
tests/uitests/src/test/snapshots/images/libraries.designsystem.atomic.molecules_ComposerAlertMolecule_Day_5_en.png Normal file
View file

@ -0,0 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:dfece8ca4d27aa8bb0a96711f4492a7661dd9c1a00a483f120c7fd25a2abd524
size 19146

3
tests/uitests/src/test/snapshots/images/libraries.designsystem.atomic.molecules_ComposerAlertMolecule_Day_6_en.png Normal file
View file

@ -0,0 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:413049effec9e4dc82d8cac1f1e81ee82c27b557110810adda2bbfe4ce2fcd5e
size 17062

3
tests/uitests/src/test/snapshots/images/libraries.designsystem.atomic.molecules_ComposerAlertMolecule_Day_7_en.png Normal file
View file

@ -0,0 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:d11d39de74eec2a2bbae24932051d3601334bd76c0dd130c344ee0da5dcf9343
size 19987

3
tests/uitests/src/test/snapshots/images/libraries.designsystem.atomic.molecules_ComposerAlertMolecule_Day_8_en.png Normal file
View file

@ -0,0 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:04ce1ddb3d55cc50c81d45b0609e407cb06e66135435b0ab93f4276f84be2d5a
size 19785

4
tests/uitests/src/test/snapshots/images/libraries.designsystem.atomic.molecules_ComposerAlertMolecule_Night_0_en.png
View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:dafd34b746c706efdd85810bc2545ff03eb0b62fd098d0ab7d770dfd8e553888
size 22448
oid sha256:34eb7dce40c21e9def0982f82645cbc2e1ae585a56033043bae7ef25a883ac40
size 20951

3
tests/uitests/src/test/snapshots/images/libraries.designsystem.atomic.molecules_ComposerAlertMolecule_Night_2_en.png Normal file
View file

@ -0,0 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:0d94cb49717cb7d2428f611160d3e170d7eac72352d9cdaa9c697e58fdc76b9d
size 22963

3
tests/uitests/src/test/snapshots/images/libraries.designsystem.atomic.molecules_ComposerAlertMolecule_Night_3_en.png Normal file
View file

@ -0,0 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:e410c37f7044dd47d56f965c1c65294d639c2c7d614e67acaaa90df4121f6e48
size 20253

3
tests/uitests/src/test/snapshots/images/libraries.designsystem.atomic.molecules_ComposerAlertMolecule_Night_4_en.png Normal file
View file

@ -0,0 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:a03040b73e680faf99faa8c4cf92d0ba64353346e3c80a00934e0986bbf570ac
size 22509

3
tests/uitests/src/test/snapshots/images/libraries.designsystem.atomic.molecules_ComposerAlertMolecule_Night_5_en.png Normal file
View file

@ -0,0 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:b080c7768f8f954afad03d5c334207692fcf1f4e8af7d41fe0d2fced384fe9b9
size 22130

3
tests/uitests/src/test/snapshots/images/libraries.designsystem.atomic.molecules_ComposerAlertMolecule_Night_6_en.png Normal file
View file

@ -0,0 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:57228a1501e9325aadba0e1fe177039c899a13922a8df2bfb4f0b19670908259
size 19485

3
tests/uitests/src/test/snapshots/images/libraries.designsystem.atomic.molecules_ComposerAlertMolecule_Night_7_en.png Normal file
View file

@ -0,0 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:dafd34b746c706efdd85810bc2545ff03eb0b62fd098d0ab7d770dfd8e553888
size 22448

3
tests/uitests/src/test/snapshots/images/libraries.designsystem.atomic.molecules_ComposerAlertMolecule_Night_8_en.png Normal file
View file

@ -0,0 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:ed4058d71aefa09c5d804aabb8a337ece373146672a74aa1cd27d7539a02c556
size 21995