Font size on 'All Chats' was changing mid animation (#2073)
* Font size on 'All Chats' was changing mid animation
This commit is contained in:
Jorge Martin Espinosa
GitHub
parent
9eb249c9e7
commit
96ebe1a11c
2 changed files with 116 additions and 110 deletions
1
changelog.d/1572.bugfix
Normal file
1
changelog.d/1572.bugfix
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
Font size in 'All Chats' header was changing mid-animation.
|
||||||
|
|
@ -24,6 +24,7 @@ import androidx.compose.foundation.layout.padding
|
||||||
import androidx.compose.foundation.layout.statusBars
|
import androidx.compose.foundation.layout.statusBars
|
||||||
import androidx.compose.foundation.layout.statusBarsPadding
|
import androidx.compose.foundation.layout.statusBarsPadding
|
||||||
import androidx.compose.material3.ExperimentalMaterial3Api
|
import androidx.compose.material3.ExperimentalMaterial3Api
|
||||||
|
import androidx.compose.material3.MaterialTheme
|
||||||
import androidx.compose.material3.TopAppBarDefaults
|
import androidx.compose.material3.TopAppBarDefaults
|
||||||
import androidx.compose.material3.TopAppBarScrollBehavior
|
import androidx.compose.material3.TopAppBarScrollBehavior
|
||||||
import androidx.compose.material3.rememberTopAppBarState
|
import androidx.compose.material3.rememberTopAppBarState
|
||||||
|
|
@ -149,130 +150,134 @@ private fun DefaultRoomListTopBar(
|
||||||
val statusBarPadding = with(LocalDensity.current) { WindowInsets.statusBars.getTop(this).toDp() }
|
val statusBarPadding = with(LocalDensity.current) { WindowInsets.statusBars.getTop(this).toDp() }
|
||||||
|
|
||||||
Box(modifier = modifier) {
|
Box(modifier = modifier) {
|
||||||
MediumTopAppBar(
|
val collapsedTitleTextStyle = ElementTheme.typography.aliasScreenTitle
|
||||||
modifier = Modifier
|
val expandedTitleTextStyle = ElementTheme.typography.fontHeadingLgBold.copy(
|
||||||
.onSizeChanged {
|
// Due to a limitation of MediumTopAppBar, and to avoid the text to be truncated,
|
||||||
appBarHeight = it.height
|
// ensure that the font size will never be bigger than 28.dp.
|
||||||
}
|
fontSize = 28.dp.applyScaleDown().toSp()
|
||||||
.nestedScroll(scrollBehavior.nestedScrollConnection)
|
)
|
||||||
.avatarBloom(
|
MaterialTheme(
|
||||||
avatarData = avatarData,
|
colorScheme = ElementTheme.materialColors,
|
||||||
background = if (ElementTheme.isLightTheme) {
|
shapes = MaterialTheme.shapes,
|
||||||
// Workaround to display a very subtle bloom for avatars with very soft colors
|
typography = ElementTheme.materialTypography.copy(
|
||||||
Color(0xFFF9F9F9)
|
headlineSmall = expandedTitleTextStyle,
|
||||||
} else {
|
titleLarge = collapsedTitleTextStyle
|
||||||
ElementTheme.materialColors.background
|
|
||||||
},
|
|
||||||
blurSize = DpSize(avatarBloomSize, avatarBloomSize),
|
|
||||||
offset = DpOffset(24.dp, 24.dp + statusBarPadding),
|
|
||||||
clipToSize = if (appBarHeight > 0) DpSize(
|
|
||||||
avatarBloomSize,
|
|
||||||
appBarHeight.toDp()
|
|
||||||
) else DpSize.Unspecified,
|
|
||||||
bottomSoftEdgeColor = ElementTheme.materialColors.background,
|
|
||||||
bottomSoftEdgeAlpha = 1f - collapsedFraction,
|
|
||||||
alpha = if (areSearchResultsDisplayed) 0f else 1f,
|
|
||||||
)
|
|
||||||
.statusBarsPadding(),
|
|
||||||
colors = TopAppBarDefaults.mediumTopAppBarColors(
|
|
||||||
containerColor = Color.Transparent,
|
|
||||||
scrolledContainerColor = Color.Transparent,
|
|
||||||
),
|
),
|
||||||
title = {
|
) {
|
||||||
val fontStyle = if (scrollBehavior.state.collapsedFraction > 0.5)
|
MediumTopAppBar(
|
||||||
ElementTheme.typography.aliasScreenTitle
|
modifier = Modifier
|
||||||
else
|
.onSizeChanged {
|
||||||
ElementTheme.typography.fontHeadingLgBold.copy(
|
appBarHeight = it.height
|
||||||
// Due to a limitation of MediumTopAppBar, and to avoid the text to be truncated,
|
}
|
||||||
// ensure that the font size will never be bigger than 28.dp.
|
.nestedScroll(scrollBehavior.nestedScrollConnection)
|
||||||
fontSize = 28.dp.applyScaleDown().toSp()
|
.avatarBloom(
|
||||||
|
avatarData = avatarData,
|
||||||
|
background = if (ElementTheme.isLightTheme) {
|
||||||
|
// Workaround to display a very subtle bloom for avatars with very soft colors
|
||||||
|
Color(0xFFF9F9F9)
|
||||||
|
} else {
|
||||||
|
ElementTheme.materialColors.background
|
||||||
|
},
|
||||||
|
blurSize = DpSize(avatarBloomSize, avatarBloomSize),
|
||||||
|
offset = DpOffset(24.dp, 24.dp + statusBarPadding),
|
||||||
|
clipToSize = if (appBarHeight > 0) DpSize(
|
||||||
|
avatarBloomSize,
|
||||||
|
appBarHeight.toDp()
|
||||||
|
) else DpSize.Unspecified,
|
||||||
|
bottomSoftEdgeColor = ElementTheme.materialColors.background,
|
||||||
|
bottomSoftEdgeAlpha = 1f - collapsedFraction,
|
||||||
|
alpha = if (areSearchResultsDisplayed) 0f else 1f,
|
||||||
)
|
)
|
||||||
Text(
|
.statusBarsPadding(),
|
||||||
style = fontStyle,
|
colors = TopAppBarDefaults.mediumTopAppBarColors(
|
||||||
text = stringResource(id = R.string.screen_roomlist_main_space_title)
|
containerColor = Color.Transparent,
|
||||||
)
|
scrolledContainerColor = Color.Transparent,
|
||||||
},
|
),
|
||||||
navigationIcon = {
|
title = {
|
||||||
avatarData?.let {
|
Text(text = stringResource(id = R.string.screen_roomlist_main_space_title))
|
||||||
IconButton(
|
},
|
||||||
modifier = Modifier.testTag(TestTags.homeScreenSettings),
|
navigationIcon = {
|
||||||
onClick = onOpenSettings
|
avatarData?.let {
|
||||||
) {
|
IconButton(
|
||||||
Avatar(
|
modifier = Modifier.testTag(TestTags.homeScreenSettings),
|
||||||
avatarData = it,
|
onClick = onOpenSettings
|
||||||
contentDescription = stringResource(CommonStrings.common_settings),
|
) {
|
||||||
)
|
Avatar(
|
||||||
if (showAvatarIndicator) {
|
avatarData = it,
|
||||||
RedIndicatorAtom(
|
contentDescription = stringResource(CommonStrings.common_settings),
|
||||||
modifier = Modifier
|
|
||||||
.padding(4.5.dp)
|
|
||||||
.align(Alignment.TopEnd)
|
|
||||||
)
|
)
|
||||||
|
if (showAvatarIndicator) {
|
||||||
|
RedIndicatorAtom(
|
||||||
|
modifier = Modifier
|
||||||
|
.padding(4.5.dp)
|
||||||
|
.align(Alignment.TopEnd)
|
||||||
|
)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
},
|
actions = {
|
||||||
actions = {
|
|
||||||
IconButton(
|
|
||||||
onClick = onSearchClicked,
|
|
||||||
) {
|
|
||||||
Icon(
|
|
||||||
imageVector = CompoundIcons.Search,
|
|
||||||
contentDescription = stringResource(CommonStrings.action_search),
|
|
||||||
)
|
|
||||||
}
|
|
||||||
if (RoomListConfig.hasDropdownMenu) {
|
|
||||||
var showMenu by remember { mutableStateOf(false) }
|
|
||||||
IconButton(
|
IconButton(
|
||||||
onClick = { showMenu = !showMenu }
|
onClick = onSearchClicked,
|
||||||
) {
|
) {
|
||||||
Icon(
|
Icon(
|
||||||
imageVector = CompoundIcons.OverflowVertical,
|
imageVector = CompoundIcons.Search,
|
||||||
contentDescription = null,
|
contentDescription = stringResource(CommonStrings.action_search),
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
DropdownMenu(
|
if (RoomListConfig.hasDropdownMenu) {
|
||||||
expanded = showMenu,
|
var showMenu by remember { mutableStateOf(false) }
|
||||||
onDismissRequest = { showMenu = false }
|
IconButton(
|
||||||
) {
|
onClick = { showMenu = !showMenu }
|
||||||
if (RoomListConfig.showInviteMenuItem) {
|
) {
|
||||||
DropdownMenuItem(
|
Icon(
|
||||||
onClick = {
|
imageVector = CompoundIcons.OverflowVertical,
|
||||||
showMenu = false
|
contentDescription = null,
|
||||||
onMenuActionClicked(RoomListMenuAction.InviteFriends)
|
|
||||||
},
|
|
||||||
text = { Text(stringResource(id = CommonStrings.action_invite)) },
|
|
||||||
leadingIcon = {
|
|
||||||
Icon(
|
|
||||||
imageVector = CompoundIcons.ShareAndroid,
|
|
||||||
tint = ElementTheme.materialColors.secondary,
|
|
||||||
contentDescription = null,
|
|
||||||
)
|
|
||||||
}
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
if (RoomListConfig.showReportProblemMenuItem) {
|
DropdownMenu(
|
||||||
DropdownMenuItem(
|
expanded = showMenu,
|
||||||
onClick = {
|
onDismissRequest = { showMenu = false }
|
||||||
showMenu = false
|
) {
|
||||||
onMenuActionClicked(RoomListMenuAction.ReportBug)
|
if (RoomListConfig.showInviteMenuItem) {
|
||||||
},
|
DropdownMenuItem(
|
||||||
text = { Text(stringResource(id = CommonStrings.common_report_a_problem)) },
|
onClick = {
|
||||||
leadingIcon = {
|
showMenu = false
|
||||||
Icon(
|
onMenuActionClicked(RoomListMenuAction.InviteFriends)
|
||||||
imageVector = CompoundIcons.ChatProblem,
|
},
|
||||||
tint = ElementTheme.materialColors.secondary,
|
text = { Text(stringResource(id = CommonStrings.action_invite)) },
|
||||||
contentDescription = null,
|
leadingIcon = {
|
||||||
)
|
Icon(
|
||||||
}
|
imageVector = CompoundIcons.ShareAndroid,
|
||||||
)
|
tint = ElementTheme.materialColors.secondary,
|
||||||
|
contentDescription = null,
|
||||||
|
)
|
||||||
|
}
|
||||||
|
)
|
||||||
|
}
|
||||||
|
if (RoomListConfig.showReportProblemMenuItem) {
|
||||||
|
DropdownMenuItem(
|
||||||
|
onClick = {
|
||||||
|
showMenu = false
|
||||||
|
onMenuActionClicked(RoomListMenuAction.ReportBug)
|
||||||
|
},
|
||||||
|
text = { Text(stringResource(id = CommonStrings.common_report_a_problem)) },
|
||||||
|
leadingIcon = {
|
||||||
|
Icon(
|
||||||
|
imageVector = CompoundIcons.ChatProblem,
|
||||||
|
tint = ElementTheme.materialColors.secondary,
|
||||||
|
contentDescription = null,
|
||||||
|
)
|
||||||
|
}
|
||||||
|
)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
},
|
scrollBehavior = scrollBehavior,
|
||||||
scrollBehavior = scrollBehavior,
|
windowInsets = WindowInsets(0.dp),
|
||||||
windowInsets = WindowInsets(0.dp),
|
)
|
||||||
)
|
}
|
||||||
|
|
||||||
HorizontalDivider(
|
HorizontalDivider(
|
||||||
modifier =
|
modifier =
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue