Skip to content

Commit

Permalink
feat(ui): show title in top bar upon scroll in flow page (#896)
Browse files Browse the repository at this point in the history
* feat(ui): show title in top bar upon scroll in flow page

* fix(reader): make webview align with reading font family (#882)

* fix(reader): make webview align with reading font family

* feat(reader): external font support in webview

* fix(ui): fine-tune dark color scheme

* feat(ui): top bar elevation preference
  • Loading branch information
JunkFood02 authored Nov 22, 2024
1 parent 6e55c12 commit 3ba1eed
Show file tree
Hide file tree
Showing 4 changed files with 62 additions and 37 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,8 @@ val LocalFlowTopBarTonalElevation =
compositionLocalOf<FlowTopBarTonalElevationPreference> { FlowTopBarTonalElevationPreference.default }

sealed class FlowTopBarTonalElevationPreference(val value: Int) : Preference() {
object Level0 : FlowTopBarTonalElevationPreference(ElevationTokens.Level0)
object Level1 : FlowTopBarTonalElevationPreference(ElevationTokens.Level1)
object Level2 : FlowTopBarTonalElevationPreference(ElevationTokens.Level2)
object Level3 : FlowTopBarTonalElevationPreference(ElevationTokens.Level3)
object Level4 : FlowTopBarTonalElevationPreference(ElevationTokens.Level4)
object Level5 : FlowTopBarTonalElevationPreference(ElevationTokens.Level5)
object None : FlowTopBarTonalElevationPreference(ElevationTokens.Level0)
object Elevated : FlowTopBarTonalElevationPreference(ElevationTokens.Level2)

override fun put(context: Context, scope: CoroutineScope) {
scope.launch {
Expand All @@ -30,27 +26,19 @@ sealed class FlowTopBarTonalElevationPreference(val value: Int) : Preference() {

fun toDesc(context: Context): String =
when (this) {
Level0 -> "Level 0 (${ElevationTokens.Level0}dp)"
Level1 -> "Level 1 (${ElevationTokens.Level1}dp)"
Level2 -> "Level 2 (${ElevationTokens.Level2}dp)"
Level3 -> "Level 3 (${ElevationTokens.Level3}dp)"
Level4 -> "Level 4 (${ElevationTokens.Level4}dp)"
Level5 -> "Level 5 (${ElevationTokens.Level5}dp)"
None -> "Level 0 (${ElevationTokens.Level0}dp)"
Elevated -> "Level 2 (${ElevationTokens.Level2}dp)"
}

companion object {

val default = Level0
val values = listOf(Level0, Level1, Level2, Level3, Level4, Level5)
val default = Elevated
val values = listOf(None, Elevated)

fun fromPreferences(preferences: Preferences) =
when (preferences[DataStoreKey.keys[flowTopBarTonalElevation]?.key as Preferences.Key<Int>]) {
ElevationTokens.Level0 -> Level0
ElevationTokens.Level1 -> Level1
ElevationTokens.Level2 -> Level2
ElevationTokens.Level3 -> Level3
ElevationTokens.Level4 -> Level4
ElevationTokens.Level5 -> Level5
ElevationTokens.Level0 -> None
ElevationTokens.Level2 -> Elevated
else -> default
}
}
Expand Down
49 changes: 38 additions & 11 deletions app/src/main/java/me/ash/reader/ui/page/home/flow/FlowPage.kt
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
package me.ash.reader.ui.page.home.flow

import androidx.activity.compose.BackHandler
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.animateColorAsState
import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Spacer
Expand All @@ -19,13 +21,15 @@ import androidx.compose.material.icons.rounded.Search
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.LargeTopAppBar
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.material3.pulltorefresh.PullToRefreshBox
import androidx.compose.material3.pulltorefresh.rememberPullToRefreshState
import androidx.compose.runtime.Composable
import androidx.compose.runtime.DisposableEffect
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.derivedStateOf
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
Expand All @@ -34,12 +38,15 @@ import androidx.compose.runtime.setValue
import androidx.compose.runtime.snapshotFlow
import androidx.compose.ui.Modifier
import androidx.compose.ui.focus.FocusRequester
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.platform.LocalLifecycleOwner
import androidx.compose.ui.platform.LocalSoftwareKeyboardController
import androidx.compose.ui.res.dimensionResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.hilt.navigation.compose.hiltViewModel
import androidx.navigation.NavHostController
import androidx.paging.compose.collectAsLazyPagingItems
Expand Down Expand Up @@ -67,6 +74,8 @@ import me.ash.reader.ui.component.base.RYExtensibleVisibility
import me.ash.reader.ui.component.base.RYScaffold
import me.ash.reader.ui.ext.collectAsStateValue
import me.ash.reader.ui.ext.surfaceColorAtElevation
import me.ash.reader.ui.motion.materialSharedAxisYIn
import me.ash.reader.ui.motion.materialSharedAxisYOut
import me.ash.reader.ui.page.common.RouteName
import me.ash.reader.ui.page.home.HomeViewModel

Expand All @@ -80,10 +89,10 @@ fun FlowPage(
homeViewModel: HomeViewModel,
) {
val keyboardController = LocalSoftwareKeyboardController.current
val topBarTonalElevation = LocalFlowTopBarTonalElevation.current
val articleListTonalElevation = LocalFlowArticleListTonalElevation.current
val articleListFeedIcon = LocalFlowArticleListFeedIcon.current
val articleListDateStickyHeader = LocalFlowArticleListDateStickyHeader.current
val topBarTonalElevation = LocalFlowTopBarTonalElevation.current
val filterBarStyle = LocalFlowFilterBarStyle.current
val filterBarFilled = LocalFlowFilterBarFilled.current
val filterBarPadding = LocalFlowFilterBarPadding.current
Expand All @@ -99,6 +108,18 @@ fun FlowPage(
val listState =
if (pagingItems.itemCount > 0) flowUiState.listState else rememberLazyListState()

val isTopBarElevated = topBarTonalElevation.value > 0
val isScrolled by remember(listState) { derivedStateOf { listState.firstVisibleItemIndex != 0 } }
val topBarContainerColor by animateColorAsState(with(MaterialTheme.colorScheme) {
if (isScrolled && isTopBarElevated) surfaceContainer else surface
}, label = "")

val titleText = when {
filterUiState.group != null -> filterUiState.group.name
filterUiState.feed != null -> filterUiState.feed.name
else -> filterUiState.filter.toName()
}

if (markAsReadOnScroll) {
LaunchedEffect(listState.isScrollInProgress) {
if (!listState.isScrollInProgress) {
Expand Down Expand Up @@ -232,7 +253,6 @@ fun FlowPage(
}

RYScaffold(
topBarTonalElevation = topBarTonalElevation.value.dp,
containerTonalElevation = articleListTonalElevation.value.dp,
topBar = {
TopAppBar(
Expand All @@ -247,7 +267,20 @@ fun FlowPage(
indication = null,
interactionSource = remember { MutableInteractionSource() }
),
title = {},
title = {
AnimatedVisibility(
isScrolled,
enter = materialSharedAxisYIn(initialOffsetY = { it / 4 }),
exit = materialSharedAxisYOut(targetOffsetY = { it / 4 })
) {
Text(
text = titleText,
maxLines = 1,
overflow = TextOverflow.Ellipsis,
style = MaterialTheme.typography.titleMedium.copy(fontSize = 18.sp),
)
}
},
navigationIcon = {
FeedbackIconButton(
imageVector = Icons.AutoMirrored.Rounded.ArrowBack,
Expand Down Expand Up @@ -301,9 +334,7 @@ fun FlowPage(
}
}
}, colors = TopAppBarDefaults.topAppBarColors(
containerColor = MaterialTheme.colorScheme.surfaceColorAtElevation(
topBarTonalElevation.value.dp
),
containerColor = topBarContainerColor
)
)
},
Expand All @@ -320,11 +351,7 @@ fun FlowPage(
item {
DisplayText(
modifier = Modifier.padding(start = if (articleListFeedIcon.value) 30.dp else 0.dp),
text = when {
filterUiState.group != null -> filterUiState.group.name
filterUiState.feed != null -> filterUiState.feed.name
else -> filterUiState.filter.toName()
},
text = titleText,
desc = "",
)
RYExtensibleVisibility(visible = markAsRead) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,16 @@ import androidx.compose.material.icons.rounded.DoneAll
import androidx.compose.material.icons.rounded.Search
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import me.ash.reader.R
import me.ash.reader.domain.model.article.Article
import me.ash.reader.domain.model.article.ArticleWithFeed
Expand Down Expand Up @@ -55,8 +58,19 @@ fun FlowPagePreview(
shape = RoundedCornerShape(24.dp)
)
) {
val preview = generateArticleWithFeedPreview()
val feed = preview.feed
val article = preview.article

TopAppBar(
title = {},
title = {
Text(
text = feed.name,
maxLines = 1,
overflow = TextOverflow.Ellipsis,
style = MaterialTheme.typography.titleMedium.copy(fontSize = 18.sp),
)
},
navigationIcon = {
FeedbackIconButton(
imageVector = Icons.AutoMirrored.Rounded.ArrowBack,
Expand All @@ -83,10 +97,6 @@ fun FlowPagePreview(
)
Spacer(modifier = Modifier.height(12.dp))

val preview = generateArticleWithFeedPreview()
val feed = preview.feed
val article = preview.article

ArticleItem(
modifier = Modifier,
feedName = feed.name,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,7 @@ fun FlowPageStylePage(
topBarTonalElevationDialogVisible = true
},
) {}
// Tips(text = stringResource(R.string.tips_top_bar_tonal_elevation))
Tips(text = stringResource(R.string.tips_top_bar_tonal_elevation))
Spacer(modifier = Modifier.height(24.dp))
}

Expand Down

0 comments on commit 3ba1eed

Please sign in to comment.