feat: improve scroll to bottom FAB placement

Signed-off-by: Infi <infi@infi.sh>
This commit is contained in:
Infi 2024-02-12 03:14:49 +01:00
parent 69503f0727
commit f266ca39b4
3 changed files with 32 additions and 26 deletions

View File

@ -40,7 +40,8 @@ fun StackedUserAvatars(users: List<String>, amount: Int = 3) {
UserAvatar(
avatar = user?.avatar,
userId = userId,
username = user?.let { User.resolveDefaultName(it) } ?: stringResource(id = R.string.unknown),
username = user?.let { User.resolveDefaultName(it) }
?: stringResource(id = R.string.unknown),
size = 16.dp,
modifier = Modifier
.offset(
@ -82,7 +83,7 @@ fun TypingIndicator(users: List<String>) {
topEnd = 16.dp
)
)
.background(MaterialTheme.colorScheme.background)
.background(MaterialTheme.colorScheme.background.copy(alpha = 0.9f))
.padding(top = 4.dp, start = 16.dp, end = 16.dp)
) {
StackedUserAvatars(users = users)

View File

@ -14,8 +14,8 @@ import androidx.compose.animation.Crossfade
import androidx.compose.animation.core.animateDpAsState
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.animation.slideInHorizontally
import androidx.compose.animation.slideOutHorizontally
import androidx.compose.animation.slideInVertically
import androidx.compose.animation.slideOutVertically
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
@ -31,14 +31,12 @@ import androidx.compose.foundation.layout.windowInsetsPadding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.KeyboardArrowDown
import androidx.compose.material3.CircularProgressIndicator
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.ExtendedFloatingActionButton
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.ModalBottomSheet
import androidx.compose.material3.SmallFloatingActionButton
import androidx.compose.material3.Text
import androidx.compose.material3.rememberModalBottomSheetState
import androidx.compose.material3.surfaceColorAtElevation
@ -57,6 +55,7 @@ import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.platform.LocalFocusManager
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
@ -394,39 +393,35 @@ fun ChannelScreen(
androidx.compose.animation.AnimatedVisibility(
!isScrolledToBottom.value,
enter = slideInHorizontally(
enter = slideInVertically(
animationSpec = RevoltTweenInt,
initialOffsetX = { it }
initialOffsetY = { it }
) + fadeIn(animationSpec = RevoltTweenFloat),
exit = slideOutHorizontally(
exit = slideOutVertically(
animationSpec = RevoltTweenInt,
targetOffsetX = { it }
targetOffsetY = { it }
) + fadeOut(animationSpec = RevoltTweenFloat),
modifier = Modifier
.align(Alignment.BottomEnd)
.align(Alignment.BottomCenter)
) {
ExtendedFloatingActionButton(
SmallFloatingActionButton(
modifier = Modifier
.padding(bottom = scrollDownFABPadding)
.align(Alignment.BottomEnd)
.align(Alignment.BottomCenter)
.padding(16.dp),
text = {
Text(stringResource(R.string.scroll_to_bottom))
},
icon = {
Icon(
imageVector = Icons.Default.KeyboardArrowDown,
contentDescription = stringResource(R.string.scroll_to_bottom)
)
},
onClick = {
coroutineScope.launch {
lazyListState.animateScrollToItem(0)
}
},
contentColor = MaterialTheme.colorScheme.onPrimary,
containerColor = MaterialTheme.colorScheme.primary
)
contentColor = MaterialTheme.colorScheme.onSurfaceVariant,
containerColor = MaterialTheme.colorScheme.surfaceVariant
) {
Icon(
painter = painterResource(R.drawable.ic_arrow_down_24dp),
contentDescription = stringResource(R.string.scroll_to_bottom)
)
}
}
}
}
@ -440,6 +435,7 @@ fun ChannelScreen(
Column(
modifier = Modifier
.background(MaterialTheme.colorScheme.background.copy(alpha = 0.9f))
.padding(
start = 16.dp,
end = 16.dp,

View File

@ -0,0 +1,9 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:height="24dp"
android:width="24dp"
android:viewportWidth="24"
android:viewportHeight="24">
<path
android:fillColor="#ffffff"
android:pathData="M11,4H13V16L18.5,10.5L19.92,11.92L12,19.84L4.08,11.92L5.5,10.5L11,16V4Z" />
</vector>