[feature] Support setting the tone elevation of the reading page (#55)

app/build.gradle.kts

@@ -22,7 +22,7 @@ android {
         minSdk = 24
         targetSdk = 35
         versionCode = 24
-        versionName = "2.1-beta01"
+        versionName = "2.1-beta02"
 
         testInstrumentationRunner = "androidx.test.runner.AndroidJUnitRunner"
 

app/src/main/java/com/skyd/anivu/ext/PreferenceExt.kt

@@ -19,6 +19,8 @@ import com.skyd.anivu.model.preference.appearance.feed.FeedListTonalElevationPre
 import com.skyd.anivu.model.preference.appearance.feed.FeedTopBarTonalElevationPreference
 import com.skyd.anivu.model.preference.appearance.media.MediaShowThumbnailPreference
 import com.skyd.anivu.model.preference.appearance.read.ReadTextSizePreference
+import com.skyd.anivu.model.preference.appearance.read.ReadContentTonalElevationPreference
+import com.skyd.anivu.model.preference.appearance.read.ReadTopBarTonalElevationPreference
 import com.skyd.anivu.model.preference.appearance.search.SearchItemMinWidthPreference
 import com.skyd.anivu.model.preference.appearance.search.SearchListTonalElevationPreference
 import com.skyd.anivu.model.preference.appearance.search.SearchTopBarTonalElevationPreference
@@ -78,6 +80,8 @@ fun Preferences.toSettings(): Settings {
         searchItemMinWidth = SearchItemMinWidthPreference.fromPreferences(this),
         mediaShowThumbnail = MediaShowThumbnailPreference.fromPreferences(this),
         readTextSize = ReadTextSizePreference.fromPreferences(this),
+        readContentTonalElevation = ReadContentTonalElevationPreference.fromPreferences(this),
+        readTopBarTonalElevation = ReadTopBarTonalElevationPreference.fromPreferences(this),
 
         // Update
         ignoreUpdateVersion = IgnoreUpdateVersionPreference.fromPreferences(this),

app/src/main/java/com/skyd/anivu/model/preference/Settings.kt

@@ -24,6 +24,8 @@ import com.skyd.anivu.model.preference.appearance.feed.FeedListTonalElevationPre
 import com.skyd.anivu.model.preference.appearance.feed.FeedTopBarTonalElevationPreference
 import com.skyd.anivu.model.preference.appearance.media.MediaShowThumbnailPreference
 import com.skyd.anivu.model.preference.appearance.read.ReadTextSizePreference
+import com.skyd.anivu.model.preference.appearance.read.ReadContentTonalElevationPreference
+import com.skyd.anivu.model.preference.appearance.read.ReadTopBarTonalElevationPreference
 import com.skyd.anivu.model.preference.appearance.search.SearchItemMinWidthPreference
 import com.skyd.anivu.model.preference.appearance.search.SearchListTonalElevationPreference
 import com.skyd.anivu.model.preference.appearance.search.SearchTopBarTonalElevationPreference
@@ -99,6 +101,8 @@ import com.skyd.anivu.ui.local.LocalProxyPort
 import com.skyd.anivu.ui.local.LocalProxyType
 import com.skyd.anivu.ui.local.LocalProxyUsername
 import com.skyd.anivu.ui.local.LocalReadTextSize
+import com.skyd.anivu.ui.local.LocalReadContentTonalElevation
+import com.skyd.anivu.ui.local.LocalReadTopBarTonalElevation
 import com.skyd.anivu.ui.local.LocalRssSyncBatteryNotLowConstraint
 import com.skyd.anivu.ui.local.LocalRssSyncChargingConstraint
 import com.skyd.anivu.ui.local.LocalRssSyncFrequency
@@ -137,6 +141,8 @@ data class Settings(
     val searchItemMinWidth: Float = SearchItemMinWidthPreference.default,
     val mediaShowThumbnail: Boolean = MediaShowThumbnailPreference.default,
     val readTextSize: Float = ReadTextSizePreference.default,
+    val readContentTonalElevation: Float = ReadContentTonalElevationPreference.default,
+    val readTopBarTonalElevation: Float = ReadTopBarTonalElevationPreference.default,
     // Update
     val ignoreUpdateVersion: Long = IgnoreUpdateVersionPreference.default,
     // Behavior
@@ -208,6 +214,8 @@ fun SettingsProvider(
         LocalSearchItemMinWidth provides settings.searchItemMinWidth,
         LocalMediaShowThumbnail provides settings.mediaShowThumbnail,
         LocalReadTextSize provides settings.readTextSize,
+        LocalReadContentTonalElevation provides settings.readContentTonalElevation,
+        LocalReadTopBarTonalElevation provides settings.readTopBarTonalElevation,
         // Update
         LocalIgnoreUpdateVersion provides settings.ignoreUpdateVersion,
         // Behavior

app/src/main/java/com/skyd/anivu/model/preference/appearance/read/ReadContentTonalElevationPreference.kt

@@ -0,0 +1,26 @@
+package com.skyd.anivu.model.preference.appearance.read
+
+import android.content.Context
+import androidx.datastore.preferences.core.Preferences
+import androidx.datastore.preferences.core.floatPreferencesKey
+import com.skyd.anivu.base.BasePreference
+import com.skyd.anivu.ext.dataStore
+import com.skyd.anivu.ext.put
+import kotlinx.coroutines.CoroutineScope
+import kotlinx.coroutines.Dispatchers
+import kotlinx.coroutines.launch
+
+object ReadContentTonalElevationPreference : BasePreference<Float> {
+    private const val READ_CONTENT_TONAL_ELEVATION = "readContentTonalElevation"
+    override val default = 0f
+
+    val key = floatPreferencesKey(READ_CONTENT_TONAL_ELEVATION)
+
+    fun put(context: Context, scope: CoroutineScope, value: Float) {
+        scope.launch(Dispatchers.IO) {
+            context.dataStore.put(key, value)
+        }
+    }
+
+    override fun fromPreferences(preferences: Preferences): Float = preferences[key] ?: default
+}

app/src/main/java/com/skyd/anivu/model/preference/appearance/read/ReadTopBarTonalElevationPreference.kt

@@ -0,0 +1,26 @@
+package com.skyd.anivu.model.preference.appearance.read
+
+import android.content.Context
+import androidx.datastore.preferences.core.Preferences
+import androidx.datastore.preferences.core.floatPreferencesKey
+import com.skyd.anivu.base.BasePreference
+import com.skyd.anivu.ext.dataStore
+import com.skyd.anivu.ext.put
+import kotlinx.coroutines.CoroutineScope
+import kotlinx.coroutines.Dispatchers
+import kotlinx.coroutines.launch
+
+object ReadTopBarTonalElevationPreference : BasePreference<Float> {
+    private const val READ_TOP_BAR_TONAL_ELEVATION = "readTopBarTonalElevation"
+    override val default = 0f
+
+    val key = floatPreferencesKey(READ_TOP_BAR_TONAL_ELEVATION)
+
+    fun put(context: Context, scope: CoroutineScope, value: Float) {
+        scope.launch(Dispatchers.IO) {
+            context.dataStore.put(key, value)
+        }
+    }
+
+    override fun fromPreferences(preferences: Preferences): Float = preferences[key] ?: default
+}

app/src/main/java/com/skyd/anivu/ui/activity/MainActivity.kt

@@ -103,6 +103,8 @@ import com.skyd.anivu.ui.screen.settings.appearance.feed.FEED_STYLE_SCREEN_ROUTE
 import com.skyd.anivu.ui.screen.settings.appearance.feed.FeedStyleScreen
 import com.skyd.anivu.ui.screen.settings.appearance.media.MEDIA_STYLE_SCREEN_ROUTE
 import com.skyd.anivu.ui.screen.settings.appearance.media.MediaStyleScreen
+import com.skyd.anivu.ui.screen.settings.appearance.read.READ_STYLE_SCREEN_ROUTE
+import com.skyd.anivu.ui.screen.settings.appearance.read.ReadStyleScreen
 import com.skyd.anivu.ui.screen.settings.appearance.search.SEARCH_STYLE_SCREEN_ROUTE
 import com.skyd.anivu.ui.screen.settings.appearance.search.SearchStyleScreen
 import com.skyd.anivu.ui.screen.settings.behavior.BEHAVIOR_SCREEN_ROUTE
@@ -239,6 +241,7 @@ private fun MainNavHost() {
         composable(route = APPEARANCE_SCREEN_ROUTE) { AppearanceScreen() }
         composable(route = ARTICLE_STYLE_SCREEN_ROUTE) { ArticleStyleScreen() }
         composable(route = FEED_STYLE_SCREEN_ROUTE) { FeedStyleScreen() }
+        composable(route = READ_STYLE_SCREEN_ROUTE) { ReadStyleScreen() }
         composable(route = MEDIA_STYLE_SCREEN_ROUTE) { MediaStyleScreen() }
         composable(route = REORDER_GROUP_SCREEN_ROUTE) { ReorderGroupScreen() }
         composable(route = SEARCH_STYLE_SCREEN_ROUTE) { SearchStyleScreen() }

app/src/main/java/com/skyd/anivu/ui/component/html/HtmlText.kt

@@ -11,6 +11,7 @@ import androidx.compose.runtime.mutableIntStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.toArgb
 import androidx.compose.ui.layout.onGloballyPositioned
 import androidx.compose.ui.platform.LocalContext
@@ -26,12 +27,12 @@ fun HtmlText(
     modifier: Modifier = Modifier,
     htmlFlags: Int = FROM_HTML_MODE_LEGACY,
     text: String,
+    color: Color = LocalContentColor.current,
     fontSize: TextUnit = TextUnit.Unspecified,
     onImageClick: ((String) -> Unit)? = null,
 ) {
     val context = LocalContext.current
     val lifecycleOwner = LocalLifecycleOwner.current
-    val textColor = LocalContentColor.current
     val textSize = with(LocalDensity.current) { fontSize.toPx() }
     var componentWidth by remember { mutableIntStateOf(0) }
     AndroidView(
@@ -44,7 +45,7 @@ fun HtmlText(
                 // otherwise movementMethod is invalid.
                 setTextIsSelectable(true)
                 movementMethod = LinkMovementMethod.getInstance()
-                setTextColor(textColor.toArgb())
+                setTextColor(color.toArgb())
             }
         },
         update = { textView ->

app/src/main/java/com/skyd/anivu/ui/local/LocalValue.kt

@@ -20,6 +20,8 @@ import com.skyd.anivu.model.preference.appearance.feed.FeedListTonalElevationPre
 import com.skyd.anivu.model.preference.appearance.feed.FeedTopBarTonalElevationPreference
 import com.skyd.anivu.model.preference.appearance.media.MediaShowThumbnailPreference
 import com.skyd.anivu.model.preference.appearance.read.ReadTextSizePreference
+import com.skyd.anivu.model.preference.appearance.read.ReadContentTonalElevationPreference
+import com.skyd.anivu.model.preference.appearance.read.ReadTopBarTonalElevationPreference
 import com.skyd.anivu.model.preference.appearance.search.SearchItemMinWidthPreference
 import com.skyd.anivu.model.preference.appearance.search.SearchListTonalElevationPreference
 import com.skyd.anivu.model.preference.appearance.search.SearchTopBarTonalElevationPreference
@@ -92,6 +94,8 @@ val LocalArticleItemMinWidth = compositionLocalOf { ArticleItemMinWidthPreferenc
 val LocalSearchItemMinWidth = compositionLocalOf { SearchItemMinWidthPreference.default }
 val LocalMediaShowThumbnail = compositionLocalOf { MediaShowThumbnailPreference.default }
 val LocalReadTextSize = compositionLocalOf { ReadTextSizePreference.default }
+val LocalReadContentTonalElevation = compositionLocalOf { ReadContentTonalElevationPreference.default }
+val LocalReadTopBarTonalElevation = compositionLocalOf { ReadTopBarTonalElevationPreference.default }
 
 // Update
 val LocalIgnoreUpdateVersion = compositionLocalOf { IgnoreUpdateVersionPreference.default }

app/src/main/java/com/skyd/anivu/ui/screen/read/ReadScreen.kt

@@ -38,6 +38,7 @@ import androidx.compose.material.icons.outlined.Share
 import androidx.compose.material3.DropdownMenu
 import androidx.compose.material3.DropdownMenuItem
 import androidx.compose.material3.Icon
+import androidx.compose.material3.LocalAbsoluteTonalElevation
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.ModalBottomSheet
 import androidx.compose.material3.Scaffold
@@ -48,6 +49,7 @@ import androidx.compose.material3.SuggestionChip
 import androidx.compose.material3.Text
 import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.material3.rememberModalBottomSheetState
+import androidx.compose.material3.surfaceColorAtElevation
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
@@ -101,7 +103,9 @@ import com.skyd.anivu.ui.component.AniVuTopBarStyle
 import com.skyd.anivu.ui.component.dialog.WaitingDialog
 import com.skyd.anivu.ui.component.html.HtmlText
 import com.skyd.anivu.ui.component.rememberAniVuImageLoader
+import com.skyd.anivu.ui.local.LocalReadContentTonalElevation
 import com.skyd.anivu.ui.local.LocalReadTextSize
+import com.skyd.anivu.ui.local.LocalReadTopBarTonalElevation
 import com.skyd.anivu.ui.screen.article.enclosure.EnclosureBottomSheet
 import com.skyd.anivu.ui.screen.article.enclosure.getEnclosuresList
 import com.skyd.anivu.util.ShareUtil
@@ -144,6 +148,14 @@ fun ReadScreen(articleId: String, viewModel: ReadViewModel = hiltViewModel()) {
                 style = AniVuTopBarStyle.Small,
                 scrollBehavior = scrollBehavior,
                 title = { Text(text = stringResource(R.string.read_screen_name)) },
+                colors = TopAppBarDefaults.topAppBarColors().copy(
+                    containerColor = MaterialTheme.colorScheme.surfaceColorAtElevation(
+                        LocalReadTopBarTonalElevation.current.dp
+                    ),
+                    scrolledContainerColor = MaterialTheme.colorScheme.surfaceColorAtElevation(
+                        LocalReadTopBarTonalElevation.current.dp + 4.dp
+                    ),
+                ),
                 actions = {
                     AniVuIconButton(
                         enabled = uiState.articleState is ArticleState.Success,
@@ -205,7 +217,11 @@ fun ReadScreen(articleId: String, viewModel: ReadViewModel = hiltViewModel()) {
                     contentDescription = stringResource(R.string.bottom_sheet_enclosure_title),
                 )
             }
-        }
+        },
+        containerColor = MaterialTheme.colorScheme.surfaceColorAtElevation(
+            LocalAbsoluteTonalElevation.current +
+                    LocalReadContentTonalElevation.current.dp
+        ),
     ) { paddingValues ->
         Column(
             modifier = Modifier
@@ -308,13 +324,15 @@ private fun Content(
             article.article.title?.let { title ->
                 Text(
                     modifier = Modifier
+                        .padding(top = 12.dp)
                         .clip(RoundedCornerShape(6.dp))
                         .animateContentSize()
                         .clickable { expandTitle = !expandTitle },
                     text = title,
                     style = MaterialTheme.typography.titleLarge,
                     maxLines = if (expandTitle) Int.MAX_VALUE else 3,
                     overflow = TextOverflow.Ellipsis,
+                    color = MaterialTheme.colorScheme.onSurface,
                 )
             }
             val date = article.article.date
@@ -354,6 +372,7 @@ private fun Content(
         text = article.article.content.ifNullOfBlank {
             article.article.description.orEmpty()
         },
+        color = MaterialTheme.colorScheme.onSurface,
         fontSize = LocalReadTextSize.current.sp,
         onImageClick = { imageUrl -> openImageSheet = imageUrl }
     )

app/src/main/java/com/skyd/anivu/ui/screen/settings/appearance/AppearanceScreen.kt

@@ -75,6 +75,7 @@ import com.skyd.anivu.ui.local.LocalTheme
 import com.skyd.anivu.ui.screen.settings.appearance.article.ARTICLE_STYLE_SCREEN_ROUTE
 import com.skyd.anivu.ui.screen.settings.appearance.feed.FEED_STYLE_SCREEN_ROUTE
 import com.skyd.anivu.ui.screen.settings.appearance.media.MEDIA_STYLE_SCREEN_ROUTE
+import com.skyd.anivu.ui.screen.settings.appearance.read.READ_STYLE_SCREEN_ROUTE
 import com.skyd.anivu.ui.screen.settings.appearance.search.SEARCH_STYLE_SCREEN_ROUTE
 import com.skyd.anivu.ui.theme.extractColors
 
@@ -210,6 +211,14 @@ fun AppearanceScreen() {
             item {
                 CategorySettingsItem(text = stringResource(id = R.string.appearance_screen_screen_style_category))
             }
+            item {
+                BaseSettingsItem(
+                    icon = null,
+                    text = stringResource(id = R.string.feed_style_screen_name),
+                    description = null,
+                    onClick = { navController.navigate(FEED_STYLE_SCREEN_ROUTE) },
+                )
+            }
             item {
                 BaseSettingsItem(
                     icon = null,
@@ -221,9 +230,9 @@ fun AppearanceScreen() {
             item {
                 BaseSettingsItem(
                     icon = null,
-                    text = stringResource(id = R.string.feed_style_screen_name),
+                    text = stringResource(id = R.string.read_style_screen_name),
                     description = null,
-                    onClick = { navController.navigate(FEED_STYLE_SCREEN_ROUTE) },
+                    onClick = { navController.navigate(READ_STYLE_SCREEN_ROUTE) },
                 )
             }
             item {