Merge pull request #138 from dmzz-yyhyy/new_ui

探索页面整体UI优化
dmzz-yyhyy · Dec 25, 2024 · c20ed87 · c20ed87
2 parents a4a038a + b957c3e
commit c20ed87
Show file tree

Hide file tree

Showing 25 changed files with 324 additions and 210 deletions.
diff --git a/app/build.gradle.kts b/app/build.gradle.kts
@@ -21,7 +21,7 @@ android {
         minSdk = 24
         targetSdk = 34
         // 版本号为x.y.z则versionCode为x*1000000+y*10000+z*100+debug版本号(开发需要时迭代, 两位数)
-        versionCode = 1_00_00_010
+        versionCode = 1_00_00_013
         versionName = "1.0.0"
 
         testInstrumentationRunner = "androidx.test.runner.AndroidJUnitRunner"

diff --git a/app/src/main/kotlin/indi/dmzz_yyhyy/lightnovelreader/ui/components/SettingsEntry.kt b/app/src/main/kotlin/indi/dmzz_yyhyy/lightnovelreader/ui/components/SettingsEntry.kt
@@ -96,13 +96,13 @@ fun SettingsSwitchEntry(
             Box(
                 modifier = Modifier
                     .fillMaxHeight()
-                    .padding(end = 8.dp),
+                    .padding(end = 12.dp),
                 contentAlignment = Alignment.Center
             ) {
                 Icon(
                     modifier = Modifier.size(24.dp),
                     painter = painterResource(iconRes),
-                    tint = MaterialTheme.colorScheme.onSecondaryContainer,
+                    tint = MaterialTheme.colorScheme.onSurfaceVariant,
                     contentDescription = "Icon"
                 )
             }
@@ -203,7 +203,7 @@ private fun SettingsSliderEntry(
                 Icon(
                     modifier = Modifier.size(24.dp),
                     painter = painterResource(iconRes),
-                    tint = MaterialTheme.colorScheme.onSecondaryContainer,
+                    tint = MaterialTheme.colorScheme.onSurfaceVariant,
                     contentDescription = "Icon"
                 )
             }
@@ -277,13 +277,13 @@ fun SettingsMenuEntry(
             Box(
                 modifier = Modifier
                     .fillMaxHeight()
-                    .padding(end = 8.dp),
+                    .padding(end = 12.dp),
                 contentAlignment = Alignment.Center
             ) {
                 Icon(
                     modifier = Modifier.size(24.dp),
                     painter = painterResource(iconRes),
-                    tint = MaterialTheme.colorScheme.onSecondaryContainer,
+                    tint = MaterialTheme.colorScheme.onSurfaceVariant,
                     contentDescription = "Icon"
                 )
             }
@@ -405,13 +405,13 @@ fun SettingsClickableEntry(
             Box(
                 modifier = Modifier
                     .fillMaxHeight()
-                    .padding(end = 8.dp),
+                    .padding(end = 12.dp),
                 contentAlignment = Alignment.Center
             ) {
                 Icon(
                     modifier = Modifier.size(24.dp),
                     painter = painterResource(iconRes),
-                    tint = MaterialTheme.colorScheme.onSecondaryContainer,
+                    tint = MaterialTheme.colorScheme.onSurfaceVariant,
                     contentDescription = "Icon"
                 )
             }

diff --git a/...ain/kotlin/indi/dmzz_yyhyy/lightnovelreader/ui/home/bookshelf/home/BookshelfHomeScreen.kt b/...ain/kotlin/indi/dmzz_yyhyy/lightnovelreader/ui/home/bookshelf/home/BookshelfHomeScreen.kt
@@ -61,12 +61,10 @@ import androidx.compose.ui.draw.clip
 import androidx.compose.ui.draw.rotate
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.painter.Painter
-import androidx.compose.ui.hapticfeedback.HapticFeedbackType
 import androidx.compose.ui.input.nestedscroll.nestedScroll
 import androidx.compose.ui.layout.onGloballyPositioned
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.LocalDensity
-import androidx.compose.ui.platform.LocalHapticFeedback
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.font.FontWeight
@@ -117,7 +115,6 @@ fun BookshelfHomeScreen(
 ) {
     val scope = rememberCoroutineScope()
     val context = LocalContext.current
-    val haptic = LocalHapticFeedback.current
     val workManager = WorkManager.getInstance(context)
     val enterAlwaysScrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior()
     val animatedBackgroundColor by animateColorAsState(
@@ -276,7 +273,6 @@ fun BookshelfHomeScreen(
         val onLongPress: (Int) -> Unit = { bookId ->
             onClickEnableSelectMode.invoke()
             changeBookSelectState(bookId)
-            haptic.performHapticFeedback(HapticFeedbackType.LongPress)
         }
 
         LazyColumn(
@@ -287,7 +283,7 @@ fun BookshelfHomeScreen(
             verticalArrangement = Arrangement.spacedBy(10.dp),
             state = lazyListState
         ) {
-            if (uiState.selectedBookshelf.updatedBookIds.isNotEmpty())
+            if (uiState.selectedBookshelf.updatedBookIds.isNotEmpty() && !uiState.selectMode)
                 item {
                     CollapseGroupTitle(
                         modifier = Modifier.animateItem(),
@@ -302,7 +298,6 @@ fun BookshelfHomeScreen(
                     uiState.bookInformationMap[updatedBookId]?.let {
                         BookCardItem(
                             bookInformation = it,
-                            haptic = haptic,
                             selected = uiState.selectedBookIds.contains(it.id),
                             latestChapterTitle = uiState.bookLastChapterTitleMap[updatedBookId],
                             onClick = {
@@ -316,7 +311,7 @@ fun BookshelfHomeScreen(
                     }
                 }
             }
-            if (uiState.selectedBookshelf.pinnedBookIds.isNotEmpty() && !uiState.selectMode)
+            if (uiState.selectedBookshelf.pinnedBookIds.isNotEmpty())
                 item {
                     CollapseGroupTitle(
                         modifier = Modifier.animateItem(),
@@ -331,7 +326,6 @@ fun BookshelfHomeScreen(
                     uiState.bookInformationMap[pinnedBookId]?.let {
                         BookCardItem(
                             bookInformation = it,
-                            haptic = haptic,
                             selected = uiState.selectedBookIds.contains(it.id),
                             onClick = {
                                 if (!uiState.selectMode)
@@ -359,7 +353,6 @@ fun BookshelfHomeScreen(
                     uiState.bookInformationMap[bookId]?.let {
                         BookCardItem(
                             bookInformation = it,
-                            haptic = haptic,
                             selected = uiState.selectedBookIds.contains(it.id),
                             onClick = {
                                 if (!uiState.selectMode)

diff --git a/...n/kotlin/indi/dmzz_yyhyy/lightnovelreader/ui/home/bookshelf/home/BookshelfUIComponents.kt b/...n/kotlin/indi/dmzz_yyhyy/lightnovelreader/ui/home/bookshelf/home/BookshelfUIComponents.kt
@@ -35,33 +35,36 @@ import androidx.compose.material3.SwipeToDismissBoxValue.EndToStart
 import androidx.compose.material3.SwipeToDismissBoxValue.Settled
 import androidx.compose.material3.SwipeToDismissBoxValue.StartToEnd
 import androidx.compose.material3.Text
-import androidx.compose.material3.rememberSwipeToDismissBoxState
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
+import androidx.compose.ui.draw.scale
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.graphicsLayer
-import androidx.compose.ui.hapticfeedback.HapticFeedback
 import androidx.compose.ui.hapticfeedback.HapticFeedbackType
 import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.platform.LocalHapticFeedback
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.Density
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import indi.dmzz_yyhyy.lightnovelreader.R
 import indi.dmzz_yyhyy.lightnovelreader.data.book.BookInformation
 import indi.dmzz_yyhyy.lightnovelreader.ui.components.Cover
 import indi.dmzz_yyhyy.lightnovelreader.utils.SwipeAction
+import indi.dmzz_yyhyy.lightnovelreader.utils.withHaptic
 
 @Composable
 fun BookCardContent(
     selected: Boolean,
+    collected: Boolean,
     modifier: Modifier = Modifier,
     bookInformation: BookInformation,
     latestChapterTitle: String? = null
@@ -83,16 +86,33 @@ fun BookCardContent(
                     url = bookInformation.coverUrl,
                     rounded = 8.dp
                 )
-                if (latestChapterTitle != null) {
+                if (latestChapterTitle != null) { // 有可用更新 Badge
                     Box(
                         modifier = Modifier.padding(4.dp)
                             .align(Alignment.TopEnd)
                     ) {
                         Badge(
+                            containerColor = MaterialTheme.colorScheme.error,
                             modifier = Modifier.size(12.dp),
                         )
                     }
                 }
+                if (collected) {
+                    Box(
+                        modifier = Modifier.padding(4.dp)
+                            .align(Alignment.TopStart)
+                            .size(20.dp)
+                            .clip(RoundedCornerShape(4.dp))
+                            .background(MaterialTheme.colorScheme.secondaryContainer)
+                    ) {
+                        Icon(
+                            modifier = Modifier.scale(0.75f, 0.75f),
+                            painter = painterResource(R.drawable.filled_bookmark_24px),
+                            contentDescription = "collected_indicator",
+                            tint = MaterialTheme.colorScheme.onSurfaceVariant,
+                        )
+                    }
+                }
             }
 
             androidx.compose.animation.AnimatedVisibility(
@@ -134,10 +154,11 @@ fun BookCardContent(
             val titleLineHeight = 20.sp
             Text(
                 modifier = Modifier.height(
-                    with(LocalDensity.current) { (titleLineHeight * 2).toDp() }
+                    with(LocalDensity.current) { (titleLineHeight * 2.2f).toDp() }
                 ).wrapContentHeight(Alignment.CenterVertically),
                 text = bookInformation.title,
                 maxLines = 2,
+                overflow = TextOverflow.Ellipsis,
                 fontWeight = FontWeight.Bold,
                 fontSize = 16.sp,
                 lineHeight = titleLineHeight,
@@ -190,23 +211,20 @@ fun BookCardContent(
                 )
             } else {
                 Column {
-                    Row {
-
-                        Text(
-                            text = "已更新至: ",
-                            fontSize = 14.sp,
-                            lineHeight = 18.sp,
-                        )
-                    }
-                    Row {
-                        Text(
-                            text = latestChapterTitle,
-                            fontWeight = FontWeight.Bold,
-                            color = MaterialTheme.colorScheme.primary,
-                            fontSize = 14.sp,
-                            lineHeight = 18.sp,
-                        )
-                    }
+                    Text(
+                        text = "已更新至: ",
+                        fontSize = 14.sp,
+                        lineHeight = 18.sp,
+                    )
+                    Text(
+                        text = latestChapterTitle,
+                        fontWeight = FontWeight.Bold,
+                        color = MaterialTheme.colorScheme.primary,
+                        fontSize = 14.sp,
+                        lineHeight = 18.sp,
+                        maxLines = 1,
+                        overflow = TextOverflow.Ellipsis
+                    )
                 }
             }
         }
@@ -255,15 +273,15 @@ fun BookCardItem(
     modifier: Modifier = Modifier,
     bookInformation: BookInformation,
     selected: Boolean = false,
+    collected: Boolean = false,
     onClick: () -> Unit,
     onLongPress: () -> Unit,
     latestChapterTitle: String? = null,
     swipeToRightAction: SwipeAction = SwipeAction.None,
     swipeToLeftAction: SwipeAction = SwipeAction.None,
     progress: (SwipeAction) -> Unit?,
-    haptic: HapticFeedback
 ){
-
+    val haptic = LocalHapticFeedback.current
     val dismissState = rememberNoFlingSwipeToDismissBoxState(
         positionalThreshold = { it * 0.6f },
         confirmValueChange = {
@@ -313,11 +331,12 @@ fun BookCardItem(
                         .background(backgroundColor)
                         .combinedClickable(
                             onClick = onClick,
-                            onLongClick = onLongPress,
+                            onLongClick = withHaptic { onLongPress() },
                         )
                 ) {
                     BookCardContent(
                         selected = selected,
+                        collected = collected,
                         latestChapterTitle = latestChapterTitle,
                         bookInformation = bookInformation
                     )