Sulkta-OSS/element-x-ada
3
0
Fork 0
Code Issues 1 Pull requests 10 Projects Releases Packages Wiki Activity Actions

design(home): makes HomeTopBar match design

Browse source
This commit is contained in:
ganfra 2025-10-23 16:16:08 +02:00
parent 296b85eb2f
commit 0498c3e4ed
1 changed files with 87 additions and 118 deletions
Download patch file Download diff file Expand all files Collapse all files

205
features/home/impl/src/main/kotlin/io/element/android/features/home/impl/components/HomeTopBar.kt
View file

@ -10,14 +10,13 @@ package io.element.android.features.home.impl.components
import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.WindowInsets import androidx.compose.foundation.layout.WindowInsets
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.statusBarsPadding import androidx.compose.foundation.layout.statusBarsPadding
import androidx.compose.foundation.pager.VerticalPager import androidx.compose.foundation.pager.VerticalPager
import androidx.compose.foundation.pager.rememberPagerState import androidx.compose.foundation.pager.rememberPagerState
import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.MaterialTheme import androidx.compose.material3.TopAppBar
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
@ -32,7 +31,6 @@ import androidx.compose.runtime.setValue
import androidx.compose.runtime.snapshotFlow import androidx.compose.runtime.snapshotFlow
import androidx.compose.ui.Alignment import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.alpha
import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.stringResource import androidx.compose.ui.res.stringResource
import androidx.compose.ui.semantics.heading import androidx.compose.ui.semantics.heading
@ -52,12 +50,8 @@ import io.element.android.libraries.designsystem.components.avatar.AvatarType
import io.element.android.libraries.designsystem.modifiers.backgroundVerticalGradient import io.element.android.libraries.designsystem.modifiers.backgroundVerticalGradient
import io.element.android.libraries.designsystem.preview.ElementPreview import io.element.android.libraries.designsystem.preview.ElementPreview
import io.element.android.libraries.designsystem.preview.PreviewsDayNight import io.element.android.libraries.designsystem.preview.PreviewsDayNight
import io.element.android.libraries.designsystem.text.applyScaleDown
import io.element.android.libraries.designsystem.text.toSp
import io.element.android.libraries.designsystem.theme.aliasScreenTitle
import io.element.android.libraries.designsystem.theme.components.DropdownMenu import io.element.android.libraries.designsystem.theme.components.DropdownMenu
import io.element.android.libraries.designsystem.theme.components.DropdownMenuItem import io.element.android.libraries.designsystem.theme.components.DropdownMenuItem
import io.element.android.libraries.designsystem.theme.components.HorizontalDivider
import io.element.android.libraries.designsystem.theme.components.Icon import io.element.android.libraries.designsystem.theme.components.Icon
import io.element.android.libraries.designsystem.theme.components.IconButton import io.element.android.libraries.designsystem.theme.components.IconButton
import io.element.android.libraries.designsystem.theme.components.MediumTopAppBar import io.element.android.libraries.designsystem.theme.components.MediumTopAppBar
@ -128,128 +122,103 @@ private fun DefaultHomeTopBar(
canReportBug: Boolean, canReportBug: Boolean,
modifier: Modifier = Modifier, modifier: Modifier = Modifier,
) { ) {
val collapsedFraction = scrollBehavior.state.collapsedFraction Column(modifier) {
Box(modifier = modifier) { TopAppBar(
val collapsedTitleTextStyle = ElementTheme.typography.aliasScreenTitle modifier = Modifier
val expandedTitleTextStyle = ElementTheme.typography.fontHeadingLgBold.copy( .backgroundVerticalGradient(
// Due to a limitation of MediumTopAppBar, and to avoid the text to be truncated, isVisible = !areSearchResultsDisplayed,
// ensure that the font size will never be bigger than 28.dp. )
fontSize = 28.dp.applyScaleDown().toSp() .statusBarsPadding(),
) colors = TopAppBarDefaults.topAppBarColors(
MaterialTheme( containerColor = Color.Transparent,
colorScheme = ElementTheme.materialColors, scrolledContainerColor = Color.Transparent,
shapes = MaterialTheme.shapes,
typography = ElementTheme.materialTypography.copy(
headlineSmall = expandedTitleTextStyle,
titleLarge = collapsedTitleTextStyle
), ),
) { title = {
Column { Text(
MediumTopAppBar( modifier = Modifier.semantics {
modifier = Modifier heading()
.backgroundVerticalGradient(
isVisible = !areSearchResultsDisplayed,
)
.statusBarsPadding(),
colors = TopAppBarDefaults.mediumTopAppBarColors(
containerColor = Color.Transparent,
scrolledContainerColor = Color.Transparent,
),
title = {
Text(
modifier = Modifier.semantics {
heading()
},
text = title,
)
}, },
navigationIcon = { text = title,
NavigationIcon( )
currentUserAndNeighbors = currentUserAndNeighbors, },
showAvatarIndicator = showAvatarIndicator, navigationIcon = {
onAccountSwitch = onAccountSwitch, NavigationIcon(
onClick = onOpenSettings, currentUserAndNeighbors = currentUserAndNeighbors,
showAvatarIndicator = showAvatarIndicator,
onAccountSwitch = onAccountSwitch,
onClick = onOpenSettings,
)
},
actions = {
if (displayMenuItems) {
IconButton(
onClick = onSearchClick,
) {
Icon(
imageVector = CompoundIcons.Search(),
contentDescription = stringResource(CommonStrings.action_search),
) )
}, }
actions = { if (RoomListConfig.HAS_DROP_DOWN_MENU) {
if (displayMenuItems) { var showMenu by remember { mutableStateOf(false) }
IconButton( IconButton(
onClick = onSearchClick, onClick = { showMenu = !showMenu }
) { ) {
Icon( Icon(
imageVector = CompoundIcons.Search(), imageVector = CompoundIcons.OverflowVertical(),
contentDescription = stringResource(CommonStrings.action_search), contentDescription = null,
)
}
DropdownMenu(
expanded = showMenu,
onDismissRequest = { showMenu = false }
) {
if (RoomListConfig.SHOW_INVITE_MENU_ITEM) {
DropdownMenuItem(
onClick = {
showMenu = false
onMenuActionClick(RoomListMenuAction.InviteFriends)
},
text = { Text(stringResource(id = CommonStrings.action_invite)) },
leadingIcon = {
Icon(
imageVector = CompoundIcons.ShareAndroid(),
tint = ElementTheme.colors.iconSecondary,
contentDescription = null,
)
}
) )
} }
if (RoomListConfig.HAS_DROP_DOWN_MENU) { if (RoomListConfig.SHOW_REPORT_PROBLEM_MENU_ITEM && canReportBug) {
var showMenu by remember { mutableStateOf(false) } DropdownMenuItem(
IconButton( onClick = {
onClick = { showMenu = !showMenu } showMenu = false
) { onMenuActionClick(RoomListMenuAction.ReportBug)
Icon( },
imageVector = CompoundIcons.OverflowVertical(), text = { Text(stringResource(id = CommonStrings.common_report_a_problem)) },
contentDescription = null, leadingIcon = {
) Icon(
} imageVector = CompoundIcons.ChatProblem(),
DropdownMenu( tint = ElementTheme.colors.iconSecondary,
expanded = showMenu, contentDescription = null,
onDismissRequest = { showMenu = false }
) {
if (RoomListConfig.SHOW_INVITE_MENU_ITEM) {
DropdownMenuItem(
onClick = {
showMenu = false
onMenuActionClick(RoomListMenuAction.InviteFriends)
},
text = { Text(stringResource(id = CommonStrings.action_invite)) },
leadingIcon = {
Icon(
imageVector = CompoundIcons.ShareAndroid(),
tint = ElementTheme.colors.iconSecondary,
contentDescription = null,
)
}
) )
} }
if (RoomListConfig.SHOW_REPORT_PROBLEM_MENU_ITEM && canReportBug) { )
DropdownMenuItem(
onClick = {
showMenu = false
onMenuActionClick(RoomListMenuAction.ReportBug)
},
text = { Text(stringResource(id = CommonStrings.common_report_a_problem)) },
leadingIcon = {
Icon(
imageVector = CompoundIcons.ChatProblem(),
tint = ElementTheme.colors.iconSecondary,
contentDescription = null,
)
}
)
}
}
} }
} }
}, }
scrollBehavior = scrollBehavior,
windowInsets = WindowInsets(0.dp),
)
if (displayFilters) {
RoomListFiltersView(
state = filtersState,
modifier = Modifier.padding(bottom = 16.dp)
)
} }
} },
} scrollBehavior = scrollBehavior,
// We need a 16dp left padding : 4dp default padding + 8dp IconButton padding + 4dp extra padding
HorizontalDivider( windowInsets = WindowInsets(4.dp),
modifier = Modifier
.fillMaxWidth()
.alpha(collapsedFraction)
.align(Alignment.BottomCenter),
color = ElementTheme.materialColors.outlineVariant,
) )
if (displayFilters) {
RoomListFiltersView(
state = filtersState,
modifier = Modifier.padding(bottom = 16.dp)
)
}
} }
} }