adjust sidebar paddings
This commit is contained in:
tapframe
kernexshadow
parent
c128545736
commit
45c8e65e75
2 changed files with 89 additions and 106 deletions
|
|
@ -609,21 +609,58 @@ private fun LegacySidebarScaffold(
|
|||
}
|
||||
) {
|
||||
val isExpanded = drawerValue == DrawerValue.Open
|
||||
if (isExpanded) {
|
||||
val itemWidth = if (isExpanded) 176.dp else 48.dp
|
||||
|
||||
if (isExpanded && showProfileSelector && activeProfileName.isNotEmpty()) {
|
||||
Spacer(modifier = Modifier.height(30.dp))
|
||||
Image(
|
||||
painter = painterResource(id = R.drawable.app_logo_wordmark),
|
||||
contentDescription = "NuvioTV",
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.height(42.dp)
|
||||
var isProfileFocused by remember { mutableStateOf(false) }
|
||||
val profileItemShape = RoundedCornerShape(32.dp)
|
||||
val profileLeadingInset = 18.dp
|
||||
val profileAvatarSize = 34.dp
|
||||
val profileLabelStart = 54.dp
|
||||
val profileGapAfterAvatar =
|
||||
(profileLabelStart - profileLeadingInset - profileAvatarSize).coerceAtLeast(0.dp)
|
||||
val profileBgColor by animateColorAsState(
|
||||
targetValue = if (isProfileFocused) NuvioColors.FocusBackground else Color.Transparent,
|
||||
label = "legacyProfileItemBg"
|
||||
)
|
||||
Box(
|
||||
modifier = Modifier.fillMaxWidth(),
|
||||
contentAlignment = Alignment.Center
|
||||
) {
|
||||
Row(
|
||||
modifier = Modifier
|
||||
.width(itemWidth)
|
||||
.height(52.dp)
|
||||
.clip(profileItemShape)
|
||||
.background(color = profileBgColor, shape = profileItemShape)
|
||||
.onFocusChanged { isProfileFocused = it.isFocused }
|
||||
.clickable {
|
||||
onSwitchProfile()
|
||||
drawerState.setValue(DrawerValue.Closed)
|
||||
},
|
||||
verticalAlignment = Alignment.CenterVertically
|
||||
) {
|
||||
Spacer(modifier = Modifier.width(profileLeadingInset))
|
||||
ProfileAvatarCircle(
|
||||
name = activeProfileName,
|
||||
colorHex = activeProfileColorHex,
|
||||
size = profileAvatarSize,
|
||||
avatarImageUrl = activeProfileAvatarImageUrl
|
||||
)
|
||||
Spacer(modifier = Modifier.width(profileGapAfterAvatar))
|
||||
Text(
|
||||
text = activeProfileName,
|
||||
color = if (isProfileFocused) NuvioColors.TextPrimary else NuvioColors.TextSecondary,
|
||||
maxLines = 1,
|
||||
textAlign = TextAlign.Start
|
||||
)
|
||||
}
|
||||
}
|
||||
Spacer(modifier = Modifier.height(16.dp))
|
||||
}
|
||||
|
||||
Spacer(modifier = Modifier.weight(1f))
|
||||
|
||||
val itemWidth = if (isExpanded) 176.dp else 48.dp
|
||||
Column(
|
||||
modifier = Modifier.fillMaxWidth(),
|
||||
verticalArrangement = Arrangement.spacedBy(10.dp),
|
||||
|
|
@ -653,48 +690,6 @@ private fun LegacySidebarScaffold(
|
|||
}
|
||||
|
||||
Spacer(modifier = Modifier.weight(1f))
|
||||
|
||||
if (isExpanded && showProfileSelector && activeProfileName.isNotEmpty()) {
|
||||
var isProfileFocused by remember { mutableStateOf(false) }
|
||||
val profileItemShape = RoundedCornerShape(32.dp)
|
||||
val profileBgColor by animateColorAsState(
|
||||
targetValue = if (isProfileFocused) NuvioColors.FocusBackground else Color.Transparent,
|
||||
label = "legacyProfileItemBg"
|
||||
)
|
||||
Box(
|
||||
modifier = Modifier.fillMaxWidth(),
|
||||
contentAlignment = Alignment.Center
|
||||
) {
|
||||
Row(
|
||||
modifier = Modifier
|
||||
.width(itemWidth)
|
||||
.height(52.dp)
|
||||
.clip(profileItemShape)
|
||||
.background(color = profileBgColor, shape = profileItemShape)
|
||||
.onFocusChanged { isProfileFocused = it.isFocused }
|
||||
.clickable {
|
||||
onSwitchProfile()
|
||||
drawerState.setValue(DrawerValue.Closed)
|
||||
},
|
||||
verticalAlignment = Alignment.CenterVertically
|
||||
) {
|
||||
Spacer(modifier = Modifier.width(10.dp))
|
||||
ProfileAvatarCircle(
|
||||
name = activeProfileName,
|
||||
colorHex = activeProfileColorHex,
|
||||
size = 34.dp,
|
||||
avatarImageUrl = activeProfileAvatarImageUrl
|
||||
)
|
||||
Spacer(modifier = Modifier.width(10.dp))
|
||||
Text(
|
||||
text = activeProfileName,
|
||||
color = if (isProfileFocused) NuvioColors.TextPrimary else NuvioColors.TextSecondary,
|
||||
maxLines = 1,
|
||||
textAlign = TextAlign.Start
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -751,7 +746,7 @@ private fun LegacySidebarButton(
|
|||
val backgroundColor by animateColorAsState(
|
||||
targetValue = when {
|
||||
isFocused -> NuvioColors.FocusBackground
|
||||
selected -> NuvioColors.BackgroundCard
|
||||
selected -> NuvioColors.Secondary
|
||||
else -> Color.Transparent
|
||||
},
|
||||
label = "legacySidebarItemBackground"
|
||||
|
|
@ -759,7 +754,7 @@ private fun LegacySidebarButton(
|
|||
val contentColor by animateColorAsState(
|
||||
targetValue = when {
|
||||
isFocused -> NuvioColors.TextPrimary
|
||||
selected -> NuvioColors.TextPrimary
|
||||
selected -> NuvioColors.OnSecondary
|
||||
else -> NuvioColors.TextSecondary
|
||||
},
|
||||
label = "legacySidebarItemContent"
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@ package com.nuvio.tv
|
|||
|
||||
import androidx.compose.animation.animateColorAsState
|
||||
import androidx.compose.animation.core.tween
|
||||
import androidx.compose.foundation.Image
|
||||
import androidx.compose.foundation.background
|
||||
import androidx.compose.foundation.border
|
||||
import androidx.compose.foundation.focusable
|
||||
|
|
@ -41,10 +40,8 @@ import androidx.compose.ui.graphics.Brush
|
|||
import androidx.compose.ui.graphics.Color
|
||||
import androidx.compose.ui.graphics.TransformOrigin
|
||||
import androidx.compose.ui.graphics.graphicsLayer
|
||||
import androidx.compose.ui.layout.ContentScale
|
||||
import androidx.compose.ui.graphics.painter.Painter
|
||||
import androidx.compose.ui.graphics.vector.ImageVector
|
||||
import androidx.compose.ui.res.painterResource
|
||||
import androidx.compose.ui.text.style.TextOverflow
|
||||
import androidx.compose.ui.unit.dp
|
||||
import androidx.tv.material3.Icon
|
||||
|
|
@ -57,6 +54,9 @@ import coil.compose.rememberAsyncImagePainter
|
|||
import coil.decode.SvgDecoder
|
||||
import coil.request.ImageRequest
|
||||
|
||||
private val SidebarLeadingVisualSize = 34.dp
|
||||
private val SidebarContentGap = 14.dp
|
||||
|
||||
@Composable
|
||||
internal fun ModernSidebarBlurPanel(
|
||||
drawerItems: List<DrawerItem>,
|
||||
|
|
@ -131,19 +131,27 @@ internal fun ModernSidebarBlurPanel(
|
|||
.border(width = 1.dp, color = panelBorderColor, shape = panelShape)
|
||||
.padding(horizontal = 12.dp, vertical = 14.dp)
|
||||
) {
|
||||
val headerLogoRes = if (isSidebarExpanded) R.drawable.app_logo_wordmark else R.drawable.app_logo_mark
|
||||
val headerLogoHeight = if (isSidebarExpanded) 42.dp else 34.dp
|
||||
val headerLogoContentDescription = if (isSidebarExpanded) "NuvioTV" else "Nuvio"
|
||||
|
||||
Image(
|
||||
painter = painterResource(id = headerLogoRes),
|
||||
contentDescription = headerLogoContentDescription,
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.height(headerLogoHeight)
|
||||
.offset(y = 12.dp),
|
||||
contentScale = ContentScale.Fit
|
||||
)
|
||||
if (showProfileSelector && activeProfileName.isNotEmpty()) {
|
||||
Box(
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.offset(y = 12.dp),
|
||||
contentAlignment = Alignment.Center
|
||||
) {
|
||||
SidebarProfileItem(
|
||||
profileName = activeProfileName,
|
||||
profileColorHex = activeProfileColorHex,
|
||||
profileAvatarImageUrl = activeProfileAvatarImageUrl,
|
||||
focusEnabled = keepSidebarFocusDuringCollapse,
|
||||
labelAlpha = sidebarLabelAlpha,
|
||||
onFocusChanged = { focused ->
|
||||
if (focused) onDrawerItemFocused(drawerItems.size)
|
||||
},
|
||||
onClick = onSwitchProfile,
|
||||
modifier = Modifier.fillMaxWidth(0.92f)
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
Spacer(modifier = Modifier.height(16.dp))
|
||||
|
||||
|
|
@ -181,26 +189,6 @@ internal fun ModernSidebarBlurPanel(
|
|||
}
|
||||
}
|
||||
|
||||
if (showProfileSelector && activeProfileName.isNotEmpty()) {
|
||||
Spacer(modifier = Modifier.height(8.dp))
|
||||
Box(
|
||||
modifier = Modifier.fillMaxWidth(),
|
||||
contentAlignment = Alignment.Center
|
||||
) {
|
||||
SidebarProfileItem(
|
||||
profileName = activeProfileName,
|
||||
profileColorHex = activeProfileColorHex,
|
||||
profileAvatarImageUrl = activeProfileAvatarImageUrl,
|
||||
focusEnabled = keepSidebarFocusDuringCollapse,
|
||||
labelAlpha = sidebarLabelAlpha,
|
||||
onFocusChanged = { focused ->
|
||||
if (focused) onDrawerItemFocused(drawerItems.size)
|
||||
},
|
||||
onClick = onSwitchProfile,
|
||||
modifier = Modifier.fillMaxWidth(0.92f)
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -236,9 +224,6 @@ private fun SidebarNavigationItem(
|
|||
|
||||
val contentColor = if (selected) Color(0xFF10151F) else Color.White
|
||||
val iconCircleColor = if (selected) Color(0xFFE7E2EF) else Color(0xFF6A6A74)
|
||||
val iconContainerSize = 34.dp
|
||||
val contentGap = 14.dp
|
||||
|
||||
Row(
|
||||
modifier = modifier
|
||||
.clip(shape)
|
||||
|
|
@ -262,7 +247,7 @@ private fun SidebarNavigationItem(
|
|||
) {
|
||||
Box(
|
||||
modifier = Modifier
|
||||
.size(iconContainerSize)
|
||||
.size(SidebarLeadingVisualSize)
|
||||
.clip(CircleShape)
|
||||
.background(iconCircleColor)
|
||||
.padding(6.dp)
|
||||
|
|
@ -288,7 +273,7 @@ private fun SidebarNavigationItem(
|
|||
)
|
||||
}
|
||||
}
|
||||
Spacer(modifier = Modifier.width(contentGap))
|
||||
Spacer(modifier = Modifier.width(SidebarContentGap))
|
||||
|
||||
Text(
|
||||
text = label,
|
||||
|
|
@ -300,7 +285,6 @@ private fun SidebarNavigationItem(
|
|||
maxLines = 1,
|
||||
overflow = TextOverflow.Ellipsis
|
||||
)
|
||||
Spacer(modifier = Modifier.width(iconContainerSize + contentGap))
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -327,9 +311,6 @@ private fun SidebarProfileItem(
|
|||
animationSpec = tween(durationMillis = 180),
|
||||
label = "profileItemBorder"
|
||||
)
|
||||
val contentGap = 14.dp
|
||||
val iconContainerSize = 34.dp
|
||||
|
||||
Row(
|
||||
modifier = modifier
|
||||
.clip(shape)
|
||||
|
|
@ -351,20 +332,27 @@ private fun SidebarProfileItem(
|
|||
.padding(horizontal = 14.dp, vertical = 10.dp),
|
||||
verticalAlignment = Alignment.CenterVertically
|
||||
) {
|
||||
ProfileAvatarCircle(
|
||||
name = profileName,
|
||||
colorHex = profileColorHex,
|
||||
size = iconContainerSize,
|
||||
avatarImageUrl = profileAvatarImageUrl
|
||||
)
|
||||
Spacer(modifier = Modifier.width(contentGap))
|
||||
Box(
|
||||
modifier = Modifier.size(SidebarLeadingVisualSize),
|
||||
contentAlignment = Alignment.Center
|
||||
) {
|
||||
ProfileAvatarCircle(
|
||||
name = profileName,
|
||||
colorHex = profileColorHex,
|
||||
size = SidebarLeadingVisualSize,
|
||||
avatarImageUrl = profileAvatarImageUrl
|
||||
)
|
||||
}
|
||||
Spacer(modifier = Modifier.width(SidebarContentGap))
|
||||
Text(
|
||||
text = profileName,
|
||||
color = Color.White,
|
||||
modifier = Modifier
|
||||
.weight(1f)
|
||||
.graphicsLayer { alpha = labelAlpha },
|
||||
style = androidx.tv.material3.MaterialTheme.typography.titleLarge,
|
||||
maxLines = 1
|
||||
maxLines = 1,
|
||||
overflow = TextOverflow.Ellipsis
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue