feat(ui): separate toolbars from the content below with dividers

Ashinch · Jun 7, 2024 · c18f406 · c18f406
1 parent 688eabd
commit c18f406
Show file tree

Hide file tree

Showing 4 changed files with 208 additions and 150 deletions.
diff --git a/app/src/main/java/me/ash/reader/ui/page/home/reading/BottomBar.kt b/app/src/main/java/me/ash/reader/ui/page/home/reading/BottomBar.kt
@@ -1,6 +1,12 @@
 package me.ash.reader.ui.page.home.reading
 
 import android.view.HapticFeedbackConstants
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.core.VisibilityThreshold
+import androidx.compose.animation.expandVertically
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
+import androidx.compose.animation.shrinkVertically
 import androidx.compose.foundation.layout.*
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.automirrored.outlined.Article
@@ -13,13 +19,15 @@ import androidx.compose.material.icons.rounded.Article
 import androidx.compose.material.icons.rounded.ExpandMore
 import androidx.compose.material.icons.rounded.Star
 import androidx.compose.material.icons.rounded.StarOutline
+import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Surface
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalView
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.zIndex
 import me.ash.reader.R
@@ -39,101 +47,107 @@ fun BottomBar(
     onNextArticle: () -> Unit = {},
     onFullContent: (isFullContent: Boolean) -> Unit = {},
 ) {
-    val tonalElevation = LocalReadingPageTonalElevation.current
 
     Box(
         modifier = Modifier
             .fillMaxSize()
             .zIndex(1f),
         contentAlignment = Alignment.BottomCenter
     ) {
-        RYExtensibleVisibility(visible = isShow) {
+        AnimatedVisibility(
+            visible = isShow,
+            enter = expandVertically(),
+            exit = shrinkVertically()
+        ) {
             val view = LocalView.current
-
-            Surface(
-                tonalElevation = tonalElevation.value.dp,
-            ) {
-                // TODO: Component styles await refactoring
-                Row(
-                    modifier = Modifier
-                        .navigationBarsPadding()
-                        .fillMaxWidth()
-                        .height(60.dp),
-                    horizontalArrangement = Arrangement.SpaceAround,
-                    verticalAlignment = Alignment.CenterVertically,
-                ) {
-                    CanBeDisabledIconButton(
-                        modifier = Modifier.size(40.dp),
-                        disabled = false,
-                        imageVector = if (isUnread) {
-                            Icons.Filled.FiberManualRecord
-                        } else {
-                            Icons.Outlined.FiberManualRecord
-                        },
-                        contentDescription = stringResource(if (isUnread) R.string.mark_as_read else R.string.mark_as_unread),
-                        tint = if (isUnread) {
-                            MaterialTheme.colorScheme.onSecondaryContainer
-                        } else {
-                            MaterialTheme.colorScheme.outline
-                        },
-                    ) {
-                        view.performHapticFeedback(HapticFeedbackConstants.KEYBOARD_TAP)
-                        onUnread(!isUnread)
-                    }
-                    CanBeDisabledIconButton(
-                        modifier = Modifier.size(40.dp),
-                        disabled = false,
-                        imageVector = if (isStarred) {
-                            Icons.Rounded.Star
-                        } else {
-                            Icons.Rounded.StarOutline
-                        },
-                        contentDescription = stringResource(if (isStarred) R.string.mark_as_unstar else R.string.mark_as_starred),
-                        tint = if (isStarred) {
-                            MaterialTheme.colorScheme.onSecondaryContainer
-                        } else {
-                            MaterialTheme.colorScheme.outline
-                        },
-                    ) {
-                        view.performHapticFeedback(HapticFeedbackConstants.KEYBOARD_TAP)
-                        onStarred(!isStarred)
-                    }
-                    CanBeDisabledIconButton(
-                        disabled = !isNextArticleAvailable,
-                        modifier = Modifier.size(40.dp),
-                        imageVector = Icons.Rounded.ExpandMore,
-                        contentDescription = "Next Article",
-                        tint = MaterialTheme.colorScheme.outline,
-                    ) {
-                        view.performHapticFeedback(HapticFeedbackConstants.KEYBOARD_TAP)
-                        onNextArticle()
-                    }
-                    CanBeDisabledIconButton(
-                        modifier = Modifier.size(36.dp),
-                        disabled = true,
-                        imageVector = Icons.Outlined.Headphones,
-                        contentDescription = "Add Tag",
-                        tint = MaterialTheme.colorScheme.outline,
-                    ) {
-                        view.performHapticFeedback(HapticFeedbackConstants.KEYBOARD_TAP)
-                    }
-                    CanBeDisabledIconButton(
-                        disabled = false,
-                        modifier = Modifier.size(40.dp),
-                        imageVector = if (isFullContent) {
-                            Icons.AutoMirrored.Rounded.Article
-                        } else {
-                            Icons.AutoMirrored.Outlined.Article
-                        },
-                        contentDescription = stringResource(R.string.parse_full_content),
-                        tint = if (isFullContent) {
-                            MaterialTheme.colorScheme.onSecondaryContainer
-                        } else {
-                            MaterialTheme.colorScheme.outline
-                        },
+            Column {
+                HorizontalDivider(
+                    color = MaterialTheme.colorScheme.surfaceContainerHighest,
+                    thickness = 0.5f.dp
+                )
+                Surface() {
+                    // TODO: Component styles await refactoring
+                    Row(
+                        modifier = Modifier
+                            .navigationBarsPadding()
+                            .fillMaxWidth()
+                            .height(60.dp),
+                        horizontalArrangement = Arrangement.SpaceAround,
+                        verticalAlignment = Alignment.CenterVertically,
                     ) {
-                        view.performHapticFeedback(HapticFeedbackConstants.KEYBOARD_TAP)
-                        onFullContent(!isFullContent)
+                        CanBeDisabledIconButton(
+                            modifier = Modifier.size(40.dp),
+                            disabled = false,
+                            imageVector = if (isUnread) {
+                                Icons.Filled.FiberManualRecord
+                            } else {
+                                Icons.Outlined.FiberManualRecord
+                            },
+                            contentDescription = stringResource(if (isUnread) R.string.mark_as_read else R.string.mark_as_unread),
+                            tint = if (isUnread) {
+                                MaterialTheme.colorScheme.onSecondaryContainer
+                            } else {
+                                MaterialTheme.colorScheme.outline
+                            },
+                        ) {
+                            view.performHapticFeedback(HapticFeedbackConstants.KEYBOARD_TAP)
+                            onUnread(!isUnread)
+                        }
+                        CanBeDisabledIconButton(
+                            modifier = Modifier.size(40.dp),
+                            disabled = false,
+                            imageVector = if (isStarred) {
+                                Icons.Rounded.Star
+                            } else {
+                                Icons.Rounded.StarOutline
+                            },
+                            contentDescription = stringResource(if (isStarred) R.string.mark_as_unstar else R.string.mark_as_starred),
+                            tint = if (isStarred) {
+                                MaterialTheme.colorScheme.onSecondaryContainer
+                            } else {
+                                MaterialTheme.colorScheme.outline
+                            },
+                        ) {
+                            view.performHapticFeedback(HapticFeedbackConstants.KEYBOARD_TAP)
+                            onStarred(!isStarred)
+                        }
+                        CanBeDisabledIconButton(
+                            disabled = !isNextArticleAvailable,
+                            modifier = Modifier.size(40.dp),
+                            imageVector = Icons.Rounded.ExpandMore,
+                            contentDescription = "Next Article",
+                            tint = MaterialTheme.colorScheme.outline,
+                        ) {
+                            view.performHapticFeedback(HapticFeedbackConstants.KEYBOARD_TAP)
+                            onNextArticle()
+                        }
+                        CanBeDisabledIconButton(
+                            modifier = Modifier.size(36.dp),
+                            disabled = true,
+                            imageVector = Icons.Outlined.Headphones,
+                            contentDescription = "Add Tag",
+                            tint = MaterialTheme.colorScheme.outline,
+                        ) {
+                            view.performHapticFeedback(HapticFeedbackConstants.KEYBOARD_TAP)
+                        }
+                        CanBeDisabledIconButton(
+                            disabled = false,
+                            modifier = Modifier.size(40.dp),
+                            imageVector = if (isFullContent) {
+                                Icons.AutoMirrored.Rounded.Article
+                            } else {
+                                Icons.AutoMirrored.Outlined.Article
+                            },
+                            contentDescription = stringResource(R.string.parse_full_content),
+                            tint = if (isFullContent) {
+                                MaterialTheme.colorScheme.onSecondaryContainer
+                            } else {
+                                MaterialTheme.colorScheme.outline
+                            },
+                        ) {
+                            view.performHapticFeedback(HapticFeedbackConstants.KEYBOARD_TAP)
+                            onFullContent(!isFullContent)
+                        }
                     }
                 }
             }

diff --git a/app/src/main/java/me/ash/reader/ui/page/home/reading/Content.kt b/app/src/main/java/me/ash/reader/ui/page/home/reading/Content.kt
@@ -43,6 +43,7 @@ import kotlin.math.abs
 @Composable
 fun Content(
     modifier: Modifier = Modifier,
+    contentPaddingValues: PaddingValues,
     content: String,
     feedName: String,
     title: String,
@@ -71,6 +72,7 @@ fun Content(
         SelectionContainer {
             LazyColumn(
                 modifier = modifier
+                    .padding(top = contentPaddingValues.calculateTopPadding())
                     .fillMaxSize()
                     .drawVerticalScrollbar(listState),
                 state = listState,
@@ -80,9 +82,10 @@ fun Content(
                     Spacer(modifier = Modifier.height(64.dp))
                     // padding
                     Spacer(modifier = Modifier.height(22.dp))
+                }
+                item {
                     Column(
-                        modifier = Modifier
-                            .padding(horizontal = 12.dp)
+                        modifier = Modifier.padding(horizontal = 12.dp)
                     ) {
                         DisableSelection {
                             Metadata(
@@ -108,7 +111,7 @@ fun Content(
 
                 item {
                     Spacer(modifier = Modifier.height(128.dp))
-                    Spacer(modifier = Modifier.windowInsetsBottomHeight(WindowInsets.navigationBars))
+                    Spacer(modifier = Modifier.height(contentPaddingValues.calculateBottomPadding()))
                 }
             }
         }

diff --git a/app/src/main/java/me/ash/reader/ui/page/home/reading/ReadingPage.kt b/app/src/main/java/me/ash/reader/ui/page/home/reading/ReadingPage.kt
@@ -21,6 +21,7 @@ import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
+import androidx.compose.runtime.snapshotFlow
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalContext
@@ -73,6 +74,10 @@ fun ReadingPage(
         true
     }
 
+    var showTopDivider by remember {
+        mutableStateOf(false)
+    }
+
     val pagingItems = homeUiState.pagingData.collectAsLazyPagingItems().itemSnapshotList
 
     LaunchedEffect(Unit) {
@@ -97,23 +102,22 @@ fun ReadingPage(
 
     Scaffold(
         containerColor = MaterialTheme.colorScheme.surface,
-//        topBarTonalElevation = tonalElevation.value.dp,
-//        containerTonalElevation = tonalElevation.value.dp,
         content = { paddings ->
             Log.i("RLog", "TopBar: recomposition")
 
             Box(modifier = Modifier.fillMaxSize()) {
-                // Top Bar
-                TopBar(
-                    navController = navController,
-                    isShow = isShowToolBar,
-                    windowInsets = WindowInsets(top = paddings.calculateTopPadding()),
-                    title = readerState.title,
-                    link = readerState.link,
-                    onClose = {
-                        navController.popBackStack()
-                    },
-                )
+                if (readerState.articleId != null) {
+                    TopBar(
+                        navController = navController,
+                        isShow = isShowToolBar,
+                        showDivider = showTopDivider,
+                        title = readerState.title,
+                        link = readerState.link,
+                        onClose = {
+                            navController.popBackStack()
+                        },
+                    )
+                }
 
                 val isNextArticleAvailable = !readerState.nextArticleId.isNullOrEmpty()
                 val isPreviousArticleAvailable = !readerState.previousArticleId.isNullOrEmpty()
@@ -163,6 +167,9 @@ fun ReadingPage(
                                 saver = LazyListState.Saver
                             ) { LazyListState() }
 
+                            showTopDivider = snapshotFlow {
+                                listState.firstVisibleItemIndex != 0
+                            }.collectAsStateValue(initial = false)
 
                             CompositionLocalProvider(
                                 LocalOverscrollConfiguration provides
@@ -176,16 +183,15 @@ fun ReadingPage(
                                     contentAlignment = Alignment.Center
                                 ) {
                                     Content(
-                                        modifier = Modifier
-                                            .padding(paddings)
-                                            .pullToLoad(
-                                                state = state,
-                                                onScroll = { f ->
-                                                    if (abs(f) > 2f)
-                                                        isReaderScrollingDown = f < 0f
-                                                },
-                                                enabled = isPullToSwitchArticleEnabled
-                                            ),
+                                        modifier = Modifier.pullToLoad(
+                                            state = state,
+                                            onScroll = { f ->
+                                                if (abs(f) > 2f)
+                                                    isReaderScrollingDown = f < 0f
+                                            },
+                                            enabled = isPullToSwitchArticleEnabled
+                                        ),
+                                        contentPaddingValues = paddings,
                                         content = content.text ?: "",
                                         feedName = feedName,
                                         title = title.toString(),