mirror of
https://github.com/anyproto/anytype-kotlin.git
synced 2025-06-08 05:47:05 +09:00
DROID-3183 Chats | Enhancement | Go-to-mention UX basics (#2457)
This commit is contained in:
Evgenii Kozlov
parent
42e5715bf1
commit
617797eabf
GPG key ID:
B5690EEEBB952194
12 changed files with 205 additions and 50 deletions
|
|
@ -170,6 +170,7 @@ data class ChatViewState(
|
|||
val counter: Counter = Counter()
|
||||
) {
|
||||
data class Counter(
|
||||
val count: Int = 0
|
||||
val messages: Int = 0,
|
||||
val mentions: Int = 0
|
||||
)
|
||||
}
|
||||
|
|
@ -345,7 +345,8 @@ class ChatViewModel @Inject constructor(
|
|||
messages = messageViews,
|
||||
intent = result.intent,
|
||||
counter = ChatViewState.Counter(
|
||||
count = result.state.unreadMessages?.counter ?: 0
|
||||
messages = result.state.unreadMessages?.counter ?: 0,
|
||||
mentions = result.state.unreadMentions?.counter ?: 0
|
||||
)
|
||||
)
|
||||
}.flowOn(dispatchers.io).distinctUntilChanged().collect {
|
||||
|
|
@ -1036,6 +1037,13 @@ class ChatViewModel @Inject constructor(
|
|||
}
|
||||
}
|
||||
|
||||
fun onGoToMentionClicked() {
|
||||
Timber.d("DROID-2966 onGoToMentionClicked")
|
||||
viewModelScope.launch {
|
||||
chatContainer.onGoToMention()
|
||||
}
|
||||
}
|
||||
|
||||
fun onChatScrollToReply(replyMessage: Id) {
|
||||
Timber.d("DROID-2966 onScrollToReply: $replyMessage")
|
||||
viewModelScope.launch {
|
||||
|
|
|
|||
|
|
@ -201,7 +201,8 @@ fun ChatScreenPreview() {
|
|||
onClearIntent = {},
|
||||
onScrollToBottomClicked = {},
|
||||
onVisibleRangeChanged = { _, _ -> },
|
||||
onUrlInserted = {}
|
||||
onUrlInserted = {},
|
||||
onGoToMentionClicked = {}
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -227,7 +227,8 @@ fun ChatScreenWrapper(
|
|||
onClearIntent = vm::onClearChatViewStateIntent,
|
||||
onScrollToBottomClicked = vm::onScrollToBottomClicked,
|
||||
onVisibleRangeChanged = vm::onVisibleRangeChanged,
|
||||
onUrlInserted = vm::onUrlPasted
|
||||
onUrlInserted = vm::onUrlPasted,
|
||||
onGoToMentionClicked = vm::onGoToMentionClicked
|
||||
)
|
||||
LaunchedEffect(Unit) {
|
||||
vm.uXCommands.collect { command ->
|
||||
|
|
@ -341,6 +342,7 @@ fun ChatScreen(
|
|||
onScrollToBottomClicked: (Id?) -> Unit,
|
||||
onVisibleRangeChanged: (Id, Id) -> Unit,
|
||||
onUrlInserted: (Url) -> Unit,
|
||||
onGoToMentionClicked: () -> Unit
|
||||
) {
|
||||
|
||||
Timber.d("DROID-2966 Render called with state, number of messages: ${messages.size}")
|
||||
|
|
@ -519,6 +521,43 @@ fun ChatScreen(
|
|||
onScrollToReplyClicked = onScrollToReplyClicked
|
||||
)
|
||||
|
||||
GoToMentionButton(
|
||||
modifier = Modifier
|
||||
.align(Alignment.BottomEnd)
|
||||
.padding(
|
||||
end = 12.dp,
|
||||
bottom = if (jumpToBottomButtonEnabled) 60.dp else 0.dp
|
||||
),
|
||||
onClick = onGoToMentionClicked,
|
||||
enabled = counter.mentions > 0
|
||||
)
|
||||
|
||||
if (counter.mentions > 0) {
|
||||
Box(
|
||||
modifier = Modifier
|
||||
.align(Alignment.BottomEnd)
|
||||
.defaultMinSize(minWidth = 20.dp, minHeight = 20.dp)
|
||||
.padding(
|
||||
bottom = if (jumpToBottomButtonEnabled) 106.dp else 46.dp,
|
||||
end = 2.dp
|
||||
)
|
||||
.background(
|
||||
color = colorResource(R.color.transparent_active),
|
||||
shape = CircleShape
|
||||
)
|
||||
) {
|
||||
Text(
|
||||
text = counter.mentions.toString(),
|
||||
modifier = Modifier.align(Alignment.Center).padding(
|
||||
horizontal = 5.dp,
|
||||
vertical = 2.dp
|
||||
),
|
||||
color = colorResource(R.color.glyph_white),
|
||||
style = Caption1Regular
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
GoToBottomButton(
|
||||
modifier = Modifier
|
||||
.align(Alignment.BottomEnd)
|
||||
|
|
@ -541,7 +580,7 @@ fun ChatScreen(
|
|||
enabled = jumpToBottomButtonEnabled
|
||||
)
|
||||
|
||||
if (counter.count > 0) {
|
||||
if (counter.messages > 0) {
|
||||
Box(
|
||||
modifier = Modifier
|
||||
.align(Alignment.BottomEnd)
|
||||
|
|
@ -553,7 +592,7 @@ fun ChatScreen(
|
|||
)
|
||||
) {
|
||||
Text(
|
||||
text = counter.count.toString(),
|
||||
text = counter.messages.toString(),
|
||||
modifier = Modifier.align(Alignment.Center).padding(
|
||||
horizontal = 5.dp,
|
||||
vertical = 2.dp
|
||||
|
|
|
|||
|
|
@ -206,4 +206,52 @@ fun GoToBottomButton(
|
|||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@Composable
|
||||
fun GoToMentionButton(
|
||||
enabled: Boolean,
|
||||
modifier: Modifier,
|
||||
onClick: () -> Unit
|
||||
) {
|
||||
val transition = updateTransition(
|
||||
enabled,
|
||||
label = "JumpToBottom visibility animation"
|
||||
)
|
||||
val bottomOffset by transition.animateDp(label = "JumpToBottom offset animation") {
|
||||
if (it) {
|
||||
(12).dp
|
||||
} else {
|
||||
(-12).dp
|
||||
}
|
||||
}
|
||||
if (bottomOffset > 0.dp) {
|
||||
Box(
|
||||
modifier = modifier
|
||||
.offset(x = 0.dp, y = -bottomOffset)
|
||||
.size(48.dp)
|
||||
.clip(RoundedCornerShape(12.dp))
|
||||
.background(color = colorResource(id = R.color.navigation_panel))
|
||||
.clickable {
|
||||
onClick()
|
||||
}
|
||||
|
||||
) {
|
||||
Image(
|
||||
painter = painterResource(id = R.drawable.ic_go_to_mention_button),
|
||||
contentDescription = "Arrow icon",
|
||||
modifier = Modifier.align(Alignment.Center)
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@DefaultPreviews
|
||||
@Composable
|
||||
fun GoToMentionButtonPreview() {
|
||||
GoToMentionButton(
|
||||
enabled = true,
|
||||
modifier = Modifier,
|
||||
onClick = {}
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<vector xmlns:android="http://schemas.android.com/apk/res/android"
|
||||
android:width="24dp"
|
||||
android:height="24dp"
|
||||
android:viewportWidth="24"
|
||||
android:viewportHeight="24">
|
||||
<path
|
||||
android:pathData="M12.561,21C11.094,21 9.797,20.799 8.67,20.398C7.544,20.002 6.597,19.416 5.83,18.642C5.063,17.869 4.483,16.92 4.09,15.798C3.697,14.675 3.5,13.39 3.5,11.943C3.5,10.543 3.699,9.291 4.097,8.188C4.5,7.084 5.082,6.148 5.844,5.379C6.611,4.605 7.541,4.015 8.635,3.609C9.732,3.203 10.974,3 12.36,3C13.707,3 14.886,3.22 15.898,3.659C16.914,4.094 17.763,4.684 18.443,5.429C19.129,6.17 19.642,7.003 19.982,7.93C20.327,8.857 20.5,9.812 20.5,10.796C20.5,11.489 20.466,12.191 20.399,12.903C20.332,13.615 20.191,14.269 19.975,14.866C19.759,15.459 19.426,15.936 18.976,16.299C18.53,16.662 17.926,16.844 17.163,16.844C16.828,16.844 16.458,16.791 16.056,16.686C15.653,16.581 15.296,16.407 14.984,16.163C14.673,15.92 14.488,15.592 14.431,15.182H14.344C14.229,15.459 14.052,15.721 13.812,15.97C13.577,16.218 13.268,16.416 12.884,16.565C12.506,16.713 12.043,16.777 11.497,16.758C10.873,16.734 10.325,16.596 9.85,16.342C9.375,16.084 8.977,15.736 8.656,15.296C8.34,14.852 8.1,14.338 7.937,13.756C7.779,13.168 7.7,12.535 7.7,11.857C7.7,11.212 7.796,10.622 7.987,10.087C8.179,9.552 8.445,9.084 8.786,8.682C9.131,8.281 9.533,7.961 9.994,7.722C10.459,7.478 10.96,7.328 11.497,7.271C11.976,7.223 12.412,7.244 12.805,7.335C13.198,7.421 13.522,7.553 13.776,7.729C14.03,7.901 14.191,8.092 14.258,8.303H14.344V7.5H15.869V13.978C15.869,14.379 15.981,14.733 16.207,15.038C16.432,15.344 16.761,15.497 17.192,15.497C17.681,15.497 18.055,15.33 18.314,14.995C18.578,14.661 18.757,14.145 18.853,13.448C18.954,12.75 19.004,11.857 19.004,10.767C19.004,10.127 18.916,9.497 18.738,8.876C18.566,8.25 18.302,7.665 17.947,7.12C17.597,6.576 17.154,6.096 16.617,5.68C16.08,5.264 15.449,4.939 14.726,4.705C14.006,4.467 13.189,4.347 12.273,4.347C11.147,4.347 10.137,4.522 9.246,4.87C8.359,5.214 7.604,5.718 6.981,6.382C6.362,7.041 5.89,7.844 5.564,8.79C5.243,9.731 5.082,10.801 5.082,12C5.082,13.218 5.243,14.3 5.564,15.246C5.89,16.192 6.369,16.99 7.002,17.639C7.64,18.289 8.428,18.781 9.368,19.115C10.308,19.455 11.391,19.624 12.618,19.624C13.146,19.624 13.666,19.574 14.179,19.474C14.692,19.373 15.145,19.264 15.538,19.144C15.931,19.025 16.214,18.936 16.387,18.879L16.789,20.198C16.492,20.322 16.104,20.446 15.624,20.57C15.15,20.694 14.642,20.797 14.1,20.878C13.563,20.959 13.05,21 12.561,21ZM11.727,15.296C12.369,15.296 12.889,15.167 13.287,14.909C13.685,14.651 13.975,14.262 14.157,13.741C14.34,13.22 14.431,12.564 14.431,11.771C14.431,10.968 14.33,10.342 14.129,9.893C13.927,9.444 13.63,9.129 13.237,8.947C12.844,8.766 12.36,8.675 11.784,8.675C11.238,8.675 10.77,8.818 10.382,9.105C9.998,9.387 9.704,9.764 9.497,10.237C9.296,10.705 9.195,11.217 9.195,11.771C9.195,12.382 9.277,12.958 9.44,13.498C9.603,14.033 9.869,14.467 10.238,14.802C10.607,15.131 11.104,15.296 11.727,15.296Z"
|
||||
android:fillColor="@color/text_primary"/>
|
||||
</vector>
|
||||
Loading…
Add table
Add a link
Reference in a new issue