🚀 Images Corners Roundness option

* Lets user change the roundness of corners of images Part-of: #69
2025-01-09 14:32:27 +02:00 · 2025-01-09 14:32:27 +02:00 · dbd1b2345b
commit dbd1b2345b
parent 6339e3d9c7
15 changed files with 99 additions and 30 deletions
--- a/app/src/main/java/ua/acclorite/book_story/presentation/core/constants/DataStoreConstants.kt
+++ b/app/src/main/java/ua/acclorite/book_story/presentation/core/constants/DataStoreConstants.kt
@ -48,7 +48,8 @@ object DataStoreConstants {
    val HIGHLIGHTED_READING = booleanPreferencesKey("highlighted_reading")
    val HIGHLIGHTED_READING_THICKNESS = intPreferencesKey("highlighted_reading_thickness")
    val CHAPTER_TITLE_ALIGNMENT = stringPreferencesKey("chapter_title_alignment")
-    val SHOW_IMAGES = booleanPreferencesKey("show_images")
+    val IMAGES = booleanPreferencesKey("images")
+    val IMAGES_CORNERS_ROUNDNESS = intPreferencesKey("images_corners_roundness")

    // Browse settings
    val BROWSE_FILES_STRUCTURE = stringPreferencesKey("browse_files_structure")
--- a/app/src/main/java/ua/acclorite/book_story/presentation/reader/ReaderContent.kt
+++ b/app/src/main/java/ua/acclorite/book_story/presentation/reader/ReaderContent.kt
@ -55,7 +55,8 @@ fun ReaderContent(
    bottomBarPadding: Dp,
    backgroundColor: Color,
    fontColor: Color,
-    showImages: Boolean,
+    images: Boolean,
+    imagesCornersRoundness: Dp,
    fontFamily: FontWithName,
    lineHeight: TextUnit,
    fontStyle: FontStyle,
@ -121,7 +122,8 @@ fun ReaderContent(
            bottomBarPadding = bottomBarPadding,
            backgroundColor = backgroundColor,
            fontColor = fontColor,
-            showImages = showImages,
+            images = images,
+            imagesCornersRoundness = imagesCornersRoundness,
            fontFamily = fontFamily,
            lineHeight = lineHeight,
            fontStyle = fontStyle,
--- a/app/src/main/java/ua/acclorite/book_story/presentation/reader/ReaderLayout.kt
+++ b/app/src/main/java/ua/acclorite/book_story/presentation/reader/ReaderLayout.kt
@ -48,7 +48,8 @@ fun ReaderLayout(
    sidePadding: Dp,
    backgroundColor: Color,
    fontColor: Color,
-    showImages: Boolean,
+    images: Boolean,
+    imagesCornersRoundness: Dp,
    fontFamily: FontWithName,
    lineHeight: TextUnit,
    fontStyle: FontStyle,
@ -155,7 +156,7 @@ fun ReaderLayout(
                key = { index, entry -> index }
            ) { index, entry ->
                when {
-                    !showImages && entry is ReaderText.Image -> return@itemsIndexed
+                    !images && entry is ReaderText.Image -> return@itemsIndexed
                    else -> {
                        SpacedItem(
                            index = index,
@ -165,6 +166,7 @@ fun ReaderLayout(
                                activity = activity,
                                showMenu = showMenu,
                                entry = entry,
+                                imagesCornersRoundness = imagesCornersRoundness,
                                fontFamily = fontFamily,
                                fontColor = fontColor,
                                lineHeight = lineHeight,
--- a/app/src/main/java/ua/acclorite/book_story/presentation/reader/ReaderLayoutText.kt
+++ b/app/src/main/java/ua/acclorite/book_story/presentation/reader/ReaderLayoutText.kt
@ -19,6 +19,7 @@ fun LazyItemScope.ReaderLayoutText(
    activity: ComponentActivity,
    showMenu: Boolean,
    entry: ReaderText,
+    imagesCornersRoundness: Dp,
    fontFamily: FontWithName,
    fontColor: Color,
    lineHeight: TextUnit,
@ -42,7 +43,8 @@ fun LazyItemScope.ReaderLayoutText(
        is ReaderText.Image -> {
            ReaderLayoutTextImage(
                entry = entry,
-                sidePadding = sidePadding
+                sidePadding = sidePadding,
+                imagesCornersRoundness = imagesCornersRoundness
            )
        }

--- a/app/src/main/java/ua/acclorite/book_story/presentation/reader/ReaderLayoutTextImage.kt
+++ b/app/src/main/java/ua/acclorite/book_story/presentation/reader/ReaderLayoutTextImage.kt
@ -4,8 +4,10 @@ import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyItemScope
+import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.unit.Dp
 import ua.acclorite.book_story.domain.reader.ReaderText
@ -13,7 +15,8 @@ import ua.acclorite.book_story.domain.reader.ReaderText
@Composable
 fun LazyItemScope.ReaderLayoutTextImage(
    entry: ReaderText.Image,
-    sidePadding: Dp
+    sidePadding: Dp,
+    imagesCornersRoundness: Dp
 ) {
    Image(
        modifier = Modifier
@ -22,6 +25,7 @@ fun LazyItemScope.ReaderLayoutTextImage(
                fadeOutSpec = null
            )
            .padding(horizontal = sidePadding)
+            .clip(RoundedCornerShape(imagesCornersRoundness))
            .fillMaxWidth(),
        bitmap = entry.imageBitmap,
        contentDescription = null,
--- a/app/src/main/java/ua/acclorite/book_story/presentation/reader/ReaderScaffold.kt
+++ b/app/src/main/java/ua/acclorite/book_story/presentation/reader/ReaderScaffold.kt
@ -59,7 +59,8 @@ fun ReaderScaffold(
    bottomBarPadding: Dp,
    backgroundColor: Color,
    fontColor: Color,
-    showImages: Boolean,
+    images: Boolean,
+    imagesCornersRoundness: Dp,
    fontFamily: FontWithName,
    lineHeight: TextUnit,
    fontStyle: FontStyle,
@ -152,7 +153,8 @@ fun ReaderScaffold(
            sidePadding = sidePadding,
            backgroundColor = backgroundColor,
            fontColor = fontColor,
-            showImages = showImages,
+            images = images,
+            imagesCornersRoundness = imagesCornersRoundness,
            fontFamily = fontFamily,
            lineHeight = lineHeight,
            fontStyle = fontStyle,
--- a/app/src/main/java/ua/acclorite/book_story/presentation/settings/reader/images/ImagesSubcategory.kt
+++ b/app/src/main/java/ua/acclorite/book_story/presentation/settings/reader/images/ImagesSubcategory.kt
@ -9,7 +9,8 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.stringResource
 import ua.acclorite.book_story.R
 import ua.acclorite.book_story.presentation.settings.components.SettingsSubcategory
-import ua.acclorite.book_story.presentation.settings.reader.images.components.ShowImagesOption
+import ua.acclorite.book_story.presentation.settings.reader.images.components.ImagesCornersRoundnessOption
+import ua.acclorite.book_story.presentation.settings.reader.images.components.ImagesOption

 fun LazyListScope.ImagesSubcategory(
    titleColor: @Composable () -> Color = { MaterialTheme.colorScheme.primary },
@ -24,7 +25,11 @@ fun LazyListScope.ImagesSubcategory(
        showDivider = showDivider
    ) {
        item {
-            ShowImagesOption()
+            ImagesOption()
+        }
+
+        item {
+            ImagesCornersRoundnessOption()
        }
    }
 }
--- a/app/src/main/java/ua/acclorite/book_story/presentation/settings/reader/images/components/ImagesCornersRoundnessOption.kt
+++ b/app/src/main/java/ua/acclorite/book_story/presentation/settings/reader/images/components/ImagesCornersRoundnessOption.kt
@ -0,0 +1,31 @@
+package ua.acclorite.book_story.presentation.settings.reader.images.components
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.res.stringResource
+import androidx.hilt.navigation.compose.hiltViewModel
+import androidx.lifecycle.compose.collectAsStateWithLifecycle
+import ua.acclorite.book_story.R
+import ua.acclorite.book_story.presentation.core.components.settings.SliderWithTitle
+import ua.acclorite.book_story.ui.main.MainEvent
+import ua.acclorite.book_story.ui.main.MainModel
+import ua.acclorite.book_story.ui.theme.ExpandingTransition
+
+@Composable
+fun ImagesCornersRoundnessOption() {
+    val mainModel = hiltViewModel<MainModel>()
+    val state = mainModel.state.collectAsStateWithLifecycle()
+
+    ExpandingTransition(visible = state.value.images) {
+        SliderWithTitle(
+            value = state.value.imagesCornersRoundness to "pt",
+            fromValue = 0,
+            toValue = 16,
+            title = stringResource(id = R.string.images_corners_roundness_option),
+            onValueChange = {
+                mainModel.onEvent(
+                    MainEvent.OnChangeImagesCornersRoundness(it)
+                )
+            }
+        )
+    }
+}
--- a/app/src/main/java/ua/acclorite/book_story/presentation/settings/reader/images/components/ShowImagesOption.kt
+++ b/app/src/main/java/ua/acclorite/book_story/presentation/settings/reader/images/components/ShowImagesOption.kt
@ -10,18 +10,18 @@ import ua.acclorite.book_story.ui.main.MainEvent
 import ua.acclorite.book_story.ui.main.MainModel

@Composable
-fun ShowImagesOption() {
+fun ImagesOption() {
    val mainModel = hiltViewModel<MainModel>()
    val state = mainModel.state.collectAsStateWithLifecycle()

    SwitchWithTitle(
-        selected = state.value.showImages,
-        title = stringResource(id = R.string.show_images_option),
-        description = stringResource(id = R.string.show_images_option_desc),
+        selected = state.value.images,
+        title = stringResource(id = R.string.images_option),
+        description = stringResource(id = R.string.images_option_desc),
        onClick = {
            mainModel.onEvent(
-                MainEvent.OnChangeShowImages(
-                    !state.value.showImages
+                MainEvent.OnChangeImages(
+                    !state.value.images
                )
            )
        }
--- a/app/src/main/java/ua/acclorite/book_story/ui/main/MainEvent.kt
+++ b/app/src/main/java/ua/acclorite/book_story/ui/main/MainEvent.kt
@ -50,5 +50,6 @@ sealed class MainEvent {
    data class OnChangeHighlightedReading(val value: Boolean) : MainEvent()
    data class OnChangeHighlightedReadingThickness(val value: Int) : MainEvent()
    data class OnChangeChapterTitleAlignment(val value: String) : MainEvent()
-    data class OnChangeShowImages(val value: Boolean) : MainEvent()
+    data class OnChangeImages(val value: Boolean) : MainEvent()
+    data class OnChangeImagesCornersRoundness(val value: Int) : MainEvent()
 }
--- a/app/src/main/java/ua/acclorite/book_story/ui/main/MainModel.kt
+++ b/app/src/main/java/ua/acclorite/book_story/ui/main/MainModel.kt
@ -423,11 +423,19 @@ class MainModel @Inject constructor(
                }
            )

-            is MainEvent.OnChangeShowImages -> handleDatastoreUpdate(
-                key = DataStoreConstants.SHOW_IMAGES,
+            is MainEvent.OnChangeImages -> handleDatastoreUpdate(
+                key = DataStoreConstants.IMAGES,
                value = event.value,
                updateState = {
-                    it.copy(showImages = this)
+                    it.copy(images = this)
+                }
+            )
+
+            is MainEvent.OnChangeImagesCornersRoundness -> handleDatastoreUpdate(
+                key = DataStoreConstants.IMAGES_CORNERS_ROUNDNESS,
+                value = event.value,
+                updateState = {
+                    it.copy(imagesCornersRoundness = this)
                }
            )
        }
--- a/app/src/main/java/ua/acclorite/book_story/ui/main/MainState.kt
+++ b/app/src/main/java/ua/acclorite/book_story/ui/main/MainState.kt
@ -93,7 +93,8 @@ data class MainState(
    val highlightedReading: Boolean = provideDefaultValue { false },
    val highlightedReadingThickness: Int = provideDefaultValue { 2 },
    val chapterTitleAlignment: ReaderTextAlignment = provideDefaultValue { ReaderTextAlignment.JUSTIFY },
-    val showImages: Boolean = provideDefaultValue { true },
+    val images: Boolean = provideDefaultValue { true },
+    val imagesCornersRoundness: Int = provideDefaultValue { 8 },

    // Browse Settings
    val browseFilesStructure: BrowseFilesStructure = provideDefaultValue {
@ -312,9 +313,13 @@ data class MainState(
                        CHAPTER_TITLE_ALIGNMENT, convert = { toTextAlignment() }
                    ) { chapterTitleAlignment },

-                    showImages = provideValue(
-                        SHOW_IMAGES
-                    ) { showImages },
+                    images = provideValue(
+                        IMAGES
+                    ) { images },
+
+                    imagesCornersRoundness = provideValue(
+                        IMAGES_CORNERS_ROUNDNESS
+                    ) { imagesCornersRoundness },
                )
            }
        }
--- a/app/src/main/java/ua/acclorite/book_story/ui/reader/ReaderScreen.kt
+++ b/app/src/main/java/ua/acclorite/book_story/ui/reader/ReaderScreen.kt
@ -184,6 +184,9 @@ data class ReaderScreen(val bookId: Int) : Screen, Parcelable {
                ReaderTextAlignment.END -> Alignment.End
            }
        }
+        val imagesCornersRoundness = remember(mainState.value.imagesCornersRoundness) {
+            (mainState.value.imagesCornersRoundness * 3).dp
+        }

        val layoutDirection = LocalLayoutDirection.current
        val cutoutInsets = WindowInsets.displayCutout
@ -337,7 +340,8 @@ data class ReaderScreen(val bookId: Int) : Screen, Parcelable {
            bottomBarPadding = bottomBarPadding,
            backgroundColor = backgroundColor.value,
            fontColor = fontColor.value,
-            showImages = mainState.value.showImages,
+            images = mainState.value.images,
+            imagesCornersRoundness = imagesCornersRoundness,
            fontFamily = fontFamily,
            lineHeight = lineHeight,
            fontStyle = fontStyle,
--- a/app/src/main/res/values-uk/strings.xml
+++ b/app/src/main/res/values-uk/strings.xml
@ -197,8 +197,9 @@
    <string name="highlighted_reading_option">Підсвічування слів</string>
    <string name="highlighted_reading_option_desc">Підсвічувати початок кожного слова</string>
    <string name="highlighted_reading_thickness_option">Товщина підсвічування</string>
-    <string name="show_images_option">Показувати зображення</string>
-    <string name="show_images_option_desc">Показати зображення разом із написами до них</string>
+    <string name="images_option">Зображення</string>
+    <string name="images_option_desc">Показувати зображення разом із написами до них</string>
+    <string name="images_corners_roundness_option">Округлість кутків</string>

    <!-- Browse -->
    <string name="browse_files_structure_option">Структура файлів</string>
--- a/app/src/main/res/values/strings.xml
+++ b/app/src/main/res/values/strings.xml
@ -252,8 +252,9 @@
    <string name="highlighted_reading_option">Highlight words</string>
    <string name="highlighted_reading_option_desc">Highlight the beginning of each word</string>
    <string name="highlighted_reading_thickness_option">Highlight thickness</string>
-    <string name="show_images_option">Show images</string>
-    <string name="show_images_option_desc">Display images along with their captions</string>
+    <string name="images_option">Images</string>
+    <string name="images_option_desc">Display images along with their captions</string>
+    <string name="images_corners_roundness_option">Corners roundness</string>

    <!-- Browse -->
    <string name="browse_files_structure_option">Files structure</string>