Skip to content

Commit

Permalink
fix: update playlist tab row style.
Browse files Browse the repository at this point in the history
  • Loading branch information
@oxyroid
oxyroid committed May 18, 2024
1 parent b690b0a commit ac7777d
Showing 1 changed file with 130 additions and 101 deletions.
231 changes: 130 additions & 101 deletions features/playlist/src/main/java/com/m3u/features/playlist/components/PlaylistTabRow.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import androidx.compose.foundation.layout.heightIn
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.requiredSize
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.LazyListScope
import androidx.compose.foundation.lazy.LazyRow
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.lazy.rememberLazyListState
Expand Down Expand Up @@ -43,6 +44,7 @@ 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.hapticfeedback.HapticFeedbackType
import androidx.compose.ui.platform.LocalHapticFeedback
import androidx.compose.ui.semantics.Role
Expand Down Expand Up @@ -127,79 +129,58 @@ internal fun PlaylistTabRow(
state.scrollToItem(index)
}
}
if (isExpanded) {
LazyColumn(
state = state,
horizontalAlignment = Alignment.Start,
verticalArrangement = Arrangement.spacedBy(spacing.extraSmall),
contentPadding = bottomContentPadding,
modifier = Modifier
.fillMaxSize()
.background(MaterialTheme.colorScheme.surface)
.haze(
LocalHazeState.current,
HazeDefaults.style(MaterialTheme.colorScheme.surface)
)
) {
stickyHeader {
header()
HorizontalDivider()
}
items(categories) { category ->
PlaylistTabRowItem(
name = category,
selected = category == selectedCategory,
pinned = category in pinnedCategories,
focused = category == focusCategory,
hasOtherFocused = focusCategory != null && focusCategory != category,
onClick = {
if (focusCategory == null) {
onCategoryChanged(category)
}
},
onLongClick = {
focusCategory = category
val categoriesContent: LazyListScope.() -> Unit = {
stickyHeader { header() }
items(categories) { category ->
PlaylistTabRowItem(
name = category,
selected = category == selectedCategory,
pinned = category in pinnedCategories,
focused = category == focusCategory,
hasOtherFocused = focusCategory != null && focusCategory != category,
isExpanded = isExpanded,
onClick = {
if (focusCategory == null) {
onCategoryChanged(category)
hapticFeedback.performHapticFeedback(HapticFeedbackType.LongPress)
},
modifier = Modifier.fillMaxWidth()
)
}
}
},
onLongClick = {
focusCategory = category
onCategoryChanged(category)
hapticFeedback.performHapticFeedback(HapticFeedbackType.LongPress)
}
)
}
} else {
Column {
}
Column {
if (isExpanded) {
LazyColumn(
state = state,
horizontalAlignment = Alignment.Start,
verticalArrangement = Arrangement.spacedBy(spacing.extraSmall),
contentPadding = bottomContentPadding,
modifier = Modifier
.fillMaxSize()
.background(MaterialTheme.colorScheme.surface)
.haze(
LocalHazeState.current,
HazeDefaults.style(MaterialTheme.colorScheme.surface)
),
content = categoriesContent
)
} else {
LazyRow(
state = state,
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.spacedBy(spacing.extraSmall),
modifier = Modifier
.background(MaterialTheme.colorScheme.surface)
.blurEdge(MaterialTheme.colorScheme.surface, Edge.End)
.fillMaxWidth()
) {
stickyHeader { header() }
items(categories) { category ->
PlaylistTabRowItem(
name = category,
selected = category == selectedCategory,
pinned = category in pinnedCategories,
focused = category == focusCategory,
hasOtherFocused = focusCategory != null && focusCategory != category,
onClick = {
if (focusCategory == null) {
onCategoryChanged(category)
}
},
onLongClick = {
focusCategory = category
onCategoryChanged(category)
hapticFeedback.performHapticFeedback(HapticFeedbackType.LongPress)
}
)
}
}
HorizontalDivider()
.fillMaxWidth(),
content = categoriesContent
)
}
HorizontalDivider()
}
BackHandler(focusCategory != null) {
focusCategory = null
Expand All @@ -214,6 +195,7 @@ private fun PlaylistTabRowItem(
pinned: Boolean,
focused: Boolean,
hasOtherFocused: Boolean,
isExpanded: Boolean,
onClick: () -> Unit,
onLongClick: () -> Unit,
modifier: Modifier = Modifier,
Expand All @@ -232,7 +214,8 @@ private fun PlaylistTabRowItem(
)
) {
val indication = if (hasOtherFocused) null else rememberRipple()
val shape = RoundedCornerShape(topStart = 12.dp, topEnd = 12.dp)
val shape = if (isExpanded) RectangleShape
else RoundedCornerShape(topStart = 12.dp, topEnd = 12.dp)
Card(
colors = CardDefaults.cardColors(
containerColor = if (focused) LocalContentColor.current
Expand All @@ -250,48 +233,94 @@ private fun PlaylistTabRowItem(
onLongClick = onLongClick,
role = Role.Tab
)
.thenIf(isExpanded) { Modifier.fillMaxWidth() }
.then(modifier)
) {
Box(
modifier = Modifier
.padding(
start = spacing.medium,
end = spacing.medium,
top = spacing.small
val text = @Composable {
Box(
modifier = Modifier
.padding(
start = spacing.medium,
end = spacing.medium,
top = spacing.small,
bottom = if (isExpanded) spacing.small else spacing.none
)
.heightIn(32.dp),
contentAlignment = Alignment.Center
) {
Text(
text = when {
pinned -> "[$name]"
else -> name
},
style = MaterialTheme.typography.titleSmall,
fontWeight = when {
pinned -> FontWeight.Black
selected && !hasOtherFocused -> FontWeight.Bold
else -> null
}
)
.heightIn(32.dp),
contentAlignment = Alignment.Center
) {
Text(
text = when {
pinned -> "[$name]"
else -> name
},
style = MaterialTheme.typography.titleSmall,
fontWeight = when {
pinned -> FontWeight.Black
selected && !hasOtherFocused -> FontWeight.Bold
else -> null
}
)
}
}
Box(
Modifier
.requiredSize(48.dp, spacing.small)
.background(
when {
focused -> LocalContentColor.current
selected -> MaterialTheme.colorScheme.primary
else -> Color.Transparent
},
shape = AbsoluteSmoothCornerShape(
cornerRadiusTL = 4.dp,
cornerRadiusTR = 4.dp,
smoothnessAsPercentBL = 60
)
val indicator = @Composable {
if (isExpanded) {
Box(
Modifier
.requiredSize(spacing.small)
.background(
when {
focused -> LocalContentColor.current
selected -> MaterialTheme.colorScheme.primary
else -> Color.Transparent
},
shape = AbsoluteSmoothCornerShape(
cornerRadiusTL = 4.dp,
cornerRadiusTR = 4.dp,
cornerRadiusBL = 4.dp,
cornerRadiusBR = 4.dp,
smoothnessAsPercentBL = 60
)
)
)
} else {
Box(
Modifier
.requiredSize(48.dp, spacing.small)
.background(
when {
focused -> LocalContentColor.current
selected -> MaterialTheme.colorScheme.primary
else -> Color.Transparent
},
shape = AbsoluteSmoothCornerShape(
cornerRadiusTL = 4.dp,
cornerRadiusTR = 4.dp,
smoothnessAsPercentBL = 60
)
)
)
.align(Alignment.CenterHorizontally)
)
}
}

if (isExpanded) {
Row(
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.SpaceBetween,
modifier = Modifier
.fillMaxWidth()
.padding(end = spacing.medium)
) {
text()
indicator()
}
} else {
Column(
horizontalAlignment = Alignment.CenterHorizontally
) {
text()
indicator()
}
}
}
}
}

0 comments on commit ac7777d

Please sign in to comment.