Skip to content

Commit 3b6af9d

Browse files
bmartybmarty
authored
Merge pull request #5701 from element-hq/feature/bma/improveComposerAlertMolecule
Improve composer alert molecule
2 parents 967f250 + d296e19 commit 3b6af9d

File tree

22 files changed

+136
-21
lines changed

22 files changed

+136
-21
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@ captures/
5050
.idea/deviceManager.xml
5151
.idea/gradle.xml
5252
.idea/jarRepositories.xml
53+
.idea/markdown.xml
5354
.idea/misc.xml
5455
.idea/modules.xml
5556
# Comment next line if keeping position of elements in Navigation Editor is relevant for you

‎features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/MessagesView.kt‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -522,7 +522,6 @@ private fun SuccessorRoomBanner(
522522
content = stringResource(R.string.screen_room_timeline_tombstoned_room_message).toAnnotatedString(),
523523
onSubmitClick = { onRoomSuccessorClick(roomSuccessor.roomId) },
524524
modifier = modifier,
525-
isCritical = false,
526525
submitText = stringResource(R.string.screen_room_timeline_tombstoned_room_action)
527526
)
528527
}

‎features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/crypto/identity/IdentityChangeStateView.kt‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import androidx.compose.ui.text.style.TextDecoration
1919
import androidx.compose.ui.tooling.preview.PreviewParameter
2020
import io.element.android.appconfig.LearnMoreConfig
2121
import io.element.android.compound.theme.ElementTheme
22+
import io.element.android.libraries.designsystem.atomic.molecules.ComposerAlertLevel
2223
import io.element.android.libraries.designsystem.atomic.molecules.ComposerAlertMolecule
2324
import io.element.android.libraries.designsystem.preview.ElementPreview
2425
import io.element.android.libraries.designsystem.preview.PreviewsDayNight
@@ -113,7 +114,7 @@ private fun ViolationAlert(
113114
},
114115
submitText = stringResource(submitTextId),
115116
onSubmitClick = onSubmitClick,
116-
isCritical = isCritical,
117+
level = if (isCritical) ComposerAlertLevel.Critical else ComposerAlertLevel.Default,
117118
)
118119
}
119120

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,6 @@ fun TimelineItemRoomBeginningView(
4545
avatar = null,
4646
content = stringResource(R.string.screen_room_timeline_upgraded_room_message).toAnnotatedString(),
4747
onSubmitClick = { onPredecessorRoomClick(predecessorRoom.roomId) },
48-
isCritical = false,
4948
submitText = stringResource(R.string.screen_room_timeline_upgraded_room_action)
5049
)
5150
}

‎libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/atomic/molecules/ComposerAlertMolecule.kt‎

Lines changed: 51 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -24,18 +24,17 @@ import androidx.compose.ui.text.style.TextAlign
2424
import androidx.compose.ui.tooling.preview.PreviewParameter
2525
import androidx.compose.ui.unit.dp
2626
import io.element.android.compound.theme.ElementTheme
27+
import io.element.android.compound.tokens.generated.CompoundIcons
2728
import io.element.android.libraries.designsystem.components.avatar.Avatar
2829
import io.element.android.libraries.designsystem.components.avatar.AvatarData
29-
import io.element.android.libraries.designsystem.components.avatar.AvatarSize
3030
import io.element.android.libraries.designsystem.components.avatar.AvatarType
31-
import io.element.android.libraries.designsystem.components.avatar.anAvatarData
3231
import io.element.android.libraries.designsystem.preview.ElementPreview
3332
import io.element.android.libraries.designsystem.preview.PreviewsDayNight
3433
import io.element.android.libraries.designsystem.text.toAnnotatedString
3534
import io.element.android.libraries.designsystem.theme.components.Button
3635
import io.element.android.libraries.designsystem.theme.components.ButtonSize
36+
import io.element.android.libraries.designsystem.theme.components.Icon
3737
import io.element.android.libraries.designsystem.theme.components.Text
38-
import io.element.android.libraries.designsystem.utils.BooleanProvider
3938
import io.element.android.libraries.ui.strings.CommonStrings
4039

4140
@Composable
@@ -44,20 +43,37 @@ fun ComposerAlertMolecule(
4443
content: AnnotatedString,
4544
onSubmitClick: () -> Unit,
4645
modifier: Modifier = Modifier,
47-
isCritical: Boolean = false,
46+
level: ComposerAlertLevel = ComposerAlertLevel.Default,
47+
showIcon: Boolean = false,
4848
submitText: String = stringResource(CommonStrings.action_ok),
4949
) {
5050
Column(
5151
modifier.fillMaxWidth()
5252
) {
53-
val lineColor = if (isCritical) ElementTheme.colors.borderCriticalSubtle else ElementTheme.colors.borderInfoSubtle
53+
val lineColor = when (level) {
54+
ComposerAlertLevel.Default -> ElementTheme.colors.borderInfoSubtle
55+
ComposerAlertLevel.Info -> ElementTheme.colors.borderInfoSubtle
56+
ComposerAlertLevel.Critical -> ElementTheme.colors.borderCriticalSubtle
57+
}
58+
59+
val startColor = when (level) {
60+
ComposerAlertLevel.Default -> ElementTheme.colors.bgInfoSubtle
61+
ComposerAlertLevel.Info -> ElementTheme.colors.bgInfoSubtle
62+
ComposerAlertLevel.Critical -> ElementTheme.colors.bgCriticalSubtle
63+
}
64+
65+
val textColor = when (level) {
66+
ComposerAlertLevel.Default -> ElementTheme.colors.textPrimary
67+
ComposerAlertLevel.Info -> ElementTheme.colors.textInfoPrimary
68+
ComposerAlertLevel.Critical -> ElementTheme.colors.textCriticalPrimary
69+
}
70+
5471
Box(
5572
modifier = Modifier
5673
.fillMaxWidth()
5774
.height(1.dp)
5875
.background(lineColor)
5976
)
60-
val startColor = if (isCritical) ElementTheme.colors.bgCriticalSubtle else ElementTheme.colors.bgInfoSubtle
6177
val brush = Brush.verticalGradient(
6278
listOf(startColor, ElementTheme.colors.bgCanvasDefault),
6379
)
@@ -77,16 +93,28 @@ fun ComposerAlertMolecule(
7793
avatarData = avatar,
7894
avatarType = AvatarType.User,
7995
)
96+
} else if (showIcon) {
97+
val icon = when (level) {
98+
ComposerAlertLevel.Default -> CompoundIcons.Info()
99+
ComposerAlertLevel.Info -> CompoundIcons.Info()
100+
ComposerAlertLevel.Critical -> CompoundIcons.Error()
101+
}
102+
val iconTint = when (level) {
103+
ComposerAlertLevel.Default -> ElementTheme.colors.iconPrimary
104+
ComposerAlertLevel.Info -> ElementTheme.colors.iconInfoPrimary
105+
ComposerAlertLevel.Critical -> ElementTheme.colors.iconCriticalPrimary
106+
}
107+
Icon(
108+
imageVector = icon,
109+
tint = iconTint,
110+
contentDescription = null,
111+
)
80112
}
81113
Text(
82114
text = content,
83115
modifier = Modifier.weight(1f),
84116
style = ElementTheme.typography.fontBodyMdRegular,
85-
color = if (isCritical) {
86-
ElementTheme.colors.textCriticalPrimary
87-
} else {
88-
ElementTheme.colors.textPrimary
89-
},
117+
color = textColor,
90118
textAlign = TextAlign.Start,
91119
)
92120
}
@@ -101,13 +129,22 @@ fun ComposerAlertMolecule(
101129
}
102130
}
103131

132+
enum class ComposerAlertLevel {
133+
Default,
134+
Info,
135+
Critical
136+
}
137+
104138
@PreviewsDayNight
105139
@Composable
106-
internal fun ComposerAlertMoleculePreview(@PreviewParameter(BooleanProvider::class) isCritical: Boolean) = ElementPreview {
140+
internal fun ComposerAlertMoleculePreview(
141+
@PreviewParameter(ComposerAlertMoleculeParamsProvider::class) params: ComposerAlertMoleculeParams,
142+
) = ElementPreview {
107143
ComposerAlertMolecule(
108-
avatar = anAvatarData(size = AvatarSize.ComposerAlert),
144+
avatar = params.avatar,
109145
content = "Alice’s verified identity has changed. Learn more".toAnnotatedString(),
110-
isCritical = isCritical,
146+
level = params.level,
147+
showIcon = params.showIcon,
111148
onSubmitClick = {},
112149
)
113150
}

‎libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/atomic/molecules/ComposerAlertMoleculeParamsProvider.kt‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
/*
2+
* Copyright 2025 New Vector Ltd.
3+
*
4+
* SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
5+
* Please see LICENSE files in the repository root for full details.
6+
*/
7+
8+
package io.element.android.libraries.designsystem.atomic.molecules
9+
10+
import androidx.compose.ui.tooling.preview.PreviewParameterProvider
11+
import io.element.android.libraries.designsystem.components.avatar.AvatarData
12+
import io.element.android.libraries.designsystem.components.avatar.AvatarSize
13+
import io.element.android.libraries.designsystem.components.avatar.anAvatarData
14+
15+
internal data class ComposerAlertMoleculeParams(
16+
val level: ComposerAlertLevel,
17+
val avatar: AvatarData? = null,
18+
val showIcon: Boolean = false,
19+
)
20+
21+
internal class ComposerAlertMoleculeParamsProvider : PreviewParameterProvider<ComposerAlertMoleculeParams> {
22+
private val allLevels = sequenceOf(
23+
ComposerAlertLevel.Default,
24+
ComposerAlertLevel.Info,
25+
ComposerAlertLevel.Critical
26+
)
27+
28+
override val values: Sequence<ComposerAlertMoleculeParams>
29+
get() = allLevels.flatMap { level ->
30+
sequenceOf(
31+
ComposerAlertMoleculeParams(level = level),
32+
ComposerAlertMoleculeParams(level = level, avatar = anAvatarData(size = AvatarSize.ComposerAlert)),
33+
ComposerAlertMoleculeParams(level = level, showIcon = true),
34+
)
35+
}
36+
}

‎tests/uitests/src/test/snapshots/images/libraries.designsystem.atomic.molecules_ComposerAlertMolecule_Day_0_en.png‎

Lines changed: 2 additions & 2 deletions
Loading

‎tests/uitests/src/test/snapshots/images/libraries.designsystem.atomic.molecules_ComposerAlertMolecule_Day_2_en.png‎

Lines changed: 3 additions & 0 deletions
Loading

‎tests/uitests/src/test/snapshots/images/libraries.designsystem.atomic.molecules_ComposerAlertMolecule_Day_3_en.png‎

Lines changed: 3 additions & 0 deletions
Loading

‎tests/uitests/src/test/snapshots/images/libraries.designsystem.atomic.molecules_ComposerAlertMolecule_Day_4_en.png‎

Lines changed: 3 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)