Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
package com.capyreader.app.ui.articles

import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.NavigationDrawerItem
import androidx.compose.runtime.Composable
import androidx.compose.ui.tooling.preview.Preview
import com.capyreader.app.ui.articles.feeds.DrawerItem
import com.jocmp.capy.SavedSearch

@Composable
Expand All @@ -12,7 +12,7 @@ fun SavedSearchRow(
selected: Boolean,
savedSearch: SavedSearch,
) {
NavigationDrawerItem(
DrawerItem(
label = { ListTitle(savedSearch.name) },
selected = selected,
onClick = {
Expand Down
112 changes: 103 additions & 9 deletions app/src/main/java/com/capyreader/app/ui/articles/feeds/DrawerItem.kt
Original file line number Diff line number Diff line change
Expand Up @@ -10,30 +10,39 @@ import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material3.LocalContentColor
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.NavigationDrawerItemColors
import androidx.compose.material3.NavigationDrawerItemDefaults
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
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.Shape
import androidx.compose.ui.semantics.Role
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.capyreader.app.preferences.AppTheme
import com.capyreader.app.ui.theme.CapyTheme
import com.capyreader.app.ui.theme.LocalAppTheme

@Composable
fun DrawerItem(
label: @Composable () -> Unit,
selected: Boolean,
onClick: () -> Unit,
onLongClick: () -> Unit,
modifier: Modifier = Modifier,
onLongClick: () -> Unit = {},
icon: (@Composable () -> Unit)? = null,
badge: (@Composable () -> Unit)? = null,
shape: Shape = CircleShape,
colors: NavigationDrawerItemColors = NavigationDrawerItemDefaults.colors(),
) {
val colors = NavigationDrawerItemDefaults.colors()
val mappedColors = colors.mapToTheme(selected = selected)

Surface(
modifier = modifier
.heightIn(min = 56.dp)
Expand All @@ -45,26 +54,111 @@ fun DrawerItem(
role = Role.Tab,
),
shape = shape,
color = colors.containerColor(selected).value,
color = mappedColors.containerColor,
) {
Row(
Modifier.padding(start = 16.dp, end = 24.dp),
verticalAlignment = Alignment.CenterVertically
) {
if (icon != null) {
val iconColor = colors.iconColor(selected).value
CompositionLocalProvider(LocalContentColor provides iconColor, content = icon)
CompositionLocalProvider(
LocalContentColor provides mappedColors.iconColor,
content = icon
)
Spacer(Modifier.width(12.dp))
}
Box(Modifier.weight(1f)) {
val labelColor = colors.textColor(selected).value
CompositionLocalProvider(LocalContentColor provides labelColor, content = label)
CompositionLocalProvider(
LocalContentColor provides mappedColors.textColor,
content = label
)
}
if (badge != null) {
Spacer(Modifier.width(12.dp))
val badgeColor = colors.badgeColor(selected).value
CompositionLocalProvider(LocalContentColor provides badgeColor, content = badge)
CompositionLocalProvider(
LocalContentColor provides mappedColors.badgeColor,
content = badge
)
}
}
}
}

private data class DrawerColors(
val containerColor: Color,
val iconColor: Color,
val textColor: Color,
val badgeColor: Color,
)

@Composable
private fun NavigationDrawerItemColors.mapToTheme(
selected: Boolean,
): DrawerColors {
val isMonochrome = LocalAppTheme.current == AppTheme.MONOCHROME
val useMonochromeSelected = selected && isMonochrome
val unselectedTextColor = textColor(false).value
val surfaceColor = MaterialTheme.colorScheme.surface

return DrawerColors(
containerColor = if (useMonochromeSelected) {
unselectedTextColor
} else {
containerColor(selected).value
},
iconColor = if (useMonochromeSelected) {
surfaceColor
} else {
iconColor(selected).value
},
textColor = if (useMonochromeSelected) {
surfaceColor
} else {
textColor(selected).value
},
badgeColor = if (useMonochromeSelected) {
surfaceColor
} else {
badgeColor(selected).value
},
)
}

@Preview
@Composable
fun DrawerItemSelectedPreview() {
CapyTheme {
DrawerItem(
label = { Text("Title Goes Here") },
selected = true,
onClick = {},
onLongClick = {},
)
}
}

@Preview
@Composable
fun DrawerItemSelectedMonochromePreview() {
CapyTheme(AppTheme.MONOCHROME) {
DrawerItem(
label = { Text("Title Goes Here") },
selected = true,
onClick = {},
onLongClick = {},
)
}
}

@Preview
@Composable
fun DrawerItemPreview() {
CapyTheme {
DrawerItem(
label = { Text("Title Goes Here") },
selected = false,
onClick = {},
onLongClick = {},
)
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@ import androidx.compose.material3.HorizontalDivider
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.NavigationDrawerItem
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
Expand Down Expand Up @@ -127,7 +126,7 @@ fun FeedList(
)
}
}
NavigationDrawerItem(
DrawerItem(
icon = { ArticleStatusIcon(status = articleStatus) },
label = {
ListTitle(
Expand All @@ -142,7 +141,7 @@ fun FeedList(
)

if (showTodayFilter) {
NavigationDrawerItem(
DrawerItem(
icon = {
Icon(
Icons.Rounded.Today,
Expand Down