🚀 Progress Bar Padding option

* Changes vertical margins of Progress Bar Part-of: #148
Acclorite · Jan 12, 2025 · bfc5884 · bfc5884
1 parent 66ca265
commit bfc5884
Show file tree

Hide file tree

Showing 13 changed files with 73 additions and 4 deletions.
diff --git 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
@@ -54,6 +54,7 @@ object DataStoreConstants {
     val IMAGES_WIDTH = doublePreferencesKey("images_width")
     val IMAGES_COLOR_EFFECTS = stringPreferencesKey("images_color_effects")
     val PROGRESS_BAR = booleanPreferencesKey("progress_bar")
+    val PROGRESS_BAR_PADDING = intPreferencesKey("progress_bar_padding")
 
     // Browse settings
     val BROWSE_FILES_STRUCTURE = stringPreferencesKey("browse_files_structure")

diff --git 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
@@ -54,6 +54,7 @@ fun ReaderContent(
     highlightedReadingThickness: FontWeight,
     progress: String,
     progressBar: Boolean,
+    progressBarPadding: Dp,
     paragraphHeight: Dp,
     sidePadding: Dp,
     bottomBarPadding: Dp,
@@ -126,6 +127,7 @@ fun ReaderContent(
             highlightedReadingThickness = highlightedReadingThickness,
             progress = progress,
             progressBar = progressBar,
+            progressBarPadding = progressBarPadding,
             paragraphHeight = paragraphHeight,
             sidePadding = sidePadding,
             bottomBarPadding = bottomBarPadding,

diff --git 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
@@ -54,6 +54,7 @@ fun ReaderLayout(
     highlightedReadingThickness: FontWeight,
     progress: String,
     progressBar: Boolean,
+    progressBarPadding: Dp,
     paragraphHeight: Dp,
     sidePadding: Dp,
     backgroundColor: Color,
@@ -219,7 +220,9 @@ fun ReaderLayout(
             ) {
                 ReaderProgressBar(
                     progress = progress,
-                    fontColor = fontColor
+                    progressBarPadding = progressBarPadding,
+                    fontColor = fontColor,
+                    sidePadding = sidePadding
                 )
             }
         }

diff --git a/app/src/main/java/ua/acclorite/book_story/presentation/reader/ReaderProgressBar.kt b/app/src/main/java/ua/acclorite/book_story/presentation/reader/ReaderProgressBar.kt
@@ -11,17 +11,22 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.style.TextOverflow
-import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.Dp
 
 @Composable
 fun ReaderProgressBar(
     progress: String,
-    fontColor: Color
+    progressBarPadding: Dp,
+    fontColor: Color,
+    sidePadding: Dp
 ) {
     Box(
         Modifier
             .fillMaxWidth()
-            .padding(14.dp),
+            .padding(
+                horizontal = sidePadding,
+                vertical = progressBarPadding
+            ),
         contentAlignment = Alignment.Center
     ) {
         DisableSelection {

diff --git 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
@@ -58,6 +58,7 @@ fun ReaderScaffold(
     highlightedReadingThickness: FontWeight,
     progress: String,
     progressBar: Boolean,
+    progressBarPadding: Dp,
     paragraphHeight: Dp,
     sidePadding: Dp,
     bottomBarPadding: Dp,
@@ -157,6 +158,7 @@ fun ReaderScaffold(
             highlightedReadingThickness = highlightedReadingThickness,
             progress = progress,
             progressBar = progressBar,
+            progressBarPadding = progressBarPadding,
             paragraphHeight = paragraphHeight,
             sidePadding = sidePadding,
             backgroundColor = backgroundColor,

diff --git a/...java/ua/acclorite/book_story/presentation/settings/reader/progress/ProgressSubcategory.kt b/...java/ua/acclorite/book_story/presentation/settings/reader/progress/ProgressSubcategory.kt
@@ -10,6 +10,7 @@ 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.progress.components.ProgressBarOption
+import ua.acclorite.book_story.presentation.settings.reader.progress.components.ProgressBarPaddingOption
 
 fun LazyListScope.ProgressSubcategory(
     titleColor: @Composable () -> Color = { MaterialTheme.colorScheme.primary },
@@ -26,5 +27,9 @@ fun LazyListScope.ProgressSubcategory(
         item {
             ProgressBarOption()
         }
+
+        item {
+            ProgressBarPaddingOption()
+        }
     }
 }
diff --git a/...e/book_story/presentation/settings/reader/progress/components/ProgressBarPaddingOption.kt b/...e/book_story/presentation/settings/reader/progress/components/ProgressBarPaddingOption.kt
@@ -0,0 +1,31 @@
+package ua.acclorite.book_story.presentation.settings.reader.progress.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 ProgressBarPaddingOption() {
+    val mainModel = hiltViewModel<MainModel>()
+    val state = mainModel.state.collectAsStateWithLifecycle()
+
+    ExpandingTransition(visible = state.value.progressBar) {
+        SliderWithTitle(
+            value = state.value.progressBarPadding to "pt",
+            fromValue = 1,
+            toValue = 12,
+            title = stringResource(id = R.string.progress_bar_padding_option),
+            onValueChange = {
+                mainModel.onEvent(
+                    MainEvent.OnChangeProgressBarPadding(it)
+                )
+            }
+        )
+    }
+}
diff --git 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
@@ -56,4 +56,5 @@ sealed class MainEvent {
     data class OnChangeImagesWidth(val value: Float) : MainEvent()
     data class OnChangeImagesColorEffects(val value: String) : MainEvent()
     data class OnChangeProgressBar(val value: Boolean) : MainEvent()
+    data class OnChangeProgressBarPadding(val value: Int) : MainEvent()
 }
diff --git 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
@@ -472,6 +472,14 @@ class MainModel @Inject constructor(
                     it.copy(progressBar = this)
                 }
             )
+
+            is MainEvent.OnChangeProgressBarPadding -> handleDatastoreUpdate(
+                key = DataStoreConstants.PROGRESS_BAR_PADDING,
+                value = event.value,
+                updateState = {
+                    it.copy(progressBarPadding = this)
+                }
+            )
         }
     }
 

diff --git 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
@@ -103,6 +103,7 @@ data class MainState(
     val imagesWidth: Float = provideDefaultValue { 0.8f },
     val imagesColorEffects: ReaderColorEffects = provideDefaultValue { ReaderColorEffects.OFF },
     val progressBar: Boolean = provideDefaultValue { false },
+    val progressBarPadding: Int = provideDefaultValue { 4 },
 
     // Browse Settings
     val browseFilesStructure: BrowseFilesStructure = provideDefaultValue {
@@ -344,6 +345,10 @@ data class MainState(
                     progressBar = provideValue(
                         PROGRESS_BAR
                     ) { progressBar },
+
+                    progressBarPadding = provideValue(
+                        PROGRESS_BAR_PADDING
+                    ) { progressBarPadding },
                 )
             }
         }

diff --git 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
@@ -221,6 +221,9 @@ data class ReaderScreen(val bookId: Int) : Screen, Parcelable {
                 )
             }
         }
+        val progressBarPadding = remember(mainState.value.progressBarPadding) {
+            (mainState.value.progressBarPadding * 3).dp
+        }
 
         val layoutDirection = LocalLayoutDirection.current
         val cutoutInsets = WindowInsets.displayCutout
@@ -391,6 +394,7 @@ data class ReaderScreen(val bookId: Int) : Screen, Parcelable {
             highlightedReadingThickness = highlightedReadingThickness,
             progress = progress.value,
             progressBar = mainState.value.progressBar,
+            progressBarPadding = progressBarPadding,
             paragraphHeight = paragraphHeight,
             sidePadding = sidePadding,
             bottomBarPadding = bottomBarPadding,

diff --git a/app/src/main/res/values-uk/strings.xml b/app/src/main/res/values-uk/strings.xml
@@ -205,6 +205,7 @@
     <string name="images_width_option">Розмір</string>
     <string name="images_color_effects_option">Ефекти кольору</string>
     <string name="progress_bar_option">Панель прогресу</string>
+    <string name="progress_bar_padding_option">Поля</string>
 
     <!-- Browse -->
     <string name="browse_files_structure_option">Структура файлів</string>

diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
@@ -260,6 +260,7 @@
     <string name="images_width_option">Size</string>
     <string name="images_color_effects_option">Color effects</string>
     <string name="progress_bar_option">Progress bar</string>
+    <string name="progress_bar_padding_option">Margins</string>
 
     <!-- Browse -->
     <string name="browse_files_structure_option">Files structure</string>