Simplify message composer layout (#4884)

Co-authored-by: ElementBot <android@element.io>
This commit is contained in:
Jorge Martin Espinosa 2025-06-24 14:05:28 +02:00 committed by GitHub
parent 6a088396ed
commit a10734de02
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
17 changed files with 574 additions and 435 deletions

View file

@ -1,175 +0,0 @@
/*
* Copyright 2023, 2024 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.
*/
@file:OptIn(ExperimentalMaterial3Api::class)
package io.element.android.features.messages.impl
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.WindowInsets
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.ime
import androidx.compose.foundation.layout.windowInsetsPadding
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.SheetValue
import androidx.compose.material3.rememberBottomSheetScaffoldState
import androidx.compose.material3.rememberStandardBottomSheetState
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.derivedStateOf
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Shape
import androidx.compose.ui.layout.Layout
import androidx.compose.ui.layout.Measurable
import androidx.compose.ui.layout.SubcomposeLayout
import androidx.compose.ui.unit.Constraints
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.min
import io.element.android.libraries.core.data.tryOrNull
import io.element.android.libraries.designsystem.theme.components.BottomSheetScaffold
import kotlin.math.roundToInt
/**
* A [BottomSheetScaffold] that allows the sheet to be expanded the screen height
* of the sheet contents.
*
* @param content The main content.
* @param sheetContent The sheet content.
* @param sheetDragHandle The drag handle for the sheet.
* @param sheetSwipeEnabled Whether the sheet can be swiped. This value is ignored and swipe is disabled if the sheet content overflows.
* @param sheetShape The shape of the sheet.
* @param sheetTonalElevation The tonal elevation of the sheet.
* @param sheetShadowElevation The shadow elevation of the sheet.
* @param modifier The modifier for the layout.
* @param sheetContentKey The key for the sheet content. If the key changes, the sheet will be remeasured.
*/
@Suppress(
"ContentTrailingLambda",
// False positive
"MultipleEmitters",
)
@OptIn(ExperimentalMaterial3Api::class)
@Composable
internal fun ExpandableBottomSheetScaffold(
content: @Composable (padding: PaddingValues) -> Unit,
// False positive, it's not being reused
@Suppress("ContentSlotReused")
sheetContent: @Composable (subcomposing: Boolean) -> Unit,
sheetDragHandle: @Composable () -> Unit,
sheetSwipeEnabled: Boolean,
sheetShape: Shape,
sheetTonalElevation: Dp,
sheetShadowElevation: Dp,
modifier: Modifier = Modifier,
sheetContentKey: Int? = null,
) {
val scaffoldState = rememberBottomSheetScaffoldState(
bottomSheetState = rememberStandardBottomSheetState(
initialValue = SheetValue.PartiallyExpanded,
skipHiddenState = true,
)
)
// If the content overflows, we disable swipe to prevent the sheet from intercepting
// scroll events of the sheet content.
var contentOverflows by remember { mutableStateOf(false) }
val sheetSwipeEnabledIfPossible by remember(contentOverflows, sheetSwipeEnabled) {
derivedStateOf {
sheetSwipeEnabled && !contentOverflows
}
}
LaunchedEffect(sheetSwipeEnabledIfPossible) {
if (!sheetSwipeEnabledIfPossible) {
scaffoldState.bottomSheetState.partialExpand()
}
}
@Composable
fun Scaffold(
sheetContent: @Composable () -> Unit,
dragHandle: @Composable () -> Unit,
peekHeight: Dp,
) {
BottomSheetScaffold(
modifier = Modifier,
scaffoldState = scaffoldState,
sheetPeekHeight = peekHeight,
sheetSwipeEnabled = sheetSwipeEnabledIfPossible,
sheetDragHandle = dragHandle,
sheetShape = sheetShape,
content = content,
sheetContent = { sheetContent() },
sheetTonalElevation = sheetTonalElevation,
sheetShadowElevation = sheetShadowElevation,
)
}
SubcomposeLayout(
modifier = modifier.windowInsetsPadding(WindowInsets.ime),
measurePolicy = { constraints: Constraints ->
val sheetContentSub = subcompose(Slot.SheetContent(sheetContentKey)) { sheetContent(true) }.map {
it.measure(Constraints(maxWidth = constraints.maxWidth))
}.first()
val dragHandleSub = subcompose(Slot.DragHandle) { sheetDragHandle() }.map {
it.measure(Constraints(maxWidth = constraints.maxWidth))
}.firstOrNull()
val dragHandleHeight = dragHandleSub?.height?.toDp() ?: 0.dp
val maxHeight = constraints.maxHeight.toDp()
val contentHeight = sheetContentSub.measuredHeight.toDp() + dragHandleHeight
contentOverflows = contentHeight > maxHeight
val peekHeight = min(
// prevent the sheet from expanding beyond the screen
maxHeight,
contentHeight
)
val scaffoldPlaceables = subcompose(Slot.Scaffold) {
Scaffold({
Layout(
modifier = Modifier.fillMaxHeight(),
measurePolicy = { measurables, constraints ->
val constraintHeight = constraints.maxHeight
val offset = tryOrNull { scaffoldState.bottomSheetState.requireOffset() } ?: 0f
val height = Integer.max(peekHeight.roundToPx(), constraintHeight - offset.roundToInt())
val top = measurables[0].measure(
constraints.copy(
minHeight = height,
maxHeight = height
)
)
layout(constraints.maxWidth, constraints.maxHeight) {
top.place(x = 0, y = 0)
}
},
content = { sheetContent(false) }
)
}, sheetDragHandle, peekHeight)
}.map { measurable: Measurable ->
measurable.measure(constraints)
}
val scaffoldPlaceable = scaffoldPlaceables.first()
layout(constraints.maxWidth, constraints.maxHeight) {
scaffoldPlaceable.place(0, 0)
}
}
)
}
private sealed interface Slot {
data class SheetContent(val key: Int?) : Slot
data object DragHandle : Slot
data object Scaffold : Slot
}

View file

@ -26,22 +26,17 @@ import androidx.compose.foundation.layout.imePadding
import androidx.compose.foundation.layout.navigationBarsPadding
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.statusBars
import androidx.compose.foundation.layout.systemBarsPadding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.draw.shadow
import androidx.compose.ui.graphics.RectangleShape
import androidx.compose.ui.input.nestedscroll.NestedScrollConnection
import androidx.compose.ui.input.nestedscroll.NestedScrollSource
import androidx.compose.ui.input.nestedscroll.nestedScroll
import androidx.compose.ui.platform.LocalView
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.font.FontStyle
@ -83,11 +78,13 @@ import io.element.android.features.networkmonitor.api.ui.ConnectivityIndicatorVi
import io.element.android.features.roomcall.api.RoomCallState
import io.element.android.libraries.androidutils.ui.hideKeyboard
import io.element.android.libraries.designsystem.atomic.molecules.ComposerAlertMolecule
import io.element.android.libraries.designsystem.components.ExpandableBottomSheetLayout
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.AvatarType
import io.element.android.libraries.designsystem.components.button.BackButton
import io.element.android.libraries.designsystem.components.dialogs.ConfirmationDialog
import io.element.android.libraries.designsystem.components.rememberExpandableBottomSheetLayoutState
import io.element.android.libraries.designsystem.preview.ElementPreview
import io.element.android.libraries.designsystem.preview.PreviewsDayNight
import io.element.android.libraries.designsystem.text.toAnnotatedString
@ -112,7 +109,6 @@ import io.element.android.libraries.ui.strings.CommonStrings
import io.element.android.wysiwyg.link.Link
import kotlinx.collections.immutable.ImmutableList
import timber.log.Timber
import kotlin.random.Random
import kotlin.time.Duration.Companion.milliseconds
@Composable
@ -186,69 +182,114 @@ fun MessagesView(
state.customReactionState.eventSink(CustomReactionEvents.ShowCustomReactionSheet(event))
}
Scaffold(
modifier = modifier,
contentWindowInsets = WindowInsets.statusBars,
topBar = {
Column {
ConnectivityIndicatorView(isOnline = state.hasNetworkConnection)
MessagesViewTopBar(
roomName = state.roomName,
roomAvatar = state.roomAvatar,
isTombstoned = state.isTombstoned,
heroes = state.heroes,
roomCallState = state.roomCallState,
dmUserIdentityState = state.dmUserVerificationState,
onBackClick = { hidingKeyboard { onBackClick() } },
onRoomDetailsClick = { hidingKeyboard { onRoomDetailsClick() } },
onJoinCallClick = onJoinCallClick,
)
}
val expandableState = rememberExpandableBottomSheetLayoutState()
ExpandableBottomSheetLayout(
modifier = modifier.fillMaxSize().imePadding().systemBarsPadding(),
content = {
Scaffold(
contentWindowInsets = WindowInsets.statusBars,
topBar = {
Column {
ConnectivityIndicatorView(isOnline = state.hasNetworkConnection)
MessagesViewTopBar(
roomName = state.roomName,
roomAvatar = state.roomAvatar,
isTombstoned = state.isTombstoned,
heroes = state.heroes,
roomCallState = state.roomCallState,
dmUserIdentityState = state.dmUserVerificationState,
onBackClick = { hidingKeyboard { onBackClick() } },
onRoomDetailsClick = { hidingKeyboard { onRoomDetailsClick() } },
onJoinCallClick = onJoinCallClick,
)
}
},
content = { padding ->
Box(
modifier = Modifier
.padding(padding)
.consumeWindowInsets(padding)
) {
MessagesViewContent(
state = state,
onContentClick = ::onContentClick,
onMessageLongClick = ::onMessageLongClick,
onUserDataClick = {
hidingKeyboard {
state.eventSink(MessagesEvents.OnUserClicked(it))
}
},
onLinkClick = { link, customTab ->
if (customTab) {
onLinkClick(link.url, true)
// Do not check those links, they are internal link only
} else {
state.linkState.eventSink(LinkEvents.OnLinkClick(link))
}
},
onReactionClick = ::onEmojiReactionClick,
onReactionLongClick = ::onEmojiReactionLongClick,
onMoreReactionsClick = ::onMoreReactionsClick,
onReadReceiptClick = { event ->
state.readReceiptBottomSheetState.eventSink(ReadReceiptBottomSheetEvents.EventSelected(event))
},
onSendLocationClick = onSendLocationClick,
onCreatePollClick = onCreatePollClick,
onSwipeToReply = { targetEvent ->
state.eventSink(MessagesEvents.HandleAction(TimelineItemAction.Reply, targetEvent))
},
forceJumpToBottomVisibility = forceJumpToBottomVisibility,
onJoinCallClick = onJoinCallClick,
onViewAllPinnedMessagesClick = onViewAllPinnedMessagesClick,
knockRequestsBannerView = knockRequestsBannerView,
)
SuggestionsPickerView(
modifier = Modifier
.shadow(10.dp)
.background(ElementTheme.colors.bgCanvasDefault)
.align(Alignment.BottomStart)
.heightIn(max = 230.dp),
roomId = state.roomId,
roomName = state.roomName,
roomAvatarData = state.roomAvatar,
suggestions = state.composerState.suggestions,
onSelectSuggestion = {
state.composerState.eventSink(MessageComposerEvents.InsertSuggestion(it))
}
)
}
},
snackbarHost = {
SnackbarHost(
snackbarHostState,
modifier = Modifier.navigationBarsPadding()
)
},
)
},
content = { padding ->
MessagesViewContent(
bottomSheetContent = {
MessagesViewComposerBottomSheetContents(
state = state,
modifier = Modifier
.padding(padding)
.consumeWindowInsets(padding),
onContentClick = ::onContentClick,
onMessageLongClick = ::onMessageLongClick,
onUserDataClick = {
hidingKeyboard {
state.eventSink(MessagesEvents.OnUserClicked(it))
}
onLinkClick = { url, customTab -> onLinkClick(url, customTab) },
onRoomSuccessorClick = { roomId ->
state.timelineState.eventSink(TimelineEvents.NavigateToRoom(roomId = roomId))
},
onLinkClick = { link, customTab ->
if (customTab) {
onLinkClick(link.url, true)
// Do not check those links, they are internal link only
} else {
state.linkState.eventSink(LinkEvents.OnLinkClick(link))
}
},
onReactionClick = ::onEmojiReactionClick,
onReactionLongClick = ::onEmojiReactionLongClick,
onMoreReactionsClick = ::onMoreReactionsClick,
onReadReceiptClick = { event ->
state.readReceiptBottomSheetState.eventSink(ReadReceiptBottomSheetEvents.EventSelected(event))
},
onSendLocationClick = onSendLocationClick,
onCreatePollClick = onCreatePollClick,
onSwipeToReply = { targetEvent ->
state.eventSink(MessagesEvents.HandleAction(TimelineItemAction.Reply, targetEvent))
},
forceJumpToBottomVisibility = forceJumpToBottomVisibility,
onJoinCallClick = onJoinCallClick,
onViewAllPinnedMessagesClick = onViewAllPinnedMessagesClick,
knockRequestsBannerView = knockRequestsBannerView,
)
},
snackbarHost = {
SnackbarHost(
snackbarHostState,
modifier = Modifier.navigationBarsPadding()
)
sheetDragHandle = if (state.composerState.showTextFormatting) {
@Composable { BottomSheetDragHandle() }
} else {
@Composable {}
},
isSwipeGestureEnabled = state.composerState.showTextFormatting,
state = expandableState,
sheetShape = if (state.composerState.showTextFormatting || state.composerState.suggestions.isNotEmpty()) {
MaterialTheme.shapes.large
} else {
RectangleShape
},
maxBottomSheetContentHeight = 360.dp,
)
ActionListView(
@ -348,88 +389,49 @@ private fun MessagesViewContent(
)
}
// This key is used to force the sheet to be remeasured when the content changes.
// Any state change that should trigger a height size should be added to the list of remembered values here.
val sheetResizeContentKey = remember { mutableIntStateOf(0) }
LaunchedEffect(
state.composerState.textEditorState.lineCount,
state.composerState.showTextFormatting,
) {
sheetResizeContentKey.intValue = Random.nextInt()
}
ExpandableBottomSheetScaffold(
sheetDragHandle = if (state.composerState.showTextFormatting) {
@Composable { BottomSheetDragHandle() }
} else {
@Composable {}
},
sheetSwipeEnabled = state.composerState.showTextFormatting,
sheetShape = if (state.composerState.showTextFormatting || state.composerState.suggestions.isNotEmpty()) {
MaterialTheme.shapes.large
} else {
RectangleShape
},
content = { paddingValues ->
Box(modifier = Modifier.padding(paddingValues)) {
val scrollBehavior = PinnedMessagesBannerViewDefaults.rememberScrollBehavior(
pinnedMessagesCount = state.pinnedMessagesBannerState.pinnedMessagesCount(),
Box {
val scrollBehavior = PinnedMessagesBannerViewDefaults.rememberScrollBehavior(
pinnedMessagesCount = state.pinnedMessagesBannerState.pinnedMessagesCount(),
)
TimelineView(
state = state.timelineState,
timelineProtectionState = state.timelineProtectionState,
onUserDataClick = onUserDataClick,
onLinkClick = { link -> onLinkClick(link, false) },
onContentClick = onContentClick,
onMessageLongClick = onMessageLongClick,
onSwipeToReply = onSwipeToReply,
onReactionClick = onReactionClick,
onReactionLongClick = onReactionLongClick,
onMoreReactionsClick = onMoreReactionsClick,
onReadReceiptClick = onReadReceiptClick,
forceJumpToBottomVisibility = forceJumpToBottomVisibility,
onJoinCallClick = onJoinCallClick,
nestedScrollConnection = scrollBehavior.nestedScrollConnection,
)
AnimatedVisibility(
visible = state.pinnedMessagesBannerState is PinnedMessagesBannerState.Visible && scrollBehavior.isVisible,
enter = expandVertically(),
exit = shrinkVertically(),
) {
fun focusOnPinnedEvent(eventId: EventId) {
state.timelineState.eventSink(
TimelineEvents.FocusOnEvent(eventId = eventId, debounce = FOCUS_ON_PINNED_EVENT_DEBOUNCE_DURATION_IN_MILLIS.milliseconds)
)
TimelineView(
state = state.timelineState,
timelineProtectionState = state.timelineProtectionState,
onUserDataClick = onUserDataClick,
onLinkClick = { link -> onLinkClick(link, false) },
onContentClick = onContentClick,
onMessageLongClick = onMessageLongClick,
onSwipeToReply = onSwipeToReply,
onReactionClick = onReactionClick,
onReactionLongClick = onReactionLongClick,
onMoreReactionsClick = onMoreReactionsClick,
onReadReceiptClick = onReadReceiptClick,
forceJumpToBottomVisibility = forceJumpToBottomVisibility,
onJoinCallClick = onJoinCallClick,
nestedScrollConnection = scrollBehavior.nestedScrollConnection,
)
AnimatedVisibility(
visible = state.pinnedMessagesBannerState is PinnedMessagesBannerState.Visible && scrollBehavior.isVisible,
enter = expandVertically(),
exit = shrinkVertically(),
) {
fun focusOnPinnedEvent(eventId: EventId) {
state.timelineState.eventSink(
TimelineEvents.FocusOnEvent(eventId = eventId, debounce = FOCUS_ON_PINNED_EVENT_DEBOUNCE_DURATION_IN_MILLIS.milliseconds)
)
}
PinnedMessagesBannerView(
state = state.pinnedMessagesBannerState,
onClick = ::focusOnPinnedEvent,
onViewAllClick = onViewAllPinnedMessagesClick,
)
}
knockRequestsBannerView()
}
},
sheetContent = { subcomposing: Boolean ->
MessagesViewComposerBottomSheetContents(
subcomposing = subcomposing,
state = state,
onRoomSuccessorClick = { roomId ->
state.timelineState.eventSink(TimelineEvents.NavigateToRoom(roomId = roomId))
},
onLinkClick = { url, customTab -> onLinkClick(Link(url), customTab) },
PinnedMessagesBannerView(
state = state.pinnedMessagesBannerState,
onClick = ::focusOnPinnedEvent,
onViewAllClick = onViewAllPinnedMessagesClick,
)
},
sheetContentKey = sheetResizeContentKey.intValue,
sheetTonalElevation = 0.dp,
sheetShadowElevation = if (state.composerState.suggestions.isNotEmpty()) 16.dp else 0.dp,
)
}
knockRequestsBannerView()
}
}
}
@Composable
private fun MessagesViewComposerBottomSheetContents(
subcomposing: Boolean,
state: MessagesState,
onRoomSuccessorClick: (RoomId) -> Unit,
onLinkClick: (String, Boolean) -> Unit,
@ -440,23 +442,6 @@ private fun MessagesViewComposerBottomSheetContents(
}
state.userEventPermissions.canSendMessage -> {
Column(modifier = Modifier.fillMaxWidth()) {
SuggestionsPickerView(
modifier = Modifier
.heightIn(max = 230.dp)
// Consume all scrolling, preventing the bottom sheet from being dragged when interacting with the list of suggestions
.nestedScroll(object : NestedScrollConnection {
override fun onPostScroll(consumed: Offset, available: Offset, source: NestedScrollSource): Offset {
return available
}
}),
roomId = state.roomId,
roomName = state.roomName,
roomAvatarData = state.roomAvatar,
suggestions = state.composerState.suggestions,
onSelectSuggestion = {
state.composerState.eventSink(MessageComposerEvents.InsertSuggestion(it))
}
)
// Do not show the identity change if user is composing a Rich message or is seeing suggestion(s).
if (state.composerState.suggestions.isEmpty() &&
state.composerState.textEditorState is TextEditorState.Markdown) {
@ -474,7 +459,6 @@ private fun MessagesViewComposerBottomSheetContents(
MessageComposerView(
state = state.composerState,
voiceMessageState = state.voiceMessageComposerState,
subcomposing = subcomposing,
enableVoiceMessages = state.enableVoiceMessages,
modifier = Modifier.fillMaxWidth(),
)

View file

@ -33,7 +33,6 @@ import kotlinx.coroutines.launch
internal fun MessageComposerView(
state: MessageComposerState,
voiceMessageState: VoiceMessageComposerState,
subcomposing: Boolean,
enableVoiceMessages: Boolean,
modifier: Modifier = Modifier,
) {
@ -98,7 +97,6 @@ internal fun MessageComposerView(
modifier = modifier,
state = state.textEditorState,
voiceMessageState = voiceMessageState.voiceMessageState,
subcomposing = subcomposing,
onRequestFocus = ::onRequestFocus,
onSendMessage = ::sendMessage,
composerMode = state.mode,
@ -131,14 +129,12 @@ internal fun MessageComposerViewPreview(
state = state,
voiceMessageState = aVoiceMessageComposerState(),
enableVoiceMessages = true,
subcomposing = false,
)
MessageComposerView(
modifier = Modifier.height(200.dp),
state = state,
voiceMessageState = aVoiceMessageComposerState(),
enableVoiceMessages = true,
subcomposing = false,
)
DisabledComposerView()
}
@ -155,7 +151,6 @@ internal fun MessageComposerViewVoicePreview(
state = aMessageComposerState(),
voiceMessageState = state,
enableVoiceMessages = true,
subcomposing = false,
)
}
}

View file

@ -7,8 +7,10 @@
package io.element.android.libraries.androidutils.ui
import android.os.Build
import android.view.View
import android.view.ViewTreeObserver
import android.view.WindowInsets
import android.view.inputmethod.InputMethodManager
import androidx.core.content.getSystemService
import kotlinx.coroutines.suspendCancellableCoroutine
@ -23,8 +25,13 @@ fun View.showKeyboard(andRequestFocus: Boolean = false) {
if (andRequestFocus) {
requestFocus()
}
val imm = context?.getSystemService<InputMethodManager>()
imm?.showSoftInput(this, InputMethodManager.SHOW_IMPLICIT)
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.R) {
windowInsetsController?.show(WindowInsets.Type.ime())
} else {
val imm = context?.getSystemService<InputMethodManager>()
imm?.showSoftInput(this, InputMethodManager.SHOW_IMPLICIT)
}
}
fun View.isKeyboardVisible(): Boolean {

View file

@ -0,0 +1,280 @@
/*
* 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.components
import android.annotation.SuppressLint
import android.content.Context
import android.view.MotionEvent
import android.view.ViewGroup
import android.widget.EditText
import androidx.appcompat.app.ActionBar.LayoutParams
import androidx.compose.animation.core.Animatable
import androidx.compose.foundation.background
import androidx.compose.foundation.gestures.detectVerticalDragGestures
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.BoxScope
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.ColumnScope
import androidx.compose.foundation.layout.WindowInsets
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.ime
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.statusBars
import androidx.compose.foundation.layout.windowInsetsPadding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.RectangleShape
import androidx.compose.ui.graphics.Shape
import androidx.compose.ui.input.pointer.pointerInput
import androidx.compose.ui.layout.Layout
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.Constraints
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.IntOffset
import androidx.compose.ui.unit.dp
import androidx.compose.ui.viewinterop.AndroidView
import kotlinx.coroutines.launch
import timber.log.Timber
import kotlin.math.max
import kotlin.math.min
import kotlin.math.roundToInt
@Composable
fun ExpandableBottomSheetLayout(
sheetDragHandle: @Composable BoxScope.() -> Unit,
bottomSheetContent: @Composable ColumnScope.() -> Unit,
state: ExpandableBottomSheetLayoutState,
maxBottomSheetContentHeight: Dp,
isSwipeGestureEnabled: Boolean,
modifier: Modifier = Modifier,
sheetShape: Shape = RectangleShape,
backgroundColor: Color = Color.Transparent,
content: @Composable () -> Unit,
) {
var minBottomContentHeightPx by remember { mutableIntStateOf(0) }
var currentBottomContentHeightPx by remember { mutableIntStateOf(minBottomContentHeightPx) }
val maxBottomContentHeightPx = with(LocalDensity.current) { maxBottomSheetContentHeight.roundToPx() }
var calculatedMaxBottomContentHeightPx by remember(maxBottomContentHeightPx) { mutableIntStateOf(maxBottomContentHeightPx) }
val animatable = remember { Animatable(0f) }
fun calculatePercentage(currentPos: Int, minPos: Int, maxPos: Int): Float {
val currentProgress = currentPos - minPos
if (currentProgress < 0) {
Timber.e("Invalid current progress: $currentProgress, minPos: $minPos, maxPos: $maxPos")
return 0f
}
val total = (maxPos - minPos).toFloat()
if (total <= 0) {
Timber.e("Invalid total space: $total, minPos: $minPos, maxPos: $maxPos")
return 0f
}
return currentProgress / total
}
LaunchedEffect(animatable.value) {
if (animatable.isRunning && animatable.value != animatable.targetValue) {
currentBottomContentHeightPx = animatable.value.roundToInt()
state.internalDraggingPercentage = calculatePercentage(
currentPos = currentBottomContentHeightPx,
minPos = minBottomContentHeightPx,
maxPos = calculatedMaxBottomContentHeightPx,
)
}
}
val coroutineScope = rememberCoroutineScope()
val composables = @Composable {
content()
Column(
modifier = Modifier
.clip(sheetShape)
.background(backgroundColor)
.run {
if (isSwipeGestureEnabled) {
pointerInput(maxBottomSheetContentHeight) {
detectVerticalDragGestures(
onVerticalDrag = { _, dragAmount ->
val calculatedHeight = max(minBottomContentHeightPx, currentBottomContentHeightPx - dragAmount.roundToInt())
val newHeight = min(calculatedMaxBottomContentHeightPx, calculatedHeight)
state.internalPosition = when (newHeight) {
calculatedMaxBottomContentHeightPx -> ExpandableBottomSheetLayoutState.Position.EXPANDED
minBottomContentHeightPx -> ExpandableBottomSheetLayoutState.Position.COLLAPSED
else -> ExpandableBottomSheetLayoutState.Position.DRAGGING
}
state.internalDraggingPercentage = calculatePercentage(
currentPos = newHeight,
minPos = minBottomContentHeightPx,
maxPos = calculatedMaxBottomContentHeightPx,
)
currentBottomContentHeightPx = newHeight
},
onDragEnd = {
coroutineScope.launch {
val middle = (calculatedMaxBottomContentHeightPx + minBottomContentHeightPx) / 2
animatable.snapTo(currentBottomContentHeightPx.toFloat())
val destination = if (currentBottomContentHeightPx > middle) {
state.internalPosition = ExpandableBottomSheetLayoutState.Position.EXPANDED
calculatedMaxBottomContentHeightPx
} else {
state.internalPosition = ExpandableBottomSheetLayoutState.Position.COLLAPSED
minBottomContentHeightPx
}.toFloat()
animatable.animateTo(destination)
}
}
)
}
} else {
this
}
}
) {
Box(Modifier.fillMaxWidth()) {
sheetDragHandle()
}
bottomSheetContent()
}
}
Layout(
content = composables,
modifier = modifier,
measurePolicy = { measurables, constraints ->
calculatedMaxBottomContentHeightPx = min(constraints.maxHeight, maxBottomContentHeightPx)
val contentMeasurables = measurables[0]
val bottomContentMeasurables = measurables[1]
val minIntrinsicHeight = bottomContentMeasurables.minIntrinsicHeight(constraints.maxWidth)
val lastMinBottomContentHeightPx = minBottomContentHeightPx
minBottomContentHeightPx = min(minIntrinsicHeight, calculatedMaxBottomContentHeightPx)
val isExpanded = state.position == ExpandableBottomSheetLayoutState.Position.EXPANDED
if (lastMinBottomContentHeightPx != minBottomContentHeightPx && !isExpanded) {
currentBottomContentHeightPx = minBottomContentHeightPx
}
val measuredBottomContent = bottomContentMeasurables.measure(
Constraints.fixed(
constraints.maxWidth,
max(minBottomContentHeightPx, currentBottomContentHeightPx)
)
)
var remainingHeight = constraints.maxHeight - currentBottomContentHeightPx
if (remainingHeight < 0) {
Timber.e("Remaining height is negative: $remainingHeight, resetting to 0")
remainingHeight = 0
}
val contentPlaceable = contentMeasurables.measure(
Constraints.fixed(constraints.maxWidth, remainingHeight)
)
layout(constraints.maxWidth, constraints.maxHeight) {
contentPlaceable.place(0, 0)
measuredBottomContent.place(IntOffset(0, constraints.maxHeight - currentBottomContentHeightPx), zIndex = 10f)
}
}
)
}
@Preview(showBackground = true)
@Composable
@Suppress("UnusedPrivateMember")
internal fun ExpandableBottomSheetLayoutPreview() {
ExpandableBottomSheetLayout(
sheetDragHandle = {
Box(
modifier =
Modifier
.padding(vertical = 6.dp)
.clip(RoundedCornerShape(6.dp))
.align(Alignment.Center)
.size(100.dp, 8.dp)
.background(Color.Gray)
)
},
content = {
Box(Modifier.fillMaxWidth()) {
Text("This is the main content", modifier = Modifier.padding(16.dp).align(Alignment.Center))
}
},
bottomSheetContent = {
Box(
modifier = Modifier
.fillMaxWidth()
.weight(1f, fill = true)
.padding(horizontal = 10.dp)
.clip(RoundedCornerShape(10.dp))
.background(Color.Blue)
) {
AndroidView(
modifier = Modifier
.fillMaxWidth()
.background(Color.LightGray),
factory = { context ->
PreviewEditText(context).apply {
val initialText = "1111\n2222\n3333\n4444\n5555\n6666"
setText(initialText)
layoutParams = ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT)
}
}
)
}
Text("A footer", modifier = Modifier.padding(vertical = 6.dp, horizontal = 16.dp))
},
maxBottomSheetContentHeight = 1800.dp,
isSwipeGestureEnabled = true,
backgroundColor = Color.White,
state = rememberExpandableBottomSheetLayoutState(),
sheetShape = RoundedCornerShape(20.dp, 20.dp, 0.dp, 0.dp),
modifier = Modifier
.windowInsetsPadding(WindowInsets.statusBars)
.windowInsetsPadding(WindowInsets.ime)
.fillMaxSize()
.background(Color.Red.copy(alpha = 0.2f)),
)
}
// This is just for preview purposes
@SuppressLint("AppCompatCustomView")
private class PreviewEditText(context: Context) : EditText(context) {
override fun onAttachedToWindow() {
super.onAttachedToWindow()
parent?.requestDisallowInterceptTouchEvent(true)
}
@SuppressLint("ClickableViewAccessibility")
override fun onTouchEvent(event: MotionEvent?): Boolean {
super.onTouchEvent(event)
parent?.requestDisallowInterceptTouchEvent(true)
return true
}
override fun dispatchTouchEvent(event: MotionEvent?): Boolean {
return super.dispatchTouchEvent(event)
}
}

View file

@ -0,0 +1,62 @@
/*
* 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.components
import androidx.compose.runtime.Composable
import androidx.compose.runtime.Stable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableFloatStateOf
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
/**
* Creates and remembers an [ExpandableBottomSheetLayoutState].
*/
@Composable
fun rememberExpandableBottomSheetLayoutState(): ExpandableBottomSheetLayoutState {
return remember { ExpandableBottomSheetLayoutState() }
}
/**
* State for the [ExpandableBottomSheetLayout].
*
* This state holds the current position of the bottom sheet layout and the percentage of the layout that is being dragged.
*/
@Stable
class ExpandableBottomSheetLayoutState {
internal var internalPosition: Position by mutableStateOf(Position.COLLAPSED)
internal var internalDraggingPercentage: Float by mutableFloatStateOf(
if (internalPosition == Position.EXPANDED) 1f else 0f
)
/**
* The current position of the bottom sheet layout.
*/
val position = internalPosition
/**
* The percentage of the bottom sheet layout that is currently being dragged.
* This value ranges from `0f` for [Position.COLLAPSED] to `1f` for [Position.EXPANDED].
*/
val draggingPercentage = internalDraggingPercentage
/**
* The position of the bottom sheet layout.
*/
enum class Position {
/** The bottom sheet is collapsed to its minimum visible height. */
COLLAPSED,
/** The bottom sheet is being dragged by user input. */
DRAGGING,
/** The bottom sheet is expanded to its maximum visible height. */
EXPANDED
}
}

View file

@ -7,8 +7,6 @@
package io.element.android.libraries.textcomposer
import android.os.Build
import android.view.WindowInsets
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
@ -44,12 +42,8 @@ internal fun <T> SoftKeyboardEffect(
view.awaitWindowFocus()
if (!view.isKeyboardVisible()) {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.R) {
view.windowInsetsController?.show(WindowInsets.Type.ime())
} else {
// Show the keyboard, temporarily using the root view for focus
view.showKeyboard(andRequestFocus = true)
}
// Show the keyboard, temporarily using the root view for focus
view.showKeyboard(andRequestFocus = true)
// Refocus to the correct view
latestOnRequestFocus()

View file

@ -12,38 +12,41 @@ import android.net.Uri
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.IntrinsicSize
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.WindowInsets
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.requiredHeightIn
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.systemBars
import androidx.compose.foundation.layout.width
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.runtime.rememberUpdatedState
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.platform.LocalView
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.semantics.hideFromAccessibility
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.tooling.preview.Preview
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.androidutils.ui.showKeyboard
import io.element.android.libraries.designsystem.components.media.createFakeWaveform
import io.element.android.libraries.designsystem.preview.DAY_MODE_NAME
import io.element.android.libraries.designsystem.preview.ElementPreview
@ -84,6 +87,7 @@ import io.element.android.wysiwyg.display.TextDisplay
import kotlinx.collections.immutable.ImmutableList
import kotlinx.collections.immutable.persistentListOf
import kotlinx.collections.immutable.toPersistentList
import kotlinx.coroutines.launch
import uniffi.wysiwyg_composer.MenuAction
import kotlin.time.Duration.Companion.seconds
@ -110,7 +114,6 @@ fun TextComposer(
resolveAtRoomMentionDisplay: () -> TextDisplay,
modifier: Modifier = Modifier,
showTextFormatting: Boolean = false,
subcomposing: Boolean = false,
) {
val markdown = when (state) {
is TextEditorState.Markdown -> state.state.text.value()
@ -170,20 +173,30 @@ fun TextComposer(
} else {
when (state) {
is TextEditorState.Rich -> {
remember(state.richTextEditorState, subcomposing, composerMode, onResetComposerMode, onError) {
val coroutineScope = rememberCoroutineScope()
val view = LocalView.current
remember(state.richTextEditorState, composerMode, onResetComposerMode, onError) {
@Composable {
TextInputBox(
modifier = Modifier.clickable(
interactionSource = remember { MutableInteractionSource() },
indication = null,
) {
coroutineScope.launch {
state.requestFocus()
view.showKeyboard()
}
}.semantics {
hideFromAccessibility()
},
composerMode = composerMode,
onResetComposerMode = onResetComposerMode,
isTextEmpty = state.richTextEditorState.messageHtml.isEmpty(),
subcomposing = subcomposing,
) {
RichTextEditor(
state = state.richTextEditorState,
placeholder = placeholder,
// Disable most of the editor functionality if it's just being measured for a subcomposition.
// This prevents it gaining focus and mutating the state.
registerStateUpdates = !subcomposing,
registerStateUpdates = true,
modifier = Modifier
.padding(top = 6.dp, bottom = 6.dp)
.fillMaxWidth(),
@ -205,13 +218,11 @@ fun TextComposer(
composerMode = composerMode,
onResetComposerMode = onResetComposerMode,
isTextEmpty = state.state.text.value().isEmpty(),
subcomposing = subcomposing,
) {
MarkdownTextInput(
state = state.state,
placeholder = placeholder,
placeholderColor = ElementTheme.colors.textSecondary,
subcomposing = subcomposing,
onTyping = onTyping,
onReceiveSuggestion = onReceiveSuggestion,
richTextEditorStyle = style,
@ -326,14 +337,12 @@ fun TextComposer(
)
}
if (!subcomposing) {
SoftKeyboardEffect(composerMode, onRequestFocus) {
it is MessageComposerMode.Special
}
SoftKeyboardEffect(showTextFormatting, onRequestFocus) { it }
SoftKeyboardEffect(composerMode, onRequestFocus) {
it is MessageComposerMode.Special
}
SoftKeyboardEffect(showTextFormatting, onRequestFocus) { it }
val latestOnReceiveSuggestion by rememberUpdatedState(onReceiveSuggestion)
if (state is TextEditorState.Rich) {
val menuAction = state.richTextEditorState.menuAction
@ -445,11 +454,8 @@ private fun TextFormattingLayout(
sendButton: @Composable () -> Unit,
modifier: Modifier = Modifier
) {
val bottomPadding = with(LocalDensity.current) { WindowInsets.systemBars.getBottom(this).toDp() + 8.dp }
Column(
modifier = modifier
.padding(vertical = 4.dp)
.padding(bottom = bottomPadding),
modifier = modifier.padding(vertical = 4.dp),
verticalArrangement = Arrangement.spacedBy(4.dp),
) {
if (isRoomEncrypted == false) {
@ -493,7 +499,7 @@ private fun TextInputBox(
composerMode: MessageComposerMode,
onResetComposerMode: () -> Unit,
isTextEmpty: Boolean,
subcomposing: Boolean,
modifier: Modifier = Modifier,
textInput: @Composable () -> Unit,
) {
val bgColor = ElementTheme.colors.bgSubtleSecondary
@ -501,12 +507,13 @@ private fun TextInputBox(
val roundedCorners = textInputRoundedCornerShape(composerMode = composerMode)
Column(
modifier = Modifier
modifier = modifier
.clip(roundedCorners)
.border(0.5.dp, borderColor, roundedCorners)
.background(color = bgColor)
.requiredHeightIn(min = 42.dp)
.fillMaxSize(),
.fillMaxSize()
.then(modifier),
) {
if (composerMode is MessageComposerMode.Special) {
ComposerModeView(
@ -517,8 +524,7 @@ private fun TextInputBox(
Box(
modifier = Modifier
.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),
.then(Modifier.testTag(TestTags.textEditor)),
contentAlignment = Alignment.CenterStart,
) {
textInput()

View file

@ -48,14 +48,11 @@ fun MarkdownTextInput(
state: MarkdownTextEditorState,
placeholder: String,
placeholderColor: androidx.compose.ui.graphics.Color,
subcomposing: Boolean,
onTyping: (Boolean) -> Unit,
onReceiveSuggestion: (Suggestion?) -> Unit,
richTextEditorStyle: RichTextEditorStyle,
onSelectRichContent: ((Uri) -> Unit)?,
) {
val canUpdateState = !subcomposing
// Copied from io.element.android.wysiwyg.internal.utils.UriContentListener
class ReceiveUriContentListener(
private val onContent: (uri: Uri) -> Unit,
@ -98,39 +95,32 @@ fun MarkdownTextInput(
InputType.TYPE_TEXT_FLAG_CAP_SENTENCES or
InputType.TYPE_TEXT_FLAG_MULTI_LINE or
InputType.TYPE_TEXT_FLAG_AUTO_CORRECT
if (canUpdateState) {
val textRange = 0..text.length
setSelection(state.selection.first.coerceIn(textRange), state.selection.last.coerceIn(textRange))
setOnFocusChangeListener { _, hasFocus ->
state.hasFocus = hasFocus
}
addTextChangedListener { editable ->
onTyping(!editable.isNullOrEmpty())
state.text.update(editable, false)
state.lineCount = lineCount
state.currentSuggestion = editable?.checkSuggestionNeeded()
onReceiveSuggestion(state.currentSuggestion)
}
onSelectionChangeListener = { selStart, selEnd ->
state.selection = selStart..selEnd
state.currentSuggestion = editableText.checkSuggestionNeeded()
onReceiveSuggestion(state.currentSuggestion)
}
if (onSelectRichContent != null) {
ViewCompat.setOnReceiveContentListener(
this,
arrayOf("image/*"),
ReceiveUriContentListener { onSelectRichContent(it) }
)
}
state.requestFocusAction = { this.requestFocus() }
} else {
isEnabled = false
isFocusable = false
isFocusableInTouchMode = false
isClickable = false
val textRange = 0..text.length
setSelection(state.selection.first.coerceIn(textRange), state.selection.last.coerceIn(textRange))
setOnFocusChangeListener { _, hasFocus ->
state.hasFocus = hasFocus
}
addTextChangedListener { editable ->
onTyping(!editable.isNullOrEmpty())
state.text.update(editable, false)
state.lineCount = lineCount
state.currentSuggestion = editable?.checkSuggestionNeeded()
onReceiveSuggestion(state.currentSuggestion)
}
onSelectionChangeListener = { selStart, selEnd ->
state.selection = selStart..selEnd
state.currentSuggestion = editableText.checkSuggestionNeeded()
onReceiveSuggestion(state.currentSuggestion)
}
if (onSelectRichContent != null) {
ViewCompat.setOnReceiveContentListener(
this,
arrayOf("image/*"),
ReceiveUriContentListener { onSelectRichContent(it) }
)
}
state.requestFocusAction = { this.requestFocus() }
}
},
update = { editText ->
@ -139,19 +129,15 @@ fun MarkdownTextInput(
mentionSpanUpdater.updateMentionSpans(text)
if (state.text.needsDisplaying()) {
editText.updateEditableText(text)
if (canUpdateState) {
state.text.update(editText.editableText, false)
}
state.text.update(editText.editableText, false)
}
if (canUpdateState) {
val newSelectionStart = state.selection.first
val newSelectionEnd = state.selection.last
val currentTextRange = 0..editText.editableText.length
val didSelectionChange = { editText.selectionStart != newSelectionStart || editText.selectionEnd != newSelectionEnd }
val isNewSelectionValid = { newSelectionStart in currentTextRange && newSelectionEnd in currentTextRange }
if (didSelectionChange() && isNewSelectionValid()) {
editText.setSelection(state.selection.first, state.selection.last)
}
val newSelectionStart = state.selection.first
val newSelectionEnd = state.selection.last
val currentTextRange = 0..editText.editableText.length
val didSelectionChange = { editText.selectionStart != newSelectionStart || editText.selectionEnd != newSelectionEnd }
val isNewSelectionValid = { newSelectionStart in currentTextRange && newSelectionEnd in currentTextRange }
if (didSelectionChange() && isNewSelectionValid()) {
editText.setSelection(state.selection.first, state.selection.last)
}
}
)
@ -198,7 +184,6 @@ internal fun MarkdownTextInputPreview() {
state = aMarkdownTextEditorState(initialText = "Hello, World!"),
placeholder = "Placeholder",
placeholderColor = ElementTheme.colors.textSecondary,
subcomposing = false,
onTyping = {},
onReceiveSuggestion = {},
richTextEditorStyle = style,

View file

@ -168,7 +168,6 @@ class MarkdownTextInputTest {
private fun <R : TestRule> AndroidComposeTestRule<R, ComponentActivity>.setMarkdownTextInput(
state: MarkdownTextEditorState = aMarkdownTextEditorState(),
subcomposing: Boolean = false,
onTyping: (Boolean) -> Unit = {},
onSuggestionReceived: (Suggestion?) -> Unit = {},
) {
@ -178,7 +177,6 @@ class MarkdownTextInputTest {
state = state,
placeholder = "Placeholder",
placeholderColor = ElementTheme.colors.textSecondary,
subcomposing = subcomposing,
onTyping = onTyping,
onReceiveSuggestion = onSuggestionReceived,
richTextEditorStyle = style,

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:f65fa2e0b1172f43b9475b8f46c3efc1086b5cf659038190bd8495b98bc21c82
size 51551
oid sha256:61f05b07526302ad051a8df2234a15438f8b2b2889767acb7697f3caecb68aa0
size 54189

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:dc219f3f79e2f7e061b541398971c36732346b2770fbeea95a4ecca266eb6ac0
size 50925
oid sha256:629506ad32c56d94906a71a4d779290f1328030d79fd05db3754e4113531587e
size 53656

View file

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

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:40ce5b17c4b499d9e671b7022ee6445abaddf4e14eed547f8c2b0e4d018d75c5
size 64598
oid sha256:3a596e77c10b67cd0295b0676c051d712205839b52bf46f831ecaa24d275dbec
size 64470

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:cf923847e52fc8db3a7a27c5b85e27c4db8bcce9005b8009684e9f3b8b8b8c4b
size 62040
oid sha256:0a8686422da867abcd6dc0d33e021ecd59499509d85ff8d722ea2a53facc6ccd
size 61934

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:30e40a4f602f99ca9ba95842b1aa8955450072d8bb317aea2eb61c704be0d8e3
size 53900
oid sha256:d552bcec8eb096ae396e545744af9018bcae277597a1098e0477e87e4620e30c
size 53806

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:ac727cdf60b1a31c386d223df6f9142990468fdb6e387668eb740335c2caf937
size 51263
oid sha256:54b501a2dc902ba27a701fc8539fa2d2eb64511d2f058b4ff189365df63d5665
size 51093