Skip to content

Commit f3a4ce3

Browse files
committed
style(fc): add icons and destructive highlighting for context menu
Signed-off-by: Brandon McAnsh <[email protected]>
1 parent 47f6476 commit f3a4ce3

File tree

2 files changed

+109
-40
lines changed

2 files changed

+109
-40
lines changed

flipchatApp/src/main/kotlin/xyz/flipchat/app/features/chat/conversation/MessageActionContextSheet.kt

Lines changed: 52 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,21 @@
11
package xyz.flipchat.app.features.chat.conversation
22

3+
import androidx.compose.foundation.Image
34
import androidx.compose.foundation.background
45
import androidx.compose.foundation.clickable
6+
import androidx.compose.foundation.layout.Arrangement
57
import androidx.compose.foundation.layout.Column
8+
import androidx.compose.foundation.layout.Row
69
import androidx.compose.foundation.layout.fillMaxWidth
710
import androidx.compose.foundation.layout.navigationBarsPadding
811
import androidx.compose.foundation.layout.padding
912
import androidx.compose.material.Divider
1013
import androidx.compose.material.Text
1114
import androidx.compose.runtime.Composable
15+
import androidx.compose.ui.Alignment
1216
import androidx.compose.ui.Modifier
1317
import androidx.compose.ui.graphics.Color
18+
import androidx.compose.ui.graphics.ColorFilter
1419
import androidx.compose.ui.res.stringResource
1520
import androidx.compose.ui.util.fastForEachIndexed
1621
import cafe.adriel.voyager.core.screen.Screen
@@ -31,47 +36,62 @@ internal data class MessageActionContextSheet(val actions: List<MessageControlAc
3136
.navigationBarsPadding()
3237
) {
3338
actions.fastForEachIndexed { index, action ->
34-
Text(
35-
text = when (action) {
36-
is MessageControlAction.Copy -> stringResource(R.string.action_copyMessage)
37-
is MessageControlAction.Delete -> stringResource(R.string.action_deleteMessage)
38-
is MessageControlAction.RemoveUser -> stringResource(
39-
R.string.action_removeUser,
40-
action.name
41-
)
42-
43-
is MessageControlAction.BlockUser -> stringResource(
44-
R.string.action_blockUser,
45-
action.name
46-
)
47-
48-
49-
is MessageControlAction.UnblockUser -> stringResource(
50-
R.string.action_unblockUser,
51-
action.name
52-
)
53-
54-
55-
is MessageControlAction.ReportUserForMessage -> stringResource(R.string.action_report)
56-
is MessageControlAction.MuteUser -> stringResource(
57-
R.string.action_muteUser,
58-
action.name
59-
)
60-
61-
is MessageControlAction.Reply -> stringResource(R.string.action_reply)
62-
},
63-
style = CodeTheme.typography.textMedium,
39+
Row(
6440
modifier = Modifier
65-
.fillMaxWidth()
6641
.clickable {
6742
navigator.hide()
6843
action.onSelect()
6944
}
45+
.fillMaxWidth()
7046
.padding(
7147
horizontal = CodeTheme.dimens.inset,
7248
vertical = CodeTheme.dimens.grid.x3
49+
),
50+
verticalAlignment = Alignment.CenterVertically,
51+
horizontalArrangement = Arrangement.spacedBy(CodeTheme.dimens.grid.x2)
52+
) {
53+
Image(
54+
painter = action.painter,
55+
contentDescription = null,
56+
colorFilter = ColorFilter.tint(
57+
if (action.isDestructive) CodeTheme.colors.errorText else CodeTheme.colors.textMain
7358
)
74-
)
59+
)
60+
Text(
61+
text = when (action) {
62+
is MessageControlAction.Copy -> stringResource(R.string.action_copyMessage)
63+
is MessageControlAction.Delete -> stringResource(R.string.action_deleteMessage)
64+
is MessageControlAction.RemoveUser -> stringResource(
65+
R.string.action_removeUser,
66+
action.name
67+
)
68+
69+
is MessageControlAction.BlockUser -> stringResource(
70+
R.string.action_blockUser,
71+
action.name
72+
)
73+
74+
75+
is MessageControlAction.UnblockUser -> stringResource(
76+
R.string.action_unblockUser,
77+
action.name
78+
)
79+
80+
81+
is MessageControlAction.ReportUserForMessage -> stringResource(R.string.action_report)
82+
is MessageControlAction.MuteUser -> stringResource(
83+
R.string.action_muteUser,
84+
action.name
85+
)
86+
87+
is MessageControlAction.Reply -> stringResource(R.string.action_reply)
88+
},
89+
style = CodeTheme.typography.textMedium.copy(
90+
color = if (action.isDestructive) CodeTheme.colors.errorText else CodeTheme.colors.textMain
91+
),
92+
modifier = Modifier.weight(1f)
93+
)
94+
}
7595
if (index < actions.lastIndex) {
7696
Divider(color = White05)
7797
}

ui/components/src/main/kotlin/com/getcode/ui/components/chat/messagecontents/MessageTextContent.kt

Lines changed: 57 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,16 @@ import androidx.compose.foundation.layout.Row
99
import androidx.compose.foundation.layout.fillMaxWidth
1010
import androidx.compose.foundation.layout.padding
1111
import androidx.compose.material.Text
12+
import androidx.compose.material.icons.Icons
13+
import androidx.compose.material.icons.automirrored.filled.Reply
14+
import androidx.compose.material.icons.filled.Block
15+
import androidx.compose.material.icons.filled.ContentCopy
16+
import androidx.compose.material.icons.filled.Delete
17+
import androidx.compose.material.icons.filled.Flag
18+
import androidx.compose.material.icons.filled.Person
19+
import androidx.compose.material.icons.filled.PersonRemove
20+
import androidx.compose.material.icons.filled.Reply
21+
import androidx.compose.material.icons.filled.VoiceOverOff
1222
import androidx.compose.runtime.Composable
1323
import androidx.compose.runtime.State
1424
import androidx.compose.runtime.derivedStateOf
@@ -20,8 +30,11 @@ import androidx.compose.ui.Alignment
2030
import androidx.compose.ui.Modifier
2131
import androidx.compose.ui.draw.drawWithContent
2232
import androidx.compose.ui.graphics.Shape
33+
import androidx.compose.ui.graphics.painter.Painter
34+
import androidx.compose.ui.graphics.vector.rememberVectorPainter
2335
import androidx.compose.ui.input.pointer.pointerInput
2436
import androidx.compose.ui.platform.LocalDensity
37+
import androidx.compose.ui.res.painterResource
2538
import androidx.compose.ui.res.stringResource
2639
import androidx.compose.ui.text.AnnotatedString
2740
import androidx.compose.ui.text.SpanStyle
@@ -46,18 +59,54 @@ import kotlin.math.max
4659

4760
sealed interface MessageControlAction {
4861
val onSelect: () -> Unit
62+
@get:Composable
63+
val painter: Painter
64+
val isDestructive: Boolean
4965

50-
data class Copy(override val onSelect: () -> Unit) : MessageControlAction
51-
data class Reply(override val onSelect: () -> Unit) : MessageControlAction
52-
data class Delete(override val onSelect: () -> Unit) : MessageControlAction
66+
data class Copy(override val onSelect: () -> Unit) : MessageControlAction {
67+
override val isDestructive: Boolean = false
68+
69+
override val painter: Painter
70+
@Composable get() = rememberVectorPainter(Icons.Default.ContentCopy)
71+
}
72+
data class Reply(override val onSelect: () -> Unit) : MessageControlAction {
73+
override val isDestructive: Boolean = false
74+
override val painter: Painter
75+
@Composable get() = rememberVectorPainter(Icons.AutoMirrored.Default.Reply)
76+
}
77+
data class Delete(override val onSelect: () -> Unit) : MessageControlAction {
78+
override val isDestructive: Boolean = true
79+
override val painter: Painter
80+
@Composable get() = rememberVectorPainter(Icons.Default.Delete)
81+
}
5382
data class RemoveUser(val name: String, override val onSelect: () -> Unit) :
54-
MessageControlAction
83+
MessageControlAction {
84+
override val isDestructive: Boolean = true
85+
override val painter: Painter
86+
@Composable get() = rememberVectorPainter(Icons.Default.PersonRemove)
87+
}
5588

56-
data class MuteUser(val name: String, override val onSelect: () -> Unit) : MessageControlAction
89+
data class MuteUser(val name: String, override val onSelect: () -> Unit) : MessageControlAction {
90+
override val isDestructive: Boolean = true
91+
override val painter: Painter
92+
@Composable get() = rememberVectorPainter(Icons.Default.VoiceOverOff)
93+
}
5794
data class ReportUserForMessage(val name: String, override val onSelect: () -> Unit) :
58-
MessageControlAction
59-
data class BlockUser(val name: String, override val onSelect: () -> Unit): MessageControlAction
60-
data class UnblockUser(val name: String, override val onSelect: () -> Unit): MessageControlAction
95+
MessageControlAction {
96+
override val isDestructive: Boolean = true
97+
override val painter: Painter
98+
@Composable get() = rememberVectorPainter(Icons.Default.Flag)
99+
}
100+
data class BlockUser(val name: String, override val onSelect: () -> Unit): MessageControlAction {
101+
override val isDestructive: Boolean = true
102+
override val painter: Painter
103+
@Composable get() = rememberVectorPainter(Icons.Default.Block)
104+
}
105+
data class UnblockUser(val name: String, override val onSelect: () -> Unit): MessageControlAction {
106+
override val isDestructive: Boolean = false
107+
override val painter: Painter
108+
@Composable get() = rememberVectorPainter(Icons.Default.Person)
109+
}
61110
}
62111

63112
data class MessageControls(

0 commit comments

Comments
 (0)